DevTools: avoid layout thrashing on Layers panel

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

Index: third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
index c8f4645b1693cbbd22c23c00b5400f4d6d283ef2..90962d6e54e29cd20493450eb7d877e081d16a51 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js
@@ -195,7 +195,7 @@ TreeOutline.prototype = {
         while (nextSelectedElement && !nextSelectedElement.selectable)
             nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(!this.expandTreeElementsWhenArrowing);
         if (nextSelectedElement) {
-            nextSelectedElement.reveal();
+            nextSelectedElement.reveal(false);

[pfeldman, 2015/11/21 01:38:35]

ditto

             nextSelectedElement.select(false, true);
             return true;
         }
@@ -211,7 +211,7 @@ TreeOutline.prototype = {
         while (nextSelectedElement && !nextSelectedElement.selectable)
             nextSelectedElement = nextSelectedElement.traverseNextTreeElement(!this.expandTreeElementsWhenArrowing);
         if (nextSelectedElement) {
-            nextSelectedElement.reveal();
+            nextSelectedElement.reveal(false);

[pfeldman, 2015/11/21 01:38:35]

ditto

             nextSelectedElement.select(false, true);
             return true;
         }
@@ -254,7 +254,7 @@ TreeOutline.prototype = {
             }
         } else if (event.keyIdentifier === "Right") {
             if (!this.selectedTreeElement.revealed()) {
-                this.selectedTreeElement.reveal();
+                this.selectedTreeElement.reveal(false);

[pfeldman, 2015/11/21 01:38:35]

ditto

                 handled = true;
             } else if (this.selectedTreeElement._expandable) {
                 handled = true;
@@ -278,7 +278,7 @@ TreeOutline.prototype = {
             handled = this.selectedTreeElement.onspace();
 
         if (nextSelectedElement) {
-            nextSelectedElement.reveal();
+            nextSelectedElement.reveal(false);

[pfeldman, 2015/11/21 01:38:35]

ditto

             nextSelectedElement.select(false, true);
         }
 
@@ -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 || typeof center === "undefined");
     },
 
     /**
@@ -1006,10 +1028,6 @@ TreeElement.prototype = {
         return false;
     },
 
-    onreveal: function()
-    {
-    },
-
     /**
      * @param {boolean=} selectedByUser
      * @return {boolean}