Bug 1530621 - Disable smooth scrolling if user prefers reduced motion. r=pbro
authorMicah Tigley <mtigley@mozilla.com>
Thu, 07 Mar 2019 14:49:08 +0000
changeset 462944 0d69ee629ce50368c1dfead01fdd9878022380d9
parent 462943 41a911c24dd3c491da432881baa9b38fe0dce4d5
child 462945 c450f92d5e6219e962e8c5219a0d7c5348b813cb
push id112349
push useraiakab@mozilla.com
push dateThu, 07 Mar 2019 22:20:12 +0000
treeherdermozilla-inbound@25b446bf18bc [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1530621
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1530621 - Disable smooth scrolling if user prefers reduced motion. r=pbro Differential Revision: https://phabricator.services.mozilla.com/D22384
devtools/client/inspector/rules/rules.js
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -1545,32 +1545,38 @@ CssRuleView.prototype = {
    * Scrolls to the top of either the rule or declaration. The view will try to scroll to
    * the rule if both can fit in the viewport. If not, then scroll to the declaration.
    *
    * @param  {Element} rule
    *         The rule to scroll to.
    * @param  {Element|null} declaration
    *         Optional. The declaration to scroll to.
    * @param  {String} scrollBehavior
-   *         Optional. The transition animation when scrolling.
+   *         Optional. The transition animation when scrolling. If prefers-reduced-motion
+   *         system pref is set, then the scroll behavior will be overridden to "auto".
    */
   _scrollToElement(rule, declaration, scrollBehavior = "smooth") {
     let elementToScrollTo = rule;
 
     if (declaration) {
       const { offsetTop, offsetHeight } = declaration;
       // Get the distance between both the rule and declaration. If the distance is
       // greater than the height of the rule view, then only scroll to the declaration.
       const distance = (offsetTop + offsetHeight) - rule.offsetTop;
 
       if (this.element.parentNode.offsetHeight <= distance) {
         elementToScrollTo = declaration;
       }
     }
 
+    // Ensure that smooth scrolling is disabled when the user prefers reduced motion.
+    const win = elementToScrollTo.ownerGlobal;
+    const reducedMotion = win.matchMedia("(prefers-reduced-motion)").matches;
+    scrollBehavior = reducedMotion ? "auto" : scrollBehavior;
+
     elementToScrollTo.scrollIntoView({ behavior: scrollBehavior });
   },
 
   /**
    * Toggles the visibility of the pseudo element rule's container.
    */
   _togglePseudoElementRuleContainer() {
     const container = this.styleDocument.getElementById("pseudo-elements-container");