DevTools: avoid layout thrashing on Layers panel

third_party/WebKit/Source/devtools/front_end/timeline/LayerViewHost.js

 /*
  * Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 /**
  * @interface
  */
 WebInspector.LayerView = function()
@@ skipping 31 matching lines @@
 
 /**
  * @enum {string}
  */
 WebInspector.LayerView.Selection.Type = {
     Layer: "Layer",
     ScrollRect: "ScrollRect",
     Tile: "Tile",
 }
 
+/**
+ * @param {?WebInspector.LayerView.Selection} a
+ * @param {?WebInspector.LayerView.Selection} b
+ * @return {boolean}
+ */
+WebInspector.LayerView.Selection.isEqual = function(a, b)
+{
+    return a && b ? a._isEqual(b) : a === b;
+}
+
 WebInspector.LayerView.Selection.prototype = {
     /**
      * @return {!WebInspector.LayerView.Selection.Type}
      */
     type: function()
     {
         return this._type;
     },
 
     /**
      * @return {!WebInspector.Layer}
      */
     layer: function()
     {
         return this._layer;
     },
 
     /**
      * @param {!WebInspector.LayerView.Selection} other
      * @return {boolean}
      */
-    isEqual: function(other)
+    _isEqual: function(other)
     {
         return false;
     }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.LayerView.Selection}
  * @param {!WebInspector.Layer} layer
  */
 WebInspector.LayerView.LayerSelection = function(layer)
 {
     console.assert(layer, "LayerSelection with empty layer");
     WebInspector.LayerView.Selection.call(this, WebInspector.LayerView.Selection.Type.Layer, layer);
 }
 
 WebInspector.LayerView.LayerSelection.prototype = {
     /**
      * @override
      * @param {!WebInspector.LayerView.Selection} other
      * @return {boolean}
      */
-    isEqual: function(other)
+    _isEqual: function(other)
     {
         return other._type === WebInspector.LayerView.Selection.Type.Layer && other.layer().id() === this.layer().id();
     },
 
     __proto__: WebInspector.LayerView.Selection.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.LayerView.Selection}
  * @param {!WebInspector.Layer} layer
  * @param {number} scrollRectIndex
  */
 WebInspector.LayerView.ScrollRectSelection = function(layer, scrollRectIndex)
 {
     WebInspector.LayerView.Selection.call(this, WebInspector.LayerView.Selection.Type.ScrollRect, layer);
     this.scrollRectIndex = scrollRectIndex;
 }
 
 WebInspector.LayerView.ScrollRectSelection.prototype = {
     /**
      * @override
      * @param {!WebInspector.LayerView.Selection} other
      * @return {boolean}
      */
-    isEqual: function(other)
+    _isEqual: function(other)
     {
         return other._type === WebInspector.LayerView.Selection.Type.ScrollRect &&
             this.layer().id() === other.layer().id() && this.scrollRectIndex === other.scrollRectIndex;
     },
 
     __proto__: WebInspector.LayerView.Selection.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.LayerView.Selection}
  * @param {!WebInspector.Layer} layer
  * @param {!WebInspector.TracingModel.Event} traceEvent
  */
 WebInspector.LayerView.TileSelection = function(layer, traceEvent)
 {
     WebInspector.LayerView.Selection.call(this, WebInspector.LayerView.Selection.Type.Tile, layer);
     this._traceEvent = traceEvent;
 }
 
 WebInspector.LayerView.TileSelection.prototype = {
     /**
      * @override
      * @param {!WebInspector.LayerView.Selection} other
      * @return {boolean}
      */
-    isEqual: function(other)
+    _isEqual: function(other)
     {
         return other._type === WebInspector.LayerView.Selection.Type.Tile
             && this.layer().id() === other.layer().id() && this.traceEvent === other.traceEvent;
     },
 
     /**
      * @return {!WebInspector.TracingModel.Event}
      */
     traceEvent: function()
     {
@@ skipping 38 matching lines @@
             this.hoverObject(null);
         for (var view of this._views)
             view.setLayerTree(layerTree);
     },
 
     /**
      * @param {?WebInspector.LayerView.Selection} selection
      */
     hoverObject: function(selection)
     {
-        if (this._hoveredObject === selection)
+        if (WebInspector.LayerView.Selection.isEqual(this._hoveredObject, selection))
             return;
         this._hoveredObject = selection;
         var layer = selection && selection.layer();
         this._toggleNodeHighlight(layer ? layer.nodeForSelfOrAncestor() : null);
         for (var view of this._views)
             view.hoverObject(selection);
     },
 
     /**
      * @param {?WebInspector.LayerView.Selection} selection
      */
     selectObject: function(selection)
     {
-        if (this._selectedObject === selection)
+        if (WebInspector.LayerView.Selection.isEqual(this._selectedObject, selection))
             return;
         this._selectedObject = selection;
         for (var view of this._views)
             view.selectObject(selection);
     },
 
     /**
      * @return {?WebInspector.LayerView.Selection}
      */
     selection: function()
@@ skipping 33 matching lines @@
     _toggleNodeHighlight: function(node)
     {
         if (node) {
             node.highlightForTwoSeconds();
             return;
         }
         WebInspector.DOMModel.hideDOMNodeHighlight();
     }
 }