Bug 1771326 - Implement Colorways CTA for when no Colorway is selected r=dao,flod

Implemented Colorway CTA in Firefox View for when a Colorway Collection is active but no Colorway has been selected.

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

browser/components/colorways/colorwaycloset.ftl

@@ -5,11 +5,15 @@
 colorway-collection-life-in-color = Life In Color
 colorway-collection-true-colors = True Colors
 colorway-collection-independent-voices = Independent Voices
+colorway-collection-independent-voices-description = Color can change culture. The latest colorways celebrate voices making the world a better place.
 
 # 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") }
 
 colorway-fx-home-link = Use { -brand-product-name } Home for colorful new tabs
 colorway-fx-home-link-success = { -brand-product-name } Home is now your home page
 colorway-fx-home-apply-button = Apply
 colorway-fx-home-undo-button = Undo
+colorway-fx-home-try-colorways-button = Try colorways
+colorway-fx-home-try-colorways-label = New colorways are on the way

browser/components/colorways/colorwaycloset.js

@@ -37,14 +37,17 @@ function showUseFXHomeControls(fluentStrings) {
 const collection = BuiltInThemes.findActiveColorwayCollection();
 if (collection) {
   const { expiry, l10nId } = collection;
-  const formatter = new Intl.DateTimeFormat("default", {
-    month: "long",
-    day: "numeric",
-  });
   const collectionTitle = document.getElementById("collection-title");
-  document.l10n.setAttributes(collectionTitle, l10nId);
-  document.querySelector(
+  document.l10n.setAttributes(collectionTitle, l10nId.title);
+  const colorwayExpiryDateSpan = document.querySelector(
     "#collection-expiry-date > span"
-  ).innerText = formatter.format(expiry);
+  );
+  document.l10n.setAttributes(
+    colorwayExpiryDateSpan,
+    "colorway-collection-expiry-date-span",
+    {
+      expiryDate: expiry.getTime(),
+    }
+  );
   showUseFXHomeControls();
 }

browser/components/firefoxview/firefoxView.ftl

@@ -10,9 +10,6 @@ toolbar-button-firefox-view =
 
 firefoxview-page-title = { -firefoxview-brand-name }
 
-firefoxview-colorways-button = Colorway Closet
-firefoxview-colorways-no-collection-label = New colorways are on the way
-
 # Used instead of the localized relative time when a timestamp is within a minute or so of now
 firefoxview-just-now-timestamp = Just now
 

browser/components/firefoxview/firefoxview.css

@@ -108,40 +108,64 @@ body > main > aside {
 }
 
 #colorways.no-collection {
+  display: block;
   background: linear-gradient(51.95deg, #7542E5 -8.36%, #C953F2 98.73%);
   border-radius: 8px;
 }
 
+#colorways,
 #colorways.no-collection > div {
-  height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
 }
 
 #colorways.no-collection > div {
+  height: 100%;
+  justify-content: flex-end;
   background: url("chrome://browser/content/colorway-background.svg");
   background-size: 100%;
   background-position: center top;
   background-repeat: no-repeat;
 }
 
-#colorways.no-collection > div > #colorways-button {
-  display: none;
-}
-
-#colorways.no-collection > div > #colorways-no-collection-message {
-  display: block;
-}
-
-#colorways-no-collection-message {
-  display: none;
+#try-colorways-description {
   color: #FFF;
   font-size: 2em;
   text-align: center;
   margin: 0 1em 1em;
 }
 
+#colorways-collection-description,
+#colorways-button {
+  margin: 0.4em 0;
+  align-self: flex-start;
+}
+
+#colorways-collection-title {
+  margin: 0;
+  padding: 0;
+  font-size: 1.8em;
+  font-weight: bold;
+}
+
+#colorways-collection-expiry-date {
+  display: inline-block;
+  background: linear-gradient(to right, purple, pink, orange);
+  background-origin: border-box;
+  border-radius: 1.5em;
+  padding: 1px;
+  margin: 0.8em 0;
+  align-self: flex-start;
+}
+
+#colorways-collection-expiry-date > span {
+  display: inline-block;
+  color: var(--in-content-page-color);
+  background: var(--in-content-page-background);
+  border-radius: 1.5em;
+  padding: .2em 1em;
+}
+
 [hidden] {
   display: none !important;
 }

browser/components/firefoxview/firefoxview.html

@@ -11,6 +11,7 @@
     <title data-l10n-id="firefoxview-page-title"></title>
     <link rel="localization" href="branding/brand.ftl">
     <link rel="localization" href="preview/firefoxView.ftl"/>
+    <link rel="localization" href="preview/colorwaycloset.ftl">
     <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
     <link rel="stylesheet" href="chrome://browser/content/firefoxview.css">
     <script type="module" src="chrome://browser/content/tabs-pickup.js"></script>
@@ -94,12 +95,21 @@
           <p class="section-description" data-l10n-id="firefoxview-tabpickup-description"></p>
         </header>
       </section>
-      <aside class="content-container">
-        <div id="colorways">
-          <button data-l10n-id="firefoxview-colorways-button" id="colorways-button"></button>
-          <div id="colorways-no-collection-message" data-l10n-id="firefoxview-colorways-no-collection-label"></div>
+
+      <template id="colorways-no-collection-template">
+        <div class="content-container">
+          <div id="try-colorways-description" data-l10n-id="colorway-fx-home-try-colorways-label"></div>
         </div>
-      </aside>
+      </template>
+      <template id="colorways-active-collection-template">
+        <h1 id="colorways-collection-title"></h1>
+        <span id="colorways-collection-expiry-date"><span></span></span>
+        <div id="colorways-collection-description"></div>
+        <button class="primary" id="colorways-button"></button>
+        <img id="colorways-collection-graphic">
+      </template>
+      <aside id="colorways"></aside>
+
       <section class="content-container" is="recently-closed-tabs-container" id="recently-closed-tabs-container">
         <header class="page-section-header">
           <h1 data-l10n-id="firefoxview-closed-tabs-title" ></h1>

browser/components/firefoxview/firefoxview.js

@@ -19,18 +19,55 @@ XPCOMUtils.defineLazyModuleGetters(globalThis, {
 });
 
 window.addEventListener("load", () => {
-  document.getElementById("colorways-button").addEventListener("click", () => {
-    globalThis.ColorwayClosetOpener.openModal();
-  });
   tabsSetupFlowManager.initialize(
     document.getElementById("tabs-pickup-container")
   );
   document.getElementById("recently-closed-tabs-container").onLoad();
-  const noColorwayCollection =
-    BuiltInThemes.findActiveColorwayCollection() === null;
-  document
-    .getElementById("colorways")
-    .classList.toggle("no-collection", noColorwayCollection);
+  const colorwaysCollection = BuiltInThemes.findActiveColorwayCollection();
+  const colorwaysContainer = document.getElementById("colorways");
+  colorwaysContainer.classList.toggle("no-collection", !colorwaysCollection);
+  colorwaysContainer.classList.toggle("content-container", colorwaysCollection);
+  const templateId = colorwaysCollection
+    ? "colorways-active-collection-template"
+    : "colorways-no-collection-template";
+  if (colorwaysContainer.firstChild) {
+    colorwaysContainer.firstChild.remove();
+  }
+  colorwaysContainer.append(
+    document.importNode(document.getElementById(templateId).content, true)
+  );
+  if (colorwaysCollection) {
+    const { expiry, l10nId } = colorwaysCollection;
+    const colorwayButton = document.getElementById("colorways-button");
+    document.l10n.setAttributes(
+      colorwayButton,
+      "colorway-fx-home-try-colorways-button"
+    );
+    colorwayButton.addEventListener("click", () => {
+      globalThis.ColorwayClosetOpener.openModal();
+    });
+    const collectionTitle = document.getElementById(
+      "colorways-collection-title"
+    );
+    document.l10n.setAttributes(collectionTitle, l10nId.title);
+    const colorwayExpiryDateSpan = document.querySelector(
+      "#colorways-collection-expiry-date > span"
+    );
+    document.l10n.setAttributes(
+      colorwayExpiryDateSpan,
+      "colorway-collection-expiry-date-span",
+      {
+        expiryDate: expiry.getTime(),
+      }
+    );
+    if (l10nId.description) {
+      const message = document.getElementById(
+        "colorways-collection-description"
+      );
+      document.l10n.setAttributes(message, l10nId.description);
+    }
+    // TODO: Uncomment when graphic is finalized document.getElementById("colorways-collection-graphic").src = "chrome://browser/content/colorway-try-colorways.svg";
+  }
 });
 
 window.addEventListener("unload", () => {

browser/components/firefoxview/tests/browser/browser_firefoxview.js

@@ -16,16 +16,16 @@ add_task(async function about_firefoxview_smoke_test() {
         "tabs-pickup-container element exists"
       );
       ok(
-        document.getElementById("colorways-button"),
-        "colorways-button element exists"
+        document.getElementById("colorways-active-collection-template"),
+        "colorways-active-collection-template element exists"
       );
       ok(
         document.getElementById("recently-closed-tabs-container"),
         "recently-closed-tabs-container element exists"
       );
       ok(
-        document.getElementById("colorways-no-collection-message"),
-        "colorways-no-collection-message element exists"
+        document.getElementById("colorways-no-collection-template"),
+        "colorways-no-collection-template element exists"
       );
     }
   );

browser/themes/BuiltInThemeConfig.jsm

@@ -394,12 +394,16 @@ const ColorwayCollections = [
   {
     id: "life-in-color",
     expiry: "2022-02-08",
-    l10nId: "colorway-collection-life-in-color",
+    l10nId: {
+      title: "colorway-collection-life-in-color",
+    },
   },
   {
     id: "true-colors",
     expiry: "2022-05-03",
-    l10nId: "colorway-collection-true-colors",
+    l10nId: {
+      title: "colorway-collection-true-colors",
+    },
   },
   {
     id: "independent-voices",
@@ -407,7 +411,10 @@ const ColorwayCollections = [
       colorwayClosetEnabled && AppConstants.NIGHTLY_BUILD
         ? "2022-12-31"
         : "1970-01-01",
-    l10nId: "colorway-collection-independent-voices",
+    l10nId: {
+      title: "colorway-collection-independent-voices",
+      description: "colorway-collection-independent-voices-description",
+    },
   },
 ];