1702770 - Make the gap between the urlbar rounded edge and "About:" pages chicklets more uniform

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P3)

Description

[Romain Testard [:RT]]

Update corner radius to 2px – Only for about:page chicklets (the ones that are flushed to the left edge of the URL bar).

Comment 1

[Marco Bonardo [:mak]]

Attachment: Screenshot (171)_LI.jpg

I'm confused, 2px would not be coherent with the toolbarbuttons, and figma shows me 4px radius

Comment 2

[Romain Testard [:RT]]

AMy can you please help clarify?

Comment 3

[Amy Lee [:amylee] UX]

(In reply to Romain Testard [:RT] from comment #2)

AMy can you please help clarify?

Hi,

Yes the original spec was set to 4px. Now that it's been implemented I think since it's right to the edge of the search bar and it doesn't behave like a button like the "search with…" chicklet that we should have the radius be 2px to better fit within the URL bar when it's so close to the left edge of the URL bar.

Comment 4

[Romain Testard [:RT]]

Thanks Amy, we'll keep the bug opened but we'll keep it a P3 to reflect the low priority VS other proton bugs.

Comment 5

[Marco Bonardo [:mak]]

(In reply to Amy Lee [:amylee] UX from comment #3)

Yes the original spec was set to 4px. Now that it's been implemented I think since it's right to the edge of the search bar and it doesn't behave like a button like the "search with…" chicklet that we should have the radius be 2px to better fit within the URL bar when it's so close to the left edge of the URL bar.

It behaves like a button, it opens the identity panel and it has hover and selected state.
I understand the reasoning behind this, since these buttons are inside a 4px radius container, 2px would look smoother, but then other icons may have a similar problem, the shield and star buttons for example have 4px radius hover state.
My concern is making some entities 2px and some 4px introduces inconsistencies among them. And making everything 2px does compared to the toolbar.

To sum up the current entities here:

1. about pages chiclets, has 4px radius this bug is requesting to set a 2px radius
2. icons with hover and selected states, these have a 4px radius on hover, and they can be in the same place as the about pages chiclets (the shield button or the star button for example)
3. search mode chiclet, has a 4px radius
4. zoom indicator has 4px radius

Comment 6

[Marco Bonardo [:mak]]

I forgot to update state here.
We probably want to try this, only for the urlbar-label-box, because it's the only one with a solid background that touches the left side of the urlbar. If the fact this will have different borders than other toolbar/urlbar widgets is not particularly evident or disturbing, it will surely make the padding around the label box look more uniform.
The change should only be limited to cases where the label box is the first widget in the urlbar (for example in the search mode case it is not the first widget, there's a magnifier lens before it).

Comment 7

[Marco Bonardo [:mak]]

Attachment: Bug 1702770 - Make the gap between the urlbar edge and the identity-box more uniform. r=harry

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9faa7ea00e95
Make the gap between the urlbar edge and the identity-box more uniform. r=desktop-theme-reviewers,dao

Comment 9

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/9faa7ea00e95

Comment 10

[Marco Bonardo [:mak]]

Comment on attachment 9219155 [details]
Bug 1702770 - Make the gap between the urlbar edge and the identity-box more uniform. r=harry

Beta/Release Uplift Approval Request

• User impact if declined: Part of MR1 design. This is a polish fix.
• 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: The change is quite subtle and unlikely to raise quality assurance concerns.
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Just changing some border-radius.
• String changes made/needed:

Comment 11

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

Comment on attachment 9219155 [details]
Bug 1702770 - Make the gap between the urlbar edge and the identity-box more uniform. r=harry

Approved for 89 beta 7, thanks.

Comment 12

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

https://hg.mozilla.org/releases/mozilla-beta/rev/828fddcf002e

Comment 13

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

I could no longer reproduce this issue using Fx 89.0 and Fx 90.0b12 and Fx 91.0a1 on Windows 10 x64, Ubuntu 20.04 and macOS 10.13.