Bug 1950167, 1953316 - Use InspectorUtils.colorToRGBA to get correct color values for profiles themeObserver. r=profiles-reviewers,mossop

Differential Revision: https://phabricator.services.mozilla.com/D241229

browser/components/profiles/SelectableProfileService.sys.mjs

@@ -119,6 +119,7 @@ class SelectableProfileServiceClass extends EventEmitter {
 
     this.onNimbusUpdate = this.onNimbusUpdate.bind(this);
     this.themeObserver = this.themeObserver.bind(this);
+    this.matchMediaObserver = this.matchMediaObserver.bind(this);
     this.prefObserver = (subject, topic, prefName) =>
       this.flushSharedPrefToDatabase(prefName);
     this.#profileService = Cc[
@@ -405,6 +406,10 @@ class SelectableProfileServiceClass extends EventEmitter {
       "lightweight-theme-styling-update"
     );
 
+    let window = Services.wm.getMostRecentBrowserWindow();
+    let prefersDarkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    prefersDarkQuery.addEventListener("change", this.matchMediaObserver);
+
     this.#initialized = true;
 
     // this.#currentProfile is unset in the case that the database has only just been created. We
@@ -821,6 +826,35 @@ class SelectableProfileServiceClass extends EventEmitter {
     }
   }
 
+  /**
+   * The default theme uses `light-dark` color function which doesn't apply
+   * correctly to the taskbar avatar icon. We use `InspectorUtils.colorToRGBA`
+   * to get the current rgba values for a theme. This way the color values can
+   * be correctly applied to the taskbar avatar icon.
+   *
+   * @returns {object}
+   *  themeBg {string}: the background color in rgba(r, g, b, a) format
+   *  themeFg {string}: the foreground color in rgba(r, g, b, a) format
+   */
+  getColorsForDefaultTheme() {
+    let window = Services.wm.getMostRecentBrowserWindow();
+    // The computedStyles object is a live CSSStyleDeclaration.
+    let computedStyles = window.getComputedStyle(
+      window.document.documentElement
+    );
+
+    let themeFgColor = computedStyles.getPropertyValue("--toolbar-color");
+    let themeBgColor = computedStyles.getPropertyValue("--toolbar-bgcolor");
+
+    let bg = InspectorUtils.colorToRGBA(themeBgColor, window.document);
+    let themeBg = `rgba(${bg.r}, ${bg.r}, ${bg.b}, ${bg.a})`;
+
+    let fg = InspectorUtils.colorToRGBA(themeFgColor, window.document);
+    let themeFg = `rgba(${fg.r}, ${fg.g}, ${fg.b}, ${fg.a})`;
+
+    return { themeBg, themeFg };
+  }
+
   /**
    * The observer function that watches for theme changes and updates the
    * current profile of a theme change.
@@ -849,16 +883,10 @@ class SelectableProfileServiceClass extends EventEmitter {
     let themeBg = theme.toolbarColor;
 
     if (theme.id === "default-theme@mozilla.org" || !themeFg || !themeBg) {
-      // The computedStyles object is a live CSSStyleDeclaration.
-      let computedStyles = window.getComputedStyle(
-        window.document.documentElement
-      );
-
       window.addEventListener(
         "windowlwthemeupdate",
         () => {
-          themeFg = computedStyles.getPropertyValue("--toolbar-color");
+          ({ themeBg, themeFg } = this.getColorsForDefaultTheme());
-          themeBg = computedStyles.getPropertyValue("--toolbar-bgcolor");
 
           this.currentProfile.theme = {
             themeId: theme.id,
@@ -879,6 +907,20 @@ class SelectableProfileServiceClass extends EventEmitter {
     }
   }
 
+  /**
+   * The observer function that watches for OS theme changes and updates the
+   * current profile of a theme change.
+   */
+  matchMediaObserver() {
+    let { themeBg, themeFg } = this.getColorsForDefaultTheme();
+
+    this.currentProfile.theme = {
+      themeId: this.currentProfile.theme.themeId,
+      themeFg,
+      themeBg,
+    };
+  }
+
   /**
    * Fetch all prefs from the DB and write to the current instance.
    */

browser/components/profiles/tests/browser/browser_edit_profile_test.js

@@ -588,11 +588,6 @@ add_task(async function test_edit_profile_system_theme() {
   );
   await defaultTheme.enable();
 
-  let computedStyles = window.getComputedStyle(window.document.documentElement);
-
-  let themeFg = computedStyles.getPropertyValue("--toolbar-color");
-  let themeBg = computedStyles.getPropertyValue("--toolbar-bgcolor");
-
   // Set to light theme so we can select the system theme in the page
   let lightTheme = await lazy.AddonManager.getAddonByID(
     "firefox-compact-light@mozilla.org"
@@ -636,8 +631,12 @@ add_task(async function test_edit_profile_system_theme() {
         await new Promise(resolve => content.setTimeout(resolve, 100));
       });
 
+      await themePromise;
+
       let curProfile = await SelectableProfileService.getProfile(profile.id);
 
+      let themeColors = SelectableProfileService.getColorsForDefaultTheme();
+
       Assert.equal(
         curProfile.theme.themeId,
         expectedThemeId,
@@ -650,17 +649,15 @@ add_task(async function test_edit_profile_system_theme() {
         "Current profile theme was updated"
       );
 
-      await themePromise;
-
       Assert.equal(
-        computedStyles.getPropertyValue("--toolbar-bgcolor"),
+        SelectableProfileService.currentProfile.theme.themeBg,
-        themeBg,
+        themeColors.themeBg,
-        "Theme background color is expected: " + themeBg
+        "Theme background color is expected: " + themeColors.themeBg
       );
       Assert.equal(
-        computedStyles.getPropertyValue("--toolbar-color"),
+        SelectableProfileService.currentProfile.theme.themeFg,
-        themeFg,
+        themeColors.themeFg,
-        "Theme  color is expected: " + themeFg
+        "Theme  color is expected: " + themeColors.themeFg
       );
     }
   );