[DevTools] Introduce a sidebar with a drop-down

third_party/WebKit/Source/devtools/front_end/resources/FrameMenuSidebar.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.FrameMenuSidebar = class extends UI.VBox {
+  constructor() {
+    super();
+
+    this.registerRequiredCSS('resources/frameMenuSidebar.css');
+
+    this._frameMenu = new Resources.FrameMenu();
+    this.contentElement.appendChild(this._frameMenu.element);
+    this._frameMenu.selectRootFrame();
+
+    SDK.targetManager.addModelListener(
+        SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameDetached,
+        event => this._frameDetached(/** @type {!SDK.ResourceTreeFrame} */ (event.data)));
+  }
+
+  /**
+   * @param {!SDK.ResourceTreeFrame} frame
+   */
+  _frameDetached(frame) {
+    if (frame === this._frameMenu.selectedFrame())
+      this._frameMenu.selectRootFrame();

[dgozman, 2017/04/05 20:52:56]

I'd move this logic to FrameMenu instead.

[eostroukhov, 2017/05/03 00:33:47]

Done.

+  }
+
+  /**
+   * @param {!SDK.Resource} resource
+   * @param {number=} line
+   * @param {number=} column
+   * @return {boolean}
+   */
+  showResource(resource, line, column) {
+    // TODO (eostroukhov) Waiting till the resource tree is ported.
+    return true;
+  }
+};