--- 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;
 });