Bug 766054 - [debugger] experiment with collapsed panels, r=rcampbell

browser/app/profile/firefox.js

@@ -1030,7 +1030,9 @@ pref("devtools.debugger.ui.height", 250);
 pref("devtools.debugger.ui.remote-win.width", 900);
 pref("devtools.debugger.ui.remote-win.height", 400);
 pref("devtools.debugger.ui.stackframes-width", 200);
+pref("devtools.debugger.ui.stackframes-pane-visible", true);
 pref("devtools.debugger.ui.variables-width", 300);
+pref("devtools.debugger.ui.variables-pane-visible", true);
 
 // Enable the style inspector
 pref("devtools.styleinspector.enabled", true);

browser/devtools/debugger/DebuggerUI.jsm

@@ -33,6 +33,7 @@ function DebuggerUI(aWindow) {
 }
 
 DebuggerUI.prototype = {
+
   /**
    * Update the status of tool's menuitems and buttons when
    * the user switch tabs.

browser/devtools/debugger/debugger-controller.js

@@ -50,6 +50,7 @@ let DebuggerController = {
     this._isInitialized = true;
     window.removeEventListener("DOMContentLoaded", this._startupDebugger, true);
 
+    DebuggerView.cacheView();
     DebuggerView.initializePanes();
     DebuggerView.initializeEditor(function() {
       DebuggerView.GlobalSearch.initialize();
@@ -1693,6 +1694,16 @@ XPCOMUtils.defineLazyGetter(L10N, "stringBundle", function() {
   return Services.strings.createBundle(DBG_STRINGS_URI);
 });
 
+const STACKFRAMES_WIDTH = "devtools.debugger.ui.stackframes-width";
+const STACKFRAMES_VISIBLE = "devtools.debugger.ui.stackframes-pane-visible";
+const VARIABLES_WIDTH = "devtools.debugger.ui.variables-width";
+const VARIABLES_PANE_VISIBLE = "devtools.debugger.ui.variables-pane-visible";
+const REMOTE_AUTO_CONNECT = "devtools.debugger.remote-autoconnect";
+const REMOTE_HOST = "devtools.debugger.remote-host";
+const REMOTE_PORT = "devtools.debugger.remote-port";
+const REMOTE_CONNECTION_RETRIES = "devtools.debugger.remote-connection-retries";
+const REMOTE_TIMEOUT = "devtools.debugger.remote-timeout";
+
 /**
  * Shortcuts for accessing various debugger preferences.
  */
@@ -1703,19 +1714,39 @@ let Prefs = {
    * @return number
    */
   get stackframesWidth() {
-    if (this._sfrmWidth === undefined) {
-      this._sfrmWidth = Services.prefs.getIntPref("devtools.debugger.ui.stackframes-width");
+    if (this._stackframesWidth === undefined) {
+      this._stackframesWidth = Services.prefs.getIntPref(STACKFRAMES_WIDTH);
     }
-    return this._sfrmWidth;
+    return this._stackframesWidth;
   },
 
   /**
    * Sets the preferred stackframes pane width.
-   * @return number
+   * @param number value
    */
   set stackframesWidth(value) {
-    Services.prefs.setIntPref("devtools.debugger.ui.stackframes-width", value);
-    this._sfrmWidth = value;
+    Services.prefs.setIntPref(STACKFRAMES_WIDTH, value);
+    this._stackframesWidth = value;
+  },
+
+  /**
+   * Gets the preferred stackframes pane visibility state.
+   * @return boolean
+   */
+  get stackframesPaneVisible() {
+    if (this._stackframesVisible === undefined) {
+      this._stackframesVisible = Services.prefs.getBoolPref(STACKFRAMES_VISIBLE);
+    }
+    return this._stackframesVisible;
+  },
+
+  /**
+   * Sets the preferred stackframes pane visibility state.
+   * @param boolean value
+   */
+  set stackframesPaneVisible(value) {
+    Services.prefs.setBoolPref(STACKFRAMES_VISIBLE, value);
+    this._stackframesVisible = value;
   },
 
   /**
@@ -1723,19 +1754,39 @@ let Prefs = {
    * @return number
    */
   get variablesWidth() {
-    if (this._varsWidth === undefined) {
-      this._varsWidth = Services.prefs.getIntPref("devtools.debugger.ui.variables-width");
+    if (this._variablesWidth === undefined) {
+      this._variablesWidth = Services.prefs.getIntPref(VARIABLES_WIDTH);
     }
-    return this._varsWidth;
+    return this._variablesWidth;
   },
 
   /**
    * Sets the preferred variables pane width.
-   * @return number
+   * @param number value
    */
   set variablesWidth(value) {
-    Services.prefs.setIntPref("devtools.debugger.ui.variables-width", value);
-    this._varsWidth = value;
+    Services.prefs.setIntPref(VARIABLES_WIDTH, value);
+    this._variablesWidth = value;
+  },
+
+  /**
+   * Gets the preferred variables pane visibility state.
+   * @return boolean
+   */
+  get variablesPaneVisible() {
+    if (this._variablesVisible === undefined) {
+      this._variablesVisible = Services.prefs.getBoolPref(VARIABLES_PANE_VISIBLE);
+    }
+    return this._variablesVisible;
+  },
+
+  /**
+   * Sets the preferred variables pane visibility state.
+   * @param boolean value
+   */
+  set variablesPaneVisible(value) {
+    Services.prefs.setBoolPref(VARIABLES_PANE_VISIBLE, value);
+    this._variablesVisible = value;
   },
 
   /**
@@ -1744,19 +1795,20 @@ let Prefs = {
    * @return boolean
    */
   get remoteAutoConnect() {
-    if (this._autoConn === undefined) {
-      this._autoConn = Services.prefs.getBoolPref("devtools.debugger.remote-autoconnect");
+    if (this._autoConnect === undefined) {
+      this._autoConnect = Services.prefs.getBoolPref(REMOTE_AUTO_CONNECT);
     }
-    return this._autoConn;
+    return this._autoConnect;
   },
 
   /**
-   * Sets a flag specifying if the the debugger should automatically connect.
+   * Sets a flag specifying if the the debugger should automatically connect to
+   * the default host and port number.
    * @param boolean value
    */
   set remoteAutoConnect(value) {
-    Services.prefs.setBoolPref("devtools.debugger.remote-autoconnect", value);
-    this._autoConn = value;
+    Services.prefs.setBoolPref(REMOTE_AUTO_CONNECT, value);
+    this._autoConnect = value;
   }
 };
 
@@ -1765,7 +1817,7 @@ let Prefs = {
  * @return string
  */
 XPCOMUtils.defineLazyGetter(Prefs, "remoteHost", function() {
-  return Services.prefs.getCharPref("devtools.debugger.remote-host");
+  return Services.prefs.getCharPref(REMOTE_HOST);
 });
 
 /**
@@ -1773,7 +1825,7 @@ XPCOMUtils.defineLazyGetter(Prefs, "remoteHost", function() {
  * @return number
  */
 XPCOMUtils.defineLazyGetter(Prefs, "remotePort", function() {
-  return Services.prefs.getIntPref("devtools.debugger.remote-port");
+  return Services.prefs.getIntPref(REMOTE_PORT);
 });
 
 /**
@@ -1781,7 +1833,7 @@ XPCOMUtils.defineLazyGetter(Prefs, "remotePort", function() {
  * @return number
  */
 XPCOMUtils.defineLazyGetter(Prefs, "remoteConnectionRetries", function() {
-  return Services.prefs.getIntPref("devtools.debugger.remote-connection-retries");
+  return Services.prefs.getIntPref(REMOTE_CONNECTION_RETRIES);
 });
 
 /**
@@ -1789,7 +1841,7 @@ XPCOMUtils.defineLazyGetter(Prefs, "remoteConnectionRetries", function() {
  * @return number
  */
 XPCOMUtils.defineLazyGetter(Prefs, "remoteTimeout", function() {
-  return Services.prefs.getIntPref("devtools.debugger.remote-timeout");
+  return Services.prefs.getIntPref(REMOTE_TIMEOUT);
 });
 
 /**

browser/devtools/debugger/debugger-view.js

@@ -27,15 +27,31 @@ let DebuggerView = {
    */
   editor: null,
 
+  /**
+   * Caches frequently used global view elements.
+   */
+  cacheView: function DV_cacheView() {
+    this._onTogglePanesButtonPressed = this._onTogglePanesButtonPressed.bind(this);
+
+    this._togglePanesButton = document.getElementById("toggle-panes");
+    this._stackframesAndBreakpoints = document.getElementById("stackframes+breakpoints");
+    this._stackframes = document.getElementById("stackframes");
+    this._breakpoints = document.getElementById("breakpoints");
+    this._variables = document.getElementById("variables");
+    this._globalSearch = document.getElementById("globalsearch");
+  },
+
   /**
    * Initializes UI properties for all the displayed panes.
    */
   initializePanes: function DV_initializePanes() {
-    let stackframes = document.getElementById("stackframes+breakpoints");
-    stackframes.setAttribute("width", Prefs.stackframesWidth);
+    this._togglePanesButton.addEventListener("click", this._onTogglePanesButtonPressed);
 
-    let variables = document.getElementById("variables");
-    variables.setAttribute("width", Prefs.variablesWidth);
+    this._stackframesAndBreakpoints.setAttribute("width", Prefs.stackframesWidth);
+    this._variables.setAttribute("width", Prefs.variablesWidth);
+
+    this.showStackframesAndBreakpointsPane(Prefs.stackframesPaneVisible);
+    this.showVariablesPane(Prefs.variablesPaneVisible);
   },
 
   /**
@@ -66,22 +82,16 @@ let DebuggerView = {
    * Removes the displayed panes and saves any necessary state.
    */
   destroyPanes: function DV_destroyPanes() {
-    let stackframes = document.getElementById("stackframes+breakpoints");
-    Prefs.stackframesWidth = stackframes.getAttribute("width");
+    this._togglePanesButton.removeEventListener("click", this._onTogglePanesButtonPressed);
 
-    let variables = document.getElementById("variables");
-    Prefs.variablesWidth = variables.getAttribute("width");
+    Prefs.stackframesWidth = this._stackframesAndBreakpoints.getAttribute("width");
+    Prefs.variablesWidth = this._variables.getAttribute("width");
 
-    let bkps = document.getElementById("breakpoints");
-    let frames = document.getElementById("stackframes");
-    bkps.parentNode.removeChild(bkps);
-    frames.parentNode.removeChild(frames);
-
-    stackframes.parentNode.removeChild(stackframes);
-    variables.parentNode.removeChild(variables);
-
-    let search = document.getElementById("globalsearch");
-    search.parentNode.removeChild(search);
+    this._breakpoints.parentNode.removeChild(this._breakpoints);
+    this._stackframes.parentNode.removeChild(this._stackframes);
+    this._stackframesAndBreakpoints.parentNode.removeChild(this._stackframesAndBreakpoints);
+    this._variables.parentNode.removeChild(this._variables);
+    this._globalSearch.parentNode.removeChild(this._globalSearch);
   },
 
   /**
@@ -101,13 +111,80 @@ let DebuggerView = {
     this.editor.focus();
   },
 
+  /**
+   * Called when the panes toggle button is clicked.
+   */
+  _onTogglePanesButtonPressed: function DV__onTogglePanesButtonPressed() {
+    this.showStackframesAndBreakpointsPane(
+      this._togglePanesButton.getAttribute("stackframesAndBreakpointsHidden"), true);
+
+    this.showVariablesPane(
+      this._togglePanesButton.getAttribute("variablesHidden"), true);
+  },
+
   /**
    * Sets the close button hidden or visible. It's hidden by default.
    * @param boolean aVisibleFlag
    */
   showCloseButton: function DV_showCloseButton(aVisibleFlag) {
     document.getElementById("close").setAttribute("hidden", !aVisibleFlag);
+  },
+
+  /**
+   * Sets the stackframes and breakpoints pane hidden or visible.
+   * @param boolean aVisibleFlag
+   * @param boolean aAnimatedFlag
+   */
+  showStackframesAndBreakpointsPane:
+  function DV_showStackframesAndBreakpointsPane(aVisibleFlag, aAnimatedFlag) {
+    if (aAnimatedFlag) {
+      this._stackframesAndBreakpoints.setAttribute("animated", "");
+    } else {
+      this._stackframesAndBreakpoints.removeAttribute("animated");
     }
+    if (aVisibleFlag) {
+      this._stackframesAndBreakpoints.style.marginLeft = "0";
+      this._togglePanesButton.removeAttribute("stackframesAndBreakpointsHidden");
+    } else {
+      let margin = parseInt(this._stackframesAndBreakpoints.getAttribute("width")) + 1;
+      this._stackframesAndBreakpoints.style.marginLeft = -margin + "px";
+      this._togglePanesButton.setAttribute("stackframesAndBreakpointsHidden", "true");
+    }
+    Prefs.stackframesPaneVisible = aVisibleFlag;
+  },
+
+  /**
+   * Sets the variable spane hidden or visible.
+   * @param boolean aVisibleFlag
+   * @param boolean aAnimatedFlag
+   */
+  showVariablesPane:
+  function DV_showVariablesPane(aVisibleFlag, aAnimatedFlag) {
+    if (aAnimatedFlag) {
+      this._variables.setAttribute("animated", "");
+    } else {
+      this._variables.removeAttribute("animated");
+    }
+    if (aVisibleFlag) {
+      this._variables.style.marginRight = "0";
+      this._togglePanesButton.removeAttribute("variablesHidden");
+    } else {
+      let margin = parseInt(this._variables.getAttribute("width")) + 1;
+      this._variables.style.marginRight = -margin + "px";
+      this._togglePanesButton.setAttribute("variablesHidden", "true");
+    }
+    Prefs.variablesPaneVisible = aVisibleFlag;
+  },
+
+  /**
+   * The cached global view elements.
+   */
+  _togglePanesButton: null,
+  _stackframesAndBreakpoints: null,
+  _stackframes: null,
+  _breakpoints: null,
+  _variables: null,
+  _globalSearch: null
 };
 
 /**

browser/devtools/debugger/debugger.xul

@@ -64,6 +64,9 @@
                      tooltiptext="&debuggerUI.closeButton.tooltip;"
                      class="devtools-closebutton"/>
 #endif
+      <toolbarbutton id="toggle-panes"
+                     class="devtools-toolbarbutton"
+                     tabindex="0"/>
       <hbox id="debugger-controls">
         <toolbarbutton id="resume"
                        class="devtools-toolbarbutton"

browser/devtools/debugger/test/Makefile.in

@@ -36,6 +36,7 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_propertyview-10.js \
 	browser_dbg_propertyview-edit.js \
 	$(warning browser_dbg_reload-same-script.js temporarily disabled due to oranges, see bug 780198 & bug 782179) \
+	browser_dbg_pane-collapse.js \
 	browser_dbg_panesize.js \
 	browser_dbg_panesize-inner.js \
 	browser_dbg_stack-01.js \

browser/devtools/debugger/test/browser_dbg_pane-collapse.js

@@ -0,0 +1,139 @@
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Tests that the debugger panes collapse properly.
+
+var gPane = null;
+var gTab = null;
+var gDebuggee = null;
+var gDebugger = null;
+var gView = null;
+
+function test() {
+  debug_tab_pane(STACK_URL, function(aTab, aDebuggee, aPane) {
+    gTab = aTab;
+    gDebuggee = aDebuggee;
+    gPane = aPane;
+    gDebugger = gPane.contentWindow;
+    gView = gDebugger.DebuggerView;
+
+    testPaneCollapse1();
+    testPaneCollapse2();
+    closeDebuggerAndFinish();
+  });
+}
+
+function testPaneCollapse1() {
+  let stackframesAndBrekpoints =
+    gDebugger.document.getElementById("stackframes+breakpoints");
+  let togglePanesButton =
+    gDebugger.document.getElementById("toggle-panes");
+
+  let width = parseInt(stackframesAndBrekpoints.getAttribute("width"));
+  is(width, gDebugger.Prefs.stackframesWidth,
+    "The stackframes and breakpoints pane has an incorrect width.");
+  is(stackframesAndBrekpoints.style.marginLeft, "0px",
+    "The stackframes and breakpoints pane has an incorrect initial left margin.");
+  ok(!stackframesAndBrekpoints.hasAttribute("animated"),
+    "The stackframes and breakpoints pane has an incorrect initial animated attribute.");
+  ok(!togglePanesButton.getAttribute("stackframesAndBreakpointsHidden"),
+    "The stackframes and breakpoints pane should initially be visible.");
+
+  is(gDebugger.Prefs.stackframesPaneVisible, true,
+    "The stackframes and breakpoints pane should initially be visible.");
+
+  gView.showStackframesAndBreakpointsPane(false, true);
+
+  is(gDebugger.Prefs.stackframesPaneVisible, false,
+    "The stackframes and breakpoints pane should be hidden after collapsing.");
+
+  let margin = -(width + 1) + "px";
+  is(width, gDebugger.Prefs.stackframesWidth,
+    "The stackframes and breakpoints pane has an incorrect width after collapsing.");
+  is(stackframesAndBrekpoints.style.marginLeft, margin,
+    "The stackframes and breakpoints pane has an incorrect left margin after collapsing.");
+  ok(stackframesAndBrekpoints.hasAttribute("animated"),
+    "The stackframes and breakpoints pane has an incorrect attribute after an animated collapsing.");
+  ok(togglePanesButton.hasAttribute("stackframesAndBreakpointsHidden"),
+    "The stackframes and breakpoints pane should not be visible after collapsing.");
+
+  is(gDebugger.Prefs.stackframesPaneVisible, false,
+    "The stackframes and breakpoints pane should be hidden before uncollapsing.");
+
+  gView.showStackframesAndBreakpointsPane(true, false);
+
+  is(gDebugger.Prefs.stackframesPaneVisible, true,
+    "The stackframes and breakpoints pane should be visible after uncollapsing.");
+
+  is(width, gDebugger.Prefs.stackframesWidth,
+    "The stackframes and breakpoints pane has an incorrect width after uncollapsing.");
+  is(stackframesAndBrekpoints.style.marginLeft, "0px",
+    "The stackframes and breakpoints pane has an incorrect left margin after uncollapsing.");
+  ok(!stackframesAndBrekpoints.hasAttribute("animated"),
+    "The stackframes and breakpoints pane has an incorrect attribute after an unanimated uncollapsing.");
+  ok(!togglePanesButton.getAttribute("stackframesAndBreakpointsHidden"),
+    "The stackframes and breakpoints pane should be visible again after uncollapsing.");
+}
+
+function testPaneCollapse2() {
+  let variables =
+    gDebugger.document.getElementById("variables");
+  let togglePanesButton =
+    gDebugger.document.getElementById("toggle-panes");
+
+  let width = parseInt(variables.getAttribute("width"));
+  is(width, gDebugger.Prefs.variablesWidth,
+    "The variables pane has an incorrect width.");
+  is(variables.style.marginRight, "0px",
+    "The variables pane has an incorrect initial right margin.");
+  ok(!variables.hasAttribute("animated"),
+    "The variables pane has an incorrect initial animated attribute.");
+  ok(!togglePanesButton.getAttribute("variablesHidden"),
+    "The variables pane should initially be visible.");
+
+  is(gDebugger.Prefs.variablesPaneVisible, true,
+    "The variables pane should initially be visible.");
+
+  gView.showVariablesPane(false, true);
+
+  is(gDebugger.Prefs.variablesPaneVisible, false,
+    "The variables pane should be hidden after collapsing.");
+
+  let margin = -(width + 1) + "px";
+  is(width, gDebugger.Prefs.variablesWidth,
+    "The variables pane has an incorrect width after collapsing.");
+  is(variables.style.marginRight, margin,
+    "The variables pane has an incorrect right margin after collapsing.");
+  ok(variables.hasAttribute("animated"),
+    "The variables pane has an incorrect attribute after an animated collapsing.");
+  ok(togglePanesButton.hasAttribute("variablesHidden"),
+    "The variables pane should not be visible after collapsing.");
+
+  is(gDebugger.Prefs.variablesPaneVisible, false,
+    "The variables pane should be hidden before uncollapsing.");
+
+  gView.showVariablesPane(true, false);
+
+  is(gDebugger.Prefs.variablesPaneVisible, true,
+    "The variables pane should be visible after uncollapsing.");
+
+  is(width, gDebugger.Prefs.variablesWidth,
+    "The variables pane has an incorrect width after uncollapsing.");
+  is(variables.style.marginRight, "0px",
+    "The variables pane has an incorrect right margin after uncollapsing.");
+  ok(!variables.hasAttribute("animated"),
+    "The variables pane has an incorrect attribute after an unanimated uncollapsing.");
+  ok(!togglePanesButton.getAttribute("variablesHidden"),
+    "The variables pane should be visible again after uncollapsing.");
+}
+
+registerCleanupFunction(function() {
+  removeTab(gTab);
+  gPane = null;
+  gTab = null;
+  gDebuggee = null;
+  gDebugger = null;
+  gView = null;
+});

browser/themes/gnomestripe/devtools/debugger.css

@@ -107,7 +107,20 @@
 }
 
 /**
- * Stack frames
+ * Stack frames and breakpoints panel
+ */
+
+#stackframes\+breakpoints {
+  background-color: white;
+  min-width: 50px;
+}
+
+#stackframes\+breakpoints[animated] {
+  -moz-transition: margin 0.25s ease-in-out;
+}
+
+/**
+ * Stack frames view
  */
 
 #stackframes {
@@ -146,6 +159,11 @@
 
 #variables {
   background-color: white;
+  min-width: 50px;
+}
+
+#variables[animated] {
+  -moz-transition: margin 0.25s ease-in-out;
 }
 
 /**
@@ -346,6 +364,22 @@
  * Toolbar Controls
  */
 
+#toggle-panes {
+  background: none;
+  border: none;
+  box-shadow: none;
+  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#toggle-panes:not([stackframesAndBreakpointsHidden]):not([variablesHidden]) {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
+}
+
+#toggle-panes:active {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
 #resume {
   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);

browser/themes/gnomestripe/jar.mn

@@ -154,6 +154,8 @@ browser.jar:
   skin/classic/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
   skin/classic/browser/devtools/layoutview.css        (devtools/layoutview.css)
   skin/classic/browser/devtools/layout-buttons.png    (devtools/layout-buttons.png)
+  skin/classic/browser/devtools/debugger-collapse.png  (devtools/debugger-collapse.png)
+  skin/classic/browser/devtools/debugger-expand.png    (devtools/debugger-expand.png)
   skin/classic/browser/devtools/debugger-pause.png     (devtools/debugger-pause.png)
   skin/classic/browser/devtools/debugger-play.png      (devtools/debugger-play.png)
   skin/classic/browser/devtools/debugger-step-in.png   (devtools/debugger-step-in.png)

browser/themes/pinstripe/devtools/debugger.css

@@ -109,7 +109,20 @@
 }
 
 /**
- * Stack frames
+ * Stack frames and breakpoints panel
+ */
+
+#stackframes\+breakpoints {
+  background-color: white;
+  min-width: 50px;
+}
+
+#stackframes\+breakpoints[animated] {
+  -moz-transition: margin 0.25s ease-in-out;
+}
+
+/**
+ * Stack frames view
  */
 
 #stackframes {
@@ -148,6 +161,11 @@
 
 #variables {
   background-color: white;
+  min-width: 50px;
+}
+
+#variables[animated] {
+  -moz-transition: margin 0.25s ease-in-out;
 }
 
 /**
@@ -346,6 +364,22 @@
  * Toolbar Controls
  */
 
+#toggle-panes {
+  background: none;
+  border: none;
+  box-shadow: none;
+  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#toggle-panes:not([stackframesAndBreakpointsHidden]):not([variablesHidden]) {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
+}
+
+#toggle-panes:active {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
 #resume {
   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);

browser/themes/pinstripe/jar.mn

@@ -195,6 +195,8 @@ browser.jar:
   skin/classic/browser/devtools/layout-background-grid.png  (devtools/layout-background-grid.png)
   skin/classic/browser/devtools/layoutview.css              (devtools/layoutview.css)
   skin/classic/browser/devtools/layout-buttons.png          (devtools/layout-buttons.png)
+  skin/classic/browser/devtools/debugger-collapse.png       (devtools/debugger-collapse.png)
+  skin/classic/browser/devtools/debugger-expand.png         (devtools/debugger-expand.png)
   skin/classic/browser/devtools/debugger-pause.png          (devtools/debugger-pause.png)
   skin/classic/browser/devtools/debugger-play.png           (devtools/debugger-play.png)
   skin/classic/browser/devtools/debugger-step-in.png        (devtools/debugger-step-in.png)

browser/themes/winstripe/devtools/debugger.css

@@ -115,7 +115,20 @@
 }
 
 /**
- * Stack frames
+ * Stack frames and breakpoints panel
+ */
+
+#stackframes\+breakpoints {
+  background-color: white;
+  min-width: 50px;
+}
+
+#stackframes\+breakpoints[animated] {
+  -moz-transition: margin 0.25s ease-in-out;
+}
+
+/**
+ * Stack frames view
  */
 
 #stackframes {
@@ -154,6 +167,11 @@
 
 #variables {
   background-color: white;
+  min-width: 50px;
+}
+
+#variables[animated] {
+  -moz-transition: margin 0.25s ease-in-out;
 }
 
 /**
@@ -357,6 +375,26 @@
  * Toolbar Controls
  */
 
+#toggle-panes {
+  background: none;
+  border: none;
+  box-shadow: none;
+  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#toggle-panes:not([stackframesAndBreakpointsHidden]):not([variablesHidden]) {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
+}
+
+#toggle-panes:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#toggle-panes:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
 #resume {
   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);

browser/themes/winstripe/jar.mn

@@ -182,6 +182,8 @@ browser.jar:
         skin/classic/browser/devtools/layout-background-grid.png    (devtools/layout-background-grid.png)
         skin/classic/browser/devtools/layoutview.css                (devtools/layoutview.css)
         skin/classic/browser/devtools/layout-buttons.png            (devtools/layout-buttons.png)
+        skin/classic/browser/devtools/debugger-collapse.png         (devtools/debugger-collapse.png)
+        skin/classic/browser/devtools/debugger-expand.png           (devtools/debugger-expand.png)
         skin/classic/browser/devtools/debugger-pause.png            (devtools/debugger-pause.png)
         skin/classic/browser/devtools/debugger-play.png             (devtools/debugger-play.png)
         skin/classic/browser/devtools/debugger-step-in.png          (devtools/debugger-step-in.png)
@@ -385,6 +387,8 @@ browser.jar:
         skin/classic/aero/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
         skin/classic/aero/browser/devtools/layoutview.css            (devtools/layoutview.css)
         skin/classic/aero/browser/devtools/layout-buttons.png        (devtools/layout-buttons.png)
+        skin/classic/aero/browser/devtools/debugger-collapse.png     (devtools/debugger-collapse.png)
+        skin/classic/aero/browser/devtools/debugger-expand.png       (devtools/debugger-expand.png)
         skin/classic/aero/browser/devtools/debugger-pause.png        (devtools/debugger-pause.png)
         skin/classic/aero/browser/devtools/debugger-play.png         (devtools/debugger-play.png)
         skin/classic/aero/browser/devtools/debugger-step-in.png      (devtools/debugger-step-in.png)