diff --git a/browser/base/content/defaultthemes/compact.header.png b/browser/base/content/defaultthemes/compact.header.png new file mode 100644 index 000000000000..e4e8dcaa3b3c Binary files /dev/null and b/browser/base/content/defaultthemes/compact.header.png differ diff --git a/browser/base/content/test/general/browser_compacttheme.js b/browser/base/content/test/general/browser_compacttheme.js index 95cc80ac08ca..8401dbf6cf16 100644 --- a/browser/base/content/test/general/browser_compacttheme.js +++ b/browser/base/content/test/general/browser_compacttheme.js @@ -46,6 +46,7 @@ function dummyLightweightTheme(id) { return { id, name: id, + headerURL: "resource:///chrome/browser/content/browser/defaultthemes/compact.header.png", iconURL: "resource:///chrome/browser/content/browser/defaultthemes/light.icon.svg", textcolor: "red", accentcolor: "blue" diff --git a/browser/base/jar.mn b/browser/base/jar.mn index b89de810d507..0fd1d9879e51 100644 --- a/browser/base/jar.mn +++ b/browser/base/jar.mn @@ -94,6 +94,7 @@ browser.jar: content/browser/defaultthemes/5.header.png (content/defaultthemes/5.header.png) content/browser/defaultthemes/5.icon.jpg (content/defaultthemes/5.icon.jpg) content/browser/defaultthemes/5.preview.jpg (content/defaultthemes/5.preview.jpg) + content/browser/defaultthemes/compact.header.png (content/defaultthemes/compact.header.png) content/browser/defaultthemes/dark.icon.svg (content/defaultthemes/dark.icon.svg) content/browser/defaultthemes/light.icon.svg (content/defaultthemes/light.icon.svg) content/browser/newtab/newTab.xhtml (content/newtab/newTab.xhtml) diff --git a/browser/components/nsBrowserGlue.js b/browser/components/nsBrowserGlue.js index 4e19a8f9d5a9..d1e0992f726b 100644 --- a/browser/components/nsBrowserGlue.js +++ b/browser/components/nsBrowserGlue.js @@ -700,6 +700,7 @@ BrowserGlue.prototype = { id: "firefox-compact-light@mozilla.org", name: gBrowserBundle.GetStringFromName("lightTheme.name"), description: gBrowserBundle.GetStringFromName("lightTheme.description"), + headerURL: "resource:///chrome/browser/content/browser/defaultthemes/compact.header.png", iconURL: "resource:///chrome/browser/content/browser/defaultthemes/light.icon.svg", textcolor: "black", accentcolor: "white", @@ -709,6 +710,7 @@ BrowserGlue.prototype = { id: "firefox-compact-dark@mozilla.org", name: gBrowserBundle.GetStringFromName("darkTheme.name"), description: gBrowserBundle.GetStringFromName("darkTheme.description"), + headerURL: "resource:///chrome/browser/content/browser/defaultthemes/compact.header.png", iconURL: "resource:///chrome/browser/content/browser/defaultthemes/dark.icon.svg", textcolor: "white", accentcolor: "black", diff --git a/browser/themes/shared/compacttheme.inc.css b/browser/themes/shared/compacttheme.inc.css index b574ed65bc1d..b2ee7923d6a9 100644 --- a/browser/themes/shared/compacttheme.inc.css +++ b/browser/themes/shared/compacttheme.inc.css @@ -7,6 +7,8 @@ there are overrides for each platform in their compacttheme.css files. */ :root:-moz-lwtheme { + text-shadow: none; + --toolbar-bgcolor: var(--chrome-secondary-background-color); --toolbar-gbimage: none; --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor); @@ -107,3 +109,9 @@ toolbar[brighttext] .toolbarbutton-1 { #urlbar-zoom-button:-moz-lwtheme-brighttext:hover:active { background-color: rgba(255,255,255,.3); } + +.tab-icon-sound[soundplaying], +.tab-icon-sound[muted] { + filter: none !important; /* removes drop-shadow filter */ +} + diff --git a/browser/themes/shared/customizableui/customizeMode.inc.css b/browser/themes/shared/customizableui/customizeMode.inc.css index 7f703fca6a42..0c6509117448 100644 --- a/browser/themes/shared/customizableui/customizeMode.inc.css +++ b/browser/themes/shared/customizableui/customizeMode.inc.css @@ -19,7 +19,7 @@ text-shadow: none; } -:root[lwtheme-image] #customization-container { +#customization-container:-moz-lwtheme { background-color: transparent; background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-non-lwt-bgcolor) 45px); } @@ -34,7 +34,7 @@ margin: 20px 20px 15px; } -:root[lwtheme-image] #customization-header { +#customization-header:-moz-lwtheme { text-shadow: 0 0 1em var(--toolbar-non-lwt-bgcolor), 0 0 1em var(--toolbar-non-lwt-bgcolor), 0 0 .5em var(--toolbar-non-lwt-bgcolor); diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css index 1c2de93758b7..5c9027562399 100644 --- a/browser/themes/shared/tabs.inc.css +++ b/browser/themes/shared/tabs.inc.css @@ -411,15 +411,15 @@ tabbrowser { list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg); } -:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[soundplaying], -:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[muted], -:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[activemedia-blocked] { +.tab-icon-sound:-moz-lwtheme-darktext[soundplaying], +.tab-icon-sound:-moz-lwtheme-darktext[muted], +.tab-icon-sound:-moz-lwtheme-darktext[activemedia-blocked] { filter: drop-shadow(1px 1px 1px white); } -:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[soundplaying], -:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[muted], -:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] { +.tab-icon-sound:-moz-lwtheme-brighttext[soundplaying], +.tab-icon-sound:-moz-lwtheme-brighttext[muted], +.tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] { filter: drop-shadow(1px 1px 1px black); } diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css index 3429001e7d30..2fce0e204007 100644 --- a/browser/themes/windows/browser-aero.css +++ b/browser/themes/windows/browser-aero.css @@ -106,19 +106,19 @@ list-style-image: url(chrome://browser/skin/window-controls/close.svg); } - :root[lwtheme-image] .titlebar-button { + .titlebar-button:-moz-lwtheme { -moz-context-properties: unset; } - :root[lwtheme-image] #titlebar-min { + #titlebar-min:-moz-lwtheme { list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg); } - :root[lwtheme-image] #titlebar-max { + #titlebar-max:-moz-lwtheme { list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg); } - :root[lwtheme-image][sizemode="maximized"] #titlebar-max { + :root[sizemode="maximized"] #titlebar-max:-moz-lwtheme { list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg); } - :root[lwtheme-image] #titlebar-close { + #titlebar-close:-moz-lwtheme { list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg); } diff --git a/browser/themes/windows/compacttheme.css b/browser/themes/windows/compacttheme.css index e0cea94defed..0576bdc0969a 100644 --- a/browser/themes/windows/compacttheme.css +++ b/browser/themes/windows/compacttheme.css @@ -31,6 +31,10 @@ } } +#toolbar-menubar { + text-shadow: none !important; +} + @media (-moz-os-version: windows-win7) { @media (-moz-windows-default-theme) { /* Always show light toolbar elements on aero surface. */ @@ -61,6 +65,11 @@ --toolbarbutton-icon-fill-opacity: 1; } + /* Make the menubar text readable on aero glass (copied from browser-aero.css). */ + #toolbar-menubar { + text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4); + } + #main-menubar:not(:-moz-window-inactive) { background-color: rgba(255,255,255,.5); color: black; @@ -146,3 +155,23 @@ box-shadow: none !important; padding-top: 0 !important; } + +@media (-moz-os-version: windows-win10) { + .titlebar-button:-moz-lwtheme { + -moz-context-properties: stroke; + stroke: currentColor; + } + #titlebar-min:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/window-controls/minimize.svg); + } + #titlebar-max:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/window-controls/maximize.svg); + } + :root[sizemode="maximized"] #titlebar-max:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/window-controls/restore.svg); + } + #titlebar-close:-moz-lwtheme { + list-style-image: url(chrome://browser/skin/window-controls/close.svg); + } +} + diff --git a/toolkit/components/extensions/ext-theme.js b/toolkit/components/extensions/ext-theme.js index aee44d9219e9..dfbd60a93633 100644 --- a/toolkit/components/extensions/ext-theme.js +++ b/toolkit/components/extensions/ext-theme.js @@ -84,8 +84,9 @@ class Theme { this.loadProperties(details.properties); } - // Lightweight themes require accentcolor and textcolor to be defined. - if (this.lwtStyles.accentcolor && + // Lightweight themes require all properties to be defined. + if (this.lwtStyles.headerURL && + this.lwtStyles.accentcolor && this.lwtStyles.textcolor) { if (this.windowId) { windowOverrides.set(this.windowId, this); diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_lwtsupport.js b/toolkit/components/extensions/test/browser/browser_ext_themes_lwtsupport.js index 603bb9de0393..275df5e27c3a 100644 --- a/toolkit/components/extensions/test/browser/browser_ext_themes_lwtsupport.js +++ b/toolkit/components/extensions/test/browser/browser_ext_themes_lwtsupport.js @@ -30,7 +30,6 @@ add_task(async function test_support_LWT_properties() { let style = window.getComputedStyle(docEl); Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set"); - Assert.ok(docEl.hasAttribute("lwtheme-image"), "LWT image attribute should be set"); Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright", "LWT text color attribute should be set"); @@ -43,53 +42,9 @@ add_task(async function test_support_LWT_properties() { await extension.unload(); Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); - Assert.ok(!docEl.hasAttribute("lwtheme-image"), "LWT image attribute should not be set"); }); -add_task(async function test_LWT_image_attribute() { - let extension = ExtensionTestUtils.loadExtension({ - manifest: { - "theme": { - "colors": { - "accentcolor": ACCENT_COLOR, - "textcolor": TEXT_COLOR, - }, - }, - }, - }); - - await extension.startup(); - - let docEl = window.document.documentElement; - Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set"); - Assert.ok(!docEl.hasAttribute("lwtheme-image"), "LWT image attribute should not be set"); - await extension.unload(); - Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); - Assert.ok(!docEl.hasAttribute("lwtheme-image"), "LWT image attribute should not be set"); -}); - -add_task(async function test_LWT_requires_accentcolor_defined_textcolor_only() { - let extension = ExtensionTestUtils.loadExtension({ - manifest: { - "theme": { - "colors": { - "textcolor": TEXT_COLOR, - }, - }, - }, - }); - - await extension.startup(); - - let docEl = window.document.documentElement; - Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); - Assert.ok(!docEl.hasAttribute("lwtheme-image"), "LWT image attribute should not be set"); - await extension.unload(); - Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); - Assert.ok(!docEl.hasAttribute("lwtheme-image"), "LWT image attribute should not be set"); -}); - -add_task(async function test_LWT_requires_accentcolor_defined_image_only() { +add_task(async function test_LWT_requires_all_properties_defined_image_only() { let extension = ExtensionTestUtils.loadExtension({ manifest: { "theme": { @@ -107,8 +62,26 @@ add_task(async function test_LWT_requires_accentcolor_defined_image_only() { let docEl = window.document.documentElement; Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); - Assert.ok(!docEl.hasAttribute("lwtheme-image"), "LWT image attribute should not be set"); await extension.unload(); Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); - Assert.ok(!docEl.hasAttribute("lwtheme-image"), "LWT image attribute should not be set"); +}); + +add_task(async function test_LWT_requires_all_properties_defined_colors_only() { + let extension = ExtensionTestUtils.loadExtension({ + manifest: { + "theme": { + "colors": { + "accentcolor": ACCENT_COLOR, + "textcolor": TEXT_COLOR, + }, + }, + }, + }); + + await extension.startup(); + + let docEl = window.document.documentElement; + Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); + await extension.unload(); + Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set"); }); diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js index e9f3cfd5e449..112de65036fb 100644 --- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js +++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js @@ -15,6 +15,9 @@ add_task(async function test_support_toolbar_property() { let extension = ExtensionTestUtils.loadExtension({ manifest: { "theme": { + "images": { + "headerURL": "image1.png", + }, "colors": { "accentcolor": ACCENT_COLOR, "textcolor": TEXT_COLOR, @@ -23,6 +26,9 @@ add_task(async function test_support_toolbar_property() { }, }, }, + files: { + "image1.png": BACKGROUND, + }, }); await extension.startup(); @@ -59,6 +65,9 @@ add_task(async function test_bookmark_text_property() { let extension = ExtensionTestUtils.loadExtension({ manifest: { "theme": { + "images": { + "headerURL": "image1.png", + }, "colors": { "frame": ACCENT_COLOR, "background_tab_text": TEXT_COLOR, @@ -67,6 +76,9 @@ add_task(async function test_bookmark_text_property() { }, }, }, + files: { + "image1.png": BACKGROUND, + }, }); await extension.startup(); diff --git a/toolkit/modules/LightweightThemeConsumer.jsm b/toolkit/modules/LightweightThemeConsumer.jsm index 04709ebd9cbd..5d27394bc646 100644 --- a/toolkit/modules/LightweightThemeConsumer.jsm +++ b/toolkit/modules/LightweightThemeConsumer.jsm @@ -126,7 +126,7 @@ LightweightThemeConsumer.prototype = { return; let root = this._doc.documentElement; - let active = !!aData.accentcolor; + let active = !!aData.headerURL; // We need to clear these either way: either because the theme is being removed, // or because we are applying a new theme and the data might be bogus CSS, @@ -149,12 +149,6 @@ LightweightThemeConsumer.prototype = { root.removeAttribute("lwtheme"); } - if (aData.headerURL) { - root.setAttribute("lwtheme-image", "true"); - } else { - root.removeAttribute("lwtheme-image"); - } - this._active = active; if (aData.icons) { diff --git a/toolkit/themes/linux/global/global.css b/toolkit/themes/linux/global/global.css index f9082ac275f7..cf4d1a5b880c 100644 --- a/toolkit/themes/linux/global/global.css +++ b/toolkit/themes/linux/global/global.css @@ -122,11 +122,11 @@ toolbar[mode="text"] .toolbarbutton-text { -moz-appearance: none; } -:root[lwtheme-image]:-moz-lwtheme-darktext { +:root:-moz-lwtheme-darktext { text-shadow: 0 -0.5px 1.5px white; } -:root[lwtheme-image]:-moz-lwtheme-brighttext { +:root:-moz-lwtheme-brighttext { text-shadow: 1px 1px 1.5px black; } diff --git a/toolkit/themes/linux/global/toolbarbutton.css b/toolkit/themes/linux/global/toolbarbutton.css index 412ebaa01ca8..817581386868 100644 --- a/toolkit/themes/linux/global/toolbarbutton.css +++ b/toolkit/themes/linux/global/toolbarbutton.css @@ -18,7 +18,7 @@ toolbarbutton { padding: 3px; } -:root[lwtheme-image] toolbarbutton { +toolbarbutton:-moz-lwtheme { text-shadow: none; } diff --git a/toolkit/themes/osx/global/global.css b/toolkit/themes/osx/global/global.css index 2e9d689b861e..0b36d47411ac 100644 --- a/toolkit/themes/osx/global/global.css +++ b/toolkit/themes/osx/global/global.css @@ -103,11 +103,11 @@ sidebarheader { -moz-appearance: none; } -:root[lwtheme-image]:-moz-lwtheme-darktext { +:root:-moz-lwtheme-darktext { text-shadow: 0 -0.5px 1.5px white; } -:root[lwtheme-image]:-moz-lwtheme-brighttext { +:root:-moz-lwtheme-brighttext { text-shadow: 1px 1px 1.5px black; } diff --git a/toolkit/themes/windows/global/global.css b/toolkit/themes/windows/global/global.css index c0bad1b60e2c..c9366973a36e 100644 --- a/toolkit/themes/windows/global/global.css +++ b/toolkit/themes/windows/global/global.css @@ -129,11 +129,11 @@ toolbar[mode="text"] .toolbarbutton-text { /* ::::: miscellaneous formatting ::::: */ -:root[lwtheme-image]:-moz-lwtheme-darktext { +:root:-moz-lwtheme-darktext { text-shadow: 0 -0.5px 1.5px white; } -:root[lwtheme-image]:-moz-lwtheme-brighttext { +:root:-moz-lwtheme-brighttext { text-shadow: 1px 1px 1.5px black; } diff --git a/toolkit/themes/windows/global/toolbarbutton.css b/toolkit/themes/windows/global/toolbarbutton.css index 84ad83234f78..569594cf4340 100644 --- a/toolkit/themes/windows/global/toolbarbutton.css +++ b/toolkit/themes/windows/global/toolbarbutton.css @@ -70,21 +70,21 @@ toolbarbutton[checked="true"]:not([disabled="true"]) { } @media (-moz-windows-default-theme) { - :root[lwtheme-image] toolbarbutton { + toolbarbutton:-moz-lwtheme { text-shadow: none; } - :root[lwtheme-image] toolbarbutton:not([disabled="true"]) { + toolbarbutton:-moz-lwtheme:not([disabled="true"]) { text-shadow: inherit; } } @media (-moz-windows-default-theme: 0) { - :root[lwtheme-image] toolbarbutton { + toolbarbutton:-moz-lwtheme { -moz-appearance: none; } - :root[lwtheme-image] toolbarbutton:not([disabled="true"]) { + toolbarbutton:-moz-lwtheme:not([disabled="true"]) { text-shadow: inherit; } }