Bug 1725468 - Add prototype monochromatic theme for UX iteration. r=Gijs,amy
authorHarry Twyford <htwyford@mozilla.com>
Wed, 18 Aug 2021 13:13:38 +0000
changeset 589204 8c8b26a1658830a74b0b1e4f4e2f8cef5b20b1d6
parent 589202 ca83c0d8e6549b08ebdaa74ffd25ccfe4fb50cfd
child 589205 fdb1c20795e93e49113400ba40c04d6255a35a1c
push id38717
push usermlaza@mozilla.com
push dateThu, 19 Aug 2021 03:33:48 +0000
treeherdermozilla-central@3a83a5c25a2e [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
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/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)