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 |