1695700 - Proton Zoom controls styling needs more attention

Status: VERIFIED FIXED

(Firefox :: Menus, defect, P1)

Description

[Mike Conley (:mconley) (:⚙️)]

Spinning this out from bug 1694976.

• The icons within the toolbarbutton-icon element are too close to the edge. We should add some all-around padding here - 2px looks right to me, placed on the Zoom icons toolbarbutton-icon.
• The hover outline around the Zoom level indicator should match the dimensions around the Zoom icons
• The Zoom icons and level indicator are incorrectly using the secondary button styles. We should instead split out a separate series of special styles for the Zoom controls, since those appear to use their own set of colours not associated with other buttons or menu items.

Comment 1

[Bill Goldstein [:aja] (UTC-6)]

I'd argue that the zoom level indicator should have neither a hover state, nor an outline, nor be focusable...unless planning on making it contenteditable.

For the 3 icons, I'd suggest a 2px outline offset and width...same outline color as used on the rest of the appmenu items.

Comment 2

[Bill Goldstein [:aja] (UTC-6)]

N/M re: zoom level indicator...never realized it is combo of level indicator and reset button.

And the suggested outline treatment is just one of multiple ways of meeting Working Drafts:
https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum
https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced

I find Figure 17 in the former a particularly useful example for round controls.
It uses far more padding than 2px...basically to get up to recommended 44px X 44px touch-friendly target sizes.
It's also applicable to not necessarily round controls, e.g. radios, checkboxes, switches, chevron buttons, off-page link indications, etc.
Another (sort-of) open-source browser (which will remain unnamed) uses this extensively in its Settings UI, for example (though not in its main app menu's zoom controls, at this point in time).

Apologies if this has all been considered already.

Comment 3

[Mike Conley (:mconley) (:⚙️)]

Attachment: Bug 1695700 - Apply some polish to Proton AppMenu Zoom controls. r?emalysz!

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/aad5062f6a1e
Apply some polish to Proton AppMenu Zoom controls. r=emalysz

Comment 6

[Bogdan Tara[:bogdan_tara | bogdant]]

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

Comment 7

[Raluca Popovici, Desktop QA]

I can reproduce this bug on Fx 88.0, with proton on, using Win 10.
Verified - Fixed in latest Nightly 90.0a1 (2021-04-19) and Fx 89.0b2,with proton on, using Windows 10x64 and Mac 11.