1811312 - New regular toggle design

Status: RESOLVED FIXED

(Toolkit :: Picture-in-Picture, task)

Description

[Ania]

Functional requirements
New regular PiP toggle is implemented as per the updated UX.

Comment 1

[kpatenio]

Attachment: WIP: Bug 1811312 - update regular PiP toggle

Comment 2

[kpatenio]

Attachment: Bug 1811312 - update PiP toggle styling, with Nimbus support for first-time toggle variant

Changes for this bug update both the regular and first-time toggles to the new UI styles specified in the Figma link: https://www.figma.com/file/Pk2jgzwiVvaq3Gf5ERKuAL/Picture-in-Picture?node-id=2420%3A24145&t=zMii4OptzUNVP3AO-0. It seemed easier to cover both toggles at once.

The summary of changes includes:

• New styling
  • Updated styling for toggle shape and opacity
  • Update styling for dark toggle; default theme is dark
  • Added new styling for light toggle
• New toggle behaviour concerning styling
  • By default, toggle theme will follow prefers-color-scheme. So if a light scheme is found, light toggle will be visible
  • Set up Nimbus for setting the PiP toggle theme; it will override color scheme preference
• New tests
  • One test for verifying Nimbus PiP toggle settings
  • One test for updating toggle according to prefers-color-scheme

Some items still need confirmation:

• What will happen to the “pip-explainer” for the expanded toggle
• Final decision on how the PiP background will update (color-scheme, Nimbus, a new Firefox pref, etc.)

Open to feedback for the meantime. See this document for a sample Nimbus recipe and example manual testing workflows: https://docs.google.com/document/d/1zgzzDsIqv6VSAm9VjGTyn1cPwIELczxDTBX_89LFsIg/edit#heading=h.1mgf0sy3isby

Comment 3

[kpatenio]

Attachment: Bug 1811312 - modify some test files for updated PiP toggle styling

Edited: the commit message I set for the second patch is the same as above.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a750d61443ee
update PiP toggle styling, with Nimbus support for first-time toggle variant r=pip-reviewers,cmkm,niklas,desktop-theme-reviewers,Itiel
https://hg.mozilla.org/integration/autoland/rev/ee4fb4c21092
modify some test files for updated PiP toggle styling r=cmkm,pip-reviewers,mhowell

Comment 5

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/a750d61443ee
https://hg.mozilla.org/mozilla-central/rev/ee4fb4c21092