DevTools: avoid layout thrashing on Layers panel

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

 /*
  * Copyright (C) 2014 Google 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 172 matching lines @@
          */
         function onTextureCreated(texture)
         {
             this._layerTexture = texture ? {layerId: layer.id(), texture: texture} : null;
             this._update();
         }
     },
 
     onResize: function()
     {
+        this._resizeCanvas();
         this._update();
     },
 
     wasShown: function()
     {
-        if (this._needsUpdate)
-            this._update();
+        if (!this._needsUpdate)
+            return;
+        this._resizeCanvas();
+        this._update();
     },
 
     /**
      * @param {!WebInspector.Layers3DView.OutlineType} type
      * @param {?WebInspector.LayerView.Selection} selection
      */
     _setOutline: function(type, selection)
     {
         this._lastSelection[type] = selection;
         this._update();
@@ skipping 62 matching lines @@
         this._gl.enableVertexAttribArray(this._shaderProgram.textureCoordAttribute);
 
         this._shaderProgram.pMatrixUniform = this._gl.getUniformLocation(this._shaderProgram, "uPMatrix");
         this._shaderProgram.samplerUniform = this._gl.getUniformLocation(this._shaderProgram, "uSampler");
     },
 
     _resizeCanvas: function()
     {
         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()
     {
         var paddingFraction = 0.1;
         var viewport = this._layerTree.viewportSize();
         var root = this._layerTree.root();
         var baseWidth = viewport ? viewport.width : this._dimensionsForAutoscale.width;
         var baseHeight = viewport ? viewport.height : this._dimensionsForAutoscale.height;
         var canvasWidth = this._canvasElement.width;
@@ skipping 93 matching lines @@
             var children = layer.children();
             for (var i = 0; i < children.length; ++i) {
                 this._depthByLayerId[children[i].id()] = ++depth;
                 queue.push(children[i]);
             }
         }
         this._maxDepth = depth;
     },
 
     /**
-     * @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}
      */
     _depthForLayer: function(layer)
     {
         return this._depthByLayerId[layer.id()] * WebInspector.Layers3DView.LayerSpacing;
     },
 
     /**
      * @param {!WebInspector.Layer} layer
@@ skipping 31 matching lines @@
         this._appendRect(rect);
         this._updateDimensionsForAutoscale(layer);
     },
 
     /**
      * @param {!WebInspector.Layers3DView.Rectangle} rect
      */
     _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) {
             rect.borderColor = WebInspector.Layers3DView.HoveredBorderColor;
             var fillColor = rect.fillColor || [255, 255, 255, 1];
             var maskColor = WebInspector.Layers3DView.HoveredImageMaskColor;
             rect.fillColor = [fillColor[0] * maskColor[0] / 255, fillColor[1] * maskColor[1] / 255, fillColor[2] * maskColor[2] / 255, fillColor[3] * maskColor[3]];
         } else {
             rect.borderColor = WebInspector.Layers3DView.BorderColor;
         }
@@ skipping 188 matching lines @@
             return;
         }
         var gl = this._initGLIfNecessary();
         if (!gl) {
             this._failBanner.element.removeChildren();
             this._failBanner.element.appendChild(this._webglDisabledBanner());
             this._failBanner.show(this.element);
             return;
         }
         this._failBanner.detach();
+        this._gl.viewportWidth = this._canvasElement.width;
+        this._gl.viewportHeight = this._canvasElement.height;
 
-        this._resizeCanvas();
         this._calculateDepthsAndVisibility();
         this._calculateRects();
         this._updateTransformAndConstraints();
 
         this._textureManager.setScale(Number.constrain(0.1, 1, this._scale));
         gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
         this._rects.forEach(this._drawViewRect.bind(this));
         this._drawViewportAndChrome();
@@ skipping 417 matching lines @@
  */
 WebInspector.LayerTextureManager.Tile = function(snapshot, rect, traceEvent)
 {
     this.snapshot = snapshot;
     this.rect = rect;
     this.traceEvent = traceEvent;
     this.scale = 0;
     /** @type {?WebGLTexture} */
     this.texture = null;
 }