DevTools: Introduce ThreadsSidebar

BUG=

Review URL: https://codereview.chromium.org/449893002

git-svn-id: svn://svn.chromium.org/blink/trunk@179827 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/devtools.gypi

@@ -390,6 +390,7 @@
             'front_end/sources/SourcesView.js',
             'front_end/sources/StyleSheetOutlineDialog.js',
             'front_end/sources/TabbedEditorContainer.js',
+            'front_end/sources/ThreadsSidebarPane.js',
             'front_end/sources/UISourceCodeFrame.js',
             'front_end/sources/WatchExpressionsSidebarPane.js',
             'front_end/sources/WorkersSidebarPane.js',

third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js

@@ -44,6 +44,8 @@ importScript("StyleSheetOutlineDialog.js");
 importScript("TabbedEditorContainer.js");
 importScript("WatchExpressionsSidebarPane.js");
 importScript("WorkersSidebarPane.js");
+importScript("ThreadsSidebarPane.js");
+
 importScript("ScriptFormatterEditorAction.js");
 importScript("InplaceFormatterEditorAction.js");
 importScript("ScriptFormatter.js");
@@ -56,8 +58,9 @@ importScript("SourcesSearchScope.js");
 
 /**
  * @constructor
- * @implements {WebInspector.ContextMenu.Provider}
  * @extends {WebInspector.Panel}
+ * @implements {WebInspector.ContextMenu.Provider}
+ * @implements {WebInspector.TargetManager.Observer}
  * @param {!WebInspector.Workspace=} workspaceForTest
  */
 WebInspector.SourcesPanel = function(workspaceForTest)
@@ -70,9 +73,6 @@ WebInspector.SourcesPanel = function(workspaceForTest)
 
     this.debugToolbar = this._createDebugToolbar();
     this._debugToolbarDrawer = this._createDebugToolbarDrawer();
-    this._targetsToolbar = new WebInspector.StatusBarComboBox(null, "targets-select");
-    this._targetsToolbar.element.id = "targets-toolbar";
-    this._targetsComboBoxController = new WebInspector.TargetsComboBoxController(this._targetsToolbar.selectElement(), this._targetsToolbar.element);
 
     const initialDebugSidebarWidth = 225;
     this._splitView = new WebInspector.SplitView(true, true, "sourcesPanelSplitViewState", initialDebugSidebarWidth);
@@ -106,6 +106,7 @@ WebInspector.SourcesPanel = function(workspaceForTest)
     this._splitView.installResizer(this._debugSidebarResizeWidgetElement);
 
     this.sidebarPanes = {};
+    this.sidebarPanes.threads = new WebInspector.ThreadsSidebarPane();
     this.sidebarPanes.watchExpressions = new WebInspector.WatchExpressionsSidebarPane();
     this.sidebarPanes.callstack = new WebInspector.CallStackSidebarPane();
     this.sidebarPanes.callstack.addEventListener(WebInspector.CallStackSidebarPane.Events.CallFrameSelected, this._callFrameSelectedInSidebar.bind(this));
@@ -117,7 +118,7 @@ WebInspector.SourcesPanel = function(workspaceForTest)
     this.sidebarPanes.xhrBreakpoints = new WebInspector.XHRBreakpointsSidebarPane();
     this.sidebarPanes.eventListenerBreakpoints = new WebInspector.EventListenerBreakpointsSidebarPane();
 
-    if (!WebInspector.isWorkerFrontend())
+    if (!WebInspector.isWorkerFrontend() && !WebInspector.experimentsSettings.workersInMainWindow.isEnabled())
         this.sidebarPanes.workerList = new WebInspector.WorkersSidebarPane();
 
     this._extensionSidebarPanes = [];
@@ -140,6 +141,7 @@ WebInspector.SourcesPanel = function(workspaceForTest)
     WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.CallFrameSelected, this._callFrameSelected, this);
     WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.ConsoleCommandEvaluatedInSelectedCallFrame, this._consoleCommandEvaluatedInSelectedCallFrame, this);
     WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.GlobalObjectCleared, this._debuggerReset, this);
+    WebInspector.targetManager.observeTargets(this);
 }
 
 WebInspector.SourcesPanel.minToolbarWidth = 215;
@@ -1072,7 +1074,6 @@ WebInspector.SourcesPanel.prototype = {
         var vbox = new WebInspector.VBox();
         vbox.element.appendChild(this._debugToolbarDrawer);
         vbox.element.appendChild(this.debugToolbar);
-        vbox.element.appendChild(this._targetsToolbar.element);
         vbox.setMinimumAndPreferredSizes(25, 25, WebInspector.SourcesPanel.minToolbarWidth, 100);
         var sidebarPaneStack = new WebInspector.SidebarPaneStack();
         sidebarPaneStack.element.classList.add("flex-auto");
@@ -1083,13 +1084,13 @@ WebInspector.SourcesPanel.prototype = {
             for (var pane in this.sidebarPanes)
                 sidebarPaneStack.addPane(this.sidebarPanes[pane]);
             this._extensionSidebarPanesContainer = sidebarPaneStack;
-
             this.sidebarPaneView = vbox;
         } else {
             var splitView = new WebInspector.SplitView(true, true, "sourcesPanelDebuggerSidebarSplitViewState", 0.5);
             vbox.show(splitView.mainElement());
 
             // Populate the left stack.
+            sidebarPaneStack.addPane(this.sidebarPanes.threads);
             sidebarPaneStack.addPane(this.sidebarPanes.callstack);
             sidebarPaneStack.addPane(this.sidebarPanes.jsBreakpoints);
             sidebarPaneStack.addPane(this.sidebarPanes.domBreakpoints);
@@ -1110,11 +1111,12 @@ WebInspector.SourcesPanel.prototype = {
             this._extensionSidebarPanesContainer.addPane(this._extensionSidebarPanes[i]);
 
         this.sidebarPaneView.show(this._splitView.sidebarElement());
-
+        this.sidebarPanes.threads.expand();
         this.sidebarPanes.scopechain.expand();
         this.sidebarPanes.jsBreakpoints.expand();
         this.sidebarPanes.callstack.expand();
-
+        this._sidebarPaneStack = sidebarPaneStack;
+        this._updateTargetsSidebarVisibility();
         if (WebInspector.settings.watchExpressions.get().length > 0)
             this.sidebarPanes.watchExpressions.expand();
     },
@@ -1138,6 +1140,29 @@ WebInspector.SourcesPanel.prototype = {
         return this._sourcesView;
     },
 
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    targetAdded: function(target)
+    {
+        this._updateTargetsSidebarVisibility();
+    },
+
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    targetRemoved: function(target)
+    {
+        this._updateTargetsSidebarVisibility();
+    },
+
+    _updateTargetsSidebarVisibility: function()
+    {
+        if (!this._sidebarPaneStack)
+            return;
+        this._sidebarPaneStack.togglePaneHidden(this.sidebarPanes.threads, WebInspector.targetManager.targets().length < 2);
+    },
+
     __proto__: WebInspector.Panel.prototype
 }
 

third_party/WebKit/Source/devtools/front_end/sources/ThreadsSidebarPane.js

+// Copyright 2014 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.
+
+/**
+ * @constructor
+ * @extends {WebInspector.SidebarPane}
+ * @implements {WebInspector.TargetManager.Observer}
+ */
+WebInspector.ThreadsSidebarPane = function()
+{
+    WebInspector.SidebarPane.call(this, WebInspector.UIString("Threads"));
+    /** @type {!Map.<!WebInspector.Target, !WebInspector.Placard>} */
+    this._targetsToPlacards = new Map();
+    /** @type {!Map.<!WebInspector.Placard, !WebInspector.Target>} */
+    this._placardsToTargets = new Map();
+    /** @type {?WebInspector.Placard} */
+    this._selectedPlacard = null;
+    WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerPaused, this._onDebuggerStateChanged, this);
+    WebInspector.targetManager.addModelListener(WebInspector.DebuggerModel, WebInspector.DebuggerModel.Events.DebuggerResumed, this._onDebuggerStateChanged, this);
+    WebInspector.context.addFlavorChangeListener(WebInspector.Target, this._targetChanged, this);
+    WebInspector.targetManager.observeTargets(this);
+}
+
+WebInspector.ThreadsSidebarPane.prototype = {
+
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    targetAdded: function(target)
+    {
+        var placard = new WebInspector.Placard(WebInspector.displayNameForURL(target.name()), "");
+        placard.element.addEventListener("click", this._onPlacardClick.bind(this, placard), false);
+        var currentTarget = WebInspector.context.flavor(WebInspector.Target);
+        if (currentTarget === target)
+            this._selectPlacard(placard);
+
+        this._targetsToPlacards.put(target, placard);
+        this._placardsToTargets.put(placard, target);
+        this.bodyElement.appendChild(placard.element);
+        this._updateDebuggerState(target);
+    },
+
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    targetRemoved: function(target)
+    {
+        var placard = this._targetsToPlacards.remove(target);
+        this._placardsToTargets.remove(placard);
+        this.bodyElement.removeChild(placard.element);
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _targetChanged: function(event)
+    {
+        var newTarget = /** @type {?WebInspector.Target} */(event.data);
+        var placard =  /** @type {!WebInspector.Placard} */ (this._targetsToPlacards.get(newTarget));
+        this._selectPlacard(placard);
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onDebuggerStateChanged: function(event)
+    {
+        var debuggerModel = /** @type {!WebInspector.DebuggerModel} */ (event.target);
+        this._updateDebuggerState(debuggerModel.target());
+    },
+
+    /**
+     * @param {!WebInspector.Target} target
+     */
+    _updateDebuggerState: function(target)
+    {
+        var placard = this._targetsToPlacards.get(target);
+        placard.subtitle = target.debuggerModel.isPaused() ? WebInspector.UIString("Paused") : WebInspector.UIString("Running");
+    },
+
+    /**
+     * @param {!WebInspector.Placard} placard
+     */
+    _selectPlacard: function(placard)
+    {
+        if (placard === this._selectedPlacard)
+            return;
+
+        if (this._selectedPlacard)
+            this._selectedPlacard.selected = false;
+
+        this._selectedPlacard = placard;
+        placard.selected = true;
+    },
+
+    /**
+     * @param {!WebInspector.Placard} placard
+     */
+    _onPlacardClick: function(placard)
+    {
+        WebInspector.context.setFlavor(WebInspector.Target, this._placardsToTargets.get(placard));
+        placard.element.scrollIntoViewIfNeeded();
+    },
+
+
+    __proto__: WebInspector.SidebarPane.prototype
+}
\ No newline at end of file

third_party/WebKit/Source/devtools/front_end/ui/SidebarPane.js

@@ -159,6 +159,8 @@ WebInspector.SidebarPaneStack = function()
     WebInspector.View.call(this);
     this.setMinimumSize(25, 0);
     this.element.className = "sidebar-pane-stack"; // Override
+    /** @type {!Map.<!WebInspector.SidebarPane, !WebInspector.SidebarPaneTitle>} */
+    this._titleByPane = new Map();
 }
 
 WebInspector.SidebarPaneStack.prototype = {
@@ -167,7 +169,21 @@ WebInspector.SidebarPaneStack.prototype = {
      */
     addPane: function(pane)
     {
-        new WebInspector.SidebarPaneTitle(this.element, pane);
+        this._titleByPane.put(pane, new WebInspector.SidebarPaneTitle(this.element, pane));
+    },
+
+    /**
+     * @param {!WebInspector.SidebarPane} pane
+     * @param {boolean} hide
+     */
+    togglePaneHidden: function(pane, hide)
+    {
+        var title = this._titleByPane.get(pane);
+        if (!title)
+            return;
+
+        title.element.classList.toggle("hidden", hide);
+        pane.element.classList.toggle("hidden", hide);
     },
 
     __proto__: WebInspector.View.prototype

third_party/WebKit/Source/devtools/scripts/frontend_modules.json

@@ -289,6 +289,7 @@
             "sources/SourcesView.js",
             "sources/StyleSheetOutlineDialog.js",
             "sources/TabbedEditorContainer.js",
+            "sources/ThreadsSidebarPane.js",
             "sources/UISourceCodeFrame.js",
             "sources/WatchExpressionsSidebarPane.js",
             "sources/WorkersSidebarPane.js"