1584633 - [Protections Panel] Add hover/active states for TP toggle switch

Status: VERIFIED FIXED

(Firefox :: Site Identity, task, P3)

Description

[Eric Pang [:epang] UX]

Add states for hover, pressed and focus for the switch in the TP panel.

States have been added to the spec here:
https://mozilla.invisionapp.com/d/main#/console/17296602/377223931/preview

Also, note that the blue for the ON state has is updated as well.

Please follow the behavious of the buttons at this link (except for the disabled states, please leave them as is.
https://design.firefox.com/photon/components/buttons.html#behaviours

Thanks!

Comment 1

[(inactive) Nihanth Subramanya [:nhnt11]]

Do we not want hover/active states for the disabled state?

Comment 2

[(inactive) Nihanth Subramanya [:nhnt11]]

Attachment: Bug 1584633 - Add hover/active states to the TP switch background. r=johannh

Comment 3

[Eric Pang [:epang] UX]

Yes, good catch. I've added in hover/pressed/focus states in for light and dark theme here:
https://mozilla.invisionapp.com/share/W6T7F6RMJ39#/377223931_Protection_Panel_Hover_States

Let me know if you have any questions. Thanks!

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d51db2d653da
Add hover/active states to the TP switch background. r=johannh

Comment 5

[Stefan Hindli [:stefan_hindli]]

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

Comment 6

[Stefan Hindli [:stefan_hindli]]

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

Comment 7

[(inactive) Nihanth Subramanya [:nhnt11]]

Comment on attachment 9097035 [details]
Bug 1584633 - Add hover/active states to the TP switch background. r=johannh

Beta/Release Uplift Approval Request

• User impact if declined: No visual feedback when hovering/clicking the TP toggle switch in the protections panel.
• 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): Visual polish. Manually verified.
• String changes made/needed:

Comment 8

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

Comment on attachment 9097035 [details]
Bug 1584633 - Add hover/active states to the TP switch background. r=johannh

CSS fix, polish for skyline feature. OK for uplift for beta 12.

Comment 9

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/releases/mozilla-beta/rev/17b4f7b2c969

Comment 10

[Ciprian Georgiu, Desktop QA]

I have verified that the hover/active states are according to the specs and they are correctly displayed. Tested on OS X 10.11.6, Windows 10 x64, Ubuntu 18.04 x64 with Beta 70.0b12 and Nightly 71.0a1.