DevTools: Draw multiple textures for layers.

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 29 matching lines @@
     this._canvasElement = this.element.createChild("canvas");
     this._transformController = new WebInspector.TransformController(this._canvasElement);
     this._transformController.addEventListener(WebInspector.TransformController.Events.TransformChanged, this._update, this);
     this._canvasElement.addEventListener("dblclick", this._onDoubleClick.bind(this), false);
     this._canvasElement.addEventListener("mousedown", this._onMouseDown.bind(this), false);
     this._canvasElement.addEventListener("mouseup", this._onMouseUp.bind(this), false);
     this._canvasElement.addEventListener("mouseout", this._onMouseMove.bind(this), false);
     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;
     WebInspector.settings.showPaintRects.addChangeListener(this._update, this);
 }
 
 /** @typedef {{layer: !WebInspector.Layer, scrollRectIndex: number}|{layer: !WebInspector.Layer}} */
 WebInspector.Layers3DView.ActiveObject;
 
 /**
@@ skipping 42 matching lines @@
     void main(void)\
     {\
         gl_Position = uPMatrix * vec4(aVertexPosition, 1.0);\
         vColor = aVertexColor;\
         vTextureCoord = aTextureCoord;\
     }";
 
 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;
 
 WebInspector.Layers3DView.prototype = {
     /**
      * @param {function(!Array.<!WebInspector.KeyboardShortcut.Descriptor>, function(?Event=))} registerShortcutDelegate
      */
     registerShortcuts: function(registerShortcutDelegate)
     {
@@ skipping 41 matching lines @@
         this._setOutline(WebInspector.Layers3DView.OutlineType.Hovered, null);
         this._setOutline(WebInspector.Layers3DView.OutlineType.Selected, activeObject);
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      * @param {string=} imageURL
      */
     showImageForLayer: function(layer, imageURL)
     {
-        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;
+        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, tile.layerId, tile.rect), false);
+        texture.image.src = tile.imageURL;
+    },
+
+    /**
      * @param {!Element} canvas
      * @return {!Object}
      */
     _initGL: function(canvas)
     {
         var gl = canvas.getContext("webgl");
         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         gl.enable(gl.BLEND);
         gl.clearColor(0.0, 0.0, 0.0, 0.0);
         gl.enable(gl.DEPTH_TEST);
@@ skipping 75 matching lines @@
     _initProjectionMatrix: function()
     {
         this._pMatrix = new WebKitCSSMatrix().scale(1, -1, -1).translate(-1, -1, 0)
             .scale(2 / this._canvasElement.width, 2 / this._canvasElement.height, 1 / 1000000).multiply(this._calculateProjectionMatrix());
         this._gl.uniformMatrix4fv(this._shaderProgram.pMatrixUniform, false, this._arrayFromMatrix(this._pMatrix));
     },
 
     /**
      * @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);
         this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, this._gl.RGBA, this._gl.UNSIGNED_BYTE, texture.image);
         this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MIN_FILTER, this._gl.LINEAR);
         this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MAG_FILTER, this._gl.LINEAR);
         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();
     },
 
     _initWhiteTexture: function()
     {
         this._whiteTexture = this._gl.createTexture();
         this._gl.bindTexture(this._gl.TEXTURE_2D, this._whiteTexture);
         var whitePixel = new Uint8Array([255, 255, 255, 255]);
         this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, 1, 1, 0, this._gl.RGBA, this._gl.UNSIGNED_BYTE, whitePixel);
     },
@@ skipping 77 matching lines @@
      * @param {number=} scrollRectIndex
      */
     _isObjectActive: function(type, layer, scrollRectIndex)
     {
         var activeObject = this._lastActiveObject[type];
         return activeObject && activeObject.layer && activeObject.layer.id() === layer.id() && (typeof scrollRectIndex !== "number" || activeObject.scrollRectIndex === scrollRectIndex);
     },
 
     /**
      * @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.

     },
 
     /**
      * @param {!Array.<number>} quad
      * @param {number} z
      * @return {!Array.<number>}
      */
     _calculateVerticesForQuad: function(quad, z)
     {
         return [quad[0], quad[1], z, quad[2], quad[3], z, quad[4], quad[5], z, quad[6], quad[7], z];
@@ skipping 66 matching lines @@
         return this._depthByLayerId[layer.id()] * WebInspector.Layers3DView.LayerSpacing + index * WebInspector.Layers3DView.ScrollRectSpacing + 1;
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      */
     _drawLayer: function(layer)
     {
         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()];
         for (var i = 0; i < scrollRectQuads.length; ++i) {
             vertices = this._calculateVerticesForQuad(scrollRectQuads[i], this._calculateScrollRectDepth(layer, i));
             var isSelected = this._isObjectActive(WebInspector.Layers3DView.OutlineType.Selected, layer, i);
             var color = isSelected ? WebInspector.Layers3DView.SelectedScrollRectBackgroundColor : WebInspector.Layers3DView.ScrollRectBackgroundColor;
             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()
     {
         var viewport = this._layerTree.viewportSize();
         var vertices = [0, 0, 0, viewport.width, 0, 0, viewport.width, viewport.height, 0, 0, viewport.height, 0];
         var color = [0, 0, 0, 1];
         this._gl.lineWidth(3.0);
         this._drawRectangle(vertices, color, this._gl.LINE_LOOP);
         this._gl.lineWidth(1.0);
@@ skipping 187 matching lines @@
     _onDoubleClick: function(event)
     {
         var object = this._activeObjectFromEventPoint(event);
         if (object && object.layer)
             this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerSnapshotRequested, object.layer);
         event.stopPropagation();
     },
 
     __proto__: WebInspector.VBox.prototype
 }