Bug 1183895 - Part 2: Add a toolbar button for toggling the promise debugger r=fitzgen

browser/devtools/debugger/debugger-controller.js

@@ -2186,7 +2186,8 @@ let Prefs = new ViewHelpers.Prefs("devtools", {
   autoPrettyPrint: ["Bool", "debugger.auto-pretty-print"],
   workersEnabled: ["Bool", "debugger.workers"],
   editorTabSize: ["Int", "editor.tabsize"],
-  autoBlackBox: ["Bool", "debugger.auto-black-box"]
+  autoBlackBox: ["Bool", "debugger.auto-black-box"],
+  promiseDebuggerEnabled: ["Bool", "debugger.promise"]
 });
 
 /**

browser/devtools/debugger/debugger-view.js

@@ -110,6 +110,7 @@ let DebuggerView = {
     this._workersAndSourcesPane = document.getElementById("workers-and-sources-pane");
     this._instrumentsPane = document.getElementById("instruments-pane");
     this._instrumentsPaneToggleButton = document.getElementById("instruments-pane-toggle");
+    this._promisePane = document.getElementById("promise-debugger-pane");
 
     this.showEditor = this.showEditor.bind(this);
     this.showBlackBoxMessage = this.showBlackBoxMessage.bind(this);
@@ -146,6 +147,7 @@ let DebuggerView = {
     this._workersAndSourcesPane = null;
     this._instrumentsPane = null;
     this._instrumentsPaneToggleButton = null;
+    this._promisePane = null;
   },
 
   /**

browser/devtools/debugger/debugger.xul

@@ -341,6 +341,11 @@
                 <toolbarbutton id="toggle-pause-exceptions"
                                class="devtools-toolbarbutton"
                                command="togglePauseOnExceptionsCommand"/>
+                <toolbarbutton id="toggle-promise-debugger"
+                               class="devtools-toolbarbutton"
+                               tooltiptext="&debuggerUI.sources.togglePromiseDebugger;"
+                               command="togglePromiseDebuggerCommand"
+                               hidden="true"/>
               </toolbar>
             </tabpanel>
             <tabpanel id="callstack-tabpanel">
@@ -397,7 +402,7 @@
         <splitter id="editor-and-promise-splitter"
                 class="devtools-horizontal-splitter"/>
         <vbox id="promise-debugger-pane"
-              flex="0"
+              flex="1"
               hidden="true">
         </vbox>
       </vbox>

browser/devtools/debugger/views/sources-view.js

@@ -151,6 +151,7 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
       prettyPrintCommand: () => this.togglePrettyPrint(),
       toggleBreakpointsCommand: () =>this.toggleBreakpoints(),
       togglePauseOnExceptionsCommand: () => this.togglePauseOnExceptions(),
+      togglePromiseDebuggerCommand: () => this.togglePromiseDebugger(),
       nextSourceCommand: () => this.selectNextItem(),
       prevSourceCommand: () => this.selectPrevItem()
     });
@@ -659,6 +660,13 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
     this._togglePauseOnExceptionsButton.setAttribute("state", state);
   },
 
+  togglePromiseDebugger: function() {
+    if (Prefs.promiseDebuggerEnabled) {
+      let promisePane = this.DebuggerView._promisePane;
+      promisePane.hidden = !promisePane.hidden;
+    }
+  },
+
   hidePrettyPrinting: function() {
     this._prettyPrintButton.style.display = 'none';
 

browser/locales/en-US/chrome/browser/devtools/debugger.dtd

@@ -50,6 +50,10 @@
   -  button that toggles all breakpoints for all sources. -->
 <!ENTITY debuggerUI.sources.toggleBreakpoints "Enable/disable all breakpoints">
 
+<!-- LOCALIZATION NOTE (debuggerUI.sources.togglePromiseDebugger): This is the
+  -  tooltip for the button that toggles the promise debugger. -->
+<!ENTITY debuggerUI.sources.togglePromiseDebugger "Toggle Promise Debugger">
+
 <!-- LOCALIZATION NOTE (debuggerUI.startTracing): This is the text displayed in
   - the button to start execution tracing. -->
 <!ENTITY debuggerUI.startTracing "Start Tracing">

browser/themes/shared/devtools/debugger.inc.css

@@ -122,6 +122,10 @@
   }
 }
 
+#toggle-promise-debugger {
+  /* TODO Bug 1186119: Add a toggle promise debugger image */
+}
+
 #sources-toolbar .devtools-toolbarbutton:not([label]) {
   -moz-image-region: rect(0px,16px,16px,0px);
 }