The remaining piece of structural work for control center is to fix the integration of the mixed content blocker. Currently, mixed content blocking and tracking protection share the shield icon. Going forward, that is probably not the best long term solution. This bug covers the treatment of mixed content blocking in both the identity block and the control center doorhanger. Wireframe of doorhanger: https://bugzilla.mozilla.org/attachment.cgi?id=8574348 Wireframe of identity block: bug 1125226

Draft 2 of control center for mixed content

new version based on feedback from Tanvi

revision

Also see updated wiki for all states here: https://mana.mozilla.org/wiki/display/FIREFOX/Polaris+Tracking+Protection+UX

Closing this out and any changes needed will happen in visual design.

Comment on attachment 8585507 [details] v6.png Hi Aislinn, What will the UI look like for non-EV + mixed active content blocked? For EV + mixed active content blocked, we show a green lock with a grey yield sign. For non-EV we have to show a grey lock. But I don't think we can put a grey yield sign on it. And the yellow yield sign means something else.

Added state for non-ev and mixed active blocked

Going to summarize the latest design https://bug1140777.bugzilla.mozilla.org/attachment.cgi?id=8586254 Overall policy: When something is a bit off on a secure page, we indicate to the user that there is an issue by adding a yield sign to the lock. The yield sign can be different colors based on it's severity. When a user disables protection, they lose the lock entirely. Breakdown: When a page is fully secure with no attempt to load any type of mixed content we show a green lock for EV pages and a grey lock for non-EV pages. State 1: Mixed active content is blocked on an EV page - green lock + grey yield sign (replaces current grey shield + green lock) State 2: Mixed active content is blocked on an non-EV page - grey lock + white yield sign (replaces current grey shield + grey lock) State 3: Mixed passive content loaded (EV or non-EV) grey lock + yellow yield sign (replaces current grey yield sign) State 4: Mixed passive content loaded AND mixed active content blocked (EV or non-EV) grey lock + yellow yield sign (replaces current grey shield + grey yield sign) State 5: Mixed active content loaded (EV or non-EV): yellow yield sign (no change to current behavior)

There seems to be a subtle grey background shade for state 4. Is that an intentional signal, or just an artifact of editing images? Either way it's fine.

(In reply to Daniel Veditz [:dveditz] from comment #11) > There seems to be a subtle grey background shade for state 4. Is that an > intentional signal, or just an artifact of editing images? Either way it's > fine. Unintentional - mock error will be refined in visual design. Thanks!

(In reply to Tanvi Vyas [:tanvi] from comment #10) > When a page is fully secure with no attempt to load any type of mixed > content we show a green lock for EV pages and a grey lock for non-EV pages. I think we should continue to keep the green motif for both the lock and the site owner's name, to indicate that the two are bound together, as we do now. The site owner's name should be at least as visually prominent as the domain name, as it's harder to spoof/do a lookalike, and much easier for humans to reason about. > State 1: Mixed active content is blocked on an EV page - > green lock + grey yield sign (replaces current grey shield + green lock) > > State 2: Mixed active content is blocked on an non-EV page - > grey lock + white yield sign (replaces current grey shield + grey lock) I think the white sign (which, BTW, indicated "Yield" only in the US :-) is rather hard to see on the light grey background. Why is there a need for a grey sign and a white sign? What is the user supposed to understand from the difference? > State 3: Mixed passive content loaded (EV or non-EV) > grey lock + yellow yield sign (replaces current grey yield sign) > > State 4: Mixed passive content loaded AND mixed active content blocked (EV > or non-EV) > grey lock + yellow yield sign (replaces current grey shield + grey yield > sign) > > State 5: Mixed active content loaded (EV or non-EV): > yellow yield sign (no change to current behavior) The text here "you have disabled protection from insecure content" seems not very helpful. Also, the second shot says "Secure connection" but then the error seems to suggest that it's not secure. Is changing that in scope for this work? I'd prefer something like "You have requested that Firefox load insecure content on this site", and "Insecure connection". Gerv

(In reply to Gervase Markham [:gerv] from comment #13) > (In reply to Tanvi Vyas [:tanvi] from comment #10) > > When a page is fully secure with no attempt to load any type of mixed > > content we show a green lock for EV pages and a grey lock for non-EV pages. > > I think we should continue to keep the green motif for both the lock and the > site owner's name, to indicate that the two are bound together, as we do > now. The site owner's name should be at least as visually prominent as the > domain name, as it's harder to spoof/do a lookalike, and much easier for > humans to reason about. > > > State 1: Mixed active content is blocked on an EV page - > > green lock + grey yield sign (replaces current grey shield + green lock) > > > > State 2: Mixed active content is blocked on an non-EV page - > > grey lock + white yield sign (replaces current grey shield + grey lock) > > I think the white sign (which, BTW, indicated "Yield" only in the US :-) is > rather hard to see on the light grey background. > > Why is there a need for a grey sign and a white sign? What is the user > supposed to understand from the difference? > > > State 3: Mixed passive content loaded (EV or non-EV) > > grey lock + yellow yield sign (replaces current grey yield sign) > > > > State 4: Mixed passive content loaded AND mixed active content blocked (EV > > or non-EV) > > grey lock + yellow yield sign (replaces current grey shield + grey yield > > sign) > > > > State 5: Mixed active content loaded (EV or non-EV): > > yellow yield sign (no change to current behavior) > > The text here "you have disabled protection from insecure content" seems not > very helpful. Also, the second shot says "Secure connection" but then the > error seems to suggest that it's not secure. Is changing that in scope for > this work? I'd prefer something like "You have requested that Firefox load > insecure content on this site", and "Insecure connection". > > Gerv Hi Gerv, Thanks for your comments. We were back and forth on text color and I was going to let the visual design make recommendations as that is the next step for this ticket. This was for the interaction design. I will convey your suggestions. To clarify, the gray and white sign are options for the same state. We'll aim to get the most readable treatment in visual design. The secure connection text when mixed active is not blocked should be insecure, that is a mock error I've since corrected.

(In reply to agrigas from comment #7) > Closing this out and any changes needed will happen in visual design. Aislinn, do you have a bug number for the visual design? Do you know what kind of time frame we have for this?

(In reply to Gervase Markham [:gerv] from comment #13) > (In reply to Tanvi Vyas [:tanvi] from comment #10) > > State 2: Mixed active content is blocked on an non-EV page - > > grey lock + white yield sign (replaces current grey shield + grey lock) > > I think the white sign (which, BTW, indicated "Yield" only in the US :-) is > rather hard to see on the light grey background. The US Yield sign isn't that different from the rest of the world, and it has never been a triangle with the point facing up. https://en.wikipedia.org/wiki/Yield_sign Triangle with the point up is a common shape for warning signs around the world. (Warning road signs are more commonly diamond shaped in the US, but the triangle is used for warnings in other contexts.)

(In reply to Tanvi Vyas [:tanvi] from comment #15) > (In reply to agrigas from comment #7) > > Closing this out and any changes needed will happen in visual design. > > Aislinn, do you have a bug number for the visual design? Do you know what > kind of time frame we have for this? Tanvi - this is the visual design bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1140783 Stephen Horlander is working on it. For release timing, you would have to ask Javaun. I have no updates there.