OLD | NEW |
---|---|
(Empty) | |
1 // Copyright 2017 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 Resources.FrameMenu = class extends Common.Object { | |
6 constructor() { | |
7 super(); | |
8 this._button = createElement('button'); | |
9 this._button.className = 'frame-selector'; | |
10 this._button.appendChild(UI.Icon.create('largeicon-navigator-frame')); | |
11 this._nameLabel = this._button.createChild('span', 'frame-name'); | |
12 this._button.appendChild(UI.Icon.create('smallicon-triangle-down')); | |
13 | |
14 this._button.addEventListener('click', () => this._showPopup()); | |
15 | |
16 /** @type {?SDK.ResourceTreeFrame} */ | |
17 this._selectedFrame = null; | |
18 | |
19 SDK.targetManager.addModelListener( | |
20 SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameDetached, | |
21 event => this._frameDetached(/** @type {!SDK.ResourceTreeFrame} */ (even t.data))); | |
22 | |
23 this.selectFrame(null); | |
24 } | |
25 | |
26 /** | |
27 * @param {number} depth | |
28 * @param {?string} parentId | |
29 * @param {!Map<?string, !Array<!SDK.ResourceTreeFrame>>} framesTree | |
30 * @param {!Array<!Resources.FrameMenu._ListItem>} array | |
31 */ | |
32 static _flatten(depth, parentId, framesTree, array) { | |
33 var frames = framesTree.get(parentId); | |
34 if (!frames) | |
35 return; | |
36 for (var frame of frames) { | |
37 array.push(new Resources.FrameMenu._ListItem(frame, depth)); | |
38 Resources.FrameMenu._flatten(depth + 1, frame.id, framesTree, array); | |
39 } | |
40 } | |
41 | |
42 /** | |
43 * @param {?SDK.Target} target | |
44 * @param {!Map<?string, !Array<!SDK.ResourceTreeFrame>>} framesTree | |
45 * @param {!Set<!SDK.Target>} visitedTargets | |
46 * @return {?string} main frame ID | |
47 */ | |
48 static _collectFrames(target, framesTree, visitedTargets) { | |
49 if (!target) | |
50 return null; | |
51 var model = target.model(SDK.ResourceTreeModel); | |
52 if (!model || !model.mainFrame) | |
53 return null; | |
54 if (visitedTargets.has(target)) | |
55 return model.mainFrame.id; | |
56 visitedTargets.add(target); | |
57 var parentId = Resources.FrameMenu._collectFrames(target.parentTarget(), fra mesTree, visitedTargets); | |
58 framesTree.get(parentId).push(model.mainFrame); | |
59 Resources.FrameMenu._addChildFrames(model.mainFrame, framesTree); | |
60 return model.mainFrame.id; | |
61 } | |
62 | |
63 /** | |
64 * @param {!SDK.ResourceTreeFrame} frame | |
65 * @param {!Map<?string, !Array<!SDK.ResourceTreeFrame>>} framesTree | |
66 */ | |
67 static _addChildFrames(frame, framesTree) { | |
68 framesTree.set(frame.id, frame.childFrames); | |
69 for (var childFrame of frame.childFrames) | |
70 Resources.FrameMenu._addChildFrames(childFrame, framesTree); | |
71 } | |
72 | |
73 /** | |
74 * @returns {!Element} | |
75 */ | |
76 element() { | |
77 return this._button; | |
78 } | |
79 | |
80 /** | |
81 * @param {!SDK.ResourceTreeFrame} frame | |
82 */ | |
83 _frameDetached(frame) { | |
84 if (frame === this.selectedFrame()) | |
85 this.selectRootFrame(); | |
86 } | |
87 | |
88 /** | |
89 * @return {?SDK.ResourceTreeFrame} frame | |
90 */ | |
91 selectedFrame() { | |
92 return this._selectedFrame; | |
93 } | |
94 | |
95 selectRootFrame() { | |
96 var target = SDK.targetManager.mainTarget(); | |
97 var model = target && target.model(SDK.ResourceTreeModel); | |
98 var frame = model && model.mainFrame; | |
99 this.selectFrame(frame); | |
100 } | |
101 | |
102 _showPopup() { | |
103 /** @type {!Map<?string, !Array<!SDK.ResourceTreeFrame>>} */ | |
104 var framesTree = new Map(); | |
105 framesTree.set(null, []); | |
106 /** @type {!Set<!SDK.Target>} */ | |
107 var visitedTargets = new Set(); | |
108 for (var target of SDK.targetManager.targets()) | |
109 Resources.FrameMenu._collectFrames(target, framesTree, visitedTargets); | |
dgozman
2017/05/03 17:32:58
Let's move this to static ResourceTreeModel.frames
eostroukhov
2017/05/03 22:01:38
Done.
| |
110 | |
111 var items = []; | |
112 Resources.FrameMenu._flatten(0, null, framesTree, items); | |
113 var provider = new Resources.FrameMenu._ListProvider(this, items); | |
114 var list = new QuickOpen.FilteredListWidget(provider); | |
115 var selectedItem = null; | |
116 if (this._selectedFrame) { | |
117 for (var i = 0; i < items.length; i++) { | |
118 if (items[i].frame === this._selectedFrame) { | |
119 selectedItem = i; | |
120 break; | |
121 } | |
122 } | |
123 } | |
124 if (selectedItem !== null) | |
125 list.setInitialSelection(selectedItem); | |
126 list.setInputIcon('mediumicon-search'); | |
127 var anchorBox = this._button.firstElementChild.boxInWindow(); | |
128 list.showAsDialog(anchorBox, UI.GlassPane.AnchorBehavior.PreferBottom); | |
129 } | |
130 | |
131 /** | |
132 * @param {?SDK.ResourceTreeFrame} frame | |
133 */ | |
134 selectFrame(frame) { | |
135 this._selectedFrame = frame; | |
136 | |
137 var displayName = frame ? frame.displayName() : ''; | |
138 var frameName = frame ? frame.name : ''; | |
139 | |
140 this._nameLabel.textContent = frameName || displayName; | |
141 this._button.title = displayName; | |
142 } | |
143 }; | |
144 | |
145 Resources.FrameMenu._ListItem = class { | |
146 /** | |
147 * @param {!SDK.ResourceTreeFrame} frame | |
148 * @param {number} depth | |
149 */ | |
150 constructor(frame, depth) { | |
151 this.frame = frame; | |
152 this.depth = depth; | |
153 } | |
154 }; | |
155 | |
156 Resources.FrameMenu._ListProvider = class extends QuickOpen.FilteredListWidget.P rovider { | |
157 /** | |
158 * @param {!Resources.FrameMenu} menu | |
159 * @param {!Array<!Resources.FrameMenu._ListItem>} items | |
160 */ | |
161 constructor(menu, items) { | |
162 super(); | |
163 this._menu = menu; | |
164 this._items = items; | |
165 } | |
166 | |
167 /** | |
168 * @override | |
169 * @return {number} | |
170 */ | |
171 itemCount() { | |
172 return this._items.length; | |
173 } | |
174 | |
175 /** | |
176 * @override | |
177 * @param {number} itemIndex | |
178 * @return {string} | |
179 */ | |
180 itemKeyAt(itemIndex) { | |
181 var frame = this._items[itemIndex].frame; | |
182 return frame.displayName() + frame.securityOrigin; | |
183 } | |
184 | |
185 /** | |
186 * @override | |
187 * @param {?number} itemIndex | |
188 */ | |
189 hoverItem(itemIndex) { | |
190 SDK.OverlayModel.hideDOMNodeHighlight(); | |
191 if (itemIndex === null) | |
192 return; | |
193 var frame = this._items[itemIndex].frame; | |
194 var overlayModel = frame.resourceTreeModel().domModel().overlayModel(); | |
195 overlayModel.highlightFrame(frame.id); | |
196 } | |
197 | |
198 /** | |
199 * @override | |
200 * @param {number} itemIndex | |
201 * @param {string} query | |
202 * @param {!Element} titleElement | |
203 * @param {!Element} subtitleElement | |
204 */ | |
205 renderItem(itemIndex, query, titleElement, subtitleElement) { | |
206 var frame = this._items[itemIndex].frame; | |
207 var indent = query ? 0 : (this._items[itemIndex].depth * 16); | |
208 var padding = 24 + indent + 'px'; | |
209 titleElement.textContent = frame.displayName(); | |
210 subtitleElement.textContent = frame.securityOrigin; | |
211 titleElement.style.paddingLeft = padding; | |
212 subtitleElement.style.paddingLeft = padding; | |
213 QuickOpen.FilteredListWidget.highlightRanges(titleElement, query, true); | |
214 QuickOpen.FilteredListWidget.highlightRanges(subtitleElement, query, true); | |
215 } | |
216 | |
217 /** | |
218 * @override | |
219 * @param {?number} itemIndex | |
220 * @param {string} promptValue | |
221 */ | |
222 selectItem(itemIndex, promptValue) { | |
223 if (itemIndex === null) | |
224 return; | |
225 var frame = this._items[itemIndex].frame; | |
226 this._menu.selectFrame(frame); | |
227 this._menu.dispatchEventToListeners(Resources.FrameMenu.Events.FrameSelected , frame); | |
228 } | |
229 | |
230 /** | |
231 * @override | |
232 * @return {boolean} | |
233 */ | |
234 renderAsTwoRows() { | |
235 return true; | |
236 } | |
237 }; | |
238 | |
239 /** | |
240 * @enum {symbol} | |
241 */ | |
242 Resources.FrameMenu.Events = { | |
243 FrameSelected: Symbol('FrameSelected') | |
244 }; | |
OLD | NEW |