Closed Bug 1569872 Opened 2 years ago Closed 2 years ago

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

Categories

(Firefox :: Theme, defect, P1)

70 Branch
x86_64
Windows 7
defect

Tracking

()

VERIFIED FIXED
Firefox 70
Tracking Status
firefox-esr60 --- unaffected
firefox-esr68 --- unaffected
firefox68 --- unaffected
firefox69 --- unaffected
firefox70 --- verified

People

(Reporter: Virtual, Assigned: nhnt11)

References

(Blocks 1 open bug, Regression)

Details

(Keywords: nightly-community, reproducible, ux-consistency, Whiteboard: [privacy-panel])

Attachments

(7 files)

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.

Has Regression Range: --- → irrelevant
Has STR: --- → yes
Summary: Divider line isn't centered vertically in Compacy mode → Divider line isn't centered vertically in Compacy Density mode
Whiteboard: [privacy-panel]
Summary: Divider line isn't centered vertically in Compacy Density mode → Divider line isn't centered vertically in Density modes

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

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

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.

Attached image 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.

Assignee: nobody → nhnt11
Priority: -- → P1
Status: NEW → ASSIGNED
Blocks: protections-panel
No longer blocks: 1569182
Regressed by: 1569182
Component: Site Identity and Permission Panels → Theme
Summary: Divider line isn't centered vertically in Density modes → Separator between the tracking protection and identity icons isn't centered vertically in all UI density modes

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

Duplicate of this bug: 1569878
Pushed by nhnt11@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/ac538289e17e
Simplify the implementation of the tracking protection icon separator. r=ntim
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70

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/

Status: RESOLVED → VERIFIED
Keywords: ux-consistency
You need to log in before you can comment on or make changes to this bug.