Bug 1548842 - always try to center selected row when toggling audit filter. r=mtigley
authorYura Zenevich <yura.zenevich@gmail.com>
Fri, 03 May 2019 17:46:58 +0000
changeset 472613 09d50908a15e4e0010acae2eb1ca3e8e121455b2
parent 472612 4dabc47dec1223930955d6e7eeb09d7fb5a61661
child 472614 4b3619d89abd49a9f47a2c36a95edf765e813764
push id35969
push userccoroiu@mozilla.com
push dateMon, 06 May 2019 04:24:23 +0000
treeherdermozilla-central@f0566d1a9ab1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1548842
milestone68.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 1548842 - always try to center selected row when toggling audit filter. r=mtigley Differential Revision: https://phabricator.services.mozilla.com/D29830
devtools/client/accessibility/components/AccessibilityTree.js
devtools/client/shared/scroll.js
--- a/devtools/client/accessibility/components/AccessibilityTree.js
+++ b/devtools/client/accessibility/components/AccessibilityTree.js
@@ -63,17 +63,17 @@ class AccessibilityTree extends Componen
   }
 
   componentDidUpdate(prevProps) {
     // When filtering is toggled, make sure that the selected row remains in
     // view.
     if (this.props.filtered !== prevProps.filtered) {
       const selected = document.querySelector(".treeTable .treeRow.selected");
       if (selected) {
-        scrollIntoView(selected);
+        scrollIntoView(selected, { center: true });
       }
     }
 
     window.emit(EVENTS.ACCESSIBILITY_INSPECTOR_UPDATED);
   }
 
   /**
    * Remove accessible walker front event listeners.
--- a/devtools/client/shared/scroll.js
+++ b/devtools/client/shared/scroll.js
@@ -85,35 +85,42 @@ define(function(require, exports, module
    *
    * @param {Object|undefined} options
    *        An options object which can contain:
    *          - container: possible scrollable container. If it is not scrollable, we will
    *                       look it up.
    *          - alignTo:   "top" or "bottom" to indicate if we should scroll the element
    *                       to the top or the bottom of the scrollable container when the
    *                       element is off canvas.
+   *          - center:    Indicate if we should scroll the element to the middle of the
+   *                       scrollable container when the element is off canvas.
    */
   function scrollIntoView(element, options = {}) {
     if (!element) {
       return;
     }
 
-    const { alignTo, container } = options;
+    const { alignTo, center, container } = options;
 
     const { top, bottom } = element.getBoundingClientRect();
     const scrolledParent = closestScrolledParent(container || element.parentNode);
     const scrolledParentRect = scrolledParent ? scrolledParent.getBoundingClientRect() :
                                                 null;
     const isVisible = !scrolledParent ||
       (top >= scrolledParentRect.top && bottom <= scrolledParentRect.bottom);
 
     if (isVisible) {
       return;
     }
 
+    if (center) {
+      element.scrollIntoView({ block: "center" });
+      return;
+    }
+
     const scrollToTop = alignTo ?
       alignTo === "top" : !scrolledParentRect || top < scrolledParentRect.top;
     element.scrollIntoView(scrollToTop);
   }
 
   // Exports from this module
   module.exports.scrollIntoViewIfNeeded = scrollIntoViewIfNeeded;
   module.exports.scrollIntoView = scrollIntoView;