Closed Bug 1637842 Opened 3 months ago Closed 2 months ago

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

Categories

(DevTools :: Inspector, defect, P3)

76 Branch
defect

Tracking

(firefox79 fixed)

RESOLVED FIXED
Firefox 79
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.

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.

Component: Untriaged → Inspector
Flags: needinfo?(erwinm)
Product: Firefox → DevTools

Sorry, I don't remember.

Flags: needinfo?(erwinm)
Attached image 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.

Flags: needinfo?(erwinm)

Yes, that is it.

Flags: needinfo?(erwinm)
Blocks: 1242686
Severity: -- → S3
Priority: -- → P3
Summary: timing-function editor is a migraine trigger → Respect prefers-reduced-motion for animation preview in timing function editor

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

Mentor: rcaliman
Keywords: good-first-bug

Hi, can I be assigned this bug?

Of course!

Assignee: nobody → surya.bdev
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
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
Status: ASSIGNED → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 79
You need to log in before you can comment on or make changes to this bug.