Bug 1492582 - Use html root element in browser.xhtml and update styling to support html roots r=Gijs
☠☠ backed out by 1f8651278127 ☠ ☠
authorBrendan Dahl <bdahl@mozilla.com>
Thu, 07 Nov 2019 16:20:55 +0000
changeset 501115 e0e56a195659d800f8583bc5b8ea4f18c21e9ae5
parent 501114 0e1787464553e2acfcf630a03775b405b30fc4e7
child 501116 f05dfbeff17b6fcad6815daa15e35c6f6d7b0792
push id100004
push userbdahl@mozilla.com
push dateThu, 07 Nov 2019 16:33:00 +0000
treeherderautoland@1484255e5f4d [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.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,26 +66,24 @@
         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"/>
-  <html:link rel="localization" href="browser/readerView.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"/>
+  <link rel="localization" href="browser/readerView.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 */
@@ -117,22 +115,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();"/>
@@ -1413,9 +1411,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.css
+++ b/browser/themes/windows/browser.css
@@ -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]) > body > #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 {