Respect prefers-reduced-motion for animation preview in timing function editor
Categories
(DevTools :: Inspector, defect, P3)
Tracking
(firefox79 fixed)
Tracking | Status | |
---|---|---|
firefox79 | --- | fixed |
People
(Reporter: erwinm, Assigned: surya_b, Mentored)
References
(Blocks 1 open bug)
Details
(Keywords: good-first-bug)
Attachments
(2 files)
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•3 years ago
|
||
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 3•3 years ago
|
||
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.
Updated•3 years ago
|
Comment 5•3 years ago
|
||
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
Assignee | ||
Comment 6•3 years ago
|
||
Hi, can I be assigned this bug?
Comment 7•3 years ago
|
||
Of course!
Assignee | ||
Comment 8•3 years ago
|
||
Pushed by rcaliman@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/cd86de58670a Respect prefers-reduced-motion for animation preview in timing function editor. r=rcaliman
Comment 10•3 years ago
|
||
bugherder |
Description
•