Bug 1777466 - Added image display for selected colorway to FX View r=dao
authorBernard Igiri <bigiri@mozilla.com>
Fri, 01 Jul 2022 17:00:30 +0000
changeset 622864 9ae1bb0f40eb603a61ca2e3581848ebce6582325
parent 622863 3bdb7367a3c9fb0d38cf33a7a762e347b798b436
child 622867 dfedcc4c1375cd23ad56a8d1f4c2c2626a839e77
push id165606
push userbigiri@mozilla.com
push dateFri, 01 Jul 2022 17:02:55 +0000
treeherderautoland@9ae1bb0f40eb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1777466
milestone104.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1777466 - Added image display for selected colorway to FX View r=dao Added image display for selected colorway to FX View Differential Revision: https://phabricator.services.mozilla.com/D150748
browser/components/firefoxview/firefoxview.mjs
browser/themes/BuiltInThemeConfig.jsm
--- a/browser/components/firefoxview/firefoxview.mjs
+++ b/browser/components/firefoxview/firefoxview.mjs
@@ -42,35 +42,36 @@ async function getColorway() {
     // or `{colorName}-colorway@mozilla.org` where intensitytName is optional
     // Bug 1776682 will localize these strings
     const re = /^([a-z\.]+)(-(soft|balanced|bold))?-colorway@mozilla.org$/;
     let [, colorwayName, , intensity] = re.exec(colorway.id);
     // Apply title casing until Bug 1770030 is completed
     colorwayProperties = {
       colorwayName: titleCase(colorwayName),
       intensity: titleCase(intensity),
+      figureUrl: BuiltInThemes.builtInThemeMap.get(colorway.id).figureUrl,
     };
   }
   const collectionName = await document.l10n.formatValue(
     colorwaysCollection.l10nId.title
   );
   return {
+    ...colorwaysCollection,
     ...colorwayProperties,
-    ...colorwaysCollection,
     collectionName,
   };
 }
 
 function showColorway({
   colorwayName,
   intensity,
   collectionName,
   expiry,
   l10nId,
-  iconUrl,
+  figureUrl,
 }) {
   const el = {
     button: document.getElementById("colorways-button"),
     title: document.getElementById("colorways-collection-title"),
     description: document.getElementById("colorways-collection-description"),
     expiry: document.querySelector("#colorways-collection-expiry-date > span"),
   };
   el.button.addEventListener("click", () => {
@@ -103,17 +104,17 @@ function showColorway({
     );
   } else {
     if (l10nId.description) {
       document.l10n.setAttributes(el.description, l10nId.description);
     }
     document.l10n.setAttributes(el.title, l10nId.title);
     document.l10n.setAttributes(el.button, "firefoxview-try-colorways-button");
   }
-  document.getElementById("colorways-collection-graphic").src = iconUrl || "";
+  document.getElementById("colorways-collection-graphic").src = figureUrl || "";
 }
 
 const getColorwayPromise = getColorway();
 
 window.addEventListener("load", () => {
   tabsSetupFlowManager.initialize(
     document.getElementById("tabs-pickup-container")
   );
--- a/browser/themes/BuiltInThemeConfig.jsm
+++ b/browser/themes/BuiltInThemeConfig.jsm
@@ -520,17 +520,17 @@ const ColorwayCollections = [
         ? "2022-12-31"
         : "1970-01-01",
     l10nId: {
       title: "colorway-collection-independent-voices",
       description: "colorway-collection-independent-voices-description",
     },
     cardImagePath:
       "chrome://browser/content/colorways/independent-voices-collection-banner.avif",
-    iconUrl:
+    figureUrl:
       "chrome://browser/content/colorways/independent-voices-collection.avif",
   },
 ];
 
 function _applyColorwayConfig(collections) {
   const collectionsSorted = collections
     .map(({ expiry, ...rest }) => ({
       expiry: new Date(expiry),