Disable tab animation for reduced motion

RESOLVED FIXED in Firefox 63

Status

RESOLVED FIXED
4 months ago
4 months ago

People

(Reporter: Harald, Assigned: mantaroh)

Tracking

(Blocks: 1 bug)

unspecified
Firefox 63

Firefox Tracking Flags

(firefox63 fixed)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 months ago
Reported via user feedback as a main issue for using feedback with reduced motion needs.
(Reporter)

Comment 1

4 months ago
Brian, how easy would this be as polish item for 63?

Would it fit well with shipping the reduced motion support?
Flags: needinfo?(bbirtles)
(In reply to :Harald Kirschner :digitarald from comment #1)
> Brian, how easy would this be as polish item for 63?
> 
> Would it fit well with shipping the reduced motion support?

It should be very easy. Might it make more sense to do it once we have reduced motion support on Mac though? And perhaps in sync with changes to the rest of Firefox FE?

(Also, the DevTools animation is so subtle I suspect it's not particularly important.)
Flags: needinfo?(bbirtles)
(Reporter)

Comment 3

4 months ago
> Might it make more sense to do it once we have reduced motion support on Mac though?

Why not enhance it progressively? Most of our users are on Windows, and when OSX gets reduced motion support it the reduced motion should just work.

> And perhaps in sync with changes to the rest of Firefox FE?

Is there a bug for that? Firefox's tab animation is also different from DevTools, so not sure how much aligning helps.

> (Also, the DevTools animation is so subtle I suspect it's not particularly important.)

This particular feedback came in via survey, making it harder to use the tool for a user with reduced motion need. I also did not see the animation particularly jarring, but would prefer to follow the spec's recommendation to remove all non-essential animations.
(Assignee)

Comment 4

4 months ago
We can use the 'preferes-reduced-motion' media query for this.

WIP:https://treeherder.mozilla.org/#/jobs?repo=try&revision=c1a7157510b2f6901584137ba0c7a665572b00ef
Assignee: nobody → mantaroh
Status: NEW → ASSIGNED
(Assignee)

Comment 5

4 months ago
I confirmed the Linux and Windows environmen. macOS doesn't support this feature. So I checked this by using ui.prefersReducedMotion=1 on macOS.
(Assignee)

Comment 6

4 months ago
Created attachment 9003351 [details]
Bug 1480149 - Disable tab animations for users who prefer reduced animation. r?birtles

This patch will use the 'prefers-reduced-motion' in order to reduce the
transition of devtool tabs.
Comment on attachment 9003351 [details]
Bug 1480149 - Disable tab animations for users who prefer reduced animation. r?birtles

Brian Birtles (:birtles) has approved the revision.
Attachment #9003351 - Flags: review+
Attachment #9003351 - Attachment description: Bug 1480149 - Reduce the transition of devtool tabs. r?birtles → Bug 1480149 - Disable tab animations for users who prefer reduced animation. r?birtles
\o/
We should spread this kind of tweaks all over the places. :)

Comment 9

4 months ago
Pushed by mantaroh@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/443c8f1e261e
Disable tab animations for users who prefer reduced animation. r=birtles
I wonder we don't want to add a test case for this?
I don't know we've been writing automation tests for styles in devtools though.
(In reply to Hiroyuki Ikezoe (:hiro) from comment #10)
> I wonder we don't want to add a test case for this?

Yeah, I don't think it's worth the cost.

These animations are triggered on :hover so we'd either have to try to write a test that positions the mouse correctly and checks `getAnimations()` (likely to be flaky and cost a day in tracking down the test failure at some point) or we'd have to check the computed value of `transitionProperty` which wouldn't necessary provide the regression coverage we desire since it would fail to test it properly if we started using CSS animations or triggered the animation on a different element at some point.
(In reply to Brian Birtles (:birtles) from comment #12)
> if we started using CSS animations or
> triggered the animation on a different element at some point.

That's the point I was wondering.  We will miss modifying the media query entry once we add other animations there or modifying class name or some such.  It would be nice to have a way to prevent it somehow, I have never thought how to prevent it though, but yeah, it might be worth considering it.
(In reply to Hiroyuki Ikezoe (:hiro) from comment #13)
> (In reply to Brian Birtles (:birtles) from comment #12)
> > if we started using CSS animations or
> > triggered the animation on a different element at some point.
> 
> That's the point I was wondering.  We will miss modifying the media query
> entry once we add other animations there or modifying class name or some
> such.  It would be nice to have a way to prevent it somehow, I have never
> thought how to prevent it though, but yeah, it might be worth considering it.

I think the best course is to add a comment before that media query to explain the rationale.

Comment 15

4 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/443c8f1e261e
Status: ASSIGNED → RESOLVED
Last Resolved: 4 months ago
status-firefox63: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
You need to log in before you can comment on or make changes to this bug.