Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(67)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/layer_viewer/LayerTreeOutline.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698