DevTools: avoid layout thrashing on Layers panel

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 177 matching lines @@
 
     /**
      * @return {boolean}
      */
     selectPrevious: function()
     {
         var nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
         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;
         }
         return false;
     },
 
     /**
      * @return {boolean}
      */
     selectNext: function()
     {
         var nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
         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;
         }
         return false;
     },
 
     /**
      * @param {!Event} event
      */
     _treeKeyDown: function(event)
@@ skipping 22 matching lines @@
                 if (this.selectedTreeElement.parent.selectable) {
                     nextSelectedElement = this.selectedTreeElement.parent;
                     while (nextSelectedElement && !nextSelectedElement.selectable)
                         nextSelectedElement = nextSelectedElement.parent;
                     handled = nextSelectedElement ? true : false;
                 } else if (this.selectedTreeElement.parent)
                     this.selectedTreeElement.parent.collapse();
             }
         } 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;
                 if (this.selectedTreeElement.expanded) {
                     nextSelectedElement = this.selectedTreeElement.firstChild();
                     while (nextSelectedElement && !nextSelectedElement.selectable)
                         nextSelectedElement = nextSelectedElement.nextSibling;
                     handled = nextSelectedElement ? true : false;
                 } else {
                     if (event.altKey)
                         this.selectedTreeElement.expandRecursively();
                     else
                         this.selectedTreeElement.expand();
                 }
             }
         } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */)
             handled = this.selectedTreeElement.ondelete();
         else if (isEnterKey(event))
             handled = this.selectedTreeElement.onenter();
         else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code)
             handled = this.selectedTreeElement.onspace();
 
         if (nextSelectedElement) {
-            nextSelectedElement.reveal();
+            nextSelectedElement.reveal(false);

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

ditto

             nextSelectedElement.select(false, true);
         }
 
         if (handled)
             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
 }
 
 /**
  * @constructor
  * @extends {TreeOutline}
  * @param {string=} className
  */
 function TreeOutlineInShadow(className)
 {
@@ skipping 546 matching lines @@
             maxDepth = 3;
 
         while (item) {
             if (depth < maxDepth)
                 item.expand();
             item = item.traverseNextTreeElement(false, this, (depth >= maxDepth), info);
             depth += info.depthChange;
         }
     },
 
-    reveal: function()
+    /**
+     * @param {boolean=} center
+     */
+    reveal: function(center)
     {
         var currentAncestor = this.parent;
         while (currentAncestor && !currentAncestor.root) {
             if (!currentAncestor.expanded)
                 currentAncestor.expand();
             currentAncestor = currentAncestor.parent;
         }
 
-        this.listItemElement.scrollIntoViewIfNeeded();
-
-        this.onreveal();
+        this.treeOutline._deferredScrollIntoView(this, center || typeof center === "undefined");
     },
 
     /**
      * @return {boolean}
      */
     revealed: function()
     {
         var currentAncestor = this.parent;
         while (currentAncestor && !currentAncestor.root) {
             if (!currentAncestor.expanded)
@@ skipping 122 matching lines @@
 
     /**
      * @param {!Event} e
      * @return {boolean}
      */
     ondblclick: function(e)
     {
         return false;
     },
 
-    onreveal: function()
-    {
-    },
-
     /**
      * @param {boolean=} selectedByUser
      * @return {boolean}
      */
     onselect: function(selectedByUser)
     {
         return false;
     },
 
     /**
@@ skipping 70 matching lines @@
     isEventWithinDisclosureTriangle: function(event)
     {
         // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
         var paddingLeftValue = window.getComputedStyle(this._listItemNode).paddingLeft;
         console.assert(paddingLeftValue.endsWith("px"));
         var computedLeftPadding = parseFloat(paddingLeftValue);
         var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
         return event.pageX >= left && event.pageX <= left + TreeElement._ArrowToggleWidth && this._expandable;
     }
 }