Bug 1755828: Add a Learn more link to the top pick checkbox. r=preferences-reviewers,adw,fluent-reviewers,mstriemer

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

browser/components/preferences/privacy.inc.xhtml

@@ -650,9 +650,16 @@
             preference="browser.urlbar.suggest.topsites"/>
   <checkbox id="enginesSuggestion" data-l10n-id="addressbar-locbar-engines-option"
             preference="browser.urlbar.suggest.engines"/>
-  <checkbox id="firefoxSuggestBestMatch"
-            data-l10n-id="addressbar-firefox-suggest-best-match-option"
-            preference="browser.urlbar.suggest.bestmatch"/>
+  <hbox id="firefoxSuggestBestMatchContainer" align="center">
+    <checkbox id="firefoxSuggestBestMatch"
+              class="tail-with-learn-more"
+              data-l10n-id="addressbar-firefox-suggest-best-match-option"
+              preference="browser.urlbar.suggest.bestmatch"/>
+    <label id="firefoxSuggestBestMatchLearnMore"
+           class="learnMore"
+           is="text-link"
+           data-l10n-id="addressbar-best-match-learn-more"/>
+  </hbox>
   <vbox id="firefoxSuggestContainer" hidden="true">
     <!-- This form[autocomplete="off"] is necessary to prevent the inputs from
          participating in session restore. autocomplete="off" is ignored on the

browser/components/preferences/privacy.js

@@ -1972,6 +1972,15 @@ var gPrivacyPane = {
       );
     }
 
+    // Set the URL of the learn-more link for Firefox Suggest best match.
+    const bestMatchLearnMoreLink = document.getElementById(
+      "firefoxSuggestBestMatchLearnMore"
+    );
+    bestMatchLearnMoreLink.setAttribute(
+      "href",
+      UrlbarProviderQuickSuggest.bestMatchHelpUrl
+    );
+
     // Set the URL of the Firefox Suggest learn-more links.
     let links = document.querySelectorAll(".firefoxSuggestLearnMore");
     for (let link of links) {
@@ -2008,9 +2017,9 @@ var gPrivacyPane = {
         .getElementById("openSearchEnginePreferences")
         .classList.add("extraMargin");
 
-      // Show the best match checkbox as appropriate.
+      // Show the best match checkbox container as appropriate.
       document.getElementById(
-        "firefoxSuggestBestMatch"
+        "firefoxSuggestBestMatchContainer"
       ).hidden = !UrlbarPrefs.get("bestMatchEnabled");
 
       // Show the container.

browser/components/preferences/tests/browser_privacy_firefoxSuggest.js

@@ -26,6 +26,7 @@ const DATA_COLLECTION_CHECKBOX_ID = "firefoxSuggestDataCollectionToggle";
 const INFO_BOX_ID = "firefoxSuggestInfoBox";
 const INFO_TEXT_ID = "firefoxSuggestInfoText";
 const LEARN_MORE_CLASS = "firefoxSuggestLearnMore";
+const BEST_MATCH_CONTAINER_ID = "firefoxSuggestBestMatchContainer";
 const BEST_MATCH_CHECKBOX_ID = "firefoxSuggestBestMatch";
 
 // Maps text element IDs to `{ enabled, disabled }`, where `enabled` is the
@@ -499,13 +500,13 @@ add_task(async function clickLearnMore() {
   await SpecialPowers.popPrefEnv();
 });
 
-// Tests the visibility of the best match toggle when the best match feature is
+// Tests the visibility of the best match checkbox when the best match feature is
 // initially disabled and is then enabled via preferences.
 add_task(async function bestMatchVisibility_falseToTrue() {
   await doBestMatchVisibilityTest(false, true);
 });
 
-// Tests the visibility of the best match toggle when the best match feature is
+// Tests the visibility of the best match checkbox when the best match feature is
 // initially enabled and is then disabled via preferences.
 add_task(async function bestMatchVisibility_trueToFalse() {
   await doBestMatchVisibilityTest(true, false);
@@ -513,7 +514,7 @@ add_task(async function bestMatchVisibility_trueToFalse() {
 
 /**
  * Runs a test that checks the visibility of the Firefox Suggest best match
- * toggle. It sets the best match feature pref, opens about:preferences and
+ * checkbox. It sets the best match feature pref, opens about:preferences and
  * checks the visibility of the toggle, sets the feature pref again, and checks
  * the visibility of the toggle again.
  *
@@ -539,11 +540,11 @@ async function doBestMatchVisibilityTest(initialEnabled, newEnabled) {
   await openPreferencesViaOpenPreferencesAPI("privacy", { leaveOpen: true });
 
   let doc = gBrowser.selectedBrowser.contentDocument;
-  let checkbox = doc.getElementById(BEST_MATCH_CHECKBOX_ID);
+  let container = doc.getElementById(BEST_MATCH_CONTAINER_ID);
   Assert.equal(
-    BrowserTestUtils.is_visible(checkbox),
+    BrowserTestUtils.is_visible(container),
     initialEnabled,
-    "The checkbox has the expected initial visibility"
+    "The checkbox container has the expected initial visibility"
   );
 
   // Set the new enabled status.
@@ -553,9 +554,9 @@ async function doBestMatchVisibilityTest(initialEnabled, newEnabled) {
 
   // Check visibility again.
   Assert.equal(
-    BrowserTestUtils.is_visible(checkbox),
+    BrowserTestUtils.is_visible(container),
     newEnabled,
-    "The checkbox has the expected visibility after setting enabled status"
+    "The checkbox container has the expected visibility after setting enabled status"
   );
 
   // Clean up.
@@ -564,7 +565,7 @@ async function doBestMatchVisibilityTest(initialEnabled, newEnabled) {
   await SpecialPowers.popPrefEnv();
 }
 
-// Tests the visibility of the best match checkbox when the best match feature is
+// Tests the visibility of the best match checkbox container when the best match feature is
 // enabled via a Nimbus experiment before about:preferences is opened.
 add_task(async function bestMatchVisibility_experiment_beforeOpen() {
   await QuickSuggestTestUtils.withExperiment({
@@ -576,26 +577,26 @@ add_task(async function bestMatchVisibility_experiment_beforeOpen() {
         leaveOpen: true,
       });
       let doc = gBrowser.selectedBrowser.contentDocument;
-      let checkbox = doc.getElementById(BEST_MATCH_CHECKBOX_ID);
+      let container = doc.getElementById(BEST_MATCH_CONTAINER_ID);
       Assert.ok(
-        BrowserTestUtils.is_visible(checkbox),
-        "The checkbox is visible"
+        BrowserTestUtils.is_visible(container),
+        "The checkbox container is visible"
       );
       gBrowser.removeCurrentTab();
     },
   });
 });
 
-// Tests the visibility of the best match checkbox when the best match feature is
+// Tests the visibility of the best match checkbox container when the best match feature is
 // enabled via a Nimbus experiment after about:preferences is opened.
 add_task(async function bestMatchVisibility_experiment_afterOpen() {
   // Open prefs and check the initial visibility.
   await openPreferencesViaOpenPreferencesAPI("privacy", { leaveOpen: true });
   let doc = gBrowser.selectedBrowser.contentDocument;
-  let checkbox = doc.getElementById(BEST_MATCH_CHECKBOX_ID);
+  let container = doc.getElementById(BEST_MATCH_CONTAINER_ID);
   Assert.ok(
-    BrowserTestUtils.is_hidden(checkbox),
-    "The checkbox is hidden initially"
+    BrowserTestUtils.is_hidden(container),
+    "The checkbox container is hidden initially"
   );
 
   // Install an experiment with best match enabled.
@@ -605,15 +606,15 @@ add_task(async function bestMatchVisibility_experiment_afterOpen() {
     },
     callback: () => {
       Assert.ok(
-        BrowserTestUtils.is_visible(checkbox),
-        "The checkbox is visible after installing the experiment"
+        BrowserTestUtils.is_visible(container),
+        "The checkbox container is visible after installing the experiment"
       );
     },
   });
 
   Assert.ok(
-    BrowserTestUtils.is_hidden(checkbox),
-    "The checkbox is hidden again after the experiment is uninstalled"
+    BrowserTestUtils.is_hidden(container),
+    "The checkbox container is hidden again after the experiment is uninstalled"
   );
 
   gBrowser.removeCurrentTab();
@@ -661,6 +662,40 @@ add_task(async function bestMatchToggle() {
   await SpecialPowers.popPrefEnv();
 });
 
+// Clicks the learn-more link for best match and checks the help page is opened in a new tab.
+add_task(async function clickBestMatchLearnMore() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.urlbar.bestMatch.enabled", true]],
+  });
+
+  await openPreferencesViaOpenPreferencesAPI("privacy", { leaveOpen: true });
+
+  const doc = gBrowser.selectedBrowser.contentDocument;
+  const link = doc.getElementById("firefoxSuggestBestMatchLearnMore");
+  Assert.ok(BrowserTestUtils.is_visible(link), "Learn-more link is visible");
+
+  const tabPromise = BrowserTestUtils.waitForNewTab(
+    gBrowser,
+    UrlbarProviderQuickSuggest.bestMatchHelpUrl
+  );
+
+  info("Clicking learn-more link");
+  link.scrollIntoView();
+  await BrowserTestUtils.synthesizeMouseAtCenter(
+    "#firefoxSuggestBestMatchLearnMore",
+    {},
+    gBrowser.selectedBrowser
+  );
+
+  info("Waiting for help page to load in a new tab");
+  const tab = await tabPromise;
+  gBrowser.removeTab(tab);
+
+  // Clean up.
+  gBrowser.removeCurrentTab();
+  await SpecialPowers.popPrefEnv();
+});
+
 /**
  * Verifies the state of the checkboxes (which are styled as toggle switches).
  *

browser/components/urlbar/UrlbarProviderQuickSuggest.jsm

@@ -90,6 +90,15 @@ class ProviderQuickSuggest extends UrlbarProvider {
     );
   }
 
+  /**
+   * @returns {string} The help URL for the Quick Suggest best match feature.
+   */
+  get bestMatchHelpUrl() {
+    return (
+      Services.urlFormatter.formatURLPref("app.support.baseURL") + "top-pick"
+    );
+  }
+
   /**
    * Whether this provider should be invoked for the given context.
    * If this method returns false, the providers manager won't start a query

browser/components/urlbar/content/firefoxSuggest.ftl

@@ -40,6 +40,7 @@ addressbar-suggest-firefox-suggest = Choose the type of suggestions that appear
 # related to the user's search string.
 addressbar-firefox-suggest-best-match-option =
   .label = Top pick
+addressbar-best-match-learn-more = Learn more
 
 # First Firefox Suggest toggle button main label and description. This toggle
 # controls non-sponsored suggestions related to the user's search string.