1637842 - Respect prefers-reduced-motion for animation preview in timing function editor

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P3)

Description

[MarjaE]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:76.0) Gecko/20100101 Firefox/76.0

Steps to reproduce:

I tried to inspect some elements which were animating while loading.

Actual results:

The inspector includes a "timing-function editor"

The "timing-function editor" adds its own animation.

Expected results:

Please, don't add more animation.

Comment 1

[Clara Guerrero]

Hi MarjaE,

Can you provide a specific link where you're inspecting such elements?

I will move this over to a component so developers can take a look over it. If is not the correct component please feel free to change it to an appropriate one.

Thanks for the report.

Best regards, Clara.

Comment 2

[MarjaE]

Sorry, I don't remember.

Comment 3

[Razvan Caliman [:rcaliman]]

Attachment: timing function editor

Are you referring to the blue dot moving horizontally in the lower-right of the timing function editor? (see attached static screenshot)

That is a preview of the timing function effect.

We can't disable that without taking away from the usefulness of the tool (showing a preview). But perhaps we can make it respect a "prefers-reduced-motion" media query, if you use such a setting, to not run the animation when the preference is set.

Comment 4

[MarjaE]

Yes, that is it.

Comment 5

[Razvan Caliman [:rcaliman]]

This seems like a good first bug for someone getting started with DevTools. I will mark myself as mentor.

To learn how to get the code and set up your development environment, start here:
https://docs.firefox-dev.tools/

---

To solve this bug, you need to check if the "prefers-reduced-motion" media query is set (see how), then prevent the preview of the CubicBezierWidget.

You can see an example for checking the media query here: https://searchfox.org/mozilla-central/rev/6dc530332ceb86c9d196c1afe8ba5c90c26be898/devtools/client/inspector/rules/rules.js#1689

Comment 6

[Surya Balakrishnan [:surya_b]]

Hi, can I be assigned this bug?

Comment 7

[Razvan Caliman [:rcaliman]]

Of course!

Comment 8

[Surya Balakrishnan [:surya_b]]

Attachment: Bug 1637842 - Respect prefers-reduced-motion for animation preview in timing function editor. r=rcaliman

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cd86de58670a
Respect prefers-reduced-motion for animation preview in timing function editor. r=rcaliman

Comment 10

[Cristian Brindusan [:cbrindusan]]

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