1578093 - Too much spacing (+4px) between Lock Icon and Address Text

Status: VERIFIED FIXED

(Firefox :: Site Identity, defect, P1)

Description

[Mehmet]

Attachment: Actual_vs_expected.png

Nightly 70.0a1 (2019-09-01) (64-Bit

STR:

1.) Visit a page
2.) Take a look at the spacing between Lock icon and Address Text

Actual: It seems that the Address Text is 4px to far right.

Expected: The Address Text should be moved by 4px to the left, so that the Lock icon looks nicely centered between divider and text.

A screenshot is attached.

Thanks.

Comment 1

[Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.)]

"Expected with hover on Lock icon" looks really bad in my opinion.

Comment 2

[Mehmet]

Attachment: Actual_vs_expected_reduced_by_2px.png

Thanks for your feedback. Maybe moving the text only by 2px or 3px (instead of 4px) could also be an alternative?

Attached the screenshot of moving the text by 2px to the left.

Comment 3

[Mehmet]

Attachment: Actual_vs_expected_reduced_by_3px.png

And attached the screenshot of moving the text by 3px to the left.

Comment 4

[Drew Willcoxon :adw]

I'd like to keep all these identity-block-related bugs in Site Identity since that team is the one that made the recent changes that broke/changed all this.

Comment 5

[Johann Hofmann [:johannh]]

Bryan, can you confirm that we want this? :)

Thanks!

Comment 6

[(inactive) Nihanth Subramanya [:nhnt11]]

FWIW the screenshots don't consider states when there are more icons (for permissions). IMO things look fine right now.

Comment 7

[Mehmet]

Attachment: reducing_padding_by_2_px.mov

(In reply to Nihanth Subramanya [:nhnt11] from comment #6)

FWIW the screenshots don't consider states when there are more icons (for permissions). IMO things look fine right now.

I am not a UX Designer or similar... Just only a user :) But from my point of view, moving it 2 px to the left would look more centered :)

Also it would match the spacing between Magnifying Glass and the Text Input, when you align the Lock icon with the Magnifiying Glass. Attached a screencast of what I mean :)

Thanks for listening.

Comment 8

[bbell]

(In reply to Mehmet from comment #7)

This is the outcome Design is looking for.

Comment 9

[Liz Henry (:lizzard) (relman/hg->git project)]

Can you help find an owner to work on this since it looks like we want it for 70 release? Thanks!

Comment 10

[Johann Hofmann [:johannh]]

Tim, do you happen to have time for this?

FWIW I think this is optional for 70.

Comment 11

[Tim Huang[:timhuang]]

Attachment: Bug 1578093 - Change the margin end of the ideneity box to 2px from 4px in oder to make the lock icon looks more centered. r?johannh!

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/73fae0c9b230
Change the margin end of the ideneity box to 2px from 4px in oder to make the lock icon looks more centered. r=johannh

Comment 13

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/73fae0c9b230

Comment 14

[Tim Huang[:timhuang]]

Comment on attachment 9097333 [details]
Bug 1578093 - Change the margin end of the ideneity box to 2px from 4px in oder to make the lock icon looks more centered. r?johannh!

Beta/Release Uplift Approval Request

• User impact if declined: The space between the identity box and the address text would be too wide, so the lock icon won't look centered.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: 1. Open a regular site

2. Inspect the space between the identity box and the address text to check if it is 2px.

• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): This is only a small CSS change for skyline polishing.
• String changes made/needed: None

Comment 15

[Mehmet]

Many thanks that you've fixed this :)

Comment 16

[Liz Henry (:lizzard) (relman/hg->git project)]

Comment on attachment 9097333 [details]
Bug 1578093 - Change the margin end of the ideneity box to 2px from 4px in oder to make the lock icon looks more centered. r?johannh!

More skyline polish, minor css fix. OK for beta 12.

Comment 17

[Peter Magyari (Desktop QA)]

Reproduced this issue on Nightly 70.0a1 (2019-09-01) and verified that it has been fixed on Nightly 71.0a1 (2019-10-02)

Comment 18

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/releases/mozilla-beta/rev/37355d143d67

Comment 19

[Md. Rahimul Islam]

I have successfully reproduced this bug with 70.0a1 (2019-09-01) (32-bit) on windows 10(32bit)

this bug is verified fix with latest Nightly 71.0a1 (2019-10-08) (32-bit)

Build ID: 20191008093420
Mozilla/5.0 (Windows NT 6.1; rv:71.0) Gecko/20100101 Firefox/71.0

Comment 20

[Peter Magyari (Desktop QA)]

Verified fixed on Firefox Beta 70.0b13 (20191007220302) on Win 7/10 and MacOS 10.14