1752251 - Implement best match rows in the urlbar view

Status: VERIFIED FIXED

(Firefox :: Address Bar, task, P1)

Description

[Drew Willcoxon :adw]

As part of best match results in the urlbar, we'll need to implement best match rows in the view. See the Figma spec.

Comment 1

[Drew Willcoxon :adw]

Attachment: Bug 1752251 - Implement best match rows in the urlbar view.

This creates a new type of bestmatch row in the view. The UX spec is here:
https://www.figma.com/file/seJ2ZA4v3FgoV7jCxUR74B/Firefox-Suggest?node-id=5235%3A1284
(See: “Best match” proposal 
 for Firefox 99)

Best match rows look similar to standard rows except they have a large 52x52
icon with the title and URL vertically centered next to it. Best match rows that
are sponsored also have the usual "Sponsored" label.

We're targeting 99 for the initial MVP version of this feature. For the MVP,
best matches will always be quick suggest results. Long term, there's been
discussion about incorporating history and bookmarks too.

Since 99 is coming up soon and we don't have much time, I did what I think is
the most straightforward thing and added another new row type, bestmatch. I
considered using the usual row DOM, but it's tricky because for best match we
need to show both the URL and sponsored label, and the sponsored label needs to
be shown below the title. The way we show the sponsored label for typical quick
suggest rows is by putting it in the action text and wrapping it below the
title, but that doesn't work for best match since it must show the URL.

However, best match rows do look similar enough to the usual rows that I think
it would be worth modifying the usual row DOM so that it uses this new best
match DOM. That would simplify the JS and CSS. It's also a much larger, riskier
change and there might be disagreement about it, and I don't want to block this
feature on that, so I'd like to come back to it. I have a WIP in D137095 that
also includes some general refactoring and simplification.

I could have implemented this as a dynamic result type like the onboarding
tab-to-search, but that would couple best match to a particular provider --
quick suggest -- and as I mentioned we may end up expanding best match to all
types of results. I don't want to add a new type and all of that code if we know
we may remove it later.

This revision relies on a new result.isBestMatch property that will be set for
quick suggest best matches in a future revision.

The best match DOM looks like this:

<span class="urlbarView-row">
  <span class="urlbarView-row-inner">
    <img class="urlbarView-favicon">
    <span class="urlbarView-row-body">
      <div class="urlbarView-row-body-top">
        <div class="urlbarView-row-body-top-no-wrap">
          <span class="urlbarView-title"></span>
          <span class="urlbarView-title-separator"></span>
        </div>
        <span class="urlbarView-url"></span>
      </div>
      <div class="urlbarView-row-body-bottom">Sponsored</div>
    </span>
  </span>
</span>

Finally, this also adds a "Best Match" group label in the view. A few notes on
this:

• The string isn't finalized yet but we can easily update it once it is.
• Since right now best match will be en-US only and is related to Firefox
  Suggest, I added the string to firefoxSuggest.ftl, which is not localized.
• In a future revision I'll add a browser.urlbar.bestMatch.enabled pref. At
  that time, I'll move the caching of this string behind that pref.

Comment 2

[Asif Youssuff]

Drew, can the Figma spec be opened?

Comment 3

[Drew Willcoxon :adw]

Hi Asif, I'm sorry but I asked our UX team and they'd prefer to keep it closed for now.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f5b103fb4621
Implement best match rows in the urlbar view. r=dao

Comment 5

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/f5b103fb4621

Comment 6

[Drew Willcoxon :adw]

STR for QA:

1. Bug 1756067 is a prerequisite; if it isn't in the build yet, you'll need to wait until it is
2. Enable Firefox Suggest
3. Enable best match by setting browser.urlbar.bestMatch.enabled to true
4. Type amazon to trigger an Amazon best match
5. Verify the best match row appears in the third position (under the "Search with Amazon.com" row)
6. Verify the best match row appears as shown in the Figma spec
7. Make the window narrow to test the overflow behavior of the best match row and verify that at first the URL fades out and then it wraps under the title as the window gets narrower
8. Type betty to trigger the Betty White Wikipedia best match
9. Verify the best match row appears in the second position
10. Verify the best match row appears as shown in the Figma spec and it does not have a "Sponsored" label

Comment 7

[Cosmin Muntean [:cmuntean], Ecosystem QA]

We have verified this issue on the latest Nightly 99.0a1 build (Build ID: 20220218090822) on Windows 10 x64, macOS 10.15.7 and Ubuntu 20.04 x64. Since the patch from Bug 1756067 is not available in Firefox 98, we will not able to verify this bug in that version.

• In order to verify this issue we have used the STR from comment 6. The Best Match results are correctly displayed in the correct position.

@Drew, one question about the Best Match results UI. Not sure if it is not yet ready, or the Figma is not updated, but for example, if you search for "betty", the best result has the following format: "Wikipedia - Betty White - URL". However, in Figma, the order of the strings/words seems to be different: "Octavia Estelle Buttler · Wikipedia - URL".
Will the current implementation be changed to look like Figma?

Comment 8

[Drew Willcoxon :adw]

Thanks Cosmin.

(In reply to Cosmin Muntean [:cmuntean], Ecosystem QA from comment #7)

Since the patch from Bug 1756067 is not available in Firefox 98, we will not able to verify this bug in that version.

Thanks for noting this. 99 is the version best match will ship in, so there's no need to verify on 98.

Will the current implementation be changed to look like Figma?

The Figma is incorrect on this point, so we can just ignore that part. (For details, the titles of Suggest suggestions are determined by our partner, and the "Wikipedia - Betty White - URL" format that Firefox shows is how the title is specified in the partner data.)