Bug 1769143 - add new colorways section and colorways collection card in about:addon. r=dao,fluent-reviewers,mixedpuppy

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

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

@@ -359,6 +359,8 @@ theme-disabled-heading = Disabled
 theme-monochromatic-heading = Colorways
 theme-monochromatic-subheading = Vibrant new colorways from { -brand-product-name }. Available for a limited time.
 
+theme-colorways-button = Try Colorways
+
 plugin-enabled-heading = Enabled
 plugin-disabled-heading = Disabled
 

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -810,3 +810,63 @@ section:not(:empty) ~ #empty-addons-message {
 .permission-header > .addon-sitepermissions-host {
   font-weight: bolder;
 }
+
+#colorways-section-heading {
+  margin-bottom: 0;
+}
+
+#colorways-expiry-date-container {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+}
+
+#colorways-expiry-date {
+  display: inline-block;
+  background: linear-gradient(to right, purple, pink, orange);
+  background-origin: border-box;
+  border-radius: 1.5em;
+  padding: 1px;
+  vertical-align: bottom;
+}
+
+#colorways-expiry-date > span {
+  display: inline-block;
+  color: black;
+  background: white;
+  border-radius: 1.5em;
+  padding: .2em 1em;
+}
+
+#colorways-button {
+  flex-shrink: 0;
+  flex-grow: 0;
+  align-self: baseline;
+  margin-inline-end: 0;
+}
+
+#colorways-preview-text-container {
+  z-index: 1;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  /* Make sure text fits within addon card dimensions */
+  width: var(--section-width);
+  height: calc(var(--section-width) * 92 / 680);
+  margin: -16px -16px;
+}
+
+#colorways-preview-text-container > h3,
+#colorways-preview-text-container > p {
+  margin: 0;
+}
+
+#colorways-preview-text-container > h3 {
+  font-size: 2.6em;
+}
+
+#colorways-preview-text-container > p {
+  font-size: 1.1em;
+}

toolkit/mozapps/extensions/content/aboutaddons.html

@@ -203,6 +203,18 @@
       </div>
     </template>
 
+    <template name="colorways-card-container">
+      <div id="colorways-expiry-date-container">
+        <span id="colorways-expiry-date"><span></span></span>
+      </div>
+        <button id="colorways-button" class="primary" action="open-colorways" data-l10n-id="theme-colorways-button"></button>
+    </template>
+
+    <template name="colorways-list">
+      <h2 id="colorways-section-heading" class="list-section-heading" data-l10n-id="theme-monochromatic-heading"></h2>
+      <h3 id="colorways-section-subheading" class="list-section-subheading" data-l10n-id="theme-monochromatic-subheading"></h3>
+    </template>
+
     <template name="addon-name-container-in-disco-card">
       <div class="disco-card-head">
         <h3 class="disco-addon-name"></h3>

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -3625,6 +3625,59 @@ class AddonCard extends HTMLElement {
 }
 customElements.define("addon-card", AddonCard);
 
+class ColorwayClosetCard extends HTMLElement {
+  render() {
+    let card = importTemplate("card").firstElementChild;
+    let heading = card.querySelector(".addon-name-container");
+    // remove elipsis button
+    heading.textContent = "";
+    heading.append(importTemplate("colorways-card-container"));
+    this.setCardPreviewText(card);
+    this.setCardContent(card);
+    this.append(card);
+  }
+
+  setCardPreviewText(card) {
+    // Create new elements for card preview text
+    let colorwayPreviewHeading = document.createElement("h3");
+    let colorwayPreviewSubHeading = document.createElement("p");
+    let colorwayPreviewTextContainer = document.createElement("div");
+
+    // TODO: Bug 1770465 - insert dynamic localized collection details
+    colorwayPreviewHeading.textContent = "Life in Color";
+    colorwayPreviewSubHeading.textContent =
+      "Make Firefox feel a little more you.";
+
+    colorwayPreviewTextContainer.appendChild(colorwayPreviewHeading);
+    colorwayPreviewTextContainer.appendChild(colorwayPreviewSubHeading);
+    colorwayPreviewTextContainer.id = "colorways-preview-text-container";
+
+    // Insert colorway card preview text
+    let cardHeadingImage = card.querySelector(".card-heading-image");
+    cardHeadingImage.parentNode.insertBefore(
+      colorwayPreviewTextContainer,
+      cardHeadingImage
+    );
+  }
+
+  setCardContent(card) {
+    card.querySelector(".addon-icon").hidden = true;
+
+    let preview = card.querySelector(".card-heading-image");
+    // TODO: Bug 1770465 - set preview.src for colorways card preview
+    preview.hidden = false;
+
+    let colorwayExpiryDateSpan = card.querySelector(
+      "#colorways-expiry-date > span"
+    );
+    // TODO: Bug 1770465 - set dynamic date here
+    colorwayExpiryDateSpan.textContent = "Expires June 2";
+    let colorwaysButton = card.querySelector("[action='open-colorways']");
+    colorwaysButton.hidden = false;
+  }
+}
+customElements.define("colorways-card", ColorwayClosetCard);
+
 /**
  * A child element of `<recommended-addon-list>`. It should be initialized
  * by calling `setDiscoAddon()` first. Call `setAddon(addon)` if it has been
@@ -4368,6 +4421,22 @@ class AddonList extends HTMLElement {
 }
 customElements.define("addon-list", AddonList);
 
+class ColorwayClosetList extends HTMLElement {
+  connectedCallback() {
+    this.appendChild(importTemplate(this.template));
+    let frag = document.createDocumentFragment();
+    let card = document.createElement("colorways-card");
+    card.render();
+    frag.append(card);
+    this.append(frag);
+  }
+
+  get template() {
+    return "colorways-list";
+  }
+}
+customElements.define("colorways-list", ColorwayClosetList);
+
 class RecommendedAddonList extends HTMLElement {
   connectedCallback() {
     if (this.isConnected) {
@@ -4718,6 +4787,14 @@ gViewController.defineView("list", async type => {
       },
     ]);
     frag.appendChild(monochromaticList);
+
+    const colorwayClosetPrefEnabled = Services.prefs.getBoolPref(
+      "browser.theme.colorway-closet"
+    );
+    if (colorwayClosetPrefEnabled) {
+      let colorwayClosetList = document.createElement("colorways-list");
+      frag.appendChild(colorwayClosetList);
+    }
   }
 
   // Show recommendations for themes and extensions.

toolkit/mozapps/extensions/test/browser/browser.ini

@@ -49,6 +49,7 @@ skip-if =
 [browser_about_debugging_link.js]
 [browser_addon_list_reordering.js]
 [browser_bug572561.js]
+[browser_colorwaycloset_aboutaddons.js]
 [browser_checkAddonCompatibility.js]
 [browser_disco_taar_telemetry.js]
 support-files =

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

@@ -0,0 +1,92 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const { AddonTestUtils } = ChromeUtils.import(
+  "resource://testing-common/AddonTestUtils.jsm"
+);
+
+AddonTestUtils.initMochitest(this);
+
+const kTestThemeId = "test-colorway@mozilla.org";
+
+/**
+ * Tests that the colorway closet section only appears if a colorway collection
+ * is available and the colorway closet pref is enabled.
+ */
+add_task(async function testColorwayClosetPrefEnabled() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.theme.colorway-closet", true]],
+  });
+  const themeXpi = AddonTestUtils.createTempWebExtensionFile({
+    manifest: {
+      name: "Monochromatic Theme",
+      applications: { gecko: { id: kTestThemeId } },
+      theme: {},
+    },
+  });
+  const { addon } = await AddonTestUtils.promiseInstallFile(themeXpi);
+
+  let win = await loadInitialView("theme");
+  let doc = win.document;
+  let colorwayClosetList = doc.querySelector("colorways-list");
+
+  info("Verifying colorway closet list contents");
+  ok(colorwayClosetList, "colorway closet list was found");
+  ok(
+    colorwayClosetList.querySelector("#colorways-section-heading"),
+    "colorway closet heading was found"
+  );
+  ok(
+    colorwayClosetList.querySelector("#colorways-section-heading"),
+    "colorway closet subheading was found"
+  );
+
+  let cards = colorwayClosetList.querySelectorAll("colorways-card");
+  ok(cards.length, "At least one colorway closet card was found");
+
+  info("Verifying colorway closet card contents");
+  let card = cards[0];
+  ok(
+    card.querySelector("#colorways-preview-text-container")?.textContent,
+    "Preview text found"
+  );
+  ok(card.querySelector(".card-heading-image"), "Preview found");
+  ok(
+    card.querySelector("#colorways-expiry-date-container"),
+    "colorway collection expiry date found"
+  );
+  ok(
+    card.querySelector("#colorways-button"),
+    "colorway collection button found"
+  );
+
+  await closeView(win);
+  await addon.uninstall(true);
+});
+
+/**
+ * Tests that the colorway closet section does not appear if a colorway collection
+ * is available but the colorway closet pref is disabled.
+ */
+add_task(async function testColorwayClosetSectionPrefDisabled() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.theme.colorway-closet", false]],
+  });
+  const themeXpi = AddonTestUtils.createTempWebExtensionFile({
+    manifest: {
+      name: "Monochromatic Theme",
+      applications: { gecko: { id: kTestThemeId } },
+      theme: {},
+    },
+  });
+  const { addon } = await AddonTestUtils.promiseInstallFile(themeXpi);
+
+  let win = await loadInitialView("theme");
+  let doc = win.document;
+  let colorwayClosetList = doc.querySelector("colorways-list");
+
+  ok(!colorwayClosetList, "colorway closet list should not be found");
+
+  await closeView(win);
+  await addon.uninstall(true);
+});