Closed Bug 1567440 Opened 5 months ago Closed 3 months ago

"Tracking Protections" icon is too faded and bleached

Categories

(Firefox :: Site Identity, defect, P3)

70 Branch
defect

Tracking

()

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

People

(Reporter: Virtual, Assigned: johannh)

References

(Blocks 1 open bug)

Details

(5 keywords, Whiteboard: [privacy-panel][skyline])

Attachments

(9 files)

226.62 KB, image/png
Details
116.18 KB, image/png
Details
9.24 KB, image/png
Details
113.42 KB, image/png
Details
171.79 KB, image/png
Details
171.92 KB, image/png
Details
113.37 KB, image/png
Details
113.35 KB, image/png
Details
47 bytes, text/x-phabricator-request
Details | Review
Attached image bug.png
  1. Open https://searchfox.org/ or https://hg.mozilla.org/
  2. Look on "Tracking Protections" icon
    and see that it looks now too faded and bleached
    and inconsistent compared to other icons and items in bars.

What's more this feature has blocking functions, so it can't be harder to see, while having important settings and such influence and effect on browsing, compared to other icons and items in bars.

This icon is will change soon :)

Whiteboard: [privacy-panel][triage]
Status: NEW → RESOLVED
Closed: 5 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1565815
Whiteboard: [privacy-panel][triage]

Reopening, as bug #1565815 and bug #1565816 didn't fix it.

Status: VERIFIED → REOPENED
Has Regression Range: --- → yes
Has STR: --- → yes
Resolution: DUPLICATE → ---
Whiteboard: [privacy-panel][triage]

It's a beauty, regardless which theme. It's meant to be unobtrusive when idle.
But why doesn't it block Gratavar's 3rd party cookies for you? It should be purple on BMO. Edit: I see, we've got another improvement. :)

This is by design, the shield is purple when protections are active, grey when inactive and strike-through when disabled for the site. :)

Status: NEW → RESOLVED
Closed: 5 months ago4 months ago
Resolution: --- → INVALID

But "Tracking Protections" icon looks inconsistent compared to other icons in bars. Even 'not active' "Bookmark Star" looks normal and it's not in any way obtrusive when 'idle'.
What's more it's illogical, as you can press it and configure its settings, using faded and bleached icons was always reserved for only non operative buttons like "Back", "Forward" and "Refresh" in about:blank.

Is it final unchangeable decision?

Flags: needinfo?(jhofmann)

How to make otherwise visually clear, that this feature is present, but idle, so it doesn't make sense to click here at this moment ("Please don't worry!")?

It's already clearly distinguishable visually:

  • colored icon = blocked content, Enhanced Tracking Protection is enabled
  • not colored icon = not blocked content, Enhanced Tracking Protection is enabled
  • not colored strike-through icon = Enhanced Tracking Protection is disabled

I'm just talking about inconsistency.
That new "Enhanced Tracking Protection" icon is too faded and bleached,
compared to old used icon for this
and also compared to other icons in bars.

Using faded and bleached icons was always reserved for only non operative buttons like "Back", "Forward", "Refresh", etc.

For example, user can even forget that it disabled "Enhanced Tracking Protection" for testing website page compatibility, because it's in "unobtrusive idle" mode.

It's also illogical, as this feature it's still active, enabled and working.
You can press it and configure Protection Settings there.

What's more, it's even inconsistent how other content blockers like uBlock Orgin or Adblock Plus behave.
They don't use "unobtrusive idle" mode, when they don't block anything on website page.
They use it only when you disable it manually on specific website page, but icon isn't that faded and bleached.

Eric, can you weigh in here? I think there's a valid point that the button looks "disabled" but I also agree there should be less emphasis on it when no protections are active. What's your opinion?

Flags: needinfo?(jhofmann) → needinfo?(epang)

Spoke to Stephen Horlander about this. There's pros/cons to each approach. We decided we can update the icon to match other icons in the address bar so that it does not look like protections are turned off. I'll update the spec to reflect this update. Thanks for the ni Johann!

Flags: needinfo?(epang)

\o/ - reopening this per comment #11 and comment #12.
I'm also attaching 'how it looks' now and 'how it should look' (done fast in Paint, old icon is from Firefox 69 so it's slightly different in size and look).

Status: RESOLVED → REOPENED
Resolution: INVALID → ---

The priority flag is not set for this bug.
:johannh, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(jhofmann)
Priority: -- → P3
Flags: needinfo?(jhofmann)
Duplicate of this bug: 1578316
Assignee: nobody → jhofmann
Status: NEW → ASSIGNED
OS: Windows 7 → All
Hardware: x86_64 → All
Whiteboard: [privacy-panel][triage] → [privacy-panel][skyline]

From what I can tell, the gray color, which has an effective contrast of 2.12:1, is created by a fill-opacity of 0.3 set on #tracking-protection-icon-container. To meet WCAG 3:1 contrast requirements, that fill-opacity needs to be at least 0.42.

Keywords: access
Pushed by jhofmann@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/dc731a3f7598
Don't use lower fill-opacity for the shield icon. r=timhuang
Status: ASSIGNED → RESOLVED
Closed: 4 months ago3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 71

Comment on attachment 9090164 [details]
Bug 1567440 - Don't use lower fill-opacity for the shield icon. r=timhuang

Beta/Release Uplift Approval Request

  • User impact if declined: Primary UI Polish for Skyline Protections Panel (would look inconsistent between releases otherwise)
  • 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): Changing a CSS color
  • String changes made/needed: None
Attachment #9090164 - Flags: approval-mozilla-beta?

Looks fixed in latest Mozilla Firefox Nightly.
It took some time to convince you, but it was worth it. ;)
Thank you very much! \o/

Status: RESOLVED → VERIFIED

Comment on attachment 9090164 [details]
Bug 1567440 - Don't use lower fill-opacity for the shield icon. r=timhuang

Icon fix, let's uplift for beta 5.

Attachment #9090164 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Flags: qe-verify+
QA Whiteboard: [qa-triaged]
QA Whiteboard: [qa-triaged] → [qa-triaged] [access-p1]
You need to log in before you can comment on or make changes to this bug.