Bug 1404688 - Make headerURL optional and remove text-shadow when there is no headerURL. r=jaws

MozReview-Commit-ID: BWhStvcLpkL

--HG--
extra : rebase_source : b50632db25916f113cd85e089759e892493e3be3

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

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"

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)

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",

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

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);

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)),

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);
       }
 

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);
-  }
-}
-

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);

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");
 });

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();

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) {

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;

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");
 

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

toolkit/themes/linux/global/toolbarbutton.css

@@ -18,7 +18,7 @@ toolbarbutton {
   padding: 3px;
 }
 
-toolbarbutton:-moz-lwtheme {
+:root[lwtheme-image] toolbarbutton {
   text-shadow: none;
 }
 

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

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

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