DevTools: defer reveal in TreeOutline using rAF

- only do scrollIntoViewIfNeeded() in a rAF callback to avoid forcing layout;
- get rid of TreeElement.onreveal() as most implementation were a no-op just
    repeating what the call site has already done;
- added `center' parameter to TreeElement.reveal()
- do not center when scrolling with keyboard or searching;

BUG=

Review URL: https://codereview.chromium.org/1461283004

Cr-Commit-Position: refs/heads/master@{#361209}

third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js

@@ -663,7 +663,7 @@ WebInspector.ElementsPanel.prototype = {
             treeElement.reveal();
             var matches = treeElement.listItemElement.getElementsByClassName(WebInspector.highlightedSearchResultClassName);
             if (matches.length)
-                matches[0].scrollIntoViewIfNeeded();
+                matches[0].scrollIntoViewIfNeeded(false);
         }
     },
 
@@ -1269,4 +1269,4 @@ WebInspector.ElementsPanel.BaseToolbarPaneWidget.prototype = {
     },
 
     __proto__: WebInspector.ThrottledWidget.prototype
-}
\ No newline at end of file
+}

third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js

@@ -349,20 +349,6 @@ WebInspector.ElementsTreeElement.prototype = {
         this.treeOutline.updateSelection();
     },
 
-    /**
-     * @override
-     */
-    onreveal: function()
-    {
-        if (this.listItemElement) {
-            var tagSpans = this.listItemElement.getElementsByClassName("webkit-html-tag-name");
-            if (tagSpans.length)
-                tagSpans[0].scrollIntoViewIfNeeded(true);
-            else
-                this.listItemElement.scrollIntoViewIfNeeded(true);
-        }
-    },
-
     /**
      * @override
      * @param {boolean=} omitFocus

third_party/WebKit/Source/devtools/front_end/resources/ResourcesPanel.js

@@ -916,15 +916,6 @@ WebInspector.BaseStorageTreeElement.prototype = {
         return false;
     },
 
-    /**
-     * @override
-     */
-    onreveal: function()
-    {
-        if (this.listItemElement)
-            this.listItemElement.scrollIntoViewIfNeeded(false);
-    },
-
     get titleText()
     {
         return this._titleText;

third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js

@@ -690,12 +690,6 @@ WebInspector.BaseNavigatorTreeElement.prototype = {
             this.listItemElement.classList.add(this._iconClasses[i]);
     },
 
-    onreveal: function()
-    {
-        if (this.listItemElement)
-            this.listItemElement.scrollIntoViewIfNeeded(true);
-    },
-
     /**
      * @return {string}
      */

third_party/WebKit/Source/devtools/front_end/ui/SidebarTreeElement.js

@@ -62,12 +62,6 @@ WebInspector.SidebarSectionTreeElement.prototype = {
         this.listItemElement.classList.add("sidebar-tree-section");
     },
 
-    onreveal: function()
-    {
-        if (this.listItemElement)
-            this.listItemElement.scrollIntoViewIfNeeded(false);
-    },
-
     __proto__: TreeElement.prototype
 }
 
@@ -182,11 +176,5 @@ WebInspector.SidebarTreeElement.prototype = {
         this.listItemElement.appendChildren(this.iconElement, this.statusElement, this.titlesElement);
     },
 
-    onreveal: function()
-    {
-        if (this.listItemElement)
-            this.listItemElement.scrollIntoViewIfNeeded(false);
-    },
-
     __proto__: TreeElement.prototype
 }

third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js

@@ -286,6 +286,27 @@ TreeOutline.prototype = {
             event.consume(true);
     },
 
+    /**
+     * @param {!TreeElement} treeElement
+     * @param {boolean} center
+     */
+    _deferredScrollIntoView: function(treeElement, center)
+    {
+        if (!this._treeElementToScrollIntoView)
+            this.element.window().requestAnimationFrame(deferredScrollIntoView.bind(this));
+        this._treeElementToScrollIntoView = treeElement;
+        this._centerUponScrollIntoView = center;
+        /**
+         * @this {TreeOutline}
+         */
+        function deferredScrollIntoView()
+        {
+            this._treeElementToScrollIntoView.listItemElement.scrollIntoViewIfNeeded(this._centerUponScrollIntoView);
+            delete this._treeElementToScrollIntoView;
+            delete this._centerUponScrollIntoView;
+        }
+    },
+
     __proto__: WebInspector.Object.prototype
 }
 
@@ -852,7 +873,10 @@ TreeElement.prototype = {
         }
     },
 
-    reveal: function()
+    /**
+     * @param {boolean=} center
+     */
+    reveal: function(center)
     {
         var currentAncestor = this.parent;
         while (currentAncestor && !currentAncestor.root) {
@@ -861,9 +885,7 @@ TreeElement.prototype = {
             currentAncestor = currentAncestor.parent;
         }
 
-        this.listItemElement.scrollIntoViewIfNeeded();
-
-        this.onreveal();
+        this.treeOutline._deferredScrollIntoView(this, !!center);
     },
 
     /**
@@ -923,7 +945,7 @@ TreeElement.prototype = {
      */
     revealAndSelect: function(omitFocus)
     {
-        this.reveal();
+        this.reveal(true);
         this.select(omitFocus);
     },
 
@@ -1006,10 +1028,6 @@ TreeElement.prototype = {
         return false;
     },
 
-    onreveal: function()
-    {
-    },
-
     /**
      * @param {boolean=} selectedByUser
      * @return {boolean}