1810509 - Unified extensions description flashes when moving mouse between main button and gear button

Status: RESOLVED FIXED

(WebExtensions :: General, defect, P5)

Description

[Shane Hughes [:aminomancer]]

STR

1. Open the unified extensions panel
2. Mouse over an extension button
3. Now quickly move your mouse cursor over to the gear button like you're going to click on it
4. Go back and forth between the main button and gear button

Actual

The description string (under the extension name) flashes to the default string in the short time when the mouse is over the margin between the main button and the gear button. That is, there are 3 strings... the default string, the string that appears when hovering the main button, and the string that appears when hovering the gear button. And the default string shows up briefly when moving from the main button to the gear button, because there is a margin between the two.

Expected

The default string should not appear under these circumstances. So maybe the margin should be removed. It doesn't seem necessary — as far as I can tell, the main button and gear button can not be :hover or [open] at the same time (and the gear button doesn't seem to have any [open] styles anyway), so the two can't both have a background color at the same time. As long as only one of them is opaque at a time, there's no need for a margin to keep them visually apart.

Alternatively, we could replace the margin with padding on the gear button. It won't work on the main button because it has a label, but for the gear button, the background color could be moved from the toolbarbutton to the .toolbarbutton-icon. That is how toolbarbuttons in the toolbar work, I'm guessing for the same reason — 2px padding on the toolbarbutton allows the appearance of a margin between toolbarbuttons, but without the jankiness of an inert 4px space between the buttons.

Comment 1

[Tomislav Jovanovic :zombie]

Additional STR detail: the extension needs to have a browser action (or other active action) to trigger this issue.

Comment 2

[Tomislav Jovanovic :zombie]

Do you want to look into this Will, let me know if the repro is still not clear.

Comment 3

[William Durand [:willdurand]]

Attachment: Screenshot 2023-02-07 at 09.33.32.png

As we can see in the attached screenshot, the two buttons are not positioned next to each other for a given extension (I forced keyboard focus on the menu button and mouse over on the action button). When the mouse is placed in any part of the "white area", it is expected to see the permission message, and there is indeed a gap between the two buttons. This isn't a bug.

Unless we see two or more strings displayed at the same time, I don't think we have a bug here.

This gap is also more visible with High Contrast Mode enabled, I'll attach a second screenshot.

Comment 4

[William Durand [:willdurand]]

Attachment: HCM enabled on macOS

With HCM enabled (on macOS), this is what we can see. The menu is clearly separated from the action button (on the left), and hovering this action button changes its background color to some blue-ish color.

Comment 5

[Shane Hughes [:aminomancer]]

Sorry, somehow missed the notifications. I do understand the buttons are visually separated. They can remain visually separated without the strings flashing though. I proposed some ideas in comment 0, such as using padding or border instead of margins the way toolbarbuttons normally do. You can also see the "gutter" used in urlbar results for another example. There are several prominent visually distant elements in Firefox that are actually adjacent except for an invisible border or padding

Comment 6

[William Durand [:willdurand]]

I see, I'd be fine with fixing this assuming we won't impact HCM negatively.

:aminomancer is this something you'd be interested in fixing by submitting a patch? Thanks!

Comment 7

[Shane Hughes [:aminomancer]]

Sure, I'll let you know when I've got a patch up. Thanks :)

Comment 8

[Shane Hughes [:aminomancer]]

(In reply to William Durand [:willdurand] from comment #4)

Created attachment 9316280 [details]
HCM enabled on macOS

With HCM enabled (on macOS), this is what we can see. The menu is clearly separated from the action button (on the left), and hovering this action button changes its background color to some blue-ish color.

Hey Will, is it intentional that there's no border on the .unified-extensions-item-action-button? In HCM, it gets border-color: currentColor just like the menu-button. But unlike the menu-button, it doesn't have a border for that color to apply to. It's not related to this bug, I just figured I'd ask while it's fresh in my mind.

Comment 9

[Shane Hughes [:aminomancer]]

Attachment: Bug 1810509 - Add a clickable invisible space around the UEI menu button. r=willdurand

A unified extension item has two buttons: an action button and a menu
button. They are visually separated by 8px. The description string in
the action button depends on which of the buttons is hovered - the
action button, the menu button, or neither. If the mouse moves from the
action button to the menu button, it has to cross the 8px gap where
neither is hovered, causing the description to flash quickly between 3
strings. This patch circumvents that issue by making the 8px gap an
invisible padding of the menu button. This also removes the inert area
where you can move the mouse within the item and see a tooltip with the
name of the extension, but clicking would have no effect since a button
is not hovered.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/37b731020cf7
Add a clickable invisible space around the UEI menu button. r=willdurand,extension-reviewers,desktop-theme-reviewers,dao

Comment 11

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/37b731020cf7