Add showing viewport for Layers3DView.

Review URL: https://codereview.chromium.org/331143005

Review URL: https://codereview.chromium.org/331143005

git-svn-id: svn://svn.chromium.org/blink/trunk@176229 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/layers/layers-3d-view-hit-testing.html

@@ -83,7 +83,7 @@ function test()
         dumpOutlinedStateForLayers();
 
         InspectorTest.addResult("\nHovering layer a");
-        dispatchMouseEventOnCanvas("mousemove", 0.4, 0.1);
+        dispatchMouseEventOnCanvas("mousemove", 0.4, 0.2);
         dumpOutlinedStateForLayers();
 
         InspectorTest.addResult("\nSelecting content root");

third_party/WebKit/Source/devtools/front_end/sdk/LayerTreeModel.js

@@ -251,6 +251,22 @@ WebInspector.LayerTreeBase.prototype = {
         }
     },
 
+    /**
+     * @param {!Object} viewportSize
+     */
+    setViewportSize: function(viewportSize)
+    {
+        this._viewportSize = viewportSize;
+    },
+
+    /**
+     * @return {!Object | undefined}
+     */
+    viewportSize: function()
+    {
+        return this._viewportSize;
+    },
+
     __proto__: WebInspector.TargetAwareObject.prototype
 };
 
@@ -1118,11 +1134,13 @@ WebInspector.DeferredAgentLayerTree.prototype = {
  * @extends {WebInspector.DeferredLayerTree}
  * @param {!WebInspector.Target} target
  * @param {!WebInspector.TracingLayerPayload} root
+ * @param {!Object} viewportSize
  */
-WebInspector.DeferredTracingLayerTree = function(target, root)
+WebInspector.DeferredTracingLayerTree = function(target, root, viewportSize)
 {
     WebInspector.DeferredLayerTree.call(this, target);
     this._root = root;
+    this._viewportSize = viewportSize;
 }
 
 WebInspector.DeferredTracingLayerTree.prototype = {
@@ -1132,6 +1150,7 @@ WebInspector.DeferredTracingLayerTree.prototype = {
     resolve: function(callback)
     {
         var result = new WebInspector.TracingLayerTree(this._target);
+        result.setViewportSize(this._viewportSize);
         result.setLayers(this._root, callback.bind(null, result));
     },
 

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

@@ -249,13 +249,14 @@ WebInspector.Layers3DView.prototype = {
      */
     _calculateProjectionMatrix: function()
     {
-        var rootLayerPadding = 20;
-        var rootWidth = this._layerTree.contentRoot().width();
-        var rootHeight = this._layerTree.contentRoot().height();
+        var scaleFactorForMargins = 1.2;
+        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 / scaleFactorForMargins;
+        var scaleY = canvasHeight / baseHeight / scaleFactorForMargins;
         var viewScale = Math.min(scaleX, scaleY);
         var scale = this._transformController.scale();
         var offsetX = this._transformController.offsetX() * window.devicePixelRatio;
@@ -263,7 +264,7 @@ WebInspector.Layers3DView.prototype = {
         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()
@@ -498,6 +499,16 @@ WebInspector.Layers3DView.prototype = {
         }
     },
 
+    _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 = {};
@@ -549,6 +560,8 @@ WebInspector.Layers3DView.prototype = {
         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));
     },
 

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

@@ -410,7 +410,7 @@ WebInspector.TracingTimelineFrameModel.prototype = {
         var eventNames = WebInspector.TracingTimelineModel.RecordType;
 
         if (event.phase === WebInspector.TracingModel.Phase.SnapshotObject && event.name === eventNames.LayerTreeHostImplSnapshot && parseInt(event.id, 0) === this._layerTreeId) {
-            this.handleLayerTreeSnapshot(new WebInspector.DeferredTracingLayerTree(this.target(), event.args["snapshot"]["active_tree"]["root_layer"]));
+            this.handleLayerTreeSnapshot(new WebInspector.DeferredTracingLayerTree(this.target(), event.args["snapshot"]["active_tree"]["root_layer"], event.args["snapshot"]["device_viewport_size"]));
             return;
         }
         if (this._lastFrame && event.selfTime)

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

@@ -122,7 +122,7 @@ WebInspector.TimelineTracingView.prototype = {
          */
         function reveal()
         {
-            WebInspector.Revealer.reveal(new WebInspector.DeferredTracingLayerTree(this._tracingModel.target(), record.args["snapshot"]["active_tree"]["root_layer"]));
+            WebInspector.Revealer.reveal(new WebInspector.DeferredTracingLayerTree(this._tracingModel.target(), record.args["snapshot"]["active_tree"]["root_layer"], record.args["snapshot"]["device_viewport_size"]));
         }
         /**
          * @param {!Node=} node