1567440 - "Tracking Protections" icon is too faded and bleached

Status: VERIFIED FIXED

(Firefox :: Site Identity, defect, P3)

Description

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

Attachment: 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.

Comment 1

[Johann Hofmann [:johannh]]

This icon is will change soon :)

Comment 3

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

Cleaning per duplicate.

Comment 4

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

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

Comment 5

[Darkspirit]

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. :)

Comment 6

[Johann Hofmann [:johannh]]

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

Comment 7

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

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?

Comment 8

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

Attachment: bug.png

Comment 9

[Darkspirit]

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!")?

Comment 10

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

Attachment: disabled Enhanced Tracking Protection.png

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.

Comment 11

[Johann Hofmann [:johannh]]

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?

Comment 12

[Eric Pang [:epang] UX]

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!

Comment 13

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

Attachment: blocked content, Enhanced Tracking Protection is enabled.png

Comment 14

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

Attachment: is - not blocked content, Enhanced Tracking Protection is enabled.png

Comment 15

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

Attachment: should be - not blocked content, Enhanced Tracking Protection is enabled.png

Comment 16

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

Attachment: is - Enhanced Tracking Protection is disabled.png

Comment 17

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

Attachment: should be - Enhanced Tracking Protection is disabled.png

Comment 18

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

\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).

Comment 19

[BugBot [:suhaib / :marco/ :calixte]]

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

For more information, please visit auto_nag documentation.

Comment 21

[Asa Dotzler [:asa]]

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.

Comment 22

[Johann Hofmann [:johannh]]

Attachment: Bug 1567440 - Don't use lower fill-opacity for the shield icon. r=timhuang

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dc731a3f7598
Don't use lower fill-opacity for the shield icon. r=timhuang

Comment 24

[Cristian Brindusan [:cbrindusan]]

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

Comment 25

[Johann Hofmann [:johannh]]

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

Comment 26

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

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

Comment 27

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

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.

Comment 28

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/releases/mozilla-beta/rev/e328903e82c3