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 * @returns {!Element} |
| 28 */ |
| 29 element() { |
| 30 return this._button; |
| 31 } |
| 32 |
| 33 /** |
| 34 * @param {!SDK.ResourceTreeFrame} frame |
| 35 */ |
| 36 _frameDetached(frame) { |
| 37 if (frame === this.selectedFrame()) |
| 38 this.selectRootFrame(); |
| 39 } |
| 40 |
| 41 /** |
| 42 * @return {?SDK.ResourceTreeFrame} frame |
| 43 */ |
| 44 selectedFrame() { |
| 45 return this._selectedFrame; |
| 46 } |
| 47 |
| 48 selectRootFrame() { |
| 49 var target = SDK.targetManager.mainTarget(); |
| 50 var model = target && target.model(SDK.ResourceTreeModel); |
| 51 var frame = model && model.mainFrame; |
| 52 this.selectFrame(frame); |
| 53 } |
| 54 |
| 55 _showPopup() { |
| 56 /** |
| 57 * @param {!SDK.ResourceTreeFrame} frame |
| 58 * @return {!Resources.FrameMenu._ListItem} |
| 59 */ |
| 60 function frameToListItem(frame) { |
| 61 var depth = SDK.ResourceTreeModel.framePath(frame).length - 1; |
| 62 return new Resources.FrameMenu._ListItem(frame, depth); |
| 63 } |
| 64 var items = SDK.ResourceTreeModel.frames().map(frameToListItem); |
| 65 var provider = new Resources.FrameMenu._ListProvider(this, items); |
| 66 var list = new QuickOpen.FilteredListWidget(provider); |
| 67 var selectedItem = null; |
| 68 if (this._selectedFrame) { |
| 69 for (var i = 0; i < items.length; i++) { |
| 70 if (items[i].frame === this._selectedFrame) { |
| 71 selectedItem = i; |
| 72 break; |
| 73 } |
| 74 } |
| 75 } |
| 76 if (selectedItem !== null) |
| 77 list.setInitialSelection(selectedItem); |
| 78 list.setInputIcon('mediumicon-search'); |
| 79 var anchorBox = this._button.firstElementChild.boxInWindow(); |
| 80 list.showAsDialog(anchorBox, UI.GlassPane.AnchorBehavior.PreferBottom); |
| 81 } |
| 82 |
| 83 /** |
| 84 * @param {?SDK.ResourceTreeFrame} frame |
| 85 */ |
| 86 selectFrame(frame) { |
| 87 this._selectedFrame = frame; |
| 88 |
| 89 var displayName = frame ? frame.displayName() : ''; |
| 90 var frameName = frame ? frame.name : ''; |
| 91 |
| 92 this._nameLabel.textContent = frameName || displayName; |
| 93 this._button.title = displayName; |
| 94 } |
| 95 }; |
| 96 |
| 97 Resources.FrameMenu._ListItem = class { |
| 98 /** |
| 99 * @param {!SDK.ResourceTreeFrame} frame |
| 100 * @param {number} depth |
| 101 */ |
| 102 constructor(frame, depth) { |
| 103 this.frame = frame; |
| 104 this.depth = depth; |
| 105 } |
| 106 }; |
| 107 |
| 108 Resources.FrameMenu._ListProvider = class extends QuickOpen.FilteredListWidget.P
rovider { |
| 109 /** |
| 110 * @param {!Resources.FrameMenu} menu |
| 111 * @param {!Array<!Resources.FrameMenu._ListItem>} items |
| 112 */ |
| 113 constructor(menu, items) { |
| 114 super(); |
| 115 this._menu = menu; |
| 116 this._items = items; |
| 117 } |
| 118 |
| 119 /** |
| 120 * @override |
| 121 * @return {number} |
| 122 */ |
| 123 itemCount() { |
| 124 return this._items.length; |
| 125 } |
| 126 |
| 127 /** |
| 128 * @override |
| 129 * @param {number} itemIndex |
| 130 * @return {string} |
| 131 */ |
| 132 itemKeyAt(itemIndex) { |
| 133 var frame = this._items[itemIndex].frame; |
| 134 return frame.displayName() + frame.securityOrigin; |
| 135 } |
| 136 |
| 137 /** |
| 138 * @override |
| 139 * @param {?number} itemIndex |
| 140 */ |
| 141 highlightItem(itemIndex) { |
| 142 SDK.OverlayModel.hideDOMNodeHighlight(); |
| 143 if (itemIndex === null) |
| 144 return; |
| 145 var frame = this._items[itemIndex].frame; |
| 146 var overlayModel = frame.resourceTreeModel().domModel().overlayModel(); |
| 147 overlayModel.highlightFrame(frame.id); |
| 148 } |
| 149 |
| 150 /** |
| 151 * @override |
| 152 * @param {number} itemIndex |
| 153 * @param {string} query |
| 154 * @param {!Element} titleElement |
| 155 * @param {!Element} subtitleElement |
| 156 */ |
| 157 renderItem(itemIndex, query, titleElement, subtitleElement) { |
| 158 var frame = this._items[itemIndex].frame; |
| 159 var indent = query ? 0 : (this._items[itemIndex].depth * 16); |
| 160 var padding = 24 + indent + 'px'; |
| 161 titleElement.textContent = frame.displayName(); |
| 162 subtitleElement.textContent = frame.securityOrigin; |
| 163 titleElement.style.paddingLeft = padding; |
| 164 subtitleElement.style.paddingLeft = padding; |
| 165 QuickOpen.FilteredListWidget.highlightRanges(titleElement, query, true); |
| 166 QuickOpen.FilteredListWidget.highlightRanges(subtitleElement, query, true); |
| 167 } |
| 168 |
| 169 /** |
| 170 * @override |
| 171 * @param {?number} itemIndex |
| 172 * @param {string} promptValue |
| 173 */ |
| 174 selectItem(itemIndex, promptValue) { |
| 175 if (itemIndex === null) |
| 176 return; |
| 177 var frame = this._items[itemIndex].frame; |
| 178 this._menu.selectFrame(frame); |
| 179 this._menu.dispatchEventToListeners(Resources.FrameMenu.Events.FrameSelected
, frame); |
| 180 } |
| 181 |
| 182 /** |
| 183 * @override |
| 184 * @return {boolean} |
| 185 */ |
| 186 renderAsTwoRows() { |
| 187 return true; |
| 188 } |
| 189 }; |
| 190 |
| 191 /** |
| 192 * @enum {symbol} |
| 193 */ |
| 194 Resources.FrameMenu.Events = { |
| 195 FrameSelected: Symbol('FrameSelected') |
| 196 }; |
OLD | NEW |