Backed out changeset 85e30806ade1 (bug 1404688) for Browser chrome failure on browser/base/content/test/general/browser_compacttheme.js. CLOSED TREE

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"

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)

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

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

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

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

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

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

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

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

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

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

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

toolkit/themes/linux/global/toolbarbutton.css

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

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

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

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