Bug 1725468 - Add prototype monochromatic theme for UX iteration. r=Gijs,amy
☠☠ backed out by bdfaf07df495 ☠ ☠
authorHarry Twyford <htwyford@mozilla.com>
Tue, 17 Aug 2021 23:28:31 +0000
changeset 589168 7546da95431a929f0579430b031340ac2cae048c
parent 589167 f37913e7cb9295617b7e5a7ac5f462f29df583b4
child 589169 66e7f6f416b35c06cc33f540e08a59b42d2de99d
push id148189
push userachurchwell@mozilla.com
push dateTue, 17 Aug 2021 23:30:52 +0000
treeherderautoland@7546da95431a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, amy
bugs1725468
milestone93.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1725468 - Add prototype monochromatic theme for UX iteration. r=Gijs,amy Differential Revision: https://phabricator.services.mozilla.com/D122515
browser/components/BrowserGlue.jsm
browser/components/customizableui/CustomizeMode.jsm
browser/themes/addons/jar.mn
browser/themes/addons/monochromatic-purple/icon.svg
browser/themes/addons/monochromatic-purple/manifest.json
browser/tools/mozscreenshots/mozscreenshots/extension/configurations/LightweightThemes.jsm
toolkit/mozapps/extensions/content/aboutaddons.js
toolkit/mozapps/extensions/content/firefox-monochromatic-purple.svg
toolkit/mozapps/extensions/jar.mn
--- a/browser/components/BrowserGlue.jsm
+++ b/browser/components/BrowserGlue.jsm
@@ -1369,16 +1369,47 @@ BrowserGlue.prototype = {
     );
 
     AddonManager.maybeInstallBuiltinAddon(
       "firefox-alpenglow@mozilla.org",
       "1.4",
       "resource://builtin-themes/alpenglow/"
     );
 
+    if (
+      AppConstants.NIGHTLY_BUILD &&
+      Services.prefs.getBoolPref(
+        "browser.theme.temporary.monochromatic.enabled",
+        false
+      )
+    ) {
+      // Temporarily install a prototype monochromatic theme for UX iteration.
+      // We uninstall it during shutdown so it does not persist if the pref is
+      // disabled.
+      const kMonochromaticThemeID = "firefox-monochromatic-purple@mozilla.org";
+      AddonManager.maybeInstallBuiltinAddon(
+        kMonochromaticThemeID,
+        "1.0",
+        "resource://builtin-themes/monochromatic-purple/"
+      );
+      AsyncShutdown.profileChangeTeardown.addBlocker(
+        "Uninstall Prototype Monochromatic Theme",
+        async () => {
+          try {
+            let addon = await AddonManager.getAddonByID(kMonochromaticThemeID);
+            await addon.uninstall();
+          } catch (e) {
+            Cu.reportError(
+              "Failed to uninstall firefox-monochromatic-purple on shutdown"
+            );
+          }
+        }
+      );
+    }
+
     if (AppConstants.MOZ_NORMANDY) {
       Normandy.init();
     }
 
     SaveToPocket.init();
 
     AboutHomeStartupCache.init();
 
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -83,16 +83,18 @@ XPCOMUtils.defineLazyGetter(this, "log",
   };
   return new scope.ConsoleAPI(consoleOptions);
 });
 
 const DEFAULT_THEME_ID = "default-theme@mozilla.org";
 const LIGHT_THEME_ID = "firefox-compact-light@mozilla.org";
 const DARK_THEME_ID = "firefox-compact-dark@mozilla.org";
 const ALPENGLOW_THEME_ID = "firefox-alpenglow@mozilla.org";
+const MONOCHROMATIC_PURPLE_THEME_ID =
+  "firefox-monochromatic-purple@mozilla.org";
 
 const _defaultImportantThemes = [
   DEFAULT_THEME_ID,
   LIGHT_THEME_ID,
   DARK_THEME_ID,
   ALPENGLOW_THEME_ID,
 ];
 
@@ -1579,16 +1581,24 @@ CustomizeMode.prototype = {
       return tbb;
     }
 
     let themes = await AddonManager.getAddonsByTypes(["theme"]);
     let currentTheme = themes.find(theme => theme.isActive);
 
     // Move the current theme (if any) and the default themes to the start:
     let importantThemes = new Set(_defaultImportantThemes);
+    if (
+      Services.prefs.getBoolPref(
+        "browser.theme.temporary.monochromatic.enabled",
+        false
+      )
+    ) {
+      importantThemes.add(MONOCHROMATIC_PURPLE_THEME_ID);
+    }
     if (currentTheme) {
       importantThemes.add(currentTheme.id);
     }
     let importantList = [];
     for (let importantTheme of importantThemes) {
       importantList.push(
         ...themes.splice(
           themes.findIndex(theme => theme.id == importantTheme),
--- a/browser/themes/addons/jar.mn
+++ b/browser/themes/addons/jar.mn
@@ -10,8 +10,11 @@ browser.jar:
 
   content/builtin-themes/dark                      (dark/*.svg)
   content/builtin-themes/dark                      (dark/*.css)
   content/builtin-themes/dark/manifest.json        (dark/manifest.json)
 
   content/builtin-themes/light                     (light/*.svg)
   content/builtin-themes/light                     (light/*.css)
   content/builtin-themes/light/manifest.json       (light/manifest.json)
+
+  content/builtin-themes/monochromatic-purple                    (monochromatic-purple/*.svg)
+  content/builtin-themes/monochromatic-purple/manifest.json      (monochromatic-purple/manifest.json)
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic-purple/icon.svg
@@ -0,0 +1,7 @@
+<!-- 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 width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M53.8717 54C66.0976 41.5959 66.0425 21.6295 53.7065 9.29348C41.3705 -3.04253 21.4041 -3.09758 9 9.12833L53.8717 54Z" fill="rgb(150,43,185)"/>
+  <path d="M9.12833 9C-3.09758 21.4041 -3.04253 41.3705 9.29348 53.7065C21.6295 66.0425 41.5959 66.0976 54 53.8717L9.12833 9Z" fill="rgb(247,227,255)"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic-purple/manifest.json
@@ -0,0 +1,73 @@
+{
+  "manifest_version": 2,
+
+  "applications": {
+    "gecko": {
+      "id": "firefox-monochromatic-purple@mozilla.org"
+    }
+  },
+
+  "name": "Firefox Monochromatic - Purple",
+  "description": "Use a purple appearance for buttons, menus, and windows.",
+  "author": "Mozilla",
+  "version": "1.0",
+
+  "icons": { "32": "icon.svg" },
+
+  "theme": {
+    "colors": {
+      "toolbar": "color-mix(in srgb, rgb(247,227,255) 60%, white)",
+      "frame": "rgb(247,227,255)",
+      "toolbar_text": "color-mix(in srgb, rgb(247,227,255) 15%, black)",
+      "toolbar_field": "rgb(247,227,255)",
+      "toolbar_field_focus": "color-mix(in srgb, rgb(247,227,255) 60%, white)",
+      "toolbar_field_text": "color-mix(in srgb, rgb(247,227,255) 15%, black)",
+      "toolbar_field_highlight": "color-mix(in srgb, rgb(247,227,255) 5%, white)",
+      "toolbar_bottom_separator": "rgb(247,227,255)",
+      "tab_background_text": "color-mix(in srgb, rgb(247,227,255) 15%, black)",
+      "tab_line": "color-mix(in srgb, rgb(247,227,255) 15%, white)",
+      "ntp_background": "color-mix(in srgb, rgb(247,227,255) 40%, white)",
+      "ntp_text": "color-mix(in srgb, rgb(247,227,255) 15%, black)",
+      "popup": "color-mix(in srgb, rgb(247,227,255) 60%, white)",
+      "popup_text": "color-mix(in srgb, rgb(247,227,255) 15%, black)",
+      "popup_border": "color-mix(in srgb, rgb(247,227,255) 60%, white)",
+      "popup_highlight": "color-mix(in srgb, rgb(247,227,255) 25%, white)",
+      "popup_highlight_text": "color-mix(in srgb, rgb(247,227,255) 15%, black)",
+      "sidebar": "color-mix(in srgb, rgb(247,227,255) 80%, white)",
+      "sidebar_text": "color-mix(in srgb, rgb(247,227,255) 15%, black)",
+      "sidebar_highlight": "color-mix(in srgb, rgb(247,227,255) 60%, white)",
+      "focus_outline": "color-mix(in srgb, rgb(247,227,255) 65%, black)"
+    }
+  },
+
+  "dark_theme": {
+    "colors": {
+      "toolbar": "color-mix(in srgb, rgb(150,43,185) 85%, white)",
+      "frame": "rgb(150,43,185)",
+      "toolbar_text": "color-mix(in srgb, rgb(150,43,185) 10%, white)",
+      "toolbar_field": "rgb(150,43,185)",
+      "toolbar_field_focus": "color-mix(in srgb, rgb(150,43,185) 85%, white)",
+      "toolbar_field_text": "color-mix(in srgb, rgb(150,43,185) 10%, white)",
+      "toolbar_field_highlight": "color-mix(in srgb, rgb(150,43,185) 60%, white)",
+      "toolbar_bottom_separator": "rgb(150,43,185)",
+      "tab_background_text": "color-mix(in srgb, rgb(150,43,185) 10%, white)",
+      "tab_line": "color-mix(in srgb, rgb(150,43,185) 30%, white)",
+      "ntp_background": "color-mix(in srgb, rgb(150,43,185) 75%, white)",
+      "ntp_text": "color-mix(in srgb, rgb(150,43,185) 10%, white)",
+      "popup": "color-mix(in srgb, rgb(150,43,185) 85%, white)",
+      "popup_text": "color-mix(in srgb, rgb(150,43,185) 10%, white)",
+      "popup_border": "color-mix(in srgb, rgb(150,43,185) 60%, white)",
+      "popup_highlight": "color-mix(in srgb, rgb(150,43,185) 95%, white)",
+      "sidebar": "color-mix(in srgb, rgb(150,43,185) 80%, white)",
+      "sidebar_text": "color-mix(in srgb, rgb(150,43,185) 10%, white)",
+      "sidebar_highlight": "color-mix(in srgb, rgb(150,43,185) 60%, white)",
+      "focus_outline": "color-mix(in srgb, rgb(150,43,185) 30%, white)"
+    }
+  },
+
+  "theme_experiment": {
+    "colors": {
+      "focus_outline": "--focus-outline-color"
+    }
+  }
+}
--- a/browser/tools/mozscreenshots/mozscreenshots/extension/configurations/LightweightThemes.jsm
+++ b/browser/tools/mozscreenshots/mozscreenshots/extension/configurations/LightweightThemes.jsm
@@ -48,10 +48,27 @@ var LightweightThemes = {
       selectors: [],
       async applyConfig() {
         let addon = await AddonManager.getAddonByID(
           "firefox-alpenglow@mozilla.org"
         );
         await addon.enable();
       },
     },
+
+    monochromaticPurple: {
+      selectors: [],
+      async applyConfig() {
+        let addon = await AddonManager.getAddonByID(
+          "firefox-monochromatic-purple@mozilla.org"
+        );
+        if (
+          Services.prefs.getBoolPref(
+            "browser.theme.temporary.monochromatic.enabled",
+            false
+          )
+        ) {
+          await addon.enable();
+        }
+      },
+    },
   },
 };
--- a/toolkit/mozapps/extensions/content/aboutaddons.js
+++ b/toolkit/mozapps/extensions/content/aboutaddons.js
@@ -90,16 +90,20 @@ const BUILTIN_THEME_PREVIEWS = new Map([
   [
     "firefox-compact-dark@mozilla.org",
     "chrome://mozapps/content/extensions/firefox-compact-dark.svg",
   ],
   [
     "firefox-alpenglow@mozilla.org",
     "chrome://mozapps/content/extensions/firefox-alpenglow.svg",
   ],
+  [
+    "firefox-monochromatic-purple@mozilla.org",
+    "chrome://mozapps/content/extensions/firefox-monochromatic-purple.svg",
+  ],
 ]);
 
 const PERMISSION_MASKS = {
   enable: AddonManager.PERM_CAN_ENABLE,
   "always-activate": AddonManager.PERM_CAN_ENABLE,
   disable: AddonManager.PERM_CAN_DISABLE,
   "never-activate": AddonManager.PERM_CAN_DISABLE,
   uninstall: AddonManager.PERM_CAN_UNINSTALL,
new file mode 100644
--- /dev/null
+++ b/toolkit/mozapps/extensions/content/firefox-monochromatic-purple.svg
@@ -0,0 +1,46 @@
+<!-- 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 width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="rgb(247,227,255)"/>
+  <g filter="url(#filter0_dd)">
+    <rect x="28" y="5" width="166" height="34" rx="4" fill="color-mix(in srgb, rgb(247,227,255) 60%, white)"/>
+  </g>
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="color-mix(in srgb, rgb(247,227,255) 15%, black)"/>
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="color-mix(in srgb, rgb(247,227,255) 15%, black)"/>
+  <rect y="44" width="680" height="48" fill="color-mix(in srgb, rgb(247,227,255) 60%, white)"/>
+  <circle cx="24" cy="68" r="6.25" stroke-width="1.5" stroke="color-mix(in srgb, rgb(247,227,255) 15%, black)"/>
+  <circle cx="60" cy="68" r="6.25" stroke-width="1.5" stroke="color-mix(in srgb, rgb(247,227,255) 15%, black)"/>
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="rgb(247,227,255)"/>
+  <circle cx="130" cy="68" r="6.25" stroke-width="1.5" stroke="color-mix(in srgb, rgb(247,227,255) 15%, black)"/>
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="color-mix(in srgb, rgb(247,227,255) 15%, black)"/>
+  <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="680" height="92">
+    <path d="M680 92V0H334C321.85 0 312 9.84974 312 22C312 34.1503 302.15 44 290 44H252C238.745 44 228 54.7452 228 68C228 81.2548 217.255 92 204 92H680Z" fill="#C4C4C4"/>
+  </mask>
+  <g mask="url(#mask0)">
+    <rect width="680" height="92" fill="rgb(150,43,185)"/>
+    <rect x="221" y="20" width="121" height="4" rx="2" fill="color-mix(in srgb, rgb(150,43,185) 10%, white)"/>
+    <rect y="44" width="680" height="48" fill="color-mix(in srgb, rgb(150,43,185) 85%, white)"/>
+    <line x1="663" y1="73.75" x2="649" y2="73.75" stroke-width="1.5" stroke="color-mix(in srgb, rgb(150,43,185) 10%, white)"/>
+    <line x1="663" y1="67.75" x2="649" y2="67.75" stroke-width="1.5" stroke="color-mix(in srgb, rgb(150,43,185) 10%, white)"/>
+    <line x1="663" y1="61.75" x2="649" y2="61.75" stroke-width="1.5" stroke="color-mix(in srgb, rgb(150,43,185) 10%, white)"/>
+    <rect x="114" y="52" width="488" height="32" rx="4" fill="rgb(150,43,185)"/>
+    <rect x="146" y="66" width="308" height="4" rx="2" fill="color-mix(in srgb, rgb(150,43,185) 10%, white)"/>
+  </g>
+  <defs>
+    <filter id="filter0_dd" x="24" y="1" width="174" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.5 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.556863 0 0 0 0.9 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>
--- a/toolkit/mozapps/extensions/jar.mn
+++ b/toolkit/mozapps/extensions/jar.mn
@@ -13,16 +13,17 @@ toolkit.jar:
   content/mozapps/extensions/abuse-reports.js                   (content/abuse-reports.js)
   content/mozapps/extensions/abuse-report-frame.html            (content/abuse-report-frame.html)
   content/mozapps/extensions/abuse-report-panel.css             (content/abuse-report-panel.css)
   content/mozapps/extensions/abuse-report-panel.js              (content/abuse-report-panel.js)
   content/mozapps/extensions/default-theme.svg                  (content/default-theme.svg)
   content/mozapps/extensions/drag-drop-addon-installer.js       (content/drag-drop-addon-installer.js)
   content/mozapps/extensions/firefox-compact-dark.svg           (content/firefox-compact-dark.svg)
   content/mozapps/extensions/firefox-compact-light.svg          (content/firefox-compact-light.svg)
+  content/mozapps/extensions/firefox-monochromatic-purple.svg   (content/firefox-monochromatic-purple.svg)
   content/mozapps/extensions/firefox-alpenglow.svg              (content/firefox-alpenglow.svg)
   content/mozapps/extensions/panel-list.css                     (content/panel-list.css)
   content/mozapps/extensions/panel-item.css                     (content/panel-item.css)
   content/mozapps/extensions/rating-star.css                    (content/rating-star.css)
   content/mozapps/extensions/shortcuts.css                      (content/shortcuts.css)
   content/mozapps/extensions/shortcuts.js                       (content/shortcuts.js)
   content/mozapps/extensions/view-controller.js                 (content/view-controller.js)