1480149 - Disable tab animation for reduced motion

Status: RESOLVED FIXED

(DevTools :: General, defect)

Description

[:Harald Kirschner :digitarald]

Reported via user feedback as a main issue for using feedback with reduced motion needs.

Comment 1

[:Harald Kirschner :digitarald]

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

Would it fit well with shipping the reduced motion support?

Comment 2

[Brian Birtles (:birtles, Feb 26~ parental leave)]

(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.)

Comment 3

[:Harald Kirschner :digitarald]

> 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.

Comment 4

[Mantaroh Yoshinaga[:mantaroh]]

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

WIP:https://treeherder.mozilla.org/#/jobs?repo=try&revision=c1a7157510b2f6901584137ba0c7a665572b00ef

Comment 5

[Mantaroh Yoshinaga[:mantaroh]]

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

Comment 6

[Mantaroh Yoshinaga[:mantaroh]]

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

[Brian Birtles (:birtles, Feb 26~ parental leave)]

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.

Comment 8

[Hiroyuki Ikezoe (:hiro)]

\o/
We should spread this kind of tweaks all over the places. :)

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/443c8f1e261e
Disable tab animations for users who prefer reduced animation. r=birtles

Comment 10

[Hiroyuki Ikezoe (:hiro)]

I wonder we don't want to add a test case for this?

Comment 11

[Hiroyuki Ikezoe (:hiro)]

I don't know we've been writing automation tests for styles in devtools though.

Comment 12

[Brian Birtles (:birtles, Feb 26~ parental leave)]

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

Comment 13

[Hiroyuki Ikezoe (:hiro)]

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

Comment 14

[Gabriel Luong [:gl] (ΦωΦ)]

(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

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/443c8f1e261e