1477920 - Provide a way to emulate prefers-reduced-motion media feature

Status: RESOLVED FIXED

(DevTools :: General, enhancement, P3)

Description

[Hiroyuki Ikezoe (:hiro)]

We should provide an API to emulate the feature on DevTools.

Comment 1

[Patrick Brosset <:pbro>]

Thanks Hiro. Blocking bug 1137699 is the right thing to do here, I believe we'll want a general media-query-emulation system in place for this.

Comment 2

[joshas]

Is this bug still blocked? How is this different from emulating preferred color scheme? With "Directive (EU) 2019/882 on the accessibility requirements for products and services" inching closer and closer, it would be very useful to have quick toggle for prefers-reduced-motion in DevTools.

Comment 4

[Sebastian Zartner [:sebo]]

Attachment: Bug 1477920 - [devtools] Added prefers-reduced-motion override to BrowsingContext. r=emilio,#devtools-reviewers,nchevobbe

A new PrefersReducedMotionOverride flag has been added to the browsing context, which allows overriding the prefers-reduced-motion media query for a given browsing context.

Comment 5

[Sebastian Zartner [:sebo]]

Attachment: Bug 1477920 - [devtools] Added prefers-reduced-motion simulation toggle to Inspector. r=#devtools-reviewers,#fluent-reviewers,nchevobbe

A new toggle to simulate the prefers-reduced-motion media feature has been added to the Inspector's Rules View toolbar.

Comment 6

[Sebastian Zartner [:sebo]]

Note that I just added a new toggle button for that for now. Though we should start looking into how we can group all the emulation features (see bug 1692434 and https://github.com/firefox-devtools/ux/issues/134) to avoid further UI clutter.

Sebastian

Comment 7

[Phabricator Automation]

Comment on attachment 9569039 [details]
Bug 1477920 - [devtools] Added prefers-reduced-motion override to BrowsingContext. r=emilio,#devtools-reviewers,nchevobbe

Revision D293705 was moved to bug 2032580. Setting attachment 9569039 [details] to obsolete.

Comment 8

[Sebastian Zartner [:sebo]]

Attachment: Bug 1477920 - [devtools] Added prefers-reduced-motion simulation toggle to Inspector. r=#devtools-reviewers,#fluent-reviewers,nchevobbe

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/a7ca6df65db5
https://hg.mozilla.org/integration/autoland/rev/52a58683fe5c
[devtools] Added prefers-reduced-motion simulation toggle to Inspector. r=nchevobbe,devtools-reviewers,fluent-reviewers,devtools-backward-compat-reviewers,bolsson

Comment 10

[rperta]

https://hg.mozilla.org/mozilla-central/rev/52a58683fe5c

Comment 11

[Ryan VanderMeulen [:RyanVM]]

Did you want to nominate this for the Fx155 relnotes? Possible wording:

Inspector now offers a toggle to simulate the prefers-reduced-motion setting.

Comment 12

[Sebastian Zartner [:sebo]]

Yes, thanks for the reminder, Ryan! Note that we concluded that it's better to name those features "emulations" instead of "simulations". Also, this should be mentioned together with the related bug 1692434, which was used to rework the UI. I'd say it's fine to merge both notes, though feel free to split them into two.

[Why is this notable]: New emulation feature in the DevTools
[Affects Firefox for Android]: no
[Suggested wording]: The emulation options now got moved into a new emulation panel, available behind the @ button in the Rules View. And it also offers new toggles to emulate the prefers-reduced-motion media feature.
[Links (documentation, blog post, etc)]:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion

(The DevTools docs still need to be updated. Though if I get them in time, they could be linked.)

Sebastian

Comment 13

[Ryan VanderMeulen [:RyanVM]]

I'm good with a single note covering both. Added to the Fx155 relnotes.