From 0a467b3fbd19f5b11aa7fdf51530442204005cee Mon Sep 17 00:00:00 2001 From: Brendan Dahl Date: Thu, 7 Nov 2019 16:20:55 +0000 Subject: [PATCH] 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 --- browser/base/content/browser.css | 30 ++++++++++++++++--- browser/base/content/browser.xhtml | 29 +++++++++--------- browser/themes/linux/browser.css | 6 ++-- browser/themes/windows/browser.css | 6 ++-- browser/themes/windows/compacttheme.css | 2 +- .../tests/mochitest/test_styles-applied.html | 2 +- toolkit/content/xul.css | 22 +++++++++----- toolkit/themes/shared/findBar.inc.css | 2 +- 8 files changed, 63 insertions(+), 36 deletions(-) diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css index dddd4769cf5c..04bbf26cab08 100644 --- 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; } diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml index f0a75b93e19e..9909091f0296 100644 --- a/browser/base/content/browser.xhtml +++ b/browser/base/content/browser.xhtml @@ -36,12 +36,12 @@ #include browser-doctype.inc ]> - - - - - - - - - - - + + + + + + + + # 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 @@ -122,12 +120,12 @@ window.addEventListener("DOMContentLoaded", gBrowserInit.onDOMContentLoaded.bind(gBrowserInit), { once: true }); - + + # 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 - - + + diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index 9b2c54594c0b..7179b7b34be0 100644 --- 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, diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index 533e4e1ed82a..15294496cf72 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -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; } } diff --git a/browser/themes/windows/compacttheme.css b/browser/themes/windows/compacttheme.css index 3f98c88ebfd3..73cac9f00e10 100644 --- 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]) > body > #navigator-toolbox > #titlebar:-moz-lwtheme { visibility: visible; } diff --git a/devtools/server/tests/mochitest/test_styles-applied.html b/devtools/server/tests/mochitest/test_styles-applied.html index 273df9dc5f3c..8397e3a53832 100644 --- 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)); }); diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css index 80f557e8755d..cab6de383999 100644 --- 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; } diff --git a/toolkit/themes/shared/findBar.inc.css b/toolkit/themes/shared/findBar.inc.css index cf08c96136ed..4c71e8711a4f 100644 --- 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;