1709161 - AppMenu zoom out button icon should have its horizontal stroke match the zoom in button

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P2)

Description

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

The padding being applied to the zoom out button here:

https://searchfox.org/mozilla-central/rev/54097530955a98c768f2aaf56925578ec886ec77/browser/themes/shared/customizableui/panelUI.inc.css#1498-1500

is compacting it a bit, and getting rid of a subpixel stroke line, which makes it seem vertically off-center. It's also out of vertical alignment with the zoom in button.

I think we can achieve a match with the zoom in button by setting all padding to 0 (except maybe setting padding-bottom: 1px might help make it match the alignment on the zoom in button.

Comment 1

[Sam Foster [:sfoster] (he/him)]

We have a + on circle icon (add-circle-fill.svg / add-circle-fill-12.svg) we could use here for the zoom in, which would eliminate the scaling we are currently doing (16px icons are being squished to 15 and 14px), and also give us a better chance of getting those symbols aligned inside their circles. KatieC is going provide a zoom out icon (subtract-circle-fill.svg) to see if doing it that way can improve things here.

Comment 2

[Sam Foster [:sfoster] (he/him)]

Attachment: appmenu-zoom-lighttanddarktheme.png

Here's what we end up with, using the circle-filled icons and removing all the <image> padding so they are 16x16, in the dark and light theme, with one of the buttons focused.

Comment 3

[Sam Foster [:sfoster] (he/him)]

Attachment: Bug 1709161 - Use circle-fill icons for the appMenu zoom in/out buttons. r?mconley

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c7e59c368cae
Use circle-fill icons for the appMenu zoom in/out buttons. r=mconley

Comment 5

[Alexandru Michis [:malexandru]]

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

Comment 6

[Romain Testard [:RT]]

Can we please uplift to Beta 89?

Comment 7

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

Comment on attachment 9221895 [details]
Bug 1709161 - Use circle-fill icons for the appMenu zoom in/out buttons. r?mconley

Beta/Release Uplift Approval Request

• User impact if declined: Users might find that the icons in their AppMenu to control zoom levels are slightly blurry, or very slightly misaligned.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Mainly an asset swap, but with some CSS changes to support it. Both of those sets of changes are restricted to the AppMenu and are well contained and understood.
• String changes made/needed: None.

Comment 8

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9221895 [details]
Bug 1709161 - Use circle-fill icons for the appMenu zoom in/out buttons. r?mconley

Approved for our last beta before 89 RC, thanks.

Comment 9

[Pascal Chevrel:pascalc (PTO until April 26)]

https://hg.mozilla.org/releases/mozilla-beta/rev/1c9ad35b4de9

Comment 10

[Alin Ilea, Desktop QA]

Verified - Fixed in latest Nightly 90.0a1 (2021-05-20) and Beta 89.0b15, using Windows 10, Ubuntu 20 and macOS 11.