[DevTools] Introduce a sidebar with a drop-down

third_party/WebKit/Source/devtools/front_end/resources/FrameMenu.js

+// 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, preferably be consistent with
console execution context selector.

+    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')
+};