DevTools: avoid layout thrashing on Layers panel

- only adjust canvas size in Layers3DView upon resize and onShown;
- fix selection comparison in LayerViewHost to properly check member-wise equality;
- fix LayerTreeOutline's updateLayer() to properly check parent of root node;

BUG=

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

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

3 files changed, 26 insertions, 23 deletions

diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/LayerTreeOutline.js b/third_party/WebKit/Source/devtools/front_end/timeline/LayerTreeOutline.js
index 50b6536..25590bd 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/LayerTreeOutline.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/LayerTreeOutline.js
@@ -127,7 +127,7 @@ WebInspector.LayerTreeOutline.prototype = {
             // Skip till nearest visible ancestor.
             while (parentLayer && parentLayer !== root && !parentLayer.drawsContent() && !showInternalLayers)
                 parentLayer = parentLayer.parent();
-            var parent = layer === root ? this._treeOutline : parentLayer[WebInspector.LayerTreeElement._symbol];
+            var parent = layer === root ? this._treeOutline.rootElement() : parentLayer[WebInspector.LayerTreeElement._symbol];
             if (!parent) {
                 console.assert(false, "Parent is not in the tree");
                 return;
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/LayerViewHost.js b/third_party/WebKit/Source/devtools/front_end/timeline/LayerViewHost.js
index b6d8789..be790dc 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/LayerViewHost.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/LayerViewHost.js
@@ -49,6 +49,16 @@ WebInspector.LayerView.Selection.Type = {
     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}
@@ -70,7 +80,7 @@ WebInspector.LayerView.Selection.prototype = {
      * @param {!WebInspector.LayerView.Selection} other
      * @return {boolean}
      */
-    isEqual: function(other)
+    _isEqual: function(other)
     {
         return false;
     }
@@ -93,7 +103,7 @@ WebInspector.LayerView.LayerSelection.prototype = {
      * @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();
     },
@@ -119,7 +129,7 @@ WebInspector.LayerView.ScrollRectSelection.prototype = {
      * @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;
@@ -146,7 +156,7 @@ WebInspector.LayerView.TileSelection.prototype = {
      * @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;
@@ -205,7 +215,7 @@ WebInspector.LayerViewHost.prototype = {
      */
     hoverObject: function(selection)
     {
-        if (this._hoveredObject === selection)
+        if (WebInspector.LayerView.Selection.isEqual(this._hoveredObject, selection))
             return;
         this._hoveredObject = selection;
         var layer = selection && selection.layer();
@@ -219,7 +229,7 @@ WebInspector.LayerViewHost.prototype = {
      */
     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)
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/Layers3DView.js b/third_party/WebKit/Source/devtools/front_end/timeline/Layers3DView.js
index a8e2b7f..5197e16 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/Layers3DView.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/Layers3DView.js
@@ -190,13 +190,16 @@ WebInspector.Layers3DView.prototype = {
 
     onResize: function()
     {
+        this._resizeCanvas();
         this._update();
     },
 
     wasShown: function()
     {
-        if (this._needsUpdate)
-            this._update();
+        if (!this._needsUpdate)
+            return;
+        this._resizeCanvas();
+        this._update();
     },
 
     /**
@@ -279,8 +282,6 @@ WebInspector.Layers3DView.prototype = {
     {
         this._canvasElement.width = this._canvasElement.offsetWidth * window.devicePixelRatio;
         this._canvasElement.height = this._canvasElement.offsetHeight * window.devicePixelRatio;
-        this._gl.viewportWidth = this._canvasElement.width;
-        this._gl.viewportHeight = this._canvasElement.height;
     },
 
     _updateTransformAndConstraints: function()
@@ -394,15 +395,6 @@ WebInspector.Layers3DView.prototype = {
     },
 
     /**
-     * @param {!WebInspector.Layers3DView.OutlineType} type
-     * @param {!WebInspector.LayerView.Selection} selection
-     */
-    _isSelectionActive: function(type, selection)
-    {
-        return this._lastSelection[type] && this._lastSelection[type].isEqual(selection);
-    },
-
-    /**
      * @param {!WebInspector.Layer} layer
      * @return {number}
      */
@@ -454,8 +446,8 @@ WebInspector.Layers3DView.prototype = {
     _appendRect: function(rect)
     {
         var selection = rect.relatedObject;
-        var isSelected = this._isSelectionActive(WebInspector.Layers3DView.OutlineType.Selected, selection);
-        var isHovered = this._isSelectionActive(WebInspector.Layers3DView.OutlineType.Hovered, selection);
+        var isSelected = WebInspector.LayerView.Selection.isEqual(this._lastSelection[WebInspector.Layers3DView.OutlineType.Selected], selection);
+        var isHovered = WebInspector.LayerView.Selection.isEqual(this._lastSelection[WebInspector.Layers3DView.OutlineType.Hovered], selection);
         if (isSelected) {
             rect.borderColor = WebInspector.Layers3DView.SelectedBorderColor;
         } else if (isHovered) {
@@ -664,8 +656,9 @@ WebInspector.Layers3DView.prototype = {
             return;
         }
         this._failBanner.detach();
+        this._gl.viewportWidth = this._canvasElement.width;
+        this._gl.viewportHeight = this._canvasElement.height;
 
-        this._resizeCanvas();
         this._calculateDepthsAndVisibility();
         this._calculateRects();
         this._updateTransformAndConstraints();