Bug 1815898 - Inform users about Colorway theme removal - part 2 - about:addons, r=fluent-reviewers,bolsson,rpl

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

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

@@ -334,6 +334,16 @@ discopane-notice-recommendations2 =
         extensions you’ve installed, profile preferences, and usage statistics.
 discopane-notice-learn-more = Learn more
 
+# Notice for the colorway theme removal
+colorway-removal-notice-message =
+    .heading = Your colorway theme(s) were removed.
+    .message =
+        { -brand-product-name } updated its colorways collection. We removed
+        the old version(s) from your “Saved Themes” list. Get new versions on
+        the add-ons site.
+colorway-removal-notice-learn-more = Learn more
+colorway-removal-notice-button = Get updated colorways themes
+
 privacy-policy = Privacy Policy
 
 # Refers to the author of an add-on, shown below the name of the add-on.

toolkit/mozapps/extensions/ColorwayThemeMigration.sys.mjs

@@ -10,16 +10,13 @@ ChromeUtils.defineESModuleGetters(lazy, {
   BrowserWindowTracker: "resource:///modules/BrowserWindowTracker.sys.mjs",
 });
 
-const CLEANUP_UNKNOWN = 0;
-const CLEANUP_COMPLETED = 1;
-const CLEANUP_COMPLETED_WITH_BUILTIN = 2;
-
 // Cleanup any colorway builtin theme that may still be installed.
 async function uninstallAllColorwayBuiltinThemes(activeThemeID) {
-  const CLEANUP_PREF = "extensions.colorway-builtin-themes-cleanup";
-
   if (
-    Services.prefs.getIntPref(CLEANUP_PREF, CLEANUP_UNKNOWN) != CLEANUP_UNKNOWN
+    Services.prefs.getIntPref(
+      ColorwayThemeMigration.CLEANUP_PREF,
+      ColorwayThemeMigration.CLEANUP_UNKNOWN
+    ) != ColorwayThemeMigration.CLEANUP_UNKNOWN
   ) {
     return false;
   }
@@ -40,16 +37,29 @@ async function uninstallAllColorwayBuiltinThemes(activeThemeID) {
   }
 
   Services.prefs.setIntPref(
-    CLEANUP_PREF,
+    ColorwayThemeMigration.CLEANUP_PREF,
     builtinColorwayThemeFound
-      ? CLEANUP_COMPLETED_WITH_BUILTIN
-      : CLEANUP_COMPLETED
+      ? ColorwayThemeMigration.CLEANUP_COMPLETED_WITH_BUILTIN
+      : ColorwayThemeMigration.CLEANUP_COMPLETED
   );
 
   return activeThemeUninstalling;
 }
 
 export const ColorwayThemeMigration = {
+  get CLEANUP_PREF() {
+    return "extensions.colorway-builtin-themes-cleanup";
+  },
+  get CLEANUP_UNKNOWN() {
+    return 0;
+  },
+  get CLEANUP_COMPLETED() {
+    return 1;
+  },
+  get CLEANUP_COMPLETED_WITH_BUILTIN() {
+    return 2;
+  },
+
   maybeWarn: async () => {
     const activeThemeID = Services.prefs.getCharPref(
       "extensions.activeThemeID",

toolkit/mozapps/extensions/content/aboutaddons.html

@@ -714,6 +714,26 @@
       </named-deck>
     </template>
 
+    <template name="colorway-removal-notice">
+      <moz-message-bar
+        data-l10n-id="colorway-removal-notice-message"
+        dismissable
+      >
+        <a
+          is="moz-support-link"
+          support-page="colorways"
+          data-l10n-id="colorway-removal-notice-learn-more"
+          slot="support-link"
+        ></a>
+
+        <button
+          slot="actions"
+          action="open-amo-colorway-collection"
+          data-l10n-id="colorway-removal-notice-button"
+        ></button>
+      </moz-message-bar>
+    </template>
+
     <template name="taar-notice">
       <moz-message-bar
         class="discopane-notice"

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -15,6 +15,8 @@ ChromeUtils.defineESModuleGetters(this, {
   AddonRepository: "resource://gre/modules/addons/AddonRepository.sys.mjs",
   BuiltInThemes: "resource:///modules/BuiltInThemes.sys.mjs",
   ClientID: "resource://gre/modules/ClientID.sys.mjs",
+  ColorwayThemeMigration:
+    "resource://gre/modules/ColorwayThemeMigration.sys.mjs",
   DeferredTask: "resource://gre/modules/DeferredTask.sys.mjs",
   E10SUtils: "resource://gre/modules/E10SUtils.sys.mjs",
   ExtensionCommon: "resource://gre/modules/ExtensionCommon.sys.mjs",
@@ -3975,6 +3977,44 @@ class RecommendedAddonList extends HTMLElement {
 }
 customElements.define("recommended-addon-list", RecommendedAddonList);
 
+class ColorwayRemovalNotice extends HTMLElement {
+  connectedCallback() {
+    // The pref CLEANUP_PREF is set by the
+    // ColorwayThemeMigration.sys.mjs. We show the notice only if, during the
+    // colorway theme uninstall, we detect some colorway builtin theme.
+    if (
+      Services.prefs.getIntPref(
+        ColorwayThemeMigration.CLEANUP_PREF,
+        ColorwayThemeMigration.CLEANUP_UNKNOWN
+      ) != ColorwayThemeMigration.CLEANUP_COMPLETED_WITH_BUILTIN
+    ) {
+      return;
+    }
+
+    this.appendChild(importTemplate("colorway-removal-notice"));
+    this.addEventListener("click", this);
+    this.messageBar = this.querySelector("moz-message-bar");
+    this.messageBar.addEventListener("message-bar:user-dismissed", this);
+  }
+
+  handleEvent(e) {
+    if (e.type === "message-bar:user-dismissed") {
+      Services.prefs.setIntPref(
+        ColorwayThemeMigration.CLEANUP_PREF,
+        ColorwayThemeMigration.CLEANUP_COMPLETED
+      );
+    }
+
+    if (
+      e.type === "click" &&
+      e.target.getAttribute("action") === "open-amo-colorway-collection"
+    ) {
+      openAmoInTab(this, "collections/4757633/colorways");
+    }
+  }
+}
+customElements.define("colorway-removal-notice", ColorwayRemovalNotice);
+
 class TaarMessageBar extends HTMLElement {
   connectedCallback() {
     this.hidden =
@@ -4142,6 +4182,12 @@ gViewController.defineView("list", async type => {
     filterFn: disabledAddonsFilterFn,
   });
 
+  // Show the colorway warning only in themes list view
+  if (type === "theme") {
+    const warning = document.createElement("colorway-removal-notice");
+    frag.appendChild(warning);
+  }
+
   list.setSections(sections);
   frag.appendChild(list);