Bug 1314091 - Expose 'compact' themes instead of the Dev Edition theme;r=Gijs

This commit does the following:
* Install two lightweight themes instead of one
* Introduce a build config to install the themes instead of relying on channel: INSTALL_COMPACT_THEMES
* Change browser-compacttheme to use the new themes instead of the old one
* Remove inferBrightness since the lwt colors are part of the compact theme definision, as opposed
  to the devedition theme which could be light or
* Update CSS to use :-moz-lwtheme-darktext and :-moz-lwtheme-brighttext instead of [devtoolstheme]

MozReview-Commit-ID: 4gKU68drlE2

--HG--
rename : browser/base/content/defaultthemes/devedition.header.png => browser/base/content/defaultthemes/compact.header.png

browser/app/profile/firefox.js

@@ -1130,7 +1130,7 @@ pref("services.sync.sendTabToDevice.enabled", true);
 
 // Developer edition preferences
 #ifdef MOZ_DEV_EDITION
-sticky_pref("lightweightThemes.selectedThemeID", "firefox-devedition@mozilla.org");
+sticky_pref("lightweightThemes.selectedThemeID", "firefox-compact-dark@mozilla.org");
 #else
 sticky_pref("lightweightThemes.selectedThemeID", "");
 #endif

browser/base/content/browser-compacttheme.js

@@ -18,7 +18,9 @@ var CompactTheme = {
 
   get isThemeCurrentlyApplied() {
     let theme = LightweightThemeManager.currentTheme;
-    return theme && theme.id == "firefox-devedition@mozilla.org";
+    return theme && (
+           theme.id == "firefox-compact-dark@mozilla.org" ||
+           theme.id == "firefox-compact-light@mozilla.org");
   },
 
   init() {
@@ -44,11 +46,16 @@ var CompactTheme = {
   observe(subject, topic, data) {
     if (topic == "lightweight-theme-styling-update") {
       let newTheme = JSON.parse(data);
-      if (newTheme && newTheme.id == "firefox-devedition@mozilla.org") {
+      if (newTheme && (
+          newTheme.id == "firefox-compact-light@mozilla.org" ||
+          newTheme.id == "firefox-compact-dark@mozilla.org")) {
+        // We are using the theme ID on this object instead of always referencing
+        // LightweightThemeManager.currentTheme in case this is a preview
         this._toggleStyleSheet(true);
       } else {
         this._toggleStyleSheet(false);
       }
+
     }
 
     if (topic == "nsPref:changed" && data == this._devtoolsThemePrefName) {
@@ -56,17 +63,6 @@ var CompactTheme = {
     }
   },
 
-  _inferBrightness() {
-    ToolbarIconColor.inferFromText();
-    // Get an inverted full screen button if the dark theme is applied.
-    if (this.isStyleSheetEnabled &&
-        document.documentElement.getAttribute("devtoolstheme") == "dark") {
-      document.documentElement.setAttribute("brighttitlebarforeground", "true");
-    } else {
-      document.documentElement.removeAttribute("brighttitlebarforeground");
-    }
-  },
-
   _updateDevtoolsThemeAttribute() {
     // Set an attribute on root element to make it possible
     // to change colors based on the selected devtools theme.
@@ -75,7 +71,6 @@ var CompactTheme = {
       devtoolsTheme = "light";
     }
     document.documentElement.setAttribute("devtoolstheme", devtoolsTheme);
-    this._inferBrightness();
   },
 
   handleEvent(e) {
@@ -90,13 +85,12 @@ var CompactTheme = {
     // yet fired.
     if (this.initialized) {
       gBrowser.tabContainer._positionPinnedTabs();
-      this._inferBrightness();
     }
   },
 
-  _toggleStyleSheet(deveditionThemeEnabled) {
+  _toggleStyleSheet(enabled) {
     let wasEnabled = this.isStyleSheetEnabled;
-    if (deveditionThemeEnabled && !wasEnabled) {
+    if (enabled) {
       // The stylesheet may not have been created yet if it wasn't
       // needed on initial load.  Make it now.
       if (!this.styleSheet) {
@@ -104,7 +98,7 @@ var CompactTheme = {
       }
       this.styleSheet.sheet.disabled = false;
       this.refreshBrowserDisplay();
-    } else if (!deveditionThemeEnabled && wasEnabled) {
+    } else if (!enabled && wasEnabled) {
       this.styleSheet.sheet.disabled = true;
       this.refreshBrowserDisplay();
     }
@@ -123,7 +117,7 @@ var CompactTheme = {
 // If the compact theme is going to be applied in gBrowserInit.onLoad,
 // then preload it now.  This prevents a flash of unstyled content where the
 // normal theme is applied while the compact theme stylesheet is loading.
-if (!AppConstants.RELEASE_OR_BETA &&
+if (AppConstants.INSTALL_COMPACT_THEMES &&
     this != Services.appShell.hiddenDOMWindow && CompactTheme.isThemeCurrentlyApplied) {
   CompactTheme.createStyleSheet();
 }

browser/base/content/defaultthemes/compactdark.icon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+    <rect fill="#727780" x="1" y="1" width="30" height="30" rx="2" ry="2"/>
+    <path fill="#393f4c" d="M3 1h26a2 2 0 0 1 2 2v14H1V3a2 2 0 0 1 2-2z"/>
+    <rect fill="#171b1f" x="3.5" y="3.5" width="25" height="11" rx="1" ry="1"/>
+    <path fill="#252c33" d="M4.5 3.5h12v11h-12a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z"/>
+    <rect stroke="#1d2328" fill="none" stroke-width="2" x="1" y="1" width="30" height="30" rx="2" ry="2"/>
+    <path class="icon-line-2px" d="M10 6L7 9l3 3M7.5 9H13"/>
+    <path stroke="#1d2328" d="M1.5 16.5h29"/>
+    <path class="separator-toolbar-items" d="M16.5 3.5v11"/>
+    <rect fill="none" stroke="#171b1f" x="3.5" y="3.5" width="25" height="11" rx="1" ry="1"/>
+    <path fill="#f0f1f2" d="M13 8H9.4l1.3-1.3a1 1 0 0 0-1.4-1.4l-3 3a1 1 0 0 0 0 1.4l3 3a1 1 0 0 0 1.4-1.4L9.4 10H13a1 1 0 0 0 0-2z"/>
+</svg>

browser/base/content/defaultthemes/compactlight.icon.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+    <rect fill="#fff" x="1" y="1" width="30" height="30" rx="2" ry="2"/>
+    <path fill="#e3e3e3" d="M3 1h26a2 2 0 0 1 2 2v14H1V3a2 2 0 0 1 2-2z"/>
+    <rect fill="#fff" x="3.5" y="3.5" width="25" height="11" rx="1" ry="1"/>
+    <path fill="#fcfcfc" d="M4.5 3.5h12v11h-12a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z"/>
+    <rect fill="none" stroke="#999" stroke-width="2" x="1" y="1" width="30" height="30" rx="2" ry="2"/>
+    <path stroke="#999" d="M1.5 16.5h29"/>
+    <path stroke="#b3b3b3" d="M16.5 3.5v11"/>
+    <rect fill="none" stroke="#b3b3b3" x="3.5" y="3.5" width="25" height="11" rx="1" ry="1"/>
+    <path fill="#595959" d="M13 8H9.4l1.3-1.3a1 1 0 0 0-1.4-1.4l-3 3a1 1 0 0 0 0 1.4l3 3a1 1 0 0 0 1.4-1.4L9.4 10H13a1 1 0 0 0 0-2z"/>
+</svg>

browser/base/content/test/general/browser_compacttheme.js

@@ -1,129 +1,90 @@
 /*
- * Testing changes for Developer Edition theme.
+ * Testing changes for compact themes.
  * A special stylesheet should be added to the browser.xul document
- * when the firefox-devedition@mozilla.org lightweight theme
- * is applied.
+ * when the firefox-compact-light and firefox-compact-dark lightweight
+ * themes are applied.
  */
 
 const PREF_LWTHEME_USED_THEMES = "lightweightThemes.usedThemes";
-const PREF_DEVTOOLS_THEME = "devtools.theme";
+const COMPACT_LIGHT_ID = "firefox-compact-light@mozilla.org";
+const COMPACT_DARK_ID = "firefox-compact-dark@mozilla.org";
+const SKIP_TEST = !AppConstants.INSTALL_COMPACT_THEMES;
 const {LightweightThemeManager} = Components.utils.import("resource://gre/modules/LightweightThemeManager.jsm", {});
 
-LightweightThemeManager.clearBuiltInThemes();
-LightweightThemeManager.addBuiltInTheme(dummyLightweightTheme("firefox-devedition@mozilla.org"));
-
 registerCleanupFunction(() => {
   // Set preferences back to their original values
   LightweightThemeManager.currentTheme = null;
-  Services.prefs.clearUserPref(PREF_DEVTOOLS_THEME);
   Services.prefs.clearUserPref(PREF_LWTHEME_USED_THEMES);
-
-  LightweightThemeManager.currentTheme = null;
-  LightweightThemeManager.clearBuiltInThemes();
 });
 
 add_task(function* startTests() {
-  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
+  if (SKIP_TEST) {
+    ok(true, "No need to run this test since themes aren't installed");
+    return;
+  }
 
   info("Setting the current theme to null");
   LightweightThemeManager.currentTheme = null;
-  ok(!CompactTheme.isStyleSheetEnabled, "There is no devedition style sheet when no lw theme is applied.");
+  ok(!CompactTheme.isStyleSheetEnabled, "There is no compact style sheet when no lw theme is applied.");
 
   info("Adding a lightweight theme.");
   LightweightThemeManager.currentTheme = dummyLightweightTheme("preview0");
-  ok(!CompactTheme.isStyleSheetEnabled, "The devedition stylesheet has been removed when a lightweight theme is applied.");
+  ok(!CompactTheme.isStyleSheetEnabled, "The compact stylesheet has been removed when a lightweight theme is applied.");
 
-  info("Applying the devedition lightweight theme.");
-  let onAttributeAdded = waitForBrightTitlebarAttribute();
-  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme("firefox-devedition@mozilla.org");
-  ok(CompactTheme.isStyleSheetEnabled, "The devedition stylesheet has been added when the devedition lightweight theme is applied");
-  yield onAttributeAdded;
-  is(document.documentElement.getAttribute("brighttitlebarforeground"), "true",
-     "The brighttitlebarforeground attribute is set on the window.");
+  info("Applying the dark compact theme.");
+  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_DARK_ID);
+  ok(CompactTheme.isStyleSheetEnabled, "The compact stylesheet has been added when the compact lightweight theme is applied");
+
+  info("Applying the light compact theme.");
+  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_LIGHT_ID);
+  ok(CompactTheme.isStyleSheetEnabled, "The compact stylesheet has been added when the compact lightweight theme is applied");
+
+  info("Adding a different lightweight theme.");
+  LightweightThemeManager.currentTheme = dummyLightweightTheme("preview1");
+  ok(!CompactTheme.isStyleSheetEnabled, "The compact stylesheet has been removed when a lightweight theme is applied.");
 
   info("Unapplying all themes.");
   LightweightThemeManager.currentTheme = null;
-  ok(!CompactTheme.isStyleSheetEnabled, "There is no devedition style sheet when no lw theme is applied.");
-
-  info("Applying the devedition lightweight theme.");
-  onAttributeAdded = waitForBrightTitlebarAttribute();
-  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme("firefox-devedition@mozilla.org");
-  ok(CompactTheme.isStyleSheetEnabled, "The devedition stylesheet has been added when the devedition lightweight theme is applied");
-  yield onAttributeAdded;
-  ok(document.documentElement.hasAttribute("brighttitlebarforeground"),
-     "The brighttitlebarforeground attribute is set on the window with dark devtools theme.");
-});
-
-add_task(function* testDevtoolsTheme() {
-  info("Checking stylesheet and :root attributes based on devtools theme.");
-  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
-  is(document.documentElement.getAttribute("devtoolstheme"), "light",
-    "The documentElement has an attribute based on devtools theme.");
-  ok(CompactTheme.isStyleSheetEnabled, "The devedition stylesheet is still there with the light devtools theme.");
-  ok(!document.documentElement.hasAttribute("brighttitlebarforeground"),
-     "The brighttitlebarforeground attribute is not set on the window with light devtools theme.");
-
-  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
-  is(document.documentElement.getAttribute("devtoolstheme"), "dark",
-    "The documentElement has an attribute based on devtools theme.");
-  ok(CompactTheme.isStyleSheetEnabled, "The devedition stylesheet is still there with the dark devtools theme.");
-  is(document.documentElement.getAttribute("brighttitlebarforeground"), "true",
-     "The brighttitlebarforeground attribute is set on the window with dark devtools theme.");
-
-  Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "foobar");
-  is(document.documentElement.getAttribute("devtoolstheme"), "light",
-    "The documentElement has 'light' as a default for the devtoolstheme attribute");
-  ok(CompactTheme.isStyleSheetEnabled, "The devedition stylesheet is still there with the foobar devtools theme.");
-  ok(!document.documentElement.hasAttribute("brighttitlebarforeground"),
-     "The brighttitlebarforeground attribute is not set on the window with light devtools theme.");
+  ok(!CompactTheme.isStyleSheetEnabled, "There is no compact style sheet when no lw theme is applied.");
 });
 
 function dummyLightweightTheme(id) {
   return {
     id,
     name: id,
-    headerURL: "resource:///chrome/browser/content/browser/defaultthemes/devedition.header.png",
-    iconURL: "resource:///chrome/browser/content/browser/defaultthemes/devedition.icon.png",
+    headerURL: "resource:///chrome/browser/content/browser/defaultthemes/compact.header.png",
+    iconURL: "resource:///chrome/browser/content/browser/defaultthemes/compactlight.icon.svg",
     textcolor: "red",
     accentcolor: "blue"
   };
 }
 
 add_task(function* testLightweightThemePreview() {
-  info("Setting devedition to current and the previewing others");
-  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme("firefox-devedition@mozilla.org");
-  ok(CompactTheme.isStyleSheetEnabled, "The devedition stylesheet is enabled.");
+  if (SKIP_TEST) {
+    ok(true, "No need to run this test since themes aren't installed");
+    return;
+  }
+  info("Setting compact to current and previewing others");
+  LightweightThemeManager.currentTheme = LightweightThemeManager.getUsedTheme(COMPACT_LIGHT_ID);
+  ok(CompactTheme.isStyleSheetEnabled, "The compact stylesheet is enabled.");
   LightweightThemeManager.previewTheme(dummyLightweightTheme("preview0"));
-  ok(!CompactTheme.isStyleSheetEnabled, "The devedition stylesheet is not enabled after a lightweight theme preview.");
+  ok(!CompactTheme.isStyleSheetEnabled, "The compact stylesheet is not enabled after a lightweight theme preview.");
   LightweightThemeManager.resetPreview();
   LightweightThemeManager.previewTheme(dummyLightweightTheme("preview1"));
-  ok(!CompactTheme.isStyleSheetEnabled, "The devedition stylesheet is not enabled after a second lightweight theme preview.");
+  ok(!CompactTheme.isStyleSheetEnabled, "The compact stylesheet is not enabled after a second lightweight theme preview.");
   LightweightThemeManager.resetPreview();
-  ok(CompactTheme.isStyleSheetEnabled, "The devedition stylesheet is enabled again after resetting the preview.");
+  ok(CompactTheme.isStyleSheetEnabled, "The compact stylesheet is enabled again after resetting the preview.");
   LightweightThemeManager.currentTheme = null;
-  ok(!CompactTheme.isStyleSheetEnabled, "The devedition stylesheet is gone after removing the current theme.");
+  ok(!CompactTheme.isStyleSheetEnabled, "The compact stylesheet is gone after removing the current theme.");
+
+  info("Previewing the compact theme");
+  LightweightThemeManager.previewTheme(LightweightThemeManager.getUsedTheme(COMPACT_LIGHT_ID));
+  ok(CompactTheme.isStyleSheetEnabled, "The compact stylesheet is enabled.");
+  LightweightThemeManager.previewTheme(LightweightThemeManager.getUsedTheme(COMPACT_DARK_ID));
+  ok(CompactTheme.isStyleSheetEnabled, "The compact stylesheet is enabled.");
 
-  info("Previewing the devedition theme");
-  LightweightThemeManager.previewTheme(LightweightThemeManager.getUsedTheme("firefox-devedition@mozilla.org"));
-  ok(CompactTheme.isStyleSheetEnabled, "The devedition stylesheet is enabled.");
   LightweightThemeManager.previewTheme(dummyLightweightTheme("preview2"));
+  ok(!CompactTheme.isStyleSheetEnabled, "The compact stylesheet is now disabled after previewing a new sheet.");
   LightweightThemeManager.resetPreview();
-  ok(!CompactTheme.isStyleSheetEnabled, "The devedition stylesheet is now disabled after resetting the preview.");
+  ok(!CompactTheme.isStyleSheetEnabled, "The compact stylesheet is now disabled after resetting the preview.");
 });
-
-// Use a mutation observer to wait for the brighttitlebarforeground
-// attribute to change.  Using this instead of waiting for the load
-// event on the DevEdition styleSheet.
-function waitForBrightTitlebarAttribute() {
-  return new Promise((resolve, reject) => {
-    let mutationObserver = new MutationObserver(function(mutations) {
-      for (let mutation of mutations) {
-        if (mutation.attributeName == "brighttitlebarforeground") {
-          mutationObserver.disconnect();
-          resolve();
-        }
-      }
-    });
-    mutationObserver.observe(document.documentElement, { attributes: true });
-  });
-}

browser/base/jar.mn

@@ -115,8 +115,9 @@ 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/devedition.header.png   (content/defaultthemes/devedition.header.png)
-        content/browser/defaultthemes/devedition.icon.png     (content/defaultthemes/devedition.icon.png)
+        content/browser/defaultthemes/compact.header.png    (content/defaultthemes/compact.header.png)
+        content/browser/defaultthemes/compactdark.icon.svg  (content/defaultthemes/compactdark.icon.svg)
+        content/browser/defaultthemes/compactlight.icon.svg (content/defaultthemes/compactlight.icon.svg)
         content/browser/gcli_sec_bad.svg              (content/gcli_sec_bad.svg)
         content/browser/gcli_sec_good.svg             (content/gcli_sec_good.svg)
         content/browser/gcli_sec_moderate.svg         (content/gcli_sec_moderate.svg)

browser/components/nsBrowserGlue.js

@@ -651,15 +651,27 @@ BrowserGlue.prototype = {
     // Ensure we keep track of places/pw-mananager undo by init'ing this early.
     Cu.import("resource:///modules/AutoMigrate.jsm");
 
-    if (!AppConstants.RELEASE_OR_BETA) {
-      let themeName = gBrowserBundle.GetStringFromName("deveditionTheme.name");
+    if (AppConstants.INSTALL_COMPACT_THEMES) {
       let vendorShortName = gBrandBundle.GetStringFromName("vendorShortName");
 
       LightweightThemeManager.addBuiltInTheme({
-        id: "firefox-devedition@mozilla.org",
-        name: themeName,
-        headerURL: "resource:///chrome/browser/content/browser/defaultthemes/devedition.header.png",
-        iconURL: "resource:///chrome/browser/content/browser/defaultthemes/devedition.icon.png",
+        id: "firefox-compact-light@mozilla.org",
+        name: gBrowserBundle.GetStringFromName("compactLightTheme.name"),
+        description: gBrowserBundle.GetStringFromName("compactLightTheme.description"),
+        headerURL: "resource:///chrome/browser/content/browser/defaultthemes/compact.header.png",
+        iconURL: "resource:///chrome/browser/content/browser/defaultthemes/compactlight.icon.svg",
+        textcolor: "black",
+        accentcolor: "white",
+        author: vendorShortName,
+      });
+      LightweightThemeManager.addBuiltInTheme({
+        id: "firefox-compact-dark@mozilla.org",
+        name: gBrowserBundle.GetStringFromName("compactDarkTheme.name"),
+        description: gBrowserBundle.GetStringFromName("compactDarkTheme.description"),
+        headerURL: "resource:///chrome/browser/content/browser/defaultthemes/compact.header.png",
+        iconURL: "resource:///chrome/browser/content/browser/defaultthemes/compactdark.icon.svg",
+        textcolor: "white",
+        accentcolor: "black",
         author: vendorShortName,
       });
     }
@@ -1718,7 +1730,7 @@ BrowserGlue.prototype = {
   },
 
   _migrateUI: function BG__migrateUI() {
-    const UI_VERSION = 42;
+    const UI_VERSION = 43;
     const BROWSER_DOCURL = "chrome://browser/content/browser.xul";
 
     let currentUIVersion;
@@ -2051,6 +2063,18 @@ BrowserGlue.prototype = {
       OS.File.remove(backupFile.path, {ignoreAbsent: true}).catch(ex => Cu.reportError(ex));
     }
 
+    if (currentUIVersion < 43) {
+      let currentTheme = null;
+      try {
+        currentTheme = Services.prefs.getCharPref("lightweightThemes.selectedThemeID");
+      } catch (e) {}
+      if (currentTheme == "firefox-devedition@mozilla.org") {
+        let newTheme = Services.prefs.getCharPref("devtools.theme") == "dark" ?
+          "firefox-compact-dark@mozilla.org" : "firefox-compact-light@mozilla.org";
+        Services.prefs.setCharPref("lightweightThemes.selectedThemeID", newTheme);
+      }
+    }
+
     // Update the migration version.
     Services.prefs.setIntPref("browser.migration.version", UI_VERSION);
   },

browser/installer/allowed-dupes.mn

@@ -218,6 +218,5 @@ res/table-remove-row-active.gif
 res/table-remove-row-hover.gif
 res/table-remove-row.gif
 # Aurora branding
-browser/chrome/browser/content/browser/defaultthemes/devedition.icon.png
 browser/chrome/browser/content/branding/icon64.png
 browser/chrome/devtools/content/framework/dev-edition-promo/dev-edition-logo.png

browser/locales/en-US/chrome/browser/browser.properties

@@ -106,9 +106,13 @@ unsignedAddonsDisabled.message=One or more installed add-ons cannot be verified
 unsignedAddonsDisabled.learnMore.label=Learn More
 unsignedAddonsDisabled.learnMore.accesskey=L
 
-# LOCALIZATION NOTE (deveditionTheme.name): This should be nearly the brand name for aurora.
-# See browser/branding/aurora/locales/*/brand.properties
-deveditionTheme.name=Developer Edition
+# LOCALIZATION NOTE (compactLightTheme.name): This is displayed in about:addons -> Appearance
+compactLightTheme.name=Compact Light
+compactLightTheme.description=A compact theme with a light color scheme.
+
+# LOCALIZATION NOTE (compactDarkTheme.name): This is displayed in about:addons -> Appearance
+compactDarkTheme.name=Compact Dark
+compactDarkTheme.description=A compact theme with a dark color scheme.
 
 # LOCALIZATION NOTE (lwthemeInstallRequest.message): %S will be replaced with
 # the host name of the site.

browser/themes/linux/compacttheme.css

@@ -8,7 +8,7 @@
   --forwardbutton-width: 29px;
 }
 
-:root[devtoolstheme="light"] {
+:root:-moz-lwtheme-darktext {
   --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
   --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px);
@@ -19,8 +19,8 @@
   --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
 }
 
-:root[devtoolstheme="dark"] .findbar-closebutton:not(:hover),
-:root[devtoolstheme="dark"] #sidebar-header > .close-icon:not(:hover),
+.findbar-closebutton:-moz-lwtheme-brighttext:not(:hover),
+#sidebar-header > .close-icon:-moz-lwtheme-brighttext:not(:hover),
 .tab-close-button[selected]:not(:hover) {
   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
 }

browser/themes/osx/compacttheme.css

@@ -106,14 +106,14 @@
   margin-bottom: 0;
 }
 
-:root[devtoolstheme="dark"] .findbar-closebutton:not(:hover),
+.findbar-closebutton:-moz-lwtheme-brighttext:not(:hover),
 /* Tab styling - make sure to use an inverted icon for the selected tab
    (brighttext only covers the unselected tabs) */
 .tab-close-button[selected=true]:not(:hover) {
   -moz-image-region: rect(0, 64px, 16px, 48px);
 }
 @media (min-resolution: 2dppx) {
-  :root[devtoolstheme="dark"] .findbar-closebutton:not(:hover),
+  .findbar-closebutton:-moz-lwtheme-brighttext :not(:hover),
   .tab-close-button[selected=true]:not(:hover) {
     -moz-image-region: rect(0, 128px, 32px, 96px);
   }

browser/themes/shared/compacttheme.inc.css

@@ -14,7 +14,7 @@
   --backbutton-urlbar-overlap: 0px;
 }
 
-:root[devtoolstheme="dark"] {
+:root:-moz-lwtheme-brighttext {
   /* Chrome */
   --chrome-background-color: #272b35;
   --chrome-color: #F5F7FA;
@@ -50,8 +50,8 @@
 }
 
 /* Override the lwtheme-specific styling for toolbar buttons */
-:root[devtoolstheme="dark"],
-:root[devtoolstheme="dark"] toolbar:-moz-lwtheme {
+:root:-moz-lwtheme-brighttext,
+toolbar:-moz-lwtheme-brighttext  {
   --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
   --toolbarbutton-hover-boxshadow: none;
   --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
@@ -62,7 +62,7 @@
 
 }
 
-:root[devtoolstheme="light"] {
+:root:-moz-lwtheme-darktext {
   --url-and-searchbar-background-color: #fff;
 
   --chrome-background-color: #E3E4E6;
@@ -85,8 +85,8 @@
 }
 
 /* Override the lwtheme-specific styling for toolbar buttons */
-:root[devtoolstheme="light"],
-:root[devtoolstheme="light"] toolbar:-moz-lwtheme {
+:root:-moz-lwtheme-darktext,
+toolbar:-moz-lwtheme-darktext {
   --toolbarbutton-hover-background: #eaeaea;
   --toolbarbutton-hover-boxshadow: none;
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
@@ -197,8 +197,7 @@ toolbar[brighttext] #downloads-indicator-counter {
 }
 
 %filter substitution
-%define selectorPrefix :root[devtoolstheme="dark"] 
-%define selectorSuffix :-moz-lwtheme
+%define selectorSuffix :-moz-lwtheme-brighttext
 %define iconVariant -white
 %include identity-block/icons.inc.css
 
@@ -213,11 +212,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
   margin-inline-start: 0;
 }
 
-:root[devtoolstheme="dark"] #urlbar-zoom-button:hover {
+#urlbar-zoom-button:-moz-lwtheme-brighttext:hover {
   background-color: rgba(255,255,255,.2);
 }
 
-:root[devtoolstheme="dark"] #urlbar-zoom-button:hover:active {
+#urlbar-zoom-button:-moz-lwtheme-brighttext:hover:active {
   background-color: rgba(255,255,255,.3);
 }
 

browser/themes/shared/identity-block/icons.inc.css

@@ -4,59 +4,59 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
-@selectorPrefix@#identity-icon@selectorSuffix@ {
+#identity-icon@selectorSuffix@ {
   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal@iconVariant@);
 }
 
-@selectorPrefix@#identity-box:hover > #identity-icon:not(.no-hover)@selectorSuffix@,
-@selectorPrefix@#identity-box[open=true] > #identity-icon@selectorSuffix@ {
+#identity-box:hover > #identity-icon:not(.no-hover)@selectorSuffix@,
+#identity-box[open=true] > #identity-icon@selectorSuffix@ {
   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover@iconVariant@);
 }
 
-@selectorPrefix@#identity-box.grantedPermissions > #identity-icon@selectorSuffix@ {
+#identity-box.grantedPermissions > #identity-icon@selectorSuffix@ {
   list-style-image: url(chrome://browser/skin/identity-icon.svg#notice@iconVariant@);
 }
 
-@selectorPrefix@#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover)@selectorSuffix@,
-@selectorPrefix@#identity-box.grantedPermissions[open=true] > #identity-icon@selectorSuffix@ {
+#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover)@selectorSuffix@,
+#identity-box.grantedPermissions[open=true] > #identity-icon@selectorSuffix@ {
   list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover@iconVariant@);
 }
 
-@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon@selectorSuffix@ {
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon@selectorSuffix@ {
   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
 }
 
 
-@selectorPrefix@#tracking-protection-icon@selectorSuffix@ {
+#tracking-protection-icon@selectorSuffix@ {
   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled@iconVariant@);
 }
 
-@selectorPrefix@#tracking-protection-icon[state="loaded-tracking-content"]@selectorSuffix@ {
+#tracking-protection-icon[state="loaded-tracking-content"]@selectorSuffix@ {
   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled@iconVariant@);
 }
 
 
-@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon@selectorSuffix@,
-@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon@selectorSuffix@,
-@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon@selectorSuffix@ {
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon@selectorSuffix@,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon@selectorSuffix@,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon@selectorSuffix@ {
   list-style-image: url(chrome://browser/skin/connection-secure.svg);
   visibility: visible;
 }
 
-@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon@selectorSuffix@ {
+#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon@selectorSuffix@ {
   list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon@iconVariant@);
   visibility: visible;
 }
 
-@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon@selectorSuffix@,
-@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon@selectorSuffix@ {
+#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon@selectorSuffix@,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon@selectorSuffix@ {
   list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon@iconVariant@);
   visibility: visible;
 }
 
-@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon@selectorSuffix@,
-@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon@selectorSuffix@,
-@selectorPrefix@#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon@selectorSuffix@ {
+#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon@selectorSuffix@,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon@selectorSuffix@,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon@selectorSuffix@ {
   list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon@iconVariant@);
   visibility: visible;
 }

browser/themes/shared/identity-block/identity-block.inc.css

@@ -6,12 +6,10 @@
 
 %filter substitution
 
-%define selectorPrefix
 %define selectorSuffix
 %define iconVariant
 %include icons.inc.css
 
-%define selectorPrefix
 %define selectorSuffix :-moz-lwtheme
 %define iconVariant -black
 %include icons.inc.css

browser/themes/windows/compacttheme.css

@@ -6,10 +6,6 @@
 
 :root {
   --forwardbutton-width: 29px;
-}
-
-:root[devtoolstheme="dark"],
-:root[devtoolstheme="light"] {
    /* Matches the #browser-border-start, #browser-border-end color */
   --chrome-nav-bar-separator-color: rgba(10, 31, 51, 0.35);
 }
@@ -100,8 +96,8 @@
   text-shadow: none !important;
 }
 
-:root[devtoolstheme="dark"] .findbar-closebutton,
-:root[devtoolstheme="dark"] #sidebar-header > .close-icon,
+.findbar-closebutton:-moz-lwtheme-brighttext,
+#sidebar-header > .close-icon:-moz-lwtheme-brighttext,
 /* Tab styling - make sure to use an inverted icon for the selected tab
    (brighttext only covers the unselected tabs) */
 .tab-close-button[selected=true] {
@@ -109,8 +105,8 @@
 }
 
 @media (min-resolution: 1.1dppx) {
-  :root[devtoolstheme="dark"] .findbar-closebutton,
-  :root[devtoolstheme="dark"] #sidebar-header > .close-icon,
+  .findbar-closebutton:-moz-lwtheme-brighttext,
+  #sidebar-header > .close-icon:-moz-lwtheme-brighttext,
   .tab-close-button[selected=true] {
     list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
   }
@@ -279,34 +275,33 @@
   }
 
   /* Force white caption buttons for the dark theme on Windows 10 */
-  :root[devtoolstheme="dark"] #titlebar-min {
+  #titlebar-min:-moz-lwtheme-brighttext {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-white);
   }
-  :root[devtoolstheme="dark"] #titlebar-max {
+  #titlebar-max:-moz-lwtheme-brighttext {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-white);
   }
-  #main-window[devtoolstheme="dark"][sizemode="maximized"] #titlebar-max {
+  #main-window[sizemode="maximized"] #titlebar-max:-moz-lwtheme-brighttext {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-white);
   }
-  :root[devtoolstheme="dark"] #titlebar-close {
+  #titlebar-close:-moz-lwtheme-brighttext {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
   }
 
   /* ... and normal ones for the light theme on Windows 10 */
-  :root[devtoolstheme="light"] #titlebar-min {
+  #titlebar-min:-moz-lwtheme-darktext {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
   }
-  :root[devtoolstheme="light"] #titlebar-max {
+  #titlebar-max:-moz-lwtheme-darktext {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
   }
-  #main-window[devtoolstheme="light"][sizemode="maximized"] #titlebar-max {
+  #main-window[sizemode="maximized"] #titlebar-max:-moz-lwtheme-darktext {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
   }
-  :root[devtoolstheme="light"] #titlebar-close {
+  #titlebar-close:-moz-lwtheme-darktext {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
   }
-
-  :root[devtoolstheme="light"] #titlebar-close:hover {
+  #titlebar-close:-moz-lwtheme-darktext:hover {
     list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
   }
 }

toolkit/modules/AppConstants.jsm

@@ -260,6 +260,13 @@ this.AppConstants = Object.freeze({
   false,
 #endif
 
+  INSTALL_COMPACT_THEMES:
+#ifdef INSTALL_COMPACT_THEMES
+  true,
+#else
+  false,
+#endif
+
   MENUBAR_CAN_AUTOHIDE:
 #ifdef MENUBAR_CAN_AUTOHIDE
   true,

toolkit/modules/moz.build

@@ -103,6 +103,7 @@ EXTRA_JS_MODULES += [
 EXTRA_JS_MODULES.third_party.jsesc += ['third_party/jsesc/jsesc.js']
 EXTRA_JS_MODULES.sessionstore += ['sessionstore/Utils.jsm']
 
+DEFINES['INSTALL_COMPACT_THEMES'] = 1
 if CONFIG['MOZ_WIDGET_TOOLKIT'] in ('windows', 'cocoa'):
     DEFINES['CAN_DRAW_IN_TITLEBAR'] = 1