DevTools: Show asynchronous call stacks on frontend.

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 02d4004aafc5a3c6fe5f0cc14652f60a175e520d..4b40b63b79bd518ed421687b2e35a7ed2a52df4d 100644
--- a/Source/devtools/front_end/CallStackSidebarPane.js
+++ b/Source/devtools/front_end/CallStackSidebarPane.js
@@ -42,8 +42,9 @@ WebInspector.CallStackSidebarPane.Events = {
 WebInspector.CallStackSidebarPane.prototype = {
     /**
      * @param {?Array.<!WebInspector.DebuggerModel.CallFrame>} callFrames
+     * @param {?WebInspector.DebuggerModel.StackTrace} asyncStackTrace
      */
-    update: function(callFrames)
+    update: function(callFrames, asyncStackTrace)
     {
         this.bodyElement.removeChildren();
         delete this._statusMessageElement;
@@ -57,35 +58,55 @@ WebInspector.CallStackSidebarPane.prototype = {
         }
 
         this._appendSidebarPlacards(callFrames, this.bodyElement);
+
+        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, null), true);
+            this.bodyElement.appendChild(group.element);
+            asyncStackTrace = asyncStackTrace.asyncStackTrace;
+        }
     },
 
     /**
      * @param {!Array.<!WebInspector.DebuggerModel.CallFrame>} callFrames
      * @param {!Element=} parentElement
+     * @return {!Array.<!WebInspector.CallStackSidebarPane.Placard>}
      */
     _appendSidebarPlacards: function(callFrames, parentElement)
     {
+        var result = [];
         for (var i = 0, n = callFrames.length; i < n; ++i) {
             var placard = new WebInspector.CallStackSidebarPane.Placard(callFrames[i]);
             placard.element.addEventListener("click", this._placardSelected.bind(this, placard), false);
             placard.element.addEventListener("contextmenu", this._placardContextMenu.bind(this, placard), true);
+            result.push(placard);
             this.placards.push(placard);
             if (parentElement)
                 parentElement.appendChild(placard.element);
         }
+        return result;
     },
 
     /**
-     * @param {!WebInspector.CallStackSidebarPane.Placard} placard
+     * @param {?WebInspector.CallStackSidebarPane.Placard} placard

[yurys, 2013/12/06 12:36:54]

Isn't placart === null <==> placard._callFrame.isAsync() ? I mean that you could
always bind _placardContextMenu to actual placard and check for
placard._callFrame.isAsync().

[aandrey, 2013/12/06 16:09:24]

Done.

      */
     _placardContextMenu: function(placard, event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
 
-        if (WebInspector.debuggerModel.canSetScriptSource())
+        if (placard && !placard._callFrame.isAsync() && WebInspector.debuggerModel.canSetScriptSource())
             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();
     },
 
@@ -99,7 +120,15 @@ WebInspector.CallStackSidebarPane.prototype = {
     },
 
     /**
-     * @param {!WebInspector.DebuggerModel.CallFrame} x
+     * @param {boolean} enable
+     */
+    _enableAsyncStacks: function(enable)
+    {
+        WebInspector.settings.enableAsyncStackTraces.set(enable);
+    },
+
+    /**
+     * @param {WebInspector.DebuggerModel.CallFrame} x
      */
     setSelectedCallFrame: function(x)
     {
@@ -172,8 +201,11 @@ WebInspector.CallStackSidebarPane.prototype = {
     _copyStackTrace: function()
     {
         var text = "";
-        for (var i = 0; i < this.placards.length; ++i)
+        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";
             text += this.placards[i].title + " (" + this.placards[i].subtitle + ")\n";
+        }
         InspectorFrontendHost.copyText(text);
     },