Bug 1485426 - Use createXULElement instead of createElement in XUL docs. r=bgrins
authorBrendan Dahl <bdahl@mozilla.com>
Sat, 25 Aug 2018 00:16:27 +0000
changeset 481714 3bc799b58c46ae66563ffc0f1b8f7b206b7dc587
parent 481713 d3e3d5942e1b4a70963157c7000816c3ca0e604f
child 481715 2d747f83e53768f5a0ce1200e954378cfdc5bf3e
push id232
push userfmarier@mozilla.com
push dateWed, 05 Sep 2018 20:45:54 +0000
reviewersbgrins
bugs1485426
milestone63.0a1
Bug 1485426 - Use createXULElement instead of createElement in XUL docs. r=bgrins Preparing for transitioning to XHTML. MozReview-Commit-ID: JLlmUxsvhIB Differential Revision: https://phabricator.services.mozilla.com/D4265
browser/base/content/browser-pageActions.js
browser/base/content/pageinfo/feeds.js
browser/base/content/pageinfo/permissions.js
browser/base/content/tabbrowser.xml
browser/base/content/test/contextMenu/browser_utilityOverlay.js
browser/base/content/test/general/browser_accesskeys.js
browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
browser/base/content/test/general/browser_tabbar_big_widgets.js
browser/base/content/test/permissions/browser_reservedkey.js
browser/base/content/test/popupNotifications/browser_popupNotification_2.js
browser/base/content/test/popupNotifications/browser_popupNotification_3.js
browser/base/content/test/tabPrompts/browser_closeTabSpecificPanels.js
browser/base/content/utilityOverlay.js
browser/components/customizableui/CustomizeMode.jsm
browser/components/customizableui/content/panelUI.js
browser/components/customizableui/test/browser_918049_skipintoolbarset_dnd.js
browser/components/customizableui/test/browser_940013_registerToolbarNode_calls_registerArea.js
browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
browser/components/customizableui/test/browser_963639_customizing_attribute_non_customizable_toolbar.js
browser/components/customizableui/test/browser_978084_dragEnd_after_move.js
browser/components/customizableui/test/browser_981305_separator_insertion.js
browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
browser/components/customizableui/test/browser_996635_remove_non_widgets.js
browser/components/customizableui/test/browser_PanelMultiView.js
browser/components/customizableui/test/browser_bootstrapped_custom_toolbar.js
browser/components/customizableui/test/browser_insert_before_moved_node.js
browser/components/downloads/content/allDownloadsView.js
browser/components/downloads/content/downloads.js
browser/components/extensions/ExtensionControlledPopup.jsm
browser/components/extensions/ExtensionPopups.jsm
browser/components/extensions/parent/ext-menus.js
browser/components/extensions/parent/ext-tabs.js
browser/components/extensions/test/browser/browser_ExtensionControlledPopup.js
browser/components/places/content/browserPlacesViews.js
browser/components/places/content/editBookmark.js
browser/components/places/tests/browser/browser_sort_in_library.js
browser/components/preferences/applicationManager.js
browser/components/preferences/containers.js
browser/components/preferences/in-content/containers.js
browser/components/preferences/in-content/extensionControlled.js
browser/components/preferences/in-content/findInPage.js
browser/components/preferences/in-content/main.js
browser/components/preferences/languages.js
browser/components/preferences/permissions.js
browser/components/preferences/siteDataRemoveSelected.js
browser/components/preferences/siteDataSettings.js
browser/components/preferences/sitePermissions.js
browser/components/uitour/UITour.jsm
browser/extensions/formautofill/FormAutofillDoorhanger.jsm
browser/modules/ProcessHangMonitor.jsm
browser/modules/webrtcUI.jsm
devtools/client/framework/browser-menus.js
devtools/client/framework/toolbox-hosts.js
devtools/client/framework/toolbox.js
dom/html/test/browser_bug1081537.js
security/manager/pki/resources/content/certViewer.js
security/manager/pki/resources/content/clientauthask.js
security/manager/pki/resources/content/deletecert.js
security/manager/pki/resources/content/device_manager.js
toolkit/components/apppicker/content/appPicker.js
toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
toolkit/components/normandy/lib/Heartbeat.jsm
toolkit/components/passwordmgr/LoginManagerContextMenu.jsm
toolkit/components/passwordmgr/test/unit/test_context_menu.js
toolkit/content/widgets/autocomplete.xml
toolkit/content/widgets/datetimepopup.xml
toolkit/content/widgets/videocontrols.xml
toolkit/modules/InlineSpellChecker.jsm
toolkit/modules/PageMenu.jsm
toolkit/modules/SelectParentHelper.jsm
toolkit/mozapps/extensions/content/blocklist.js
toolkit/mozapps/extensions/content/extensions.js
toolkit/mozapps/preferences/fontbuilder.js
--- a/browser/base/content/browser-pageActions.js
+++ b/browser/base/content/browser-pageActions.js
@@ -1231,17 +1231,17 @@ BrowserPageActions.shareURL = {
       item.setAttribute("label", share.menuItemTitle);
       item.setAttribute("share-name", share.name);
       item.setAttribute("image", share.image);
       item.classList.add("subviewbutton", "subviewbutton-iconic");
       item.addEventListener("command", onCommand);
       fragment.appendChild(item);
     });
 
-    let item = document.createElement("toolbarbutton");
+    let item = document.createXULElement("toolbarbutton");
     item.setAttribute("label", BrowserPageActions.panelNode.getAttribute("shareMore-label"));
     item.classList.add("subviewbutton", "subviewbutton-iconic", "share-more-button");
     item.addEventListener("command", onCommand);
     fragment.appendChild(item);
 
     while (bodyNode.firstChild) {
       bodyNode.firstChild.remove();
     }
--- a/browser/base/content/pageinfo/feeds.js
+++ b/browser/base/content/pageinfo/feeds.js
@@ -12,48 +12,48 @@ function initFeedTab(feeds) {
     addRow(name, type, url);
   }
 
   const feedListbox = document.getElementById("feedListbox");
   document.getElementById("feedTab").hidden = feedListbox.getRowCount() == 0;
 }
 
 function addRow(name, type, url) {
-  const item = document.createElement("richlistitem");
+  const item = document.createXULElement("richlistitem");
 
-  const top = document.createElement("hbox");
+  const top = document.createXULElement("hbox");
   top.setAttribute("flex", "1");
   item.appendChild(top);
 
-  const bottom = document.createElement("hbox");
+  const bottom = document.createXULElement("hbox");
   bottom.setAttribute("flex", "1");
   item.appendChild(bottom);
 
-  const nameLabel = document.createElement("label");
+  const nameLabel = document.createXULElement("label");
   nameLabel.className = "feedTitle";
   nameLabel.textContent = name;
   nameLabel.setAttribute("flex", "1");
   top.appendChild(nameLabel);
 
-  const typeLabel = document.createElement("label");
+  const typeLabel = document.createXULElement("label");
   typeLabel.textContent = type;
   top.appendChild(typeLabel);
 
-  const urlContainer = document.createElement("hbox");
+  const urlContainer = document.createXULElement("hbox");
   urlContainer.setAttribute("flex", "1");
   bottom.appendChild(urlContainer);
 
-  const urlLabel = document.createElement("label");
+  const urlLabel = document.createXULElement("label");
   urlLabel.className = "text-link";
   urlLabel.textContent = url;
   urlLabel.setAttribute("tooltiptext", url);
   urlLabel.addEventListener("click", ev => openUILink(this.value, ev, {triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({})}));
   urlContainer.appendChild(urlLabel);
 
-  const subscribeButton = document.createElement("button");
+  const subscribeButton = document.createXULElement("button");
   subscribeButton.className = "feed-subscribe";
   subscribeButton.addEventListener("click",
     () => openWebLinkIn(url, "current", { ignoreAlt: true }));
   subscribeButton.setAttribute("label", gBundle.getString("feedSubscribe"));
   subscribeButton.setAttribute("accesskey", gBundle.getString("feedSubscribe.accesskey"));
   bottom.appendChild(subscribeButton);
 
   document.getElementById("feedListbox").appendChild(item);
--- a/browser/base/content/pageinfo/permissions.js
+++ b/browser/base/content/pageinfo/permissions.js
@@ -109,51 +109,51 @@ function createRow(aPartId) {
   let rowId = "perm-" + aPartId + "-row";
   if (document.getElementById(rowId))
     return;
 
   let commandId = "cmd_" + aPartId + "Toggle";
   let labelId = "perm-" + aPartId + "-label";
   let radiogroupId = aPartId + "RadioGroup";
 
-  let command = document.createElement("command");
+  let command = document.createXULElement("command");
   command.setAttribute("id", commandId);
   command.setAttribute("oncommand", "onRadioClick('" + aPartId + "');");
   document.getElementById("pageInfoCommandSet").appendChild(command);
 
-  let row = document.createElement("vbox");
+  let row = document.createXULElement("vbox");
   row.setAttribute("id", rowId);
   row.setAttribute("class", "permission");
 
-  let label = document.createElement("label");
+  let label = document.createXULElement("label");
   label.setAttribute("id", labelId);
   label.setAttribute("control", radiogroupId);
   label.setAttribute("value", SitePermissions.getPermissionLabel(aPartId));
   label.setAttribute("class", "permissionLabel");
   row.appendChild(label);
 
-  let controls = document.createElement("hbox");
+  let controls = document.createXULElement("hbox");
   controls.setAttribute("role", "group");
   controls.setAttribute("aria-labelledby", labelId);
 
-  let checkbox = document.createElement("checkbox");
+  let checkbox = document.createXULElement("checkbox");
   checkbox.setAttribute("id", aPartId + "Def");
   checkbox.setAttribute("oncommand", "onCheckboxClick('" + aPartId + "');");
   checkbox.setAttribute("label", gBundle.getString("permissions.useDefault"));
   controls.appendChild(checkbox);
 
-  let spacer = document.createElement("spacer");
+  let spacer = document.createXULElement("spacer");
   spacer.setAttribute("flex", "1");
   controls.appendChild(spacer);
 
-  let radiogroup = document.createElement("radiogroup");
+  let radiogroup = document.createXULElement("radiogroup");
   radiogroup.setAttribute("id", radiogroupId);
   radiogroup.setAttribute("orient", "horizontal");
   for (let state of SitePermissions.getAvailableStates(aPartId)) {
-    let radio = document.createElement("radio");
+    let radio = document.createXULElement("radio");
     radio.setAttribute("id", aPartId + "#" + state);
     radio.setAttribute("label", SitePermissions.getMultichoiceStateLabel(state));
     radio.setAttribute("command", commandId);
     radiogroup.appendChild(radio);
   }
   controls.appendChild(radiogroup);
 
   row.appendChild(controls);
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -1270,17 +1270,17 @@
               dt.updateDragImage(canvas, dragImageOffset, dragImageOffset);
             };
           } else {
             // Create a panel to use it in setDragImage
             // which will tell xul to render a panel that follows
             // the pointer while a dnd session is on.
             if (!this._dndPanel) {
               this._dndCanvas = canvas;
-              this._dndPanel = document.createElement("panel");
+              this._dndPanel = document.createXULElement("panel");
               this._dndPanel.className = "dragfeedback-tab";
               this._dndPanel.setAttribute("type", "drag");
               let wrapper = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
               wrapper.style.width = "160px";
               wrapper.style.height = "90px";
               wrapper.appendChild(canvas);
               this._dndPanel.appendChild(wrapper);
               document.documentElement.appendChild(this._dndPanel);
--- a/browser/base/content/test/contextMenu/browser_utilityOverlay.js
+++ b/browser/base/content/test/contextMenu/browser_utilityOverlay.js
@@ -31,42 +31,42 @@ function test_eventMatchesKey() {
   let checkEvent = function(e) {
     e.stopPropagation();
     e.preventDefault();
     eventMatchResult = eventMatchesKey(e, key);
   };
   document.addEventListener("keypress", checkEvent);
 
   try {
-    key = document.createElement("key");
+    key = document.createXULElement("key");
     let keyset = document.getElementById("mainKeyset");
     key.setAttribute("key", "t");
     key.setAttribute("modifiers", "accel");
     keyset.appendChild(key);
     EventUtils.synthesizeKey("t", {accelKey: true});
     is(eventMatchResult, true, "eventMatchesKey: one modifier");
     keyset.removeChild(key);
 
-    key = document.createElement("key");
+    key = document.createXULElement("key");
     key.setAttribute("key", "g");
     key.setAttribute("modifiers", "accel,shift");
     keyset.appendChild(key);
     EventUtils.synthesizeKey("g", {accelKey: true, shiftKey: true});
     is(eventMatchResult, true, "eventMatchesKey: combination modifiers");
     keyset.removeChild(key);
 
-    key = document.createElement("key");
+    key = document.createXULElement("key");
     key.setAttribute("key", "w");
     key.setAttribute("modifiers", "accel");
     keyset.appendChild(key);
     EventUtils.synthesizeKey("f", {accelKey: true});
     is(eventMatchResult, false, "eventMatchesKey: mismatch keys");
     keyset.removeChild(key);
 
-    key = document.createElement("key");
+    key = document.createXULElement("key");
     key.setAttribute("keycode", "VK_DELETE");
     keyset.appendChild(key);
     EventUtils.synthesizeKey("VK_DELETE", {accelKey: true});
     is(eventMatchResult, false, "eventMatchesKey: mismatch modifiers");
     keyset.removeChild(key);
   } finally {
     // Make sure to remove the event listener so future tests don't
     // fail when they simulate key presses.
--- a/browser/base/content/test/general/browser_accesskeys.js
+++ b/browser/base/content/test/general/browser_accesskeys.js
@@ -16,17 +16,17 @@ add_task(async function() {
   let focusedId = await performAccessKey("y");
   is(focusedId, "button", "button accesskey");
 
   // Press an accesskey in the child document while the content document is focused.
   focusedId = await performAccessKey("z");
   is(focusedId, "checkbox", "checkbox accesskey");
 
   // Add an element with an accesskey to the chrome and press its accesskey while the chrome is focused.
-  let newButton = document.createElement("button");
+  let newButton = document.createXULElement("button");
   newButton.id = "chromebutton";
   newButton.setAttribute("accesskey", "z");
   document.documentElement.appendChild(newButton);
 
   Services.focus.clearFocus(window);
 
   focusedId = await performAccessKeyForChrome("z");
   is(focusedId, "chromebutton", "chromebutton accesskey");
--- a/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
+++ b/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
@@ -76,22 +76,22 @@ function popupShown(event)
   ++i;
 
   currentTest.result(currentTest.testname + " ", panel);
   panel.hidePopup();
 }
 
 function createPanel(attrs)
 {
-  var panel = document.createElement("panel");
+  var panel = document.createXULElement("panel");
   for (var a in attrs) {
     panel.setAttribute(a, attrs[a]);
   }
 
-  var button = document.createElement("button");
+  var button = document.createXULElement("button");
   panel.appendChild(button);
   button.label = "OK";
   button.width = 120;
   button.height = 40;
   button.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
   panel.setAttribute("style", "-moz-appearance: none; border: 0; margin: 0;");
   return document.documentElement.appendChild(panel);
 }
--- a/browser/base/content/test/general/browser_tabbar_big_widgets.js
+++ b/browser/base/content/test/general/browser_tabbar_big_widgets.js
@@ -3,17 +3,17 @@
  */
 
 const kButtonId = "test-tabbar-size-with-large-buttons";
 
 function test() {
   registerCleanupFunction(cleanup);
   let titlebar = document.getElementById("titlebar");
   let originalHeight = titlebar.getBoundingClientRect().height;
-  let button = document.createElement("toolbarbutton");
+  let button = document.createXULElement("toolbarbutton");
   button.id = kButtonId;
   button.setAttribute("style", "min-height: 100px");
   gNavToolbox.palette.appendChild(button);
   CustomizableUI.addWidgetToArea(kButtonId, CustomizableUI.AREA_TABSTRIP);
   let currentHeight = titlebar.getBoundingClientRect().height;
   ok(currentHeight > originalHeight, "Titlebar should have grown");
   CustomizableUI.removeWidgetFromArea(kButtonId);
   currentHeight = titlebar.getBoundingClientRect().height;
--- a/browser/base/content/test/permissions/browser_reservedkey.js
+++ b/browser/base/content/test/permissions/browser_reservedkey.js
@@ -1,52 +1,52 @@
 add_task(async function test_reserved_shortcuts() {
-  let keyset = document.createElement("keyset");
-  let key1 = document.createElement("key");
+  let keyset = document.createXULElement("keyset");
+  let key1 = document.createXULElement("key");
   key1.setAttribute("id", "kt_reserved");
   key1.setAttribute("modifiers", "shift");
   key1.setAttribute("key", "O");
   key1.setAttribute("reserved", "true");
   key1.setAttribute("count", "0");
   // We need to have the attribute "oncommand" for the "command" listener to fire
   key1.setAttribute("oncommand", "//");
   key1.addEventListener("command", () => {
     let attribute = key1.getAttribute("count");
     key1.setAttribute("count", Number(attribute) + 1);
   });
 
-  let key2 = document.createElement("key");
+  let key2 = document.createXULElement("key");
   key2.setAttribute("id", "kt_notreserved");
   key2.setAttribute("modifiers", "shift");
   key2.setAttribute("key", "P");
   key2.setAttribute("reserved", "false");
   key2.setAttribute("count", "0");
   // We need to have the attribute "oncommand" for the "command" listener to fire
   key2.setAttribute("oncommand", "//");
   key2.addEventListener("command", () => {
     let attribute = key2.getAttribute("count");
     key2.setAttribute("count", Number(attribute) + 1);
   });
 
-  let key3 = document.createElement("key");
+  let key3 = document.createXULElement("key");
   key3.setAttribute("id", "kt_reserveddefault");
   key3.setAttribute("modifiers", "shift");
   key3.setAttribute("key", "Q");
   key3.setAttribute("count", "0");
   // We need to have the attribute "oncommand" for the "command" listener to fire
   key3.setAttribute("oncommand", "//");
   key3.addEventListener("command", () => {
     let attribute = key3.getAttribute("count");
     key3.setAttribute("count", Number(attribute) + 1);
   });
 
   keyset.appendChild(key1);
   keyset.appendChild(key2);
   keyset.appendChild(key3);
-  let container = document.createElement("box");
+  let container = document.createXULElement("box");
   container.appendChild(keyset);
   document.documentElement.appendChild(container);
 
   const pageUrl = "data:text/html,<body onload='document.body.firstElementChild.focus();'><div onkeydown='event.preventDefault();' tabindex=0>Test</div></body>";
   let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, pageUrl);
 
   EventUtils.sendString("OPQ");
 
--- a/browser/base/content/test/popupNotifications/browser_popupNotification_2.js
+++ b/browser/base/content/test/popupNotifications/browser_popupNotification_2.js
@@ -135,20 +135,20 @@ var tests = [
       gBrowser.selectedTab = this.oldSelectedTab;
     }
   },
 
   // Test that nested icon nodes correctly activate popups
   { id: "Test#6",
     run() {
       // Add a temporary box as the anchor with a button
-      this.box = document.createElement("box");
+      this.box = document.createXULElement("box");
       PopupNotifications.iconBox.appendChild(this.box);
 
-      let button = document.createElement("button");
+      let button = document.createXULElement("button");
       button.setAttribute("label", "Please click me!");
       this.box.appendChild(button);
 
       // The notification should open up on the box
       this.notifyObj = new BasicNotification(this.id);
       this.notifyObj.anchorID = this.box.id = "nested-box";
       this.notifyObj.addOptions({dismissed: true});
       this.notification = showNotification(this.notifyObj);
--- a/browser/base/content/test/popupNotifications/browser_popupNotification_3.js
+++ b/browser/base/content/test/popupNotifications/browser_popupNotification_3.js
@@ -192,17 +192,17 @@ var tests = [
     }
   },
   // Popup notification anchor shouldn't disappear when a notification with the same ID is re-added in a background tab
   { id: "Test#8",
     async run() {
       await promiseTabLoadEvent(gBrowser.selectedTab, "http://example.com/");
       let originalTab = gBrowser.selectedTab;
       let bgTab = await BrowserTestUtils.openNewForegroundTab(gBrowser, "http://example.com/");
-      let anchor = document.createElement("box");
+      let anchor = document.createXULElement("box");
       anchor.id = "test26-anchor";
       anchor.className = "notification-anchor-icon";
       PopupNotifications.iconBox.appendChild(anchor);
 
       gBrowser.selectedTab = originalTab;
 
       let fgNotifyObj = new BasicNotification(this.id);
       fgNotifyObj.anchorID = anchor.id;
--- a/browser/base/content/test/tabPrompts/browser_closeTabSpecificPanels.js
+++ b/browser/base/content/test/tabPrompts/browser_closeTabSpecificPanels.js
@@ -5,19 +5,19 @@
  * and one that isn't. When a tab loses focus, panel specific to that tab should close.
  * The non-specific panel should remain open.
  *
  */
 
 add_task(async function() {
   let tab1 = BrowserTestUtils.addTab(gBrowser, "http://mochi.test:8888/#0");
   let tab2 = BrowserTestUtils.addTab(gBrowser, "http://mochi.test:8888/#1");
-  let specificPanel = document.createElement("panel");
+  let specificPanel = document.createXULElement("panel");
   specificPanel.setAttribute("tabspecific", "true");
-  let generalPanel = document.createElement("panel");
+  let generalPanel = document.createXULElement("panel");
   let anchor = document.getElementById(CustomizableUI.AREA_NAVBAR);
 
   anchor.appendChild(specificPanel);
   anchor.appendChild(generalPanel);
   is(specificPanel.state, "closed", "specificPanel starts as closed");
   is(generalPanel.state, "closed", "generalPanel starts as closed");
 
   let specificPanelPromise = BrowserTestUtils.waitForEvent(specificPanel, "popupshown");
--- a/browser/base/content/utilityOverlay.js
+++ b/browser/base/content/utilityOverlay.js
@@ -616,37 +616,37 @@ function createUserContextMenu(event, {
     event.target.firstChild.remove();
   }
 
   let bundle = Services.strings.createBundle("chrome://browser/locale/browser.properties");
   let docfrag = document.createDocumentFragment();
 
   // If we are excluding a userContextId, we want to add a 'no-container' item.
   if (excludeUserContextId || showDefaultTab) {
-    let menuitem = document.createElement("menuitem");
+    let menuitem = document.createXULElement("menuitem");
     menuitem.setAttribute("data-usercontextid", "0");
     menuitem.setAttribute("label", bundle.GetStringFromName("userContextNone.label"));
     menuitem.setAttribute("accesskey", bundle.GetStringFromName("userContextNone.accesskey"));
 
     // We don't set an oncommand/command attribute because if we have
     // to exclude a userContextId we are generating the contextMenu and
     // isContextMenu will be true.
 
     docfrag.appendChild(menuitem);
 
-    let menuseparator = document.createElement("menuseparator");
+    let menuseparator = document.createXULElement("menuseparator");
     docfrag.appendChild(menuseparator);
   }
 
   ContextualIdentityService.getPublicIdentities().forEach(identity => {
     if (identity.userContextId == excludeUserContextId) {
       return;
     }
 
-    let menuitem = document.createElement("menuitem");
+    let menuitem = document.createXULElement("menuitem");
     menuitem.setAttribute("data-usercontextid", identity.userContextId);
     menuitem.setAttribute("label", ContextualIdentityService.getUserContextLabel(identity.userContextId));
 
     if (identity.accessKey && useAccessKeys) {
       menuitem.setAttribute("accesskey", bundle.GetStringFromName(identity.accessKey));
     }
 
     menuitem.classList.add("menuitem-iconic");
@@ -657,19 +657,19 @@ function createUserContextMenu(event, {
     }
 
     menuitem.setAttribute("data-identity-icon", identity.icon);
 
     docfrag.appendChild(menuitem);
   });
 
   if (!isContextMenu) {
-    docfrag.appendChild(document.createElement("menuseparator"));
+    docfrag.appendChild(document.createXULElement("menuseparator"));
 
-    let menuitem = document.createElement("menuitem");
+    let menuitem = document.createXULElement("menuitem");
     menuitem.setAttribute("label",
                           bundle.GetStringFromName("userContext.aboutPage.label"));
     if (useAccessKeys) {
       menuitem.setAttribute("accesskey",
                             bundle.GetStringFromName("userContext.aboutPage.accesskey"));
     }
     menuitem.setAttribute("command", "Browser:OpenAboutContainers");
     docfrag.appendChild(menuitem);
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -811,17 +811,17 @@ CustomizeMode.prototype = {
   },
 
   createOrUpdateWrapper(aNode, aPlace, aIsUpdate) {
     let wrapper;
     if (aIsUpdate && aNode.parentNode && aNode.parentNode.localName == "toolbarpaletteitem") {
       wrapper = aNode.parentNode;
       aPlace = wrapper.getAttribute("place");
     } else {
-      wrapper = this.document.createElement("toolbarpaletteitem");
+      wrapper = this.document.createXULElement("toolbarpaletteitem");
       // "place" is used to show the label when it's sitting in the palette.
       wrapper.setAttribute("place", aPlace);
     }
 
 
     // Ensure the wrapped item doesn't look like it's in any special state, and
     // can't be interactved with when in the customization palette.
     // Note that some buttons opt out of this with the
@@ -1356,17 +1356,17 @@ CustomizeMode.prototype = {
       this._updateLWThemeButtonIcon();
       this._onUIChange();
       panel.hidePopup();
     };
 
     let doc = this.window.document;
 
     function buildToolbarButton(aTheme) {
-      let tbb = doc.createElement("toolbarbutton");
+      let tbb = doc.createXULElement("toolbarbutton");
       tbb.theme = aTheme;
       tbb.setAttribute("label", aTheme.name);
       tbb.setAttribute("image", aTheme.iconURL);
       if (aTheme.description)
         tbb.setAttribute("tooltiptext", aTheme.description);
       tbb.setAttribute("tabindex", "0");
       tbb.classList.add("customization-lwtheme-menu-theme");
       let isActive = activeThemeID == aTheme.id;
@@ -2645,17 +2645,17 @@ CustomizeMode.prototype = {
       arena: document.getElementById("customization-pong-arena")
     };
     let isRTL = document.documentElement.matches(":-moz-locale-dir(rtl)");
 
     document.addEventListener("keydown", onkeydown);
     document.addEventListener("keyup", onkeyup);
 
     for (let id of ["player1", "player2", "ball", "score", "lives"]) {
-      let el = document.createElement("box");
+      let el = document.createXULElement("box");
       el.id = "wp-" + id;
       elements[el.id] = elements.arena.appendChild(el);
     }
 
     let spacer = this.visiblePalette.querySelector("toolbarpaletteitem");
     for (let player of ["#wp-player1", "#wp-player2"]) {
       let val = "-moz-element(#" + spacer.id + ") no-repeat";
       elements.arena.querySelector(player).style.background = val;
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -371,17 +371,17 @@ const PanelUI = {
     this.ensureLibraryInitialized(viewNode);
 
     let container = aAnchor.closest("panelmultiview");
     if (container) {
       container.showSubView(aViewId, aAnchor);
     } else if (!aAnchor.open) {
       aAnchor.open = true;
 
-      let tempPanel = document.createElement("panel");
+      let tempPanel = document.createXULElement("panel");
       tempPanel.setAttribute("type", "arrow");
       tempPanel.setAttribute("id", "customizationui-widget-panel");
       tempPanel.setAttribute("class", "cui-widget-panel");
       tempPanel.setAttribute("viewId", aViewId);
       if (aAnchor.getAttribute("tabspecific")) {
         tempPanel.setAttribute("tabspecific", true);
       }
       if (this._disableAnimations) {
@@ -389,17 +389,17 @@ const PanelUI = {
       }
       tempPanel.setAttribute("context", "");
       tempPanel.setAttribute("photon", true);
       document.getElementById(CustomizableUI.AREA_NAVBAR).appendChild(tempPanel);
       // If the view has a footer, set a convenience class on the panel.
       tempPanel.classList.toggle("cui-widget-panelWithFooter",
                                  viewNode.querySelector(".panel-subview-footer"));
 
-      let multiView = document.createElement("panelmultiview");
+      let multiView = document.createXULElement("panelmultiview");
       multiView.setAttribute("id", "customizationui-widget-multiview");
       multiView.setAttribute("viewCacheId", "appMenu-viewCache");
       multiView.setAttribute("mainViewId", viewNode.id);
       tempPanel.appendChild(multiView);
       viewNode.classList.add("cui-widget-panelview");
 
       let viewShown = false;
       let panelRemover = () => {
@@ -507,17 +507,17 @@ const PanelUI = {
       return;
     }
 
     let container = this.libraryRecentHighlights;
     container.hidden = container.previousElementSibling.hidden =
       container.previousElementSibling.previousElementSibling.hidden = false;
     let fragment = document.createDocumentFragment();
     for (let highlight of highlights) {
-      let button = document.createElement("toolbarbutton");
+      let button = document.createXULElement("toolbarbutton");
       button.classList.add("subviewbutton", "highlight", "subviewbutton-iconic", "bookmark-item");
       let title = highlight.title || highlight.url;
       button.setAttribute("label", title);
       button.setAttribute("tooltiptext", title);
       button.setAttribute("type", "highlight-" + highlight.type);
       button.setAttribute("onclick", "PanelUI.onLibraryHighlightClick(event)");
       if (highlight.favicon) {
         button.setAttribute("image", highlight.favicon);
--- a/browser/components/customizableui/test/browser_918049_skipintoolbarset_dnd.js
+++ b/browser/components/customizableui/test/browser_918049_skipintoolbarset_dnd.js
@@ -5,17 +5,17 @@
 "use strict";
 
 var navbar;
 var skippedItem;
 
 // Attempting to drag a skipintoolbarset item should work.
 add_task(async function() {
   navbar = document.getElementById("nav-bar");
-  skippedItem = document.createElement("toolbarbutton");
+  skippedItem = document.createXULElement("toolbarbutton");
   skippedItem.id = "test-skipintoolbarset-item";
   skippedItem.setAttribute("label", "Test");
   skippedItem.setAttribute("skipintoolbarset", "true");
   skippedItem.setAttribute("removable", "true");
   navbar.customizationTarget.appendChild(skippedItem);
   let libraryButton = document.getElementById("library-button");
   await startCustomizing();
   await waitForElementShown(skippedItem);
--- a/browser/components/customizableui/test/browser_940013_registerToolbarNode_calls_registerArea.js
+++ b/browser/components/customizableui/test/browser_940013_registerToolbarNode_calls_registerArea.js
@@ -7,17 +7,17 @@
 const kToolbarId = "test-registerToolbarNode-toolbar";
 const kButtonId = "test-registerToolbarNode-button";
 registerCleanupFunction(cleanup);
 
 // Registering a toolbar with defaultset attribute should work
 add_task(async function() {
   ok(CustomizableUI.inDefaultState, "Everything should be in its default state.");
   let btn = createDummyXULButton(kButtonId);
-  let toolbar = document.createElement("toolbar");
+  let toolbar = document.createXULElement("toolbar");
   toolbar.id = kToolbarId;
   toolbar.setAttribute("customizable", true);
   toolbar.setAttribute("defaultset", kButtonId);
   gNavToolbox.appendChild(toolbar);
   ok(CustomizableUI.areas.includes(kToolbarId),
      "Toolbar should have been registered automatically.");
   is(CustomizableUI.getAreaType(kToolbarId), CustomizableUI.TYPE_TOOLBAR,
      "Area should be registered as toolbar");
@@ -29,17 +29,17 @@ add_task(async function() {
   btn.remove();
 });
 
 // Registering a toolbar without a defaultset attribute should
 // wait for the registerArea call
 add_task(async function() {
   ok(CustomizableUI.inDefaultState, "Everything should be in its default state.");
   let btn = createDummyXULButton(kButtonId);
-  let toolbar = document.createElement("toolbar");
+  let toolbar = document.createXULElement("toolbar");
   toolbar.id = kToolbarId;
   toolbar.setAttribute("customizable", true);
   gNavToolbox.appendChild(toolbar);
   ok(!CustomizableUI.areas.includes(kToolbarId),
      "Toolbar should not yet have been registered automatically.");
   CustomizableUI.registerArea(kToolbarId, {defaultPlacements: [kButtonId]});
   ok(CustomizableUI.areas.includes(kToolbarId),
      "Toolbar should have been registered now.");
--- a/browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
+++ b/browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
@@ -2,17 +2,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 var button, menuButton;
 /* Clicking a button should close the panel */
 add_task(async function plain_button() {
-  button = document.createElement("toolbarbutton");
+  button = document.createXULElement("toolbarbutton");
   button.id = "browser_940307_button";
   button.setAttribute("label", "Button");
   gNavToolbox.palette.appendChild(button);
   CustomizableUI.addWidgetToArea(button.id, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
   await waitForOverflowButtonShown();
 
   await document.getElementById("nav-bar").overflowable.show();
@@ -70,17 +70,17 @@ add_task(async function searchbar_in_pan
 
   // We focused the search bar earlier - ensure we don't keep doing that.
   gURLBar.select();
 
   CustomizableUI.reset();
 });
 
 add_task(async function disabled_button_in_panel() {
-  button = document.createElement("toolbarbutton");
+  button = document.createXULElement("toolbarbutton");
   button.id = "browser_946166_button_disabled";
   button.setAttribute("disabled", "true");
   button.setAttribute("label", "Button");
   gNavToolbox.palette.appendChild(button);
   CustomizableUI.addWidgetToArea(button.id, CustomizableUI.AREA_FIXED_OVERFLOW_PANEL);
 
   await waitForOverflowButtonShown();
 
--- a/browser/components/customizableui/test/browser_963639_customizing_attribute_non_customizable_toolbar.js
+++ b/browser/components/customizableui/test/browser_963639_customizing_attribute_non_customizable_toolbar.js
@@ -4,17 +4,17 @@
 
 "use strict";
 
 const kToolbar = "test-toolbar-963639-non-customizable-customizing-attribute";
 
 add_task(async function() {
   info("Test for Bug 963639 - CustomizeMode _onToolbarVisibilityChange sets @customizing on non-customizable toolbars");
 
-  let toolbar = document.createElement("toolbar");
+  let toolbar = document.createXULElement("toolbar");
   toolbar.id = kToolbar;
   gNavToolbox.appendChild(toolbar);
 
   let testToolbar = document.getElementById(kToolbar);
   ok(testToolbar, "Toolbar was created.");
   is(gNavToolbox.getElementsByAttribute("id", kToolbar).length, 1,
      "Toolbar was added to the navigator toolbox");
 
--- a/browser/components/customizableui/test/browser_978084_dragEnd_after_move.js
+++ b/browser/components/customizableui/test/browser_978084_dragEnd_after_move.js
@@ -6,32 +6,32 @@
 var draggedItem;
 
 /**
  * Check that customizing-movingItem gets removed on a drop when the item is moved.
  */
 
 // Drop on the palette
 add_task(async function() {
-  draggedItem = document.createElement("toolbarbutton");
+  draggedItem = document.createXULElement("toolbarbutton");
   draggedItem.id = "test-dragEnd-after-move1";
   draggedItem.setAttribute("label", "Test");
   draggedItem.setAttribute("removable", "true");
   let navbar = document.getElementById("nav-bar");
   navbar.customizationTarget.appendChild(draggedItem);
   await startCustomizing();
   simulateItemDrag(draggedItem, gCustomizeMode.visiblePalette);
   is(document.documentElement.hasAttribute("customizing-movingItem"), false,
      "Make sure customizing-movingItem is removed after dragging to the palette");
   await endCustomizing();
 });
 
 // Drop on a customization target itself
 add_task(async function() {
-  draggedItem = document.createElement("toolbarbutton");
+  draggedItem = document.createXULElement("toolbarbutton");
   draggedItem.id = "test-dragEnd-after-move2";
   draggedItem.setAttribute("label", "Test");
   draggedItem.setAttribute("removable", "true");
   let dest = createToolbarWithPlacements("test-dragEnd");
   let navbar = document.getElementById("nav-bar");
   navbar.customizationTarget.appendChild(draggedItem);
   await startCustomizing();
   simulateItemDrag(draggedItem, dest.customizationTarget);
--- a/browser/components/customizableui/test/browser_981305_separator_insertion.js
+++ b/browser/components/customizableui/test/browser_981305_separator_insertion.js
@@ -5,24 +5,24 @@
 "use strict";
 
 var tempElements = [];
 
 function insertTempItemsIntoMenu(parentMenu) {
   // Last element is null to insert at the end:
   let beforeEls = [parentMenu.firstElementChild, parentMenu.lastElementChild, null];
   for (let i = 0; i < beforeEls.length; i++) {
-    let sep = document.createElement("menuseparator");
+    let sep = document.createXULElement("menuseparator");
     tempElements.push(sep);
     parentMenu.insertBefore(sep, beforeEls[i]);
-    let menu = document.createElement("menu");
+    let menu = document.createXULElement("menu");
     tempElements.push(menu);
     parentMenu.insertBefore(menu, beforeEls[i]);
     // And another separator for good measure:
-    sep = document.createElement("menuseparator");
+    sep = document.createXULElement("menuseparator");
     tempElements.push(sep);
     parentMenu.insertBefore(sep, beforeEls[i]);
   }
 }
 
 function checkSeparatorInsertion(menuId, buttonId, subviewId) {
   return async function() {
     info("Checking for duplicate separators in " + buttonId + " widget");
--- a/browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
+++ b/browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
@@ -9,17 +9,17 @@ const kWidgetId = "test-981418-widget-on
 // Should be able to add broken view widget
 add_task(async function testAddOnBeforeCreatedWidget() {
   let onBeforeCreatedCalled = false;
   let widgetSpec = {
     id: kWidgetId,
     type: "view",
     viewId: kWidgetId + "idontexistyet",
     onBeforeCreated(doc) {
-      let view = doc.createElement("panelview");
+      let view = doc.createXULElement("panelview");
       view.id = kWidgetId + "idontexistyet";
       document.getElementById("appMenu-viewCache").appendChild(view);
       onBeforeCreatedCalled = true;
     }
   };
 
   CustomizableUI.createWidget(widgetSpec);
   CustomizableUI.addWidgetToArea(kWidgetId, CustomizableUI.AREA_NAVBAR);
--- a/browser/components/customizableui/test/browser_996635_remove_non_widgets.js
+++ b/browser/components/customizableui/test/browser_996635_remove_non_widgets.js
@@ -6,17 +6,17 @@
 // NB: This is testing what happens if something that /isn't/ a customizable
 // widget gets used in CustomizableUI APIs. Don't use this as an example of
 // what should happen in a "normal" case or how you should use the API.
 function test() {
   // First create a button that isn't customizable, and add it in the nav-bar,
   // but not in the customizable part of it (the customization target) but
   // next to the main (hamburger) menu button.
   const buttonID = "Test-non-widget-non-removable-button";
-  let btn = document.createElement("toolbarbutton");
+  let btn = document.createXULElement("toolbarbutton");
   btn.id = buttonID;
   btn.label = "Hi";
   btn.setAttribute("style", "width: 20px; height: 20px; background-color: red");
   document.getElementById("nav-bar").appendChild(btn);
   registerCleanupFunction(function() {
     btn.remove();
   });
 
--- a/browser/components/customizableui/test/browser_PanelMultiView.js
+++ b/browser/components/customizableui/test/browser_PanelMultiView.js
@@ -161,38 +161,38 @@ function stopRecordingEvents(element) {
  *       <label/>            ->  gPanelViewLabels[viewIndex]
  *     </panelview>
  * </toolbar>
  */
 add_task(async function test_setup() {
   let navBar = document.getElementById("nav-bar");
 
   for (let i = 0; i < PANELS_COUNT; i++) {
-    gPanelAnchors[i] = document.createElement("toolbarbutton");
+    gPanelAnchors[i] = document.createXULElement("toolbarbutton");
     gPanelAnchors[i].classList.add("toolbarbutton-1",
                                    "chromeclass-toolbar-additional");
     navBar.appendChild(gPanelAnchors[i]);
 
-    gPanels[i] = document.createElement("panel");
+    gPanels[i] = document.createXULElement("panel");
     gPanels[i].id = "panel-" + i;
     gPanels[i].setAttribute("type", "arrow");
     gPanels[i].setAttribute("photon", true);
     navBar.appendChild(gPanels[i]);
 
-    gPanelMultiViews[i] = document.createElement("panelmultiview");
+    gPanelMultiViews[i] = document.createXULElement("panelmultiview");
     gPanelMultiViews[i].id = "panelmultiview-" + i;
     gPanels[i].appendChild(gPanelMultiViews[i]);
   }
 
   for (let i = 0; i < PANELVIEWS_COUNT; i++) {
-    gPanelViews[i] = document.createElement("panelview");
+    gPanelViews[i] = document.createXULElement("panelview");
     gPanelViews[i].id = "panelview-" + i;
     navBar.appendChild(gPanelViews[i]);
 
-    gPanelViewLabels[i] = document.createElement("label");
+    gPanelViewLabels[i] = document.createXULElement("label");
     gPanelViewLabels[i].setAttribute("value", "PanelView " + i);
     gPanelViews[i].appendChild(gPanelViewLabels[i]);
   }
 
   registerCleanupFunction(() => {
     [...gPanelAnchors, ...gPanels, ...gPanelViews].forEach(e => e.remove());
   });
 });
--- a/browser/components/customizableui/test/browser_bootstrapped_custom_toolbar.js
+++ b/browser/components/customizableui/test/browser_bootstrapped_custom_toolbar.js
@@ -5,17 +5,17 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 const kTestBarID = "testBar";
 const kWidgetID = "characterencoding-button";
 
 function createTestBar(aLegacy) {
-  let testBar = document.createElement("toolbar");
+  let testBar = document.createXULElement("toolbar");
   testBar.id = kTestBarID;
   testBar.setAttribute("customizable", "true");
   CustomizableUI.registerArea(kTestBarID, {
     type: CustomizableUI.TYPE_TOOLBAR,
     legacy: aLegacy,
   });
   gNavToolbox.appendChild(testBar);
   return testBar;
--- a/browser/components/customizableui/test/browser_insert_before_moved_node.js
+++ b/browser/components/customizableui/test/browser_insert_before_moved_node.js
@@ -7,17 +7,17 @@
 add_task(async function() {
   for (let toolbar of ["nav-bar", "TabsToolbar"]) {
     CustomizableUI.createWidget({id: "real-button", label: "test real button"});
     CustomizableUI.addWidgetToArea("real-button", toolbar);
     CustomizableUI.addWidgetToArea("moved-button-not-here", toolbar);
     let placements = CustomizableUI.getWidgetIdsInArea(toolbar);
     Assert.deepEqual(placements.slice(-2), ["real-button", "moved-button-not-here"],
       "Should have correct placements");
-    let otherButton = document.createElement("toolbarbutton");
+    let otherButton = document.createXULElement("toolbarbutton");
     otherButton.id = "moved-button-not-here";
     if (toolbar == "nav-bar") {
       gURLBar.parentNode.appendChild(otherButton);
     } else {
       gBrowser.tabContainer.appendChild(otherButton);
     }
     CustomizableUI.destroyWidget("real-button");
     CustomizableUI.createWidget({id: "real-button", label: "test real button"});
--- a/browser/components/downloads/content/allDownloadsView.js
+++ b/browser/components/downloads/content/allDownloadsView.js
@@ -33,17 +33,17 @@ XPCOMUtils.defineLazyModuleGetters(this,
  * the onChanged method.
  *
  * @param download
  *        The Download object from the DownloadHistoryList.
  */
 function HistoryDownloadElementShell(download) {
   this._download = download;
 
-  this.element = document.createElement("richlistitem");
+  this.element = document.createXULElement("richlistitem");
   this.element._shell = this;
 
   this.element.classList.add("download");
   this.element.classList.add("download-state");
 }
 
 HistoryDownloadElementShell.prototype = {
   __proto__: DownloadsViewUI.DownloadElementShell.prototype,
--- a/browser/components/downloads/content/downloads.js
+++ b/browser/components/downloads/content/downloads.js
@@ -718,17 +718,17 @@ var DownloadsView = {
   /**
    * Creates a new view item associated with the specified data item, and adds
    * it to the top or the bottom of the list.
    */
   _addViewItem(download, aNewest) {
     DownloadsCommon.log("Adding a new DownloadsViewItem to the downloads list.",
                         "aNewest =", aNewest);
 
-    let element = document.createElement("richlistitem");
+    let element = document.createXULElement("richlistitem");
     let viewItem = new DownloadsViewItem(download, element);
     this._visibleViewItems.set(download, viewItem);
     this._itemsForElements.set(element, viewItem);
     if (aNewest) {
       this.richListBox.insertBefore(element, this.richListBox.firstElementChild);
     } else {
       this.richListBox.appendChild(element);
     }
--- a/browser/components/extensions/ExtensionControlledPopup.jsm
+++ b/browser/components/extensions/ExtensionControlledPopup.jsm
@@ -265,17 +265,17 @@ class ExtensionControlledPopup {
     panel.hidden = false;
     popupnotification.hidden = false;
     panel.openPopup(anchor);
   }
 
   getAddonDetails(doc, addon) {
     const defaultIcon = "chrome://mozapps/skin/extensions/extensionGeneric.svg";
 
-    let image = doc.createElement("image");
+    let image = doc.createXULElement("image");
     image.setAttribute("src", addon.iconURL || defaultIcon);
     image.classList.add("extension-controlled-icon");
 
     let addonDetails = doc.createDocumentFragment();
     addonDetails.appendChild(image);
     addonDetails.appendChild(doc.createTextNode(" " + addon.name));
 
     return addonDetails;
@@ -290,15 +290,15 @@ class ExtensionControlledPopup {
     if (this.getLocalizedDescription) {
       description.appendChild(
         this.getLocalizedDescription(doc, message, addonDetails));
     } else {
       description.appendChild(
         BrowserUtils.getLocalizedFragment(doc, message, addonDetails));
     }
 
-    let link = doc.createElement("label");
+    let link = doc.createXULElement("label");
     link.setAttribute("class", "learnMore text-link");
     link.href = Services.urlFormatter.formatURLPref("app.support.baseURL") + this.learnMoreLink;
     link.textContent = strBundle.GetStringFromName(this.learnMoreMessageId);
     description.appendChild(link);
   }
 }
--- a/browser/components/extensions/ExtensionPopups.jsm
+++ b/browser/components/extensions/ExtensionPopups.jsm
@@ -381,17 +381,17 @@ class BasePopup {
  * A map of active popups for a given browser window.
  *
  * WeakMap[window -> WeakMap[Extension -> BasePopup]]
  */
 BasePopup.instances = new DefaultWeakMap(() => new WeakMap());
 
 class PanelPopup extends BasePopup {
   constructor(extension, document, popupURL, browserStyle) {
-    let panel = document.createElement("panel");
+    let panel = document.createXULElement("panel");
     panel.setAttribute("id", makeWidgetId(extension.id) + "-panel");
     panel.setAttribute("class", "browser-extension-panel");
     panel.setAttribute("tabspecific", "true");
     panel.setAttribute("type", "arrow");
     panel.setAttribute("role", "group");
     if (extension.remote) {
       panel.setAttribute("remote", "true");
     }
@@ -429,17 +429,17 @@ class PanelPopup extends BasePopup {
   }
 }
 
 class ViewPopup extends BasePopup {
   constructor(extension, window, popupURL, browserStyle, fixedWidth, blockParser) {
     let document = window.document;
 
     let createPanel = remote => {
-      let panel = document.createElement("panel");
+      let panel = document.createXULElement("panel");
       panel.setAttribute("type", "arrow");
       if (remote) {
         panel.setAttribute("remote", "true");
       }
 
       document.getElementById("mainPopupSet").appendChild(panel);
       return panel;
     };
--- a/browser/components/extensions/parent/ext-menus.js
+++ b/browser/components/extensions/parent/ext-menus.js
@@ -70,17 +70,17 @@ var gMenuBuilder = {
 
     const children = this.buildChildren(root, contextData);
     const visible = children.slice(0, ACTION_MENU_TOP_LEVEL_LIMIT);
 
     this.xulMenu = menu;
     menu.addEventListener("popuphidden", this);
 
     if (visible.length) {
-      const separator = menu.ownerDocument.createElement("menuseparator");
+      const separator = menu.ownerDocument.createXULElement("menuseparator");
       menu.insertBefore(separator, menu.firstElementChild);
       this.itemsToCleanUp.add(separator);
 
       for (const child of visible) {
         this.itemsToCleanUp.add(child);
         menu.insertBefore(child, separator);
       }
     }
@@ -134,17 +134,17 @@ var gMenuBuilder = {
       rootElement.removeAttribute("class");
       rootElement.removeAttribute("image");
     }
     return rootElement;
   },
 
   appendTopLevelElement(rootElement) {
     if (this.itemsToCleanUp.size === 0) {
-      const separator = this.xulMenu.ownerDocument.createElement("menuseparator");
+      const separator = this.xulMenu.ownerDocument.createXULElement("menuseparator");
       this.itemsToCleanUp.add(separator);
       this.xulMenu.append(separator);
     }
 
     this.xulMenu.appendChild(rootElement);
     this.itemsToCleanUp.add(rootElement);
   },
 
@@ -178,28 +178,28 @@ var gMenuBuilder = {
   },
 
   buildSingleElement(item, contextData) {
     let doc = contextData.menu.ownerDocument;
     let element;
     if (item.children.length > 0) {
       element = this.createMenuElement(doc, item);
     } else if (item.type == "separator") {
-      element = doc.createElement("menuseparator");
+      element = doc.createXULElement("menuseparator");
     } else {
-      element = doc.createElement("menuitem");
+      element = doc.createXULElement("menuitem");
     }
 
     return this.customizeElement(element, item, contextData);
   },
 
   createMenuElement(doc, item) {
-    let element = doc.createElement("menu");
+    let element = doc.createXULElement("menu");
     // Menu elements need to have a menupopup child for its menu items.
-    let menupopup = doc.createElement("menupopup");
+    let menupopup = doc.createXULElement("menupopup");
     element.appendChild(menupopup);
     return element;
   },
 
   customizeElement(element, item, contextData) {
     let label = item.title;
     if (label) {
       let accessKey;
--- a/browser/components/extensions/parent/ext-tabs.js
+++ b/browser/components/extensions/parent/ext-tabs.js
@@ -35,17 +35,17 @@ const TAB_HIDE_CONFIRMED_TYPE = "tabHide
 XPCOMUtils.defineLazyGetter(this, "tabHidePopup", () => {
   return new ExtensionControlledPopup({
     confirmedType: TAB_HIDE_CONFIRMED_TYPE,
     anchorId: "alltabs-button",
     popupnotificationId: "extension-tab-hide-notification",
     descriptionId: "extension-tab-hide-notification-description",
     descriptionMessageId: "tabHideControlled.message",
     getLocalizedDescription: (doc, message, addonDetails) => {
-      let image = doc.createElement("image");
+      let image = doc.createXULElement("image");
       image.setAttribute("class", "extension-controlled-icon alltabs-icon");
       return BrowserUtils.getLocalizedFragment(doc, message, addonDetails, image);
     },
     learnMoreMessageId: "tabHideControlled.learnMore",
     learnMoreLink: "extension-hiding-tabs",
   });
 });
 
--- a/browser/components/extensions/test/browser/browser_ExtensionControlledPopup.js
+++ b/browser/components/extensions/test/browser/browser_ExtensionControlledPopup.js
@@ -11,17 +11,17 @@ registerCleanupFunction(() => {
 
 ChromeUtils.defineModuleGetter(this, "ExtensionSettingsStore",
                                "resource://gre/modules/ExtensionSettingsStore.jsm");
 ChromeUtils.defineModuleGetter(this, "ExtensionControlledPopup",
                                "resource:///modules/ExtensionControlledPopup.jsm");
 
 function createMarkup(doc) {
   let panel = doc.getElementById("extension-notification-panel");
-  let popupnotification = doc.createElement("popupnotification");
+  let popupnotification = doc.createXULElement("popupnotification");
   let attributes = {
     id: "extension-controlled-notification",
     class: "extension-controlled-notification",
     popupid: "extension-controlled",
     hidden: "true",
     label: "ExtControlled",
     buttonlabel: "Keep Changes",
     buttonaccesskey: "K",
@@ -29,19 +29,19 @@ function createMarkup(doc) {
     secondarybuttonaccesskey: "R",
     closebuttonhidden: "true",
     dropmarkerhidden: "true",
     checkboxhidden: "true",
   };
   Object.entries(attributes).forEach(([key, value]) => {
     popupnotification.setAttribute(key, value);
   });
-  let content = doc.createElement("popupnotificationcontent");
+  let content = doc.createXULElement("popupnotificationcontent");
   content.setAttribute("orient", "vertical");
-  let description = doc.createElement("description");
+  let description = doc.createXULElement("description");
   description.setAttribute("id", "extension-controlled-description");
   content.appendChild(description);
   popupnotification.appendChild(content);
   panel.appendChild(popupnotification);
 
   registerCleanupFunction(function removePopup() {
     popupnotification.remove();
   });
--- a/browser/components/places/content/browserPlacesViews.js
+++ b/browser/components/places/content/browserPlacesViews.js
@@ -306,17 +306,17 @@ PlacesViewBase.prototype = {
 
     aChild.remove();
   },
 
   _setEmptyPopupStatus:
   function PVB__setEmptyPopupStatus(aPopup, aEmpty) {
     if (!aPopup._emptyMenuitem) {
       let label = PlacesUIUtils.getString("bookmarksMenuEmptyFolder");
-      aPopup._emptyMenuitem = document.createElement("menuitem");
+      aPopup._emptyMenuitem = document.createXULElement("menuitem");
       aPopup._emptyMenuitem.setAttribute("label", label);
       aPopup._emptyMenuitem.setAttribute("disabled", true);
       aPopup._emptyMenuitem.className = "bookmark-item";
       if (typeof this.options.extraClasses.entry == "string")
         aPopup._emptyMenuitem.classList.add(this.options.extraClasses.entry);
     }
 
     if (aEmpty) {
@@ -335,27 +335,27 @@ PlacesViewBase.prototype = {
 
   _createDOMNodeForPlacesNode:
   function PVB__createDOMNodeForPlacesNode(aPlacesNode) {
     this._domNodes.delete(aPlacesNode);
 
     let element;
     let type = aPlacesNode.type;
     if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_SEPARATOR) {
-      element = document.createElement("menuseparator");
+      element = document.createXULElement("menuseparator");
       element.setAttribute("class", "small-separator");
     } else {
       let itemId = aPlacesNode.itemId;
       if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_URI) {
-        element = document.createElement("menuitem");
+        element = document.createXULElement("menuitem");
         element.className = "menuitem-iconic bookmark-item menuitem-with-favicon";
         element.setAttribute("scheme",
                              PlacesUIUtils.guessUrlSchemeForUI(aPlacesNode.uri));
       } else if (PlacesUtils.containerTypes.includes(type)) {
-        element = document.createElement("menu");
+        element = document.createXULElement("menu");
         element.setAttribute("container", "true");
 
         if (aPlacesNode.type == Ci.nsINavHistoryResultNode.RESULT_TYPE_QUERY) {
           element.setAttribute("query", "true");
           if (PlacesUtils.nodeIsTagQuery(aPlacesNode))
             element.setAttribute("tagContainer", "true");
           else if (PlacesUtils.nodeIsDay(aPlacesNode))
             element.setAttribute("dayContainer", "true");
@@ -370,17 +370,17 @@ PlacesViewBase.prototype = {
                 // it doesn't have a frame (bug 733415).  Thus enforce updating.
                 element.setAttribute("image", "");
                 element.removeAttribute("image");
               }
               this.controller.cacheLivemarkInfo(aPlacesNode, aLivemark);
             }, () => undefined);
         }
 
-        let popup = document.createElement("menupopup");
+        let popup = document.createXULElement("menupopup");
         popup._placesNode = PlacesUtils.asContainer(aPlacesNode);
 
         if (!this._nativeView) {
           popup.setAttribute("placespopup", "true");
         }
 
         element.appendChild(popup);
         element.className = "menu-iconic bookmark-item";
@@ -426,17 +426,17 @@ PlacesViewBase.prototype = {
                   livemarkInfo.siteURI.spec : null;
     if (!siteUrl && aPopup._siteURIMenuitem) {
       aPopup.removeChild(aPopup._siteURIMenuitem);
       aPopup._siteURIMenuitem = null;
       aPopup.removeChild(aPopup._siteURIMenuseparator);
       aPopup._siteURIMenuseparator = null;
     } else if (siteUrl && !aPopup._siteURIMenuitem) {
       // Add "Open (Feed Name)" menuitem.
-      aPopup._siteURIMenuitem = document.createElement("menuitem");
+      aPopup._siteURIMenuitem = document.createXULElement("menuitem");
       aPopup._siteURIMenuitem.className = "openlivemarksite-menuitem";
       if (typeof this.options.extraClasses.entry == "string") {
         aPopup._siteURIMenuitem.classList.add(this.options.extraClasses.entry);
       }
       aPopup._siteURIMenuitem.setAttribute("targetURI", siteUrl);
       aPopup._siteURIMenuitem.setAttribute("oncommand",
         "openUILink(this.getAttribute('targetURI'), event, {" +
         " triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({})});");
@@ -448,34 +448,34 @@ PlacesViewBase.prototype = {
       aPopup._siteURIMenuitem.setAttribute("onclick",
         "checkForMiddleClick(this, event); event.stopPropagation();");
       let label =
         PlacesUIUtils.getFormattedString("menuOpenLivemarkOrigin.label",
                                          [aPopup.parentNode.getAttribute("label")]);
       aPopup._siteURIMenuitem.setAttribute("label", label);
       aPopup.insertBefore(aPopup._siteURIMenuitem, aPopup._startMarker);
 
-      aPopup._siteURIMenuseparator = document.createElement("menuseparator");
+      aPopup._siteURIMenuseparator = document.createXULElement("menuseparator");
       aPopup.insertBefore(aPopup._siteURIMenuseparator, aPopup._startMarker);
     }
   },
 
   /**
    * Add, update or remove the livemark status menuitem.
    * @param aPopup
    *        The livemark container popup
    * @param aStatus
    *        The livemark status
    */
   _setLivemarkStatusMenuItem:
   function PVB_setLivemarkStatusMenuItem(aPopup, aStatus) {
     let statusMenuitem = aPopup._statusMenuitem;
     if (!statusMenuitem) {
       // Create the status menuitem and cache it in the popup object.
-      statusMenuitem = document.createElement("menuitem");
+      statusMenuitem = document.createXULElement("menuitem");
       statusMenuitem.className = "livemarkstatus-menuitem";
       if (typeof this.options.extraClasses.entry == "string") {
         statusMenuitem.classList.add(this.options.extraClasses.entry);
       }
       statusMenuitem.setAttribute("disabled", true);
       aPopup._statusMenuitem = statusMenuitem;
     }
 
@@ -840,22 +840,22 @@ PlacesViewBase.prototype = {
         aPopup.removeChild(aPopup._endOptOpenAllInTabs);
         aPopup._endOptOpenAllInTabs = null;
 
         aPopup.removeChild(aPopup._endOptSeparator);
         aPopup._endOptSeparator = null;
       }
     } else if (!aPopup._endOptOpenAllInTabs) {
       // Create a separator before options.
-      aPopup._endOptSeparator = document.createElement("menuseparator");
+      aPopup._endOptSeparator = document.createXULElement("menuseparator");
       aPopup._endOptSeparator.className = "bookmarks-actions-menuseparator";
       aPopup.appendChild(aPopup._endOptSeparator);
 
       // Add the "Open All in Tabs" menuitem.
-      aPopup._endOptOpenAllInTabs = document.createElement("menuitem");
+      aPopup._endOptOpenAllInTabs = document.createXULElement("menuitem");
       aPopup._endOptOpenAllInTabs.className = "openintabs-menuitem";
 
       if (typeof this.options.extraClasses.entry == "string")
         aPopup._endOptOpenAllInTabs.classList.add(this.options.extraClasses.entry);
       if (typeof this.options.extraClasses.footer == "string")
         aPopup._endOptOpenAllInTabs.classList.add(this.options.extraClasses.footer);
 
       if (isLiveMark) {
@@ -875,28 +875,28 @@ PlacesViewBase.prototype = {
     }
   },
 
   _ensureMarkers: function PVB__ensureMarkers(aPopup) {
     if (aPopup._startMarker)
       return;
 
     // _startMarker is an hidden menuseparator that lives before places nodes.
-    aPopup._startMarker = document.createElement("menuseparator");
+    aPopup._startMarker = document.createXULElement("menuseparator");
     aPopup._startMarker.hidden = true;
     aPopup.insertBefore(aPopup._startMarker, aPopup.firstElementChild);
 
     // _endMarker is a DOM node that lives after places nodes, specified with
     // the 'insertionPoint' option or will be a hidden menuseparator.
     let node = this.options.insertionPoint ?
                aPopup.querySelector(this.options.insertionPoint) : null;
     if (node) {
       aPopup._endMarker = node;
     } else {
-      aPopup._endMarker = document.createElement("menuseparator");
+      aPopup._endMarker = document.createXULElement("menuseparator");
       aPopup._endMarker.hidden = true;
     }
     aPopup.appendChild(aPopup._endMarker);
 
     // Move the markers to the right position.
     let firstNonStaticNodeFound = false;
     for (let i = 0; i < aPopup.children.length; i++) {
       let child = aPopup.children[i];
@@ -1104,19 +1104,19 @@ PlacesToolbar.prototype = {
 
   _insertNewItem:
   function PT__insertNewItem(aChild, aInsertionNode, aBefore = null) {
     this._domNodes.delete(aChild);
 
     let type = aChild.type;
     let button;
     if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_SEPARATOR) {
-      button = document.createElement("toolbarseparator");
+      button = document.createXULElement("toolbarseparator");
     } else {
-      button = document.createElement("toolbarbutton");
+      button = document.createXULElement("toolbarbutton");
       button.className = "bookmark-item";
       button.setAttribute("label", aChild.title || "");
 
       if (PlacesUtils.containerTypes.includes(type)) {
         button.setAttribute("type", "menu");
         button.setAttribute("container", "true");
 
         if (PlacesUtils.nodeIsQuery(aChild)) {
@@ -1126,17 +1126,17 @@ PlacesToolbar.prototype = {
         } else if (PlacesUtils.nodeIsFolder(aChild)) {
           PlacesUtils.livemarks.getLivemark({ id: aChild.itemId })
             .then(aLivemark => {
               button.setAttribute("livemark", "true");
               this.controller.cacheLivemarkInfo(aChild, aLivemark);
             }, () => undefined);
         }
 
-        let popup = document.createElement("menupopup");
+        let popup = document.createXULElement("menupopup");
         popup.setAttribute("placespopup", "true");
         button.appendChild(popup);
         popup._placesNode = PlacesUtils.asContainer(aChild);
         popup.setAttribute("context", "placesContext");
 
         this._domNodes.set(aChild, popup);
       } else if (PlacesUtils.nodeIsURI(aChild)) {
         button.setAttribute("scheme",
@@ -2002,20 +2002,20 @@ PlacesPanelMenuView.prototype = {
 
   _insertNewItem:
   function PAMV__insertNewItem(aChild, aInsertionNode, aBefore = null) {
     this._domNodes.delete(aChild);
 
     let type = aChild.type;
     let button;
     if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_SEPARATOR) {
-      button = document.createElement("toolbarseparator");
+      button = document.createXULElement("toolbarseparator");
       button.setAttribute("class", "small-separator");
     } else {
-      button = document.createElement("toolbarbutton");
+      button = document.createXULElement("toolbarbutton");
       button.className = "bookmark-item";
       if (typeof this.options.extraClasses.entry == "string")
         button.classList.add(this.options.extraClasses.entry);
       button.setAttribute("label", aChild.title || "");
       let icon = aChild.icon;
       if (icon)
         button.setAttribute("image", icon);
 
@@ -2226,22 +2226,22 @@ this.PlacesPanelview = class extends Pla
   }
 
   _createDOMNodeForPlacesNode(placesNode) {
     this._domNodes.delete(placesNode);
 
     let element;
     let type = placesNode.type;
     if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_SEPARATOR) {
-      element = document.createElement("toolbarseparator");
+      element = document.createXULElement("toolbarseparator");
     } else {
       if (type != Ci.nsINavHistoryResultNode.RESULT_TYPE_URI)
         throw "Unexpected node";
 
-      element = document.createElement("toolbarbutton");
+      element = document.createXULElement("toolbarbutton");
       element.classList.add("subviewbutton", "subviewbutton-iconic", "bookmark-item");
       element.setAttribute("scheme", PlacesUIUtils.guessUrlSchemeForUI(placesNode.uri));
       element.setAttribute("label", PlacesUIUtils.getBestTitle(placesNode));
 
       let icon = placesNode.icon;
       if (icon)
         element.setAttribute("image", icon);
     }
@@ -2251,17 +2251,17 @@ this.PlacesPanelview = class extends Pla
       this._domNodes.set(placesNode, element);
 
     return element;
   }
 
   _setEmptyPopupStatus(panelview, empty = false) {
     if (!panelview._emptyMenuitem) {
       let label = PlacesUIUtils.getString("bookmarksMenuEmptyFolder");
-      panelview._emptyMenuitem = document.createElement("toolbarbutton");
+      panelview._emptyMenuitem = document.createXULElement("toolbarbutton");
       panelview._emptyMenuitem.setAttribute("label", label);
       panelview._emptyMenuitem.setAttribute("disabled", true);
       panelview._emptyMenuitem.className = "subviewbutton";
       if (typeof this.options.extraClasses.entry == "string")
         panelview._emptyMenuitem.classList.add(this.options.extraClasses.entry);
     }
 
     if (empty) {
--- a/browser/components/places/content/editBookmark.js
+++ b/browser/components/places/content/editBookmark.js
@@ -344,17 +344,17 @@ var gEditItemOverlay = {
    * @param aTitle
    *        The title to use as a label.
    * @return the new menu item.
    */
   _appendFolderItemToMenupopup(aMenupopup, aFolderGuid, aTitle) {
     // First make sure the folders-separator is visible
     this._element("foldersSeparator").hidden = false;
 
-    var folderMenuItem = document.createElement("menuitem");
+    var folderMenuItem = document.createXULElement("menuitem");
     folderMenuItem.folderGuid = aFolderGuid;
     folderMenuItem.setAttribute("label", aTitle);
     folderMenuItem.className = "menuitem-iconic folder-icon";
     aMenupopup.appendChild(folderMenuItem);
     return folderMenuItem;
   },
 
   async _initFolderMenuList(aSelectedFolderGuid) {
@@ -755,19 +755,19 @@ var gEditItemOverlay = {
       tagsSelector.removeChild(tagsSelector.lastElementChild);
     }
 
     let tagsInField = this._getTagsArrayFromTagsInputField();
     let allTags = await PlacesUtils.bookmarks.fetchTags();
     let fragment = document.createDocumentFragment();
     for (let i = 0; i < allTags.length; i++) {
       let tag = allTags[i].name;
-      let elt = document.createElement("richlistitem");
-      elt.appendChild(document.createElement("image"));
-      let label = document.createElement("label");
+      let elt = document.createXULElement("richlistitem");
+      elt.appendChild(document.createXULElement("image"));
+      let label = document.createXULElement("label");
       label.setAttribute("value", tag);
       elt.appendChild(label);
       if (tagsInField.includes(tag))
         elt.setAttribute("checked", "true");
       fragment.appendChild(elt);
       if (selectedTag === tag)
         selectedIndex = i;
     }
--- a/browser/components/places/tests/browser/browser_sort_in_library.js
+++ b/browser/components/places/tests/browser/browser_sort_in_library.js
@@ -132,17 +132,17 @@ function setSort(aOrganizerWin, aTree, a
  *
  * @param aOrganizerWin
  *        the Places window
  * @param aPlaceContentTree
  *        the placeContent tree in aOrganizerWin
  */
 function testInvalid(aOrganizerWin, aPlaceContentTree) {
   // Invalid column should fail by throwing an exception.
-  let bogusCol = document.createElement("treecol");
+  let bogusCol = document.createXULElement("treecol");
   bogusCol.setAttribute("anonid", "bogusColumn");
   setSort(aOrganizerWin, aPlaceContentTree, true, true, bogusCol, "ascending");
 
   // Invalid direction reverts to SORT_BY_NONE.
   setSort(aOrganizerWin, aPlaceContentTree, false, false, null, "bogus dir");
   checkSort(aPlaceContentTree, Ci.nsINavHistoryQueryOptions.SORT_BY_NONE, "");
 }
 
--- a/browser/components/preferences/applicationManager.js
+++ b/browser/components/preferences/applicationManager.js
@@ -35,21 +35,21 @@ var gAppManagerDialog = {
         continue;
 
       // Ensure the XBL binding is created eagerly.
       // eslint-disable-next-line no-undef
       list.appendChild(MozXULElement.parseXULToFragment("<richlistitem/>"));
       var item = list.lastChild;
       item.app = app;
 
-      var image = document.createElement("image");
+      var image = document.createXULElement("image");
       image.setAttribute("src", gMainPane._getIconURLForHandlerApp(app));
       item.appendChild(image);
 
-      var label = document.createElement("label");
+      var label = document.createXULElement("label");
       label.setAttribute("value", app.name);
       item.appendChild(label);
     }
 
     // Triggers onSelect which populates label
     list.selectedIndex = 0;
 
     // We want to block on those elements being localized because the
--- a/browser/components/preferences/containers.js
+++ b/browser/components/preferences/containers.js
@@ -84,61 +84,61 @@ let gContainersManager = {
     if (!name.value) {
       btnApplyChanges.setAttribute("disabled", true);
     } else {
       btnApplyChanges.removeAttribute("disabled");
     }
   },
 
   createIconButtons(defaultIcon) {
-    let radiogroup = document.createElement("radiogroup");
+    let radiogroup = document.createXULElement("radiogroup");
     radiogroup.setAttribute("id", "icon");
     radiogroup.className = "icon-buttons radio-buttons";
 
     for (let icon of this.icons) {
-      let iconSwatch = document.createElement("radio");
+      let iconSwatch = document.createXULElement("radio");
       iconSwatch.id = "iconbutton-" + icon;
       iconSwatch.name = "icon";
       iconSwatch.type = "radio";
       iconSwatch.value = icon;
 
       if (this.identity.icon && this.identity.icon == icon) {
         iconSwatch.setAttribute("selected", true);
       }
 
       document.l10n.setAttributes(iconSwatch, `containers-icon-${icon}`);
-      let iconElement = document.createElement("hbox");
+      let iconElement = document.createXULElement("hbox");
       iconElement.className = "userContext-icon";
       iconElement.setAttribute("data-identity-icon", icon);
 
       iconSwatch.appendChild(iconElement);
       radiogroup.appendChild(iconSwatch);
     }
 
     return radiogroup;
   },
 
   createColorSwatches(defaultColor) {
-    let radiogroup = document.createElement("radiogroup");
+    let radiogroup = document.createXULElement("radiogroup");
     radiogroup.setAttribute("id", "color");
     radiogroup.className = "radio-buttons";
 
     for (let color of this.colors) {
-      let colorSwatch = document.createElement("radio");
+      let colorSwatch = document.createXULElement("radio");
       colorSwatch.id = "colorswatch-" + color;
       colorSwatch.name = "color";
       colorSwatch.type = "radio";
       colorSwatch.value = color;
 
       if (this.identity.color && this.identity.color == color) {
         colorSwatch.setAttribute("selected", true);
       }
 
       document.l10n.setAttributes(colorSwatch, `containers-color-${color}`);
-      let iconElement = document.createElement("hbox");
+      let iconElement = document.createXULElement("hbox");
       iconElement.className = "userContext-icon";
       iconElement.setAttribute("data-identity-icon", "circle");
       iconElement.setAttribute("data-identity-color", color);
 
       colorSwatch.appendChild(iconElement);
       radiogroup.appendChild(colorSwatch);
     }
     return radiogroup;
--- a/browser/components/preferences/in-content/containers.js
+++ b/browser/components/preferences/in-content/containers.js
@@ -25,50 +25,50 @@ let gContainersPane = {
   },
 
   _rebuildView() {
     const containers = ContextualIdentityService.getPublicIdentities();
     while (this._list.firstChild) {
       this._list.firstChild.remove();
     }
     for (let container of containers) {
-      let item = document.createElement("richlistitem");
+      let item = document.createXULElement("richlistitem");
 
-      let outer = document.createElement("hbox");
+      let outer = document.createXULElement("hbox");
       outer.setAttribute("flex", 1);
       outer.setAttribute("align", "center");
       item.appendChild(outer);
 
-      let userContextIcon = document.createElement("hbox");
+      let userContextIcon = document.createXULElement("hbox");
       userContextIcon.className = "userContext-icon";
       userContextIcon.setAttribute("width", 24);
       userContextIcon.setAttribute("height", 24);
       userContextIcon.setAttribute("data-identity-icon", container.icon);
       userContextIcon.setAttribute("data-identity-color", container.color);
       outer.appendChild(userContextIcon);
 
-      let label = document.createElement("label");
+      let label = document.createXULElement("label");
       label.setAttribute("flex", 1);
       label.setAttribute("crop", "end");
       label.textContent = ContextualIdentityService.getUserContextLabel(container.userContextId);
       outer.appendChild(label);
 
-      let containerButtons = document.createElement("hbox");
+      let containerButtons = document.createXULElement("hbox");
       containerButtons.className = "container-buttons";
       containerButtons.setAttribute("flex", 1);
       containerButtons.setAttribute("align", "right");
       item.appendChild(containerButtons);
 
-      let prefsButton = document.createElement("button");
+      let prefsButton = document.createXULElement("button");
       prefsButton.setAttribute("oncommand", "gContainersPane.onPreferenceCommand(event.originalTarget)");
       prefsButton.setAttribute("value", container.userContextId);
       document.l10n.setAttributes(prefsButton, "containers-preferences-button");
       containerButtons.appendChild(prefsButton);
 
-      let removeButton = document.createElement("button");
+      let removeButton = document.createXULElement("button");
       removeButton.setAttribute("oncommand", "gContainersPane.onRemoveCommand(event.originalTarget)");
       removeButton.setAttribute("value", container.userContextId);
       document.l10n.setAttributes(removeButton, "containers-remove-button");
       containerButtons.appendChild(removeButton);
 
       this._list.appendChild(item);
     }
   },
--- a/browser/components/preferences/in-content/extensionControlled.js
+++ b/browser/components/preferences/in-content/extensionControlled.js
@@ -218,24 +218,24 @@ function showEnableExtensionMessage(sett
 
   let icon = (url, name) => {
     let img = document.createElementNS("http://www.w3.org/1999/xhtml", "img");
     img.src = url;
     img.setAttribute("data-l10n-name", name);
     img.className = "extension-controlled-icon";
     return img;
   };
-  let label = document.createElement("label");
+  let label = document.createXULElement("label");
   let addonIcon = icon("chrome://mozapps/skin/extensions/extensionGeneric-16.svg", "addons-icon");
   let toolbarIcon = icon("chrome://browser/skin/menu.svg", "menu-icon");
   label.appendChild(addonIcon);
   label.appendChild(toolbarIcon);
   document.l10n.setAttributes(label, "extension-controlled-enable");
   elements.description.appendChild(label);
-  let dismissButton = document.createElement("image");
+  let dismissButton = document.createXULElement("image");
   dismissButton.setAttribute("class", "extension-controlled-icon close-icon");
   dismissButton.addEventListener("click", function dismissHandler() {
     hideControllingExtension(settingName);
     dismissButton.removeEventListener("click", dismissHandler);
   });
   elements.description.appendChild(dismissButton);
 }
 
--- a/browser/components/preferences/in-content/findInPage.js
+++ b/browser/components/preferences/in-content/findInPage.js
@@ -513,18 +513,18 @@ var gSearchResultsPane = {
    *    DOM Element
    * @param String query
    *    Word or words that are being searched for
    */
   createSearchTooltip(anchorNode, query) {
     if (anchorNode.tooltipNode) {
       return;
     }
-    let searchTooltip = anchorNode.ownerDocument.createElement("span");
-    let searchTooltipText = anchorNode.ownerDocument.createElement("span");
+    let searchTooltip = anchorNode.ownerDocument.createXULElement("span");
+    let searchTooltipText = anchorNode.ownerDocument.createXULElement("span");
     searchTooltip.className = "search-tooltip";
     searchTooltipText.textContent = query;
     searchTooltip.appendChild(searchTooltipText);
 
     // Set tooltipNode property to track corresponded tooltip node.
     anchorNode.tooltipNode = searchTooltip;
     anchorNode.parentElement.classList.add("search-tooltip-parent");
     anchorNode.parentElement.appendChild(searchTooltip);
--- a/browser/components/preferences/in-content/main.js
+++ b/browser/components/preferences/in-content/main.js
@@ -788,17 +788,17 @@ var gMainPane = {
   initBrowserLocale() {
     let localeCodes = Services.locale.getAvailableLocales();
     let localeNames = Services.intl.getLocaleDisplayNames(undefined, localeCodes);
     let locales = localeCodes.map((code, i) => ({code, name: localeNames[i]}));
     locales.sort((a, b) => a.name > b.name);
 
     let fragment = document.createDocumentFragment();
     for (let {code, name} of locales) {
-      let menuitem = document.createElement("menuitem");
+      let menuitem = document.createXULElement("menuitem");
       menuitem.setAttribute("value", code);
       menuitem.setAttribute("label", name);
       fragment.appendChild(menuitem);
     }
     let menulist = document.getElementById("defaultBrowserLanguage");
     let menupopup = menulist.querySelector("menupopup");
     menupopup.appendChild(fragment);
     menulist.value = Services.locale.getRequestedLocale();
@@ -1581,28 +1581,28 @@ var gMainPane = {
 
     // Clear out existing items.
     while (menuPopup.hasChildNodes())
       menuPopup.removeChild(menuPopup.lastChild);
 
     let internalMenuItem;
     // Add the "Preview in Firefox" option for optional internal handlers.
     if (handlerInfo instanceof InternalHandlerInfoWrapper) {
-      internalMenuItem = document.createElement("menuitem");
+      internalMenuItem = document.createXULElement("menuitem");
       internalMenuItem.setAttribute("action", Ci.nsIHandlerInfo.handleInternally);
       let label = gMainPane._prefsBundle.getFormattedString("previewInApp",
         [this._brandShortName]);
       internalMenuItem.setAttribute("label", label);
       internalMenuItem.setAttribute("tooltiptext", label);
       internalMenuItem.setAttribute(APP_ICON_ATTR_NAME, "ask");
       menuPopup.appendChild(internalMenuItem);
     }
 
     {
-      var askMenuItem = document.createElement("menuitem");
+      var askMenuItem = document.createXULElement("menuitem");
       askMenuItem.setAttribute("action", Ci.nsIHandlerInfo.alwaysAsk);
       let label;
       if (isFeedType(handlerInfo.type))
         label = gMainPane._prefsBundle.getFormattedString("previewInApp",
           [this._brandShortName]);
       else
         label = gMainPane._prefsBundle.getString("alwaysAsk");
       askMenuItem.setAttribute("label", label);
@@ -1612,45 +1612,45 @@ var gMainPane = {
     }
 
     // Create a menu item for saving to disk.
     // Note: this option isn't available to protocol types, since we don't know
     // what it means to save a URL having a certain scheme to disk, nor is it
     // available to feeds, since the feed code doesn't implement the capability.
     if ((handlerInfo.wrappedHandlerInfo instanceof Ci.nsIMIMEInfo) &&
       !isFeedType(handlerInfo.type)) {
-      var saveMenuItem = document.createElement("menuitem");
+      var saveMenuItem = document.createXULElement("menuitem");
       saveMenuItem.setAttribute("action", Ci.nsIHandlerInfo.saveToDisk);
       let label = gMainPane._prefsBundle.getString("saveFile");
       saveMenuItem.setAttribute("label", label);
       saveMenuItem.setAttribute("tooltiptext", label);
       saveMenuItem.setAttribute(APP_ICON_ATTR_NAME, "save");
       menuPopup.appendChild(saveMenuItem);
     }
 
     // If this is the feed type, add a Live Bookmarks item.
     if (isFeedType(handlerInfo.type)) {
-      internalMenuItem = document.createElement("menuitem");
+      internalMenuItem = document.createXULElement("menuitem");
       internalMenuItem.setAttribute("action", Ci.nsIHandlerInfo.handleInternally);
       let label = gMainPane._prefsBundle.getFormattedString("addLiveBookmarksInApp",
         [this._brandShortName]);
       internalMenuItem.setAttribute("label", label);
       internalMenuItem.setAttribute("tooltiptext", label);
       internalMenuItem.setAttribute(APP_ICON_ATTR_NAME, "feed");
       menuPopup.appendChild(internalMenuItem);
     }
 
     // Add a separator to distinguish these items from the helper app items
     // that follow them.
-    let menuseparator = document.createElement("menuseparator");
+    let menuseparator = document.createXULElement("menuseparator");
     menuPopup.appendChild(menuseparator);
 
     // Create a menu item for the OS default application, if any.
     if (handlerInfo.hasDefaultHandler) {
-      var defaultMenuItem = document.createElement("menuitem");
+      var defaultMenuItem = document.createXULElement("menuitem");
       defaultMenuItem.setAttribute("action", Ci.nsIHandlerInfo.useSystemDefault);
       let label = gMainPane._prefsBundle.getFormattedString("useDefault",
         [handlerInfo.defaultDescription]);
       defaultMenuItem.setAttribute("label", label);
       defaultMenuItem.setAttribute("tooltiptext", handlerInfo.defaultDescription);
       defaultMenuItem.setAttribute("image", handlerInfo.iconURLForSystemDefault);
 
       menuPopup.appendChild(defaultMenuItem);
@@ -1658,17 +1658,17 @@ var gMainPane = {
 
     // Create menu items for possible handlers.
     let preferredApp = handlerInfo.preferredApplicationHandler;
     var possibleAppMenuItems = [];
     for (let possibleApp of handlerInfo.possibleApplicationHandlers.enumerate()) {
       if (!this.isValidHandlerApp(possibleApp))
         continue;
 
-      let menuItem = document.createElement("menuitem");
+      let menuItem = document.createXULElement("menuitem");
       menuItem.setAttribute("action", Ci.nsIHandlerInfo.useHelperApp);
       let label;
       if (possibleApp instanceof Ci.nsILocalHandlerApp)
         label = getFileDisplayName(possibleApp.executable);
       else
         label = possibleApp.name;
       label = gMainPane._prefsBundle.getFormattedString("useApp", [label]);
       menuItem.setAttribute("label", label);
@@ -1699,17 +1699,17 @@ var gMainPane = {
           let app = possibleHandlers.queryElementAt(i, Ci.nsIHandlerApp);
           // nsGIOMimeApp::Equals is able to compare with nsILocalHandlerApp
           if (handler.equals(app)) {
             appAlreadyInHandlers = true;
             break;
           }
         }
         if (!appAlreadyInHandlers) {
-          let menuItem = document.createElement("menuitem");
+          let menuItem = document.createXULElement("menuitem");
           menuItem.setAttribute("action", Ci.nsIHandlerInfo.useHelperApp);
           let label = gMainPane._prefsBundle.getFormattedString("useApp", [handler.name]);
           menuItem.setAttribute("label", label);
           menuItem.setAttribute("tooltiptext", label);
           menuItem.setAttribute("image", this._getIconURLForHandlerApp(handler));
 
           // Attach the handler app object to the menu item so we can use it
           // to make changes to the datastore when the user selects the item.
@@ -1718,17 +1718,17 @@ var gMainPane = {
           menuPopup.appendChild(menuItem);
           possibleAppMenuItems.push(menuItem);
         }
       }
     }
 
     // Create a menu item for the plugin.
     if (handlerInfo.pluginName) {
-      var pluginMenuItem = document.createElement("menuitem");
+      var pluginMenuItem = document.createXULElement("menuitem");
       pluginMenuItem.setAttribute("action", kActionUsePlugin);
       let label = gMainPane._prefsBundle.getFormattedString("usePluginIn",
         [handlerInfo.pluginName,
         this._brandShortName]);
       pluginMenuItem.setAttribute("label", label);
       pluginMenuItem.setAttribute("tooltiptext", label);
       pluginMenuItem.setAttribute(APP_ICON_ATTR_NAME, "plugin");
       menuPopup.appendChild(pluginMenuItem);
@@ -1739,32 +1739,32 @@ var gMainPane = {
     if (AppConstants.platform == "win") {
       // On Windows, selecting an application to open another application
       // would be meaningless so we special case executables.
       let executableType = Cc["@mozilla.org/mime;1"].getService(Ci.nsIMIMEService)
         .getTypeFromExtension("exe");
       canOpenWithOtherApp = handlerInfo.type != executableType;
     }
     if (canOpenWithOtherApp) {
-      let menuItem = document.createElement("menuitem");
+      let menuItem = document.createXULElement("menuitem");
       menuItem.className = "choose-app-item";
       menuItem.addEventListener("command", function(e) {
         gMainPane.chooseApp(e);
       });
       let label = gMainPane._prefsBundle.getString("useOtherApp");
       menuItem.setAttribute("label", label);
       menuItem.setAttribute("tooltiptext", label);
       menuPopup.appendChild(menuItem);
     }
 
     // Create a menu item for managing applications.
     if (possibleAppMenuItems.length) {
-      let menuItem = document.createElement("menuseparator");
+      let menuItem = document.createXULElement("menuseparator");
       menuPopup.appendChild(menuItem);
-      menuItem = document.createElement("menuitem");
+      menuItem = document.createXULElement("menuitem");
       menuItem.className = "manage-app-item";
       menuItem.addEventListener("command", function(e) {
         gMainPane.manageApp(e);
       });
       menuItem.setAttribute("label", gMainPane._prefsBundle.getString("manageApp"));
       menuPopup.appendChild(menuItem);
     }
 
--- a/browser/components/preferences/languages.js
+++ b/browser/components/preferences/languages.js
@@ -87,17 +87,17 @@ var gLanguagesDialog = {
     let frag = document.createDocumentFragment();
 
     // Load the UI with the data
     for (var i = 0; i < this._availableLanguagesList.length; ++i) {
       let locale = this._availableLanguagesList[i];
       let localeCode = locale.code;
       if (locale.isVisible &&
           (!(localeCode in this._acceptLanguages) || !this._acceptLanguages[localeCode])) {
-        var menuitem = document.createElement("menuitem");
+        var menuitem = document.createXULElement("menuitem");
         menuitem.id = localeCode;
         document.l10n.setAttributes(menuitem, "languages-code-format", {
           locale: locale.name,
           code: localeCode,
         });
         frag.appendChild(menuitem);
       }
     }
@@ -128,18 +128,18 @@ var gLanguagesDialog = {
       this._activeLanguages.firstChild.remove();
 
     var selectedIndex = 0;
     var preference = Preferences.get("intl.accept_languages");
     if (preference.value == "")
       return;
     var languages = preference.value.toLowerCase().split(/\s*,\s*/);
     for (var i = 0; i < languages.length; ++i) {
-      var listitem = document.createElement("richlistitem");
-      var label = document.createElement("label");
+      var listitem = document.createXULElement("richlistitem");
+      var label = document.createXULElement("label");
       listitem.appendChild(label);
       listitem.id = languages[i];
       if (languages[i] == this._selectedItemID)
         selectedIndex = i;
       this._activeLanguages.appendChild(listitem);
       var localeName = this._getLocaleName(languages[i]);
       document.l10n.setAttributes(label, "languages-active-code-format", {
         locale: localeName,
--- a/browser/components/preferences/permissions.js
+++ b/browser/components/preferences/permissions.js
@@ -261,33 +261,33 @@ var gPermissionManager = {
   _loadPermissions() {
     // load permissions into a table.
     for (let nextPermission of Services.perms.enumerator) {
       this._addPermissionToList(nextPermission);
     }
   },
 
   _createPermissionListItem(permission) {
-    let richlistitem = document.createElement("richlistitem");
+    let richlistitem = document.createXULElement("richlistitem");
     richlistitem.setAttribute("origin", permission.origin);
-    let row = document.createElement("hbox");
+    let row = document.createXULElement("hbox");
     row.setAttribute("flex", "1");
 
-    let hbox = document.createElement("hbox");
-    let website = document.createElement("label");
+    let hbox = document.createXULElement("hbox");
+    let website = document.createXULElement("label");
     website.setAttribute("value", permission.origin);
     hbox.setAttribute("width", "0");
     hbox.setAttribute("class", "website-name");
     hbox.setAttribute("flex", "3");
     hbox.appendChild(website);
     row.appendChild(hbox);
 
     if (!this._hideStatusColumn) {
-      hbox = document.createElement("hbox");
-      let capability = document.createElement("label");
+      hbox = document.createXULElement("hbox");
+      let capability = document.createXULElement("label");
       capability.setAttribute("class", "website-capability-value");
       capability.setAttribute("value", permission.capability);
       hbox.setAttribute("width", "0");
       hbox.setAttribute("class", "website-name");
       hbox.setAttribute("flex", "1");
       hbox.appendChild(capability);
       row.appendChild(hbox);
     }
--- a/browser/components/preferences/siteDataRemoveSelected.js
+++ b/browser/components/preferences/siteDataRemoveSelected.js
@@ -8,18 +8,18 @@
 let gSiteDataRemoveSelected = {
 
   init() {
     let hosts = window.arguments[0].hosts;
     hosts.sort();
     let list = document.getElementById("removalList");
     let fragment = document.createDocumentFragment();
     for (let host of hosts) {
-      let listItem = document.createElement("richlistitem");
-      let label = document.createElement("label");
+      let listItem = document.createXULElement("richlistitem");
+      let label = document.createXULElement("label");
       label.setAttribute("value", host);
       listItem.appendChild(label);
       fragment.appendChild(listItem);
     }
     list.appendChild(fragment);
   },
 
   ondialogaccept() {
--- a/browser/components/preferences/siteDataSettings.js
+++ b/browser/components/preferences/siteDataSettings.js
@@ -21,26 +21,26 @@ let gSiteDataSettings = {
   // - usage: disk usage which site uses
   // - userAction: "remove" or "update-permission"; the action user wants to take.
   _sites: null,
 
   _list: null,
   _searchBox: null,
 
   _createSiteListItem(site) {
-    let item = document.createElement("richlistitem");
+    let item = document.createXULElement("richlistitem");
     item.setAttribute("host", site.host);
-    let container = document.createElement("hbox");
+    let container = document.createXULElement("hbox");
 
     // Creates a new column item with the specified relative width.
     function addColumnItem(l10n, flexWidth, tooltipText) {
-      let box = document.createElement("hbox");
+      let box = document.createXULElement("hbox");
       box.className = "item-box";
       box.setAttribute("flex", flexWidth);
-      let label = document.createElement("label");
+      let label = document.createXULElement("label");
       label.setAttribute("crop", "end");
       if (l10n) {
         if (l10n.hasOwnProperty("raw")) {
           box.setAttribute("tooltiptext", l10n.raw);
           label.setAttribute("value", l10n.raw);
         } else {
           document.l10n.setAttributes(label, l10n.id, l10n.args);
         }
--- a/browser/components/preferences/sitePermissions.js
+++ b/browser/components/preferences/sitePermissions.js
@@ -193,47 +193,47 @@ var gSitePermissionsManager = {
   _loadPermissions() {
     // load permissions into a table.
     for (let nextPermission of Services.perms.enumerator) {
       this._addPermissionToList(nextPermission);
     }
   },
 
   _createPermissionListItem(permission) {
-    let richlistitem = document.createElement("richlistitem");
+    let richlistitem = document.createXULElement("richlistitem");
     richlistitem.setAttribute("origin", permission.origin);
-    let row = document.createElement("hbox");
+    let row = document.createXULElement("hbox");
     row.setAttribute("flex", "1");
 
-    let hbox = document.createElement("hbox");
-    let website = document.createElement("label");
+    let hbox = document.createXULElement("hbox");
+    let website = document.createXULElement("label");
     website.setAttribute("value", permission.origin);
     website.setAttribute("width", "50");
     hbox.setAttribute("class", "website-name");
     hbox.setAttribute("flex", "3");
     hbox.appendChild(website);
 
-    let menulist = document.createElement("menulist");
-    let menupopup = document.createElement("menupopup");
+    let menulist = document.createXULElement("menulist");
+    let menupopup = document.createXULElement("menupopup");
     menulist.setAttribute("flex", "1");
     menulist.setAttribute("width", "50");
     menulist.setAttribute("class", "website-status");
     menulist.appendChild(menupopup);
     let states = SitePermissions.getAvailableStates(permission.type);
     for (let state of states) {
       // Work around the (rare) edge case when a user has changed their
       // default permission type back to UNKNOWN while still having a
       // PROMPT permission set for an origin.
       if (state == SitePermissions.UNKNOWN &&
           permission.capability == SitePermissions.PROMPT) {
         state = SitePermissions.PROMPT;
       } else if (state == SitePermissions.UNKNOWN) {
         continue;
       }
-      let m = document.createElement("menuitem");
+      let m = document.createXULElement("menuitem");
       document.l10n.setAttributes(m, this._getCapabilityString(state));
       m.setAttribute("value", state);
       menupopup.appendChild(m);
     }
     menulist.value = permission.capability;
 
     menulist.addEventListener("select", () => {
       this.onPermissionChange(permission, Number(menulist.selectedItem.value));
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -1135,17 +1135,17 @@ var UITour = {
       tooltipIcon.src = aIconURL || "";
       tooltipIcon.hidden = !aIconURL;
 
       while (tooltipButtons.firstChild)
         tooltipButtons.firstChild.remove();
 
       for (let button of aButtons) {
         let isButton = button.style != "text";
-        let el = document.createElement(isButton ? "button" : "label");
+        let el = document.createXULElement(isButton ? "button" : "label");
         el.setAttribute(isButton ? "label" : "value", button.label);
 
         if (isButton) {
           if (button.iconURL)
             el.setAttribute("image", button.iconURL);
 
           if (button.style == "link")
             el.setAttribute("class", "button-link");
--- a/browser/extensions/formautofill/FormAutofillDoorhanger.jsm
+++ b/browser/extensions/formautofill/FormAutofillDoorhanger.jsm
@@ -231,17 +231,17 @@ let FormAutofillDoorhanger = {
    *         popupnotificationcontent
    * @param  {string} message
    *         The localized string for link title.
    * @param  {string} link
    *         Makes it possible to open and highlight a section in preferences
    */
   _appendPrivacyPanelLink(content, message, link) {
     let chromeDoc = content.ownerDocument;
-    let privacyLinkElement = chromeDoc.createElement("label");
+    let privacyLinkElement = chromeDoc.createXULElement("label");
     privacyLinkElement.className = "text-link";
     privacyLinkElement.setAttribute("useoriginprincipal", true);
     privacyLinkElement.setAttribute("href", link || "about:preferences#privacy");
     privacyLinkElement.setAttribute("value", message);
     content.appendChild(privacyLinkElement);
   },
 
   /**
@@ -252,29 +252,29 @@ let FormAutofillDoorhanger = {
    *         The label showing above description.
    * @param  {string} descriptionIcon
    *         The src of description icon.
    */
   _appendDescription(content, descriptionLabel, descriptionIcon) {
     let chromeDoc = content.ownerDocument;
     let docFragment = chromeDoc.createDocumentFragment();
 
-    let descriptionLabelElement = chromeDoc.createElement("label");
+    let descriptionLabelElement = chromeDoc.createXULElement("label");
     descriptionLabelElement.setAttribute("value", descriptionLabel);
     docFragment.appendChild(descriptionLabelElement);
 
-    let descriptionWrapper = chromeDoc.createElement("hbox");
+    let descriptionWrapper = chromeDoc.createXULElement("hbox");
     descriptionWrapper.className = "desc-message-box";
 
     if (descriptionIcon) {
-      let descriptionIconElement = chromeDoc.createElement("image");
+      let descriptionIconElement = chromeDoc.createXULElement("image");
       descriptionWrapper.appendChild(descriptionIconElement);
     }
 
-    let descriptionElement = chromeDoc.createElement("description");
+    let descriptionElement = chromeDoc.createXULElement("description");
     descriptionWrapper.appendChild(descriptionElement);
     docFragment.appendChild(descriptionWrapper);
 
     content.appendChild(docFragment);
   },
 
   _updateDescription(content, description) {
     content.querySelector("description").textContent = description;
@@ -296,17 +296,17 @@ let FormAutofillDoorhanger = {
   _setAnchor(browser, anchor) {
     let chromeDoc = browser.ownerDocument;
     let {id, URL, tooltiptext} = anchor;
     let anchorEt = chromeDoc.getElementById(id);
     if (!anchorEt) {
       let notificationPopupBox =
         chromeDoc.getElementById("notification-popup-box");
       // Icon shown on URL bar
-      let anchorElement = chromeDoc.createElement("image");
+      let anchorElement = chromeDoc.createXULElement("image");
       anchorElement.id = id;
       anchorElement.setAttribute("src", URL);
       anchorElement.classList.add("notification-anchor-icon");
       anchorElement.setAttribute("role", "button");
       anchorElement.setAttribute("tooltiptext", tooltiptext);
       notificationPopupBox.appendChild(anchorElement);
     }
   },
@@ -378,17 +378,17 @@ let FormAutofillDoorhanger = {
         // There's no preferences link or other customization in first time use doorhanger.
         if (type == "firstTimeUse") {
           return;
         }
 
         const notificationElementId = notificationId + "-notification";
         const notification = chromeDoc.getElementById(notificationElementId);
         const notificationContent = notification.querySelector("popupnotificationcontent") ||
-                                    chromeDoc.createElement("popupnotificationcontent");
+                                    chromeDoc.createXULElement("popupnotificationcontent");
         if (!notification.contains(notificationContent)) {
           notificationContent.setAttribute("orient", "vertical");
           this._appendDescription(notificationContent, descriptionLabel, descriptionIcon);
           this._appendPrivacyPanelLink(notificationContent, linkMessage, spotlightURL);
           notification.append(notificationContent);
         }
         this._updateDescription(notificationContent, description);
       };
--- a/browser/modules/ProcessHangMonitor.jsm
+++ b/browser/modules/ProcessHangMonitor.jsm
@@ -453,17 +453,17 @@ var ProcessHangMonitor = {
       let addonName = aps.getExtensionName(report.addonId);
 
       let label = bundle.getFormattedString("processHang.add-on.label",
                                             [addonName, brandBundle.getString("brandShortName")]);
 
       let linkText = bundle.getString("processHang.add-on.learn-more.text");
       let linkURL = "https://support.mozilla.org/kb/warning-unresponsive-script#w_other-causes";
 
-      let link = doc.createElement("label");
+      let link = doc.createXULElement("label");
       link.setAttribute("class", "text-link");
       link.setAttribute("role", "link");
       link.setAttribute("onclick", `openTrustedLinkIn(${JSON.stringify(linkURL)}, "tab")`);
       link.setAttribute("value", linkText);
 
       message = doc.createDocumentFragment();
       message.appendChild(doc.createTextNode(label + " "));
       message.appendChild(link);
--- a/browser/modules/webrtcUI.jsm
+++ b/browser/modules/webrtcUI.jsm
@@ -564,17 +564,17 @@ function prompt(aBrowser, aRequest) {
         label.setAttribute("accesskey",
                            stringBundle.getString(gumStringId + ".accesskey"));
 
         // "Select <type>" is the default because we can't pick a
         // 'default' window to share.
         addDeviceToList(menupopup,
                         stringBundle.getString("getUserMedia.pick" + typeName + ".label"),
                         "-1");
-        menupopup.appendChild(doc.createElement("menuseparator"));
+        menupopup.appendChild(doc.createXULElement("menuseparator"));
 
         // Build the list of 'devices'.
         let monitorIndex = 1;
         for (let i = 0; i < devices.length; ++i) {
           let device = devices[i];
 
           let name;
           // Building screen list from available screens.
@@ -633,17 +633,17 @@ function prompt(aBrowser, aRequest) {
             let string;
             let bundle = chromeWin.gNavigatorBundle;
 
             let learnMoreText =
               bundle.getString("getUserMedia.shareScreen.learnMoreLabel");
             let baseURL =
               Services.urlFormatter.formatURLPref("app.support.baseURL");
 
-            let learnMore = chromeWin.document.createElement("label");
+            let learnMore = chromeWin.document.createXULElement("label");
             learnMore.className = "text-link";
             learnMore.setAttribute("href", baseURL + "screenshare-safety");
             learnMore.textContent = learnMoreText;
 
             if (type == "screen") {
               string = bundle.getFormattedString("getUserMedia.shareScreenWarning.message",
                                                  ["<>"]);
             } else {
@@ -680,17 +680,17 @@ function prompt(aBrowser, aRequest) {
               video.play();
             };
           });
         };
         menupopup.addEventListener("command", menupopup._commandEventListener);
       }
 
       function addDeviceToList(menupopup, deviceName, deviceIndex, type) {
-        let menuitem = doc.createElement("menuitem");
+        let menuitem = doc.createXULElement("menuitem");
         menuitem.setAttribute("value", deviceIndex);
         menuitem.setAttribute("label", deviceName);
         menuitem.setAttribute("tooltiptext", deviceName);
         if (type)
           menuitem.setAttribute("devicetype", type);
 
         if (deviceIndex == "-1")
           menuitem.setAttribute("disabled", true);
@@ -905,44 +905,44 @@ function getGlobalIndicator() {
       }
 
       let bundle =
         Services.strings.createBundle("chrome://browser/locale/webrtcIndicator.properties");
 
       if (activeStreams.length == 1) {
         let stream = activeStreams[0];
 
-        let menuitem = this.ownerDocument.createElement("menuitem");
+        let menuitem = this.ownerDocument.createXULElement("menuitem");
         let labelId = "webrtcIndicator.sharing" + type + "With.menuitem";
         let label = stream.browser.contentTitle || stream.uri;
         menuitem.setAttribute("label", bundle.formatStringFromName(labelId, [label], 1));
         menuitem.setAttribute("disabled", "true");
         this.appendChild(menuitem);
 
-        menuitem = this.ownerDocument.createElement("menuitem");
+        menuitem = this.ownerDocument.createXULElement("menuitem");
         menuitem.setAttribute("label",
                               bundle.GetStringFromName("webrtcIndicator.controlSharing.menuitem"));
         menuitem.stream = stream;
         menuitem.addEventListener("command", indicator._command);
 
         this.appendChild(menuitem);
         return true;
       }
 
       // We show a different menu when there are several active streams.
-      let menuitem = this.ownerDocument.createElement("menuitem");
+      let menuitem = this.ownerDocument.createXULElement("menuitem");
       let labelId = "webrtcIndicator.sharing" + type + "WithNTabs.menuitem";
       let count = activeStreams.length;
       let label = PluralForm.get(count, bundle.GetStringFromName(labelId)).replace("#1", count);
       menuitem.setAttribute("label", label);
       menuitem.setAttribute("disabled", "true");
       this.appendChild(menuitem);
 
       for (let stream of activeStreams) {
-        let item = this.ownerDocument.createElement("menuitem");
+        let item = this.ownerDocument.createXULElement("menuitem");
         labelId = "webrtcIndicator.controlSharingOn.menuitem";
         label = stream.browser.contentTitle || stream.uri;
         item.setAttribute("label", bundle.formatStringFromName(labelId, [label], 1));
         item.stream = stream;
         item.addEventListener("command", indicator._command);
         this.appendChild(item);
       }
 
@@ -952,25 +952,25 @@ function getGlobalIndicator() {
     _popupHiding(aEvent) {
       while (this.firstChild)
         this.firstChild.remove();
     },
 
     _setIndicatorState(aName, aState) {
       let field = "_" + aName.toLowerCase();
       if (aState && !this[field]) {
-        let menu = this._hiddenDoc.createElement("menu");
+        let menu = this._hiddenDoc.createXULElement("menu");
         menu.setAttribute("id", "webRTC-sharing" + aName + "-menu");
 
         // The CSS will only be applied if the menu is actually inserted in the DOM.
         this._hiddenDoc.documentElement.appendChild(menu);
 
         this._statusBar.addItem(menu);
 
-        let menupopup = this._hiddenDoc.createElement("menupopup");
+        let menupopup = this._hiddenDoc.createXULElement("menupopup");
         menupopup.setAttribute("type", aName);
         menupopup.addEventListener("popupshowing", this._popupShowing);
         menupopup.addEventListener("popuphiding", this._popupHiding);
         menupopup.addEventListener("command", this._command);
         menu.appendChild(menupopup);
 
         this[field] = menu;
       } else if (this[field] && !aState) {
@@ -1006,17 +1006,17 @@ function onTabSharingMenuPopupShowing(e)
       stringName += "Microphone";
     if (types.screen)
       stringName += types.screen;
 
     let doc = e.target.ownerDocument;
     let bundle = doc.defaultView.gNavigatorBundle;
 
     let origin = getHostOrExtensionName(null, streamInfo.uri);
-    let menuitem = doc.createElement("menuitem");
+    let menuitem = doc.createXULElement("menuitem");
     menuitem.setAttribute("label", bundle.getFormattedString(stringName, [origin]));
     menuitem.stream = streamInfo;
     menuitem.addEventListener("command", onTabSharingMenuPopupCommand);
     e.target.appendChild(menuitem);
   }
 }
 
 function onTabSharingMenuPopupHiding(e) {
@@ -1028,35 +1028,35 @@ function onTabSharingMenuPopupCommand(e)
   webrtcUI.showSharingDoorhanger(e.target.stream);
 }
 
 function showOrCreateMenuForWindow(aWindow) {
   let document = aWindow.document;
   let menu = document.getElementById("tabSharingMenu");
   if (!menu) {
     let stringBundle = aWindow.gNavigatorBundle;
-    menu = document.createElement("menu");
+    menu = document.createXULElement("menu");
     menu.id = "tabSharingMenu";
     let labelStringId = "getUserMedia.sharingMenu.label";
     menu.setAttribute("label", stringBundle.getString(labelStringId));
 
     let container, insertionPoint;
     if (AppConstants.platform == "macosx") {
       container = document.getElementById("windowPopup");
       insertionPoint = document.getElementById("sep-window-list");
-      let separator = document.createElement("menuseparator");
+      let separator = document.createXULElement("menuseparator");
       separator.id = "tabSharingSeparator";
       container.insertBefore(separator, insertionPoint);
     } else {
       let accesskeyStringId = "getUserMedia.sharingMenu.accesskey";
       menu.setAttribute("accesskey", stringBundle.getString(accesskeyStringId));
       container = document.getElementById("main-menubar");
       insertionPoint = document.getElementById("helpMenu");
     }
-    let popup = document.createElement("menupopup");
+    let popup = document.createXULElement("menupopup");
     popup.id = "tabSharingMenuPopup";
     popup.addEventListener("popupshowing", onTabSharingMenuPopupShowing);
     popup.addEventListener("popuphiding", onTabSharingMenuPopupHiding);
     menu.appendChild(popup);
     container.insertBefore(menu, insertionPoint);
   } else {
     menu.hidden = false;
     if (AppConstants.platform == "macosx") {
--- a/devtools/client/framework/browser-menus.js
+++ b/devtools/client/framework/browser-menus.js
@@ -43,17 +43,17 @@ function l10n(key) {
  *        Access key of the menuitem, used as shortcut while opening the menu.
  * @param {Boolean} isCheckbox (optional)
  *        If true, the menuitem will act as a checkbox and have an optional
  *        tick on its left.
  *
  * @return XULMenuItemElement
  */
 function createMenuItem({ doc, id, label, accesskey, isCheckbox }) {
-  const menuitem = doc.createElement("menuitem");
+  const menuitem = doc.createXULElement("menuitem");
   menuitem.id = id;
   menuitem.setAttribute("label", label);
   if (accesskey) {
     menuitem.setAttribute("accesskey", accesskey);
   }
   if (isCheckbox) {
     menuitem.setAttribute("type", "checkbox");
     menuitem.setAttribute("autocheck", "false");
@@ -209,17 +209,17 @@ function addAllToolsToMenu(doc) {
  *        The document to which menus are to be added.
  */
 function addTopLevelItems(doc) {
   const menuItems = doc.createDocumentFragment();
 
   const { menuitems } = require("../menus");
   for (const item of menuitems) {
     if (item.separator) {
-      const separator = doc.createElement("menuseparator");
+      const separator = doc.createXULElement("menuseparator");
       separator.id = item.id;
       menuItems.appendChild(separator);
     } else {
       const { id, l10nKey } = item;
 
       // Create a <menuitem>
       const menuitem = createMenuItem({
         doc,
--- a/devtools/client/framework/toolbox-hosts.js
+++ b/devtools/client/framework/toolbox-hosts.js
@@ -48,22 +48,22 @@ BottomHost.prototype = {
    */
   create: async function() {
     await gDevToolsBrowser.loadBrowserStyleSheet(this.hostTab.ownerGlobal);
 
     const gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
     const ownerDocument = gBrowser.ownerDocument;
     this._nbox = gBrowser.getNotificationBox(this.hostTab.linkedBrowser);
 
-    this._splitter = ownerDocument.createElement("splitter");
+    this._splitter = ownerDocument.createXULElement("splitter");
     this._splitter.setAttribute("class", "devtools-horizontal-splitter");
     // Avoid resizing notification containers
     this._splitter.setAttribute("resizebefore", "flex");
 
-    this.frame = ownerDocument.createElement("iframe");
+    this.frame = ownerDocument.createXULElement("iframe");
     this.frame.flex = 1; // Required to be able to shrink when the window shrinks
     this.frame.className = "devtools-toolbox-bottom-iframe";
     this.frame.height = Math.min(
       Services.prefs.getIntPref(this.heightPref),
       this._nbox.clientHeight - MIN_PAGE_SIZE
     );
 
     this._nbox.appendChild(this._splitter);
@@ -136,20 +136,20 @@ class SidebarHost {
    */
   async create() {
     await gDevToolsBrowser.loadBrowserStyleSheet(this.hostTab.ownerGlobal);
     const gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
     const ownerDocument = gBrowser.ownerDocument;
     this._browser = gBrowser.getBrowserContainer(this.hostTab.linkedBrowser);
     this._sidebar = gBrowser.getSidebarContainer(this.hostTab.linkedBrowser);
 
-    this._splitter = ownerDocument.createElement("splitter");
+    this._splitter = ownerDocument.createXULElement("splitter");
     this._splitter.setAttribute("class", "devtools-side-splitter");
 
-    this.frame = ownerDocument.createElement("iframe");
+    this.frame = ownerDocument.createXULElement("iframe");
     this.frame.flex = 1; // Required to be able to shrink when the window shrinks
     this.frame.className = "devtools-toolbox-side-iframe";
 
     this.frame.width = Math.min(
       Services.prefs.getIntPref(this.widthPref),
       this._sidebar.clientWidth - MIN_PAGE_SIZE
     );
 
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -994,17 +994,17 @@ Toolbox.prototype = {
     for (const item of Startup.KeyShortcuts) {
       // KeyShortcuts contain tool-specific and global key shortcuts,
       // here we only need to copy shortcut specific to each tool.
       if (!item.toolId) {
         continue;
       }
       const { toolId, shortcut, modifiers } = item;
 
-      const key = doc.createElement("key");
+      const key = doc.createXULElement("key");
 
       key.id = "key_" + toolId;
 
       if (shortcut.startsWith("VK_")) {
         key.setAttribute("keycode", shortcut);
       } else {
         key.setAttribute("key", shortcut);
       }
@@ -1015,17 +1015,17 @@ Toolbox.prototype = {
       key.addEventListener("command", () => {
         this.selectTool(toolId, "key_shortcut").then(() => this.fireCustomKey(toolId));
       }, true);
       doc.getElementById("toolbox-keyset").appendChild(key);
     }
 
     // Add key for toggling the browser console from the detached window
     if (!doc.getElementById("key_browserconsole")) {
-      const key = doc.createElement("key");
+      const key = doc.createXULElement("key");
       key.id = "key_browserconsole";
 
       key.setAttribute("key", L10N.getStr("browserConsoleCmd.commandkey"));
       key.setAttribute("modifiers", "accel,shift");
       // needed. See bug 371900
       key.setAttribute("oncommand", "void(0)");
       key.addEventListener("command", () => {
         HUDService.toggleBrowserConsole();
@@ -1435,17 +1435,17 @@ Toolbox.prototype = {
 
     if (toolDefinition.ordinal == undefined || toolDefinition.ordinal < 0) {
       toolDefinition.ordinal = MAX_ORDINAL;
     }
 
     if (!toolDefinition.bgTheme) {
       toolDefinition.bgTheme = "theme-toolbar";
     }
-    const panel = this.doc.createElement("vbox");
+    const panel = this.doc.createXULElement("vbox");
     panel.className = "toolbox-panel " + toolDefinition.bgTheme;
 
     // There is already a container for the webconsole frame.
     if (!this.doc.getElementById("toolbox-panel-" + id)) {
       panel.id = "toolbox-panel-" + id;
     }
 
     deck.appendChild(panel);
@@ -1645,17 +1645,17 @@ Toolbox.prototype = {
       // Retrieve the tool definition (from the global or the per-toolbox tool maps)
       const definition = this.getToolDefinition(id);
 
       if (!definition) {
         reject(new Error("no such tool id " + id));
         return;
       }
 
-      iframe = this.doc.createElement("iframe");
+      iframe = this.doc.createXULElement("iframe");
       iframe.className = "toolbox-panel-iframe";
       iframe.id = "toolbox-panel-iframe-" + id;
       iframe.setAttribute("flex", 1);
       iframe.setAttribute("forceOwnRefreshDriver", "");
       iframe.tooltip = "aHTMLTooltip";
       iframe.style.visibility = "hidden";
 
       gDevTools.emit(id + "-init", this, iframe);
--- a/dom/html/test/browser_bug1081537.js
+++ b/dom/html/test/browser_bug1081537.js
@@ -1,11 +1,11 @@
 // This test is useful because mochitest-browser runs as an addon, so we test
 // addon-scope paths here.
 var ifr;
 function test() {
-  ifr = document.createElement('iframe');
+  ifr = document.createXULElement('iframe');
   document.getElementById('main-window').appendChild(ifr);
   is(ifr.contentDocument.nodePrincipal.origin, "[System Principal]");
   ifr.contentDocument.open();
   ok(true, "Didn't throw");
 }
 registerCleanupFunction(() => ifr.remove());
--- a/security/manager/pki/resources/content/certViewer.js
+++ b/security/manager/pki/resources/content/certViewer.js
@@ -54,17 +54,17 @@ function AddCertChain(node, chain) {
 /**
  * Adds a "verified usage" of a cert to the "General" tab of the cert viewer.
  *
  * @param {String} usage
  *        Verified usage to add.
  */
 function AddUsage(usage) {
   let verifyInfoBox = document.getElementById("verify_info_box");
-  let text = document.createElement("textbox");
+  let text = document.createXULElement("textbox");
   text.setAttribute("value", usage);
   text.setAttribute("style", "margin: 2px 5px");
   text.setAttribute("readonly", "true");
   text.setAttribute("class", "scrollfield");
   verifyInfoBox.appendChild(text);
 }
 
 function setWindowName() {
@@ -172,31 +172,31 @@ function displayUsages(results) {
   }
   // Notify that we are done determining the certificate's valid usages (this
   // should be treated as an implementation detail that enables tests to run
   // efficiently - other code in the browser probably shouldn't rely on this).
   Services.obs.notifyObservers(window, "ViewCertDetails:CertUsagesDone");
 }
 
 function addChildrenToTree(parentTree, label, value, addTwistie) {
-  let treeChild1 = document.createElement("treechildren");
+  let treeChild1 = document.createXULElement("treechildren");
   let treeElement = addTreeItemToTreeChild(treeChild1, label, value,
                                            addTwistie);
   parentTree.appendChild(treeChild1);
   return treeElement;
 }
 
 function addTreeItemToTreeChild(treeChild, label, value, addTwistie) {
-  let treeElem1 = document.createElement("treeitem");
+  let treeElem1 = document.createXULElement("treeitem");
   if (addTwistie) {
     treeElem1.setAttribute("container", "true");
     treeElem1.setAttribute("open", "true");
   }
-  let treeRow = document.createElement("treerow");
-  let treeCell = document.createElement("treecell");
+  let treeRow = document.createXULElement("treerow");
+  let treeCell = document.createXULElement("treecell");
   treeCell.setAttribute("label", label);
   if (value) {
     treeCell.setAttribute("display", value);
   }
   treeRow.appendChild(treeCell);
   treeElem1.appendChild(treeRow);
   treeChild.appendChild(treeElem1);
   return treeElem1;
--- a/security/manager/pki/resources/content/clientauthask.js
+++ b/security/manager/pki/resources/content/clientauthask.js
@@ -76,17 +76,17 @@ function onLoad() {
                               [hostname, port.toString()]);
   setText("hostname", formattedHostnameAndPort);
   setText("organization", formattedOrg);
   setText("issuer", formattedIssuerOrg);
 
   let selectElement = document.getElementById("nicknames");
   certArray = window.arguments[4].QueryInterface(Ci.nsIArray);
   for (let i = 0; i < certArray.length; i++) {
-    let menuItemNode = document.createElement("menuitem");
+    let menuItemNode = document.createXULElement("menuitem");
     let cert = certArray.queryElementAt(i, Ci.nsIX509Cert);
     let nickAndSerial =
       bundle.getFormattedString("clientAuthNickAndSerial",
                                 [cert.displayName, cert.serialNumber]);
     menuItemNode.setAttribute("value", i);
     menuItemNode.setAttribute("label", nickAndSerial); // This is displayed.
     selectElement.firstChild.appendChild(menuItemNode);
     if (i == 0) {
--- a/security/manager/pki/resources/content/deletecert.js
+++ b/security/manager/pki/resources/content/deletecert.js
@@ -89,18 +89,18 @@ function onLoad() {
 
   document.title = title;
 
   setText("confirm", confirm);
 
   let box = document.getElementById("certlist");
   let certTreeItems = window.arguments[1];
   for (let certTreeItem of certTreeItems) {
-    let listItem = document.createElement("richlistitem");
-    let label = document.createElement("label");
+    let listItem = document.createXULElement("richlistitem");
+    let label = document.createXULElement("label");
     label.setAttribute("value", certTreeItemToString(certTreeItem));
     listItem.appendChild(label);
     box.appendChild(listItem);
   }
 
   setText("impact", impact);
 }
 
--- a/security/manager/pki/resources/content/device_manager.js
+++ b/security/manager/pki/resources/content/device_manager.js
@@ -67,27 +67,27 @@ function SetFIPSButton() {
   }
 }
 
 /* Add a module to the tree.  slots is the array of slots in the module,
  * to be represented as children.
  */
 function AddModule(module, slots) {
   var tree = document.getElementById("device_list");
-  var item  = document.createElement("treeitem");
-  var row  = document.createElement("treerow");
-  var cell = document.createElement("treecell");
+  var item  = document.createXULElement("treeitem");
+  var row  = document.createXULElement("treerow");
+  var cell = document.createXULElement("treecell");
   cell.setAttribute("label", module.name);
   row.appendChild(cell);
   item.appendChild(row);
-  var parent = document.createElement("treechildren");
+  var parent = document.createXULElement("treechildren");
   for (let slot of slots) {
-    var child_item = document.createElement("treeitem");
-    var child_row = document.createElement("treerow");
-    var child_cell = document.createElement("treecell");
+    var child_item = document.createXULElement("treeitem");
+    var child_row = document.createXULElement("treerow");
+    var child_cell = document.createXULElement("treecell");
     child_cell.setAttribute("label", slot.name);
     child_row.appendChild(child_cell);
     child_item.appendChild(child_row);
     child_item.setAttribute("pk11kind", "slot");
     // 'slot' is an attribute on any HTML element, hence 'slotObject' instead.
     child_item.slotObject = slot;
     parent.appendChild(child_item);
   }
@@ -252,23 +252,23 @@ function showModuleInfo() {
              selected_module.name, "module_name");
   AddInfoRow(bundle.getString("devinfo_modpath"),
              selected_module.libName, "module_path");
 }
 
 // add a row to the info list, as [col1 col2] (ex.: ["status" "logged in"])
 function AddInfoRow(col1, col2, cell_id) {
   var tree = document.getElementById("info_list");
-  var item  = document.createElement("treeitem");
-  var row  = document.createElement("treerow");
-  var cell1 = document.createElement("treecell");
+  var item  = document.createXULElement("treeitem");
+  var row  = document.createXULElement("treerow");
+  var cell1 = document.createXULElement("treecell");
   cell1.setAttribute("label", col1);
   cell1.setAttribute("crop", "never");
   row.appendChild(cell1);
-  var cell2 = document.createElement("treecell");
+  var cell2 = document.createXULElement("treecell");
   cell2.setAttribute("label", col2);
   cell2.setAttribute("crop", "never");
   cell2.setAttribute("id", cell_id);
   row.appendChild(cell2);
   item.appendChild(row);
   tree.appendChild(item);
 }
 
--- a/toolkit/components/apppicker/content/appPicker.js
+++ b/toolkit/components/apppicker/content/appPicker.js
@@ -72,25 +72,25 @@ AppPicker.prototype =
           var file = fileList.queryElementAt(idx, nsILocalHandlerApp);
           try {
               if (!file.executable || !file.executable.isFile())
                 continue;
           } catch (err) {
             continue;
           }
 
-          var item = document.createElement("richlistitem");
+          var item = document.createXULElement("richlistitem");
           item.handlerApp = file;
           list.appendChild(item);
 
-          var image = document.createElement("image");
+          var image = document.createXULElement("image");
           image.setAttribute("src", this.getFileIconURL(file.executable));
           item.appendChild(image);
 
-          var label = document.createElement("label");
+          var label = document.createXULElement("label");
           label.setAttribute("value", this.getFileDisplayName(file.executable));
           item.appendChild(label);
 
           primaryCount++;
         }
 
         if ( primaryCount == 0 ) {
           // display a message saying nothing is configured
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
@@ -234,17 +234,17 @@ add_task(async function test_popup_url()
   Assert.equal(root.getAttribute("lwt-popup-brighttext"),
                "",
                "brighttext should not be set!");
   Assert.equal(root.getAttribute("lwt-popup-darktext"),
                "",
                "darktext should not be set!");
 
   // Calculate what GrayText should be. May differ between platforms.
-  let span = document.createElement("span");
+  let span = document.createXULElement("span");
   span.style.color = "GrayText";
   let GRAY_TEXT = window.getComputedStyle(span).color;
 
   separator = document.getAnonymousElementByAttribute(results[1], "anonid", "separator");
   Assert.equal(window.getComputedStyle(separator).color,
                GRAY_TEXT,
                `Urlbar popup separator color should be set to ${GRAY_TEXT}`);
 });
--- a/toolkit/components/normandy/lib/Heartbeat.jsm
+++ b/toolkit/components/normandy/lib/Heartbeat.jsm
@@ -168,22 +168,22 @@ var Heartbeat = class {
     );
 
     // Holds the rating UI
     const frag = this.chromeWindow.document.createDocumentFragment();
 
     // Build the heartbeat stars
     if (!this.options.engagementButtonLabel) {
       const numStars = this.options.engagementButtonLabel ? 0 : 5;
-      const ratingContainer = this.chromeWindow.document.createElement("hbox");
+      const ratingContainer = this.chromeWindow.document.createXULElement("hbox");
       ratingContainer.id = "star-rating-container";
 
       for (let i = 0; i < numStars; i++) {
         // create a star rating element
-        const ratingElement = this.chromeWindow.document.createElement("toolbarbutton");
+        const ratingElement = this.chromeWindow.document.createXULElement("toolbarbutton");
 
         // style it
         const starIndex = numStars - i;
         ratingElement.className = "plain star-x";
         ratingElement.id = "star" + starIndex;
         ratingElement.setAttribute("data-score", starIndex);
 
         // Add the click handler
@@ -204,28 +204,28 @@ var Heartbeat = class {
 
     this.messageImage = this.chromeWindow.document.getAnonymousElementByAttribute(this.notice, "anonid", "messageImage");
     this.messageImage.classList.add("heartbeat", "pulse-onshow");
 
     this.messageText = this.chromeWindow.document.getAnonymousElementByAttribute(this.notice, "anonid", "messageText");
     this.messageText.classList.add("heartbeat");
 
     // Make sure the stars are not pushed to the right by the spacer.
-    const rightSpacer = this.chromeWindow.document.createElement("spacer");
+    const rightSpacer = this.chromeWindow.document.createXULElement("spacer");
     rightSpacer.flex = 20;
     frag.appendChild(rightSpacer);
 
     // collapse the space before the stars
     this.messageText.flex = 0;
     const leftSpacer = this.messageText.nextSibling;
     leftSpacer.flex = 0;
 
     // Add Learn More Link
     if (this.options.learnMoreMessage && this.options.learnMoreUrl) {
-      const learnMore = this.chromeWindow.document.createElement("label");
+      const learnMore = this.chromeWindow.document.createXULElement("label");
       learnMore.className = "text-link";
       learnMore.href = this.options.learnMoreUrl.toString();
       learnMore.setAttribute("value", this.options.learnMoreMessage);
       learnMore.addEventListener("click", () => this.maybeNotifyHeartbeat("LearnMore"));
       frag.appendChild(learnMore);
     }
 
     // Append the fragment and apply the styling
--- a/toolkit/components/passwordmgr/LoginManagerContextMenu.jsm
+++ b/toolkit/components/passwordmgr/LoginManagerContextMenu.jsm
@@ -36,17 +36,17 @@ var LoginManagerContextMenu = {
 
     if (!foundLogins.length) {
       return null;
     }
 
     let fragment = browser.ownerDocument.createDocumentFragment();
     let duplicateUsernames = this._findDuplicates(foundLogins);
     for (let login of foundLogins) {
-        let item = fragment.ownerDocument.createElement("menuitem");
+        let item = fragment.ownerDocument.createXULElement("menuitem");
 
         let username = login.username;
         // If login is empty or duplicated we want to append a modification date to it.
         if (!username || duplicateUsernames.has(username)) {
           if (!username) {
             username = this._getLocalizedString("noUsername");
           }
           let meta = login.QueryInterface(Ci.nsILoginMetaInfo);
--- a/toolkit/components/passwordmgr/test/unit/test_context_menu.js
+++ b/toolkit/components/passwordmgr/test/unit/test_context_menu.js
@@ -68,16 +68,17 @@ function createLoginsFragment(url, conte
   const CHROME_URL = "chrome://mock-chrome";
 
   // Create a mock document.
   let document = MockDocument.createTestDocument(CHROME_URL, content);
   let inputElement = document.querySelector(elementQuery);
   MockDocument.mockOwnerDocumentProperty(inputElement, document, url);
 
   // We also need a simple mock Browser object for this test.
+  document.createXULElement = document.createElement.bind(document);
   let browser = {
     ownerDocument: document
   };
 
   let URI = Services.io.newURI(url);
   return {
     document,
     fragment: LoginManagerContextMenu.addLoginsToMenu(inputElement, browser, URI),
--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -66,17 +66,17 @@
           }
 
           let popup = null;
           let popupId = this.getAttribute("autocompletepopup");
           if (popupId) {
             popup = document.getElementById(popupId);
           }
           if (!popup) {
-            popup = document.createElement("panel");
+            popup = document.createXULElement("panel");
             popup.setAttribute("type", "autocomplete-richlistbox");
             popup.setAttribute("noautofocus", "true");
 
             let popupset = document.getAnonymousElementByAttribute(this, "anonid", "popupset");
             popupset.appendChild(popup);
           }
           popup.mInput = this;
 
--- a/toolkit/content/widgets/datetimepopup.xml
+++ b/toolkit/content/widgets/datetimepopup.xml
@@ -14,17 +14,17 @@
     <resources>
       <stylesheet src="chrome://global/skin/datetimepopup.css"/>
     </resources>
     <implementation>
       <property name="dateTimePopupFrame">
         <getter>
           let frame = this.querySelector("#dateTimePopupFrame");
           if (!frame) {
-            frame = this.ownerDocument.createElement("iframe");
+            frame = this.ownerDocument.createXULElement("iframe");
             frame.id = "dateTimePopupFrame";
             this.appendChild(frame);
           }
           return frame;
         </getter>
       </property>
       <field name="TIME_PICKER_WIDTH" readonly="true">"12em"</field>
       <field name="TIME_PICKER_HEIGHT" readonly="true">"21em"</field>
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1613,17 +1613,17 @@
           }
           return;
         }
 
         tt.index = this.textTracksCount++;
 
         const label = tt.label || "";
         const ttText = document.createTextNode(label);
-        const ttBtn = document.createElement("button");
+        const ttBtn = document.createXULElement("button");
 
         ttBtn.classList.add("textTrackItem");
         ttBtn.setAttribute("index", tt.index);
         ttBtn.appendChild(ttText);
 
         this.textTrackList.appendChild(ttBtn);
 
         if (tt.mode === "showing" && tt.index) {
--- a/toolkit/modules/InlineSpellChecker.jsm
+++ b/toolkit/modules/InlineSpellChecker.jsm
@@ -138,17 +138,17 @@ InlineSpellChecker.prototype = {
     this.mSpellSuggestions = [];
     this.mSuggestionItems = [];
     for (var i = 0; i < maxNumber; i++) {
       var suggestion = spellchecker.GetSuggestedWord();
       if (!suggestion.length)
         break;
       this.mSpellSuggestions.push(suggestion);
 
-      var item = menu.ownerDocument.createElement("menuitem");
+      var item = menu.ownerDocument.createXULElement("menuitem");
       this.mSuggestionItems.push(item);
       item.setAttribute("label", suggestion);
       item.setAttribute("value", suggestion);
       // this function thing is necessary to generate a callback with the
       // correct binding of "val" (the index in this loop).
       var callback = function(me, val) { return function(evt) { me.replaceMisspelling(val); }; };
       item.addEventListener("command", callback(this, i), true);
       item.setAttribute("class", "spell-suggestion");
@@ -208,17 +208,17 @@ InlineSpellChecker.prototype = {
         curlang = spellchecker.GetCurrentDictionary();
       } catch (e) {}
     }
 
     var sortedList = this.sortDictionaryList(list);
 
     for (var i = 0; i < sortedList.length; i++) {
       this.mDictionaryNames.push(sortedList[i].id);
-      var item = menu.ownerDocument.createElement("menuitem");
+      var item = menu.ownerDocument.createXULElement("menuitem");
       item.setAttribute("id", "spell-check-dictionary-" + sortedList[i].id);
       item.setAttribute("label", sortedList[i].label);
       item.setAttribute("type", "radio");
       this.mDictionaryItems.push(item);
       if (curlang == sortedList[i].id) {
         item.setAttribute("checked", "true");
       } else {
         var callback = function(me, val, dictName) {
--- a/toolkit/modules/PageMenu.jsm
+++ b/toolkit/modules/PageMenu.jsm
@@ -100,17 +100,17 @@ PageMenu.prototype = {
     for (let child of children) {
       let menuitem;
       switch (child.type) {
         case "menuitem":
           if (!child.id) {
             continue; // Ignore children without ids
           }
 
-          menuitem = document.createElement("menuitem");
+          menuitem = document.createXULElement("menuitem");
           if (child.checkbox) {
             menuitem.setAttribute("type", "checkbox");
             if (child.checked) {
               menuitem.setAttribute("checked", "true");
             }
           }
 
           if (child.label) {
@@ -122,26 +122,26 @@ PageMenu.prototype = {
           }
           if (child.disabled) {
             menuitem.setAttribute("disabled", true);
           }
 
           break;
 
         case "separator":
-          menuitem = document.createElement("menuseparator");
+          menuitem = document.createXULElement("menuseparator");
           break;
 
         case "menu":
-          menuitem = document.createElement("menu");
+          menuitem = document.createXULElement("menu");
           if (child.label) {
             menuitem.setAttribute("label", child.label);
           }
 
-          let menupopup = document.createElement("menupopup");
+          let menupopup = document.createXULElement("menupopup");
           menuitem.appendChild(menupopup);
 
           this.buildXULMenu(child, menupopup);
           break;
       }
 
       menuitem.setAttribute(this.GENERATEDITEMID_ATTR, child.id ? child.id : 0);
       aElementForAppending.appendChild(menuitem);
--- a/toolkit/modules/SelectParentHelper.jsm
+++ b/toolkit/modules/SelectParentHelper.jsm
@@ -337,17 +337,17 @@ function populateChildren(menulist, opti
     // the popup's text size is matched with the content's. We can't just apply a CSS transform
     // here as the popup's preferred size is calculated pre-transform.
     let textSize = win.getComputedStyle(element).getPropertyValue("font-size");
     adjustedTextSize = (zoom * parseFloat(textSize, 10)) + "px";
   }
 
   for (let option of options) {
     let isOptGroup = (option.tagName == "OPTGROUP");
-    let item = element.ownerDocument.createElement(isOptGroup ? "menucaption" : "menuitem");
+    let item = element.ownerDocument.createXULElement(isOptGroup ? "menucaption" : "menuitem");
 
     item.setAttribute("label", option.textContent);
     item.style.direction = option.textDirection;
     item.style.fontSize = adjustedTextSize;
     item.hidden = option.display == "none" || (parentElement && parentElement.hidden);
     // Keep track of which options are hidden by page content, so we can avoid showing
     // them on search input
     item.hiddenByContent = item.hidden;
@@ -444,17 +444,17 @@ function populateChildren(menulist, opti
   }
 
   // Check if search pref is enabled, if this is the first time iterating through
   // the dropdown, and if the list is long enough for a search element to be added.
   if (Services.prefs.getBoolPref("dom.forms.selectSearch") && addSearch
       && element.childElementCount > SEARCH_MINIMUM_ELEMENTS) {
 
     // Add a search text field as the first element of the dropdown
-    let searchbox = element.ownerDocument.createElement("textbox");
+    let searchbox = element.ownerDocument.createXULElement("textbox");
     searchbox.setAttribute("type", "search");
     searchbox.addEventListener("input", onSearchInput);
     searchbox.addEventListener("focus", onSearchFocus);
     searchbox.addEventListener("blur", onSearchBlur);
     searchbox.addEventListener("command", onSearchInput);
 
     // Handle special keys for exiting search
     searchbox.addEventListener("keydown", function(event) {
--- a/toolkit/mozapps/extensions/content/blocklist.js
+++ b/toolkit/mozapps/extensions/content/blocklist.js
@@ -25,17 +25,17 @@ function init() {
   cancelButton.setAttribute("label", bundle.GetStringFromName("restartLaterButton"));
   cancelButton.setAttribute("accesskey",
                             bundle.GetStringFromName("restartLaterButton.accesskey"));
 
   var richlist = document.getElementById("addonList");
   var list = gArgs.list;
   list.sort((a, b) => String(a.name).localeCompare(b.name));
   for (let listItem of list) {
-    let item = document.createElement("richlistitem");
+    let item = document.createXULElement("richlistitem");
     item.setAttribute("name", listItem.name);
     item.setAttribute("version", listItem.version);
     item.setAttribute("icon", listItem.icon);
     if (listItem.blocked) {
       item.setAttribute("class", "hardBlockedAddon");
       hasHardBlocks = true;
     } else {
       item.setAttribute("class", "softBlockedAddon");
--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/toolkit/mozapps/extensions/content/extensions.js
@@ -1441,17 +1441,17 @@ function shouldShowVersionNumber(aAddon)
   // The version number is hidden for lightweight themes.
   if (aAddon.type == "theme")
     return !/@personas\.mozilla\.org$/.test(aAddon.id);
 
   return true;
 }
 
 function createItem(aObj, aIsInstall) {
-  let item = document.createElement("richlistitem");
+  let item = document.createXULElement("richlistitem");
 
   item.setAttribute("class", "addon addon-view");
   item.setAttribute("name", aObj.name);
   item.setAttribute("type", aObj.type);
 
   if (aIsInstall) {
     item.mInstall = aObj;
 
@@ -1699,17 +1699,17 @@ var gCategories = {
     AddonManager.removeTypeListener(this);
   },
 
   _insertCategory(aId, aName, aView, aPriority, aStartHidden) {
     // If this category already exists then don't re-add it
     if (document.getElementById("category-" + aId))
       return;
 
-    var category = document.createElement("richlistitem");
+    var category = document.createXULElement("richlistitem");
     category.setAttribute("id", "category-" + aId);
     category.setAttribute("value", aView);
     category.setAttribute("class", "category");
     category.setAttribute("name", aName);
     category.setAttribute("tooltiptext", aName);
     category.setAttribute("priority", aPriority);
     category.setAttribute("hidden", aStartHidden);
 
@@ -3014,20 +3014,20 @@ var gDetailView = {
 
     let stack = document.getElementById(containerId);
 
     if (stack) {
       // Remove the existent options container (if any).
       stack.remove();
     }
 
-    stack = document.createElement("stack");
+    stack = document.createXULElement("stack");
     stack.setAttribute("id", containerId);
 
-    let browser = document.createElement("browser");
+    let browser = document.createXULElement("browser");
     browser.setAttribute("type", "content");
     browser.setAttribute("disableglobalhistory", "true");
     browser.setAttribute("id", "addon-options");
     browser.setAttribute("class", "inline-options-browser");
     browser.setAttribute("transparent", "true");
     browser.setAttribute("forcemessagemanager", "true");
     browser.setAttribute("selectmenulist", "ContentSelectDropdown");
     browser.setAttribute("autocompletepopup", "PopupAutoComplete");
--- a/toolkit/mozapps/preferences/fontbuilder.js
+++ b/toolkit/mozapps/preferences/fontbuilder.js
@@ -33,56 +33,56 @@ var FontBuilder = {
       if (fonts.length > 0)
         defaultFont = this.enumerator.getDefaultFont(aLanguage, "");
     }
 
     if (!this._allFonts)
       this._allFonts = await this.enumerator.EnumerateAllFontsAsync({});
 
     // Build the UI for the Default Font and Fonts for this CSS type.
-    const popup = document.createElement("menupopup");
+    const popup = document.createXULElement("menupopup");
     let separator;
     if (fonts.length > 0) {
-      let menuitem = document.createElement("menuitem");
+      let menuitem = document.createXULElement("menuitem");
       if (defaultFont) {
         document.l10n.setAttributes(menuitem, "fonts-label-default", {
           name: defaultFont
         });
       } else {
         document.l10n.setAttributes(menuitem, "fonts-label-default-unnamed");
       }
       menuitem.setAttribute("value", ""); // Default Font has a blank value
       popup.appendChild(menuitem);
 
-      separator = document.createElement("menuseparator");
+      separator = document.createXULElement("menuseparator");
       popup.appendChild(separator);
 
       for (let font of fonts) {
-        menuitem = document.createElement("menuitem");
+        menuitem = document.createXULElement("menuitem");
         menuitem.setAttribute("value", font);
         menuitem.setAttribute("label", font);
         popup.appendChild(menuitem);
       }
     }
 
     // Build the UI for the remaining fonts.
     if (this._allFonts.length > fonts.length) {
       this._langGroupSupported = true;
       // Both lists are sorted, and the Fonts-By-Type list is a subset of the
       // All-Fonts list, so walk both lists side-by-side, skipping values we've
       // already created menu items for.
       let builtItem = separator ? separator.nextSibling : popup.firstChild;
       let builtItemValue = builtItem ? builtItem.getAttribute("value") : null;
 
-      separator = document.createElement("menuseparator");
+      separator = document.createXULElement("menuseparator");
       popup.appendChild(separator);
 
       for (let font of this._allFonts) {
         if (font != builtItemValue) {
-          const menuitem = document.createElement("menuitem");
+          const menuitem = document.createXULElement("menuitem");
           menuitem.setAttribute("value", font);
           menuitem.setAttribute("label", font);
           popup.appendChild(menuitem);
         } else {
           builtItem = builtItem.nextSibling;
           builtItemValue = builtItem ? builtItem.getAttribute("value") : null;
         }
       }