Bug 1825792 - Use moz-support-link in the addon abuse report dialog r=extension-reviewers,fluent-reviewers,tgiles,flod,robwu

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

python/l10n/fluent_migrations/bug_1825792_abuse_report_panel.py

@@ -0,0 +1,56 @@
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+import fluent.syntax.ast as FTL
+
+from fluent.migrate.transforms import TransformPattern
+
+
+class STRIP_LEARNMORE(TransformPattern):
+    # Used to remove `<a data-l10n-name="learnmore-link">SOME TEXT</a>` from a string
+    def visit_TextElement(self, node):
+        link_start = node.value.find('<a data-l10n-name="learnmore-link">')
+        if link_start != -1:
+            # Replace string up to the link, remove remaining spaces afterwards.
+            # Removing an extra character directly is not safe, as it could be
+            # punctuation.
+            node.value = node.value[:link_start].rstrip()
+
+        return node
+
+
+class EXTRACT_LEARNMORE(TransformPattern):
+    # Used to extract SOME TEXT from `<a data-l10n-name="learnmore-link">SOME TEXT</a>`
+    def visit_TextElement(self, node):
+        text_start = node.value.find(">") + 1
+        text_end = node.value.find("</a>")
+        if text_start != -1 and text_end != -1:
+            node.value = node.value[text_start:text_end].strip()
+
+        return node
+
+
+def migrate(ctx):
+    """Bug 1825792 - Use moz-support-link in the addon abuse report dialog, part {index}."""
+
+    abuse_reports = "toolkit/toolkit/about/abuseReports.ftl"
+    ctx.add_transforms(
+        abuse_reports,
+        abuse_reports,
+        [
+            FTL.Message(
+                id=FTL.Identifier("abuse-report-learnmore-intro"),
+                value=STRIP_LEARNMORE(
+                    abuse_reports,
+                    "abuse-report-learnmore",
+                ),
+            ),
+            FTL.Message(
+                id=FTL.Identifier("abuse-report-learnmore-link"),
+                value=EXTRACT_LEARNMORE(
+                    abuse_reports,
+                    "abuse-report-learnmore",
+                ),
+            ),
+        ],
+    )

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

@@ -18,9 +18,8 @@ abuse-report-subtitle = What’s the issue?
 #   $author-name (string) - Name of the add-on author
 abuse-report-addon-authored-by = by <a data-l10n-name="author-name">{ $author-name }</a>
 
-abuse-report-learnmore =
-  Unsure what issue to select?
-  <a data-l10n-name="learnmore-link">Learn more about reporting extensions and themes</a>
+abuse-report-learnmore-intro = Unsure what issue to select?
+abuse-report-learnmore-link = Learn more about reporting extensions and themes
 
 abuse-report-submit-description = Describe the problem (optional)
 abuse-report-textarea =

toolkit/mozapps/extensions/content/abuse-report-frame.html

@@ -20,6 +20,10 @@
     <link rel="localization" href="toolkit/about/aboutAddons.ftl" />
     <link rel="localization" href="toolkit/about/abuseReports.ftl" />
 
+    <script
+      type="module"
+      src="chrome://global/content/elements/moz-support-link.mjs"
+    ></script>
     <script
       defer
       src="chrome://mozapps/content/extensions/abuse-report-panel.js"
@@ -96,11 +100,13 @@
       <ul class="abuse-report-reasons">
         <li is="abuse-report-reason-listitem" report-reason="other"></li>
       </ul>
-      <p data-l10n-id="abuse-report-learnmore">
+      <p>
+        <span data-l10n-id="abuse-report-learnmore-intro"></span>
         <a
-          class="abuse-report-learnmore"
+          is="moz-support-link"
           target="_blank"
-          data-l10n-name="learnmore-link"
+          support-page="reporting-extensions-and-themes-abuse"
+          data-l10n-id="abuse-report-learnmore-link"
         >
         </a>
       </p>
@@ -132,17 +138,19 @@
       <ul>
         <li>
           <a
-            class="abuse-settings-search-learnmore"
+            is="moz-support-link"
             target="_blank"
             data-l10n-id="abuse-report-settings-suggestions-search"
+            support-page="prefs-search"
           >
           </a>
         </li>
         <li>
           <a
-            class="abuse-settings-homepage-learnmore"
+            is="moz-support-link"
             target="_blank"
             data-l10n-id="abuse-report-settings-suggestions-homepage"
+            support-page="prefs-homepage"
           >
           </a>
         </li>

toolkit/mozapps/extensions/content/abuse-report-panel.js

@@ -121,15 +121,6 @@ function getSuggestionsTemplate({ addonType, reason, supportURL }) {
 
 // Map of the learnmore links metadata, keyed by link element class.
 const LEARNMORE_LINKS = {
-  ".abuse-report-learnmore": {
-    path: "reporting-extensions-and-themes-abuse",
-  },
-  ".abuse-settings-search-learnmore": {
-    path: "prefs-search",
-  },
-  ".abuse-settings-homepage-learnmore": {
-    path: "prefs-homepage",
-  },
   ".abuse-policy-learnmore": {
     baseURL: "https://www.mozilla.org/%LOCALE%/",
     path: "about/legal/report-infringement/",
@@ -141,9 +132,7 @@ const LEARNMORE_LINKS = {
 function formatLearnMoreURLs(containerEl) {
   for (const [linkClass, linkInfo] of Object.entries(LEARNMORE_LINKS)) {
     for (const element of containerEl.querySelectorAll(linkClass)) {
-      const baseURL = linkInfo.baseURL
-        ? Services.urlFormatter.formatURL(linkInfo.baseURL)
-        : Services.urlFormatter.formatURLPref("app.support.baseURL");
+      const baseURL = Services.urlFormatter.formatURL(linkInfo.baseURL);
 
       element.href = baseURL + linkInfo.path;
     }
@@ -369,10 +358,6 @@ class AbuseReasonSuggestions extends HTMLElement {
       this.hidden = true;
     }
   }
-
-  get LEARNMORE_LINKS() {
-    return Object.keys(LEARNMORE_LINKS);
-  }
 }
 
 // This WebComponents implements the last step of the abuse report submission.

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

@@ -346,11 +346,20 @@ async function test_abusereport_suggestions(addonId) {
     }
 
     const learnMoreLinks = [];
-    for (const linkClass of _suggestions.LEARNMORE_LINKS) {
-      learnMoreLinks.push(..._suggestions.querySelectorAll(linkClass));
-    }
+    learnMoreLinks.push(
+      ..._suggestions.querySelectorAll(
+        'a[is="moz-support-link"], .abuse-policy-learnmore'
+      )
+    );
 
     if (learnMoreLinks.length) {
+      is(
+        _suggestions.querySelectorAll(
+          'a[is="moz-support-link"]:not([support-page])'
+        ).length,
+        0,
+        "Every SUMO link should point to a specific page"
+      );
       ok(
         learnMoreLinks.every(el => el.getAttribute("target") === "_blank"),
         "All the learn more links have target _blank"