Bug 1786607 - make about:addons colorway closet CTA label consistent with Firefox View r=rpl,dao

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

browser/components/colorways/tests/browser/head.js

@@ -94,9 +94,8 @@ function initBuiltInThemesStubs(hasActiveCollection = true) {
       id =>
         id === SOFT_COLORWAY_THEME_ID ||
         id === BALANCED_COLORWAY_THEME_ID ||
-        BOLD_COLORWAY_THEME_ID ||
-        NO_INTENSITY_THEME_ID ||
-        NO_INTENSITY_EXPIRED_THEME_ID
+        id === BOLD_COLORWAY_THEME_ID ||
+        id === NO_INTENSITY_THEME_ID
     );
   return sandbox.restore.bind(sandbox);
 }

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -3698,13 +3698,13 @@ class ColorwayClosetCard extends HTMLElement {
 
     // Listen for changes to actively selected theme.
     // Update button label for Colorway Closet card, according to
-    // whether or not a colorway theme is currently enabled.
-    const isCurrentThemeColorway = BuiltInThemes.isMonochromaticTheme(addon.id);
+    // whether or not a colorway theme from the active collection is
+    // currently enabled.
     let colorwaysButton = document.querySelector("[action='open-colorways']");
 
     document.l10n.setAttributes(
       colorwaysButton,
-      isCurrentThemeColorway
+      BuiltInThemes.isColorwayFromCurrentCollection?.(addon.id)
         ? "theme-colorways-button-colorway-enabled"
         : "theme-colorways-button"
     );
@@ -3775,13 +3775,9 @@ class ColorwayClosetCard extends HTMLElement {
     );
 
     let colorwaysButton = card.querySelector("[action='open-colorways']");
-    const isCurrentThemeColorway = BuiltInThemes.isMonochromaticTheme(
-      ACTIVE_THEME_ID
-    );
-
     document.l10n.setAttributes(
       colorwaysButton,
-      isCurrentThemeColorway
+      BuiltInThemes.isColorwayFromCurrentCollection?.(ACTIVE_THEME_ID)
         ? "theme-colorways-button-colorway-enabled"
         : "theme-colorways-button"
     );

toolkit/mozapps/extensions/test/browser/browser_colorwaycloset_aboutaddons.js

@@ -332,7 +332,7 @@ add_task(async function testColorwayNoActiveCollection() {
 
 /**
  * Tests that the Colorway Closet card's CTA button changes text when there
- * is a colorway enabled.
+ * is a colorway from the active collection enabled.
  */
 add_task(async function testColorwayButtonTextWithColorwayEnabled() {
   const clearBuiltInThemesStubs = initBuiltInThemesStubs();
@@ -340,7 +340,14 @@ add_task(async function testColorwayButtonTextWithColorwayEnabled() {
     set: [["browser.theme.colorway-closet", true]],
   });
 
-  const { addon } = await installTestTheme(NO_INTENSITY_THEME_ID);
+  const { addon: validColorway } = await installTestTheme(
+    BALANCED_COLORWAY_THEME_ID
+  );
+  const { addon: expiredColorway } = await installTestTheme(
+    NO_INTENSITY_EXPIRED_THEME_ID
+  );
+
+  await expiredColorway.disable();
 
   let win = await loadInitialView("theme");
   let doc = win.document;
@@ -348,8 +355,6 @@ add_task(async function testColorwayButtonTextWithColorwayEnabled() {
   // Add mocked fluent resources
   doc.l10n.addResourceIds(["mock-colorways.ftl"]);
 
-  await addon.disable();
-
   let colorwaySection = getSection(doc, "colorways-section");
   ok(colorwaySection, "colorway section was found");
 
@@ -362,22 +367,31 @@ add_task(async function testColorwayButtonTextWithColorwayEnabled() {
   is(
     colorwaysButton.getAttribute("data-l10n-id"),
     "theme-colorways-button",
-    "button has the expected fluent id when no colorways theme is not enabled"
+    "button has the expected fluent id when no colorway is enabled"
   );
 
-  await addon.enable();
+  await expiredColorway.enable();
+
+  is(
+    colorwaysButton.getAttribute("data-l10n-id"),
+    "theme-colorways-button",
+    "button fluent id remains unchanged since enabled colorway is not in active collection"
+  );
+
+  await validColorway.enable();
 
   is(
     colorwaysButton.getAttribute("data-l10n-id"),
     "theme-colorways-button-colorway-enabled",
-    "button has the expected fluent id when colorways theme is enabled"
+    "button fluent id is updated since newly enabled colorway is found in active collection"
   );
 
   // Make sure the updated fluent id is also defined in the fluent files loaded
   await doc.l10n.translateFragment(colorwaySection);
 
   await closeView(win);
-  await addon.uninstall(true);
+  await validColorway.uninstall(true);
+  await expiredColorway.uninstall(true);
   await SpecialPowers.popPrefEnv();
   clearBuiltInThemesStubs();
 });