Closed Bug 1698204 Opened 3 months ago Closed 1 month ago

Animate proton design multistage about:welcome with remote feature configuration

Categories

(Firefox :: Messaging System, enhancement, P2)

enhancement

Tracking

()

VERIFIED FIXED
90 Branch
Iteration:
90.2 - May 3 - May 16
Tracking Status
firefox89 --- verified
firefox90 --- verified

People

(Reporter: pdahiya, Assigned: Mardak)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [proton-onboarding][priority:2a] [proton-uplift])

Attachments

(3 files, 2 obsolete files)

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

Severity: -- → S3
Iteration: --- → 89.1 - Mar 22 - Apr 4
Priority: -- → P2
Whiteboard: [uiwanted]
Whiteboard: [uiwanted] → [uiwanted] [proton-onboarding]
Iteration: 89.1 - Mar 22 - Apr 4 → ---
No longer blocks: multistage-aw
Whiteboard: [uiwanted] [proton-onboarding] → [uiwanted] [proton-onboarding]onboarding][priority:2c]

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.

Assignee: nobody → edilee
Iteration: --- → 90.2 - May 3 - May 16
Whiteboard: [uiwanted] [proton-onboarding]onboarding][priority:2c] → [proton-onboarding][priority:2c]
Attached video early wip with hooks (obsolete) —

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

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.

See Also: → 1706478
Attachment #9219936 - Attachment is obsolete: true
Attachment #9220016 - Attachment is obsolete: true
Pushed by elee@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/88ca58d4c08e
Animate proton about:welcome with fades and motion if not reduce-motion r=pdahiya

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

Depends on: 1706369
Summary: Investigate adding animations on proton design multistage template → Animate proton design multistage about:welcome with remote feature configuration
Whiteboard: [proton-onboarding][priority:2c] → [proton-onboarding][priority:2a]
Status: NEW → RESOLVED
Closed: 1 month ago
Resolution: --- → FIXED
Target Milestone: --- → 90 Branch

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.

Flags: needinfo?(mcoman)
Blocks: 1709731

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).

Status: RESOLVED → VERIFIED
Flags: needinfo?(mcoman)

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
Attachment #9220009 - Flags: approval-mozilla-beta?
Flags: qe-verify+
QA Whiteboard: [qa-triaged]

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

Whiteboard: [proton-onboarding][priority:2a] → [proton-onboarding][priority:2a] [proton-uplift]

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.

Flags: needinfo?(smohanty)

Sounds good, let's uplift this one.

Flags: needinfo?(smohanty)

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.

Attachment #9220009 - Flags: approval-mozilla-beta? → approval-mozilla-beta+

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.

Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.