Bug 1814424 - Use moz-support-link for the helpButton link in preferences.xhtml r=tgiles,settings-reviewers,Gijs

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

browser/components/preferences/preferences.js

@@ -266,12 +266,6 @@ function init_all() {
   });
 
   gotoPref().then(() => {
-    let helpButton = document.getElementById("helpButton");
-    let helpUrl =
-      Services.urlFormatter.formatURLPref("app.support.baseURL") +
-      "preferences";
-    helpButton.setAttribute("href", helpUrl);
-
     document.getElementById("addonsButton").addEventListener("click", e => {
       e.preventDefault();
       if (e.button >= 2) {

browser/components/preferences/preferences.xhtml

@@ -175,7 +175,8 @@
           <image class="sidebar-footer-icon addons-icon"/>
           <label class="sidebar-footer-label" flex="1" data-l10n-id="addons-button-label"></label>
         </html:a>
-        <html:a id="helpButton" class="sidebar-footer-link" target="_blank">
+        <html:a id="helpButton" class="sidebar-footer-link" target="_blank"
+                is="moz-support-link" support-page="preferences">
           <image class="sidebar-footer-icon help-icon"/>
           <label class="sidebar-footer-label" flex="1" data-l10n-id="help-button-label"></label>
         </html:a>

browser/themes/shared/preferences/preferences.css

@@ -479,7 +479,7 @@ richlistitem[selected] .actionsMenu:focus-visible {
   margin-inline-start: 0;
 }
 
-a[is="moz-support-link"] {
+a[is="moz-support-link"]:not(.sidebar-footer-link) {
   display: inline-block;
   white-space: initial;
 }

toolkit/content/widgets/moz-support-link/moz-support-link.mjs

@@ -51,7 +51,7 @@ export default class MozSupportLink extends HTMLAnchorElement {
     this.#setHref();
     this.setAttribute("target", "_blank");
     this.addEventListener("click", this);
-    if (!this.getAttribute("data-l10n-id")) {
+    if (!this.getAttribute("data-l10n-id") && !this.childElementCount) {
       document.l10n.setAttributes(this, "moz-support-link-text");
     }
     document.l10n.translateFragment(this);