Closed Bug 1695700 Opened 7 months ago Closed 6 months ago

Proton Zoom controls styling needs more attention

Categories

(Firefox :: Menus, defect, P1)

defect

Tracking

()

VERIFIED FIXED
89 Branch
Tracking Status
firefox89 --- verified

People

(Reporter: mconley, Assigned: mconley)

References

(Blocks 1 open bug)

Details

(Whiteboard: [proton-hamburger-menu])

Attachments

(1 file)

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.
Assignee: nobody → ewright
Status: NEW → ASSIGNED
Assignee: ewright → nobody
Status: ASSIGNED → NEW
Severity: -- → S3
Type: task → defect
Severity: S3 → S4

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.

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.

Depends on: 1698031
Priority: P5 → P1
Assignee: nobody → mconley
Status: NEW → ASSIGNED
Duplicate of this bug: 1698031
Pushed by mconley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/aad5062f6a1e
Apply some polish to Proton AppMenu Zoom controls. r=emalysz
Status: ASSIGNED → RESOLVED
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → 89 Branch

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.

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.