DevTools: Add a checkbox to enable async stacks in the sidebar header.

Source/devtools/front_end/CallStackSidebarPane.js

Index: Source/devtools/front_end/CallStackSidebarPane.js
diff --git a/Source/devtools/front_end/CallStackSidebarPane.js b/Source/devtools/front_end/CallStackSidebarPane.js
index 12c73d2ecce9932635495f8228b4c472d294440e..a7b52bce76510192c1fe9ff01742f20c4607b6aa 100644
--- a/Source/devtools/front_end/CallStackSidebarPane.js
+++ b/Source/devtools/front_end/CallStackSidebarPane.js
@@ -32,6 +32,12 @@ WebInspector.CallStackSidebarPane = function()
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Call Stack"));
     this.bodyElement.addEventListener("keydown", this._keyDown.bind(this), true);
     this.bodyElement.tabIndex = 0;
+
+    var asyncCheckbox = this.titleElement.appendChild(WebInspector.SettingsTab.createSettingCheckbox(WebInspector.UIString("Async"), WebInspector.settings.enableAsyncStackTraces, true, undefined, WebInspector.UIString("Capture async stack traces")));
+    asyncCheckbox.classList.add("scripts-callstack-async");
+    asyncCheckbox.addEventListener("click", consumeEvent, false);
+
+    WebInspector.settings.enableAsyncStackTraces.addChangeListener(this._asyncStackTracesStateChanged, this);
 }
 
 WebInspector.CallStackSidebarPane.Events = {
@@ -57,35 +63,33 @@ WebInspector.CallStackSidebarPane.prototype = {
             return;
         }
 
-        this._appendSidebarPlacards(callFrames, this.bodyElement);
+        this._appendSidebarPlacards(callFrames);
 
         while (asyncStackTrace) {
-            var asyncPlacards = this._appendSidebarPlacards(asyncStackTrace.callFrames);
-            var group = new WebInspector.PlacardGroup(WebInspector.UIString("[Async Call]"), asyncPlacards);
-            group.element.addEventListener("contextmenu", this._placardContextMenu.bind(this, asyncPlacards[0]), true);
-            this.bodyElement.appendChild(group.element);
+            var asyncPlacard = new WebInspector.Placard(WebInspector.UIString("[Async Call]"), "");
+            this.bodyElement.appendChild(asyncPlacard.element);
+            this._appendSidebarPlacards(asyncStackTrace.callFrames, asyncPlacard);
             asyncStackTrace = asyncStackTrace.asyncStackTrace;
         }
     },
 
     /**
      * @param {!Array.<!WebInspector.DebuggerModel.CallFrame>} callFrames
-     * @param {!Element=} parentElement
-     * @return {!Array.<!WebInspector.CallStackSidebarPane.Placard>}
+     * @param {!WebInspector.Placard=} asyncPlacard
      */
-    _appendSidebarPlacards: function(callFrames, parentElement)
+    _appendSidebarPlacards: function(callFrames, asyncPlacard)
     {
-        var result = [];
         for (var i = 0, n = callFrames.length; i < n; ++i) {
-            var placard = new WebInspector.CallStackSidebarPane.Placard(callFrames[i]);
+            var placard = new WebInspector.CallStackSidebarPane.Placard(callFrames[i], asyncPlacard);
             placard.element.addEventListener("click", this._placardSelected.bind(this, placard), false);
             placard.element.addEventListener("contextmenu", this._placardContextMenu.bind(this, placard), true);
-            result.push(placard);
+            if (!i && asyncPlacard) {
+                asyncPlacard.element.addEventListener("click", this._placardSelected.bind(this, placard), false);
+                asyncPlacard.element.addEventListener("contextmenu", this._placardContextMenu.bind(this, placard), true);
+            }
             this.placards.push(placard);
-            if (parentElement)
-                parentElement.appendChild(placard.element);
+            this.bodyElement.appendChild(placard.element);
         }
-        return result;
     },
 
     /**
@@ -99,14 +103,6 @@ WebInspector.CallStackSidebarPane.prototype = {
             contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Restart frame" : "Restart Frame"), this._restartFrame.bind(this, placard));
 
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy stack trace" : "Copy Stack Trace"), this._copyStackTrace.bind(this));
-        contextMenu.appendSeparator();
-
-        var asyncStacksEnabled = WebInspector.settings.enableAsyncStackTraces.get();
-        if (asyncStacksEnabled)
-            contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Disable async stack traces" : "Disable Async Stack Traces"), this._enableAsyncStacks.bind(this, false));
-        else
-            contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Enable async stack traces" : "Enable Async Stack Traces"), this._enableAsyncStacks.bind(this, true));
-
         contextMenu.show();
     },
 
@@ -119,12 +115,31 @@ WebInspector.CallStackSidebarPane.prototype = {
         this.dispatchEventToListeners(WebInspector.CallStackSidebarPane.Events.CallFrameRestarted, placard._callFrame);
     },
 
-    /**
-     * @param {boolean} enable
-     */
-    _enableAsyncStacks: function(enable)
+    _asyncStackTracesStateChanged: function()
     {
-        WebInspector.settings.enableAsyncStackTraces.set(enable);
+        var enabled = WebInspector.settings.enableAsyncStackTraces.get();
+        if (!enabled && this.placards)
+            this._removeAsyncPlacards();
+    },
+
+    _removeAsyncPlacards: function()
+    {
+        var shouldSelectTopFrame = false;
+        var lastSyncPlacardIndex = -1;
+        for (var i = 0; i < this.placards.length; ++i) {
+            var placard = this.placards[i];
+            if (placard._asyncPlacard) {
+                if (placard.selected)
+                    shouldSelectTopFrame = true;
+                placard._asyncPlacard.element.remove();
+                placard.element.remove();
+            } else {
+                lastSyncPlacardIndex = i;
+            }
+        }
+        this.placards.length = lastSyncPlacardIndex + 1;
+        if (shouldSelectTopFrame)
+            this._selectPlacardByIndex(0);
     },
 
     /**
@@ -202,8 +217,8 @@ WebInspector.CallStackSidebarPane.prototype = {
     {
         var text = "";
         for (var i = 0; i < this.placards.length; ++i) {
-            if (i && this.placards[i].group() !== this.placards[i - 1].group())
-                text += this.placards[i].group().title() + "\n";
+            if (i && this.placards[i]._asyncPlacard !== this.placards[i - 1]._asyncPlacard)
+                text += this.placards[i]._asyncPlacard.title + "\n";
             text += this.placards[i].title + " (" + this.placards[i].subtitle + ")\n";
         }
         InspectorFrontendHost.copyText(text);
@@ -254,12 +269,14 @@ WebInspector.CallStackSidebarPane.prototype = {
  * @constructor
  * @extends {WebInspector.Placard}
  * @param {!WebInspector.DebuggerModel.CallFrame} callFrame
+ * @param {!WebInspector.Placard=} asyncPlacard
  */
-WebInspector.CallStackSidebarPane.Placard = function(callFrame)
+WebInspector.CallStackSidebarPane.Placard = function(callFrame, asyncPlacard)
 {
     WebInspector.Placard.call(this, callFrame.functionName || WebInspector.UIString("(anonymous function)"), "");
     callFrame.createLiveLocation(this._update.bind(this));
     this._callFrame = callFrame;
+    this._asyncPlacard = asyncPlacard;
 }
 
 WebInspector.CallStackSidebarPane.Placard.prototype = {