Bug 1492582 - Use html root element in browser.xhtml and update styling to support html roots r=Gijs
authorBrendan Dahl <bdahl@mozilla.com>
Fri, 08 Nov 2019 23:33:43 +0000
changeset 501402 fa9ff3a262bc60d20ac657087579d7e2a0829e8f
parent 501401 038ebfdd141acdc7603d2378a832a572bb267686
child 501403 47030db7c541ef3e8102572d88a60289828dde62
push id36791
push usercsabou@mozilla.com
push dateSun, 10 Nov 2019 09:53:30 +0000
treeherdermozilla-central@72c52c0101cf [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1492582
milestone72.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1492582 - Use html root element in browser.xhtml and update styling to support html roots r=Gijs Differential Revision: https://phabricator.services.mozilla.com/D33558
browser/base/content/browser.css
browser/base/content/browser.xhtml
browser/themes/linux/browser.css
browser/themes/windows/browser-aero.css
browser/themes/windows/browser.css
browser/themes/windows/compacttheme.css
devtools/server/tests/mochitest/test_styles-applied.html
toolkit/content/xul.css
toolkit/themes/shared/findBar.inc.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1,25 +1,43 @@
 /* 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/. */
 
 @namespace html url("http://www.w3.org/1999/xhtml");
 
+:root,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: -moz-hidden-unscrollable;
+}
+
 :root {
+  text-rendering: optimizeLegibility;
+  min-height: 95px;
+  min-width: 95px;
+
+  /* variables */
   --panelui-subview-transition-duration: 150ms;
   --lwt-additional-images: none;
   --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
 
   --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
   --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
   --toolbar-color: var(--toolbar-non-lwt-textcolor);
 }
 
+:root:-moz-locale-dir(rtl) {
+  direction: rtl;
+}
+
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
   --toolbar-color: var(--lwt-text-color, inherit);
 
   background-color: var(--lwt-accent-color);
   color: var(--lwt-text-color);
 }
@@ -29,16 +47,22 @@
   background-repeat: no-repeat;
   background-position: right top !important;
 }
 
 :root:-moz-lwtheme:-moz-window-inactive {
   background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
 }
 
+body {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
 /* Set additional backgrounds alignment relative to toolbox */
 
 #navigator-toolbox:-moz-lwtheme {
   background-image: var(--lwt-additional-images);
   background-position: var(--lwt-background-alignment);
   background-repeat: var(--lwt-background-tiling);
 }
 
@@ -112,17 +136,16 @@ panelview[mainview] > .panel-header {
   transition-property: height;
   transition-timing-function: var(--animation-easing-function);
   transition-duration: var(--panelui-subview-transition-duration);
   will-change: height;
 }
 
 .panel-viewcontainer.offscreen {
   display: block;
-  position: absolute;
 }
 
 .panel-viewstack {
   overflow: visible;
   transition: height var(--panelui-subview-transition-duration);
 }
 
 @supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
@@ -253,17 +276,17 @@ toolbar:not([overflowing]) > .overflow-b
 toolbar[customizing] > .overflow-button {
   display: none;
 }
 
 toolbar[customizing] #whats-new-menu-button {
   display: none;
 }
 
-window:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button,
+:root:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button,
 #nav-bar[customizing] > .overflow-button {
   display: -moz-box;
 }
 
 /* The ids are ugly, but this should be reasonably performant, and
  * using a tagname as the last item would be less so.
  */
 #widget-overflow-list:empty + #widget-overflow-fixed-separator,
@@ -813,18 +836,17 @@ toolbarspring {
   }
 }
 
 menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
   display: none;
 }
 
 /* Hide extension toolbars that neglected to set the proper class */
-window[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar),
-window[chromehidden~="toolbar"] toolbar:not(#nav-bar):not(#TabsToolbar):not(#print-preview-toolbar):not(.chromeclass-menubar) {
+:root[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar) {
   display: none;
 }
 
 #navigator-toolbox ,
 #mainPopupSet {
   min-width: 1px;
 }
 
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -31,22 +31,22 @@
 <?xml-stylesheet href="chrome://browser/skin/places/editBookmark.css" type="text/css"?>
 
 # All DTD information is stored in a separate file so that it can be shared by
 # hiddenWindowMac.xhtml.
 <!DOCTYPE window [
 #include browser-doctype.inc
 ]>
 
-<window id="main-window"
+<html id="main-window"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:svg="http://www.w3.org/2000/svg"
         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"
+        xmlns="http://www.w3.org/1999/xhtml"
         title="&mainWindow.title;"
         title_normal="&mainWindow.title;"
 #ifdef XP_MACOSX
         title_privatebrowsing="&mainWindow.title;&mainWindow.titlemodifiermenuseparator;&mainWindow.titlePrivateBrowsingSuffix;"
         titledefault="&mainWindow.title;"
         titlemodifier=""
         titlemodifier_normal=""
         titlemodifier_privatebrowsing="&mainWindow.titlePrivateBrowsingSuffix;"
@@ -66,25 +66,23 @@
         windowtype="navigator:browser"
         macanimationtype="document"
         screenX="4" screenY="4"
         fullscreenbutton="true"
         sizemode="normal"
         retargetdocumentfocus="urlbar-input"
         persist="screenX screenY width height sizemode"
         data-l10n-sync="true">
-
-<linkset>
-  <html:link rel="localization" href="branding/brand.ftl"/>
-  <html:link rel="localization" href="browser/branding/sync-brand.ftl"/>
-  <html:link rel="localization" href="browser/browser.ftl"/>
-  <html:link rel="localization" href="browser/menubar.ftl"/>
-  <html:link rel="localization" href="browser/protectionsPanel.ftl"/>
-  <html:link rel="localization" href="browser/appmenu.ftl"/>
-</linkset>
+<head>
+  <link rel="localization" href="branding/brand.ftl"/>
+  <link rel="localization" href="browser/branding/sync-brand.ftl"/>
+  <link rel="localization" href="browser/browser.ftl"/>
+  <link rel="localization" href="browser/menubar.ftl"/>
+  <link rel="localization" href="browser/protectionsPanel.ftl"/>
+  <link rel="localization" href="browser/appmenu.ftl"/>
 
 # All JS files which are needed by browser.xhtml and other top level windows to
 # support MacOS specific features *must* go into the global-scripts.inc file so
 # that they can be shared with macWindow.inc.xul.
 #include global-scripts.inc
 
 <script>
   /* eslint-env mozilla/browser-window */
@@ -116,22 +114,22 @@
 
   // 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>
-
+</head>
+<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 # All sets except for popupsets (commands, keys, and stringbundles)
 # *must* go into the browser-sets.inc file so that they can be shared with other
 # top level windows in macWindow.inc.xul.
 #include browser-sets.inc
-
   <popupset id="mainPopupSet">
     <menupopup id="tabContextMenu"
                onpopupshowing="if (event.target == this) TabContextMenu.updateContextMenu(this);"
                onpopuphidden="if (event.target == this) TabContextMenu.contextTab = null;">
       <menuitem id="context_reloadTab" data-lazy-l10n-id="reload-tab"
                 oncommand="gBrowser.reloadTab(TabContextMenu.contextTab);"/>
       <menuitem id="context_reloadSelectedTabs" data-lazy-l10n-id="reload-tabs" hidden="true"
                 oncommand="gBrowser.reloadMultiSelectedTabs();"/>
@@ -681,17 +679,20 @@
                aria-live="off"
                flex="1"
                crop="end"/>
       </hbox>
     </hbox>
   </popupset>
   <box id="appMenu-viewCache" hidden="true"/>
 
-  <toolbox id="navigator-toolbox">
+  <!-- Temporary wrapper until we move away from XUL flex to fix fullscreen
+       layout-->
+  <box>
+  <toolbox id="navigator-toolbox" flex="1">
 
     <vbox id="titlebar">
       <!-- Menu -->
       <toolbar type="menubar" id="toolbar-menubar"
                class="browser-toolbar chromeclass-menubar titlebar-color"
                customizable="true"
                mode="icons"
 #ifdef MENUBAR_CAN_AUTOHIDE
@@ -1362,16 +1363,17 @@
                    flex="100"
                    persist="width">
         <toolbartabstop/>
         <searchbar id="searchbar" flex="1"/>
         <toolbartabstop/>
       </toolbaritem>
     </toolbarpalette>
   </toolbox>
+  </box>
 
   <hbox id="fullscr-toggler" hidden="true"/>
 
   <hbox flex="1" id="browser" renderroot="content">
     <vbox id="browser-border-start" hidden="true" layer="true"/>
     <vbox id="sidebar-box" hidden="true" class="chromeclass-extrachrome">
       <box id="sidebar-header" align="center">
         <toolbarbutton id="sidebar-switcher-target" flex="1" class="tabbable">
@@ -1412,9 +1414,10 @@
 # attribute, or it will fail to render properly in WebRender.
 #include popovers.inc
 
   <vbox id="browser-bottombox" layer="true" renderroot="content">
     <!-- gNotificationBox will be added here lazily. -->
   </vbox>
 
   <html:div id="a11y-announcement" role="alert"/>
-</window>
+</html:body>
+</html>
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -476,23 +476,23 @@ notification[value="translation"] menuli
    * See nsWindow::TopLevelWindowUseARGBVisual() for details. */
   @media (-moz-gtk-csd-transparent-background) {
     :root[tabsintitlebar][sizemode="normal"]:not(:-moz-lwtheme) {
       background-color: transparent;
       -moz-appearance: none;
     }
   }
 
-  :root[tabsintitlebar] > #navigator-toolbox > #titlebar {
+  :root[tabsintitlebar] #navigator-toolbox > #titlebar {
     -moz-appearance: -moz-window-titlebar-maximized;
   }
-  :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) > #navigator-toolbox > #titlebar {
+  :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #navigator-toolbox > #titlebar {
     -moz-appearance: -moz-window-titlebar;
   }
-  :root[tabsintitlebar]:not([inDOMFullscreen]) > #navigator-toolbox > #titlebar:-moz-lwtheme {
+  :root[tabsintitlebar]:not([inDOMFullscreen]) #navigator-toolbox > #titlebar:-moz-lwtheme {
     visibility: hidden;
   }
   :root[tabsintitlebar]:not([inDOMFullscreen]) #toolbar-menubar:-moz-lwtheme,
   :root[tabsintitlebar]:not([inDOMFullscreen]) #TabsToolbar:-moz-lwtheme {
     visibility: visible;
   }
 
   /* When temporarily showing the menu bar, make it at least as tall as the tab
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -4,18 +4,18 @@
 
 %filter substitution
 %define glassActiveBorderColor rgb(37, 44, 51)
 %define glassInactiveBorderColor rgb(102, 102, 102)
 
 @media (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8) {
   @media (-moz-windows-classic: 0) {
-    #main-window[sizemode="normal"] > #navigator-toolbox > #titlebar > #toolbar-menubar:not([autohide="true"]) > #menubar-items,
-    #main-window[sizemode="normal"] > #navigator-toolbox > #titlebar > #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
+    #main-window[sizemode="normal"] #navigator-toolbox > #titlebar > #toolbar-menubar:not([autohide="true"]) > #menubar-items,
+    #main-window[sizemode="normal"] #navigator-toolbox > #titlebar > #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
       margin-top: 1px;
     }
     /**
      * Except for Windows 8, Windows 7 Aero and Windows 7 Aero Basic, the
      * -moz-window-button-box appearance on the .titlebar-buttonbox adds an
      * unwanted margin at the top of the button box.
      *
      * For Windows 8 and Windows Aero (which both use the compositor):
@@ -283,17 +283,17 @@
     #appcontent {
       -moz-appearance: -moz-win-exclude-glass;
     }
   }
 
   @media (-moz-os-version: windows-win8) {
     /* Artificially draw window borders that are covered by lwtheme, see bug 591930.
      * Borders for win7 are below, win10 doesn't need them. */
-    #main-window[sizemode="normal"] > #navigator-toolbox:-moz-lwtheme {
+    #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
       border-top: 1px solid @glassShadowColor@;
     }
   }
 
   :root[darkwindowframe="true"]:not(:-moz-window-inactive):not(:-moz-lwtheme) {
     color: white;
   }
 
@@ -357,45 +357,45 @@
   #main-menubar:not(:-moz-lwtheme):not(:-moz-window-inactive) {
     background-color: rgba(255,255,255,.5);
     color: black;
     border-radius: 4px;
   }
 
   /* Artificially draw window borders that are covered by lwtheme, see bug 591930.
    * We use a different border for win8, and this is not necessary on win10+ */
-  #main-window[sizemode="normal"] > #navigator-toolbox:-moz-lwtheme {
+  #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
     border-top: 1px solid @glassActiveBorderColor@;
     padding-top: 1px;
     box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
   }
 
-  #main-window[sizemode="normal"] > #navigator-toolbox:-moz-lwtheme:-moz-window-inactive {
+  #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme:-moz-window-inactive {
     border-top-color: @glassInactiveBorderColor@;
   }
 }
 
 /* Aero Basic */
 @media (-moz-windows-compositor: 0) {
   @media (-moz-windows-default-theme) {
     :root {
       background-color: rgb(185,209,234);
     }
     :root:-moz-window-inactive {
       background-color: rgb(215,228,242);
     }
 
     /* Render a window top border for lwthemes: */
-    #main-window[tabsintitlebar][sizemode="normal"] > #navigator-toolbox:-moz-lwtheme {
+    #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
       background-image: linear-gradient(to bottom,
             @glassActiveBorderColor@ 0, @glassActiveBorderColor@ 1px,
             rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px);
     }
 
-    #main-window[tabsintitlebar][sizemode="normal"] > #navigator-toolbox:-moz-lwtheme:-moz-window-inactive {
+    #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme:-moz-window-inactive {
       background-image: linear-gradient(to bottom,
             @glassInactiveBorderColor@ 0, @glassInactiveBorderColor@ 1px,
             rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px);
     }
   }
 
   #print-preview-toolbar:not(:-moz-lwtheme) {
     -moz-appearance: -moz-win-browsertabbar-toolbox;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -211,17 +211,17 @@
     background-size: auto 200%;
   }
 
   :root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
     background-image: linear-gradient(transparent, InactiveCaption);
   }
 
   /* Add a window top border for webextension themes */
-  :root[tabsintitlebar][sizemode="normal"] > #navigator-toolbox:-moz-lwtheme {
+  :root[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
     background-image: linear-gradient(to bottom,
           ThreeDLightShadow 0, ThreeDLightShadow 1px,
           ThreeDHighlight 1px, ThreeDHighlight 2px,
           ActiveBorder 2px, ActiveBorder 4px, transparent 4px);
   }
 
   :root[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
     color: inherit;
@@ -247,21 +247,21 @@
 }
 
 #browser-bottombox:not(:-moz-lwtheme) {
   background-color: -moz-dialog;
 }
 
 /* ::::: titlebar ::::: */
 
-#main-window[tabsintitlebar][sizemode="normal"] > #navigator-toolbox > #titlebar {
+#main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox > #titlebar {
   -moz-appearance: -moz-window-titlebar;
 }
 
-#main-window[tabsintitlebar][sizemode="maximized"] > #navigator-toolbox > #titlebar {
+#main-window[tabsintitlebar][sizemode="maximized"] #navigator-toolbox > #titlebar {
   -moz-appearance: -moz-window-titlebar-maximized;
 }
 
 @media (-moz-windows-compositor: 0) {
   /**
    * Anytime we're not using the compositor on Windows, the -moz-window-titlebar
    * and -moz-window-titlebar-maximized values for -moz-appearance override
    * backgrounds supplied by lwthemes. We make the #titlebar itself hidden, but
@@ -273,17 +273,17 @@
   }
   :root:not([inDOMFullscreen]) #toolbar-menubar:-moz-lwtheme,
   :root:not([inDOMFullscreen]) #TabsToolbar:-moz-lwtheme {
     visibility: visible;
   }
 }
 
 @media (-moz-windows-classic) {
-  #main-window[tabsintitlebar][sizemode="normal"] > #navigator-toolbox > #titlebar > #toolbar-menubar {
+  #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox > #titlebar > #toolbar-menubar {
     margin-top: 4px;
   }
 }
 
 .titlebar-buttonbox {
   /* For all Windows configurations except for Windows Aero and Windows Aero Basic,
    * the default -moz-appearance of -moz-window-button-box and
    * -moz-window-button-box-maximized adds unwanted margins to the button box. We
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -5,17 +5,17 @@
 %include ../shared/compacttheme.inc.css
 
 /* The window background is white due to no accentcolor in the lightweight
    theme. It can't be changed to transparent when there is no compositor
    (Win 7 in classic / basic theme), or else dragging and focus become
    broken. So instead just show the normal titlebar in that case, and override
    the window color as transparent when the compositor is available. */
 @media (-moz-windows-compositor: 0) {
-  :root[tabsintitlebar]:not([inDOMFullscreen]) > #navigator-toolbox > #titlebar:-moz-lwtheme {
+  :root[tabsintitlebar]:not([inDOMFullscreen]) #navigator-toolbox > #titlebar:-moz-lwtheme {
     visibility: visible;
   }
 
   /* Prevent accent color overriding the window background for
    * light and dark theme on Aero Basic. This is copied from browser-aero.css. */
   @media (-moz-windows-default-theme) {
     :root {
       background-color: rgb(185,209,234) !important;
--- a/devtools/server/tests/mochitest/test_styles-applied.html
+++ b/devtools/server/tests/mochitest/test_styles-applied.html
@@ -77,17 +77,17 @@ addTest(function inheritedSystemStyles()
     // If our system stylesheets are prone to churn, this might be a fragile
     // test.  If you're here because of that I apologize, file a bug
     // and we can find a different way to test.
 
     ok(!applied[1].inherited, "Entry 1 should not be inherited");
     ok(!applied[1].rule.parentStyleSheet.system, "Entry 1 should be a system style");
     is(applied[1].rule.type, 1, "Entry 1 should be a rule style");
 
-    is(applied.length, 12, "Should have 12 rules.");
+    is(applied.length, 13, "Should have 13 rules.");
   }).then(runNextTest));
 });
 
 addTest(function noInheritedStyles() {
   promiseDone(gWalker.querySelector(gWalker.rootNode, "#test-node").then(node => {
     return gStyles.getApplied(node, { inherited: false, filter: "user" });
   }).then(applied => {
     ok(!applied[0].inherited, "Entry 0 should be uninherited");
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -19,38 +19,44 @@
  * HAVING YOUR CHANGES REVIEWED BY enndeakin@gmail.com
  */
 
 @import url("chrome://global/skin/tooltip.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
 @namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
 
+/* TODO: investigate unifying these two root selectors
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1592344
+ */
+*|*:root {
+  --animation-easing-function: cubic-bezier(.07, .95, 0, 1);
+}
+
 :root {
   text-rendering: optimizeLegibility;
   -moz-control-character-visibility: visible;
-  --animation-easing-function: cubic-bezier(.07, .95, 0, 1);
 }
 
 :root:-moz-locale-dir(rtl) {
   direction: rtl;
 }
 
 /* ::::::::::
    :: Rules for 'hiding' portions of the chrome for special
    :: kinds of windows (not JUST browser windows) with toolbars
    ::::: */
 
-window[chromehidden~="menubar"] .chromeclass-menubar,
-window[chromehidden~="directories"] .chromeclass-directories,
-window[chromehidden~="status"] .chromeclass-status,
-window[chromehidden~="extrachrome"] .chromeclass-extrachrome,
-window[chromehidden~="location"] .chromeclass-location,
-window[chromehidden~="location"][chromehidden~="toolbar"] .chromeclass-toolbar,
-window[chromehidden~="toolbar"] .chromeclass-toolbar-additional {
+*|*:root[chromehidden~="menubar"] .chromeclass-menubar,
+*|*:root[chromehidden~="directories"] .chromeclass-directories,
+*|*:root[chromehidden~="status"] .chromeclass-status,
+*|*:root[chromehidden~="extrachrome"] .chromeclass-extrachrome,
+*|*:root[chromehidden~="location"] .chromeclass-location,
+*|*:root[chromehidden~="location"][chromehidden~="toolbar"] .chromeclass-toolbar,
+*|*:root[chromehidden~="toolbar"] .chromeclass-toolbar-additional {
   display: none;
 }
 
 /* ::::::::::
    :: Rules for forcing direction for entry and display of URIs
    :: or URI elements
    ::::: */
 
--- a/toolkit/themes/shared/findBar.inc.css
+++ b/toolkit/themes/shared/findBar.inc.css
@@ -36,17 +36,17 @@ findbar[noanim] {
 .findbar-closebutton {
   padding: 0 8px;
 }
 
 /* Search field */
 
 /* Don't apply theme colors on findbar when header image is applied to avoid
 contrast issues, see bug 1506913 */
-:root[lwtheme-image] findbar {
+html|html[lwtheme-image] findbar {
   --lwt-toolbar-field-background-color: initial;
   --lwt-toolbar-field-color: initial;
   --lwt-toolbar-field-border-color: initial;
   --lwt-toolbar-field-focus: initial;
   --lwt-toolbar-field-focus-color: initial;
 }
 
 html|input.findbar-textbox {