src/third_party/WebKit/Source/devtools/front_end/layers/LayerTree.js

   1 /*
   2  * Copyright (C) 2013 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @extends {WebInspector.Object}
  34  * @param {!WebInspector.LayerTreeModel} model
  35  * @param {!TreeOutline} treeOutline
  36  */
  37 WebInspector.LayerTree = function(model, treeOutline)
  38 {
  39     WebInspector.Object.call(this);
  40     this._model = model;
  41     this._treeOutline = treeOutline;
  42     this._treeOutline.childrenListElement.addEventListener("mousemove", this._onMouseMove.bind(this), false);
  43     this._treeOutline.childrenListElement.addEventListener("mouseout", this._onMouseMove.bind(this), false);
  44     this._treeOutline.childrenListElement.addEventListener("contextmenu", this._onContextMenu.bind(this), true);
  45     this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._update.bind(this));
  46     this._lastHoveredNode = null;
  47 }
  48
  49 /**
  50  * @enum {string}
  51  */
  52 WebInspector.LayerTree.Events = {
  53     LayerHovered: "LayerHovered",
  54     LayerSelected: "LayerSelected"
  55 }
  56
  57 WebInspector.LayerTree.prototype = {
  58     /**
  59      * @param {?WebInspector.Layer} layer
  60      */
  61     selectLayer: function(layer)
  62     {
  63         this.hoverLayer(null);
  64         var node = layer && this._treeOutline.getCachedTreeElement(layer);
  65         if (node)
  66             node.revealAndSelect(true);
  67         else if (this._treeOutline.selectedTreeElement)
  68             this._treeOutline.selectedTreeElement.deselect();
  69     },
  70
  71     /**
  72      * @param {?WebInspector.Layer} layer
  73      */
  74     hoverLayer: function(layer)
  75     {
  76         var node = layer && this._treeOutline.getCachedTreeElement(layer);
  77         if (node === this._lastHoveredNode)
  78             return;
  79         if (this._lastHoveredNode)
  80             this._lastHoveredNode.setHovered(false);
  81         if (node)
  82             node.setHovered(true);
  83         this._lastHoveredNode = node;
  84     },
  85
  86     _update: function()
  87     {
  88         var seenLayers = {};
  89
  90         /**
  91          * @param {!WebInspector.Layer} layer
  92          * @this {WebInspector.LayerTree}
  93          */
  94         function updateLayer(layer)
  95         {
  96             var id = layer.id();
  97             if (seenLayers[id])
  98                 console.assert(false, "Duplicate layer id: " + id);
  99             seenLayers[id] = true;
 100             var node = this._treeOutline.getCachedTreeElement(layer);
 101             var parent = layer === this._model.contentRoot() ? this._treeOutline : this._treeOutline.getCachedTreeElement(layer.parent());
 102             if (!parent)
 103                 console.assert(false, "Parent is not in the tree");
 104             if (!node) {
 105                 node = new WebInspector.LayerTreeElement(this, layer);
 106                 parent.appendChild(node);
 107             } else {
 108                 if (node.parent !== parent) {
 109                     node.parent.removeChild(node);
 110                     parent.appendChild(node);
 111                 }
 112                 node._update();
 113             }
 114         }
 115         if (this._model.contentRoot())
 116             this._model.forEachLayer(updateLayer.bind(this), this._model.contentRoot());
 117         // Cleanup layers that don't exist anymore from tree.
 118         for (var node = /** @type {!TreeElement|!TreeOutline|null} */(this._treeOutline.children[0]); node && !node.root;) {
 119             if (seenLayers[node.representedObject.id()]) {
 120                 node = node.traverseNextTreeElement(false);
 121             } else {
 122                 var nextNode = node.nextSibling || node.parent;
 123                 node.parent.removeChild(node);
 124                 if (node === this._lastHoveredNode)
 125                     this._lastHoveredNode = null;
 126                 node = nextNode;
 127             }
 128         }
 129     },
 130
 131     /**
 132      * @param {?Event} event
 133      */
 134     _onMouseMove: function(event)
 135     {
 136         var node = this._treeOutline.treeElementFromPoint(event.pageX, event.pageY);
 137         if (node === this._lastHoveredNode)
 138             return;
 139         this.dispatchEventToListeners(WebInspector.LayerTree.Events.LayerHovered, node && node.representedObject ? {layer: node.representedObject} : null);
 140     },
 141
 142     /**
 143      * @param {!WebInspector.LayerTreeElement} node
 144      */
 145     _selectedNodeChanged: function(node)
 146     {
 147         var layer = /** @type {!WebInspector.Layer} */ (node.representedObject);
 148         this.dispatchEventToListeners(WebInspector.LayerTree.Events.LayerSelected, {layer: layer});
 149     },
 150
 151     /**
 152      * @param {?Event} event
 153      */
 154     _onContextMenu: function(event)
 155     {
 156         var node = this._treeOutline.treeElementFromPoint(event.pageX, event.pageY);
 157         if (!node || !node.representedObject)
 158             return;
 159         var layer = /** @type {!WebInspector.Layer} */ (node.representedObject);
 160         if (!layer)
 161             return;
 162         var domNode = layer.nodeForSelfOrAncestor();
 163         if (!domNode)
 164             return;
 165         var contextMenu = new WebInspector.ContextMenu(event);
 166         contextMenu.appendApplicableItems(domNode);
 167         contextMenu.show();
 168     },
 169
 170     __proto__: WebInspector.Object.prototype
 171 }
 172
 173 /**
 174   * @constructor
 175   * @param {!WebInspector.LayerTree} tree
 176   * @param {!WebInspector.Layer} layer
 177   * @extends {TreeElement}
 178   */
 179 WebInspector.LayerTreeElement = function(tree, layer)
 180 {
 181     TreeElement.call(this, "", layer);
 182     this._layerTree = tree;
 183     this._update();
 184 }
 185
 186 WebInspector.LayerTreeElement.prototype = {
 187     onattach: function()
 188     {
 189         var selection = document.createElement("div");
 190         selection.className = "selection";
 191         this.listItemElement.insertBefore(selection, this.listItemElement.firstChild);
 192     },
 193
 194     _update: function()
 195     {
 196         var layer = /** @type {!WebInspector.Layer} */ (this.representedObject);
 197         var node = layer.nodeForSelfOrAncestor();
 198         var title = document.createDocumentFragment();
 199         title.createChild("div", "selection");
 200         title.appendChild(document.createTextNode(node ? WebInspector.DOMPresentationUtils.simpleSelector(node) : "#" + layer.id()));
 201         var details = title.createChild("span", "dimmed");
 202         details.textContent = WebInspector.UIString(" (%d × %d)", layer.width(), layer.height());
 203         this.title = title;
 204     },
 205
 206     /**
 207      * @override
 208      * @return {boolean}
 209      */
 210     onselect: function()
 211     {
 212         this._layerTree._selectedNodeChanged(this);
 213         return false;
 214     },
 215
 216     /**
 217      * @param {boolean} hovered
 218      */
 219     setHovered: function(hovered)
 220     {
 221         this.listItemElement.classList.toggle("hovered", hovered);
 222     },
 223
 224     __proto__: TreeElement.prototype
 225 }