Closed Bug 1637842 Opened 4 years ago Closed 4 years ago

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


(DevTools :: Inspector, defect, P3)

76 Branch


(firefox79 fixed)

Firefox 79
Tracking Status
firefox79 --- fixed


(Reporter: erwinm, Assigned: surya_b, Mentored)


(Blocks 1 open bug)


(Keywords: good-first-bug)


(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:

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:

Mentor: rcaliman
Keywords: good-first-bug

Hi, can I be assigned this bug?

Of course!

Assignee: nobody → surya.bdev
Ever confirmed: true
Pushed by
Respect prefers-reduced-motion for animation preview in timing function editor. r=rcaliman
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 79
You need to log in before you can comment on or make changes to this bug.