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 8d0253efc5b6..4c0d40af2548 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 @@ -121,12 +119,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-aero.css b/browser/themes/windows/browser-aero.css index 58b595c46fb0..682ce221fda0 100644 --- 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); diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index 533e4e1ed82a..19b624809d9e 100644 --- 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; } } diff --git a/browser/themes/windows/compacttheme.css b/browser/themes/windows/compacttheme.css index 3f98c88ebfd3..36d14cebc1c2 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]) #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;