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.
Differential Revision: https://phabricator.services.mozilla.com/D138508
db5729e7fe