DevTools: Draw multiple textures for layers.

Source/devtools/front_end/timeline/Layers3DView.js

Index: Source/devtools/front_end/timeline/Layers3DView.js
diff --git a/Source/devtools/front_end/timeline/Layers3DView.js b/Source/devtools/front_end/timeline/Layers3DView.js
index 050796f5f104b15b50becb14943971c166a3c9ba..821be7698322885f93f67e5694f92559a48beafd 100644
--- a/Source/devtools/front_end/timeline/Layers3DView.js
+++ b/Source/devtools/front_end/timeline/Layers3DView.js
@@ -47,7 +47,7 @@ WebInspector.Layers3DView = function()
     this._canvasElement.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this._canvasElement.addEventListener("contextmenu", this._onContextMenu.bind(this), false);
     this._lastActiveObject = {};
-    this._textureForLayer = {};
+    this._tilesForLayer = {};

[caseq, 2014/06/18 12:16:39]

Technically, these are pictures, not tiles.

[malch, 2014/06/18 12:48:18]

Done.

     this._scrollRectQuadsForLayer = {};
     this._isVisible = {};
     this._layerTree = null;
@@ -110,10 +110,13 @@ WebInspector.Layers3DView.VertexShader = "\
 WebInspector.Layers3DView.SelectedBackgroundColor = [20, 40, 110, 0.66];
 WebInspector.Layers3DView.BackgroundColor = [0, 0, 0, 0];
 WebInspector.Layers3DView.HoveredBorderColor = [0, 0, 255, 1];
+WebInspector.Layers3DView.SelectedBorderColor = [0, 255, 0, 1];
 WebInspector.Layers3DView.BorderColor = [0, 0, 0, 1];
 WebInspector.Layers3DView.ScrollRectBackgroundColor = [178, 0, 0, 0.4];
 WebInspector.Layers3DView.SelectedScrollRectBackgroundColor = [178, 0, 0, 0.6];
 WebInspector.Layers3DView.ScrollRectBorderColor = [178, 0, 0, 1];
+WebInspector.Layers3DView.BorderWidth = 1;
+WebInspector.Layers3DView.SelectedBorderWidth = 2;
 
 WebInspector.Layers3DView.LayerSpacing = 20;
 WebInspector.Layers3DView.ScrollRectSpacing = 4;
@@ -175,10 +178,27 @@ WebInspector.Layers3DView.prototype = {
      */
     showImageForLayer: function(layer, imageURL)
     {
+        this.setTiles([{layerId: layer.id(), rect: [0, 0, layer.width(), layer.height()], imageURL: imageURL}])
+    },
+
+    /**
+     * @param {!Array.<!Object>} tiles
+     */
+    setTiles: function(tiles)
+    {
+        this._tilesForLayer = {};
+        tiles.forEach(this._setTile, this);
+    },
+
+    /**
+     * @param {!Object} tile
+     */
+    _setTile: function(tile)
+    {
         var texture = this._gl.createTexture();
         texture.image = new Image();
-        texture.image.addEventListener("load", this._handleLoadedTexture.bind(this, texture, layer.id()), false);
-        texture.image.src = imageURL;
+        texture.image.addEventListener("load", this._handleLoadedTexture.bind(this, texture, tile.layerId, tile.rect), false);
+        texture.image.src = tile.imageURL;
     },
 
     /**
@@ -277,8 +297,9 @@ WebInspector.Layers3DView.prototype = {
     /**
      * @param {!Object} texture
      * @param {string} layerId
+     * @param {!Array.<number>} rect
      */
-    _handleLoadedTexture: function(texture, layerId)
+    _handleLoadedTexture: function(texture, layerId, rect)
     {
         this._gl.bindTexture(this._gl.TEXTURE_2D, texture);
         this._gl.pixelStorei(this._gl.UNPACK_FLIP_Y_WEBGL, true);
@@ -288,8 +309,9 @@ WebInspector.Layers3DView.prototype = {
         this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_S, this._gl.CLAMP_TO_EDGE);
         this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_T, this._gl.CLAMP_TO_EDGE);
         this._gl.bindTexture(this._gl.TEXTURE_2D, null);
-        this._textureForLayer = {};
-        this._textureForLayer[layerId] = texture;
+        if (!this._tilesForLayer[layerId])
+            this._tilesForLayer[layerId] = [];
+        this._tilesForLayer[layerId].push({texture: texture, rect: rect});
         this._update();
     },
 
@@ -389,13 +411,20 @@ WebInspector.Layers3DView.prototype = {
      * @param {!WebInspector.Layer} layer
      * @return {!{color: !Array.<number>, borderColor: !Array.<number>}}

[caseq, 2014/06/18 12:16:39]

Now that it grows bigger, let's extract into a class?

[malch, 2014/06/18 12:48:18]

Done.

      */
-    _colorsForLayer: function(layer)
+    _styleForLayer: function(layer)
     {
         var isSelected = this._isObjectActive(WebInspector.Layers3DView.OutlineType.Selected, layer);
         var isHovered = this._isObjectActive(WebInspector.Layers3DView.OutlineType.Hovered, layer);
         var color = isSelected ? WebInspector.Layers3DView.SelectedBackgroundColor : WebInspector.Layers3DView.BackgroundColor;
-        var borderColor = isHovered ? WebInspector.Layers3DView.HoveredBorderColor : WebInspector.Layers3DView.BorderColor;
-        return {color: color, borderColor: borderColor};
+        var borderColor;
+        if (isSelected)
+            borderColor = WebInspector.Layers3DView.SelectedBorderColor;
+        else if (isHovered)
+            borderColor = WebInspector.Layers3DView.HoveredBorderColor;
+        else
+            borderColor = WebInspector.Layers3DView.BorderColor;
+        var width = isSelected ? WebInspector.Layers3DView.SelectedBorderWidth : WebInspector.Layers3DView.BorderWidth;
+        return {color: color, borderColor: borderColor, width: width};

[caseq, 2014/06/18 12:16:39]

s/width/borderWidth/?

[malch, 2014/06/18 12:48:18]

Done.

     },
 
     /**
@@ -482,11 +511,12 @@ WebInspector.Layers3DView.prototype = {
     {
         var gl = this._gl;
         var vertices;
+        var style = this._styleForLayer(layer);
         if (this._isVisible[layer.id()]) {
             vertices = this._calculateVerticesForQuad(layer.quad(), this._depthByLayerId[layer.id()] * WebInspector.Layers3DView.LayerSpacing);
-            var colors = this._colorsForLayer(layer);
-            this._drawRectangle(vertices, colors.color, gl.TRIANGLE_FAN, this._textureForLayer[layer.id()]);
-            this._drawRectangle(vertices, colors.borderColor, gl.LINE_LOOP);
+            gl.lineWidth(style.width);
+            this._drawRectangle(vertices, style.borderColor, gl.LINE_LOOP);
+            gl.lineWidth(1);
         }
         this._scrollRectQuadsForLayer[layer.id()] = this._calculateScrollRectQuadsForLayer(layer);
         var scrollRectQuads = this._scrollRectQuadsForLayer[layer.id()];
@@ -497,6 +527,13 @@ WebInspector.Layers3DView.prototype = {
             this._drawRectangle(vertices, color, gl.TRIANGLE_FAN);
             this._drawRectangle(vertices, WebInspector.Layers3DView.ScrollRectBorderColor, gl.LINE_LOOP);
         }
+        var tiles = this._tilesForLayer[layer.id()] || [];
+        for (var i = 0; i < tiles.length; ++i) {
+            var tile = tiles[i];
+            var quad = this._calculateRectQuad(layer, {x: tile.rect[0], y: tile.rect[1], width: tile.rect[2] - tile.rect[0], height: tile.rect[3] - tile.rect[1]});
+            vertices = this._calculateVerticesForQuad(quad, this._depthByLayerId[layer.id()] * WebInspector.Layers3DView.LayerSpacing);

[caseq, 2014/06/18 12:16:39]

let's extract depth into a var and reuse it in other places within this method.

[malch, 2014/06/18 12:48:19]

Done.

+            this._drawRectangle(vertices, style.color, gl.TRIANGLE_FAN, tile.texture);
+        }
     },
 
     _drawViewport: function()