Layers view: Extract zoom/pan/rotate logic into transorm controller

Also, apply zoom to layer div sizes to keep resulting layers small.

BUG=

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

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

third_party/WebKit/LayoutTests/inspector/layers/layers-panel-mouse-events.html

@@ -62,17 +62,16 @@ InspectorTest.dispatchMouseEventToLayerTree = function(eventType, button, layer)
 InspectorTest.dispatchMouseEventTo3DView = function(eventType, button, layer)
 {
     // Caveat: this will blow if layers are transformed. We only take root layer scale into account.
-    var offsetX = 0;
-    var offsetY = 0;
-    for (var currentLayer = layer; currentLayer; currentLayer = currentLayer.parent()) {
-         offsetX += currentLayer.offsetX();
-         offsetY += currentLayer.offsetY();
-    }
     var layer3DView = WebInspector.panel("layers")._layers3DView;
+    const borderWidth = 1;
+    var offsetX = borderWidth;
+    var offsetY = borderWidth;
+    for (var currentLayer = layer; currentLayer && currentLayer.nodeId(); currentLayer = currentLayer.parent()) {
+         offsetX += Math.round(layer3DView._scale * currentLayer.offsetX()) + borderWidth;
+         offsetY += Math.round(layer3DView._scale * currentLayer.offsetY()) + borderWidth;
+    }
     var rootElement = layer3DView._elementForLayer(InspectorTest._layerTreeModel.contentRoot());
-    var screenOffsetX = Math.round(layer3DView._scale * offsetX) + 2;
-    var screenOffsetY = Math.round(layer3DView._scale * offsetY) + 2;
-    InspectorTest.dispatchMouseEvent(eventType, button, rootElement, screenOffsetX, screenOffsetY);
+    InspectorTest.dispatchMouseEvent(eventType, button, rootElement, offsetX, offsetY);
 }
 
 InspectorTest.dumpSelectedStyles = function(message, element)
@@ -159,8 +158,8 @@ function test()
 <div id="a" style="width: 200px; height: 200px" class="layer">
   <div class="layer" id="b1" style="width: 150px; height: 100px"></div>
   <div id="b2" class="layer" style="width: 140px; height: 110px">
-    <div id="c" class="layer" style="width: 100px; height: 90px"></div>
     <div id="b3" class="layer" style="width: 140px; height: 110px;"></div>
+    <div id="c" class="layer" style="width: 100px; height: 90px"></div>
   </div>
 </div>
 </body>

third_party/WebKit/Source/devtools/devtools.gypi

@@ -463,6 +463,7 @@
             'front_end/Layers3DView.js',
             'front_end/LayerDetailsView.js',
             'front_end/PaintProfilerView.js',
+            'front_end/TransformController.js',
         ],
         'devtools_extension_api_files': [
             'front_end/ExtensionAPI.js',

third_party/WebKit/Source/devtools/front_end/LayersPanel.js

@@ -33,6 +33,7 @@ importScript("LayerTree.js");
 importScript("Layers3DView.js");
 importScript("LayerDetailsView.js");
 importScript("PaintProfilerView.js");
+importScript("TransformController.js");
 
 /**
  * @constructor

third_party/WebKit/Source/devtools/front_end/TransformController.js

+/*
+ * Copyright 2014 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+/**
+ * @constructor
+ * @extends {WebInspector.Object}
+ * @param {!Element} element
+ */
+WebInspector.TransformController = function(element)
+{
+    this.element = element;
+    element.addEventListener("mousemove", this._onMouseMove.bind(this), false);
+    element.addEventListener("mousedown", this._onMouseDown.bind(this), false);
+    element.addEventListener("mouseup", this._onMouseUp.bind(this), false);
+    element.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
+    this.reset();
+}
+
+/**
+ * @enum {string}
+ */
+WebInspector.TransformController.Events = {
+    TransformChanged: "TransformChanged"
+}
+
+/**
+ * @enum {number}
+ */
+WebInspector.TransformController.TransformType = {
+    Offset: 1 << 0,
+    Scale: 1 << 1,
+    Rotation: 1 << 2
+}
+
+WebInspector.TransformController.prototype = {
+    /**
+     * @param {number} changeType
+     */
+    _postChangeEvent: function(changeType)
+    {
+        this.dispatchEventToListeners(WebInspector.TransformController.Events.TransformChanged, changeType);
+    },
+
+    /**
+     * @param {?Event} event
+     */
+    _onMouseMove: function(event)
+    {
+        if (event.which !== 1)
+            return;
+        // Set reference point if we missed mousedown.
+        if (typeof this._originX !== "number")
+            this._setReferencePoint(event);
+        this._rotateX = this._oldRotateX + (this._originY - event.clientY) / 2;
+        this._rotateY = this._oldRotateY - (this._originX - event.clientX) / 4;
+        this._postChangeEvent(WebInspector.TransformController.TransformType.Rotation);
+    },
+
+    reset: function()
+    {
+        this._scale = 1;
+        this._offsetX = 0;
+        this._offsetY = 0;
+        this._rotateX = 0;
+        this._rotateY = 0;
+    },
+
+    /**
+     * @return {number}
+     */
+    scale: function()
+    {
+        return this._scale;
+    },
+
+    /**
+     * @return {number}
+     */
+    offsetX: function()
+    {
+        return this._offsetX;
+    },
+
+    /**
+     * @return {number}
+     */
+    offsetY: function()
+    {
+        return this._offsetY;
+    },
+
+    /**
+     * @return {number}
+     */
+    rotateX: function()
+    {
+        return this._rotateX;
+    },
+
+    /**
+     * @return {number}
+     */
+    rotateY: function()
+    {
+        return this._rotateY;
+    },
+
+    /**
+     * @param {?Event} event
+     */
+    _onMouseWheel: function(event)
+    {
+        if (event.shiftKey) {
+            const zoomFactor = 1.1;
+            const mouseWheelZoomSpeed = 1 / 120;
+            var scaleFactor = Math.pow(zoomFactor, event.wheelDeltaY * mouseWheelZoomSpeed);
+            this._scale *= scaleFactor;
+            this._offsetX -= (event.clientX - this.element.totalOffsetLeft() - this._offsetX) * (scaleFactor - 1);
+            this._offsetY -= (event.clientY - this.element.totalOffsetTop() - this._offsetY) * (scaleFactor - 1);
+            this._postChangeEvent(WebInspector.TransformController.TransformType.Scale | WebInspector.TransformController.TransformType.Offset);
+        } else {
+            this._offsetX += event.wheelDeltaX;
+            this._offsetY += event.wheelDeltaY;
+            this._postChangeEvent(WebInspector.TransformController.TransformType.Offset);
+        }
+    },
+
+    /**
+     * @param {?Event} event
+     */
+    _setReferencePoint: function(event)
+    {
+        this._originX = event.clientX;
+        this._originY = event.clientY;
+        this._oldRotateX = this._rotateX;
+        this._oldRotateY = this._rotateY;
+    },
+
+    _resetReferencePoint: function()
+    {
+        delete this._originX;
+        delete this._originY;
+        delete this._oldRotateX;
+        delete this._oldRotateY;
+    },
+
+    /**
+     * @param {?Event} event
+     */
+    _onMouseDown: function(event)
+    {
+        if (event.which !== 1)
+            return;
+        this._setReferencePoint(event);
+    },
+
+    /**
+     * @param {?Event} event
+     */
+    _onMouseUp: function(event)
+    {
+        if (event.which !== 1)
+            return;
+        this._resetReferencePoint();
+    },
+
+    __proto__: WebInspector.Object.prototype
+}

third_party/WebKit/Source/devtools/scripts/frontend_modules.json

@@ -331,7 +331,8 @@
             "LayerTree.js",
             "Layers3DView.js",
             "LayerDetailsView.js",
-            "PaintProfilerView.js"
+            "PaintProfilerView.js",
+            "TransformController.js"
         ]
     },
     {