RPP: respect reduced-motion preferences when animating timeline

If the user has this preference, we will never animate them when
updating their position on the timeline.

Fixed: 368317251
Change-Id: I4f02ccfc864edee944f101f8d47922cf8c834464
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6162516
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Andres Olivares <andoli@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Andres Olivares <andoli@chromium.org>

Author: jackfranklin

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -896,7 +896,11 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
 
     const visibleWindow = event.state.milli.timelineTraceWindow;
-    const shouldAnimate = Boolean(event.options.shouldAnimate);
+
+    // If the user has set a preference for reduced motion, we disable any animations.
+    const userHasReducedMotionSet = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const shouldAnimate = Boolean(event.options.shouldAnimate) && !userHasReducedMotionSet;
+
     this.mainFlameChart.setWindowTimes(visibleWindow.min, visibleWindow.max, shouldAnimate);
     this.networkDataProvider.setWindowTimes(visibleWindow.min, visibleWindow.max);
     this.networkFlameChart.setWindowTimes(visibleWindow.min, visibleWindow.max, shouldAnimate);