DevTools: draw realistic chrome on top of viewport in layers3dview

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 40 matching lines @@
     this._canvasElement.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this._canvasElement.addEventListener("contextmenu", this._onContextMenu.bind(this), false);
 
     this._lastActiveObject = {};
     this._picturesForLayer = {};
     this._scrollRectQuadsForLayer = {};
     this._isVisible = {};
     this._layerTree = null;
     this._textureManager = new WebInspector.LayerTextureManager();
     this._textureManager.addEventListener(WebInspector.LayerTextureManager.Events.TextureUpdated, this._update, this);
+    /** @type Array.<!WebGLTexture|undefined> */
+    this._chromeTextures = [];
 
     WebInspector.settings.showPaintRects.addChangeListener(this._update, this);
 }
 
 /** @typedef {{borderColor: !Array.<number>, borderWidth: number}} */
 WebInspector.Layers3DView.LayerStyle;
 
 /** @typedef {{layerId: string, rect: !Array.<number>, snapshot: !WebInspector.PaintProfilerSnapshot, traceEvent: !WebInspector.TracingModel.Event}} */
 WebInspector.Layers3DView.PaintTile;
 
 /**
  * @enum {string}
  */
 WebInspector.Layers3DView.OutlineType = {
     Hovered: "hovered",
     Selected: "selected"
 }
 
 /**
  * @enum {string}
  */
 WebInspector.Layers3DView.Events = {
     ObjectHovered: "ObjectHovered",
     ObjectSelected: "ObjectSelected",
     LayerSnapshotRequested: "LayerSnapshotRequested",
     JumpToPaintEventRequested: "JumpToPaintEventRequested"
 }
 
 /**
+ * @enum {number}
+ */
+WebInspector.Layers3DView.ChromeTexture = {
+    Left: 0,
+    Middle: 1,
+    Right: 2
+}
+
+/**
  * @enum {string}
  */
 WebInspector.Layers3DView.ScrollRectTitles = {
     RepaintsOnScroll: WebInspector.UIString("repaints on scroll"),
     TouchEventHandler: WebInspector.UIString("touch event listener"),
     WheelEventHandler: WebInspector.UIString("mousewheel event listener")
 }
 
 WebInspector.Layers3DView.FragmentShader = "\
     precision mediump float;\
@@ skipping 17 matching lines @@
         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.ViewportBorderColor = [160, 160, 160, 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.ViewportBorderWidth = 3;
 
 WebInspector.Layers3DView.LayerSpacing = 20;
 WebInspector.Layers3DView.ScrollRectSpacing = 4;
 
 WebInspector.Layers3DView.prototype = {
     /**
      * @param {?WebInspector.LayerTreeBase} layerTree
      */
     setLayerTree: function(layerTree)
     {
         this._layerTree = layerTree;
         this._textureManager.reset();
         this._update();
     },
 
     /**
      * @param {?Array.<!WebInspector.Layers3DView.PaintTile>} tiles
      */
     setTiles: function(tiles)
     {
         this._textureManager.setTiles(tiles);
     },
 
     /**
      * @param {!WebInspector.Layer} layer
      * @param {string=} imageURL
      */
     showImageForLayer: function(layer, imageURL)
     {
-        this._textureManager.createTexture(onTextureCreated.bind(this), imageURL);
+        if (imageURL)
+            this._textureManager.createTexture(onTextureCreated.bind(this), imageURL);
+        else
+            onTextureCreated.call(this, null);
 
         /**
          * @this {WebInspector.Layers3DView}
-         * @param {!WebGLTexture} texture
+         * @param {?WebGLTexture} texture
          */
         function onTextureCreated(texture)
         {
-            this._layerTexture = {layerId: layer.id(), texture: texture};
+            this._layerTexture = texture ? {layerId: layer.id(), texture: texture} : null;
             this._update();
         }
     },
 
     onResize: function()
     {
         this._update();
     },
 
     wasShown: function()
@@ skipping 113 matching lines @@
     {
         return new Float32Array([m.m11, m.m12, m.m13, m.m14, m.m21, m.m22, m.m23, m.m24, m.m31, m.m32, m.m33, m.m34, m.m41, m.m42, m.m43, m.m44]);
     },
 
     _initProjectionMatrix: function()
     {
         var projectionMatrix = this._calculateProjectionMatrix();
         this._pMatrix = new WebKitCSSMatrix().scale(1, -1, -1).translate(-1, -1, 0)
             .scale(2 / this._canvasElement.width, 2 / this._canvasElement.height, 1 / 1000000).multiply(projectionMatrix);
         this._gl.uniformMatrix4fv(this._shaderProgram.pMatrixUniform, false, this._arrayFromMatrix(this._pMatrix));
-        this._textureScale = Math.min(1, Math.max(projectionMatrix.m11, projectionMatrix.m22));
+        this._scale = Math.max(projectionMatrix.m11, projectionMatrix.m22);
     },
 
     _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);
     },
 
+    _initChromeTextures: function()
+    {
+        /**
+         * @this {WebInspector.Layers3DView}
+         * @param {!WebInspector.Layers3DView.ChromeTexture} index
+         * @param {?WebGLTexture} value
+         */
+        function saveChromeTexture(index, value)
+        {
+            this._chromeTextures[index] = value || undefined;
+        }
+        this._textureManager.createTexture(saveChromeTexture.bind(this, WebInspector.Layers3DView.ChromeTexture.Left), "Images/chromeLeft.png");
+        this._textureManager.createTexture(saveChromeTexture.bind(this, WebInspector.Layers3DView.ChromeTexture.Middle), "Images/chromeMiddle.png");
+        this._textureManager.createTexture(saveChromeTexture.bind(this, WebInspector.Layers3DView.ChromeTexture.Right), "Images/chromeRight.png");
+    },
+
     _initGLIfNecessary: function()
     {
         if (this._gl)
             return this._gl;
         this._gl = this._initGL(this._canvasElement);
         this._initShaders();
         this._initWhiteTexture();
+        this._initChromeTextures();
         this._textureManager.setContext(this._gl);
         return this._gl;
     },
 
     _calculateDepths: function()
     {
         this._depthByLayerId = {};
         this._isVisible = {};
         var depth = 0;
         var root = this._layerTree.root();
@@ skipping 121 matching lines @@
             if (!tile.texture)
                 continue;
             var activeObject = WebInspector.Layers3DView.ActiveObject.createTileActiveObject(layer, tile.traceEvent);
             var rect = new WebInspector.Layers3DView.Rectangle(activeObject);
             rect.calculateVerticesFromRect(layer, {x: tile.rect[0], y: tile.rect[1], width: tile.rect[2], height: tile.rect[3]}, this._depthForLayer(layer) + 1);
             rect.texture = tile.texture;
             this._rects.push(rect);
         }
     },
 
-    _calculateViewportRect: function()
-    {
-        var rect = new WebInspector.Layers3DView.Rectangle(null);
-        var viewport = this._layerTree.viewportSize();
-        var depth = (this._maxDepth + 1) * WebInspector.Layers3DView.LayerSpacing;
-        var vertices = [0, 0, depth, viewport.width, 0, depth, viewport.width, viewport.height, depth, 0, viewport.height, depth];
-        rect.vertices = vertices;
-        rect.borderColor = [0, 0, 0, 1];
-        rect.lineWidth = 3;
-        this._rects.push(rect);
-    },
-
     _calculateRects: function()
     {
         this._rects = [];
 
         this._layerTree.forEachLayer(this._calculateLayerRect.bind(this));
 
         if (this._showSlowScrollRectsSetting.get())
             this._layerTree.forEachLayer(this._calculateLayerScrollRects.bind(this));
 
         if (this._showPaintsSetting.get()) {
             if (this._layerTexture)
                 this._layerTree.forEachLayer(this._calculateLayerImageRect.bind(this));
             else
                 this._layerTree.forEachLayer(this._calculateLayerTileRects.bind(this));
         }
-
-        if (this._layerTree.viewportSize() && this._showViewportSetting.get())
-            this._calculateViewportRect();
     },
 
     /**
      * @param {!Array.<number>} color
      * @return {!Array.<number>}
      */
     _makeColorsArray: function(color)
     {
         var colors = [];
         var normalizedColor = [color[0] / 255, color[1] / 255, color[2] / 255, color[3]];
@@ skipping 12 matching lines @@
     {
         var gl = this._gl;
         var buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(array), gl.STATIC_DRAW);
         gl.vertexAttribPointer(attribute, length, gl.FLOAT, false, 0, 0);
     },
 
     /**
      * @param {!Array.<number>} vertices
-     * @param {boolean} isBorder
+     * @param {number} mode
      * @param {!Array.<number>=} color
      * @param {!Object=} texture
      */
-    _drawRectangle: function(vertices, isBorder, color, texture)
+    _drawRectangle: function(vertices, mode, color, texture)
     {
         var gl = this._gl;
-        var glMode = isBorder ? gl.LINE_LOOP : gl.TRIANGLE_FAN;
         var white = [255, 255, 255, 1];
         this._setVertexAttribute(this._shaderProgram.vertexPositionAttribute, vertices, 3);
         this._setVertexAttribute(this._shaderProgram.textureCoordAttribute, [0, 1, 1, 1, 1, 0, 0, 0], 2);
 
         if (texture) {
             this._setVertexAttribute(this._shaderProgram.vertexColorAttribute, this._makeColorsArray(white), white.length);
             gl.activeTexture(gl.TEXTURE0);
             gl.bindTexture(gl.TEXTURE_2D, texture);
             gl.uniform1i(this._shaderProgram.samplerUniform, 0);
         } else {
             this._setVertexAttribute(this._shaderProgram.vertexColorAttribute, this._makeColorsArray(color || white), color.length);
             gl.bindTexture(gl.TEXTURE_2D, this._whiteTexture);
         }
 
-        var numberOfVertices = 4;
-        gl.drawArrays(glMode, 0, numberOfVertices);
+        var numberOfVertices = vertices.length / 3;
+        gl.drawArrays(mode, 0, numberOfVertices);
     },
 
     /**
+     * @param {!Array.<number>} vertices
+     * @param {!WebGLTexture} texture
+     */
+    _drawTexture: function(vertices, texture)
+    {
+        this._drawRectangle(vertices, this._gl.TRIANGLE_FAN, undefined, texture);
+    },
+
+    _drawViewportAndChrome: function()
+    {
+        var viewport = this._layerTree.viewportSize();
+        if (!viewport)
+            return;
+
+        var drawChrome = this._showChromeSetting.get() && this._chromeTextures.length >= 3 && this._chromeTextures.indexOf(undefined) < 0;
+        var z = (this._maxDepth + 1) * WebInspector.Layers3DView.LayerSpacing;
+        var borderWidth = Math.round(WebInspector.Layers3DView.ViewportBorderWidth * this._scale);
+        var vertices = [viewport.width, 0, z, viewport.width, viewport.height, z, 0, viewport.height, z, 0, 0, z];
+        this._gl.lineWidth(borderWidth);
+        this._drawRectangle(vertices, drawChrome ? this._gl.LINE_STRIP : this._gl.LINE_LOOP, WebInspector.Layers3DView.ViewportBorderColor);
+
+        if (!drawChrome)
+            return;
+
+        var borderAdjustment = WebInspector.Layers3DView.ViewportBorderWidth / 2;
+        var viewportWidth = this._layerTree.viewportSize().width + 2 * borderAdjustment;
+        var chromeHeight = this._chromeTextures[0].image.naturalHeight;
+        var middleFragmentWidth = viewportWidth - this._chromeTextures[0].image.naturalWidth - this._chromeTextures[2].image.naturalWidth;
+        var x = -borderAdjustment;
+        var y = -chromeHeight;
+        for (var i = 0; i < this._chromeTextures.length; ++i) {
+            var width = i === WebInspector.Layers3DView.ChromeTexture.Middle ? middleFragmentWidth : this._chromeTextures[i].image.naturalWidth;
+            if (width < 0 || x + width > viewportWidth)
+                break;
+            vertices = [x, y, z, x + width, y, z, x + width, y + chromeHeight, z, x, y + chromeHeight, z];
+            this._drawTexture(vertices, /** @type {!WebGLTexture} */ (this._chromeTextures[i]));
+            x += width;
+        }
+    },
+
+    /**
      * @param {!WebInspector.Layers3DView.Rectangle} rect
      */
     _drawViewRect: function(rect)
     {
         var vertices = rect.vertices;
         if (rect.texture)
-            this._drawRectangle(vertices, false, undefined, rect.texture);
+            this._drawTexture(vertices, rect.texture);
         else if (rect.fillColor)
-            this._drawRectangle(vertices, false, rect.fillColor);
+            this._drawRectangle(vertices, this._gl.TRIANGLE_FAN, rect.fillColor);
         this._gl.lineWidth(rect.lineWidth);
         if (rect.borderColor)
-            this._drawRectangle(vertices, true, rect.borderColor);
+            this._drawRectangle(vertices, this._gl.LINE_LOOP, rect.borderColor);
     },
 
     _update: function()
     {
         if (!this.isShowing()) {
             this._needsUpdate = true;
             return;
         }
         var contentRoot = this._layerTree && this._layerTree.contentRoot();
         if (!contentRoot || !this._layerTree.root()) {
             this._emptyView.show(this.element);
             return;
         }
         this._emptyView.detach();
 
         var gl = this._initGLIfNecessary();
         this._resizeCanvas();
         this._initProjectionMatrix();
         this._calculateDepths();
 
-        this._textureManager.setScale(this._textureScale);
+        this._textureManager.setScale(Math.min(1, this._scale));
         gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
         this._calculateRects();
         this._rects.forEach(this._drawViewRect.bind(this));
+        this._drawViewportAndChrome();
     },
 
     /**
      * @param {!Event} event
      * @return {?WebInspector.Layers3DView.ActiveObject}
      */
     _activeObjectFromEventPoint: function(event)
     {
         if (!this._layerTree)
             return null;
@@ skipping 35 matching lines @@
         var setting = WebInspector.settings.createSetting(name, value)
         WebInspector.SettingsUI.bindCheckbox(checkbox.inputElement, setting);
         setting.addChangeListener(this._update, this);
         return setting;
     },
 
     _initStatusBar: function()
     {
         this._panelStatusBarElement = this.element.createChild("div", "panel-status-bar");
         this._panelStatusBarElement.appendChild(this._transformController.controlPanelElement());
-        this._showViewportSetting = this._createVisibilitySetting("Viewport", "showViewport", true, this._panelStatusBarElement);
+        this._showChromeSetting = this._createVisibilitySetting("Chrome", "showChrome", true, this._panelStatusBarElement);
         this._showSlowScrollRectsSetting = this._createVisibilitySetting("Slow scroll rects", "showSlowScrollRects", true, this._panelStatusBarElement);
         this._showPaintsSetting = this._createVisibilitySetting("Paints", "showPaints", true, this._panelStatusBarElement);
     },
 
     /**
      * @param {!Event} event
      */
     _onContextMenu: function(event)
     {
         var activeObject = this._activeObjectFromEventPoint(event);
@@ skipping 154 matching lines @@
         console.assert(this._scale && this._gl);
         tile.scale = this._scale;
         tile.snapshot.requestImage(null, null, tile.scale, onGotImage.bind(this));
 
         /**
          * @this {WebInspector.LayerTextureManager}
          * @param {string=} imageURL
          */
         function onGotImage(imageURL)
         {
-            this.createTexture(onTextureCreated.bind(this), imageURL);
+            if (imageURL)
+                this.createTexture(onTextureCreated.bind(this), imageURL);
         }
 
         /**
          * @this {WebInspector.LayerTextureManager}
-         * @param {!WebGLTexture} texture
+         * @param {?WebGLTexture} texture
          */
         function onTextureCreated(texture)
         {
             tile.texture = texture;
             this.dispatchEventToListeners(WebInspector.LayerTextureManager.Events.TextureUpdated);
         }
     },
 
     /**
-     * @param {!function(!WebGLTexture)} textureCreatedCallback
-     * @param {string=} imageURL
+     * @param {function(?WebGLTexture)} textureCreatedCallback
+     * @param {string} imageURL
      */
     createTexture: function(textureCreatedCallback, imageURL)
     {
         var image = new Image();
         image.addEventListener("load", onImageLoaded.bind(this), false);
+        image.addEventListener("error", onImageError, false);
         image.src = imageURL;
 
         /**
          * @this {WebInspector.LayerTextureManager}
          */
         function onImageLoaded()
         {
             textureCreatedCallback(this._createTextureForImage(image));
         }
+
+        function onImageError()
+        {
+            textureCreatedCallback(null);
+        }
     },
 
     /**
      * @param {!Image} image
      * @return {!WebGLTexture} texture
      */
     _createTextureForImage: function(image)
     {
         var texture = this._gl.createTexture();
         texture.image = image;
@@ skipping 197 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;
 }