DevTools: Show asynchronous call stacks on frontend.

Source/devtools/front_end/CallStackSidebarPane.js

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
@@ skipping 24 matching lines @@
 }
 
 WebInspector.CallStackSidebarPane.Events = {
     CallFrameRestarted: "CallFrameRestarted",
     CallFrameSelected: "CallFrameSelected"
 }
 
 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;
         /** @type {!Array.<!WebInspector.CallStackSidebarPane.Placard>} */
         this.placards = [];
 
         if (!callFrames) {
             var infoElement = this.bodyElement.createChild("div", "info");
             infoElement.textContent = WebInspector.UIString("Not Paused");
             return;
         }
 
         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();
     },
 
     /**
      * @param {!WebInspector.CallStackSidebarPane.Placard} placard
      */
     _restartFrame: function(placard)
     {
         placard._callFrame.restart();
         this.dispatchEventToListeners(WebInspector.CallStackSidebarPane.Events.CallFrameRestarted, placard._callFrame);
     },
 
     /**
-     * @param {!WebInspector.DebuggerModel.CallFrame} x
+     * @param {boolean} enable
+     */
+    _enableAsyncStacks: function(enable)
+    {
+        WebInspector.settings.enableAsyncStackTraces.set(enable);
+    },
+
+    /**
+     * @param {WebInspector.DebuggerModel.CallFrame} x
      */
     setSelectedCallFrame: function(x)
     {
         for (var i = 0; i < this.placards.length; ++i) {
             var placard = this.placards[i];
             placard.selected = (placard._callFrame === x);
         }
     },
 
     /**
@@ skipping 52 matching lines @@
      * @param {!WebInspector.CallStackSidebarPane.Placard} placard
      */
     _placardSelected: function(placard)
     {
         this.dispatchEventToListeners(WebInspector.CallStackSidebarPane.Events.CallFrameSelected, placard._callFrame);
     },
 
     _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);
     },
 
     /**
      * @param {function(!Array.<!WebInspector.KeyboardShortcut.Descriptor>, function(Event=):boolean)} registerShortcutDelegate
      */
     registerShortcuts: function(registerShortcutDelegate)
     {
         registerShortcutDelegate(WebInspector.SourcesPanelDescriptor.ShortcutKeys.NextCallFrame, this._selectNextCallFrameOnStack.bind(this));
         registerShortcutDelegate(WebInspector.SourcesPanelDescriptor.ShortcutKeys.PrevCallFrame, this._selectPreviousCallFrameOnStack.bind(this));
@@ skipping 47 matching lines @@
     /**
      * @param {!WebInspector.UILocation} uiLocation
      */
     _update: function(uiLocation)
     {
         this.subtitle = uiLocation.linkText().trimMiddle(100);
     },
 
     __proto__: WebInspector.Placard.prototype
 }