| OLD | NEW |
| 1 /* | 1 /* |
| 2 * Copyright (C) 2013 Google Inc. All rights reserved. | 2 * Copyright (C) 2013 Google Inc. All rights reserved. |
| 3 * | 3 * |
| 4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
| 5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
| 6 * met: | 6 * met: |
| 7 * | 7 * |
| 8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
| 9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
| 10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
| 11 * copyright notice, this list of conditions and the following disclaimer | 11 * copyright notice, this list of conditions and the following disclaimer |
| 12 * in the documentation and/or other materials provided with the | 12 * in the documentation and/or other materials provided with the |
| 13 * distribution. | 13 * distribution. |
| 14 * * Neither the name of Google Inc. nor the names of its | 14 * * Neither the name of Google Inc. nor the names of its |
| 15 * contributors may be used to endorse or promote products derived from | 15 * contributors may be used to endorse or promote products derived from |
| 16 * this software without specific prior written permission. | 16 * this software without specific prior written permission. |
| 17 * | 17 * |
| 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS | 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT | 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR | 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT | 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, | 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT | 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, | 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY | 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | 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. | 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 29 */ | 29 */ |
| 30 | |
| 31 /** | 30 /** |
| 32 * @constructor | |
| 33 * @param {!WebInspector.LayerViewHost} layerViewHost | |
| 34 * @extends {WebInspector.Object} | |
| 35 * @implements {WebInspector.LayerView} | 31 * @implements {WebInspector.LayerView} |
| 32 * @unrestricted |
| 36 */ | 33 */ |
| 37 WebInspector.LayerTreeOutline = function(layerViewHost) | 34 WebInspector.LayerTreeOutline = class extends WebInspector.Object { |
| 38 { | 35 /** |
| 39 WebInspector.Object.call(this); | 36 * @param {!WebInspector.LayerViewHost} layerViewHost |
| 37 */ |
| 38 constructor(layerViewHost) { |
| 39 super(); |
| 40 this._layerViewHost = layerViewHost; | 40 this._layerViewHost = layerViewHost; |
| 41 this._layerViewHost.registerView(this); | 41 this._layerViewHost.registerView(this); |
| 42 | 42 |
| 43 this._treeOutline = new TreeOutlineInShadow(); | 43 this._treeOutline = new TreeOutlineInShadow(); |
| 44 this._treeOutline.element.classList.add("layer-tree", "overflow-auto"); | 44 this._treeOutline.element.classList.add('layer-tree', 'overflow-auto'); |
| 45 this._treeOutline.element.addEventListener("mousemove", this._onMouseMove.bi
nd(this), false); | 45 this._treeOutline.element.addEventListener('mousemove', this._onMouseMove.bi
nd(this), false); |
| 46 this._treeOutline.element.addEventListener("mouseout", this._onMouseMove.bin
d(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); | 47 this._treeOutline.element.addEventListener('contextmenu', this._onContextMen
u.bind(this), true); |
| 48 | 48 |
| 49 this._lastHoveredNode = null; | 49 this._lastHoveredNode = null; |
| 50 this.element = this._treeOutline.element; | 50 this.element = this._treeOutline.element; |
| 51 this._layerViewHost.showInternalLayersSetting().addChangeListener(this._upda
te, this); | 51 this._layerViewHost.showInternalLayersSetting().addChangeListener(this._upda
te, this); |
| 52 } |
| 53 |
| 54 focus() { |
| 55 this._treeOutline.focus(); |
| 56 } |
| 57 |
| 58 /** |
| 59 * @param {?WebInspector.LayerView.Selection} selection |
| 60 * @override |
| 61 */ |
| 62 selectObject(selection) { |
| 63 this.hoverObject(null); |
| 64 var layer = selection && selection.layer(); |
| 65 var node = layer && layer[WebInspector.LayerTreeElement._symbol]; |
| 66 if (node) |
| 67 node.revealAndSelect(true); |
| 68 else if (this._treeOutline.selectedTreeElement) |
| 69 this._treeOutline.selectedTreeElement.deselect(); |
| 70 } |
| 71 |
| 72 /** |
| 73 * @param {?WebInspector.LayerView.Selection} selection |
| 74 * @override |
| 75 */ |
| 76 hoverObject(selection) { |
| 77 var layer = selection && selection.layer(); |
| 78 var node = layer && layer[WebInspector.LayerTreeElement._symbol]; |
| 79 if (node === this._lastHoveredNode) |
| 80 return; |
| 81 if (this._lastHoveredNode) |
| 82 this._lastHoveredNode.setHovered(false); |
| 83 if (node) |
| 84 node.setHovered(true); |
| 85 this._lastHoveredNode = node; |
| 86 } |
| 87 |
| 88 /** |
| 89 * @param {?WebInspector.LayerTreeBase} layerTree |
| 90 * @override |
| 91 */ |
| 92 setLayerTree(layerTree) { |
| 93 this._layerTree = layerTree; |
| 94 this._update(); |
| 95 } |
| 96 |
| 97 _update() { |
| 98 var showInternalLayers = this._layerViewHost.showInternalLayersSetting().get
(); |
| 99 var seenLayers = new Map(); |
| 100 var root = null; |
| 101 if (this._layerTree) { |
| 102 if (!showInternalLayers) |
| 103 root = this._layerTree.contentRoot(); |
| 104 if (!root) |
| 105 root = this._layerTree.root(); |
| 106 } |
| 107 |
| 108 /** |
| 109 * @param {!WebInspector.Layer} layer |
| 110 * @this {WebInspector.LayerTreeOutline} |
| 111 */ |
| 112 function updateLayer(layer) { |
| 113 if (!layer.drawsContent() && !showInternalLayers) |
| 114 return; |
| 115 if (seenLayers.get(layer)) |
| 116 console.assert(false, 'Duplicate layer: ' + layer.id()); |
| 117 seenLayers.set(layer, true); |
| 118 var node = layer[WebInspector.LayerTreeElement._symbol]; |
| 119 var parentLayer = layer.parent(); |
| 120 // Skip till nearest visible ancestor. |
| 121 while (parentLayer && parentLayer !== root && !parentLayer.drawsContent()
&& !showInternalLayers) |
| 122 parentLayer = parentLayer.parent(); |
| 123 var parent = |
| 124 layer === root ? this._treeOutline.rootElement() : parentLayer[WebInsp
ector.LayerTreeElement._symbol]; |
| 125 if (!parent) { |
| 126 console.assert(false, 'Parent is not in the tree'); |
| 127 return; |
| 128 } |
| 129 if (!node) { |
| 130 node = new WebInspector.LayerTreeElement(this, layer); |
| 131 parent.appendChild(node); |
| 132 // Expand all new non-content layers to expose content layers better. |
| 133 if (!layer.drawsContent()) |
| 134 node.expand(); |
| 135 } else { |
| 136 if (node.parent !== parent) { |
| 137 var oldSelection = this._treeOutline.selectedTreeElement; |
| 138 if (node.parent) |
| 139 node.parent.removeChild(node); |
| 140 parent.appendChild(node); |
| 141 if (oldSelection !== this._treeOutline.selectedTreeElement) |
| 142 oldSelection.select(); |
| 143 } |
| 144 node._update(); |
| 145 } |
| 146 } |
| 147 if (root) |
| 148 this._layerTree.forEachLayer(updateLayer.bind(this), root); |
| 149 // Cleanup layers that don't exist anymore from tree. |
| 150 var rootElement = this._treeOutline.rootElement(); |
| 151 for (var node = rootElement.firstChild(); node && !node.root;) { |
| 152 if (seenLayers.get(node._layer)) { |
| 153 node = node.traverseNextTreeElement(false); |
| 154 } else { |
| 155 var nextNode = node.nextSibling || node.parent; |
| 156 node.parent.removeChild(node); |
| 157 if (node === this._lastHoveredNode) |
| 158 this._lastHoveredNode = null; |
| 159 node = nextNode; |
| 160 } |
| 161 } |
| 162 if (!this._treeOutline.selectedTreeElement) { |
| 163 var elementToSelect = this._layerTree.contentRoot() || this._layerTree.roo
t(); |
| 164 if (elementToSelect) |
| 165 elementToSelect[WebInspector.LayerTreeElement._symbol].revealAndSelect(t
rue); |
| 166 } |
| 167 } |
| 168 |
| 169 /** |
| 170 * @param {!Event} event |
| 171 */ |
| 172 _onMouseMove(event) { |
| 173 var node = this._treeOutline.treeElementFromEvent(event); |
| 174 if (node === this._lastHoveredNode) |
| 175 return; |
| 176 this._layerViewHost.hoverObject(this._selectionForNode(node)); |
| 177 } |
| 178 |
| 179 /** |
| 180 * @param {!WebInspector.LayerTreeElement} node |
| 181 */ |
| 182 _selectedNodeChanged(node) { |
| 183 this._layerViewHost.selectObject(this._selectionForNode(node)); |
| 184 } |
| 185 |
| 186 /** |
| 187 * @param {!Event} event |
| 188 */ |
| 189 _onContextMenu(event) { |
| 190 var selection = this._selectionForNode(this._treeOutline.treeElementFromEven
t(event)); |
| 191 var contextMenu = new WebInspector.ContextMenu(event); |
| 192 this._layerViewHost.showContextMenu(contextMenu, selection); |
| 193 } |
| 194 |
| 195 /** |
| 196 * @param {?TreeElement} node |
| 197 * @return {?WebInspector.LayerView.Selection} |
| 198 */ |
| 199 _selectionForNode(node) { |
| 200 return node && node._layer ? new WebInspector.LayerView.LayerSelection(node.
_layer) : null; |
| 201 } |
| 52 }; | 202 }; |
| 53 | 203 |
| 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 /** | 204 /** |
| 217 * @constructor | 205 * @unrestricted |
| 218 * @param {!WebInspector.LayerTreeOutline} tree | 206 */ |
| 219 * @param {!WebInspector.Layer} layer | 207 WebInspector.LayerTreeElement = class extends TreeElement { |
| 220 * @extends {TreeElement} | 208 /** |
| 221 */ | 209 * @param {!WebInspector.LayerTreeOutline} tree |
| 222 WebInspector.LayerTreeElement = function(tree, layer) | 210 * @param {!WebInspector.Layer} layer |
| 223 { | 211 */ |
| 224 TreeElement.call(this); | 212 constructor(tree, layer) { |
| 213 super(); |
| 225 this._treeOutline = tree; | 214 this._treeOutline = tree; |
| 226 this._layer = layer; | 215 this._layer = layer; |
| 227 this._layer[WebInspector.LayerTreeElement._symbol] = this; | 216 this._layer[WebInspector.LayerTreeElement._symbol] = this; |
| 228 this._update(); | 217 this._update(); |
| 218 } |
| 219 |
| 220 _update() { |
| 221 var node = this._layer.nodeForSelfOrAncestor(); |
| 222 var title = createDocumentFragment(); |
| 223 title.createTextChild(node ? WebInspector.DOMPresentationUtils.simpleSelecto
r(node) : '#' + this._layer.id()); |
| 224 var details = title.createChild('span', 'dimmed'); |
| 225 details.textContent = WebInspector.UIString(' (%d × %d)', this._layer.width(
), this._layer.height()); |
| 226 this.title = title; |
| 227 } |
| 228 |
| 229 /** |
| 230 * @override |
| 231 * @return {boolean} |
| 232 */ |
| 233 onselect() { |
| 234 this._treeOutline._selectedNodeChanged(this); |
| 235 return false; |
| 236 } |
| 237 |
| 238 /** |
| 239 * @param {boolean} hovered |
| 240 */ |
| 241 setHovered(hovered) { |
| 242 this.listItemElement.classList.toggle('hovered', hovered); |
| 243 } |
| 229 }; | 244 }; |
| 230 | 245 |
| 231 WebInspector.LayerTreeElement._symbol = Symbol("layer"); | 246 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 |