Bug 41698: Reword the recommendation badges in about:addons

Firefox strings use { -brand-product-name }.
As a result, it seems that the fork is recommending extensions, whereas
AMO curators are doing that.
So, we replace the strings with custom ones that clarify that Mozilla is
recommending them.

We assign the strings with JS because our translation backend does not
support Fluent attributes, yet, but once it does, we should switch to
them, instead.

Upstream bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1825033

toolkit/mozapps/extensions/content/aboutaddons.html

@@ -35,6 +35,8 @@
     <link rel="localization" href="toolkit/about/aboutAddons.ftl" />
     <link rel="localization" href="toolkit/about/abuseReports.ftl" />
 
+    <link rel="localization" href="browser/languageNotification.ftl" />
+
     <!-- Defer scripts so all the templates are loaded by the time they run. -->
     <script
       defer
@@ -357,7 +359,6 @@
                 is="moz-support-link"
                 support-page="add-on-badges"
                 utm-content="promoted-addon-badge"
-                data-l10n-id="addon-badge-recommended2"
                 hidden
               >
               </a>
@@ -375,7 +376,6 @@
                 is="moz-support-link"
                 support-page="add-on-badges"
                 utm-content="promoted-addon-badge"
-                data-l10n-id="addon-badge-verified2"
                 hidden
               >
               </a>

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -4219,6 +4219,29 @@ async function initialize() {
       );
     }
   }
+
+  // At the moment we need to do this, because Weblate still does not support
+  // attributes in Fluent.
+  const [recommended, verified] = await document.l10n.formatValues([
+    { id: "basebrowser-addon-badge-recommended" },
+    { id: "basebrowser-addon-badge-verified" },
+  ]);
+
+  importTemplate("card");
+  _templates.card.content
+    .querySelector(".addon-badge-recommended")
+    .setAttribute("title", recommended);
+  _templates.card.content
+    .querySelector(".addon-badge-verified")
+    .setAttribute("title", verified);
+
+  // We also update any template copy that has already been created.
+  for (const badge of document.querySelectorAll(".addon-badge-recommended")) {
+    badge.setAttribute("title", recommended);
+  }
+  for (const badge of document.querySelectorAll(".addon-badge-verified")) {
+    badge.setAttribute("title", verified);
+  }
 }
 
 window.promiseInitialized = new Promise(resolve => {