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

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 14 matching lines @@
 
 /**
  * @constructor
  * @extends {WebInspector.SidebarPane}
  */
 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("async");

[pfeldman, 2013/12/09 16:56:44]

Please use full-qualified styles: scripts-callstack-async

[aandrey, 2013/12/09 17:03:29]

Done.

+    asyncCheckbox.addEventListener("click", consumeEvent, false);
+
+    WebInspector.settings.enableAsyncStackTraces.addChangeListener(this._asyncStackTracesStateChanged, this);
 }
 
 WebInspector.CallStackSidebarPane.Events = {
     CallFrameRestarted: "CallFrameRestarted",
     CallFrameSelected: "CallFrameSelected"
 }
 
 WebInspector.CallStackSidebarPane.prototype = {
     /**
      * @param {?Array.<!WebInspector.DebuggerModel.CallFrame>} callFrames
      * @param {?WebInspector.DebuggerModel.StackTrace} asyncStackTrace
      */
     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);
+        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;
     },
 
     /**
      * @param {!WebInspector.CallStackSidebarPane.Placard} placard
      */
     _placardContextMenu: function(placard, event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
 
         if (!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 {boolean} enable
-     */
-    _enableAsyncStacks: function(enable)
+    _asyncStackTracesStateChanged: function()
     {
-        WebInspector.settings.enableAsyncStackTraces.set(enable);
+        var enabled = WebInspector.settings.enableAsyncStackTraces.get();
+        if (!enabled && this.placards.length)

[pfeldman, 2013/12/09 16:59:31]

this.placards is null here in case of no stack.

[aandrey, 2013/12/09 17:03:29]

Thanks! Done.

+            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);
     },
 
     /**
      * @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 57 matching lines @@
      */
     _placardSelected: function(placard)
     {
         this.dispatchEventToListeners(WebInspector.CallStackSidebarPane.Events.CallFrameSelected, placard._callFrame);
     },
 
     _copyStackTrace: function()
     {
         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);
     },
 
     /**
      * @param {function(!Array.<!WebInspector.KeyboardShortcut.Descriptor>, function(Event=):boolean)} registerShortcutDelegate
      */
     registerShortcuts: function(registerShortcutDelegate)
     {
@@ skipping 30 matching lines @@
         }
     },
 
     __proto__: WebInspector.SidebarPane.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 = {
     /**
      * @param {!WebInspector.UILocation} uiLocation
      */
     _update: function(uiLocation)
     {
         this.subtitle = uiLocation.linkText().trimMiddle(100);
     },
 
     __proto__: WebInspector.Placard.prototype
 }