Bug 1492613 - Use document.createXULElement in performance tool and scratchpad when we explicitly expect XUL elements to be returned;r=jdescottes
authorBrian Grinstead <bgrinstead@mozilla.com>
Wed, 10 Oct 2018 15:18:59 +0000
changeset 440490 73c8dbc2512cd89f694ca9fb3c9692459a6a1f13
parent 440489 3ca5afad36517c9cd2ce76a8ebc06c1b65620555
child 440491 cc1d49fd799c50999eca236c3b965e27779d1440
push id70695
push userbgrinstead@mozilla.com
push dateWed, 10 Oct 2018 15:34:45 +0000
treeherderautoland@73c8dbc2512c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1492613
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1492613 - Use document.createXULElement in performance tool and scratchpad when we explicitly expect XUL elements to be returned;r=jdescottes Differential Revision: https://phabricator.services.mozilla.com/D8236
devtools/client/performance/modules/marker-dom-utils.js
devtools/client/performance/views/toolbar.js
devtools/client/scratchpad/scratchpad.js
devtools/client/shared/widgets/SideMenuWidget.jsm
--- a/devtools/client/performance/modules/marker-dom-utils.js
+++ b/devtools/client/performance/modules/marker-dom-utils.js
@@ -110,17 +110,17 @@ exports.MarkerDOMUtils = {
    * @param object params
    *        An options object with the following members:
    *          - string type: string identifier for type of stack ("stack", "startStack"
                              or "endStack"
    *          - number frameIndex: the index of the topmost stack frame
    *          - array frames: array of stack frames
    */
   buildStackTrace: function(doc, { type, frameIndex, frames }) {
-    const container = doc.createElement("vbox");
+    const container = doc.createXULElement("vbox");
     container.className = "marker-details-stack";
     container.setAttribute("type", type);
 
     const nameLabel = doc.createElement("label");
     nameLabel.className = "plain marker-details-name-label";
     nameLabel.setAttribute("value", L10N.getStr(`marker.field.${type}`));
     container.appendChild(nameLabel);
 
--- a/devtools/client/performance/views/toolbar.js
+++ b/devtools/client/performance/views/toolbar.js
@@ -55,17 +55,17 @@ var ToolbarView = {
     this.optionsView.destroy();
   },
 
   /**
    * Creates the timeline markers filter popup.
    */
   _buildMarkersFilterPopup: function() {
     for (const [markerName, markerDetails] of Object.entries(TIMELINE_BLUEPRINT)) {
-      const menuitem = document.createElement("menuitem");
+      const menuitem = document.createXULElement("menuitem");
       menuitem.setAttribute("closemenu", "none");
       menuitem.setAttribute("type", "checkbox");
       menuitem.setAttribute("align", "center");
       menuitem.setAttribute("flex", "1");
       menuitem.setAttribute("label",
                             MarkerBlueprintUtils.getMarkerGenericName(markerName));
       menuitem.setAttribute("marker-type", markerName);
       menuitem.className = `marker-color-${markerDetails.colorName}`;
--- a/devtools/client/scratchpad/scratchpad.js
+++ b/devtools/client/scratchpad/scratchpad.js
@@ -1280,31 +1280,31 @@ var Scratchpad = {
       recentFilesPopup.firstChild.remove();
     }
 
     if (filePaths.length > 0) {
       recentFilesMenu.removeAttribute("disabled");
 
       // Print out menuitems with the most recent file first.
       for (let i = filePaths.length - 1; i >= 0; --i) {
-        const menuitem = document.createElement("menuitem");
+        const menuitem = document.createXULElement("menuitem");
         menuitem.setAttribute("type", "radio");
         menuitem.setAttribute("label", filePaths[i]);
 
         if (filePaths[i] === filename) {
           menuitem.setAttribute("checked", true);
           menuitem.setAttribute("disabled", true);
         }
 
         menuitem.addEventListener("command", Scratchpad.openFile.bind(Scratchpad, i));
         recentFilesPopup.appendChild(menuitem);
       }
 
-      recentFilesPopup.appendChild(document.createElement("menuseparator"));
-      const clearItems = document.createElement("menuitem");
+      recentFilesPopup.appendChild(document.createXULElement("menuseparator"));
+      const clearItems = document.createXULElement("menuitem");
       clearItems.setAttribute("id", "sp-menu-clear_recent");
       clearItems.setAttribute("label",
                               this.strings
                               .GetStringFromName("clearRecentMenuItems.label"));
       clearItems.setAttribute("command", "sp-cmd-clearRecentFiles");
       recentFilesPopup.appendChild(clearItems);
     }
   },
--- a/devtools/client/shared/widgets/SideMenuWidget.jsm
+++ b/devtools/client/shared/widgets/SideMenuWidget.jsm
@@ -40,17 +40,17 @@ this.SideMenuWidget = function SideMenuW
 
   const { contextMenu, showArrows, showItemCheckboxes, showGroupCheckboxes } = aOptions;
   this._contextMenu = contextMenu || null;
   this._showArrows = showArrows || false;
   this._showItemCheckboxes = showItemCheckboxes || false;
   this._showGroupCheckboxes = showGroupCheckboxes || false;
 
   // Create an internal scrollbox container.
-  this._list = this.document.createElement("scrollbox");
+  this._list = this.document.createXULElement("scrollbox");
   this._list.className = "side-menu-widget-container theme-sidebar";
   this._list.setAttribute("flex", "1");
   this._list.setAttribute("orient", "vertical");
   this._list.setAttribute("with-arrows", this._showArrows);
   this._list.setAttribute("with-item-checkboxes", this._showItemCheckboxes);
   this._list.setAttribute("with-group-checkboxes", this._showGroupCheckboxes);
   this._list.setAttribute("tabindex", "0");
   this._list.addEventListener("contextmenu", e => this._showContextMenu(e));
@@ -314,17 +314,17 @@ SideMenuWidget.prototype = {
 
   /**
    * Creates and appends a label signaling that this container is empty.
    */
   _showEmptyText: function() {
     if (this._emptyTextNode || !this._emptyTextValue) {
       return;
     }
-    const label = this.document.createElement("label");
+    const label = this.document.createXULElement("label");
     label.className = "plain side-menu-widget-empty-text";
     label.setAttribute("value", this._emptyTextValue);
 
     this._parent.insertBefore(label, this._list);
     this._emptyTextNode = label;
   },
 
   /**
@@ -451,27 +451,27 @@ SideMenuWidget.prototype = {
 function SideMenuGroup(aWidget, aName, aOptions = {}) {
   this.document = aWidget.document;
   this.window = aWidget.window;
   this.ownerView = aWidget;
   this.identifier = aName;
 
   // Create an internal title and list container.
   if (aName) {
-    const target = this._target = this.document.createElement("vbox");
+    const target = this._target = this.document.createXULElement("vbox");
     target.className = "side-menu-widget-group";
     target.setAttribute("name", aName);
 
-    const list = this._list = this.document.createElement("vbox");
+    const list = this._list = this.document.createXULElement("vbox");
     list.className = "side-menu-widget-group-list";
 
-    const title = this._title = this.document.createElement("hbox");
+    const title = this._title = this.document.createXULElement("hbox");
     title.className = "side-menu-widget-group-title";
 
-    const name = this._name = this.document.createElement("label");
+    const name = this._name = this.document.createXULElement("label");
     name.className = "plain name";
     name.setAttribute("value", aName);
     name.setAttribute("crop", "end");
     name.setAttribute("flex", "1");
 
     // Show a checkbox before the content.
     if (aOptions.showCheckbox) {
       const checkbox = this._checkbox = makeCheckbox(title, {
@@ -481,17 +481,17 @@ function SideMenuGroup(aWidget, aName, a
       checkbox.className = "side-menu-widget-group-checkbox";
     }
 
     title.appendChild(name);
     target.appendChild(title);
     target.appendChild(list);
   } else {
     // Skip a few redundant nodes when no title is shown.
-    const target = this._target = this._list = this.document.createElement("vbox");
+    const target = this._target = this._list = this.document.createXULElement("vbox");
     target.className = "side-menu-widget-group side-menu-widget-group-list";
     target.setAttribute("merged-group-contents", "");
   }
 }
 
 SideMenuGroup.prototype = {
   get _orderedGroupElementsArray() {
     return this.ownerView._orderedGroupElementsArray;
@@ -568,39 +568,39 @@ SideMenuGroup.prototype = {
  *          - showCheckbox: specifies if a checkbox should be displayed.
  */
 function SideMenuItem(aGroup, aContents, aAttachment = {}, aOptions = {}) {
   this.document = aGroup.document;
   this.window = aGroup.window;
   this.ownerView = aGroup;
 
   if (aOptions.showArrow || aOptions.showCheckbox) {
-    const container = this._container = this.document.createElement("hbox");
+    const container = this._container = this.document.createXULElement("hbox");
     container.className = "side-menu-widget-item";
 
-    const target = this._target = this.document.createElement("vbox");
+    const target = this._target = this.document.createXULElement("vbox");
     target.className = "side-menu-widget-item-contents";
 
     // Show a checkbox before the content.
     if (aOptions.showCheckbox) {
       const checkbox = this._checkbox = makeCheckbox(container, aAttachment);
       checkbox.className = "side-menu-widget-item-checkbox";
     }
 
     container.appendChild(target);
 
     // Show a horizontal arrow towards the content.
     if (aOptions.showArrow) {
-      const arrow = this._arrow = this.document.createElement("hbox");
+      const arrow = this._arrow = this.document.createXULElement("hbox");
       arrow.className = "side-menu-widget-item-arrow";
       container.appendChild(arrow);
     }
   } else {
     // Skip a few redundant nodes when no horizontal arrow or checkbox is shown.
-    const target = this._target = this._container = this.document.createElement("hbox");
+    const target = this._target = this._container = this.document.createXULElement("hbox");
     target.className = "side-menu-widget-item side-menu-widget-item-contents";
     target.setAttribute("merged-item-contents", "");
   }
 
   this._target.setAttribute("flex", "1");
   this.contents = aContents;
 }
 
@@ -687,17 +687,17 @@ SideMenuItem.prototype = {
  *        The parent node to contain this checkbox.
  * @param object aOptions
  *        An object containing some or all of the following properties:
  *          - description: defaults to "item" if unspecified
  *          - checkboxState: true for checked, false for unchecked
  *          - checkboxTooltip: the tooltip text of the checkbox
  */
 function makeCheckbox(aParentNode, aOptions) {
-  const checkbox = aParentNode.ownerDocument.createElement("checkbox");
+  const checkbox = aParentNode.ownerDocument.createXULElement("checkbox");
 
   checkbox.setAttribute("tooltiptext", aOptions.checkboxTooltip || "");
 
   if (aOptions.checkboxState) {
     checkbox.setAttribute("checked", true);
   } else {
     checkbox.removeAttribute("checked");
   }