Bug 1846915: Use a different 'Top pick' group label for MDN suggestions r=adw,fluent-reviewers,flod

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

browser/components/urlbar/UrlbarView.sys.mjs

@@ -2128,6 +2128,8 @@ export class UrlbarView {
       switch (row.result.payload.telemetryType) {
         case "amo":
           return { id: "urlbar-group-addon" };
+        case "mdn":
+          return { id: "urlbar-group-mdn" };
         case "pocket":
           return { id: "urlbar-group-pocket" };
       }

browser/components/urlbar/content/firefoxSuggest.ftl

@@ -21,6 +21,10 @@ urlbar-group-best-match =
 urlbar-group-addon =
   .label = { -brand-product-name } extension
 
+# Label shown above a MDN suggestion in the urlbar results.
+urlbar-group-mdn =
+  .label = Recommended resource
+
 # Label shown above a Pocket suggestion in the urlbar results.
 urlbar-group-pocket =
   .label = Recommended reads

browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_mdn.js

@@ -15,6 +15,7 @@ const REMOTE_SETTINGS_DATA = [
         description:
           "The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.",
         keywords: ["array"],
+        is_top_pick: true,
       },
     ],
   },
@@ -73,6 +74,43 @@ add_task(async function basic() {
   await SpecialPowers.popPrefEnv();
 });
 
+add_task(async function rowLabel() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.urlbar.mdn.featureGate", true]],
+  });
+
+  const testCases = [
+    {
+      bestMatch: true,
+      expected: "Recommended resource",
+    },
+    {
+      bestMatch: false,
+      expected: "Firefox Suggest",
+    },
+  ];
+
+  for (const { bestMatch, expected } of testCases) {
+    await SpecialPowers.pushPrefEnv({
+      set: [["browser.urlbar.bestMatch.enabled", bestMatch]],
+    });
+
+    await UrlbarTestUtils.promiseAutocompleteResultPopup({
+      window,
+      value: REMOTE_SETTINGS_DATA[0].attachment[0].keywords[0],
+    });
+    Assert.equal(UrlbarTestUtils.getResultCount(window), 2);
+
+    const { element } = await UrlbarTestUtils.getDetailsOfResultAt(window, 1);
+    const row = element.row;
+    Assert.equal(row.getAttribute("label"), expected);
+
+    await SpecialPowers.popPrefEnv();
+  }
+
+  await SpecialPowers.popPrefEnv();
+});
+
 add_task(async function disable() {
   await SpecialPowers.pushPrefEnv({
     set: [["browser.urlbar.mdn.featureGate", false]],