1569872 - Separator between the tracking protection and identity icons isn't centered vertically in all UI density modes

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

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

STR:

1. Change Density to Compact in Customize
2. Open this website page https://www.mozilla.org/en-US/
   and see that divider line isn't centered vertically

It should move up by 2 px in Compacy Density mode.

Comment 1

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

Attachment: bug.png

Comment 2

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

Attachment: Compact Density mode.png

Comment 3

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

Attachment: Normal Density mode.png

Comment 4

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

Attachment: Touch Density mode.png

Comment 5

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

How it looks now:

Compacy Density mode:

• 4 px of free space above
• 20 px of divider line (visible one)
• 0 px of free space below

Normal Density mode:

• 4 px of free space above
• 21 px of divider line
• 3 px of free space below

Touch Density mode:

• 4 px of free space above
• 21 px of divider line
• 5 px of free space below

Comment 6

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

How it should look (based on 20 px divider line):

Compacy Density mode:

• 2 px of free space above
• 20 px of divider line
• 2 px of free space below

Normal Density mode:

• 4 px of free space above
• 20 px of divider line
• 4 px of free space below

Touch Density mode:

• 5 px of free space above
• 20 px of divider line
• 5 px of free space below

How it should look (based on 2/3/4 px of free space):

Compacy Density mode:

• 2/3/4 px of free space above
• 20/18/16 px of divider line
• 2/3/4 px of free space below

Normal Density mode:

• 2/3/4 px of free space above
• 24/22/20 px of divider line
• 2/3/4 px of free space below

Touch Density mode:

• 2/3/3 px of free space above
• 26/24/22 px of divider line
• 2/3/4 px of free space below

Comment 7

[Fanolian]

Attachment: [Compact density] Protection Panel separator vs EV cert's

The Protection Panel separator do not align with a EV cert's.
Attached is an example in compact mode but it also applies to touch mode.

Comment 8

[Fanolian]

Attachment: Separator color issue

One more question:
Should the color of Protection Panel separator match either that of the EV cert's or the icon's color? IMO it looks a bit inconsistent when protection and EV are in effect.

Comment 9

[Tim Nguyen :ntim]

The tracking protection icon separator should just be implemented like the identity block one: https://searchfox.org/mozilla-central/source/browser/themes/shared/identity-block/identity-block.inc.css#90-92

Comment 11

[(inactive) Nihanth Subramanya [:nhnt11]]

Attachment: Bug 1569872 - Simplify the implementation of the tracking protection icon separator. r=ntim

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ac538289e17e
Simplify the implementation of the tracking protection icon separator. r=ntim

Comment 13

[Razvan Maries]

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

Comment 14

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

I'm confirming that bug is fixed, starting in Mozilla Firefox Nightly 70.0a1 (2019-08-09), so I'm marking this bug as VERIFIED.
Thank you very much! \o/