1223049 - The connection state and tracking protection icons next to the "i" icon should be grayed out on hover

Status: VERIFIED FIXED

(Firefox :: General, defect, P1)

Description

[:Paolo Amadini]

The connection state and tracking protection icons next to the "i" icon should be grayed out on hover. See the live mockup at <https://mozilla.invisionapp.com/share/PC3Y0QSRK#/screens/96586951>.

Comment 1

[:Paolo Amadini]

To gray out the icons when a link like /path/to/icon.svg#hover is used, we could either include CSS that change the color using :target rules on a single 16x16 SVG, or expand the SVG to be 32x16 and use two SVG views (like we do for the "i" icon). Any preference?

Comment 2

[Tanvi Vyas[:tanvi]]

Is this bug to gray out the icons on hover, on click, or on both?  Right now, if you hover the lock icon, you just see who the site was verified by.  What is supposed to happen if you just hover over the i icon?

Comment 3

[Tanvi Vyas[:tanvi]]

The grayed out versions of these two pages will look the same, even though they are both different states:

https://people.mozilla.com/~tvyas/mixedcontent.html
https://people.mozilla.com/~tvyas/mixeddisplay.html

Comment 4

[Ash Grigas]

(In reply to Tanvi Vyas - out 11/6 [:tanvi] from comment #3)
> The grayed out versions of these two pages will look the same, even though
> they are both different states:
> 
> https://people.mozilla.com/~tvyas/mixedcontent.html
> https://people.mozilla.com/~tvyas/mixeddisplay.html

In the new control center url bar work, on hover and click the icons except for the "i" are grayed out to give focus to the "i" since that is the menu where additional feedback and information about initial icon states for security and more will live. 

I don't think it is that big of a deal to have the two mixed content states both look gray because the goal is to explain them in the control center drop-down, not rely on the hover state to do that.

We did not design a specific tooltip for the "i" icon so the user can still hover over the specific lock or yield as they can now, to see verified by etc.

Comment 5

[:Paolo Amadini]

Link to assets from UX: https://www.dropbox.com/sh/pjzjir04m22kw9z/AAA_9jKFgPtNdJ8kcZjxQJIDa?dl=0

Comment 6

[Marco Mucci [:MarcoM]]

Temporary reduction to 'P2' priority to allow for addition of Bug 1223489 to the Release 45 plan.  Will be brought back into IT 45.3 if production capacity exists.

Comment 7

[Panos Astithas (he/him) [:past] (please ni?)]

Updated assets link from Ash: https://www.dropbox.com/sh/sxoh4yjichg10um/AAAvELEvvnNZgsCWxNILnpoUa?dl=0

And here is a test page that shows how these should be implemented:
http://people.mozilla.org/~shorlander/icons-svg/SVG-Icon-Template-Test/svg-icon-template-test.html

Comment 8

[Johann Hofmann [:johannh]]

Attachment: gray out identity box icons on hover

Comment 9

[Johann Hofmann [:johannh]]

Comment on attachment 8743790 [details] [diff] [review]
gray out identity box icons on hover

This is a really dead simple approach and there's probably something wrong with it, but it works and would even scale to any number of additional icons in that bar.

Paolo, what do you think?

Comment 10

[:Paolo Amadini]

Comment on attachment 8743790 [details] [diff] [review]
gray out identity box icons on hover

If this works everywhere it's really fantastic.

One things to watch out for is that this assumes the grey we want has equal values for each channel, and on some platforms we might want something different.

If this applies only to the icons and the text color that's probably fine, because I think it is what we were going to do for the icons anyways. If this includes the background we might need some more testing on various platforms, including with lightweight themes applied.

Comment 11

[Johann Hofmann [:johannh]]

(In reply to :Paolo Amadini from comment #10)
> Comment on attachment 8743790 [details] [diff] [review]
> gray out identity box icons on hover
> 
> If this works everywhere it's really fantastic.
> 
> One things to watch out for is that this assumes the grey we want has equal
> values for each channel, and on some platforms we might want something
> different.
> 
> If this applies only to the icons and the text color that's probably fine,
> because I think it is what we were going to do for the icons anyways. If
> this includes the background we might need some more testing on various
> platforms, including with lightweight themes applied.

The filter doesn't apply to the background, it's already being greyed out somehow else. So that should be ok. What's the best way to go forward here? Should we just land the patch or ask someone from Design/UX first?

Comment 12

[:Paolo Amadini]

Comment on attachment 8743790 [details] [diff] [review]
gray out identity box icons on hover

Test everything you can think of, then land!

Comment 13

[Johann Hofmann [:johannh]]

No try for this, as it only changes a few lines of CSS.

Comment 14

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/4ca15e44f0b5

Comment 15

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/4ca15e44f0b5

Comment 16

[Paul Silaghi, QA [:pauly]]

Verified fixed FX 48.0a2 (2016-04-27) Win 7, Ubuntu 14.04, OS X 10.10.5