1713429 - Inconsistent focus and hover effects of AB context menu button in contacts sidebar

Status: RESOLVED FIXED

(Thunderbird :: Theme, task)

Description

[Thomas D. (:thomas8)]

Attachment: Screenshot 1: Proton-inconsistent focus style of AB context menu button

Hover and focus effects of AB context menu button in contacts sidebar are odd.

• Focus: With Proton, dotted blue focus indication is no longer wanted - needs plain blue border.
• Hover of focused button: suddenly showing the expected focus style (which is unexpected).
  See screenshots.

Comment 1

[Thomas D. (:thomas8)]

Attachment: Screenshot 2: Unexpected style change when hovering focused button (something like this should be the focus style)

Comment 2

[Thomas D. (:thomas8)]

Attachment: Screenshot 3: Odd double focus border

I am also seeing some "double" focus borders around interactive elements like buttons and dropdowns.
It looks a bit strange (flimsy? unpolished? or maybe just different?)
Maybe focus border should conflate with the element border, as seen on the search box and address row when they have focus?
Or could we remove the gap between the focus border and the element border?

Comment 3

[Thomas D. (:thomas8)]

Attachment: Screenshot 4: Single focus border on identity selector

For comparison, here's our identity selector dropdown (not structurally different from AB dropdown) which has single-border focus. I think that looks better, more calm, more focused :-)

Comment 4

[Richard Marti (:Paenglab)]

(In reply to Thomas D. (:thomas8) from comment #2)

Created attachment 9224120 [details]
Screenshot 3: Odd double focus border

I am also seeing some "double" focus borders around interactive elements like buttons and dropdowns.
It looks a bit strange (flimsy? unpolished? or maybe just different?)
Maybe focus border should conflate with the element border, as seen on the search box and address row when they have focus?
Or could we remove the gap between the focus border and the element border?

Welcome to Proton. :-)

I'll do our adaptions to the address sidebar.

Comment 5

[Richard Marti (:Paenglab)]

Attachment: 1713429-abContextMenuButton-focus.patch

This fixes the abContextMenuButton's focus ring.

The 1px gap is a Proton styling and I leave it now. FX uses 2px which is too much in the normal UI. In the prefs etc. we still use 2px.

The gap is also to better show the focus on checked checkmarks or radio buttons which have the same blue background and a focus on them would only grow the area which isn't so good visible.

Comment 6

[Richard Marti (:Paenglab)]

Attachment: 1713429-abContextMenuButton-focus.patch

Made that the [default] button has always his border, also when another button has the focus. This is to mimic the behaviour of TB 68 which don't have the themeable dialogs. You can test it for example on a folder properties dialog.

Comment 7

[Richard Marti (:Paenglab)]

Attachment: 1713429-abContextMenuButton-focus.patch

Bah, found that Mac had its owns style for the focus, removed.

Comment 8

[Alessandro Castellani [:aleca]]

Comment on attachment 9224167 [details] [diff] [review]
1713429-abContextMenuButton-focus.patch

Review of attachment 9224167 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good, thanks for taking care of this.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/52cc1c44232a
Make the focus ring of the abContactsPanel's abContextMenuButton follow Proton. r=aleca