node-inspector-sans-ws
Version:
Web Inspector based nodeJS debugger
357 lines (330 loc) • 13.1 kB
JavaScript
/*
* 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._emptyView = new WebInspector.EmptyView(WebInspector.UIString("Not in the composited mode.\nConsider forcing composited mode in Settings."));
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("mouseout", this._onMouseMove.bind(this), false);
this.element.addEventListener("mousedown", this._onMouseDown.bind(this), false);
this.element.addEventListener("mouseup", this._onMouseUp.bind(this), false);
this.element.addEventListener("contextmenu", this._onContextMenu.bind(this), false);
this.element.addEventListener("click", this._onClick.bind(this), false);
this._elementsByLayerId = {};
this._rotateX = 0;
this._rotateY = 0;
this._scaleAdjustmentStylesheet = this.element.ownerDocument.head.createChild("style");
this._scaleAdjustmentStylesheet.disabled = true;
this._lastOutlinedElement = {};
}
/**
* @enum {string}
*/
WebInspector.Layers3DView.OutlineType = {
Hovered: "hovered",
Selected: "selected"
}
/**
* @enum {string}
*/
WebInspector.Layers3DView.Events = {
LayerHovered: "LayerHovered",
LayerSelected: "LayerSelected"
}
WebInspector.Layers3DView.prototype = {
onResize: function()
{
this._update();
},
willHide: function()
{
this._scaleAdjustmentStylesheet.disabled = true;
},
wasShown: function()
{
this._scaleAdjustmentStylesheet.disabled = false;
if (this._needsUpdate)
this._update();
},
/**
* @param {WebInspector.Layers3DView.OutlineType} type
* @param {WebInspector.Layer?} layer
*/
_setOutline: function(type, layer)
{
var element = layer ? this._elementForLayer(layer) : null;
var previousElement = this._lastOutlinedElement[type];
if (previousElement === element)
return;
this._lastOutlinedElement[type] = element;
if (previousElement) {
previousElement.removeStyleClass(type);
this._updateElementColor(previousElement);
}
if (element) {
element.addStyleClass(type);
this._updateElementColor(element);
}
},
/**
* @param {WebInspector.Layer} layer
*/
hoverLayer: function(layer)
{
this._setOutline(WebInspector.Layers3DView.OutlineType.Hovered, layer);
},
/**
* @param {WebInspector.Layer} layer
*/
selectLayer: function(layer)
{
this._setOutline(WebInspector.Layers3DView.OutlineType.Hovered, null);
this._setOutline(WebInspector.Layers3DView.OutlineType.Selected, layer);
},
_scaleToFit: function()
{
var root = this._model.contentRoot();
if (!root)
return;
const padding = 40;
var scaleX = this._clientWidth / (root.width() + 2 * padding);
var scaleY = this._clientHeight / (root.height() + 2 * padding);
this._scale = Math.min(scaleX, scaleY);
const screenLayerSpacing = 20;
this._layerSpacing = Math.ceil(screenLayerSpacing / this._scale) + "px";
const screenLayerThickness = 4;
var layerThickness = Math.ceil(screenLayerThickness / this._scale) + "px";
var stylesheetContent = ".layer-container .side-wall { height: " + layerThickness + "; width: " + layerThickness + "; } " +
".layer-container .back-wall { -webkit-transform: translateZ(-" + layerThickness + "); } " +
".layer-container { -webkit-transform: translateZ(" + this._layerSpacing + "); }";
// Workaround for double style recalculation upon assignment to style sheet's text content.
var stylesheetTextNode = this._scaleAdjustmentStylesheet.firstChild;
if (!stylesheetTextNode || stylesheetTextNode.nodeType !== Node.TEXT_NODE || stylesheetTextNode.nextSibling)
this._scaleAdjustmentStylesheet.textContent = stylesheetContent;
else
stylesheetTextNode.nodeValue = stylesheetContent;
var element = this._elementForLayer(root);
element.style.webkitTransform = "scale3d(" + this._scale + "," + this._scale + "," + this._scale + ")";
element.style.left = ((this._clientWidth - root.width() * this._scale) >> 1) + "px";
element.style.top = ((this._clientHeight - root.height() * this._scale) >> 1) + "px";
},
_update: function()
{
if (!this.isShowing()) {
this._needsUpdate = true;
return;
}
if (!this._model.contentRoot()) {
this._emptyView.show(this.element);
return;
}
this._emptyView.detach();
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._clientWidth = this.element.clientWidth;
this._clientHeight = this.element.clientHeight;
this._scaleToFit();
this._model.forEachLayer(updateLayer.bind(this), this._model.contentRoot());
this._needsUpdate = false;
},
/**
* @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 isContentRoot = layer === this._model.contentRoot();
var parentElement = isContentRoot ? this._rotatingContainerElement : this._elementForLayer(layer.parent());
element.__depth = (parentElement.__depth || 0) + 1;
element.enableStyleClass("invisible", layer.invisible());
this._updateElementColor(element);
if (parentElement !== element.parentElement)
parentElement.appendChild(element);
style.width = layer.width() + "px";
style.height = layer.height() + "px";
if (isContentRoot)
return;
style.left = layer.offsetX() + "px";
style.top = layer.offsetY() + "px";
var transform = layer.transform();
if (transform) {
function toFixed5(x)
{
return x.toFixed(5);
}
// Avoid exponential notation in CSS.
style.webkitTransform = "matrix3d(" + transform.map(toFixed5).join(",") + ") translateZ(" + this._layerSpacing + ")";
var anchor = layer.anchorPoint();
style.webkitTransformOrigin = Math.round(anchor[0] * 100) + "% " + Math.round(anchor[1] * 100) + "% " + anchor[2];
} else {
style.webkitTransform = "";
style.webkitTransformOrigin = "";
}
},
/**
* @param {Element} element
*/
_updateElementColor: function(element)
{
var color;
if (element === this._lastOutlinedElement[WebInspector.Layers3DView.OutlineType.Selected])
color = WebInspector.Color.PageHighlight.Content.toString(WebInspector.Color.Format.RGBA) || "";
else {
const base = 144;
var component = base + 20 * ((element.__depth - 1) % 5);
color = "rgba(" + component + "," + component + "," + component + ", 0.8)";
}
element.style.backgroundColor = color;
},
/**
* @param {Event} event
*/
_onMouseDown: function(event)
{
if (event.which !== 1)
return;
this._setReferencePoint(event);
},
/**
* @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
*/
_onMouseUp: function(event)
{
if (event.which !== 1)
return;
this._resetReferencePoint();
},
/**
* @param {Event} event
* @return {WebInspector.Layer?}
*/
_layerFromEventPoint: function(event)
{
var element = this.element.ownerDocument.elementFromPoint(event.pageX, event.pageY);
if (!element)
return null;
element = element.enclosingNodeOrSelfWithClass("layer-container");
return element && element.__layer;
},
/**
* @param {Event} event
*/
_onMouseMove: function(event)
{
if (!event.which) {
this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerHovered, this._layerFromEventPoint(event));
return;
}
if (event.which === 1) {
// 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;
// Translate well to front so that no matter how we turn the plane, no parts of it goes below parent.
// This makes sure mouse events go to proper layers, not straight to the parent.
this._rotatingContainerElement.style.webkitTransform = "translateZ(10000px) rotateX(" + this._rotateX + "deg) rotateY(" + this._rotateY + "deg)";
}
},
/**
* @param {Event} event
*/
_onContextMenu: function(event)
{
var layer = this._layerFromEventPoint(event);
var nodeId = layer && layer.nodeId();
if (!nodeId)
return;
var domNode = WebInspector.domAgent.nodeForId(nodeId);
if (!domNode)
return;
var contextMenu = new WebInspector.ContextMenu(event);
contextMenu.appendApplicableItems(domNode);
contextMenu.show();
},
_onClick: function(event)
{
this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerSelected, this._layerFromEventPoint(event));
},
__proto__: WebInspector.View.prototype
}