Bug 804575 - Implement a way of keeping the debugger panes always visible, r=past

browser/app/profile/firefox.js

@@ -1035,9 +1035,8 @@ 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);
+pref("devtools.debugger.ui.panes-visible-on-startup", false);
 pref("devtools.debugger.ui.non-enum-visible", true);
 
 // Enable the style inspector

browser/devtools/debugger/debugger-controller.js

@@ -1198,9 +1198,8 @@ XPCOMUtils.defineLazyGetter(L10N, "ellipsis", function() {
 });
 
 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 PANES_VISIBLE_ON_STARTUP = "devtools.debugger.ui.panes-visible-on-startup";
 const NON_ENUM_VISIBLE = "devtools.debugger.ui.non-enum-visible";
 const REMOTE_AUTO_CONNECT = "devtools.debugger.remote-autoconnect";
 const REMOTE_HOST = "devtools.debugger.remote-host";
@@ -1232,26 +1231,6 @@ let Prefs = {
     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;
-  },
-
   /**
    * Gets the preferred variables pane width.
    * @return number
@@ -1272,26 +1251,6 @@ let Prefs = {
     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;
-  },
-
   /**
    * Gets a flag specifying if the debugger should automatically connect to
    * the default host and port number.
@@ -1314,6 +1273,26 @@ let Prefs = {
     this._autoConnect = value;
   },
 
+  /**
+   * Gets the preferred panes visibility state on startup.
+   * @return boolean
+   */
+  get panesVisibleOnStartup() {
+    if (this._panesVisible === undefined) {
+      this._panesVisible = Services.prefs.getBoolPref(PANES_VISIBLE_ON_STARTUP);
+    }
+    return this._panesVisible;
+  },
+
+  /**
+   * Sets the preferred panes visibility state on startup.
+   * @param boolean value
+   */
+  set panesVisibleOnStartup(value) {
+    Services.prefs.setBoolPref(PANES_VISIBLE_ON_STARTUP, value);
+    this._panesVisible = value;
+  },
+
   /**
    * Gets a flag specifying if the debugger should show non-enumerable
    * properties and variables in the scope view.

browser/devtools/debugger/debugger-panes.js

@@ -57,7 +57,7 @@ create({ constructor: StackFramesView, proto: MenuContainer.prototype }, {
   addFrame:
   function DVSF_addFrame(aFrameName, aFrameDetails, aDepth, aOptions = {}) {
     // Stackframes are UI elements which benefit from visible panes.
-    DebuggerView.showPanesIfPreffered();
+    DebuggerView.showPanesSoon();
 
     // Append a stackframe item to this container.
     let stackframeItem = this.push(aFrameName, aFrameDetails, {

browser/devtools/debugger/debugger-toolbar.js

@@ -134,8 +134,7 @@ ToolbarView.prototype = {
   _onTogglePanesPressed: function DVT__onTogglePanesPressed() {
     DebuggerView.togglePanes({
       visible: DebuggerView.panesHidden,
-      animated: true,
-      silent: true
+      animated: true
     });
   },
 
@@ -197,7 +196,8 @@ ToolbarView.prototype = {
  */
 function OptionsView() {
   dumpn("OptionsView was instantiated");
-  this._togglePOE = this._togglePOE.bind(this);
+  this._togglePauseOnExceptions = this._togglePauseOnExceptions.bind(this);
+  this._toggleShowPanesOnStartup = this._toggleShowPanesOnStartup.bind(this);
   this._toggleShowNonEnum = this._toggleShowNonEnum.bind(this);
 }
 
@@ -208,10 +208,12 @@ OptionsView.prototype = {
   initialize: function DVO_initialize() {
     dumpn("Initializing the OptionsView");
     this._button = document.getElementById("debugger-options");
-    this._poeItem = document.getElementById("pause-on-exceptions");
+    this._pauseOnExceptionsItem = document.getElementById("pause-on-exceptions");
+    this._showPanesOnStartupItem = document.getElementById("show-panes-on-startup");
     this._showNonEnumItem = document.getElementById("show-nonenum");
 
-    this._poeItem.setAttribute("checked", "false");
+    this._pauseOnExceptionsItem.setAttribute("checked", "false");
+    this._showPanesOnStartupItem.setAttribute("checked", Prefs.panesVisibleOnStartup);
     this._showNonEnumItem.setAttribute("checked", Prefs.nonEnumVisible);
   },
 
@@ -220,6 +222,7 @@ OptionsView.prototype = {
    */
   destroy: function DVO_destroy() {
     dumpn("Destroying the OptionsView");
+    // Nothing to do here yet.
   },
 
   /**
@@ -237,15 +240,23 @@ OptionsView.prototype = {
   },
 
   /**
-   * Listener handling the 'pause on exceptions' checkbox click event.
+   * Listener handling the 'pause on exceptions' menuitem command.
    */
-  _togglePOE: function DVO__togglePOE() {
+  _togglePauseOnExceptions: function DVO__togglePauseOnExceptions() {
     DebuggerController.activeThread.pauseOnExceptions(
-      this._poeItem.getAttribute("checked") == "true");
+      this._pauseOnExceptionsItem.getAttribute("checked") == "true");
   },
 
   /**
-   * Listener handling the 'show non-enumerables' checkbox click event.
+   * Listener handling the 'show panes on startup' menuitem command.
+   */
+  _toggleShowPanesOnStartup: function DVO__toggleShowPanesOnStartup() {
+    Prefs.panesVisibleOnStartup =
+      this._showPanesOnStartupItem.getAttribute("checked") == "true";
+  },
+
+  /**
+   * Listener handling the 'show non-enumerables' menuitem command.
    */
   _toggleShowNonEnum: function DVO__toggleShowNonEnum() {
     DebuggerView.Variables.nonEnumVisible = Prefs.nonEnumVisible =
@@ -253,7 +264,8 @@ OptionsView.prototype = {
   },
 
   _button: null,
-  _poeItem: null,
+  _pauseOnExceptionsItem: null,
+  _showPanesOnStartupItem: null,
   _showNonEnumItem: null
 };
 

browser/devtools/debugger/debugger-view.js

@@ -81,7 +81,10 @@ let DebuggerView = {
 
     this._stackframesAndBreakpoints.setAttribute("width", Prefs.stackframesWidth);
     this._variables.setAttribute("width", Prefs.variablesWidth);
-    this.togglePanes({ visible: false, animated: false, silent: true });
+    this.togglePanes({
+      visible: Prefs.panesVisibleOnStartup,
+      animated: false
+    });
   },
 
   /**
@@ -318,21 +321,7 @@ let DebuggerView = {
    * @return boolean
    */
   get panesHidden()
-    this.stackframesAndBreakpointsHidden && this.variablesHidden,
-
-  /**
-   * Gets the visibility state of the stackframes and breakpoints pane.
-   * @return boolean
-   */
-  get stackframesAndBreakpointsHidden()
-    !!this._togglePanesButton.getAttribute("stackframesAndBreakpointsHidden"),
-
-  /**
-   * Gets the visibility state of the varialbes pane.
-   * @return boolean
-   */
-  get variablesHidden()
-    !!this._togglePanesButton.getAttribute("variablesHidden"),
+    this._togglePanesButton.hasAttribute("panesHidden"),
 
   /**
    * Sets all the panes hidden or visible.
@@ -341,102 +330,57 @@ let DebuggerView = {
    *        An object containing some of the following boolean properties:
    *        - visible: true if the pane should be shown, false for hidden
    *        - animated: true to display an animation on toggle
-   *        - silent: true to not update any designated prefs
    */
   togglePanes: function DV__togglePanes(aFlags = {}) {
-    this._toggleStackframesAndBreakpointsPane(aFlags);
-    this._toggleVariablesPane(aFlags);
-  },
+    // Avoid useless toggles.
+    if (aFlags.visible == !this.panesHidden) {
+      return;
+    }
 
-  /**
-   * Shows the stackframes, breakpoints and variable panes if currently hidden
-   * and the preferences dictate otherwise.
-   */
-  showPanesIfPreffered: function DV_showPanesIfPreffered() {
-    let self = this;
+    if (aFlags.visible) {
+      this._stackframesAndBreakpoints.style.marginLeft = "0";
+      this._variables.style.marginRight = "0";
+      this._togglePanesButton.removeAttribute("panesHidden");
+      this._togglePanesButton.setAttribute("tooltiptext", L10N.getStr("collapsePanes"));
+    } else {
+      let marginL = ~~(this._stackframesAndBreakpoints.getAttribute("width")) + 1;
+      let marginR = ~~(this._variables.getAttribute("width")) + 1;
+      this._stackframesAndBreakpoints.style.marginLeft = -marginL + "px";
+      this._variables.style.marginRight = -marginR + "px";
+      this._togglePanesButton.setAttribute("panesHidden", "true");
+      this._togglePanesButton.setAttribute("tooltiptext", L10N.getStr("expandPanes"));
+    }
 
-    // Try to keep animations as smooth as possible, so wait a few cycles.
-    window.setTimeout(function() {
-      let target;
+    if (aFlags.animated) {
+      this._stackframesAndBreakpoints.setAttribute("animated", "");
+      this._variables.setAttribute("animated", "");
 
-      if (Prefs.stackframesPaneVisible && self.stackframesAndBreakpointsHidden) {
-        self._toggleStackframesAndBreakpointsPane({
-          visible: true,
-          animated: true,
-          silent: true
-        });
-        target = self._stackframesAndBreakpoints;
-      }
-      if (Prefs.variablesPaneVisible && self.variablesHidden) {
-        self._toggleVariablesPane({
-          visible: true,
-          animated: true,
-          silent: true
-        });
-        target = self._variables;
-      }
       // Displaying the panes may have the effect of triggering scrollbars to
       // appear in the source editor, which would render the currently
       // highlighted line to appear behind them in some cases.
-      if (target) {
-        target.addEventListener("transitionend", function onEvent() {
-          target.removeEventListener("transitionend", onEvent, false);
-          self.updateEditor();
-        }, false);
-      }
-    }, PANES_APPEARANCE_DELAY);
-  },
+      let self = this;
 
-  /**
-   * Sets the stackframes and breakpoints (left) pane hidden or visible.
-   * @see DebuggerView.togglePanes
-   */
-  _toggleStackframesAndBreakpointsPane:
-  function DV__toggleStackframesAndBreakpointsPane(aFlags) {
-    if (aFlags.animated) {
-      this._stackframesAndBreakpoints.setAttribute("animated", "");
+      window.addEventListener("transitionend", function onEvent() {
+        window.removeEventListener("transitionend", onEvent, false);
+        self.updateEditor();
+      }, false);
     } else {
       this._stackframesAndBreakpoints.removeAttribute("animated");
-    }
-    if (aFlags.visible) {
-      this._stackframesAndBreakpoints.style.marginLeft = "0";
-      this._togglePanesButton.removeAttribute("stackframesAndBreakpointsHidden");
-      this._togglePanesButton.setAttribute("tooltiptext", L10N.getStr("collapsePanes"));
-    } else {
-      let margin = parseInt(this._stackframesAndBreakpoints.getAttribute("width")) + 1;
-      this._stackframesAndBreakpoints.style.marginLeft = -margin + "px";
-      this._togglePanesButton.setAttribute("stackframesAndBreakpointsHidden", "true");
-      this._togglePanesButton.setAttribute("tooltiptext", L10N.getStr("expandPanes"));
-    }
-    if (!aFlags.silent) {
-      Prefs.stackframesPaneVisible = !!aFlags.visible;
+      this._variables.removeAttribute("animated");
     }
   },
 
   /**
-   * Sets the variables (right) pane hidden or visible.
-   * @see DebuggerView.togglePanes
+   * Sets all the panes visible after a short period of time.
    */
-  _toggleVariablesPane:
-  function DV__toggleVariablesPane(aFlags) {
-    if (aFlags.animated) {
-      this._variables.setAttribute("animated", "");
-    } else {
-      this._variables.removeAttribute("animated");
-    }
-    if (aFlags.visible) {
-      this._variables.style.marginRight = "0";
-      this._togglePanesButton.removeAttribute("variablesHidden");
-      this._togglePanesButton.setAttribute("tooltiptext", L10N.getStr("collapsePanes"));
-    } else {
-      let margin = parseInt(this._variables.getAttribute("width")) + 1;
-      this._variables.style.marginRight = -margin + "px";
-      this._togglePanesButton.setAttribute("variablesHidden", "true");
-      this._togglePanesButton.setAttribute("tooltiptext", L10N.getStr("expandPanes"));
-    }
-    if (!aFlags.silent) {
-      Prefs.variablesPaneVisible = !!aFlags.visible;
-    }
+  showPanesSoon: function DV__showPanesSoon() {
+    // Try to keep animations as smooth as possible, so wait a few cycles.
+    window.setTimeout(function() {
+      DebuggerView.togglePanes({
+        visible: true,
+        animated: true
+      });
+    }, PANES_APPEARANCE_DELAY);
   },
 
   /**

browser/devtools/debugger/debugger.xul

@@ -42,7 +42,9 @@
     <command id="globalSearchCommand"
              oncommand="DebuggerView.Filtering._doGlobalSearch()"/>
     <command id="togglePauseOnExceptions"
-             oncommand="DebuggerView.Options._togglePOE()"/>
+             oncommand="DebuggerView.Options._togglePauseOnExceptions()"/>
+    <command id="toggleShowPanesOnStartup"
+             oncommand="DebuggerView.Options._toggleShowPanesOnStartup()"/>
     <command id="toggleShowNonEnum"
              oncommand="DebuggerView.Options._toggleShowNonEnum()"/>
   </commandset>
@@ -68,6 +70,11 @@
                 label="&debuggerUI.pauseExceptions;"
                 accesskey="&debuggerUI.pauseExceptions.key;"
                 command="togglePauseOnExceptions"/>
+      <menuitem id="show-panes-on-startup"
+                type="checkbox"
+                label="&debuggerUI.showPanesOnInit;"
+                accesskey="&debuggerUI.showPanesOnInit.key;"
+                command="toggleShowPanesOnStartup"/>
       <menuitem id="show-nonenum"
                 type="checkbox"
                 label="&debuggerUI.showNonEnums;"

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

@@ -21,12 +21,10 @@ function test() {
 
     testPanesState();
 
-    gView._toggleStackframesAndBreakpointsPane({ visible: true });
-    gView._toggleVariablesPane({ visible: true });
+    gView.togglePanes({ visible: true, animated: false });
     testPaneCollapse1();
     testPaneCollapse2();
-
-    closeDebuggerAndFinish();
+    testPanesStartupPref(closeDebuggerAndFinish);
   });
 }
 
@@ -34,15 +32,12 @@ function testPanesState() {
   let togglePanesButton =
     gDebugger.document.getElementById("toggle-panes");
 
-  ok(togglePanesButton.getAttribute("stackframesAndBreakpointsHidden"),
-    "The stackframes and breakpoints pane should initially be invisible.");
-  is(gDebugger.Prefs.stackframesPaneVisible, true,
-    "The stackframes and breakpoints pane should initially be preffed as visible.");
-
-  ok(togglePanesButton.getAttribute("variablesHidden"),
-    "The stackframes and breakpoints pane should initially be invisible.");
-  is(gDebugger.Prefs.variablesPaneVisible, true,
-    "The stackframes and breakpoints pane should initially be preffed as visible.");
+  ok(togglePanesButton.getAttribute("panesHidden"),
+    "The debugger view panes should initially be hidden.");
+  is(gDebugger.Prefs.panesVisibleOnStartup, false,
+    "The debugger view panes should initially be preffed as hidden.");
+  isnot(gDebugger.DebuggerView.Options._showPanesOnStartupItem.getAttribute("checked"), "true",
+    "The options menu item should not be checked.");
 }
 
 function testPaneCollapse1() {
@@ -58,16 +53,15 @@ function testPaneCollapse1() {
     "The stackframes and breakpoints pane has an incorrect left margin.");
   ok(!stackframesAndBrekpoints.hasAttribute("animated"),
     "The stackframes and breakpoints pane has an incorrect animated attribute.");
-  ok(!togglePanesButton.getAttribute("stackframesAndBreakpointsHidden"),
+  ok(!togglePanesButton.getAttribute("panesHidden"),
     "The stackframes and breakpoints pane should at this point be visible.");
 
-  is(gDebugger.Prefs.stackframesPaneVisible, true,
-    "The stackframes and breakpoints pane should at this point be visible.");
+  gView.togglePanes({ visible: false, animated: true });
 
-  gView._toggleStackframesAndBreakpointsPane({ visible: false, animated: true });
-
-  is(gDebugger.Prefs.stackframesPaneVisible, false,
-    "The stackframes and breakpoints pane should be hidden after collapsing.");
+  is(gDebugger.Prefs.panesVisibleOnStartup, false,
+    "The debugger view panes should still initially be preffed as hidden.");
+  isnot(gDebugger.DebuggerView.Options._showPanesOnStartupItem.getAttribute("checked"), "true",
+    "The options menu item should still not be checked.");
 
   let margin = -(width + 1) + "px";
   is(width, gDebugger.Prefs.stackframesWidth,
@@ -76,16 +70,15 @@ function testPaneCollapse1() {
     "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"),
+  ok(togglePanesButton.hasAttribute("panesHidden"),
     "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.togglePanes({ visible: true, animated: false });
 
-  gView._toggleStackframesAndBreakpointsPane({ visible: true, animated: false });
-
-  is(gDebugger.Prefs.stackframesPaneVisible, true,
-    "The stackframes and breakpoints pane should be visible after uncollapsing.");
+  is(gDebugger.Prefs.panesVisibleOnStartup, false,
+    "The debugger view panes should still initially be preffed as hidden.");
+  isnot(gDebugger.DebuggerView.Options._showPanesOnStartupItem.getAttribute("checked"), "true",
+    "The options menu item should still not be checked.");
 
   is(width, gDebugger.Prefs.stackframesWidth,
     "The stackframes and breakpoints pane has an incorrect width after uncollapsing.");
@@ -93,7 +86,7 @@ function testPaneCollapse1() {
     "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"),
+  ok(!togglePanesButton.getAttribute("panesHidden"),
     "The stackframes and breakpoints pane should be visible again after uncollapsing.");
 }
 
@@ -110,16 +103,15 @@ function testPaneCollapse2() {
     "The variables pane has an incorrect right margin.");
   ok(!variables.hasAttribute("animated"),
     "The variables pane has an incorrect animated attribute.");
-  ok(!togglePanesButton.getAttribute("variablesHidden"),
+  ok(!togglePanesButton.getAttribute("panesHidden"),
     "The variables pane should at this point be visible.");
 
-  is(gDebugger.Prefs.variablesPaneVisible, true,
-    "The variables pane should at this point be visible.");
+  gView.togglePanes({ visible: false, animated: true });
 
-  gView._toggleVariablesPane({ visible: false, animated: true });
-
-  is(gDebugger.Prefs.variablesPaneVisible, false,
-    "The variables pane should be hidden after collapsing.");
+  is(gDebugger.Prefs.panesVisibleOnStartup, false,
+    "The debugger view panes should still initially be preffed as hidden.");
+  isnot(gDebugger.DebuggerView.Options._showPanesOnStartupItem.getAttribute("checked"), "true",
+    "The options menu item should still not be checked.");
 
   let margin = -(width + 1) + "px";
   is(width, gDebugger.Prefs.variablesWidth,
@@ -128,16 +120,15 @@ function testPaneCollapse2() {
     "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"),
+  ok(togglePanesButton.hasAttribute("panesHidden"),
     "The variables pane should not be visible after collapsing.");
 
-  is(gDebugger.Prefs.variablesPaneVisible, false,
-    "The variables pane should be hidden before uncollapsing.");
+  gView.togglePanes({ visible: true, animated: false });
 
-  gView._toggleVariablesPane({ visible: true, animated: false });
-
-  is(gDebugger.Prefs.variablesPaneVisible, true,
-    "The variables pane should be visible after uncollapsing.");
+  is(gDebugger.Prefs.panesVisibleOnStartup, false,
+    "The debugger view panes should still initially be preffed as hidden.");
+  isnot(gDebugger.DebuggerView.Options._showPanesOnStartupItem.getAttribute("checked"), "true",
+    "The options menu item should still not be checked.");
 
   is(width, gDebugger.Prefs.variablesWidth,
     "The variables pane has an incorrect width after uncollapsing.");
@@ -145,10 +136,57 @@ function testPaneCollapse2() {
     "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"),
+  ok(!togglePanesButton.getAttribute("panesHidden"),
     "The variables pane should be visible again after uncollapsing.");
 }
 
+function testPanesStartupPref(aCallback) {
+  let stackframesAndBrekpoints =
+    gDebugger.document.getElementById("stackframes+breakpoints");
+  let variables =
+    gDebugger.document.getElementById("variables");
+  let togglePanesButton =
+    gDebugger.document.getElementById("toggle-panes");
+
+  is(gDebugger.Prefs.panesVisibleOnStartup, false,
+    "The debugger view panes should still initially be preffed as hidden.");
+
+  ok(!togglePanesButton.getAttribute("panesHidden"),
+    "The debugger panes should at this point be visible.");
+  is(gDebugger.Prefs.panesVisibleOnStartup, false,
+    "The debugger view panes should initially be preffed as hidden.");
+  isnot(gDebugger.DebuggerView.Options._showPanesOnStartupItem.getAttribute("checked"), "true",
+    "The options menu item should still not be checked.");
+
+  gDebugger.DebuggerView.Options._showPanesOnStartupItem.setAttribute("checked", "true");
+  gDebugger.DebuggerView.Options._toggleShowPanesOnStartup();
+
+  executeSoon(function() {
+    ok(!togglePanesButton.getAttribute("panesHidden"),
+      "The debugger panes should at this point be visible.");
+    is(gDebugger.Prefs.panesVisibleOnStartup, true,
+      "The debugger view panes should now be preffed as visible.");
+    is(gDebugger.DebuggerView.Options._showPanesOnStartupItem.getAttribute("checked"), "true",
+      "The options menu item should now be checked.");
+
+    gDebugger.DebuggerView.Options._showPanesOnStartupItem.setAttribute("checked", "false");
+    gDebugger.DebuggerView.Options._toggleShowPanesOnStartup();
+
+    executeSoon(function() {
+      ok(!togglePanesButton.getAttribute("panesHidden"),
+        "The debugger panes should at this point be visible.");
+      is(gDebugger.Prefs.panesVisibleOnStartup, false,
+        "The debugger view panes should now be preffed as hidden.");
+      isnot(gDebugger.DebuggerView.Options._showPanesOnStartupItem.getAttribute("checked"), "true",
+        "The options menu item should now be unchecked.");
+
+      executeSoon(function() {
+        aCallback();
+      });
+    });
+  });
+}
+
 registerCleanupFunction(function() {
   removeTab(gTab);
   gPane = null;

browser/devtools/debugger/test/browser_dbg_pause-exceptions.js

@@ -40,8 +40,8 @@ function testWithFrame()
       is(gDebugger.DebuggerController.activeThread.state, "paused",
         "Should be paused now.");
 
-      gDebugger.DebuggerView.Options._poeItem.setAttribute("checked", "true");
-      gDebugger.DebuggerView.Options._togglePOE();
+      gDebugger.DebuggerView.Options._pauseOnExceptionsItem.setAttribute("checked", "true");
+      gDebugger.DebuggerView.Options._togglePauseOnExceptions();
 
       gCount = 0;
       gPane.contentWindow.gClient.addOneTimeListener("resumed", function() {

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

@@ -44,6 +44,11 @@
 <!ENTITY debuggerUI.pauseExceptions     "Pause on exceptions">
 <!ENTITY debuggerUI.pauseExceptions.key "E">
 
+<!-- LOCALIZATION NOTE (debuggerUI.showPanesOnInit): This is the label for the
+  -  checkbox that toggles visibility of panes when opening the debugger. -->
+<!ENTITY debuggerUI.showPanesOnInit     "Show panes on startup">
+<!ENTITY debuggerUI.showPanesOnInit.key "S">
+
 <!-- LOCALIZATION NOTE (debuggerUI.showNonEnums): This is the label for the
   -  checkbox that toggles visibility of hidden (non-enumerable) variables and
   -  properties in stack views. -->

browser/themes/gnomestripe/devtools/debugger.css

@@ -402,7 +402,7 @@
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
-#toggle-panes:not([stackframesAndBreakpointsHidden]):not([variablesHidden]) {
+#toggle-panes:not([panesHidden]) {
   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 }
 

browser/themes/pinstripe/devtools/debugger.css

@@ -402,7 +402,7 @@
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
-#toggle-panes:not([stackframesAndBreakpointsHidden]):not([variablesHidden]) {
+#toggle-panes:not([panesHidden]) {
   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 }
 

browser/themes/winstripe/devtools/debugger.css

@@ -413,7 +413,7 @@
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
-#toggle-panes:not([stackframesAndBreakpointsHidden]):not([variablesHidden]) {
+#toggle-panes:not([panesHidden]) {
   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 }