Bug 1183895 - Part 1: Add a new pane for the promise debugger r=fitzgen
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 21 Jul 2015 17:05:23 -0700
changeset 253994 53e21aef23f67f606c266bb5b8fea4abf8be8717
parent 253993 abe958c2ca538723ac9ab4782023871258dcd789
child 253995 f51edb65dfa490d3f715e4d1e6fdab51fbafd6f6
push id29086
push usercbook@mozilla.com
push dateWed, 22 Jul 2015 11:57:13 +0000
treeherdermozilla-central@954706e7611c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfitzgen
bugs1183895
milestone42.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1183895 - Part 1: Add a new pane for the promise debugger r=fitzgen
browser/devtools/debugger/debugger-view.js
browser/devtools/debugger/debugger.xul
browser/devtools/debugger/test/browser_dbg_host-layout.js
--- a/browser/devtools/debugger/debugger-view.js
+++ b/browser/devtools/debugger/debugger-view.js
@@ -596,17 +596,16 @@ let DebuggerView = {
     this._body.setAttribute("layout", newLayout);
     window.emit(EVENTS.LAYOUT_CHANGED, newLayout);
   },
 
   /**
    * Switches the debugger widgets to a horizontal layout.
    */
   _enterVerticalLayout: function() {
-    let normContainer = document.getElementById("debugger-widgets");
     let vertContainer = document.getElementById("vertical-layout-panes-container");
 
     // Move the soruces and instruments panes in a different container.
     let splitter = document.getElementById("sources-and-instruments-splitter");
     vertContainer.insertBefore(this._workersAndSourcesPane, splitter);
     vertContainer.appendChild(this._instrumentsPane);
 
     // Make sure the vertical layout container's height doesn't repeatedly
@@ -615,23 +614,23 @@ let DebuggerView = {
       vertContainer.getBoundingClientRect().height);
   },
 
   /**
    * Switches the debugger widgets to a vertical layout.
    */
   _enterHorizontalLayout: function() {
     let normContainer = document.getElementById("debugger-widgets");
-    let vertContainer = document.getElementById("vertical-layout-panes-container");
+    let editorPane = document.getElementById("editor-and-instruments-pane");
 
     // The sources and instruments pane need to be inserted at their
     // previous locations in their normal container.
     let splitter = document.getElementById("sources-and-editor-splitter");
     normContainer.insertBefore(this._workersAndSourcesPane, splitter);
-    normContainer.appendChild(this._instrumentsPane);
+    editorPane.appendChild(this._instrumentsPane);
 
     // Revert to the preferred sources and instruments widths, because
     // they flexed in the vertical layout.
     this._workersAndSourcesPane.setAttribute("width", Prefs.workersAndSourcesWidth);
     this._instrumentsPane.setAttribute("width", Prefs.instrumentsWidth);
   },
 
   /**
--- a/browser/devtools/debugger/debugger.xul
+++ b/browser/devtools/debugger/debugger.xul
@@ -346,56 +346,66 @@
             <tabpanel id="callstack-tabpanel">
               <vbox id="callstack-list" flex="1"/>
             </tabpanel>
           </tabpanels>
         </tabbox>
       </vbox>
       <splitter id="sources-and-editor-splitter"
                 class="devtools-side-splitter"/>
-      <deck id="editor-deck" flex="1" class="devtools-main-content">
-        <vbox id="editor"/>
-        <vbox id="black-boxed-message"
-              align="center"
-              pack="center">
-          <description id="black-boxed-message-label">
-            &debuggerUI.blackBoxMessage.label;
-          </description>
-          <button id="black-boxed-message-button"
-                  class="devtools-toolbarbutton"
-                  label="&debuggerUI.blackBoxMessage.unBlackBoxButton;"
-                  command="unBlackBoxCommand"/>
+      <vbox id="debugger-content" flex="1">
+        <hbox id="editor-and-instruments-pane" flex="1">
+          <deck id="editor-deck" flex="1" class="devtools-main-content">
+            <vbox id="editor"/>
+            <vbox id="black-boxed-message"
+                  align="center"
+                  pack="center">
+              <description id="black-boxed-message-label">
+                &debuggerUI.blackBoxMessage.label;
+              </description>
+              <button id="black-boxed-message-button"
+                      class="devtools-toolbarbutton"
+                      label="&debuggerUI.blackBoxMessage.unBlackBoxButton;"
+                      command="unBlackBoxCommand"/>
+            </vbox>
+            <html:div id="source-progress-container"
+                      align="center">
+              <html:div id="hbox">
+                <html:progress id="source-progress"></html:progress>
+              </html:div>
+            </html:div>
+          </deck>
+          <splitter id="editor-and-instruments-splitter"
+                    class="devtools-side-splitter"/>
+          <tabbox id="instruments-pane"
+                  class="devtools-sidebar-tabs"
+                  hidden="true">
+            <tabs>
+              <tab id="variables-tab" label="&debuggerUI.tabs.variables;"/>
+              <tab id="events-tab" label="&debuggerUI.tabs.events;"/>
+            </tabs>
+            <tabpanels flex="1">
+              <tabpanel id="variables-tabpanel">
+                <vbox id="expressions"/>
+                <splitter class="devtools-horizontal-splitter"/>
+                <vbox id="variables" flex="1"/>
+              </tabpanel>
+              <tabpanel id="events-tabpanel">
+                <vbox id="event-listeners" flex="1"/>
+              </tabpanel>
+            </tabpanels>
+          </tabbox>
+        </hbox>
+        <splitter id="editor-and-promise-splitter"
+                class="devtools-horizontal-splitter"/>
+        <vbox id="promise-debugger-pane"
+              flex="0"
+              hidden="true">
         </vbox>
-        <html:div id="source-progress-container"
-                  align="center">
-          <html:div id="hbox">
-            <html:progress id="source-progress"></html:progress>
-          </html:div>
-        </html:div>
-      </deck>
-      <splitter id="editor-and-instruments-splitter"
-                class="devtools-side-splitter"/>
-      <tabbox id="instruments-pane"
-              class="devtools-sidebar-tabs"
-              hidden="true">
-        <tabs>
-          <tab id="variables-tab" label="&debuggerUI.tabs.variables;"/>
-          <tab id="events-tab" label="&debuggerUI.tabs.events;"/>
-        </tabs>
-        <tabpanels flex="1">
-          <tabpanel id="variables-tabpanel">
-            <vbox id="expressions"/>
-            <splitter class="devtools-horizontal-splitter"/>
-            <vbox id="variables" flex="1"/>
-          </tabpanel>
-          <tabpanel id="events-tabpanel">
-            <vbox id="event-listeners" flex="1"/>
-          </tabpanel>
-        </tabpanels>
-      </tabbox>
+      </vbox>
       <splitter id="vertical-layout-splitter"
                 class="devtools-horizontal-splitter"/>
       <hbox id="vertical-layout-panes-container">
         <splitter id="sources-and-instruments-splitter"
                   class="devtools-side-splitter"/>
         <!-- The sources-pane and instruments-pane will be moved in this
              container if the toolbox's host requires it. -->
       </hbox>
--- a/browser/devtools/debugger/test/browser_dbg_host-layout.js
+++ b/browser/devtools/debugger/test/browser_dbg_host-layout.js
@@ -68,37 +68,55 @@ function testHost(aTab, aPanel, aHostTyp
     "The default host type should've been set on the panel window (2).");
 
   is(gView._body.getAttribute("layout"), aLayoutType,
     "The default host type is present as an attribute on the panel's body.");
 
   if (aLayoutType == "horizontal") {
     is(gView._workersAndSourcesPane.parentNode.id, "debugger-widgets",
       "The workers and sources pane's parent is correct for the horizontal layout.");
-    is(gView._instrumentsPane.parentNode.id, "debugger-widgets",
+    is(gView._instrumentsPane.parentNode.id, "editor-and-instruments-pane",
       "The instruments pane's parent is correct for the horizontal layout.");
+    is(gDebugger.document.getElementById("promise-debugger-pane").parentNode.id,
+      "debugger-content",
+      "The promise pane's parent is correct for the horizontal layout.");
   } else {
     is(gView._workersAndSourcesPane.parentNode.id, "vertical-layout-panes-container",
       "The workers and sources pane's parent is correct for the vertical layout.");
     is(gView._instrumentsPane.parentNode.id, "vertical-layout-panes-container",
       "The instruments pane's parent is correct for the vertical layout.");
+    is(gDebugger.document.getElementById("promise-debugger-pane").parentNode.id,
+      "debugger-content",
+      "The promise pane's parent is correct for the horizontal layout.");
   }
 
   let widgets = gDebugger.document.getElementById("debugger-widgets").childNodes;
-  let panes = gDebugger.document.getElementById("vertical-layout-panes-container").childNodes;
+  let content = gDebugger.document.getElementById("debugger-content").childNodes;
+  let editorPane =
+    gDebugger.document.getElementById("editor-and-instruments-pane").childNodes;
+  let verticalPane =
+    gDebugger.document.getElementById("vertical-layout-panes-container").childNodes;
 
   if (aLayoutType == "horizontal") {
-    is(widgets.length, 7, // 2 panes, 1 editor, 3 splitters and a phantom box.
+    is(widgets.length, 5, // 1 pane, 1 content box, 2 splitters and a phantom box.
       "Found the correct number of debugger widgets.");
-    is(panes.length, 1, // 1 lonely splitter in the phantom box.
+    is(content.length, 3, // 2 panes, 1 splitter.
+      "Found the correct number of debugger content.");
+    is(editorPane.length, 3, // 2 panes, 1 splitter
+      "Found the correct number of debugger panes.");
+    is(verticalPane.length, 1, // 1 lonely splitter in the phantom box.
       "Found the correct number of debugger panes.");
   } else {
-    is(widgets.length, 5, // 1 editor, 3 splitters and a phantom box.
+    is(widgets.length, 4, // 1 content box, 2 splitters and a phantom box.
       "Found the correct number of debugger widgets.");
-    is(panes.length, 3, // 2 panes and 1 splitter in the phantom box.
+    is(content.length, 3, // 2 panes, 1 splitter.
+      "Found the correct number of debugger content.");
+    is(editorPane.length, 2, // 1 pane, 1 splitter
+      "Found the correct number of debugger panes.");
+    is(verticalPane.length, 3, // 2 panes and 1 splitter in the phantom box.
       "Found the correct number of debugger panes.");
   }
 }
 
 registerCleanupFunction(function() {
   Services.prefs.setCharPref("devtools.toolbox.host", gDefaultHostType);
   gDefaultHostType = null;
 });