Bug 1878727 - Make the Yelp suggestion UI closer to the spec. r=daisuke

This makes the Yelp suggestion UI closer to the spec. Summary:

* Always set `isRichSuggestion: true` so that the bottom "Yelp · Sponsored" text
  is visible when the row is not a top pick.
* For the top pick treatment, the icon itself should be 38px and centered in a
  52px box with a border.
* For the non-top-pick treatment, the icon size should be 24px.
* Currently rich suggestion rows with 24px icons aren't properly aligned with
  the icons and text in other rows. We have some rules that fix this for rows
  with 16px icons and non-rich suggestions. The problem happens for any row
  whose icon is smaller than the 28px icon of most rich suggestion rows, so I
  added a rule to cover 24px icons.
* Add `HIGHLIGHT.TYPED` to the title, but I need to verify this with Loren

References:

* [Figma](https://www.figma.com/file/Vx9PB3b4oU1ilLwqZVq8r4/Yelp-suggestions?type=design&node-id=406%3A14439&mode=design&t=Q1UyIltVH2bniMwp-1)
* [Spec doc](https://docs.google.com/document/d/13ByGyGK-gMRX5hz9Buj3Xo6Q19hnu2oOvvI1DS29PCs/edit?usp=sharing)

Depends on D201182

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

browser/components/urlbar/private/YelpSuggestions.sys.mjs

@@ -84,13 +84,14 @@ export class YelpSuggestions extends BaseFeature {
         lazy.UrlbarUtils.RESULT_SOURCE.SEARCH,
         ...lazy.UrlbarResult.payloadAndSimpleHighlights(queryContext.tokens, {
           url: url.toString(),
-          title,
+          title: [title, lazy.UrlbarUtils.HIGHLIGHT.TYPED],
           shouldShowUrl: true,
           bottomTextL10n: { id: "firefox-suggest-yelp-bottom-text" },
         })
       ),
       {
-        richSuggestionIconSize: 24,
+        isRichSuggestion: true,
+        richSuggestionIconSize: suggestion.is_top_pick ? 38 : 24,
         showFeedbackMenu: true,
       }
     );

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

@@ -33,25 +33,49 @@ add_setup(async function () {
 });
 
 add_task(async function basic() {
-  await UrlbarTestUtils.promiseAutocompleteResultPopup({
-    window,
-    value: "RaMeN iN tOkYo",
-  });
+  for (let topPick of [true, false]) {
+    info("Setting yelpPriority: " + topPick);
+    await SpecialPowers.pushPrefEnv({
+      set: [["browser.urlbar.quicksuggest.yelpPriority", topPick]],
+    });
 
-  Assert.equal(UrlbarTestUtils.getResultCount(window), 2);
+    await UrlbarTestUtils.promiseAutocompleteResultPopup({
+      window,
+      value: "RaMeN iN tOkYo",
+    });
 
-  const { result } = await UrlbarTestUtils.getDetailsOfResultAt(window, 1);
-  Assert.equal(
-    result.providerName,
-    UrlbarProviderQuickSuggest.name,
-    "The result should be from the expected provider"
-  );
-  Assert.equal(result.payload.provider, "Yelp");
-  Assert.equal(
-    result.payload.url,
-    "https://www.yelp.com/search?find_desc=RaMeN&find_loc=tOkYo&utm_medium=partner&utm_source=mozilla"
-  );
-  Assert.equal(result.payload.title, "RaMeN iN tOkYo");
+    Assert.equal(UrlbarTestUtils.getResultCount(window), 2);
+
+    const details = await UrlbarTestUtils.getDetailsOfResultAt(window, 1);
+    const { result } = details;
+    Assert.equal(
+      result.providerName,
+      UrlbarProviderQuickSuggest.name,
+      "The result should be from the expected provider"
+    );
+    Assert.equal(result.payload.provider, "Yelp");
+    Assert.equal(
+      result.payload.url,
+      "https://www.yelp.com/search?find_desc=RaMeN&find_loc=tOkYo&utm_medium=partner&utm_source=mozilla"
+    );
+    Assert.equal(result.payload.title, "RaMeN iN tOkYo");
+
+    const { row } = details.element;
+    const bottom = row.querySelector(".urlbarView-row-body-bottom");
+    Assert.ok(bottom, "Bottom text element should exist");
+    Assert.ok(
+      BrowserTestUtils.isVisible(bottom),
+      "Bottom text element should be visible"
+    );
+    Assert.equal(
+      bottom.textContent,
+      "Yelp · Sponsored",
+      "Bottom text is correct"
+    );
+
+    await UrlbarTestUtils.promisePopupClose(window);
+    await SpecialPowers.popPrefEnv();
+  }
 });
 
 // Tests the "Show less frequently" result menu command.

browser/themes/shared/urlbarView.css

@@ -89,8 +89,8 @@
 .urlbarView-row {
   --urlbarView-second-line-indent: calc(var(--urlbarView-icon-margin-start) + var(--urlbarView-icon-margin-end) + var(--urlbarView-favicon-width));
 
-  /* Align the favicons and titles of rows with standard 16px icons with those
-     of rich suggestions. */
+  /* Align icons that are smaller than the default rich suggestion icon size
+    (28px) with default-size rich suggestion icons. */
   /* stylelint-disable-next-line media-query-no-invalid */
   @media (-moz-bool-pref: "browser.urlbar.richSuggestions.featureGate") {
     &:not([rich-suggestion]),
@@ -98,6 +98,10 @@
       --urlbarView-icon-margin-start: calc((var(--urlbarView-rich-suggestion-default-icon-size) - 16px) / 2);
       --urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - 16px) / 2));
     }
+    &[rich-suggestion][icon-size="24"] {
+      --urlbarView-icon-margin-start: calc((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2);
+      --urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2));
+    }
   }
 
   display: flex;
@@ -766,6 +770,12 @@
     flex-basis: 24px;
   }
 
+  &[icon-size="38"] {
+    width: 38px;
+    height: 38px;
+    flex-basis: 38px;
+  }
+
   &[icon-size="52"] {
     width: 52px;
     height: 52px;
@@ -849,6 +859,16 @@
   background-color: var(--urlbarView-result-button-selected-background-color);
 }
 
+.urlbarView-row[type$=_yelp][icon-size="38"] > .urlbarView-row-inner > .urlbarView-favicon {
+  padding: calc((52px - 38px) / 2);
+  border: 1px solid var(--urlbar-box-focus-bgcolor);
+  border-radius: 2px;
+}
+
+.urlbarView-row[type$=_yelp][icon-size="38"]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-favicon {
+  border-color: var(--urlbarView-result-button-selected-background-color);
+}
+
 /* Search one-offs */
 
 #urlbar .search-one-offs:not([hidden]) {