From 986a8ae47f45bb12b673a4f9e3c1cdb30a457771 Mon Sep 17 00:00:00 2001
From: Chris Manchester <cmanchester@mozilla.com>
Date: Fri, 24 Aug 2018 18:13:20 +0000
Subject: [PATCH 01/14] Bug 1485174 - Prevent using an objdir to build with tup
 that was previously used to build with make.
 r=firefox-build-system-reviewers,froydnj

Differential Revision: https://phabricator.services.mozilla.com/D4154

--HG--
extra : moz-landing-system : lando
---
 python/mozbuild/mozbuild/controller/building.py | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/python/mozbuild/mozbuild/controller/building.py b/python/mozbuild/mozbuild/controller/building.py
index b192546980d4..3b98f56f0a41 100644
--- a/python/mozbuild/mozbuild/controller/building.py
+++ b/python/mozbuild/mozbuild/controller/building.py
@@ -6,6 +6,7 @@ from __future__ import absolute_import, unicode_literals
 
 import errno
 import getpass
+import glob
 import io
 import json
 import logging
@@ -1047,6 +1048,16 @@ class BuildDriver(MozbuildObject):
             status = None
             active_backend = config.substs.get('BUILD_BACKENDS', [None])[0]
             if active_backend and 'Make' not in active_backend:
+                for backend_file in glob.iglob(mozpath.join(self.topobjdir,
+                                                            'backend.*Backend')):
+                    if 'Make' in backend_file:
+                        self.log(logging.ERROR, 'backend',
+                                 {'objdir': self.topobjdir},
+                                 "The active objdir, {objdir}, was previously "
+                                 "used to build with a Make-based backend. "
+                                 "Change objdirs (by setting MOZ_OBJDIR in "
+                                 "your mozconfig) to continue.\n")
+                        return 1
                 # Record whether a clobber was requested so we can print
                 # a special message later if the build fails.
                 clobber_requested = False

From 0309960145cee86086dc6b769029d20edfc66682 Mon Sep 17 00:00:00 2001
From: Johann Hofmann <jhofmann@mozilla.com>
Date: Fri, 24 Aug 2018 19:46:07 +0000
Subject: [PATCH 02/14] Bug 1485743 - Don't show the Content Blocking tour in
 private windows. r=francois

Differential Revision: https://phabricator.services.mozilla.com/D4197

--HG--
extra : moz-landing-system : lando
---
 .../base/content/browser-contentblocking.js    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/browser/base/content/browser-contentblocking.js b/browser/base/content/browser-contentblocking.js
index 69b74c3b309d..fc4ae965d06c 100644
--- a/browser/base/content/browser-contentblocking.js
+++ b/browser/base/content/browser-contentblocking.js
@@ -445,10 +445,10 @@ var ContentBlocking = {
       blocker.categoryItem.hidden = !blocker.visible;
     }
 
+    let isBrowserPrivate = PrivateBrowsingUtils.isBrowserPrivate(gBrowser.selectedBrowser);
+
     // Check whether the user has added an exception for this site.
-    let type = PrivateBrowsingUtils.isBrowserPrivate(gBrowser.selectedBrowser) ?
-                 "trackingprotection-pb" :
-                 "trackingprotection";
+    let type =  isBrowserPrivate ? "trackingprotection-pb" : "trackingprotection";
     let hasException = Services.perms.testExactPermission(baseURI, type) ==
       Services.perms.ALLOW_ACTION;
 
@@ -463,11 +463,13 @@ var ContentBlocking = {
     } else if (active && webProgress.isTopLevel) {
       this.iconBox.setAttribute("animate", "true");
 
-      let introCount = Services.prefs.getIntPref(this.prefIntroCount);
-      if (introCount < this.MAX_INTROS) {
-        Services.prefs.setIntPref(this.prefIntroCount, ++introCount);
-        Services.prefs.savePrefFile(null);
-        this.showIntroPanel();
+      if (!isBrowserPrivate) {
+        let introCount = Services.prefs.getIntPref(this.prefIntroCount);
+        if (introCount < this.MAX_INTROS) {
+          Services.prefs.setIntPref(this.prefIntroCount, ++introCount);
+          Services.prefs.savePrefFile(null);
+          this.showIntroPanel();
+        }
       }
     }
 

From 2188a68716214b1489658af08f3a57bb8b531208 Mon Sep 17 00:00:00 2001
From: Brian Grinstead <bgrinstead@mozilla.com>
Date: Fri, 24 Aug 2018 19:43:39 +0000
Subject: [PATCH 03/14] Bug 1482448 - Part 1 - Move window listeners for
 browser.xul into one place;r=Gijs

This is an extension of the work in Bug 1473160 to make clear in what environments
various gBrowserInit functions are run. Since we currently use these in an `if` block
in browser.js for "navigator:browser" window types, and browser.xul is the only
navigator:browser window that loads browser.js, this moves the event listeners directly
into browser.xul so it's extra clear that they don't run in non-browser top level windows on OSX.

Also move a few on-event handlers from the <window> tag into this block so they
all happen in one place.

Differential Revision: https://phabricator.services.mozilla.com/D4137

--HG--
extra : moz-landing-system : lando
---
 browser/base/content/browser.js  | 13 -------------
 browser/base/content/browser.xul | 13 ++++++++++++-
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 5a5b0f8466d8..d160780d4cd5 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1141,19 +1141,6 @@ function RedirectLoad({ target: browser, data }) {
   }
 }
 
-if (document.documentElement.getAttribute("windowtype") == "navigator:browser") {
-  window.addEventListener("MozBeforeInitialXULLayout", () => {
-    gBrowserInit.onBeforeInitialXULLayout();
-  }, { once: true });
-  // The listener of DOMContentLoaded must be set on window, rather than
-  // document, because the window can go away before the event is fired.
-  // In that case, we don't want to initialize anything, otherwise we
-  // may be leaking things because they will never be destroyed after.
-  window.addEventListener("DOMContentLoaded", () => {
-    gBrowserInit.onDOMContentLoaded();
-  }, { once: true });
-}
-
 let _resolveDelayedStartup;
 var delayedStartupPromise = new Promise(resolve => {
   _resolveDelayedStartup = resolve;
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index 42ff6aa91384..c4ff982a3f00 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -37,7 +37,6 @@
         xmlns:html="http://www.w3.org/1999/xhtml"
         xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        onload="gBrowserInit.onLoad()" onunload="gBrowserInit.onUnload()" onclose="return WindowIsClosing();"
         title="&mainWindow.title;"
         title_normal="&mainWindow.title;"
 #ifdef XP_MACOSX
@@ -79,6 +78,18 @@ xmlns="http://www.w3.org/1999/xhtml"
 >
   Services.scriptloader.loadSubScript("chrome://global/content/contentAreaUtils.js", this);
   Services.scriptloader.loadSubScript("chrome://browser/content/tabbrowser.js", this);
+
+  window.onload = gBrowserInit.onLoad.bind(gBrowserInit);
+  window.onunload = gBrowserInit.onUnload.bind(gBrowserInit);
+  window.onclose = WindowIsClosing;
+  window.addEventListener("MozBeforeInitialXULLayout",
+    gBrowserInit.onBeforeInitialXULLayout.bind(gBrowserInit), { once: true });
+  // The listener of DOMContentLoaded must be set on window, rather than
+  // document, because the window can go away before the event is fired.
+  // In that case, we don't want to initialize anything, otherwise we
+  // may be leaking things because they will never be destroyed after.
+  window.addEventListener("DOMContentLoaded",
+    gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true });
 </script>
 
 # All sets except for popupsets (commands, keys, and stringbundles)

From 45a1491c027b71d0690a4ff23def54990bf333c9 Mon Sep 17 00:00:00 2001
From: Brian Grinstead <bgrinstead@mozilla.com>
Date: Fri, 24 Aug 2018 19:43:42 +0000
Subject: [PATCH 04/14] Bug 1482448 - Part 2 - Run
 gBrowserInit.onBeforeInitialXULLayout in browser.xhtml;r=Gijs

MozBeforeInitialXULLayout doesn't fire in HTML docs. Even if we change it to
start firing for all top-level docs, it ends up firing _before_ the inline script
runs inside of browser.xul. For now, run that logic in DOMContentLoaded to
at least get a more functional browser window.

Differential Revision: https://phabricator.services.mozilla.com/D4138

--HG--
extra : moz-landing-system : lando
---
 browser/base/content/browser.xul | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index c4ff982a3f00..b731217a7ac0 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -82,8 +82,13 @@ xmlns="http://www.w3.org/1999/xhtml"
   window.onload = gBrowserInit.onLoad.bind(gBrowserInit);
   window.onunload = gBrowserInit.onUnload.bind(gBrowserInit);
   window.onclose = WindowIsClosing;
+#ifdef BROWSER_XHTML
+  window.addEventListener("DOMContentLoaded",
+    gBrowserInit.onBeforeInitialXULLayout.bind(gBrowserInit), { once: true });
+#else
   window.addEventListener("MozBeforeInitialXULLayout",
     gBrowserInit.onBeforeInitialXULLayout.bind(gBrowserInit), { once: true });
+#endif
   // The listener of DOMContentLoaded must be set on window, rather than
   // document, because the window can go away before the event is fired.
   // In that case, we don't want to initialize anything, otherwise we

From c9437b2c8e650a4cf52f4d56a633085c98969adc Mon Sep 17 00:00:00 2001
From: James Willcox <snorp@snorp.net>
Date: Fri, 24 Aug 2018 15:30:30 +0000
Subject: [PATCH 05/14] Bug 1485980 - Downgrade test runner packages to match
 support library r=jchen

Differential Revision: https://phabricator.services.mozilla.com/D4221

--HG--
extra : moz-landing-system : lando
---
 mobile/android/geckoview/build.gradle | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/mobile/android/geckoview/build.gradle b/mobile/android/geckoview/build.gradle
index 08965e054299..fd4fb2f05af2 100644
--- a/mobile/android/geckoview/build.gradle
+++ b/mobile/android/geckoview/build.gradle
@@ -200,9 +200,9 @@ dependencies {
     testImplementation 'org.mockito:mockito-core:1.10.19'
 
     androidTestImplementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-    androidTestImplementation 'com.android.support.test:runner:1.0.2'
-    androidTestImplementation 'com.android.support.test:rules:1.0.2'
-    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
+    androidTestImplementation 'com.android.support.test:runner:1.0.1'
+    androidTestImplementation 'com.android.support.test:rules:1.0.1'
+    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
     androidTestImplementation "com.android.support:support-annotations:$support_library_version"
 }
 

From 987c1af77fab10f15bf5cc1d3c3c96b8c15c1ce6 Mon Sep 17 00:00:00 2001
From: Ting-Yu Lin <tlin@mozilla.com>
Date: Fri, 24 Aug 2018 19:05:18 +0000
Subject: [PATCH 06/14] Bug 1486074 - Move logic for copying aliased
 properties' fields to the bottom of property_database.js. r=emilio

Differential Revision: https://phabricator.services.mozilla.com/D4247

--HG--
extra : moz-landing-system : lando
---
 layout/style/test/property_database.js | 59 ++++++++++++++------------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
index e38f81cf8e9a..eba7883cc5ca 100644
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -7949,34 +7949,6 @@ if (IsCSSPropertyPrefEnabled("layout.css.text-align-unsafe-value.enabled")) {
 
 gCSSProperties["display"].other_values.push("flow-root");
 
-// Copy aliased properties' fields from their alias targets.
-for (var prop in gCSSProperties) {
-  var entry = gCSSProperties[prop];
-  if (entry.alias_for) {
-    var aliasTargetEntry = gCSSProperties[entry.alias_for];
-    if (!aliasTargetEntry) {
-      ok(false,
-         "Alias '" + prop + "' alias_for field, '" + entry.alias_for + "', " +
-         "must be set to a recognized CSS property in gCSSProperties");
-    } else {
-      // Copy 'values' fields & 'prerequisites' field from aliasTargetEntry:
-      var fieldsToCopy =
-          ["initial_values", "other_values", "invalid_values",
-           "quirks_values", "unbalanced_values",
-           "prerequisites"];
-
-      fieldsToCopy.forEach(function(fieldName) {
-        // (Don't copy the field if the alias already has something there,
-        // or if the aliased property doesn't have anything to copy.)
-        if (!(fieldName in entry) &&
-            fieldName in aliasTargetEntry) {
-          entry[fieldName] = aliasTargetEntry[fieldName]
-        }
-      });
-    }
-  }
-}
-
 if (IsCSSPropertyPrefEnabled("layout.css.column-span.enabled")) {
   gCSSProperties["column-span"] = {
     domProp: "columnSpan",
@@ -8205,3 +8177,34 @@ if (IsCSSPropertyPrefEnabled("layout.css.overflow.moz-scrollbars.enabled")) {
 } else {
   gCSSProperties["overflow"].invalid_values.push(...OVERFLOW_MOZKWS);
 }
+
+// Copy aliased properties' fields from their alias targets. Keep this logic
+// at the bottom of this file to ensure all the aliased properties are
+// processed.
+for (var prop in gCSSProperties) {
+  var entry = gCSSProperties[prop];
+  if (entry.alias_for) {
+    var aliasTargetEntry = gCSSProperties[entry.alias_for];
+    if (!aliasTargetEntry) {
+      ok(false,
+         "Alias '" + prop + "' alias_for field, '" + entry.alias_for + "', " +
+         "must be set to a recognized CSS property in gCSSProperties");
+    } else {
+      // Copy 'values' fields & 'prerequisites' field from aliasTargetEntry:
+      var fieldsToCopy =
+          ["initial_values", "other_values", "invalid_values",
+           "quirks_values", "unbalanced_values",
+           "prerequisites"];
+
+      fieldsToCopy.forEach(function(fieldName) {
+        // (Don't copy the field if the alias already has something there,
+        // or if the aliased property doesn't have anything to copy.)
+        if (!(fieldName in entry) &&
+            fieldName in aliasTargetEntry) {
+          entry[fieldName] = aliasTargetEntry[fieldName]
+        }
+      });
+    }
+  }
+}
+

From 4e4875fdd6df594ebdb8e72af2b7f2ce66e6c1bc Mon Sep 17 00:00:00 2001
From: anthony <anthony@getpocket.com>
Date: Fri, 24 Aug 2018 21:48:24 +0000
Subject: [PATCH 07/14] Bug 1486119 - Pocket: Replace getSystemPrincipal
 opening new tab with createNullPrincipal r=jkt

Opening a new tab with a hardcoded link with the system utility openWebLinkI
was erroring when passing in getSystemPrincipal. Updating code to pass in a
createNullPrincipal.

Differential Revision: https://phabricator.services.mozilla.com/D4262

--HG--
extra : moz-landing-system : lando
---
 browser/extensions/pocket/content/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/extensions/pocket/content/main.js b/browser/extensions/pocket/content/main.js
index 040c823066e7..d780f66c6d8a 100644
--- a/browser/extensions/pocket/content/main.js
+++ b/browser/extensions/pocket/content/main.js
@@ -150,7 +150,7 @@ var pktUI = (function() {
         if (pktApi.getSignupPanelTabTestVariant() == "v2") {
             let site = Services.prefs.getCharPref("extensions.pocket.site");
             openTabWithUrl("https://" + site + "/firefox_learnmore?s=ffi&t=autoredirect&tv=page_learnmore&src=ff_ext",
-                           Services.scriptSecurityManager.getSystemPrincipal());
+                           Services.scriptSecurityManager.createNullPrincipal({}));
 
             // force the panel closed before it opens
             getPanel().hidePopup();

From 9daee9a3a5fee15f13ae418cba2cd10e8840dff1 Mon Sep 17 00:00:00 2001
From: Xidorn Quan <me@upsuper.org>
Date: Fri, 24 Aug 2018 07:40:07 +0000
Subject: [PATCH 08/14] Bug 1464723 - Implement custom scrollbar support for
 GTK widget. r=karlt,dholbert

When any scrollbar color is specified, or scrollbar-width is thin, we
switch to use the fallback rendering.

The change to xulscrollbars.css is for ensuring that the scrollbar is
displayed for scrollbar-width: thin when there is no scrollbar color
specified. It wouldn't affect cases where -moz-appearance takes effect.

This also changes the fallback width of the scrollbars. Since the two
widths was picked rather randomly, I think it should be fine to change
it if a value looks better than the old one, especially on Linux which
is the main usecase for this fallback rendering.

Differential Revision: https://phabricator.services.mozilla.com/D3952

--HG--
extra : moz-landing-system : lando
---
 layout/xul/nsBox.cpp                            | 4 ++--
 toolkit/themes/windows/global/xulscrollbars.css | 5 +++++
 widget/gtk/nsNativeThemeGTK.cpp                 | 9 +++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/layout/xul/nsBox.cpp b/layout/xul/nsBox.cpp
index c2abe2ab6176..15d1b07c4cf8 100644
--- a/layout/xul/nsBox.cpp
+++ b/layout/xul/nsBox.cpp
@@ -532,9 +532,9 @@ GetScrollbarWidthNoTheme(nsIFrame* aBox)
     switch (scrollbarStyle->StyleUIReset()->mScrollbarWidth) {
       default:
       case StyleScrollbarWidth::Auto:
-        return 16 * AppUnitsPerCSSPixel();
+        return 12 * AppUnitsPerCSSPixel();
       case StyleScrollbarWidth::Thin:
-        return 8 * AppUnitsPerCSSPixel();
+        return 6 * AppUnitsPerCSSPixel();
       case StyleScrollbarWidth::None:
         return 0;
     }
diff --git a/toolkit/themes/windows/global/xulscrollbars.css b/toolkit/themes/windows/global/xulscrollbars.css
index 318fadc9c8ed..dad8234be280 100644
--- a/toolkit/themes/windows/global/xulscrollbars.css
+++ b/toolkit/themes/windows/global/xulscrollbars.css
@@ -14,6 +14,7 @@
 scrollbar {
   -moz-appearance: scrollbar-horizontal;
   cursor: default;
+  background-color: #f0f0f0;
 }
 
 @media all and (-moz-overlay-scrollbars) {
@@ -43,6 +44,10 @@ slider[orient="vertical"] {
 
 /* ::::: thumb (horizontal) ::::: */
 
+thumb {
+  background-color: #cdcdcd;
+}
+
 thumb[orient="vertical"] {
   -moz-appearance: scrollbarthumb-vertical;
   min-height: 8px;
diff --git a/widget/gtk/nsNativeThemeGTK.cpp b/widget/gtk/nsNativeThemeGTK.cpp
index 9d304db4b3b7..e0ce4f2b6fa8 100644
--- a/widget/gtk/nsNativeThemeGTK.cpp
+++ b/widget/gtk/nsNativeThemeGTK.cpp
@@ -1866,6 +1866,15 @@ nsNativeThemeGTK::ThemeSupportsWidget(nsPresContext* aPresContext,
   if (IsWidgetTypeDisabled(mDisabledWidgetTypes, aWidgetType))
     return false;
 
+  if (IsWidgetScrollbarPart(aWidgetType)) {
+    ComputedStyle* cs = nsLayoutUtils::StyleForScrollbar(aFrame);
+    if (cs->StyleUI()->HasCustomScrollbars() ||
+        // We cannot handle thin scrollbar on GTK+ widget directly as well.
+        cs->StyleUIReset()->mScrollbarWidth == StyleScrollbarWidth::Thin) {
+      return false;
+    }
+  }
+
   if (aWidgetType == StyleAppearance::MenulistButton &&
       StaticPrefs::layout_css_webkit_appearance_enabled()) {
     aWidgetType = StyleAppearance::Menulist;

From 487d770cc344ca637329bbab090a58e9ba270231 Mon Sep 17 00:00:00 2001
From: Matthew Noorenberghe <mozilla@noorenberghe.ca>
Date: Fri, 24 Aug 2018 23:21:30 +0000
Subject: [PATCH 09/14] Bug 1485473 - Combine the borders of the name fields on
 the address form. r=sfoster

Differential Revision: https://phabricator.services.mozilla.com/D4031

--HG--
extra : moz-landing-system : lando
---
 .../payments/res/containers/address-form.css  |  6 +-
 .../test/mochitest/test_address_form.html     |  1 +
 .../formautofill/content/editAddress.xhtml    | 26 +++---
 .../formautofill/content/editCreditCard.xhtml | 14 +--
 .../formautofill/skin/shared/editAddress.css  | 66 ++++++++++++++
 .../skin/shared/editDialog-shared.css         | 13 +--
 .../test/browser/browser_editAddressDialog.js | 86 +++++++++++++++++++
 .../themes/shared/in-content/common.inc.css   |  9 ++
 8 files changed, 196 insertions(+), 25 deletions(-)

diff --git a/browser/components/payments/res/containers/address-form.css b/browser/components/payments/res/containers/address-form.css
index 1c537b948525..3d59f94c9b55 100644
--- a/browser/components/payments/res/containers/address-form.css
+++ b/browser/components/payments/res/containers/address-form.css
@@ -26,7 +26,7 @@ body[dir="rtl"] .error-text {
   right: 3px;
 }
 
-:-moz-any(input, textarea, select):focus + .error-text:not(:empty)::before {
+:-moz-any(input, textarea, select):focus ~ .error-text:not(:empty)::before {
   background-color: #d70022;
   top: -7px;
   content: '.';
@@ -47,8 +47,8 @@ body[dir=rtl] .error-text::before {
   right: 12px
 }
 
-:-moz-any(input, textarea, select):not(:focus) + .error-text,
-:-moz-any(input, textarea, select):valid + .error-text {
+:-moz-any(input, textarea, select):not(:focus) ~ .error-text,
+:-moz-any(input, textarea, select):valid ~ .error-text {
   display: none;
 }
 
diff --git a/browser/components/payments/test/mochitest/test_address_form.html b/browser/components/payments/test/mochitest/test_address_form.html
index ea58e3c1f00a..d1f09ca45320 100644
--- a/browser/components/payments/test/mochitest/test_address_form.html
+++ b/browser/components/payments/test/mochitest/test_address_form.html
@@ -297,6 +297,7 @@ add_task(async function test_restricted_address_fields() {
      "tel should be visible");
 
   fillField(form.form.querySelector("#given-name"), "John");
+  fillField(form.form.querySelector("#family-name"), "Smith");
   ok(form.saveButton.disabled, "Save button should be disabled due to empty fields");
   fillField(form.form.querySelector("#email"), "john@example.com");
   todo(form.saveButton.disabled,
diff --git a/browser/extensions/formautofill/content/editAddress.xhtml b/browser/extensions/formautofill/content/editAddress.xhtml
index dbdca2e4e23a..c67bedc5a66d 100644
--- a/browser/extensions/formautofill/content/editAddress.xhtml
+++ b/browser/extensions/formautofill/content/editAddress.xhtml
@@ -18,57 +18,61 @@
 </head>
 <body dir="&locale.dir;">
   <form id="form" class="editAddressForm" autocomplete="off">
+    <!--
+        The <span class="label-text" …/> needs to be after the form field in the same element in
+        order to get proper label styling with :focus and :moz-ui-invalid.
+      -->
     <div>
       <div id="name-container">
         <label id="given-name-container">
-          <span data-localization="givenName" class="label-text"/>
           <input id="given-name" type="text" required="required"/>
+          <span data-localization="givenName" class="label-text"/>
         </label>
         <label id="additional-name-container">
-          <span data-localization="additionalName" class="label-text"/>
           <input id="additional-name" type="text"/>
+          <span data-localization="additionalName" class="label-text"/>
         </label>
         <label id="family-name-container">
+          <input id="family-name" type="text" required="required"/>
           <span data-localization="familyName" class="label-text"/>
-          <input id="family-name" type="text"/>
         </label>
       </div>
       <label id="organization-container">
-        <span data-localization="organization2" class="label-text"/>
         <input id="organization" type="text"/>
+        <span data-localization="organization2" class="label-text"/>
       </label>
       <label id="street-address-container">
-        <span data-localization="streetAddress" class="label-text"/>
         <textarea id="street-address" rows="3" required="required"/>
+        <span data-localization="streetAddress" class="label-text"/>
       </label>
       <label id="address-level2-container">
-        <span data-localization="city" class="label-text"/>
         <input id="address-level2" type="text" required="required"/>
+        <span data-localization="city" class="label-text"/>
       </label>
       <label id="address-level1-container">
-        <span class="label-text"/>
         <input id="address-level1" type="text" required="required"/>
+        <span class="label-text"/>
       </label>
       <label id="postal-code-container">
-        <span class="label-text"/>
         <input id="postal-code" type="text" required="required"/>
+        <span class="label-text"/>
       </label>
       <div id="country-container">
         <label id="country-label">
-          <span data-localization="country" class="label-text"/>
           <select id="country" required="required">
             <option/>
           </select>
+          <span data-localization="country" class="label-text"/>
         </label>
         <p id="country-warning-message" data-localization="countryWarningMessage2"/>
       </div>
       <label id="tel-container">
-        <span data-localization="tel" class="label-text"/>
         <input id="tel" type="tel"/>
+        <span data-localization="tel" class="label-text"/>
       </label>
       <label id="email-container">
-        <span data-localization="email" class="label-text"/>
         <input id="email" type="email" required="required"/>
+        <span data-localization="email" class="label-text"/>
       </label>
     </div>
   </form>
diff --git a/browser/extensions/formautofill/content/editCreditCard.xhtml b/browser/extensions/formautofill/content/editCreditCard.xhtml
index 26f7a3765abf..279c13c483cc 100644
--- a/browser/extensions/formautofill/content/editCreditCard.xhtml
+++ b/browser/extensions/formautofill/content/editCreditCard.xhtml
@@ -18,17 +18,20 @@
 </head>
 <body dir="&locale.dir;">
   <form id="form" class="editCreditCardForm" autocomplete="off">
+    <!--
+        The <span class="label-text" …/> needs to be after the form field in the same element in
+        order to get proper label styling with :focus and :moz-ui-invalid.
+      -->
     <label>
-      <span data-localization="cardNumber" class="label-text"/>
       <span id="invalidCardNumberString" hidden="hidden" data-localization="invalidCardNumber"></span>
       <input id="cc-number" type="text" required="required" minlength="9" pattern="[- 0-9]+"/>
+      <span data-localization="cardNumber" class="label-text"/>
     </label>
     <label>
-      <span data-localization="nameOnCard" class="label-text"/>
       <input id="cc-name" type="text" required="required"/>
+      <span data-localization="nameOnCard" class="label-text"/>
     </label>
     <label>
-      <span data-localization="cardExpiresMonth" class="label-text"/>
       <select id="cc-exp-month">
         <option/>
         <option value="1">01</option>
@@ -44,17 +47,18 @@
         <option value="11">11</option>
         <option value="12">12</option>
       </select>
+      <span data-localization="cardExpiresMonth" class="label-text"/>
     </label>
     <label>
-      <span data-localization="cardExpiresYear" class="label-text"/>
       <select id="cc-exp-year">
         <option/>
       </select>
+      <span data-localization="cardExpiresYear" class="label-text"/>
     </label>
     <label class="billingAddressRow">
-      <span data-localization="billingAddress" class="label-text"/>
       <select id="billingAddressGUID">
       </select>
+      <span data-localization="billingAddress" class="label-text"/>
     </label>
   </form>
   <div id="controls-container">
diff --git a/browser/extensions/formautofill/skin/shared/editAddress.css b/browser/extensions/formautofill/skin/shared/editAddress.css
index 5db19b5eba97..f07694d3bcb7 100644
--- a/browser/extensions/formautofill/skin/shared/editAddress.css
+++ b/browser/extensions/formautofill/skin/shared/editAddress.css
@@ -8,6 +8,12 @@
   margin: 0;
 }
 
+#name-container,
+:root[subdialog] form label,
+:root[subdialog] form > p {
+  margin: 0 0 0.5em !important;
+}
+
 #given-name-container,
 #additional-name-container,
 #address-level1-container,
@@ -22,14 +28,74 @@
   flex: 0 1 50%;
 }
 
+
+/* Begin name field rules */
+
+#name-container input {
+  /* Override the default @size="20" on <input>, which acts like a min-width, not
+   * allowing the fields to shrink with flexbox as small as they need to to match
+   * the other rows. This is noticeable on narrow viewports e.g. in the
+   * PaymentRequest dialog on Linux due to the larger font-size. */
+  width: 0;
+}
+
+/* When there is focus within any of the name fields, the border of the inputs
+ * should be the focused color, except for inner ones which get overriden below. */
+#name-container:focus-within input {
+  border-color: var(--in-content-border-focus);
+}
+
+/* Invalid name fields should show the error outline instead of the focus border */
+#name-container:focus-within input:-moz-ui-invalid {
+  border-color: transparent;
+}
+
 #given-name-container,
 #additional-name-container,
 #family-name-container {
   display: flex;
+  /* Remove the bottom margin from the name containers so that the outer
+     #name-container provides the margin on the outside */
+  margin-bottom: 0 !important;
   margin-left: 0;
   margin-right: 0;
 }
 
+/* The name fields are placed adjacent to each other.
+   Remove the border-radius on adjacent fields. */
+#given-name:dir(ltr),
+#family-name:dir(rtl) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right-width: 0;
+}
+
+#given-name:dir(rtl),
+#family-name:dir(ltr) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left-width: 0;
+}
+
+#additional-name {
+  border-radius: 0;
+  /* This provides the inner separators between the fields and should never
+   * change to the focused color. */
+  border-left-color: var(--in-content-box-border-color) !important;
+  border-right-color: var(--in-content-box-border-color) !important;
+}
+
+/* Since the name fields are adjacent, there isn't room for the -moz-ui-invalid
+   box-shadow so raise invalid name fields and their labels above the siblings
+   so the shadow is shown around all 4 sides. */
+#name-container input:-moz-ui-invalid,
+#name-container input:-moz-ui-invalid ~ .label-text {
+  z-index: 1;
+}
+
+/* End name field rules */
+
+
 #name-container,
 #street-address-container,
 #country-container,
diff --git a/browser/extensions/formautofill/skin/shared/editDialog-shared.css b/browser/extensions/formautofill/skin/shared/editDialog-shared.css
index 41d5f19f1670..52f1bb35db31 100644
--- a/browser/extensions/formautofill/skin/shared/editDialog-shared.css
+++ b/browser/extensions/formautofill/skin/shared/editDialog-shared.css
@@ -13,11 +13,6 @@
   padding: 2px;
 }
 
-:root[subdialog] form label,
-:root[subdialog] form > p {
-  margin: 0 0 0.5em !important;
-}
-
 form input[type="email"],
 form input[type="tel"],
 form input[type="text"],
@@ -55,10 +50,16 @@ form :-moz-any(label, div) > .label-text[field-populated] {
   font-size: var(--in-field-label-size);
 }
 
-form :-moz-any(label, div):focus-within > .label-text {
+form :-moz-any(input, select, textarea):focus ~ .label-text {
   color: var(--in-content-item-selected);
 }
 
+/* Focused error fields should get a darker text but not the blue one since it
+ * doesn't look good with the red error outline. */
+form :-moz-any(input, select, textarea):focus:-moz-ui-invalid ~ .label-text {
+  color: var(--in-content-text-color);
+}
+
 form div[required] > label > .label-text::after,
 form :-moz-any(label, div)[required] > .label-text::after {
   content: attr(fieldRequiredSymbol);
diff --git a/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js b/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js
index 7db21816e955..a3de9d128df7 100644
--- a/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js
+++ b/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js
@@ -208,3 +208,89 @@ add_task(async function test_saveAddressDE() {
   }
   await removeAllRecords();
 });
+
+add_task(async function test_combined_name_fields() {
+  await testDialog(EDIT_ADDRESS_DIALOG_URL, async win => {
+    let doc = win.document;
+    let givenNameField = doc.querySelector("#given-name");
+    let addtlNameField = doc.querySelector("#additional-name");
+    let familyNameField = doc.querySelector("#family-name");
+
+    function getComputedPropertyValue(field, property) {
+      return win.getComputedStyle(field).getPropertyValue(property);
+    }
+    function checkNameComputedPropertiesMatch(field, property, value, checkFn = is) {
+      checkFn(getComputedPropertyValue(field, property), value,
+              `Check ${field.id}'s ${property} is ${value}`);
+    }
+    function checkNameFieldBorders(borderColorUnfocused, borderColorFocused) {
+      info("checking the perimeter colors");
+      checkNameComputedPropertiesMatch(givenNameField, "border-top-color", borderColorFocused);
+      checkNameComputedPropertiesMatch(addtlNameField, "border-top-color", borderColorFocused);
+      checkNameComputedPropertiesMatch(familyNameField, "border-top-color", borderColorFocused);
+      checkNameComputedPropertiesMatch(familyNameField, "border-right-color", borderColorFocused);
+      checkNameComputedPropertiesMatch(givenNameField, "border-bottom-color", borderColorFocused);
+      checkNameComputedPropertiesMatch(addtlNameField, "border-bottom-color", borderColorFocused);
+      checkNameComputedPropertiesMatch(familyNameField, "border-bottom-color", borderColorFocused);
+      checkNameComputedPropertiesMatch(givenNameField, "border-left-color", borderColorFocused);
+
+      info("checking the internal borders");
+      checkNameComputedPropertiesMatch(givenNameField, "border-right-width", "0px");
+      checkNameComputedPropertiesMatch(addtlNameField, "border-left-width", "2px");
+      checkNameComputedPropertiesMatch(addtlNameField, "border-left-color", borderColorFocused, isnot);
+      checkNameComputedPropertiesMatch(addtlNameField, "border-right-width", "2px");
+      checkNameComputedPropertiesMatch(addtlNameField, "border-right-color", borderColorFocused, isnot);
+      checkNameComputedPropertiesMatch(familyNameField, "border-left-width", "0px");
+    }
+
+    // Set these variables since the test doesn't run from a subdialog and
+    // therefore doesn't get the additional common CSS files injected.
+    let borderColor = "rgb(0, 255, 0)";
+    let borderColorFocused = "rgb(0, 0, 255)";
+    doc.body.style.setProperty("--in-content-box-border-color", borderColor);
+    doc.body.style.setProperty("--in-content-border-focus", borderColorFocused);
+
+    givenNameField.focus();
+    checkNameFieldBorders(borderColor, borderColorFocused);
+
+    addtlNameField.focus();
+    checkNameFieldBorders(borderColor, borderColorFocused);
+
+    familyNameField.focus();
+    checkNameFieldBorders(borderColor, borderColorFocused);
+
+    info("unfocusing the name fields");
+    let cancelButton = doc.querySelector("#cancel");
+    cancelButton.focus();
+    borderColor = getComputedPropertyValue(givenNameField, "border-top-color");
+    isnot(borderColor, borderColorFocused, "Check that the border color is different");
+    checkNameFieldBorders(borderColor, borderColor);
+
+    cancelButton.click();
+  });
+});
+
+add_task(async function test_combined_name_fields_error() {
+  await testDialog(EDIT_ADDRESS_DIALOG_URL, async win => {
+    let doc = win.document;
+    let givenNameField = doc.querySelector("#given-name");
+    info("mark the given name field as invalid");
+    givenNameField.value = "";
+    givenNameField.focus();
+    ok(givenNameField.matches(":-moz-ui-invalid"), "Check field is visually invalid");
+
+    let givenNameLabel = doc.querySelector("#given-name-container .label-text");
+    // Override pointer-events so that we can use elementFromPoint to know if
+    // the label text is visible.
+    givenNameLabel.style.pointerEvents = "auto";
+    let givenNameLabelRect = givenNameLabel.getBoundingClientRect();
+    // Get the center of the label
+    let el = doc.elementFromPoint(givenNameLabelRect.left + givenNameLabelRect.width / 2,
+                                  givenNameLabelRect.top + givenNameLabelRect.height / 2);
+
+    is(el, givenNameLabel, "Check that the label text is visible in the error state");
+    is(win.getComputedStyle(givenNameField).getPropertyValue("border-top-color"),
+       "rgba(0, 0, 0, 0)", "Border should be transparent so that only the error outline shows");
+    doc.querySelector("#cancel").click();
+  });
+});
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
index 2a0066815b91..7fe51e157b4e 100644
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -506,6 +506,15 @@ xul|textbox[focused] {
   border-color: var(--in-content-border-focus);
 }
 
+/* Don't show the field error outlines and focus borders at the same time */
+html|input[type="email"]:-moz-ui-invalid:focus,
+html|input[type="tel"]:-moz-ui-invalid:focus,
+html|input[type="text"]:-moz-ui-invalid:focus,
+html|textarea:-moz-ui-invalid:focus,
+xul|textbox[focused] {
+  border-color: transparent;
+}
+
 html|input[type="email"]:disabled,
 html|input[type="tel"]:disabled,
 html|input[type="text"]:disabled,

From 2614e811544736f9e366d08eee5e5a00a5c92ff3 Mon Sep 17 00:00:00 2001
From: alwu <alwu@mozilla.com>
Date: Sat, 25 Aug 2018 00:03:38 +0000
Subject: [PATCH 10/14] Bug 1479270 - part1 : remove external player support in
 media element. r=jya

Since we have native HLS support in 59 [1], we don't need those code anymore.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1345752

Differential Revision: https://phabricator.services.mozilla.com/D4165

--HG--
extra : moz-landing-system : lando
---
 dom/html/HTMLMediaElement.cpp | 80 +++++++----------------------------
 dom/html/HTMLMediaElement.h   |  4 --
 2 files changed, 16 insertions(+), 68 deletions(-)

diff --git a/dom/html/HTMLMediaElement.cpp b/dom/html/HTMLMediaElement.cpp
index 428e548f9b25..9ff994fbbc44 100644
--- a/dom/html/HTMLMediaElement.cpp
+++ b/dom/html/HTMLMediaElement.cpp
@@ -1377,7 +1377,6 @@ class HTMLMediaElement::ErrorSink
 public:
   explicit ErrorSink(HTMLMediaElement* aOwner)
     : mOwner(aOwner)
-    , mSrcIsUnsupportedTypeMedia(false)
   {
     MOZ_ASSERT(mOwner);
   }
@@ -1396,59 +1395,29 @@ public:
       return;
     }
 
-    // TODO : remove unsupported type related codes after finishing native
-    // support for HLS, see bug 1350842.
-    if (CanOwnerPlayUnsupportedTypeMedia() &&
-        aErrorCode == MEDIA_ERR_SRC_NOT_SUPPORTED) {
-      // On Fennec, we do some hack for unsupported type media, we don't set
-      // its error state in order to open it with external app.
-      mSrcIsUnsupportedTypeMedia = true;
-      mOwner->ChangeNetworkState(NETWORK_NO_SOURCE);
-      MaybeOpenUnsupportedMediaForOwner();
-    } else {
-      mError = new MediaError(mOwner, aErrorCode, aErrorDetails);
-      mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("error"));
-      if (mOwner->ReadyState() == HAVE_NOTHING &&
-          aErrorCode == MEDIA_ERR_ABORTED) {
-        // https://html.spec.whatwg.org/multipage/embedded-content.html#media-data-processing-steps-list
-        // "If the media data fetching process is aborted by the user"
-        mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("abort"));
-        mOwner->ChangeNetworkState(NETWORK_EMPTY);
-        mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("emptied"));
-        if (mOwner->mDecoder) {
-          mOwner->ShutdownDecoder();
-        }
-      } else if (aErrorCode == MEDIA_ERR_SRC_NOT_SUPPORTED) {
-        mOwner->ChangeNetworkState(NETWORK_NO_SOURCE);
-      } else {
-        mOwner->ChangeNetworkState(NETWORK_IDLE);
+
+    mError = new MediaError(mOwner, aErrorCode, aErrorDetails);
+    mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("error"));
+    if (mOwner->ReadyState() == HAVE_NOTHING &&
+        aErrorCode == MEDIA_ERR_ABORTED) {
+      // https://html.spec.whatwg.org/multipage/embedded-content.html#media-data-processing-steps-list
+      // "If the media data fetching process is aborted by the user"
+      mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("abort"));
+      mOwner->ChangeNetworkState(NETWORK_EMPTY);
+      mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("emptied"));
+      if (mOwner->mDecoder) {
+        mOwner->ShutdownDecoder();
       }
+    } else if (aErrorCode == MEDIA_ERR_SRC_NOT_SUPPORTED) {
+      mOwner->ChangeNetworkState(NETWORK_NO_SOURCE);
+    } else {
+      mOwner->ChangeNetworkState(NETWORK_IDLE);
     }
   }
 
   void ResetError()
   {
     mError = nullptr;
-    mSrcIsUnsupportedTypeMedia = false;
-  }
-
-  void MaybeOpenUnsupportedMediaForOwner() const
-  {
-    // Src is supported type or we don't open the pref for external app.
-    if (!mSrcIsUnsupportedTypeMedia || !CanOwnerPlayUnsupportedTypeMedia()) {
-      return;
-    }
-
-    // If media doesn't start playing, we don't need to open it.
-    if (mOwner->Paused()) {
-      return;
-    }
-
-    nsContentUtils::DispatchTrustedEvent(
-      mOwner->OwnerDoc(),
-      static_cast<nsIContent*>(mOwner),
-      NS_LITERAL_STRING("OpenMediaWithExternalApp"),
-      CanBubble::eYes, Cancelable::eYes);
   }
 
   RefPtr<MediaError> mError;
@@ -1461,19 +1430,9 @@ private:
             aErrorCode == MEDIA_ERR_SRC_NOT_SUPPORTED);
   }
 
-  bool CanOwnerPlayUnsupportedTypeMedia() const
-  {
-#if defined(MOZ_WIDGET_ANDROID)
-    // On Fennec, we will use an external app to open unsupported media types.
-    return Preferences::GetBool("media.openUnsupportedTypeWithExternalApp");
-#endif
-    return false;
-  }
-
   // Media elememt's life cycle would be longer than error sink, so we use the
   // raw pointer and this class would only be referenced by media element.
   HTMLMediaElement* mOwner;
-  bool mSrcIsUnsupportedTypeMedia;
 };
 
 NS_IMPL_CYCLE_COLLECTION_CLASS(HTMLMediaElement)
@@ -7017,12 +6976,6 @@ HTMLMediaElement::GetError() const
   return mErrorSink->mError;
 }
 
-void
-HTMLMediaElement::OpenUnsupportedMediaWithExternalAppIfNeeded() const
-{
-  mErrorSink->MaybeOpenUnsupportedMediaForOwner();
-}
-
 void
 HTMLMediaElement::GetCurrentSpec(nsCString& aString)
 {
@@ -7967,7 +7920,6 @@ HTMLMediaElement::MarkAsContentSource(CallerAPI aAPI)
 void
 HTMLMediaElement::UpdateCustomPolicyAfterPlayed()
 {
-  OpenUnsupportedMediaWithExternalAppIfNeeded();
   if (mAudioChannelWrapper) {
     mAudioChannelWrapper->NotifyPlayStateChanged();
   }
diff --git a/dom/html/HTMLMediaElement.h b/dom/html/HTMLMediaElement.h
index d197f5739991..4174554568da 100644
--- a/dom/html/HTMLMediaElement.h
+++ b/dom/html/HTMLMediaElement.h
@@ -1310,10 +1310,6 @@ protected:
   // For nsAsyncEventRunner.
   nsresult DispatchEvent(const nsAString& aName);
 
-  // Open unsupported types media with the external app when the media element
-  // triggers play() after loaded fail. eg. preload the data before start play.
-  void OpenUnsupportedMediaWithExternalAppIfNeeded() const;
-
   // This method moves the mPendingPlayPromises into a temperate object. So the
   // mPendingPlayPromises is cleared after this method call.
   nsTArray<RefPtr<PlayPromise>> TakePendingPlayPromises();

From b07c177c380ee4a954aa00ebc02b8cfecef54938 Mon Sep 17 00:00:00 2001
From: alwu <alwu@mozilla.com>
Date: Fri, 24 Aug 2018 22:36:18 +0000
Subject: [PATCH 11/14] Bug 1479270 - part2 : remove HLS video player. r=snorp

Since we have native HLS support in 59 [1], we can remove those codes which is used to play HLS.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1345752

Differential Revision: https://phabricator.services.mozilla.com/D4166

--HG--
extra : moz-landing-system : lando
---
 .../res/drawable-xxhdpi/exit_fullscreen.png   | Bin 537 -> 0 bytes
 .../main/res/drawable-xxhdpi/fullscreen.png   | Bin 532 -> 0 bytes
 .../app/src/main/res/layout/gecko_app.xml     |   5 -
 .../java/org/mozilla/gecko/BrowserApp.java    |  37 ----
 .../org/mozilla/gecko/media/VideoPlayer.java  | 204 ------------------
 mobile/android/chrome/content/browser.js      |  11 -
 6 files changed, 257 deletions(-)
 delete mode 100644 mobile/android/app/src/main/res/drawable-xxhdpi/exit_fullscreen.png
 delete mode 100644 mobile/android/app/src/main/res/drawable-xxhdpi/fullscreen.png
 delete mode 100644 mobile/android/base/java/org/mozilla/gecko/media/VideoPlayer.java

diff --git a/mobile/android/app/src/main/res/drawable-xxhdpi/exit_fullscreen.png b/mobile/android/app/src/main/res/drawable-xxhdpi/exit_fullscreen.png
deleted file mode 100644
index 593609038b962ec96125e11947ef03428f1291bf..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 537
zcmV+!0_OdRP)<h;3K|Lk000e1NJLTq002k;002k`1^@s6RqeA!00004XF*Lt006O%
z3;baP0005dNkl<ZcmeF%fo5A_7{}o+k<w(fMo|Kw+iVzzTwoP20vIS5<Q@tH$V~*j
zfkFWR&oEG*zSO6U^X>id-oWGFoWE1X5WeCO54bMb%kbo7L-|*RGXUC=aDnf*!J-GC
z1+*gJ68GwEaXx;a1|+P+J>#lVpcn~D9HC337$`=<90!2zkYb=12{Y^j1xV+;0>OX@
zw&J30dj^7y_7*(@wZ}~Y#r;U2xQhgOz55cDK$i(r2S=<*T>{~NWvNRb>@Y8N34|?X
zr7nT6!K8%c6Eq}HGg1P<kU-5y2?Rq=K#3#<N+e7nE|K<5)L4Ml5-1LL5-1L9?0sBM
zWsG5p#XH|w$+9fVvh2SIXIQ-RO~(lH1y4S%J=S9adUTrZ#sc)<bgjn#bnSHQ%NWAo
zbWIZ}Zc%~~DF8~O04R|HphOCQ5-9-c6e)ow*hru{%&=9LK$v5vE`hMbL0tl2g`>Iz
z!ctfQ{Yju#!e?O#^ix;@eG`^IpR~7W0P6lPt}P}QdImbjv$wayEcn3f>P7MDjYtQ~
z8&-e{s3)W&meEww1yBRhs$oy+V(ysZm%87$Y#-gm1Qdk71E2c^#XQs;nH*hBiWW#i
bZ5=WIiagjBf`S?$00000NkvXXu0mjfY^~r2

diff --git a/mobile/android/app/src/main/res/drawable-xxhdpi/fullscreen.png b/mobile/android/app/src/main/res/drawable-xxhdpi/fullscreen.png
deleted file mode 100644
index baa187662a11a1217e0283b662492ad91520d927..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 532
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY1|&n@ZgvM!Ea{HEjtmSN`?>!lvNA9*p7wNc
z45?szd%H0$no;EVL**x|yS7}>61(z^?Kbn8rbK7odx{4%4yQ3yw~4G+$TNZAg?Fg@
z1L?M#Ma2>M+wMp|uWpeq_&4W;(Vio^a)0E%?>MHq=(54a_;QQBb%$>JyXzXRxM5rR
z#Z-xv4wiF57Vx=u#kiuQeTTO&<u=Yt6XhtLttG(34J6niZiO@&961#x`eHFq{QMHF
z3(_mOzJ#t~iuDRz@VqSf)?)|Dn#<>O><fO&zc}&uto&{!m-!E_+>hQe(@W|4Zx8P+
zw<arHf9;{obE_}!Vt7T<`&qRI3dB#Re36ZNU~Bh~$-mt4zS~J<*PpU(5$cUxOvyfr
zrhGb|*kriq594}<4aYQ2>F?P3QstC?MMJFXA<4MM#`hlC{Nh=VtHM*b^d@iLFWD8Y
zDm)t|HD7k-nd0V@pn3hi#|1SZv7*0yD%0H#-FYng)jmLo)A;QjnJk4Fw|YOnu=@RV
z9n;f&Aq(!fvYwh7y5Q})q}5zo4sBpEjZPBi)w;lRaShYi<kegz-D|Zjm;{M(_-S2O
z=r(D!N0F%KI;E4LDm%Mces@hdu=TI>RdwII-WMt?@7~<E*u`~Rw!@^8?-!$&+v><K
Tv-W)lMl*w_tDnm{r-UW|g^TM7

diff --git a/mobile/android/app/src/main/res/layout/gecko_app.xml b/mobile/android/app/src/main/res/layout/gecko_app.xml
index ca25841695a7..f48e7fc9f3be 100644
--- a/mobile/android/app/src/main/res/layout/gecko_app.xml
+++ b/mobile/android/app/src/main/res/layout/gecko_app.xml
@@ -37,11 +37,6 @@
                                                android:layout_height="match_parent"
                                                android:visibility="gone"/>
 
-            <view class="org.mozilla.gecko.media.VideoPlayer" android:id="@+id/video_player"
-                         android:layout_height="match_parent"
-                         android:layout_width="match_parent">
-            </view>
-
             <FrameLayout android:id="@+id/home_screen_container"
                          android:layout_width="match_parent"
                          android:layout_height="match_parent"
diff --git a/mobile/android/base/java/org/mozilla/gecko/BrowserApp.java b/mobile/android/base/java/org/mozilla/gecko/BrowserApp.java
index e9f8f59f9f27..6d1ad64d2195 100644
--- a/mobile/android/base/java/org/mozilla/gecko/BrowserApp.java
+++ b/mobile/android/base/java/org/mozilla/gecko/BrowserApp.java
@@ -110,7 +110,6 @@ import org.mozilla.gecko.icons.decoders.IconDirectoryEntry;
 import org.mozilla.gecko.icons.decoders.LoadFaviconResult;
 import org.mozilla.gecko.lwt.LightweightTheme;
 import org.mozilla.gecko.media.PictureInPictureController;
-import org.mozilla.gecko.media.VideoPlayer;
 import org.mozilla.gecko.menu.GeckoMenu;
 import org.mozilla.gecko.menu.GeckoMenuItem;
 import org.mozilla.gecko.mma.MmaDelegate;
@@ -232,7 +231,6 @@ public class BrowserApp extends GeckoApp
     public ViewGroup mBrowserChrome;
     public ViewFlipper mActionBarFlipper;
     public ActionModeCompatView mActionBar;
-    private VideoPlayer mVideoPlayer;
     private PictureInPictureController mPipController;
     private BrowserToolbar mBrowserToolbar;
     private View doorhangerOverlay;
@@ -374,10 +372,6 @@ public class BrowserApp extends GeckoApp
         Log.d(LOGTAG, "BrowserApp.onTabChanged: " + tab.getId() + ": " + msg);
         switch (msg) {
             case SELECTED:
-                if (mVideoPlayer.isPlaying()) {
-                    mVideoPlayer.stop();
-                }
-
                 if (Tabs.getInstance().isSelectedTab(tab) && mDynamicToolbar.isEnabled()) {
                     final VisibilityTransition transition = (tab.getShouldShowToolbarWithoutAnimationOnFirstSelection()) ?
                             VisibilityTransition.IMMEDIATE : VisibilityTransition.ANIMATE;
@@ -653,16 +647,6 @@ public class BrowserApp extends GeckoApp
         mBrowserChrome = (ViewGroup) findViewById(R.id.browser_chrome);
         mActionBarFlipper = (ViewFlipper) findViewById(R.id.browser_actionbar);
         mActionBar = (ActionModeCompatView) findViewById(R.id.actionbar);
-
-        mVideoPlayer = (VideoPlayer) findViewById(R.id.video_player);
-        mVideoPlayer.setFullScreenListener(new VideoPlayer.FullScreenListener() {
-            @Override
-            public void onFullScreenChanged(boolean fullScreen) {
-                mVideoPlayer.setFullScreen(fullScreen);
-                setFullScreen(fullScreen);
-            }
-        });
-
         mBrowserToolbar = (BrowserToolbar) findViewById(R.id.browser_toolbar);
         mBrowserToolbar.setTouchEventInterceptor(new TouchEventInterceptor() {
             @Override
@@ -781,7 +765,6 @@ public class BrowserApp extends GeckoApp
             "Menu:Open",
             "LightweightTheme:Update",
             "Tab:Added",
-            "Video:Play",
             "CharEncoding:Data",
             "CharEncoding:State",
             "Settings:Show",
@@ -974,17 +957,6 @@ public class BrowserApp extends GeckoApp
             return;
         }
 
-        if (mVideoPlayer.isFullScreen()) {
-            mVideoPlayer.setFullScreen(false);
-            setFullScreen(false);
-            return;
-        }
-
-        if (mVideoPlayer.isPlaying()) {
-            mVideoPlayer.stop();
-            return;
-        }
-
         super.onBackPressed();
     }
 
@@ -1516,7 +1488,6 @@ public class BrowserApp extends GeckoApp
             "Menu:Open",
             "LightweightTheme:Update",
             "Tab:Added",
-            "Video:Play",
             "CharEncoding:Data",
             "CharEncoding:State",
             "Settings:Show",
@@ -1800,14 +1771,6 @@ public class BrowserApp extends GeckoApp
                 }
                 break;
 
-            case "Video:Play":
-                if (SwitchBoard.isInExperiment(this, Experiments.HLS_VIDEO_PLAYBACK)) {
-                    mVideoPlayer.start(Uri.parse(message.getString("uri")));
-                    Telemetry.sendUIEvent(TelemetryContract.Event.SHOW,
-                                          TelemetryContract.Method.CONTENT, "playhls");
-                }
-                break;
-
             case "CharEncoding:Data":
                 final GeckoBundle[] charsets = message.getBundleArray("charsets");
                 final int selected = message.getInt("selected");
diff --git a/mobile/android/base/java/org/mozilla/gecko/media/VideoPlayer.java b/mobile/android/base/java/org/mozilla/gecko/media/VideoPlayer.java
deleted file mode 100644
index b41abdbbd662..000000000000
--- a/mobile/android/base/java/org/mozilla/gecko/media/VideoPlayer.java
+++ /dev/null
@@ -1,204 +0,0 @@
-/* -*- Mode: Java; c-basic-offset: 4; tab-width: 4; indent-tabs-mode: nil; -*-
- * This Source Code Form is subject to the terms of the Mozilla Public
- * 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/. */
-
-package org.mozilla.gecko.media;
-
-import android.content.Context;
-
-import android.graphics.Color;
-
-import android.net.Uri;
-
-import android.util.AttributeSet;
-import android.util.Log;
-import android.view.Gravity;
-import android.view.KeyEvent;
-import android.view.MotionEvent;
-import android.view.View;
-import android.view.ViewGroup;
-
-import android.widget.ImageButton;
-import android.widget.FrameLayout;
-import android.widget.ImageView;
-import android.widget.LinearLayout;
-import android.widget.MediaController;
-import android.widget.VideoView;
-
-import org.mozilla.gecko.R;
-
-public class VideoPlayer extends FrameLayout {
-    private VideoView video;
-    private FullScreenMediaController controller;
-    private FullScreenListener fullScreenListener;
-
-    private boolean isFullScreen;
-
-    public VideoPlayer(Context ctx) {
-        this(ctx, null);
-    }
-
-    public VideoPlayer(Context ctx, AttributeSet attrs) {
-        this(ctx, attrs, 0);
-    }
-
-    public VideoPlayer(Context ctx, AttributeSet attrs, int defStyle) {
-        super(ctx, attrs, defStyle);
-        setFullScreen(false);
-        setVisibility(View.GONE);
-    }
-
-    public void start(Uri uri) {
-        stop();
-
-        video = new VideoView(getContext());
-        controller = new FullScreenMediaController(getContext());
-        video.setMediaController(controller);
-        controller.setAnchorView(video);
-
-        video.setVideoURI(uri);
-
-        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
-            FrameLayout.LayoutParams.MATCH_PARENT,
-            FrameLayout.LayoutParams.WRAP_CONTENT,
-            Gravity.CENTER);
-
-        addView(video, layoutParams);
-        setVisibility(View.VISIBLE);
-
-        video.setZOrderOnTop(true);
-        video.start();
-    }
-
-    public boolean isPlaying() {
-        return video != null;
-    }
-
-    public void stop() {
-        if (video == null) {
-            return;
-        }
-
-        removeAllViews();
-        setVisibility(View.GONE);
-        video.stopPlayback();
-
-        video = null;
-        controller = null;
-    }
-
-    public void setFullScreenListener(FullScreenListener listener) {
-        fullScreenListener = listener;
-    }
-
-    public boolean isFullScreen() {
-        return isFullScreen;
-    }
-
-    public void setFullScreen(boolean fullScreen) {
-        isFullScreen = fullScreen;
-        if (fullScreen) {
-            setBackgroundColor(Color.BLACK);
-        } else {
-            setBackgroundResource(R.color.dark_transparent_overlay);
-        }
-
-        if (controller != null) {
-            controller.setFullScreen(fullScreen);
-        }
-    }
-
-    @Override
-    public boolean onKeyDown(int keyCode, KeyEvent event) {
-        if (event.isSystem()) {
-            return super.onKeyDown(keyCode, event);
-        }
-        return true;
-    }
-
-    @Override
-    public boolean onKeyUp(int keyCode, KeyEvent event) {
-        if (event.isSystem()) {
-            return super.onKeyUp(keyCode, event);
-        }
-        return true;
-    }
-
-    @Override
-    public boolean onTouchEvent(MotionEvent event) {
-        super.onTouchEvent(event);
-        return true;
-    }
-
-    @Override
-    public boolean onTrackballEvent(MotionEvent event) {
-        super.onTrackballEvent(event);
-        return true;
-    }
-
-    public interface FullScreenListener {
-        void onFullScreenChanged(boolean fullScreen);
-    }
-
-    private class FullScreenMediaController extends MediaController {
-        private ImageButton mButton;
-
-        public FullScreenMediaController(Context ctx) {
-            super(ctx);
-
-            mButton = new ImageButton(getContext());
-            mButton.setScaleType(ImageView.ScaleType.FIT_CENTER);
-            mButton.setBackgroundColor(Color.TRANSPARENT);
-            mButton.setOnClickListener(new View.OnClickListener() {
-                @Override
-                public void onClick(View v) {
-                    FullScreenMediaController.this.onFullScreenClicked();
-                }
-            });
-
-            updateFullScreenButton(false);
-        }
-
-        public void setFullScreen(boolean fullScreen) {
-            updateFullScreenButton(fullScreen);
-        }
-
-        private void updateFullScreenButton(boolean fullScreen) {
-            mButton.setImageResource(fullScreen ? R.drawable.exit_fullscreen : R.drawable.fullscreen);
-        }
-
-        private void onFullScreenClicked() {
-            if (VideoPlayer.this.fullScreenListener != null) {
-                boolean fullScreen = !VideoPlayer.this.isFullScreen();
-                VideoPlayer.this.fullScreenListener.onFullScreenChanged(fullScreen);
-            }
-        }
-
-        @Override
-        public void setAnchorView(final View view) {
-            super.setAnchorView(view);
-
-            // Add the fullscreen button here because this is where the parent class actually creates
-            // the media buttons and their layout.
-            //
-            // http://androidxref.com/6.0.1_r10/xref/frameworks/base/core/java/android/widget/MediaController.java#239
-            //
-            // The media buttons are in a horizontal linear layout which is itself packed into
-            // a vertical layout. The vertical layout is the only child of the FrameLayout which
-            // MediaController inherits from.
-            LinearLayout child = (LinearLayout) getChildAt(0);
-            LinearLayout buttons = (LinearLayout) child.getChildAt(0);
-
-            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
-                                                                             LayoutParams.MATCH_PARENT);
-            params.gravity = Gravity.CENTER_VERTICAL;
-
-            if (mButton.getParent() != null) {
-                ((ViewGroup)mButton.getParent()).removeView(mButton);
-            }
-
-            buttons.addView(mButton, params);
-        }
-    }
-}
\ No newline at end of file
diff --git a/mobile/android/chrome/content/browser.js b/mobile/android/chrome/content/browser.js
index 5ad5d9838d05..d630d263590a 100644
--- a/mobile/android/chrome/content/browser.js
+++ b/mobile/android/chrome/content/browser.js
@@ -4848,7 +4848,6 @@ var BrowserEventHandler = {
 
     BrowserApp.deck.addEventListener("DOMUpdateBlockedPopups", PopupBlockerObserver.onUpdateBlockedPopups);
     BrowserApp.deck.addEventListener("MozMouseHittest", this, true);
-    BrowserApp.deck.addEventListener("OpenMediaWithExternalApp", this, true);
 
     // ReaderViews support backPress listeners.
     WindowEventDispatcher.registerListener((event, data, callback) => {
@@ -4866,16 +4865,6 @@ var BrowserEventHandler = {
       case 'MozMouseHittest':
         this._handleRetargetedTouchStart(aEvent);
         break;
-      case 'OpenMediaWithExternalApp': {
-        let mediaSrc = aEvent.target.currentSrc || aEvent.target.src;
-        let uuid = uuidgen.generateUUID().toString();
-        GlobalEventDispatcher.sendRequest({
-          type: "Video:Play",
-          uri: mediaSrc,
-          uuid: uuid
-        });
-        break;
-      }
     }
   },
 

From c02103611ad21b45793f0ecdfbb521141afbadf9 Mon Sep 17 00:00:00 2001
From: Thomas Daede <tdaede@mozilla.com>
Date: Fri, 24 Aug 2018 21:29:00 +0000
Subject: [PATCH 12/14] Bug 1485875 - Expect Android to not play AV1 in MP4.
 r=jya

Differential Revision: https://phabricator.services.mozilla.com/D4258

--HG--
extra : moz-landing-system : lando
---
 dom/media/test/can_play_type_webm.js        | 9 ---------
 dom/media/test/manifest.js                  | 9 +++++++++
 dom/media/test/test_can_play_type_mpeg.html | 3 +--
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/dom/media/test/can_play_type_webm.js b/dom/media/test/can_play_type_webm.js
index 7c8b42f10729..75b6c1e7c2c1 100644
--- a/dom/media/test/can_play_type_webm.js
+++ b/dom/media/test/can_play_type_webm.js
@@ -35,15 +35,6 @@ async function check_webm(v, enabled) {
     return pref;
   }
 
-  function isWindows32() {
-    return navigator.userAgent.includes("Windows") &&
-           !navigator.userAgent.includes("Win64");
-  }
-
-  function isAndroid() {
-    return navigator.userAgent.includes("Android");
-  }
-
   await SpecialPowers.pushPrefEnv({"set": [["media.av1.enabled", true]]});
   // AV1 is disabled on Windows 32 bits (bug 1475564) and Android (bug 1368843)
   check("video/webm; codecs=\"av1\"", (isWindows32() || isAndroid()) ? "" : "probably");
diff --git a/dom/media/test/manifest.js b/dom/media/test/manifest.js
index 88b5a4d0feec..8a9d9d5b8494 100644
--- a/dom/media/test/manifest.js
+++ b/dom/media/test/manifest.js
@@ -633,6 +633,15 @@ var gUnseekableTests = [
   { name:"bogus.duh", type:"bogus/duh"}
 ];
 
+function isWindows32() {
+    return navigator.userAgent.includes("Windows") &&
+        !navigator.userAgent.includes("Win64");
+}
+
+function isAndroid() {
+    return navigator.userAgent.includes("Android");
+}
+
 var androidVersion = -1; // non-Android platforms
 if (manifestNavigator().userAgent.includes("Mobile") ||
     manifestNavigator().userAgent.includes("Tablet")) {
diff --git a/dom/media/test/test_can_play_type_mpeg.html b/dom/media/test/test_can_play_type_mpeg.html
index 37a9526566be..1a5d4f2551ce 100644
--- a/dom/media/test/test_can_play_type_mpeg.html
+++ b/dom/media/test/test_can_play_type_mpeg.html
@@ -98,8 +98,7 @@ function check_mp4(v, enabled) {
   });
   // AV1 is temporarily disabled on Win32 due to linker issues
   // https://bugzilla.mozilla.org/show_bug.cgi?id=1475564
-  if (!(manifestNavigator().userAgent.includes("Windows") &&
-      !manifestNavigator().userAgent.includes("x64"))) {
+  if (!isWindows32() && !isAndroid()) {
     check("video/mp4; codecs=\"av1\"", "probably");
   } else {
     check("video/mp4; codecs=\"av1\"", "");

From f6923ccc249e9fed22457ae780c2d78cae3e4eed Mon Sep 17 00:00:00 2001
From: Brendan Dahl <bdahl@mozilla.com>
Date: Sat, 25 Aug 2018 00:16:27 +0000
Subject: [PATCH 13/14] 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

--HG--
extra : moz-landing-system : lando
---
 browser/base/content/browser-pageActions.js   |  2 +-
 browser/base/content/pageinfo/feeds.js        | 16 ++++----
 browser/base/content/pageinfo/permissions.js  | 16 ++++----
 browser/base/content/tabbrowser.xml           |  2 +-
 .../contextMenu/browser_utilityOverlay.js     |  8 ++--
 .../test/general/browser_accesskeys.js        |  2 +-
 .../general/browser_tab_dragdrop2_frame1.xul  |  4 +-
 .../general/browser_tabbar_big_widgets.js     |  2 +-
 .../test/permissions/browser_reservedkey.js   | 10 ++---
 .../browser_popupNotification_2.js            |  4 +-
 .../browser_popupNotification_3.js            |  2 +-
 .../browser_closeTabSpecificPanels.js         |  4 +-
 browser/base/content/utilityOverlay.js        | 10 ++---
 .../customizableui/CustomizeMode.jsm          |  6 +--
 .../customizableui/content/panelUI.js         |  6 +--
 .../browser_918049_skipintoolbarset_dnd.js    |  2 +-
 ..._registerToolbarNode_calls_registerArea.js |  4 +-
 ...ser_940307_panel_click_closure_handling.js |  4 +-
 ...zing_attribute_non_customizable_toolbar.js |  2 +-
 .../test/browser_978084_dragEnd_after_move.js |  4 +-
 .../browser_981305_separator_insertion.js     |  6 +--
 ...r_981418-widget-onbeforecreated-handler.js |  2 +-
 .../test/browser_996635_remove_non_widgets.js |  2 +-
 .../test/browser_PanelMultiView.js            | 10 ++---
 .../browser_bootstrapped_custom_toolbar.js    |  2 +-
 .../test/browser_insert_before_moved_node.js  |  2 +-
 .../downloads/content/allDownloadsView.js     |  2 +-
 .../components/downloads/content/downloads.js |  2 +-
 .../extensions/ExtensionControlledPopup.jsm   |  4 +-
 .../components/extensions/ExtensionPopups.jsm |  4 +-
 .../components/extensions/parent/ext-menus.js | 12 +++---
 .../components/extensions/parent/ext-tabs.js  |  2 +-
 .../browser_ExtensionControlledPopup.js       |  6 +--
 .../places/content/browserPlacesViews.js      | 40 +++++++++----------
 .../components/places/content/editBookmark.js |  8 ++--
 .../tests/browser/browser_sort_in_library.js  |  2 +-
 .../preferences/applicationManager.js         |  4 +-
 browser/components/preferences/containers.js  | 12 +++---
 .../preferences/in-content/containers.js      | 14 +++----
 .../in-content/extensionControlled.js         |  4 +-
 .../preferences/in-content/findInPage.js      |  4 +-
 .../components/preferences/in-content/main.js | 26 ++++++------
 browser/components/preferences/languages.js   |  6 +--
 browser/components/preferences/permissions.js | 12 +++---
 .../preferences/siteDataRemoveSelected.js     |  4 +-
 .../preferences/siteDataSettings.js           |  8 ++--
 .../components/preferences/sitePermissions.js | 14 +++----
 browser/components/uitour/UITour.jsm          |  2 +-
 .../formautofill/FormAutofillDoorhanger.jsm   | 14 +++----
 browser/modules/ProcessHangMonitor.jsm        |  2 +-
 browser/modules/webrtcUI.jsm                  | 26 ++++++------
 devtools/client/framework/browser-menus.js    |  4 +-
 devtools/client/framework/toolbox-hosts.js    |  8 ++--
 devtools/client/framework/toolbox.js          |  8 ++--
 dom/html/test/browser_bug1081537.js           |  2 +-
 .../pki/resources/content/certViewer.js       | 10 ++---
 .../pki/resources/content/clientauthask.js    |  2 +-
 .../pki/resources/content/deletecert.js       |  4 +-
 .../pki/resources/content/device_manager.js   | 22 +++++-----
 .../components/apppicker/content/appPicker.js |  6 +--
 .../browser_ext_themes_autocomplete_popup.js  |  2 +-
 toolkit/components/normandy/lib/Heartbeat.jsm |  8 ++--
 .../passwordmgr/LoginManagerContextMenu.jsm   |  2 +-
 .../test/unit/test_context_menu.js            |  1 +
 toolkit/content/widgets/autocomplete.xml      |  2 +-
 toolkit/content/widgets/datetimepopup.xml     |  2 +-
 toolkit/content/widgets/videocontrols.xml     |  2 +-
 toolkit/modules/InlineSpellChecker.jsm        |  4 +-
 toolkit/modules/PageMenu.jsm                  |  8 ++--
 toolkit/modules/SelectParentHelper.jsm        |  4 +-
 .../mozapps/extensions/content/blocklist.js   |  2 +-
 .../mozapps/extensions/content/extensions.js  |  8 ++--
 toolkit/mozapps/preferences/fontbuilder.js    | 12 +++---
 73 files changed, 246 insertions(+), 245 deletions(-)

diff --git a/browser/base/content/browser-pageActions.js b/browser/base/content/browser-pageActions.js
index f190c62109e2..a9b628b53f6f 100644
--- a/browser/base/content/browser-pageActions.js
+++ b/browser/base/content/browser-pageActions.js
@@ -1236,7 +1236,7 @@ BrowserPageActions.shareURL = {
       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);
diff --git a/browser/base/content/pageinfo/feeds.js b/browser/base/content/pageinfo/feeds.js
index bdb105c8db14..612eec6f8cc2 100644
--- a/browser/base/content/pageinfo/feeds.js
+++ b/browser/base/content/pageinfo/feeds.js
@@ -17,38 +17,38 @@ function initFeedTab(feeds) {
 }
 
 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 }));
diff --git a/browser/base/content/pageinfo/permissions.js b/browser/base/content/pageinfo/permissions.js
index 37dc1bfd74c5..bd037244b597 100644
--- a/browser/base/content/pageinfo/permissions.js
+++ b/browser/base/content/pageinfo/permissions.js
@@ -114,41 +114,41 @@ function createRow(aPartId) {
   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);
diff --git a/browser/base/content/tabbrowser.xml b/browser/base/content/tabbrowser.xml
index 665c8416871e..ce9f3242519a 100644
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -1275,7 +1275,7 @@
             // 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");
diff --git a/browser/base/content/test/contextMenu/browser_utilityOverlay.js b/browser/base/content/test/contextMenu/browser_utilityOverlay.js
index f3733de5ed4f..5969216a6c0b 100644
--- a/browser/base/content/test/contextMenu/browser_utilityOverlay.js
+++ b/browser/base/content/test/contextMenu/browser_utilityOverlay.js
@@ -36,7 +36,7 @@ function test_eventMatchesKey() {
   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");
@@ -45,7 +45,7 @@ function test_eventMatchesKey() {
     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);
@@ -53,7 +53,7 @@ function test_eventMatchesKey() {
     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);
@@ -61,7 +61,7 @@ function test_eventMatchesKey() {
     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});
diff --git a/browser/base/content/test/general/browser_accesskeys.js b/browser/base/content/test/general/browser_accesskeys.js
index 780517bd6296..612914097b69 100644
--- a/browser/base/content/test/general/browser_accesskeys.js
+++ b/browser/base/content/test/general/browser_accesskeys.js
@@ -21,7 +21,7 @@ add_task(async function() {
   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);
diff --git a/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul b/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
index bdcb175e7be5..7f96144b0fd7 100644
--- a/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
+++ b/browser/base/content/test/general/browser_tab_dragdrop2_frame1.xul
@@ -81,12 +81,12 @@ function popupShown(event)
 
 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;
diff --git a/browser/base/content/test/general/browser_tabbar_big_widgets.js b/browser/base/content/test/general/browser_tabbar_big_widgets.js
index 7a4c4513845d..6a5c69cb356e 100644
--- a/browser/base/content/test/general/browser_tabbar_big_widgets.js
+++ b/browser/base/content/test/general/browser_tabbar_big_widgets.js
@@ -8,7 +8,7 @@ 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);
diff --git a/browser/base/content/test/permissions/browser_reservedkey.js b/browser/base/content/test/permissions/browser_reservedkey.js
index 779880980eb8..ddc5e71a0d24 100644
--- a/browser/base/content/test/permissions/browser_reservedkey.js
+++ b/browser/base/content/test/permissions/browser_reservedkey.js
@@ -1,6 +1,6 @@
 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");
@@ -13,7 +13,7 @@ add_task(async function test_reserved_shortcuts() {
     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");
@@ -26,7 +26,7 @@ add_task(async function test_reserved_shortcuts() {
     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");
@@ -41,7 +41,7 @@ add_task(async function test_reserved_shortcuts() {
   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);
 
diff --git a/browser/base/content/test/popupNotifications/browser_popupNotification_2.js b/browser/base/content/test/popupNotifications/browser_popupNotification_2.js
index b0f3ed7bb368..507eacb311e5 100644
--- a/browser/base/content/test/popupNotifications/browser_popupNotification_2.js
+++ b/browser/base/content/test/popupNotifications/browser_popupNotification_2.js
@@ -140,10 +140,10 @@ var tests = [
   { 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);
 
diff --git a/browser/base/content/test/popupNotifications/browser_popupNotification_3.js b/browser/base/content/test/popupNotifications/browser_popupNotification_3.js
index 2a970fcfc4ec..a5b256eec2c5 100644
--- a/browser/base/content/test/popupNotifications/browser_popupNotification_3.js
+++ b/browser/base/content/test/popupNotifications/browser_popupNotification_3.js
@@ -197,7 +197,7 @@ var tests = [
       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);
diff --git a/browser/base/content/test/tabPrompts/browser_closeTabSpecificPanels.js b/browser/base/content/test/tabPrompts/browser_closeTabSpecificPanels.js
index 2cc7fb8f8c9e..4f5a8e636411 100644
--- a/browser/base/content/test/tabPrompts/browser_closeTabSpecificPanels.js
+++ b/browser/base/content/test/tabPrompts/browser_closeTabSpecificPanels.js
@@ -10,9 +10,9 @@
 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);
diff --git a/browser/base/content/utilityOverlay.js b/browser/base/content/utilityOverlay.js
index 6320128e3087..9aab8c5d6db2 100644
--- a/browser/base/content/utilityOverlay.js
+++ b/browser/base/content/utilityOverlay.js
@@ -621,7 +621,7 @@ function createUserContextMenu(event, {
 
   // 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"));
@@ -632,7 +632,7 @@ function createUserContextMenu(event, {
 
     docfrag.appendChild(menuitem);
 
-    let menuseparator = document.createElement("menuseparator");
+    let menuseparator = document.createXULElement("menuseparator");
     docfrag.appendChild(menuseparator);
   }
 
@@ -641,7 +641,7 @@ function createUserContextMenu(event, {
       return;
     }
 
-    let menuitem = document.createElement("menuitem");
+    let menuitem = document.createXULElement("menuitem");
     menuitem.setAttribute("data-usercontextid", identity.userContextId);
     menuitem.setAttribute("label", ContextualIdentityService.getUserContextLabel(identity.userContextId));
 
@@ -662,9 +662,9 @@ function createUserContextMenu(event, {
   });
 
   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) {
diff --git a/browser/components/customizableui/CustomizeMode.jsm b/browser/components/customizableui/CustomizeMode.jsm
index 83d2ab6e89ba..4f91718fddaf 100644
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -816,7 +816,7 @@ CustomizeMode.prototype = {
       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);
     }
@@ -1361,7 +1361,7 @@ CustomizeMode.prototype = {
     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);
@@ -2650,7 +2650,7 @@ CustomizeMode.prototype = {
     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);
     }
diff --git a/browser/components/customizableui/content/panelUI.js b/browser/components/customizableui/content/panelUI.js
index 2ea56cb60dae..de37a92defe7 100644
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -376,7 +376,7 @@ const PanelUI = {
     } 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");
@@ -394,7 +394,7 @@ const PanelUI = {
       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);
@@ -512,7 +512,7 @@ const PanelUI = {
       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);
diff --git a/browser/components/customizableui/test/browser_918049_skipintoolbarset_dnd.js b/browser/components/customizableui/test/browser_918049_skipintoolbarset_dnd.js
index e7914fc73057..08a8335a32c9 100644
--- a/browser/components/customizableui/test/browser_918049_skipintoolbarset_dnd.js
+++ b/browser/components/customizableui/test/browser_918049_skipintoolbarset_dnd.js
@@ -10,7 +10,7 @@ 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");
diff --git a/browser/components/customizableui/test/browser_940013_registerToolbarNode_calls_registerArea.js b/browser/components/customizableui/test/browser_940013_registerToolbarNode_calls_registerArea.js
index b88c17bf07a2..c1761acf99f3 100644
--- a/browser/components/customizableui/test/browser_940013_registerToolbarNode_calls_registerArea.js
+++ b/browser/components/customizableui/test/browser_940013_registerToolbarNode_calls_registerArea.js
@@ -12,7 +12,7 @@ registerCleanupFunction(cleanup);
 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);
@@ -34,7 +34,7 @@ add_task(async function() {
 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);
diff --git a/browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js b/browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
index 55b3dffa3d3d..5a25f71dd87d 100644
--- a/browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
+++ b/browser/components/customizableui/test/browser_940307_panel_click_closure_handling.js
@@ -7,7 +7,7 @@
 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);
@@ -75,7 +75,7 @@ add_task(async function searchbar_in_panel() {
 });
 
 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");
diff --git 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
index d4c684810577..cd155da1328a 100644
--- 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
@@ -9,7 +9,7 @@ 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);
 
diff --git a/browser/components/customizableui/test/browser_978084_dragEnd_after_move.js b/browser/components/customizableui/test/browser_978084_dragEnd_after_move.js
index 1d142557643a..b6c7c7b5f2bc 100644
--- a/browser/components/customizableui/test/browser_978084_dragEnd_after_move.js
+++ b/browser/components/customizableui/test/browser_978084_dragEnd_after_move.js
@@ -11,7 +11,7 @@ var draggedItem;
 
 // 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");
@@ -26,7 +26,7 @@ add_task(async function() {
 
 // 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");
diff --git a/browser/components/customizableui/test/browser_981305_separator_insertion.js b/browser/components/customizableui/test/browser_981305_separator_insertion.js
index f1c918ad1fd1..1a8f4e8c0e9f 100644
--- a/browser/components/customizableui/test/browser_981305_separator_insertion.js
+++ b/browser/components/customizableui/test/browser_981305_separator_insertion.js
@@ -10,14 +10,14 @@ 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]);
   }
diff --git a/browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js b/browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
index f3ec519b22f7..31c0c8958138 100644
--- a/browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
+++ b/browser/components/customizableui/test/browser_981418-widget-onbeforecreated-handler.js
@@ -14,7 +14,7 @@ add_task(async function testAddOnBeforeCreatedWidget() {
     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;
diff --git a/browser/components/customizableui/test/browser_996635_remove_non_widgets.js b/browser/components/customizableui/test/browser_996635_remove_non_widgets.js
index 14a446eecad4..82597027178a 100644
--- a/browser/components/customizableui/test/browser_996635_remove_non_widgets.js
+++ b/browser/components/customizableui/test/browser_996635_remove_non_widgets.js
@@ -11,7 +11,7 @@ function test() {
   // 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");
diff --git a/browser/components/customizableui/test/browser_PanelMultiView.js b/browser/components/customizableui/test/browser_PanelMultiView.js
index 54fe4c691f19..73666cbff6dd 100644
--- a/browser/components/customizableui/test/browser_PanelMultiView.js
+++ b/browser/components/customizableui/test/browser_PanelMultiView.js
@@ -166,28 +166,28 @@ 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]);
   }
diff --git a/browser/components/customizableui/test/browser_bootstrapped_custom_toolbar.js b/browser/components/customizableui/test/browser_bootstrapped_custom_toolbar.js
index b5e669f0fd84..4f7e17bb98a7 100644
--- a/browser/components/customizableui/test/browser_bootstrapped_custom_toolbar.js
+++ b/browser/components/customizableui/test/browser_bootstrapped_custom_toolbar.js
@@ -10,7 +10,7 @@ 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, {
diff --git a/browser/components/customizableui/test/browser_insert_before_moved_node.js b/browser/components/customizableui/test/browser_insert_before_moved_node.js
index 10ff8324fdd6..0bf24d6ed919 100644
--- a/browser/components/customizableui/test/browser_insert_before_moved_node.js
+++ b/browser/components/customizableui/test/browser_insert_before_moved_node.js
@@ -12,7 +12,7 @@ add_task(async function() {
     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);
diff --git a/browser/components/downloads/content/allDownloadsView.js b/browser/components/downloads/content/allDownloadsView.js
index a0c3de22748f..f285adfda86e 100644
--- a/browser/components/downloads/content/allDownloadsView.js
+++ b/browser/components/downloads/content/allDownloadsView.js
@@ -38,7 +38,7 @@ XPCOMUtils.defineLazyModuleGetters(this, {
 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");
diff --git a/browser/components/downloads/content/downloads.js b/browser/components/downloads/content/downloads.js
index af6acca2f635..05c92eb8ffec 100644
--- a/browser/components/downloads/content/downloads.js
+++ b/browser/components/downloads/content/downloads.js
@@ -723,7 +723,7 @@ var DownloadsView = {
     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);
diff --git a/browser/components/extensions/ExtensionControlledPopup.jsm b/browser/components/extensions/ExtensionControlledPopup.jsm
index 0ee9ea70c50f..65ae03a02b00 100644
--- a/browser/components/extensions/ExtensionControlledPopup.jsm
+++ b/browser/components/extensions/ExtensionControlledPopup.jsm
@@ -270,7 +270,7 @@ class ExtensionControlledPopup {
   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");
 
@@ -295,7 +295,7 @@ class ExtensionControlledPopup {
         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);
diff --git a/browser/components/extensions/ExtensionPopups.jsm b/browser/components/extensions/ExtensionPopups.jsm
index 8a8e1407be12..45e3afe29533 100644
--- a/browser/components/extensions/ExtensionPopups.jsm
+++ b/browser/components/extensions/ExtensionPopups.jsm
@@ -386,7 +386,7 @@ 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");
@@ -434,7 +434,7 @@ class ViewPopup extends BasePopup {
     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");
diff --git a/browser/components/extensions/parent/ext-menus.js b/browser/components/extensions/parent/ext-menus.js
index 7a398bbfe467..de75fb1d9ab9 100644
--- a/browser/components/extensions/parent/ext-menus.js
+++ b/browser/components/extensions/parent/ext-menus.js
@@ -75,7 +75,7 @@ var gMenuBuilder = {
     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);
 
@@ -139,7 +139,7 @@ var gMenuBuilder = {
 
   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);
     }
@@ -183,18 +183,18 @@ var gMenuBuilder = {
     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;
   },
diff --git a/browser/components/extensions/parent/ext-tabs.js b/browser/components/extensions/parent/ext-tabs.js
index b8176e6ecf03..e75e3ec795ec 100644
--- a/browser/components/extensions/parent/ext-tabs.js
+++ b/browser/components/extensions/parent/ext-tabs.js
@@ -40,7 +40,7 @@ XPCOMUtils.defineLazyGetter(this, "tabHidePopup", () => {
     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);
     },
diff --git a/browser/components/extensions/test/browser/browser_ExtensionControlledPopup.js b/browser/components/extensions/test/browser/browser_ExtensionControlledPopup.js
index c3e6fa66e515..51bf9be4cb1b 100644
--- a/browser/components/extensions/test/browser/browser_ExtensionControlledPopup.js
+++ b/browser/components/extensions/test/browser/browser_ExtensionControlledPopup.js
@@ -16,7 +16,7 @@ ChromeUtils.defineModuleGetter(this, "ExtensionControlledPopup",
 
 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",
@@ -34,9 +34,9 @@ function createMarkup(doc) {
   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);
diff --git a/browser/components/places/content/browserPlacesViews.js b/browser/components/places/content/browserPlacesViews.js
index 62028378fb04..04885bf05d85 100644
--- a/browser/components/places/content/browserPlacesViews.js
+++ b/browser/components/places/content/browserPlacesViews.js
@@ -311,7 +311,7 @@ PlacesViewBase.prototype = {
   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";
@@ -340,17 +340,17 @@ PlacesViewBase.prototype = {
     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) {
@@ -375,7 +375,7 @@ PlacesViewBase.prototype = {
             }, () => undefined);
         }
 
-        let popup = document.createElement("menupopup");
+        let popup = document.createXULElement("menupopup");
         popup._placesNode = PlacesUtils.asContainer(aPlacesNode);
 
         if (!this._nativeView) {
@@ -431,7 +431,7 @@ PlacesViewBase.prototype = {
       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);
@@ -453,7 +453,7 @@ PlacesViewBase.prototype = {
       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);
     }
   },
@@ -470,7 +470,7 @@ PlacesViewBase.prototype = {
     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);
@@ -845,12 +845,12 @@ PlacesViewBase.prototype = {
       }
     } 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")
@@ -880,7 +880,7 @@ PlacesViewBase.prototype = {
       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);
 
@@ -891,7 +891,7 @@ PlacesViewBase.prototype = {
     if (node) {
       aPopup._endMarker = node;
     } else {
-      aPopup._endMarker = document.createElement("menuseparator");
+      aPopup._endMarker = document.createXULElement("menuseparator");
       aPopup._endMarker.hidden = true;
     }
     aPopup.appendChild(aPopup._endMarker);
@@ -1109,9 +1109,9 @@ PlacesToolbar.prototype = {
     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 || "");
 
@@ -1131,7 +1131,7 @@ PlacesToolbar.prototype = {
             }, () => undefined);
         }
 
-        let popup = document.createElement("menupopup");
+        let popup = document.createXULElement("menupopup");
         popup.setAttribute("placespopup", "true");
         button.appendChild(popup);
         popup._placesNode = PlacesUtils.asContainer(aChild);
@@ -2007,10 +2007,10 @@ PlacesPanelMenuView.prototype = {
     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);
@@ -2231,12 +2231,12 @@ this.PlacesPanelview = class extends PlacesViewBase {
     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));
@@ -2256,7 +2256,7 @@ this.PlacesPanelview = class extends PlacesViewBase {
   _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";
diff --git a/browser/components/places/content/editBookmark.js b/browser/components/places/content/editBookmark.js
index a53a8e75d59f..56c89a0f15e0 100644
--- a/browser/components/places/content/editBookmark.js
+++ b/browser/components/places/content/editBookmark.js
@@ -349,7 +349,7 @@ var gEditItemOverlay = {
     // 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";
@@ -760,9 +760,9 @@ var gEditItemOverlay = {
     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))
diff --git a/browser/components/places/tests/browser/browser_sort_in_library.js b/browser/components/places/tests/browser/browser_sort_in_library.js
index 5c7a7e6e9302..c5d92fc2a135 100644
--- a/browser/components/places/tests/browser/browser_sort_in_library.js
+++ b/browser/components/places/tests/browser/browser_sort_in_library.js
@@ -137,7 +137,7 @@ function setSort(aOrganizerWin, aTree, aUnsortFirst, aShouldFail, aCol, aDir) {
  */
 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");
 
diff --git a/browser/components/preferences/applicationManager.js b/browser/components/preferences/applicationManager.js
index f52caef40041..0d3b17ed044f 100644
--- a/browser/components/preferences/applicationManager.js
+++ b/browser/components/preferences/applicationManager.js
@@ -40,11 +40,11 @@ var gAppManagerDialog = {
       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);
     }
diff --git a/browser/components/preferences/containers.js b/browser/components/preferences/containers.js
index 0210596eb827..a2a08faf325b 100644
--- a/browser/components/preferences/containers.js
+++ b/browser/components/preferences/containers.js
@@ -89,12 +89,12 @@ let gContainersManager = {
   },
 
   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";
@@ -105,7 +105,7 @@ let gContainersManager = {
       }
 
       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);
 
@@ -117,12 +117,12 @@ let gContainersManager = {
   },
 
   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";
@@ -133,7 +133,7 @@ let gContainersManager = {
       }
 
       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);
diff --git a/browser/components/preferences/in-content/containers.js b/browser/components/preferences/in-content/containers.js
index 8ef05fd838ff..0b8bcfeb2d95 100644
--- a/browser/components/preferences/in-content/containers.js
+++ b/browser/components/preferences/in-content/containers.js
@@ -30,14 +30,14 @@ let gContainersPane = {
       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);
@@ -45,25 +45,25 @@ let gContainersPane = {
       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");
diff --git a/browser/components/preferences/in-content/extensionControlled.js b/browser/components/preferences/in-content/extensionControlled.js
index 97c80f406e8f..33a191e3317e 100644
--- a/browser/components/preferences/in-content/extensionControlled.js
+++ b/browser/components/preferences/in-content/extensionControlled.js
@@ -223,14 +223,14 @@ function showEnableExtensionMessage(settingName) {
     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);
diff --git a/browser/components/preferences/in-content/findInPage.js b/browser/components/preferences/in-content/findInPage.js
index 375c32394e8e..09488b955f3f 100644
--- a/browser/components/preferences/in-content/findInPage.js
+++ b/browser/components/preferences/in-content/findInPage.js
@@ -518,8 +518,8 @@ var gSearchResultsPane = {
     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);
diff --git a/browser/components/preferences/in-content/main.js b/browser/components/preferences/in-content/main.js
index d42faac78350..71cb0d8cb844 100644
--- a/browser/components/preferences/in-content/main.js
+++ b/browser/components/preferences/in-content/main.js
@@ -793,7 +793,7 @@ var gMainPane = {
 
     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);
@@ -1586,7 +1586,7 @@ var gMainPane = {
     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]);
@@ -1597,7 +1597,7 @@ var gMainPane = {
     }
 
     {
-      var askMenuItem = document.createElement("menuitem");
+      var askMenuItem = document.createXULElement("menuitem");
       askMenuItem.setAttribute("action", Ci.nsIHandlerInfo.alwaysAsk);
       let label;
       if (isFeedType(handlerInfo.type))
@@ -1617,7 +1617,7 @@ var gMainPane = {
     // 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);
@@ -1628,7 +1628,7 @@ var gMainPane = {
 
     // 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]);
@@ -1640,12 +1640,12 @@ var gMainPane = {
 
     // 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]);
@@ -1663,7 +1663,7 @@ var gMainPane = {
       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)
@@ -1704,7 +1704,7 @@ var gMainPane = {
           }
         }
         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);
@@ -1723,7 +1723,7 @@ var gMainPane = {
 
     // 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,
@@ -1744,7 +1744,7 @@ var gMainPane = {
       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);
@@ -1757,9 +1757,9 @@ var gMainPane = {
 
     // 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);
diff --git a/browser/components/preferences/languages.js b/browser/components/preferences/languages.js
index 08594fbd5008..a525771750f4 100644
--- a/browser/components/preferences/languages.js
+++ b/browser/components/preferences/languages.js
@@ -92,7 +92,7 @@ var gLanguagesDialog = {
       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,
@@ -133,8 +133,8 @@ var gLanguagesDialog = {
       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)
diff --git a/browser/components/preferences/permissions.js b/browser/components/preferences/permissions.js
index 27e231c0f9c6..4933b64c2535 100644
--- a/browser/components/preferences/permissions.js
+++ b/browser/components/preferences/permissions.js
@@ -266,13 +266,13 @@ var gPermissionManager = {
   },
 
   _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");
@@ -281,8 +281,8 @@ var gPermissionManager = {
     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");
diff --git a/browser/components/preferences/siteDataRemoveSelected.js b/browser/components/preferences/siteDataRemoveSelected.js
index b4fcb9b198f6..3a383de134d2 100644
--- a/browser/components/preferences/siteDataRemoveSelected.js
+++ b/browser/components/preferences/siteDataRemoveSelected.js
@@ -13,8 +13,8 @@ let gSiteDataRemoveSelected = {
     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);
diff --git a/browser/components/preferences/siteDataSettings.js b/browser/components/preferences/siteDataSettings.js
index 37b05930fb3c..a9b1cdf99407 100644
--- a/browser/components/preferences/siteDataSettings.js
+++ b/browser/components/preferences/siteDataSettings.js
@@ -26,16 +26,16 @@ let gSiteDataSettings = {
   _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")) {
diff --git a/browser/components/preferences/sitePermissions.js b/browser/components/preferences/sitePermissions.js
index 5a470bc60b99..d81bf13dac11 100644
--- a/browser/components/preferences/sitePermissions.js
+++ b/browser/components/preferences/sitePermissions.js
@@ -198,21 +198,21 @@ var gSitePermissionsManager = {
   },
 
   _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");
@@ -228,7 +228,7 @@ var gSitePermissionsManager = {
       } 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);
diff --git a/browser/components/uitour/UITour.jsm b/browser/components/uitour/UITour.jsm
index b3f3cd36eff9..41ffa58893d8 100644
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -1140,7 +1140,7 @@ var UITour = {
 
       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) {
diff --git a/browser/extensions/formautofill/FormAutofillDoorhanger.jsm b/browser/extensions/formautofill/FormAutofillDoorhanger.jsm
index 5931d973d079..f4056d19118e 100644
--- a/browser/extensions/formautofill/FormAutofillDoorhanger.jsm
+++ b/browser/extensions/formautofill/FormAutofillDoorhanger.jsm
@@ -236,7 +236,7 @@ let FormAutofillDoorhanger = {
    */
   _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");
@@ -257,19 +257,19 @@ let FormAutofillDoorhanger = {
     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);
 
@@ -301,7 +301,7 @@ let FormAutofillDoorhanger = {
       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");
@@ -383,7 +383,7 @@ let FormAutofillDoorhanger = {
         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);
diff --git a/browser/modules/ProcessHangMonitor.jsm b/browser/modules/ProcessHangMonitor.jsm
index 12599f95fc75..57e2fe89f29c 100644
--- a/browser/modules/ProcessHangMonitor.jsm
+++ b/browser/modules/ProcessHangMonitor.jsm
@@ -458,7 +458,7 @@ var ProcessHangMonitor = {
       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")`);
diff --git a/browser/modules/webrtcUI.jsm b/browser/modules/webrtcUI.jsm
index 2959ffdd1b23..ccf70bbc4a31 100644
--- a/browser/modules/webrtcUI.jsm
+++ b/browser/modules/webrtcUI.jsm
@@ -569,7 +569,7 @@ function prompt(aBrowser, aRequest) {
         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;
@@ -638,7 +638,7 @@ function prompt(aBrowser, aRequest) {
             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;
@@ -685,7 +685,7 @@ function prompt(aBrowser, aRequest) {
       }
 
       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);
@@ -910,14 +910,14 @@ function getGlobalIndicator() {
       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;
@@ -928,7 +928,7 @@ function getGlobalIndicator() {
       }
 
       // 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);
@@ -937,7 +937,7 @@ function getGlobalIndicator() {
       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));
@@ -957,7 +957,7 @@ function getGlobalIndicator() {
     _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.
@@ -965,7 +965,7 @@ function getGlobalIndicator() {
 
         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);
@@ -1011,7 +1011,7 @@ function onTabSharingMenuPopupShowing(e) {
     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);
@@ -1033,7 +1033,7 @@ function showOrCreateMenuForWindow(aWindow) {
   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));
@@ -1042,7 +1042,7 @@ function showOrCreateMenuForWindow(aWindow) {
     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 {
@@ -1051,7 +1051,7 @@ function showOrCreateMenuForWindow(aWindow) {
       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);
diff --git a/devtools/client/framework/browser-menus.js b/devtools/client/framework/browser-menus.js
index 16c3c3a13da1..e125e15cb375 100644
--- a/devtools/client/framework/browser-menus.js
+++ b/devtools/client/framework/browser-menus.js
@@ -48,7 +48,7 @@ function l10n(key) {
  * @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) {
@@ -214,7 +214,7 @@ function addTopLevelItems(doc) {
   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 {
diff --git a/devtools/client/framework/toolbox-hosts.js b/devtools/client/framework/toolbox-hosts.js
index b6f0e0ce1c81..c7fec8cfaf61 100644
--- a/devtools/client/framework/toolbox-hosts.js
+++ b/devtools/client/framework/toolbox-hosts.js
@@ -53,12 +53,12 @@ BottomHost.prototype = {
     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(
@@ -141,10 +141,10 @@ class SidebarHost {
     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";
 
diff --git a/devtools/client/framework/toolbox.js b/devtools/client/framework/toolbox.js
index 472d133c9884..63a92312c836 100644
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -999,7 +999,7 @@ Toolbox.prototype = {
       }
       const { toolId, shortcut, modifiers } = item;
 
-      const key = doc.createElement("key");
+      const key = doc.createXULElement("key");
 
       key.id = "key_" + toolId;
 
@@ -1020,7 +1020,7 @@ Toolbox.prototype = {
 
     // 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"));
@@ -1440,7 +1440,7 @@ Toolbox.prototype = {
     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.
@@ -1650,7 +1650,7 @@ Toolbox.prototype = {
         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);
diff --git a/dom/html/test/browser_bug1081537.js b/dom/html/test/browser_bug1081537.js
index 8ae53e4ffffd..798a87f50139 100644
--- a/dom/html/test/browser_bug1081537.js
+++ b/dom/html/test/browser_bug1081537.js
@@ -2,7 +2,7 @@
 // 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();
diff --git a/security/manager/pki/resources/content/certViewer.js b/security/manager/pki/resources/content/certViewer.js
index 10a12f433289..172a2586871d 100644
--- a/security/manager/pki/resources/content/certViewer.js
+++ b/security/manager/pki/resources/content/certViewer.js
@@ -59,7 +59,7 @@ function AddCertChain(node, chain) {
  */
 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");
@@ -177,7 +177,7 @@ function displayUsages(results) {
 }
 
 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);
@@ -185,13 +185,13 @@ function addChildrenToTree(parentTree, label, value, addTwistie) {
 }
 
 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);
diff --git a/security/manager/pki/resources/content/clientauthask.js b/security/manager/pki/resources/content/clientauthask.js
index 3807e2d96998..e7ab9194615d 100644
--- a/security/manager/pki/resources/content/clientauthask.js
+++ b/security/manager/pki/resources/content/clientauthask.js
@@ -81,7 +81,7 @@ function onLoad() {
   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",
diff --git a/security/manager/pki/resources/content/deletecert.js b/security/manager/pki/resources/content/deletecert.js
index eebfb688f956..a2fe53d04b20 100644
--- a/security/manager/pki/resources/content/deletecert.js
+++ b/security/manager/pki/resources/content/deletecert.js
@@ -94,8 +94,8 @@ function onLoad() {
   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);
diff --git a/security/manager/pki/resources/content/device_manager.js b/security/manager/pki/resources/content/device_manager.js
index 7873971048aa..6784b6436fb4 100644
--- a/security/manager/pki/resources/content/device_manager.js
+++ b/security/manager/pki/resources/content/device_manager.js
@@ -72,17 +72,17 @@ function SetFIPSButton() {
  */
 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);
@@ -257,13 +257,13 @@ function showModuleInfo() {
 // 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);
diff --git a/toolkit/components/apppicker/content/appPicker.js b/toolkit/components/apppicker/content/appPicker.js
index 72c5001cd062..a9a516562825 100644
--- a/toolkit/components/apppicker/content/appPicker.js
+++ b/toolkit/components/apppicker/content/appPicker.js
@@ -77,15 +77,15 @@ AppPicker.prototype =
             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);
 
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
index 6797d5dd1f8a..839de84cf2ab 100644
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
@@ -239,7 +239,7 @@ add_task(async function test_popup_url() {
                "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;
 
diff --git a/toolkit/components/normandy/lib/Heartbeat.jsm b/toolkit/components/normandy/lib/Heartbeat.jsm
index eaa0b685b6b1..b03ffd4e0ca4 100644
--- a/toolkit/components/normandy/lib/Heartbeat.jsm
+++ b/toolkit/components/normandy/lib/Heartbeat.jsm
@@ -173,12 +173,12 @@ var Heartbeat = class {
     // 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;
@@ -209,7 +209,7 @@ var Heartbeat = class {
     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);
 
@@ -220,7 +220,7 @@ var Heartbeat = class {
 
     // 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);
diff --git a/toolkit/components/passwordmgr/LoginManagerContextMenu.jsm b/toolkit/components/passwordmgr/LoginManagerContextMenu.jsm
index 826c358c46d7..91e4c3bffc17 100644
--- a/toolkit/components/passwordmgr/LoginManagerContextMenu.jsm
+++ b/toolkit/components/passwordmgr/LoginManagerContextMenu.jsm
@@ -41,7 +41,7 @@ var LoginManagerContextMenu = {
     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.
diff --git a/toolkit/components/passwordmgr/test/unit/test_context_menu.js b/toolkit/components/passwordmgr/test/unit/test_context_menu.js
index ea46672d139e..9d6a065e75b5 100644
--- a/toolkit/components/passwordmgr/test/unit/test_context_menu.js
+++ b/toolkit/components/passwordmgr/test/unit/test_context_menu.js
@@ -73,6 +73,7 @@ function createLoginsFragment(url, content, 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
   };
diff --git a/toolkit/content/widgets/autocomplete.xml b/toolkit/content/widgets/autocomplete.xml
index 6c8d9c0fb5d3..d85b15e35ed1 100644
--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -71,7 +71,7 @@
             popup = document.getElementById(popupId);
           }
           if (!popup) {
-            popup = document.createElement("panel");
+            popup = document.createXULElement("panel");
             popup.setAttribute("type", "autocomplete-richlistbox");
             popup.setAttribute("noautofocus", "true");
 
diff --git a/toolkit/content/widgets/datetimepopup.xml b/toolkit/content/widgets/datetimepopup.xml
index ec1e52ced13f..b8607276e50d 100644
--- a/toolkit/content/widgets/datetimepopup.xml
+++ b/toolkit/content/widgets/datetimepopup.xml
@@ -19,7 +19,7 @@
         <getter>
           let frame = this.querySelector("#dateTimePopupFrame");
           if (!frame) {
-            frame = this.ownerDocument.createElement("iframe");
+            frame = this.ownerDocument.createXULElement("iframe");
             frame.id = "dateTimePopupFrame";
             this.appendChild(frame);
           }
diff --git a/toolkit/content/widgets/videocontrols.xml b/toolkit/content/widgets/videocontrols.xml
index 27bf979bf363..86ea3a059824 100644
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1618,7 +1618,7 @@
 
         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);
diff --git a/toolkit/modules/InlineSpellChecker.jsm b/toolkit/modules/InlineSpellChecker.jsm
index f58bc1506b5a..9bfdc96cd958 100644
--- a/toolkit/modules/InlineSpellChecker.jsm
+++ b/toolkit/modules/InlineSpellChecker.jsm
@@ -143,7 +143,7 @@ InlineSpellChecker.prototype = {
         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);
@@ -213,7 +213,7 @@ InlineSpellChecker.prototype = {
 
     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");
diff --git a/toolkit/modules/PageMenu.jsm b/toolkit/modules/PageMenu.jsm
index 7ad9dace1176..0b3e0e105e83 100644
--- a/toolkit/modules/PageMenu.jsm
+++ b/toolkit/modules/PageMenu.jsm
@@ -105,7 +105,7 @@ PageMenu.prototype = {
             continue; // Ignore children without ids
           }
 
-          menuitem = document.createElement("menuitem");
+          menuitem = document.createXULElement("menuitem");
           if (child.checkbox) {
             menuitem.setAttribute("type", "checkbox");
             if (child.checked) {
@@ -127,16 +127,16 @@ PageMenu.prototype = {
           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);
diff --git a/toolkit/modules/SelectParentHelper.jsm b/toolkit/modules/SelectParentHelper.jsm
index 9a2d58cadf56..e69e5cd7d934 100644
--- a/toolkit/modules/SelectParentHelper.jsm
+++ b/toolkit/modules/SelectParentHelper.jsm
@@ -342,7 +342,7 @@ function populateChildren(menulist, options, selectedIndex, zoom,
 
   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;
@@ -449,7 +449,7 @@ function populateChildren(menulist, options, selectedIndex, zoom,
       && 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);
diff --git a/toolkit/mozapps/extensions/content/blocklist.js b/toolkit/mozapps/extensions/content/blocklist.js
index a5a3041ccfaa..77689ab53e00 100644
--- a/toolkit/mozapps/extensions/content/blocklist.js
+++ b/toolkit/mozapps/extensions/content/blocklist.js
@@ -30,7 +30,7 @@ function init() {
   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);
diff --git a/toolkit/mozapps/extensions/content/extensions.js b/toolkit/mozapps/extensions/content/extensions.js
index 5e0558eb0580..983f0c45f27a 100644
--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/toolkit/mozapps/extensions/content/extensions.js
@@ -1446,7 +1446,7 @@ function shouldShowVersionNumber(aAddon) {
 }
 
 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);
@@ -1704,7 +1704,7 @@ var gCategories = {
     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");
@@ -3019,10 +3019,10 @@ var gDetailView = {
       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");
diff --git a/toolkit/mozapps/preferences/fontbuilder.js b/toolkit/mozapps/preferences/fontbuilder.js
index 97e7ab6f56b3..e5689d32b002 100644
--- a/toolkit/mozapps/preferences/fontbuilder.js
+++ b/toolkit/mozapps/preferences/fontbuilder.js
@@ -38,10 +38,10 @@ var FontBuilder = {
       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
@@ -52,11 +52,11 @@ var FontBuilder = {
       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);
@@ -72,12 +72,12 @@ var FontBuilder = {
       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);

From 64ef5ce6b2a607a1180fca5a976a9559c5033fbb Mon Sep 17 00:00:00 2001
From: ahillier <ahillier@mozilla.com>
Date: Fri, 24 Aug 2018 23:30:48 +0000
Subject: [PATCH 14/14] Bug 1484030 - Implement chiclet animation for CFR
 r=Gijs,k88hudson

Differential Revision: https://phabricator.services.mozilla.com/D3804

--HG--
extra : moz-landing-system : lando
---
 browser/base/content/browser.css              |   8 +-
 browser/base/content/browser.xul              |   8 ++
 .../themes/shared/urlbar-searchbar.inc.css    | 111 ++++++++++++++++++
 3 files changed, 126 insertions(+), 1 deletion(-)

diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index 0dae54bfbc93..35ed7ee78ac9 100644
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -597,7 +597,9 @@ html|input.urlbar-scheme[textoverflow="start"]:not([focused]):valid {
   visibility: visible;
 }
 
-/* Fade out URL on overflow */
+/* Fade out URL on overflow
+   This mask may be overriden when a Contextual Feature Recommendation is shown,
+   see browser/themes/shared/urlbar-searchbar.inc.css for details */
 html|input.urlbar-input[textoverflow="end"]:not([focused]) {
   mask-image: linear-gradient(to left, transparent, black 3ch);
 }
@@ -606,6 +608,10 @@ html|input.urlbar-input[textoverflow="start"]:not([focused]) {
   mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch));
 }
 
+html|input.urlbar-input:not([focused]) {
+  mask-repeat: no-repeat;
+}
+
 /* Apply crisp rendering for favicons at exactly 2dppx resolution */
 @media (resolution: 2dppx) {
   .searchbar-engine-image {
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index b731217a7ac0..61b518a7947b 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -922,6 +922,14 @@ xmlns="http://www.w3.org/1999/xhtml"
                 <label id="extension" class="urlbar-display urlbar-display-extension" value="&urlbar.extension.label;"/>
               </box>
               <hbox id="page-action-buttons" context="pageActionContextMenu">
+                <hbox id="contextual-feature-recommendation" role="button" hidden="true">
+                  <hbox id="cfr-label-container">
+                    <label id="cfr-label"/>
+                  </hbox>
+                  <image id="cfr-button"
+                         class="urlbar-icon urlbar-page-action"
+                         role="presentation"/>
+                </hbox>
                 <hbox id="userContext-icons" hidden="true">
                   <label id="userContext-label"/>
                   <image id="userContext-indicator"/>
diff --git a/browser/themes/shared/urlbar-searchbar.inc.css b/browser/themes/shared/urlbar-searchbar.inc.css
index 8d9fa55f9f06..faaef327a308 100644
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -378,6 +378,117 @@
   animation-name: bookmark-animation-rtl;
 }
 
+/**
+ * Contextual Feature Recommendation
+ *
+ * Animate the recommendation icon to expand outwards and display a text label.
+ * Fake the effect of a smoothly expanding width without animating any widths
+ * by (continuously) animating only `mask-position-x` and `transform`.
+ *
+ * In a few places, transition a property using the timing-function `step-start`
+ * while collapsed and `step-end` while expanded in order to (discretely) modify
+ * the value while expanded and while transitioning in either direction.
+ *
+ * This UI is part of an experiment launching in LTR locales only. Fixing the
+ * RTL issues is tracked by Bug 1485725.
+ */
+
+:root {
+  --cfr-animation-duration: 0.35s;
+  --cfr-button-icon: url(resource://activity-stream/data/content/assets/glyph-webextension-16.svg);
+  --cfr-active-color: #0060df;
+}
+
+#contextual-feature-recommendation {
+  width: 28px;
+  margin-left: 0;
+  transition: margin-left step-end var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation {
+  margin-left: calc(var(--cfr-label-width) * -1);
+  transition: margin-left step-start var(--cfr-animation-duration);
+}
+
+#cfr-button {
+  list-style-image: var(--cfr-button-icon);
+  margin: -2px 0;
+  transition-property: fill, fill-opacity, transform;
+  transition-timing-function: ease-in-out;
+  transition-duration: var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] #cfr-button {
+  fill: white;
+  fill-opacity: 1;
+  background-color: transparent; /* Override hover background-color */
+  transform: translateX(calc(var(--cfr-label-width) * -1));
+}
+@keyframes cfr-button-fade-through-active-color {
+  33% {
+    fill-opacity: 1;
+    fill: var(--cfr-active-color);
+  }
+  67% {
+    fill-opacity: 1;
+    fill: var(--cfr-active-color);
+  }
+}
+#urlbar[cfr-recommendation-state="collapsed"] #cfr-button {
+  animation: cfr-button-fade-through-active-color calc(3 * var(--cfr-animation-duration));
+}
+
+#cfr-label-container {
+  width: 0;
+  overflow: hidden;
+  border-radius: 5px;
+  padding-left: 28px;
+  mask-image: linear-gradient(to right, transparent 0, black 0);
+  mask-position-x: var(--cfr-label-width);
+  mask-repeat: no-repeat;
+  transition-property: background-color, mask-position-x, width, margin-right;
+  transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
+  transition-duration: var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] #cfr-label-container {
+  width: calc(var(--cfr-label-width) + 28px);
+  background-color: var(--cfr-active-color);
+  margin-right: -28px;
+  mask-position-x: 0;
+  transition-timing-function: ease-in-out, ease-in-out, step-start, step-start;
+}
+
+#cfr-label {
+  margin: 0;
+  padding: 3px 5px 3px 0;
+  color: white;
+  mask-image: linear-gradient(to right, transparent 0, black 0);
+  mask-position-x: var(--cfr-label-width);
+  mask-repeat: no-repeat;
+  transition: mask-position-x ease-in-out var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] #cfr-label {
+  mask-position-x: 0;
+}
+
+/* Translate the dropmarker to give illusion of increasing width of the recommendation  */
+#urlbar[cfr-recommendation-state] .urlbar-history-dropmarker {
+  transition: transform ease-in-out var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] .urlbar-history-dropmarker {
+  transform: translateX(calc(var(--cfr-label-width) * -1));
+}
+
+/* Shift the url-bar text fading to stop the recommendation overlapping */
+#urlbar[cfr-recommendation-state] html|input.urlbar-input {
+  transition: mask-position-x ease-in-out var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] html|input.urlbar-input {
+  /* A mask-image is only defined for the url bar when text overflows. When
+     expanded, the right end of the url bar may be obscured without overflow so
+     we need to redefine the mask-image here, as well as the mask-position-x. */
+  mask-image: linear-gradient(to left, transparent, black 3ch);
+  mask-position-x: calc(var(--cfr-label-width) * -1);
+}
+
 /* Reader mode icon */
 
 #reader-mode-button {