Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1501)

Unified Diff: Source/devtools/front_end/Layers3DView.js

Issue 22602002: DevTools: add 3D layer view to Layer panel (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: nuked LayerTreeModel.js from inspector.html Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « Source/devtools/front_end/LayerTreeModel.js ('k') | Source/devtools/front_end/LayersPanel.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: Source/devtools/front_end/Layers3DView.js
diff --git a/Source/devtools/front_end/Layers3DView.js b/Source/devtools/front_end/Layers3DView.js
new file mode 100644
index 0000000000000000000000000000000000000000..a2af860254b4fe496d0b264be3f13d13cf5cb41d
--- /dev/null
+++ b/Source/devtools/front_end/Layers3DView.js
@@ -0,0 +1,173 @@
+/*
+ * 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._elementsByLayerId = {};
+ this._rotateX = 0;
+ this._rotateY = 0;
+}
+
+WebInspector.Layers3DView.prototype = {
+ onResize: function()
+ {
+ this._scale();
+ },
+
+ wasShown: function()
+ {
+ if (this._needsUpdate)
+ this._update();
+ },
+
+ _scale: function()
+ {
+ const padding = 40;
+ var scale = 1;
+ var root = this._model.root();
+ if (!root)
+ return;
+ var scaleX = this.element.clientWidth / (root.width() + 2 * padding);
+ var scaleY = this.element.clientHeight / (root.height() + 2 * padding);
+ scale = Math.min(scaleX, scaleY);
+ var element = this._elementForLayer(root);
+ element.style.webkitTransform = "scale(" + scale + "," + scale +")";
+ element.style.webkitTransformOrigin = padding + "px " + padding + "px";
+ },
+
+ _update: function()
+ {
+ if (!this.isShowing()) {
+ this._needsUpdate = true;
+ return;
+ }
+ function updateLayer(layer)
+ {
+ var element = this._elementForLayer(layer);
+ this._updateLayerElement(element);
+ for (var childElement = element.firstElementChild; childElement;) {
+ var nextElement = childElement.nextSibling;
+ if (childElement.__layer && !this._model.layerById(childElement.__layer.id()))
+ childElement.remove();
+ childElement = nextElement;
+ }
+ }
+ this._model.forEachLayer(updateLayer.bind(this));
+ this._needsUpdate = false;
+ this._scale();
+ },
+
+ /**
+ * @param {WebInspector.Layer} layer
+ * @return {Element}
+ */
+ _elementForLayer: function(layer)
+ {
+ var element = this._elementsByLayerId[layer.id()];
+ if (element)
+ return element;
+ element = document.createElement("div");
+ element.className = "layer-container";
+ element.__layer = layer;
+ ["fill back-wall", "side-wall top", "side-wall right", "side-wall bottom", "side-wall left"].forEach(element.createChild.bind(element, "div"));
+ this._elementsByLayerId[layer.id()] = element;
+ return element;
+ },
+
+ /**
+ * @param {Element} element
+ */
+ _updateLayerElement: function(element)
+ {
+ var layer = element.__layer;
+ var style = element.style;
+ var parentElement = layer.parent() ? this._elementForLayer(layer.parent()) : this._rotatingContainerElement;
+ element.__depth = (parentElement.__depth || 0) + 1;
+ style.backgroundColor = this._colorForLayer(layer, element.__depth);
+ style.left = layer.offsetX() + "px";
+ style.top = layer.offsetY() + "px";
+ style.width = layer.width() + "px";
+ style.height = layer.height() + "px";
+ if (parentElement !== element.parentElement)
+ parentElement.appendChild(element);
+ },
+
+ /**
+ * @param {WebInspector.Layer} layer
+ * @param {number} depth
+ * @return {string}
+ */
+ _colorForLayer: function(layer, depth)
+ {
+ const base = 144;
+ var component = base + 20 * ((depth - 1) % 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
+}
« no previous file with comments | « Source/devtools/front_end/LayerTreeModel.js ('k') | Source/devtools/front_end/LayersPanel.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698