| OLD | NEW |
|---|
| (Empty) |
| 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 * @param {!WebInspector.LayerViewHost} layerViewHost | |
| 34 * @extends {WebInspector.Object} | |
| 35 * @implements {WebInspector.LayerView} | |
| 36 */ | |
| 37 WebInspector.LayerTreeOutline = function(layerViewHost) | |
| 38 { | |
| 39 WebInspector.Object.call(this); | |
| 40 this._layerViewHost = layerViewHost; | |
| 41 this._layerViewHost.registerView(this); | |
| 42 | |
| 43 this._treeOutline = new TreeOutlineInShadow(); | |
| 44 this._treeOutline.element.classList.add("layer-tree"); | |
| 45 this._treeOutline.element.addEventListener("mousemove", this._onMouseMove.bi
nd(this), false); | |
| 46 this._treeOutline.element.addEventListener("mouseout", this._onMouseMove.bin
d(this), false); | |
| 47 this._treeOutline.element.addEventListener("contextmenu", this._onContextMen
u.bind(this), true); | |
| 48 | |
| 49 this._lastHoveredNode = null; | |
| 50 this.element = this._treeOutline.element; | |
| 51 this._layerViewHost.showInternalLayersSetting().addChangeListener(this._upda
te, this); | |
| 52 } | |
| 53 | |
| 54 WebInspector.LayerTreeOutline.prototype = { | |
| 55 focus: function() | |
| 56 { | |
| 57 this._treeOutline.focus(); | |
| 58 }, | |
| 59 | |
| 60 /** | |
| 61 * @param {?WebInspector.LayerView.Selection} selection | |
| 62 * @override | |
| 63 */ | |
| 64 selectObject: function(selection) | |
| 65 { | |
| 66 this.hoverObject(null); | |
| 67 var layer = selection && selection.layer(); | |
| 68 var node = layer && layer[WebInspector.LayerTreeElement._symbol]; | |
| 69 if (node) | |
| 70 node.revealAndSelect(true); | |
| 71 else if (this._treeOutline.selectedTreeElement) | |
| 72 this._treeOutline.selectedTreeElement.deselect(); | |
| 73 }, | |
| 74 | |
| 75 /** | |
| 76 * @param {?WebInspector.LayerView.Selection} selection | |
| 77 * @override | |
| 78 */ | |
| 79 hoverObject: function(selection) | |
| 80 { | |
| 81 var layer = selection && selection.layer(); | |
| 82 var node = layer && layer[WebInspector.LayerTreeElement._symbol]; | |
| 83 if (node === this._lastHoveredNode) | |
| 84 return; | |
| 85 if (this._lastHoveredNode) | |
| 86 this._lastHoveredNode.setHovered(false); | |
| 87 if (node) | |
| 88 node.setHovered(true); | |
| 89 this._lastHoveredNode = node; | |
| 90 }, | |
| 91 | |
| 92 /** | |
| 93 * @param {?WebInspector.LayerTreeBase} layerTree | |
| 94 * @override | |
| 95 */ | |
| 96 setLayerTree: function(layerTree) | |
| 97 { | |
| 98 this._layerTree = layerTree; | |
| 99 this._update(); | |
| 100 }, | |
| 101 | |
| 102 _update: function() | |
| 103 { | |
| 104 var showInternalLayers = this._layerViewHost.showInternalLayersSetting()
.get(); | |
| 105 var seenLayers = new Map(); | |
| 106 var root = null; | |
| 107 if (this._layerTree) { | |
| 108 if (!showInternalLayers) | |
| 109 root = this._layerTree.contentRoot(); | |
| 110 if (!root) | |
| 111 root = this._layerTree.root(); | |
| 112 } | |
| 113 | |
| 114 /** | |
| 115 * @param {!WebInspector.Layer} layer | |
| 116 * @this {WebInspector.LayerTreeOutline} | |
| 117 */ | |
| 118 function updateLayer(layer) | |
| 119 { | |
| 120 if (!layer.drawsContent() && !showInternalLayers) | |
| 121 return; | |
| 122 if (seenLayers.get(layer)) | |
| 123 console.assert(false, "Duplicate layer: " + layer.id()); | |
| 124 seenLayers.set(layer, true); | |
| 125 var node = layer[WebInspector.LayerTreeElement._symbol]; | |
| 126 var parentLayer = layer.parent(); | |
| 127 // Skip till nearest visible ancestor. | |
| 128 while (parentLayer && parentLayer !== root && !parentLayer.drawsCont
ent() && !showInternalLayers) | |
| 129 parentLayer = parentLayer.parent(); | |
| 130 var parent = layer === root ? this._treeOutline.rootElement() : pare
ntLayer[WebInspector.LayerTreeElement._symbol]; | |
| 131 if (!parent) { | |
| 132 console.assert(false, "Parent is not in the tree"); | |
| 133 return; | |
| 134 } | |
| 135 if (!node) { | |
| 136 node = new WebInspector.LayerTreeElement(this, layer); | |
| 137 parent.appendChild(node); | |
| 138 // Expand all new non-content layers to expose content layers be
tter. | |
| 139 if (!layer.drawsContent()) | |
| 140 node.expand(); | |
| 141 } else { | |
| 142 if (node.parent !== parent) { | |
| 143 var oldSelection = this._treeOutline.selectedTreeElement; | |
| 144 if (node.parent) | |
| 145 node.parent.removeChild(node); | |
| 146 parent.appendChild(node); | |
| 147 if (oldSelection !== this._treeOutline.selectedTreeElement) | |
| 148 oldSelection.select(); | |
| 149 } | |
| 150 node._update(); | |
| 151 } | |
| 152 } | |
| 153 if (root) | |
| 154 this._layerTree.forEachLayer(updateLayer.bind(this), root); | |
| 155 // Cleanup layers that don't exist anymore from tree. | |
| 156 var rootElement = this._treeOutline.rootElement(); | |
| 157 for (var node = rootElement.firstChild(); node && !node.root;) { | |
| 158 if (seenLayers.get(node._layer)) { | |
| 159 node = node.traverseNextTreeElement(false); | |
| 160 } else { | |
| 161 var nextNode = node.nextSibling || node.parent; | |
| 162 node.parent.removeChild(node); | |
| 163 if (node === this._lastHoveredNode) | |
| 164 this._lastHoveredNode = null; | |
| 165 node = nextNode; | |
| 166 } | |
| 167 } | |
| 168 if (!this._treeOutline.selectedTreeElement) { | |
| 169 var elementToSelect = this._layerTree.contentRoot() || this._layerTr
ee.root(); | |
| 170 if (elementToSelect) | |
| 171 elementToSelect[WebInspector.LayerTreeElement._symbol].revealAnd
Select(true); | |
| 172 } | |
| 173 }, | |
| 174 | |
| 175 /** | |
| 176 * @param {!Event} event | |
| 177 */ | |
| 178 _onMouseMove: function(event) | |
| 179 { | |
| 180 var node = this._treeOutline.treeElementFromEvent(event); | |
| 181 if (node === this._lastHoveredNode) | |
| 182 return; | |
| 183 this._layerViewHost.hoverObject(this._selectionForNode(node)); | |
| 184 }, | |
| 185 | |
| 186 /** | |
| 187 * @param {!WebInspector.LayerTreeElement} node | |
| 188 */ | |
| 189 _selectedNodeChanged: function(node) | |
| 190 { | |
| 191 this._layerViewHost.selectObject(this._selectionForNode(node)); | |
| 192 }, | |
| 193 | |
| 194 /** | |
| 195 * @param {!Event} event | |
| 196 */ | |
| 197 _onContextMenu: function(event) | |
| 198 { | |
| 199 var selection = this._selectionForNode(this._treeOutline.treeElementFrom
Event(event)); | |
| 200 var contextMenu = new WebInspector.ContextMenu(event); | |
| 201 this._layerViewHost.showContextMenu(contextMenu, selection); | |
| 202 }, | |
| 203 | |
| 204 /** | |
| 205 * @param {?TreeElement} node | |
| 206 * @return {?WebInspector.LayerView.Selection} | |
| 207 */ | |
| 208 _selectionForNode: function(node) | |
| 209 { | |
| 210 return node && node._layer ? new WebInspector.LayerView.LayerSelection(n
ode._layer) : null; | |
| 211 }, | |
| 212 | |
| 213 __proto__: WebInspector.Object.prototype | |
| 214 } | |
| 215 | |
| 216 /** | |
| 217 * @constructor | |
| 218 * @param {!WebInspector.LayerTreeOutline} tree | |
| 219 * @param {!WebInspector.Layer} layer | |
| 220 * @extends {TreeElement} | |
| 221 */ | |
| 222 WebInspector.LayerTreeElement = function(tree, layer) | |
| 223 { | |
| 224 TreeElement.call(this); | |
| 225 this._treeOutline = tree; | |
| 226 this._layer = layer; | |
| 227 this._layer[WebInspector.LayerTreeElement._symbol] = this; | |
| 228 this._update(); | |
| 229 } | |
| 230 | |
| 231 WebInspector.LayerTreeElement._symbol = Symbol("layer"); | |
| 232 | |
| 233 WebInspector.LayerTreeElement.prototype = { | |
| 234 _update: function() | |
| 235 { | |
| 236 var node = this._layer.nodeForSelfOrAncestor(); | |
| 237 var title = createDocumentFragment(); | |
| 238 title.createTextChild(node ? WebInspector.DOMPresentationUtils.simpleSel
ector(node) : "#" + this._layer.id()); | |
| 239 var details = title.createChild("span", "dimmed"); | |
| 240 details.textContent = WebInspector.UIString(" (%d × %d)", this._layer.wi
dth(), this._layer.height()); | |
| 241 this.title = title; | |
| 242 }, | |
| 243 | |
| 244 /** | |
| 245 * @override | |
| 246 * @return {boolean} | |
| 247 */ | |
| 248 onselect: function() | |
| 249 { | |
| 250 this._treeOutline._selectedNodeChanged(this); | |
| 251 return false; | |
| 252 }, | |
| 253 | |
| 254 /** | |
| 255 * @param {boolean} hovered | |
| 256 */ | |
| 257 setHovered: function(hovered) | |
| 258 { | |
| 259 this.listItemElement.classList.toggle("hovered", hovered); | |
| 260 }, | |
| 261 | |
| 262 __proto__: TreeElement.prototype | |
| 263 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2358253002:
DevTools: extract a component for layer viewer (Closed)
