Index: third_party/WebKit/Source/devtools/front_end/resources/FrameMenu.js |
diff --git a/third_party/WebKit/Source/devtools/front_end/resources/FrameMenu.js b/third_party/WebKit/Source/devtools/front_end/resources/FrameMenu.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..a2fe3ed0b611b7c9b076b5e96ad3e408a7f221f8 |
--- /dev/null |
+++ b/third_party/WebKit/Source/devtools/front_end/resources/FrameMenu.js |
@@ -0,0 +1,244 @@ |
+// Copyright 2017 The Chromium Authors. All rights reserved. |
+// Use of this source code is governed by a BSD-style license that can be |
+// found in the LICENSE file. |
+ |
+Resources.FrameMenu = class extends Common.Object { |
+ constructor() { |
+ super(); |
+ this._button = createElement('button'); |
+ this._button.className = 'frame-selector'; |
+ this._button.appendChild(UI.Icon.create('largeicon-navigator-frame')); |
+ this._nameLabel = this._button.createChild('span', 'frame-name'); |
+ this._button.appendChild(UI.Icon.create('smallicon-triangle-down')); |
+ |
+ this._button.addEventListener('click', () => this._showPopup()); |
+ |
+ /** @type {?SDK.ResourceTreeFrame} */ |
+ this._selectedFrame = null; |
+ |
+ SDK.targetManager.addModelListener( |
+ SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameDetached, |
+ event => this._frameDetached(/** @type {!SDK.ResourceTreeFrame} */ (event.data))); |
+ |
+ this.selectFrame(null); |
+ } |
+ |
+ /** |
+ * @param {number} depth |
+ * @param {?string} parentId |
+ * @param {!Map<?string, !Array<!SDK.ResourceTreeFrame>>} framesTree |
+ * @param {!Array<!Resources.FrameMenu._ListItem>} array |
+ */ |
+ static _flatten(depth, parentId, framesTree, array) { |
+ var frames = framesTree.get(parentId); |
+ if (!frames) |
+ return; |
+ for (var frame of frames) { |
+ array.push(new Resources.FrameMenu._ListItem(frame, depth)); |
+ Resources.FrameMenu._flatten(depth + 1, frame.id, framesTree, array); |
+ } |
+ } |
+ |
+ /** |
+ * @param {?SDK.Target} target |
+ * @param {!Map<?string, !Array<!SDK.ResourceTreeFrame>>} framesTree |
+ * @param {!Set<!SDK.Target>} visitedTargets |
+ * @return {?string} main frame ID |
+ */ |
+ static _collectFrames(target, framesTree, visitedTargets) { |
+ if (!target) |
+ return null; |
+ var model = target.model(SDK.ResourceTreeModel); |
+ if (!model || !model.mainFrame) |
+ return null; |
+ if (visitedTargets.has(target)) |
+ return model.mainFrame.id; |
+ visitedTargets.add(target); |
+ var parentId = Resources.FrameMenu._collectFrames(target.parentTarget(), framesTree, visitedTargets); |
+ framesTree.get(parentId).push(model.mainFrame); |
+ Resources.FrameMenu._addChildFrames(model.mainFrame, framesTree); |
+ return model.mainFrame.id; |
+ } |
+ |
+ /** |
+ * @param {!SDK.ResourceTreeFrame} frame |
+ * @param {!Map<?string, !Array<!SDK.ResourceTreeFrame>>} framesTree |
+ */ |
+ static _addChildFrames(frame, framesTree) { |
+ framesTree.set(frame.id, frame.childFrames); |
+ for (var childFrame of frame.childFrames) |
+ Resources.FrameMenu._addChildFrames(childFrame, framesTree); |
+ } |
+ |
+ /** |
+ * @returns {!Element} |
+ */ |
+ element() { |
+ return this._button; |
+ } |
+ |
+ /** |
+ * @param {!SDK.ResourceTreeFrame} frame |
+ */ |
+ _frameDetached(frame) { |
+ if (frame === this.selectedFrame()) |
+ this.selectRootFrame(); |
+ } |
+ |
+ /** |
+ * @return {?SDK.ResourceTreeFrame} frame |
+ */ |
+ selectedFrame() { |
+ return this._selectedFrame; |
+ } |
+ |
+ selectRootFrame() { |
+ var target = SDK.targetManager.mainTarget(); |
+ var model = target && target.model(SDK.ResourceTreeModel); |
+ var frame = model && model.mainFrame; |
+ this.selectFrame(frame); |
+ } |
+ |
+ _showPopup() { |
+ /** @type {!Map<?string, !Array<!SDK.ResourceTreeFrame>>} */ |
+ var framesTree = new Map(); |
+ framesTree.set(null, []); |
+ /** @type {!Set<!SDK.Target>} */ |
+ var visitedTargets = new Set(); |
+ for (var target of SDK.targetManager.targets()) |
+ 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.
|
+ |
+ var items = []; |
+ Resources.FrameMenu._flatten(0, null, framesTree, items); |
+ var provider = new Resources.FrameMenu._ListProvider(this, items); |
+ var list = new QuickOpen.FilteredListWidget(provider); |
+ var selectedItem = null; |
+ if (this._selectedFrame) { |
+ for (var i = 0; i < items.length; i++) { |
+ if (items[i].frame === this._selectedFrame) { |
+ selectedItem = i; |
+ break; |
+ } |
+ } |
+ } |
+ if (selectedItem !== null) |
+ list.setInitialSelection(selectedItem); |
+ list.setInputIcon('mediumicon-search'); |
+ var anchorBox = this._button.firstElementChild.boxInWindow(); |
+ list.showAsDialog(anchorBox, UI.GlassPane.AnchorBehavior.PreferBottom); |
+ } |
+ |
+ /** |
+ * @param {?SDK.ResourceTreeFrame} frame |
+ */ |
+ selectFrame(frame) { |
+ this._selectedFrame = frame; |
+ |
+ var displayName = frame ? frame.displayName() : ''; |
+ var frameName = frame ? frame.name : ''; |
+ |
+ this._nameLabel.textContent = frameName || displayName; |
+ this._button.title = displayName; |
+ } |
+}; |
+ |
+Resources.FrameMenu._ListItem = class { |
+ /** |
+ * @param {!SDK.ResourceTreeFrame} frame |
+ * @param {number} depth |
+ */ |
+ constructor(frame, depth) { |
+ this.frame = frame; |
+ this.depth = depth; |
+ } |
+}; |
+ |
+Resources.FrameMenu._ListProvider = class extends QuickOpen.FilteredListWidget.Provider { |
+ /** |
+ * @param {!Resources.FrameMenu} menu |
+ * @param {!Array<!Resources.FrameMenu._ListItem>} items |
+ */ |
+ constructor(menu, items) { |
+ super(); |
+ this._menu = menu; |
+ this._items = items; |
+ } |
+ |
+ /** |
+ * @override |
+ * @return {number} |
+ */ |
+ itemCount() { |
+ return this._items.length; |
+ } |
+ |
+ /** |
+ * @override |
+ * @param {number} itemIndex |
+ * @return {string} |
+ */ |
+ itemKeyAt(itemIndex) { |
+ var frame = this._items[itemIndex].frame; |
+ return frame.displayName() + frame.securityOrigin; |
+ } |
+ |
+ /** |
+ * @override |
+ * @param {?number} itemIndex |
+ */ |
+ hoverItem(itemIndex) { |
+ SDK.OverlayModel.hideDOMNodeHighlight(); |
+ if (itemIndex === null) |
+ return; |
+ var frame = this._items[itemIndex].frame; |
+ var overlayModel = frame.resourceTreeModel().domModel().overlayModel(); |
+ overlayModel.highlightFrame(frame.id); |
+ } |
+ |
+ /** |
+ * @override |
+ * @param {number} itemIndex |
+ * @param {string} query |
+ * @param {!Element} titleElement |
+ * @param {!Element} subtitleElement |
+ */ |
+ renderItem(itemIndex, query, titleElement, subtitleElement) { |
+ var frame = this._items[itemIndex].frame; |
+ var indent = query ? 0 : (this._items[itemIndex].depth * 16); |
+ var padding = 24 + indent + 'px'; |
+ titleElement.textContent = frame.displayName(); |
+ subtitleElement.textContent = frame.securityOrigin; |
+ titleElement.style.paddingLeft = padding; |
+ subtitleElement.style.paddingLeft = padding; |
+ QuickOpen.FilteredListWidget.highlightRanges(titleElement, query, true); |
+ QuickOpen.FilteredListWidget.highlightRanges(subtitleElement, query, true); |
+ } |
+ |
+ /** |
+ * @override |
+ * @param {?number} itemIndex |
+ * @param {string} promptValue |
+ */ |
+ selectItem(itemIndex, promptValue) { |
+ if (itemIndex === null) |
+ return; |
+ var frame = this._items[itemIndex].frame; |
+ this._menu.selectFrame(frame); |
+ this._menu.dispatchEventToListeners(Resources.FrameMenu.Events.FrameSelected, frame); |
+ } |
+ |
+ /** |
+ * @override |
+ * @return {boolean} |
+ */ |
+ renderAsTwoRows() { |
+ return true; |
+ } |
+}; |
+ |
+/** |
+ * @enum {symbol} |
+ */ |
+Resources.FrameMenu.Events = { |
+ FrameSelected: Symbol('FrameSelected') |
+}; |