1754588 - Add a block button to best match rows

Status: VERIFIED FIXED

(Firefox :: Address Bar, task, P1)

Description

[Drew Willcoxon :adw]

We need to add a block/dismiss button to best match rows in the view. This bug is narrowly scoped to adding the button only. Other bugs will cover hooking up the button to an actual blocking mechanism.

This bug should update browser_bestMatch.js. For now the test should only make sure the block button correctly appears, and maybe also that keyboard navigation works properly.

Figma spec

Comment 1

[Drew Willcoxon :adw]

Ryan says:

Change the dismiss icon “X” to a thumbs down - IN PROGRESS WITH UX.

Comment 2

[Drew Willcoxon :adw]

Attachment: Bug 1754588 - Part 1: Generalize buttons in UrlbarView and add a block button to best match rows.

This adds a block button to best match rows. The button looks similar to the ?
help button. For best match rows, both the block and help buttons appear, with
the block button first.

Figma spec, see "Top pick proposal
for Firefox 99 - awesomebar":
https://www.figma.com/file/seJ2ZA4v3FgoV7jCxUR74B/Firefox-Suggest?node-id=4937%3A67136

This does not handle clicks on the button because that will be covered by bug
1754591 and bug 1754594.

To test this, the easiest way is still probably to pause browser_bestMatch.js.
You can use the nonsponsored() task to test the block button by itself and
nonsponsoredHelpButton() to test with a help button; pause before the
promisePopupClose() at the end. If that's not practical I can post my WIP for
triggering best matches and you'll need to enable Firefox Suggest too.

To implement this I generalized the existing help button code into a way to add
arbitrary buttons. Instead I could have duplicated it, but that's not as nice
and it makes the CSS a little uglier because we'd need rules for handling the
help button alone, the block button alone, and both (although there are no plans
to show the block button alone). In addition, eventually we want a way to report
inappropriate suggestions so there's been discussion about having a report
button too. It may turn out that we add a single ... button for everything,
but it's not clear yet.

I tweaked the button style a little to match the new spec. Help buttons in the
usual Firefox Suggest rows will get these tweaks too of course. The help button
(and block button) are now smaller, have smaller margins, and their hover
background color is the same as the color for rows.

Finally, I noticed we're not correctly updating item[role] when reusing a row
and going from without a help button to with a help button, or vice versa, so
this fixes that too.

Comment 3

[Drew Willcoxon :adw]

Attachment: Bug 1754588 - Part 2: Use the thumb-down icon for the best-match block button.

Per Product, we need to use a thumb-down icon for the best-match block button
instead of the close X. We have a thumb-down icon already in
browser/themes/shared/controlcenter/socialblock.svg. I checked with Ryan and
that's the icon we should use here.

This does the following:

• Move the icon to browser/themes/shared/icons/thumb-down.svg
• Update the sites where that icon is currently used
• Use the icon for the best-match block button

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b7bf20c12497
Part 1: Generalize buttons in UrlbarView and add a block button to best match rows. r=dao
https://hg.mozilla.org/integration/autoland/rev/0c009baa71e3
Part 2: Use the thumb-down icon for the best-match block button. r=dao

Comment 5

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/b7bf20c12497
https://hg.mozilla.org/mozilla-central/rev/0c009baa71e3

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 has a thumbs-down button and a ? help button, in that order (see Figma spec if necessary)
6. Use the mouse to hover over the buttons and verify the hover states are correct (see Figma spec)
7. Use the keyboard to move the selection through the row and buttons and verify it behaves correctly (see Figma spec)
8. Type ama to trigger the usual Firefox Suggest suggestion for Amazon and verify that it only has the ? help button and it behaves properly

Note that clicking the thumbs-down button will load the Amazon URL because we haven't hooked up its functionality yet. This bug is only about showing the button in the row.

Comment 7

[(PTO until Sept 5) 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.

• In order to verify this issue we have used the STR described in comment 6. The "thumbs-down" and the "?" help button are correctly displayed.

However we have noticed that in most of the cases when trying to focus the "?" help button using keyboard navigation, the search panel is dismissed and the "Save to Pocket" toolbar button is focused instead. We have logged this issue in Bug 1756163.