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..0227be720975baa37d8d1b630419b925edff9ffd |
--- /dev/null |
+++ b/third_party/WebKit/Source/devtools/front_end/resources/FrameMenu.js |
@@ -0,0 +1,196 @@ |
+// 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); |
+ } |
+ |
+ /** |
+ * @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() { |
+ /** |
+ * @param {!SDK.ResourceTreeFrame} frame |
+ * @return {!Resources.FrameMenu._ListItem} |
+ */ |
+ function frameToListItem(frame) { |
+ var depth = SDK.ResourceTreeModel.framePath(frame).length - 1; |
+ return new Resources.FrameMenu._ListItem(frame, depth); |
+ } |
+ var items = SDK.ResourceTreeModel.frames().map(frameToListItem); |
+ var provider = new Resources.FrameMenu._ListProvider(this, items); |
+ var list = new QuickOpen.FilteredListWidget(provider); |
caseq
2017/05/26 22:20:18
I think this should use a different control, prefe
|
+ 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 { |
caseq
2017/05/26 22:20:19
nit: convert to typedef?
|
+ /** |
+ * @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 |
+ */ |
+ highlightItem(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') |
+}; |