DevTools: Add showing viewport for 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 231 matching lines @@
         this._canvasElement.height = this._canvasElement.offsetHeight * window.devicePixelRatio;
         this._gl.viewportWidth = this._canvasElement.width;
         this._gl.viewportHeight = this._canvasElement.height;
     },
 
     /**
      * @return {!CSSMatrix}
      */
     _calculateProjectionMatrix: function()
     {
-        var rootLayerPadding = 20;
-        var rootWidth = this._layerTree.contentRoot().width();
-        var rootHeight = this._layerTree.contentRoot().height();
+        var viewport = this._layerTree.viewportSize();
+        var baseWidth = viewport ? viewport.width : this._layerTree.contentRoot().width();
+        var baseHeight = viewport ? viewport.height : this._layerTree.contentRoot().height();
         var canvasWidth = this._canvasElement.width;
         var canvasHeight = this._canvasElement.height;
-        var scaleX = (canvasWidth - rootLayerPadding) / rootWidth;
-        var scaleY = (canvasHeight - rootLayerPadding) / rootHeight;
+        var scaleX = canvasWidth / baseWidth / 1.2;

[caseq, 2014/06/16 16:11:06]

var scaleFactorForMargins = 1.2;

[malch, 2014/06/16 16:16:14]

Done.

+        var scaleY = canvasHeight / baseHeight / 1.2;
         var viewScale = Math.min(scaleX, scaleY);
         var scale = this._transformController.scale();
         var offsetX = this._transformController.offsetX() * window.devicePixelRatio;
         var offsetY = this._transformController.offsetY() * window.devicePixelRatio;
         var rotateX = this._transformController.rotateX();
         var rotateY = this._transformController.rotateY();
         return new WebKitCSSMatrix().translate(offsetX, offsetY, 0).scale(scale, scale, scale).translate(canvasWidth / 2, canvasHeight / 2, 0)
-            .rotate(rotateX, rotateY, 0).scale(viewScale, viewScale, viewScale).translate(-rootWidth / 2, -rootHeight / 2, 0);
+            .rotate(rotateX, rotateY, 0).scale(viewScale, viewScale, viewScale).translate(-baseWidth / 2, -baseHeight / 2, 0);
     },
 
     _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));
     },
 
     /**
@@ skipping 214 matching lines @@
         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);
         }
     },
 
+    _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);
+    },
+
     _calculateDepths: function()
     {
         this._depthByLayerId = {};
         this._isVisible = {};
         var depth = 0;
         var root = this._layerTree.root();
         var queue = [root];
         this._depthByLayerId[root.id()] = 0;
         this._isVisible[root.id()] = false;
         while (queue.length > 0) {
@@ skipping 31 matching lines @@
         this._emptyView.detach();
 
         var gl = this._initGLIfNecessary();
         this._resizeCanvas();
         this._initProjectionMatrix();
         this._calculateDepths();
 
         gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
+        if (this._layerTree.viewportSize())
+            this._drawViewport();
         this._layerTree.forEachLayer(this._drawLayer.bind(this));
     },
 
     /**
      * Intersects quad with given transform matrix and line l(t) = (x0, y0, t)
      * @param {!Array.<number>} vertices
      * @param {!CSSMatrix} matrix
      * @param {!number} x0
      * @param {!number} y0
      * @return {(number|undefined)}
@@ skipping 122 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
 }