1685490 - [Enhancement] Consider differently aligning the toggles in the Customization panel to their Section titles

Status: VERIFIED FIXED

(Firefox :: New Tab Page, enhancement, P1)

Description

[Maria Heres, inactive, contact Ecosystem QA]

Attachment: toggle alignement.png

[Affected versions]:

• Firefox Beta 85.0b5 (Build ID: 20210105185604)

[Affected Platforms]:

• Windows 10 x64

[Prerequisites]:

• Have the latest Firefox Beta version installed and open.
• Have browser.newtabpage.activity-stream.newNewtabExperience.enabled set to true.

[Steps to reproduce]:

1. Open a new tab.
2. Click the “Personalize” button.
3. Observe the position of the toggles compared to the corresponding Section titles.

[Proposed result]:

• The toggle is aligned differently, so it is lower compared to the current position.

[Current result]:

• The toggle seems like it is slightly higher than the option it represents.

[Notes]:

• When I tried lowering them with 5px they seemed more part of the section they represented in the menu, but that was only in English and did not take into account diacritics or any other aspect that the move might influence, design requirements, nor any standards.
• Attached is a screenshot of the current behavior.

Comment 1

[Gavin Suntop [:gvn] (they/them)]

Can y'all prioritize this? Thx!

Comment 2

[Erica Wright [:ewright]]

Attachment: Bug 1685490 - Align toggles and titles in customize menu

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cb5f069a6527
Align toggles and titles in customize menu r=prathiksha

Comment 4

[Bogdan Tara[:bogdan_tara | bogdant]]

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

Comment 5

[Maria Heres, inactive, contact Ecosystem QA]

I am not able to verify that the change is observable comparing the first version without (Firefox Nightly 87.0a1 Build ID:20210126155519) and the latest available Nightly (Firefox Nightly 87.0a1 Build ID:20210127093943) on Windows 10.
Visually comparing them, the two look the same to me. I am also not able to verify that the change introduced a margin-top of 2 px for switches - using the Inspect tool didn't reveal it.
I am attaching screenshots of the visual comparison between Nightly versions, current behavior inspected and the result of using the Inspector tool.

Comment 6

[Erica Wright [:ewright]]

Thank you, it looks like this did not bundle correctly.

Comment 7

[Erica Wright [:ewright]]

(In reply to Maria Heres, :mheres, Ecosystem QA from comment #5)

I am not able to verify that the change is observable comparing the first version without (Firefox Nightly 87.0a1 Build ID:20210126155519) and the latest available Nightly (Firefox Nightly 87.0a1 Build ID:20210127093943) on Windows 10.
Visually comparing them, the two look the same to me. I am also not able to verify that the change introduced a margin-top of 2 px for switches - using the Inspect tool didn't reveal it.
I am attaching screenshots of the visual comparison between Nightly versions, current behavior inspected and the result of using the Inspector tool.

Thank you Maria, could you check this again, we've now landed the bundle correctly.

Comment 8

[Erica Wright [:ewright]]

(In reply to Erica Wright [:ewright] from comment #7)

(In reply to Maria Heres, :mheres, Ecosystem QA from comment #5)

I am not able to verify that the change is observable comparing the first version without (Firefox Nightly 87.0a1 Build ID:20210126155519) and the latest available Nightly (Firefox Nightly 87.0a1 Build ID:20210127093943) on Windows 10.
Visually comparing them, the two look the same to me. I am also not able to verify that the change introduced a margin-top of 2 px for switches - using the Inspect tool didn't reveal it.
I am attaching screenshots of the visual comparison between Nightly versions, current behavior inspected and the result of using the Inspector tool.

Thank you Maria, could you check this again, we've now landed the bundle correctly.

The bug that fixes this was backeed out, I'll uupdate again once it lands

Comment 9

[:prathiksha]

Bug 1687970 fixes the bundle issues. It was not backed out. I think this bug is ready for Maria to take another look.

Comment 10

[Maria Heres, inactive, contact Ecosystem QA]

I have verified that a margin-top of 2px has been introduced for the toggles using Firefox Nightly 87.0a1 (Build ID: 20210128215644) on Windows 10, macOS 10.15.6, Linux Mint 20.

Comment 11

[:prathiksha]

Comment on attachment 9199100 [details]
Bug 1685490 - Align toggles and titles in customize menu

Beta/Release Uplift Approval Request

• User impact if declined: A small portion of users enrolled in our experiments won't be able to see these style changes to the newtab page
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• 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): It's a one line stye change and it's behind a pref
• String changes made/needed: None

Comment 12

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

Comment on attachment 9199100 [details]
Bug 1685490 - Align toggles and titles in customize menu

Approved for 86 beta 4, thanks.

Comment 13

[Julien Cristau [:jcristau]]

https://hg.mozilla.org/releases/mozilla-beta/rev/ddda711432db

Comment 14

[Maria Heres, inactive, contact Ecosystem QA]

I have verified that a margin-top of 2px has been introduced for the toggles using Firefox Beta 86.0b4 (Build ID: 20210131185630) on Windows 10, Linux Mint 20 and macOS 11.1. The toggles are now better aligned with the text of the option they represent.