1698204 - Animate proton design multistage about:welcome with remote feature configuration

Status: VERIFIED FIXED

(Firefox :: Messaging System, enhancement, P2)

Description

[Punam Dahiya [:pdahiya]]

With proton multistage design, we will be updating first screen to have 1/3 + 2/3 layout, scope of this bug is to investigate animations with noodles shown in 1/3 layout and as background of 2/3 layout

Comment 1

[Ed Lee :Mardak]

Ryan shared some designs a month ago to check with accessibility. Seems like mostly staggered fades with some motion/slides/turns, so reduced motion could probably keep the former. I'll try this out with react hooks.

Comment 2

[Ed Lee :Mardak]

Attachment: early wip with hooks

Looks like it might work? At least for transitioning in…

Comment 3

[Ed Lee :Mardak]

Attachment: example reducing animation to only do opacity

Comment 4

[Ed Lee :Mardak]

Attachment: Bug 1698204 - Animate proton about:welcome with fades and motion if not reduce-motion r?pdahiya

Use hooks to insert transition-{in,out} class when adding and removing screens. Specify desired in/out styles to transition from/to. Also flex/push buttons/steps to the bottom to be the same position on the latter screens.

Comment 5

[Ed Lee :Mardak]

Attachment: example with "primary" button and "chrome" import

Comment 6

[Ed Lee :Mardak]

Attachment: design approved about:welcome transitions

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/88ca58d4c08e
Animate proton about:welcome with fades and motion if not reduce-motion r=pdahiya

Comment 8

[Ed Lee :Mardak]

The patch here updates FeatureManifest.js from bug 1706369, so if that is not uplifted, a new beta patch here will be needed.

Comment 9

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/88ca58d4c08e

Comment 10

[Ed Lee :Mardak]

Could you verify this so we can request uplift?

1. open about:welcome
2. see transitions in and out for each screen

Setting OS "reduce motion" should result in only fades and no movement.

Comment 11

[Marius Coman [:mcoman], Ecosystem QA]

I have verified this enhancement and I can confirm that on Windows 10 x64, Windows 8.1 x64, macOS 10.15, and Linux Mint 20, animations are triggered each time an "about:welcome" screen is opened or closed. Also, I can confirm that if the "reduce motion" OS setting is active, results in fades only and no movement.

However, on Windows 7 this enhancement may have caused a regression (see bug 1709805). More exactly the buttons from the second screen of the "about:welcome" page are now displayed in the bottom part of the white modal (on Windows 7 there are no navigation bullets) and a big empty space results between them and the text description.

Verified using the latest Firefox Nightly (90.0a1 - Build ID: 20210505215208).

Comment 12

[Ed Lee :Mardak]

Comment on attachment 9220009 [details]
Bug 1698204 - Animate proton about:welcome with fades and motion if not reduce-motion r?pdahiya

Beta/Release Uplift Approval Request

• User impact if declined: Proton/MR1 about:welcome page has no transitions potentially attracting less attention and engagement
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Comment 10
• List of other uplifts needed: Regressed bug 1709805
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Primarily a bunch of little CSS changes as we specify the enter/exit positions/transitions for each element on each screen. These have been signed off by PM, UX, QA.
• String changes made/needed: none

Comment 13

[Pascal Chevrel:pascalc (PTO until April 26)]

Note that MR1 uplifts pas the beta extension period need PM approval, thanks.

Comment 14

[Ed Lee :Mardak]

Shilpa, can you additionally confirm this for uplift for comment 13? Romain asked for uplift in bug 1706478 comment 4 and this fix here also fixes that bug. And comment 12 noted this has been signed off by PM, UX, QA too.

Comment 15

[Shilpa Mohanty]

Sounds good, let's uplift this one.

Comment 16

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9220009 [details]
Bug 1698204 - Animate proton about:welcome with fades and motion if not reduce-motion r?pdahiya

Approved for 89 beta 11, thanks.

Comment 17

[Pascal Chevrel:pascalc (PTO until April 26)]

https://hg.mozilla.org/releases/mozilla-beta/rev/e416e9bc17c9

Comment 18

[Marius Coman [:mcoman], Ecosystem QA]

I have verified this enhancement and I can confirm that animations are triggered each time an "about:welcome" screen is opened or closed. Also, I can confirm that if the "reduce motion" OS setting is active, results in fades only and no movement.
Verified using the latest Firefox Beta (89.0b11 - Build ID: 20210511190154) installed on Windows 10 x64, macOS 10.15, and Linux Mint 20 x64.