Bug 1772855 - add preview image and updated subheading for about:addons Colorways card. r=dao,fluent-reviewers,flod,rpl

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

browser/components/colorways/colorwaycloset.ftl

@@ -12,6 +12,9 @@ colorway-intensity-soft = Soft
 colorway-intensity-balanced = Balanced
 colorway-intensity-bold = Bold
 
+# Subheading for colorway collection card in about:addons
+colorway-collection-independent-voices-subheading2 = Colors that change culture.
+
 # Label for the button to start using the selected colorway in the browser
 set-colorway-button = Set Colorway
 colorway-collection-expiry-date-span = Expires { DATETIME($expiryDate, month: "long", day: "numeric") }

browser/components/colorways/jar.mn

@@ -6,3 +6,4 @@ browser.jar:
     content/browser/colorwaycloset.html
     content/browser/colorwaycloset.css
     content/browser/colorwaycloset.js
+    content/browser/colorways/colorway-collection-independent-voices.avif (assets/colorway-collection-independent-voices.avif)

browser/themes/BuiltInThemeConfig.jsm

@@ -415,6 +415,8 @@ const ColorwayCollections = [
       title: "colorway-collection-independent-voices",
       description: "colorway-collection-independent-voices-description",
     },
+    cardImagePath:
+      "chrome://browser/content/colorways/colorway-collection-independent-voices.avif",
   },
 ];
 

toolkit/locales/en-US/toolkit/about/aboutAddons.ftl

@@ -363,7 +363,6 @@ theme-monochromatic-heading = Colorways
 theme-monochromatic-subheading = Vibrant new colorways from { -brand-product-name }. Available for a limited time.
 
 theme-colorways-button = Try Colorways
-colorway-collection-independent-voices-subheading = Make { -brand-short-name } feel a little more you.
 # Variables:
 #   $expiryDate (string) - date on which the colorway collection expires.
 colorway-collection-expiry-date-span = Expires { DATETIME($expiryDate, month: "long", day: "numeric") }

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -863,8 +863,8 @@ section:not(:empty) ~ #empty-addons-message {
 
 #colorways-expiry-date > span {
   display: inline-block;
-  color: black;
-  background: white;
+  color: var(--in-content-page-color);
+  background: var(--in-content-page-background);
   border-radius: 1.5em;
   padding: .2em 1em;
 }
@@ -901,3 +901,13 @@ section:not(:empty) ~ #empty-addons-message {
 #colorways-preview-text-container > p {
   font-size: 1.1em;
 }
+
+#colorways-preview-text-container + .card-heading-image {
+  background-color: var(--in-content-box-background-odd);
+}
+
+@media (prefers-color-scheme: dark) {
+  #colorways-preview-text-container + .card-heading-image {
+    background-color: var(--in-content-page-background);
+  }
+}

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -117,6 +117,8 @@ const PRIVATE_BROWSING_PERMS = {
 
 const L10N_ID_MAPPING = {
   "theme-disabled-heading": "theme-disabled-heading2",
+  "colorway-collection-independent-voices-subheading":
+    "colorway-collection-independent-voices-subheading2",
 };
 
 function getL10nIdMapping(id) {
@@ -3702,7 +3704,7 @@ class ColorwayClosetCard extends HTMLElement {
       document.l10n.setAttributes(colorwayPreviewHeading, l10nId.title);
       document.l10n.setAttributes(
         colorwayPreviewSubHeading,
-        `${l10nId.title}-subheading`
+        getL10nIdMapping(`${l10nId.title}-subheading`)
       );
     }
 
@@ -3722,16 +3724,16 @@ class ColorwayClosetCard extends HTMLElement {
     card.querySelector(".addon-icon").hidden = true;
 
     let preview = card.querySelector(".card-heading-image");
-    // TODO: Bug 1772855 - set preview.src for colorways card preview
-    preview.hidden = false;
-
-    let colorwayExpiryDateSpan = card.querySelector(
-      "#colorways-expiry-date > span"
-    );
-
     const collection = BuiltInThemes.findActiveColorwayCollection?.();
     if (collection) {
-      const { expiry } = collection;
+      const { cardImagePath, expiry } = collection;
+      if (cardImagePath) {
+        preview.src = cardImagePath;
+      }
+
+      let colorwayExpiryDateSpan = card.querySelector(
+        "#colorways-expiry-date > span"
+      );
       document.l10n.setAttributes(
         colorwayExpiryDateSpan,
         "colorway-collection-expiry-date-span",
@@ -3739,13 +3741,13 @@ class ColorwayClosetCard extends HTMLElement {
           expiryDate: expiry.getTime(),
         }
       );
-    }
 
-    let colorwaysButton = card.querySelector("[action='open-colorways']");
-    colorwaysButton.hidden = false;
-    colorwaysButton.onclick = () => {
-      ColorwayClosetOpener.openModal();
-    };
+      let colorwaysButton = card.querySelector("[action='open-colorways']");
+      colorwaysButton.hidden = false;
+      colorwaysButton.onclick = () => {
+        ColorwayClosetOpener.openModal();
+      };
+    }
   }
 }
 customElements.define("colorways-card", ColorwayClosetCard);

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

@@ -19,6 +19,8 @@ AddonTestUtils.initMochitest(this);
 
 const kTestThemeId = "test-colorway@mozilla.org";
 const kTestExpiredThemeId = `expired-${kTestThemeId}`;
+// Mock collection l10n is part of the mocked fluent resources.
+const mockL10nId = "colorway-collection-test-mock";
 
 // Return a mock expiry date set 1 year ahead from the current date.
 function getMockExpiry() {
@@ -73,6 +75,7 @@ function setBuiltInThemeConfigMock(...args) {
       l10nId: {
         title: mockL10nId,
       },
+      cardImagePath: "mockCollectionPreview.avif",
     };
   };
 }
@@ -157,9 +160,6 @@ add_task(async function testColorwayClosetPrefEnabled() {
     clearBuiltInThemeConfigMock(originalFindActiveCollection);
   });
 
-  // Mock collection l10n part of the mocked fluent resources.
-  const mockL10nId = "colorway-collection-test-mock";
-
   // Mock expiry date string and BuiltInThemeConfig.findActiveColorwayCollection()
   const mockExpiry = getMockExpiry();
 
@@ -216,10 +216,15 @@ add_task(async function testColorwayClosetPrefEnabled() {
     card.querySelector("#colorways-preview-text-container"),
     "Preview text container found"
   );
-  ok(
-    card.querySelector(".card-heading-image"),
-    "Preview image container found"
+
+  const cardImage = card.querySelector(".card-heading-image");
+  ok(cardImage, "Preview image container found");
+  is(
+    cardImage.src,
+    "mockCollectionPreview.avif",
+    "Preview image has correct source"
   );
+
   const previewTextHeader = card.querySelector(
     "#colorways-preview-text-container > h3"
   );
@@ -290,9 +295,6 @@ add_task(async function testButtonOpenModal() {
     clearBuiltInThemeConfigMock(originalFindActiveCollection);
   });
 
-  // Mock collection l10n part of the mocked fluent resources.
-  const mockL10nId = "colorway-collection-test-mock";
-
   // Mock expiry date string and BuiltInThemeConfig.findActiveColorwayCollection()
   const mockExpiry = getMockExpiry();
   setBuiltInThemeConfigMock({ mockExpiry, mockL10nId });
@@ -353,9 +355,6 @@ add_task(async function testColorwayClosetSectionOneRetainedOneUnexpired() {
     clearBuiltInThemeConfigMock(originalFindActiveCollection);
   });
 
-  // Mock collection l10n part of the mocked fluent resources.
-  const mockL10nId = "colorway-collection-test-mock";
-
   // Mock expiry date string and BuiltInThemeConfig.findActiveColorwayCollection()
   const mockExpiry = getMockExpiry();
   setBuiltInThemeConfigMock({ mockExpiry, mockL10nId });