DevTools: add 3D layer view to Layer panel

Source/devtools/front_end/Layers3DView.js

+/*
+ * Copyright (C) 2013 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
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @extends {WebInspector.View}
+ * @param {WebInspector.LayerTreeModel} model
+ */
+WebInspector.Layers3DView = function(model)
+{
+    WebInspector.View.call(this);
+    this.element.classList.add("fill");
+    this.element.classList.add("layers-3d-view");
+    this._model = model;
+    this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._update, this);
+    this._rotatingContainerElement = this.element.createChild("div", "fill rotating-container");
+    this.element.addEventListener("mousemove", this._onMouseMove.bind(this), false);
+    this.element.addEventListener("mousedown", this._onMouseDown.bind(this), false);
+    this._rotateX = 0;
+    this._rotateY = 0;
+}
+
+WebInspector.Layers3DView.prototype = {
+    onResize: function()
+    {
+        this._scale();
+    },
+
+    wasShown: function()
+    {
+        if (this._needsUpdate)
+            this._update();
+    },
+
+    _scale: function()
+    {
+        if (!this._rootLayerElement)
+            return;
+        const padding = 40;
+        var scale = 1;
+        var root = this._model.root();
+        if (root) {
+            var scaleX = this.element.clientWidth / (root.width() + 2 * padding);
+            var scaleY = this.element.clientHeight / (root.height() + 2 * padding);
+            scale = Math.min(scaleX, scaleY);
+        }
+        this._rootLayerElement.style.webkitTransform = "scale(" + scale + "," + scale +")";
+        this._rootLayerElement.style.webkitTransformOrigin = padding + "px " + padding + "px";
+    },
+
+    _update: function()
+    {
+        if (!this.isShowing())
+            this._needsUpdate = true;
+
+        this._rotatingContainerElement.removeChildren();
+        var rootLayer = this._model.root();
+        if (!rootLayer) {
+            this._rootLayerElement = null;
+            // TODO: add a banner re compositing mode etc.
+            return;
+        }
+        this._rootLayerElement = this._buildSubtree(this._rotatingContainerElement, 0, rootLayer);
+        this._needsUpdate = false;
+        this._scale();
+    },
+
+    /**
+     * @param {Element} element
+     * @param {WebInspector.Layer} layer
+     * @param {number} depth
+     * @return {Element}
+     */
+    _buildSubtree: function(element, depth, layer)
+    {
+        var layerContainer = element.createChild("div", "layer-container");
+        var style = layerContainer.style;
+        style.backgroundColor = this._colorForLayer(layer, depth);
+        style.left  = layer.offsetX() + "px";
+        style.top  = layer.offsetY() + "px";
+        style.width  = layer.width() + "px";
+        style.height  = layer.height() + "px";
+        ["fill back-wall", "side-wall top", "side-wall right", "side-wall bottom", "side-wall left"].forEach(layerContainer.createChild.bind(layerContainer, "div"));
+        layer.children().forEach(this._buildSubtree.bind(this, layerContainer, depth + 1));
+        return layerContainer;
+    },
+
+    /**
+     * {WebInspector.Layer} layer
+     * {number} depth
+     */
+    _colorForLayer: function(layer, depth)
+    {
+        const base = 144;
+        var component = base + 20 * (depth % 5);
+        return "rgb(" + component + "," + component + "," + component + ")";
+    },
+
+    /**
+     * @param {Event} event
+     */
+    _onMouseDown: function(event)
+    {
+        if (event.which !== 1)
+            return;
+        this._originX = event.clientX;
+        this._originY = event.clientY;
+        this._oldRotateX = this._rotateX;
+        this._oldRotateY = this._rotateY;
+    },
+
+    /**
+     * @param {Event} event
+     */
+    _onMouseMove: function(event)
+    {
+        if (event.which !== 1)
+            return;
+        this._rotateX = this._oldRotateX + (this._originY - event.clientY) / 2;
+        this._rotateY = this._oldRotateY - (this._originX - event.clientX) / 4;
+        this._rotatingContainerElement.style.webkitTransform = "rotateX(" + this._rotateX + "deg) rotateY(" + this._rotateY + "deg)";
+    },
+
+    __proto__: WebInspector.View.prototype
+}