Bug 1961393 - Show current theme on about:editprofile if not in default list. r=profiles-reviewers,tbersentes,jhirsch

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

browser/components/profiles/ProfilesParent.sys.mjs

@@ -390,25 +390,30 @@ export class ProfilesParent extends JSWindowActorParent {
     let themes = [];
     for (let [themeId, themeObj] of PROFILE_THEMES_MAP) {
       let theme = await lazy.AddonManager.getAddonByID(themeId);
-      if (theme) {
+      themes.push({
-        themes.push({
+        id: themeId,
-          id: themeId,
+        dataL10nId: themeObj.dataL10nId,
-          dataL10nId: themeObj.dataL10nId,
+        isActive: theme?.isActive ?? false,
-          isActive: theme.isActive,
+        ...themeObj.colors,
-          ...themeObj.colors,
+        isDark: themeObj.isDark,
-          isDark: themeObj.isDark,
+        useInAutomation: themeObj?.useInAutomation,
-          useInAutomation: themeObj?.useInAutomation,
+      });
-        });
+    }
-      } else {
+
-        themes.push({
+    let activeAddons = await lazy.AddonManager.getActiveAddons(["theme"]);
-          id: themeId,
+    let currentTheme = activeAddons.addons[0];
-          dataL10nId: themeObj.dataL10nId,
+
-          isActive: false,
+    // Only add the current theme if it's not one of the default 10 themes.
-          ...themeObj.colors,
+    if (!themes.find(t => t.id === currentTheme.id)) {
-          isDark: themeObj.isDark,
+      let safeCurrentTheme = {
-          useInAutomation: themeObj?.useInAutomation,
+        id: currentTheme.id,
-        });
+        name: currentTheme.name,
-      }
+        isActive: currentTheme.isActive,
+        chromeColor: SelectableProfileService.currentProfile.theme.themeBg,
+        toolbarColor: SelectableProfileService.currentProfile.theme.themeFg,
+      };
+
+      themes.push(safeCurrentTheme);
     }
 
     return themes;

browser/components/profiles/SelectableProfileService.sys.mjs

@@ -723,8 +723,8 @@ class SelectableProfileServiceClass extends EventEmitter {
 
     let theme = isDark && !!data.darkTheme ? data.darkTheme : data.theme;
 
-    let themeFg = theme.toolbar_text;
+    let themeFg = theme.toolbar_text || theme.textcolor;
-    let themeBg = theme.toolbarColor;
+    let themeBg = theme.toolbarColor || theme.accentcolor;
 
     if (theme.id === DEFAULT_THEME_ID || !themeFg || !themeBg) {
       window.addEventListener(

browser/components/profiles/content/edit-profile-card.mjs

@@ -5,7 +5,7 @@
 /* eslint-env mozilla/remote-page */
 
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
-import { html } from "chrome://global/content/vendor/lit.all.mjs";
+import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
 
 /**
  * Like DeferredTask but usable from content.
@@ -345,12 +345,15 @@ export class EditProfileCard extends MozLitElement {
       value=${this.profile.themeId}
       data-l10n-id="edit-profile-page-theme-header-2"
       name="theme"
-      id="themes"
       @click=${this.handleThemeClick}
     >
       ${this.themes.map(
         t =>
-          html`<profiles-group-item l10nId=${t.dataL10nId} value=${t.id}>
+          html`<profiles-group-item
+            l10nId=${ifDefined(t.dataL10nId)}
+            name=${ifDefined(t.name)}
+            value=${t.id}
+          >
             <profiles-theme-card
               .theme=${t}
               value=${t.id}

browser/components/profiles/content/profiles-group.mjs

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* eslint-disable jsdoc/check-tag-names */
 
-import { html } from "chrome://global/content/vendor/lit.all.mjs";
+import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
 import {
   MozRadioGroup,
   MozRadio,
@@ -96,6 +96,7 @@ export class ProfilesGroupItem extends MozRadio {
 
   static properties = {
     l10nId: { type: String },
+    name: { type: String },
   };
 
   connectedCallback() {
@@ -119,8 +120,8 @@ export class ProfilesGroupItem extends MozRadio {
           is="moz-label"
           part="label"
           for="input"
-          data-l10n-id=${this.l10nId}
+          data-l10n-id=${ifDefined(this.l10nId)}
-        ></label
+          >${this.name}</label
         >${super.inputTemplate()}
         <slot></slot>
       </div>

browser/components/profiles/content/profiles-theme-card.css

@@ -58,6 +58,13 @@ moz-card {
   border-top-left-radius: var(--preview-image-border-radius);
   border-top-right-radius: var(--preview-image-border-radius);
 
+  /*
+   * We set the background color here in case the
+   * ProfilesThemeCard.theme.contentColor doesn't exist. For example, when the
+   * theme card is a theme from AMO and not one of the default themes.
+   */
+  background-color: var(--newtab-background-color, var(--in-content-page-background));
+
   > img {
     -moz-context-properties: fill, stroke, fill-opacity;
     width: 100%;

browser/components/profiles/content/profiles-theme-card.mjs

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
-import { html } from "chrome://global/content/vendor/lit.all.mjs";
+import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
 
 /**
  * Element used for displaying a theme on the about:editprofile and about:newprofile pages.
@@ -20,11 +20,6 @@ export class ProfilesThemeCard extends MozLitElement {
     imgHolder: ".img-holder",
   };
 
-  firstUpdated() {
-    super.firstUpdated();
-    this.updateThemeImage();
-  }
-
   updateThemeImage() {
     if (!this.theme) {
       return;
@@ -34,17 +29,20 @@ export class ProfilesThemeCard extends MozLitElement {
       // For system theme, we use a special SVG that shows the light/dark wave design
       this.backgroundImg.src =
         "chrome://browser/content/profiles/assets/system-theme-background.svg";
-      // Reset any inline styles since the SVG has its own colors
-      this.backgroundImg.style.fill = "";
-      this.backgroundImg.style.stroke = "";
-      this.imgHolder.style.backgroundColor = "";
     } else {
+      let contentColor;
+      if (!this.theme.contentColor) {
+        let styles = window.getComputedStyle(document.body);
+        contentColor = styles.getPropertyValue("background-color");
+      }
+
       // For other themes, use the standard SVG with dynamic colors
       this.backgroundImg.src =
         "chrome://browser/content/profiles/assets/theme-selector-background.svg";
       this.backgroundImg.style.fill = this.theme.chromeColor;
       this.backgroundImg.style.stroke = this.theme.toolbarColor;
-      this.imgHolder.style.backgroundColor = this.theme.contentColor;
+      this.imgHolder.style.backgroundColor =
+        this.theme.contentColor ?? contentColor;
     }
   }
 
@@ -71,9 +69,11 @@ export class ProfilesThemeCard extends MozLitElement {
           </div>
           <div
             class="theme-name"
-            id=${this.theme.dataL10nId}
+            id=${this.theme.name}
-            data-l10n-id=${this.theme.dataL10nId}
+            data-l10n-id=${ifDefined(this.theme.dataL10nId)}
-          ></div>
+          >
+            ${this.theme.name}
+          </div>
         </div>
       </moz-card>`;
   }

browser/components/profiles/tests/browser/browser.toml

@@ -39,6 +39,8 @@ skip-if = ["os == 'mac' && os_version == '15.30' && arch == 'aarch64' && opt &&
 ["browser_preferences.js"]
 fail-if = ["a11y_checks"] # Bug 1955503
 
+["browser_test_current_theme_from_amo.js"]
+
 ["browser_test_last_tab.js"]
 
 ["browser_test_nimbus_feature.js"]

browser/components/profiles/tests/browser/browser_test_current_theme_from_amo.js

@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const lazy = {};
+ChromeUtils.defineESModuleGetters(lazy, {
+  AddonManager: "resource://gre/modules/AddonManager.sys.mjs",
+});
+
+const { AddonTestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/AddonTestUtils.sys.mjs"
+);
+
+add_task(async function test_currentThemeFromAMOExistsOnEditPage() {
+  await initGroupDatabase();
+  let profile = SelectableProfileService.currentProfile;
+  Assert.ok(profile, "Should have a profile now");
+
+  const BLUE_THEME_ID = "blue@test.mozilla.org";
+  let blueTheme = await AddonTestUtils.createTempWebExtensionFile({
+    manifest: {
+      name: "blue theme",
+      version: "1.0",
+      browser_specific_settings: { gecko: { id: BLUE_THEME_ID } },
+      theme: {
+        colors: {
+          frame: "blue",
+        },
+      },
+    },
+  });
+
+  let install = await lazy.AddonManager.getInstallForFile(
+    blueTheme,
+    "application/x-xpinstall"
+  );
+  const themeEnabled = AddonTestUtils.promiseAddonEvent(
+    "onEnabled",
+    addon => addon.id === BLUE_THEME_ID
+  );
+
+  install.install().then(themeAddon => themeAddon.enable());
+
+  await themeEnabled;
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: "about:editprofile",
+    },
+    async browser => {
+      await SpecialPowers.spawn(browser, [], async () => {
+        let editProfileCard =
+          content.document.querySelector("edit-profile-card").wrappedJSObject;
+
+        await ContentTaskUtils.waitForCondition(
+          () => editProfileCard.initialized,
+          "Waiting for edit-profile-card to be initialized"
+        );
+
+        await editProfileCard.updateComplete;
+
+        Assert.equal(
+          editProfileCard.themes.length,
+          11,
+          "Should have 11 themes with the currennt theme from AMO"
+        );
+
+        Assert.equal(
+          editProfileCard.themes.at(-1).id,
+          "blue@test.mozilla.org",
+          "The last theme should be the blue test theme"
+        );
+      });
+    }
+  );
+
+  const blueThemeAddon = await AddonManager.getAddonByID(BLUE_THEME_ID);
+  await blueThemeAddon.uninstall();
+});