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

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?

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?

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

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

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.

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

(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 on attachment 8743790 [details] [diff] [review] gray out identity box icons on hover Test everything you can think of, then land!

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

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