Closed Bug 1223049 Opened 4 years ago Closed 4 years ago

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

Categories

(Firefox :: General, defect, P1)

defect

Tracking

()

VERIFIED FIXED
Firefox 48
Iteration:
48.3 - Apr 25
Tracking Status
firefox45 --- affected
firefox48 --- verified

People

(Reporter: Paolo, Assigned: johannh)

References

Details

(Whiteboard: [fxprivacy])

Attachments

(1 file)

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>.
Whiteboard: [fxprivacy]
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?
Flags: qe-verify?
Flags: qe-verify? → qe-verify+
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.
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.
Priority: P1 → P2
Priority: P2 → P3
Assignee: nobody → jhofmann
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?
Attachment #8743790 - Flags: feedback?(paolo.mozmail)
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.
Attachment #8743790 - Flags: feedback?(paolo.mozmail) → feedback+
(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!
Attachment #8743790 - Flags: review+
No try for this, as it only changes a few lines of CSS.
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/4ca15e44f0b5
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 48
Iteration: --- → 48.3 - Apr 25
Priority: P3 → P1
QA Contact: paul.silaghi
Verified fixed FX 48.0a2 (2016-04-27) Win 7, Ubuntu 14.04, OS X 10.10.5
Status: RESOLVED → VERIFIED
See Also: → 1279465
You need to log in before you can comment on or make changes to this bug.