diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css index 7cd17e702662..8b3d60742be5 100644 --- a/browser/base/content/browser.css +++ b/browser/base/content/browser.css @@ -18,11 +18,15 @@ :root:-moz-lwtheme { background-color: var(--lwt-accent-color) !important; - background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; + background-image: var(--lwt-additional-images) !important; background-position: var(--lwt-background-alignment) !important; background-repeat: var(--lwt-background-tiling) !important; } +:root:-moz-lwtheme[lwtheme-image] { + background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; +} + :root:-moz-lwtheme:-moz-window-inactive { background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important; } diff --git a/browser/base/content/defaultthemes/compact.header.png b/browser/base/content/defaultthemes/compact.header.png deleted file mode 100644 index e4e8dcaa3b3c..000000000000 Binary files a/browser/base/content/defaultthemes/compact.header.png and /dev/null differ diff --git a/browser/base/content/test/general/browser_compacttheme.js b/browser/base/content/test/general/browser_compacttheme.js index 8401dbf6cf16..95cc80ac08ca 100644 --- a/browser/base/content/test/general/browser_compacttheme.js +++ b/browser/base/content/test/general/browser_compacttheme.js @@ -46,7 +46,6 @@ 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 4778af1d9e4b..d885829b2c3d 100644 --- a/browser/base/jar.mn +++ b/browser/base/jar.mn @@ -96,7 +96,6 @@ 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 d1e0992f726b..4e19a8f9d5a9 100644 --- a/browser/components/nsBrowserGlue.js +++ b/browser/components/nsBrowserGlue.js @@ -700,7 +700,6 @@ 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", @@ -710,7 +709,6 @@ 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 b2ee7923d6a9..b574ed65bc1d 100644 --- a/browser/themes/shared/compacttheme.inc.css +++ b/browser/themes/shared/compacttheme.inc.css @@ -7,8 +7,6 @@ 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); @@ -109,9 +107,3 @@ 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 0c6509117448..7f703fca6a42 100644 --- a/browser/themes/shared/customizableui/customizeMode.inc.css +++ b/browser/themes/shared/customizableui/customizeMode.inc.css @@ -19,7 +19,7 @@ text-shadow: none; } -#customization-container:-moz-lwtheme { +:root[lwtheme-image] #customization-container { background-color: transparent; background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-non-lwt-bgcolor) 45px); } @@ -34,7 +34,7 @@ margin: 20px 20px 15px; } -#customization-header:-moz-lwtheme { +:root[lwtheme-image] #customization-header { 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 5c9027562399..ebd179062b9b 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); } -.tab-icon-sound:-moz-lwtheme-darktext[soundplaying], -.tab-icon-sound:-moz-lwtheme-darktext[muted], -.tab-icon-sound:-moz-lwtheme-darktext[activemedia-blocked] { +: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] { filter: drop-shadow(1px 1px 1px white); } -.tab-icon-sound:-moz-lwtheme-brighttext[soundplaying], -.tab-icon-sound:-moz-lwtheme-brighttext[muted], -.tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] { +: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] { filter: drop-shadow(1px 1px 1px black); } @@ -530,7 +530,7 @@ tabbrowser { */ /* Lightweight theme on tabs */ -#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme { +:root[lwtheme-image] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true] { background-attachment: scroll, fixed; background-color: transparent; background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css index 2fce0e204007..3429001e7d30 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); } - .titlebar-button:-moz-lwtheme { + :root[lwtheme-image] .titlebar-button { -moz-context-properties: unset; } - #titlebar-min:-moz-lwtheme { + :root[lwtheme-image] #titlebar-min { list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg); } - #titlebar-max:-moz-lwtheme { + :root[lwtheme-image] #titlebar-max { list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg); } - :root[sizemode="maximized"] #titlebar-max:-moz-lwtheme { + :root[lwtheme-image][sizemode="maximized"] #titlebar-max { list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg); } - #titlebar-close:-moz-lwtheme { + :root[lwtheme-image] #titlebar-close { 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 0576bdc0969a..e0cea94defed 100644 --- a/browser/themes/windows/compacttheme.css +++ b/browser/themes/windows/compacttheme.css @@ -31,10 +31,6 @@ } } -#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. */ @@ -65,11 +61,6 @@ --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; @@ -155,23 +146,3 @@ 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 dfbd60a93633..aee44d9219e9 100644 --- a/toolkit/components/extensions/ext-theme.js +++ b/toolkit/components/extensions/ext-theme.js @@ -84,9 +84,8 @@ class Theme { this.loadProperties(details.properties); } - // Lightweight themes require all properties to be defined. - if (this.lwtStyles.headerURL && - this.lwtStyles.accentcolor && + // Lightweight themes require accentcolor and textcolor to be defined. + if (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 275df5e27c3a..603bb9de0393 100644 --- a/toolkit/components/extensions/test/browser/browser_ext_themes_lwtsupport.js +++ b/toolkit/components/extensions/test/browser/browser_ext_themes_lwtsupport.js @@ -30,6 +30,7 @@ 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"); @@ -42,9 +43,53 @@ 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_requires_all_properties_defined_image_only() { +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() { let extension = ExtensionTestUtils.loadExtension({ manifest: { "theme": { @@ -62,26 +107,8 @@ add_task(async function test_LWT_requires_all_properties_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"); -}); - -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"); + Assert.ok(!docEl.hasAttribute("lwtheme-image"), "LWT image 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 112de65036fb..e9f3cfd5e449 100644 --- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js +++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js @@ -15,9 +15,6 @@ 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, @@ -26,9 +23,6 @@ add_task(async function test_support_toolbar_property() { }, }, }, - files: { - "image1.png": BACKGROUND, - }, }); await extension.startup(); @@ -65,9 +59,6 @@ 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, @@ -76,9 +67,6 @@ 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 5d27394bc646..04709ebd9cbd 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.headerURL; + let active = !!aData.accentcolor; // 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,6 +149,12 @@ 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/mozapps/extensions/LightweightThemeManager.jsm b/toolkit/mozapps/extensions/LightweightThemeManager.jsm index 8ffd7548f3fc..a8d8a437eea7 100644 --- a/toolkit/mozapps/extensions/LightweightThemeManager.jsm +++ b/toolkit/mozapps/extensions/LightweightThemeManager.jsm @@ -24,10 +24,10 @@ const DEFAULT_MAX_USED_THEMES_COUNT = 30; const MAX_PREVIEW_SECONDS = 30; -const MANDATORY = ["id", "name", "headerURL"]; -const OPTIONAL = ["footerURL", "textcolor", "accentcolor", "iconURL", - "previewURL", "author", "description", "homepageURL", - "updateURL", "version"]; +const MANDATORY = ["id", "name"]; +const OPTIONAL = ["headerURL", "footerURL", "textcolor", "accentcolor", + "iconURL", "previewURL", "author", "description", + "homepageURL", "updateURL", "version"]; const PERSIST_ENABLED = true; const PERSIST_BYPASS_CACHE = false; diff --git a/toolkit/mozapps/extensions/test/xpcshell/test_LightweightThemeManager.js b/toolkit/mozapps/extensions/test/xpcshell/test_LightweightThemeManager.js index 33737bac1cf0..dc5f7e3fc9d2 100644 --- a/toolkit/mozapps/extensions/test/xpcshell/test_LightweightThemeManager.js +++ b/toolkit/mozapps/extensions/test/xpcshell/test_LightweightThemeManager.js @@ -1,7 +1,7 @@ -const MANDATORY = ["id", "name", "headerURL"]; -const OPTIONAL = ["footerURL", "textcolor", "accentcolor", "iconURL", - "previewURL", "author", "description", "homepageURL", - "updateURL", "version"]; +const MANDATORY = ["id", "name"]; +const OPTIONAL = ["headerURL", "footerURL", "textcolor", "accentcolor", + "iconURL", "previewURL", "author", "description", + "homepageURL", "updateURL", "version"]; ChromeUtils.import("resource://gre/modules/Services.jsm"); diff --git a/toolkit/themes/linux/global/global.css b/toolkit/themes/linux/global/global.css index cf4d1a5b880c..f9082ac275f7 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:-moz-lwtheme-darktext { +:root[lwtheme-image]:-moz-lwtheme-darktext { text-shadow: 0 -0.5px 1.5px white; } -:root:-moz-lwtheme-brighttext { +:root[lwtheme-image]:-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 817581386868..412ebaa01ca8 100644 --- a/toolkit/themes/linux/global/toolbarbutton.css +++ b/toolkit/themes/linux/global/toolbarbutton.css @@ -18,7 +18,7 @@ toolbarbutton { padding: 3px; } -toolbarbutton:-moz-lwtheme { +:root[lwtheme-image] toolbarbutton { text-shadow: none; } diff --git a/toolkit/themes/osx/global/global.css b/toolkit/themes/osx/global/global.css index 0b36d47411ac..2e9d689b861e 100644 --- a/toolkit/themes/osx/global/global.css +++ b/toolkit/themes/osx/global/global.css @@ -103,11 +103,11 @@ sidebarheader { -moz-appearance: none; } -:root:-moz-lwtheme-darktext { +:root[lwtheme-image]:-moz-lwtheme-darktext { text-shadow: 0 -0.5px 1.5px white; } -:root:-moz-lwtheme-brighttext { +:root[lwtheme-image]:-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 c9366973a36e..c0bad1b60e2c 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:-moz-lwtheme-darktext { +:root[lwtheme-image]:-moz-lwtheme-darktext { text-shadow: 0 -0.5px 1.5px white; } -:root:-moz-lwtheme-brighttext { +:root[lwtheme-image]:-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 569594cf4340..84ad83234f78 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) { - toolbarbutton:-moz-lwtheme { + :root[lwtheme-image] toolbarbutton { text-shadow: none; } - toolbarbutton:-moz-lwtheme:not([disabled="true"]) { + :root[lwtheme-image] toolbarbutton:not([disabled="true"]) { text-shadow: inherit; } } @media (-moz-windows-default-theme: 0) { - toolbarbutton:-moz-lwtheme { + :root[lwtheme-image] toolbarbutton { -moz-appearance: none; } - toolbarbutton:-moz-lwtheme:not([disabled="true"]) { + :root[lwtheme-image] toolbarbutton:not([disabled="true"]) { text-shadow: inherit; } }