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 --HG-- extra : moz-landing-system : lando
2019-11-08 23:33:43 +00:00 · 2019-11-08 23:33:43 +00:00 · 2e2ca37f8d
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@ -4,7 +4,21 @@

@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;
@ -15,6 +29,10 @@
  --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;
@ -34,6 +52,12 @@
  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 {
@ -117,7 +141,6 @@ panelview[mainview] > .panel-header {

 .panel-viewcontainer.offscreen {
  display: block;
-  position: absolute;
 }

 .panel-viewstack {
@ -258,7 +281,7 @@ 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;
 }
@ -818,8 +841,7 @@ menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
 }

 /* 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;
 }

--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@ -36,12 +36,12 @@
 #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
@ -71,15 +71,13 @@
        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
@ -121,12 +119,12 @@
  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);"
@ -686,7 +684,10 @@
  </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 -->
@ -1367,6 +1368,7 @@
      </toolbaritem>
    </toolbarpalette>
  </toolbox>
+  </box>

  <hbox id="fullscr-toggler" hidden="true"/>

@ -1417,4 +1419,5 @@
  </vbox>

  <html:div id="a11y-announcement" role="alert"/>
-</window>
+</html:body>
+</html>
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@ -481,13 +481,13 @@ notification[value="translation"] menulist > .menulist-dropmarker {
    }
  }

-  :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,
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@ -9,8 +9,8 @@
@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;
    }
    /**
@ -288,7 +288,7 @@
  @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@;
    }
  }
@ -362,13 +362,13 @@

  /* 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@;
  }
 }
@ -384,13 +384,13 @@
    }

    /* 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);
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@ -216,7 +216,7 @@
  }

  /* 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,
@ -252,11 +252,11 @@

 /* ::::: 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;
 }

@ -278,7 +278,7 @@
 }

@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;
  }
 }
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@ -10,7 +10,7 @@
   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;
  }

--- a/devtools/server/tests/mochitest/test_styles-applied.html
+++ b/devtools/server/tests/mochitest/test_styles-applied.html
@ -82,7 +82,7 @@ addTest(function inheritedSystemStyles() {
    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));
 });

--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@ -24,10 +24,16 @@
@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) {
@ -39,13 +45,13 @@
   :: 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;
 }

--- a/toolkit/themes/shared/findBar.inc.css
+++ b/toolkit/themes/shared/findBar.inc.css
@ -41,7 +41,7 @@ findbar[noanim] {

 /* 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;