Bug 790650 - It may be a good idea to have the debugger start with collapsed panels, r=past

browser/devtools/debugger/debugger-controller.js

@@ -60,7 +60,8 @@ let DebuggerController = {
       DebuggerView.StackFrames.initialize();
       DebuggerView.Breakpoints.initialize();
       DebuggerView.Properties.initialize();
-      DebuggerView.showCloseButton(!this._isRemoteDebugger && !this._isChromeDebugger);
+      DebuggerView.toggleCloseButton(!this._isRemoteDebugger &&
+                                     !this._isChromeDebugger);
 
       this.dispatchEvent("Debugger:Loaded");
       this._connect();

browser/devtools/debugger/debugger-view.js

@@ -6,6 +6,7 @@
 "use strict";
 
 const BREAKPOINT_LINE_TOOLTIP_MAX_SIZE = 1000; // chars
+const PANES_APPEARANCE_DELAY = 50; // ms
 const PROPERTY_VIEW_FLASH_DURATION = 400; // ms
 const GLOBAL_SEARCH_MATCH_FLASH_DURATION = 100; // ms
 const GLOBAL_SEARCH_URL_MAX_SIZE = 100; // chars
@@ -103,8 +104,8 @@ let DebuggerView = {
     this._stackframesAndBreakpoints.setAttribute("width", Prefs.stackframesWidth);
     this._variables.setAttribute("width", Prefs.variablesWidth);
 
-    this.showStackframesAndBreakpointsPane(Prefs.stackframesPaneVisible);
-    this.showVariablesPane(Prefs.variablesPaneVisible);
+    this.toggleStackframesAndBreakpointsPane({ silent: true });
+    this.toggleVariablesPane({ silent: true });
   },
 
   /**
@@ -173,34 +174,42 @@ let DebuggerView = {
    * 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);
+    this.toggleStackframesAndBreakpointsPane({
+      visible: !!this._togglePanesButton.getAttribute("stackframesAndBreakpointsHidden"),
+      animated: true
+    });
+    this.toggleVariablesPane({
+      visible: !!this._togglePanesButton.getAttribute("variablesHidden"),
+      animated: true
+    });
+    this._onPanesToggle();
   },
 
   /**
    * Sets the close button hidden or visible. It's hidden by default.
    * @param boolean aVisibleFlag
    */
-  showCloseButton: function DV_showCloseButton(aVisibleFlag) {
+  toggleCloseButton: function DV_toggleCloseButton(aVisibleFlag) {
     document.getElementById("close").setAttribute("hidden", !aVisibleFlag);
   },
 
   /**
    * Sets the stackframes and breakpoints pane hidden or visible.
-   * @param boolean aVisibleFlag
-   * @param boolean aAnimatedFlag
+   *
+   * @param object aFlags [optional]
+   *        An object containing some of the following booleans:
+   *        - 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
    */
-  showStackframesAndBreakpointsPane:
-  function DV_showStackframesAndBreakpointsPane(aVisibleFlag, aAnimatedFlag) {
-    if (aAnimatedFlag) {
+  toggleStackframesAndBreakpointsPane:
+  function DV_toggleStackframesAndBreakpointsPane(aFlags = {}) {
+    if (aFlags.animated) {
       this._stackframesAndBreakpoints.setAttribute("animated", "");
     } else {
       this._stackframesAndBreakpoints.removeAttribute("animated");
     }
-    if (aVisibleFlag) {
+    if (aFlags.visible) {
       this._stackframesAndBreakpoints.style.marginLeft = "0";
       this._togglePanesButton.removeAttribute("stackframesAndBreakpointsHidden");
       this._togglePanesButton.setAttribute("tooltiptext", L10N.getStr("collapsePanes"));
@@ -210,22 +219,28 @@ let DebuggerView = {
       this._togglePanesButton.setAttribute("stackframesAndBreakpointsHidden", "true");
       this._togglePanesButton.setAttribute("tooltiptext", L10N.getStr("expandPanes"));
     }
-    Prefs.stackframesPaneVisible = aVisibleFlag;
+    if (!aFlags.silent) {
+      Prefs.stackframesPaneVisible = !!aFlags.visible;
+    }
   },
 
   /**
    * Sets the variable spane hidden or visible.
-   * @param boolean aVisibleFlag
-   * @param boolean aAnimatedFlag
+   *
+   * @param object aFlags [optional]
+   *        An object containing some of the following booleans:
+   *        - 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
    */
-  showVariablesPane:
-  function DV_showVariablesPane(aVisibleFlag, aAnimatedFlag) {
-    if (aAnimatedFlag) {
+  toggleVariablesPane:
+  function DV_toggleVariablesPane(aFlags = {}) {
+    if (aFlags.animated) {
       this._variables.setAttribute("animated", "");
     } else {
       this._variables.removeAttribute("animated");
     }
-    if (aVisibleFlag) {
+    if (aFlags.visible) {
       this._variables.style.marginRight = "0";
       this._togglePanesButton.removeAttribute("variablesHidden");
       this._togglePanesButton.setAttribute("tooltiptext", L10N.getStr("collapsePanes"));
@@ -235,7 +250,54 @@ let DebuggerView = {
       this._togglePanesButton.setAttribute("variablesHidden", "true");
       this._togglePanesButton.setAttribute("tooltiptext", L10N.getStr("expandPanes"));
     }
-    Prefs.variablesPaneVisible = aVisibleFlag;
+    if (!aFlags.silent) {
+      Prefs.variablesPaneVisible = !!aFlags.visible;
+    }
+  },
+
+  /**
+   * Shows the stackframes, breakpoints and variable panes if currently hidden
+   * and the preferences dictate otherwise.
+   */
+  showPanesIfAllowed: function DV_showPanesIfAllowed() {
+    // Try to keep animations as smooth as possible, so wait a few cycles.
+    window.setTimeout(function() {
+      let shown;
+
+      if (Prefs.stackframesPaneVisible &&
+          this._togglePanesButton.getAttribute("stackframesAndBreakpointsHidden")) {
+        this.toggleStackframesAndBreakpointsPane({
+          visible: true,
+          animated: true,
+          silent: true
+        });
+        shown = true;
+      }
+      if (Prefs.variablesPaneVisible &&
+          this._togglePanesButton.getAttribute("variablesHidden")) {
+        this.toggleVariablesPane({
+          visible: true,
+          animated: true,
+          silent: true
+        });
+        shown = true;
+      }
+      if (shown) {
+        this._onPanesToggle();
+      }
+    }.bind(this), PANES_APPEARANCE_DELAY);
+  },
+
+  /**
+   * 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.
+   */
+  _onPanesToggle: function DV__onPanesToggle() {
+    document.addEventListener("transitionend", function onEvent() {
+      document.removeEventListener("transitionend", onEvent);
+      DebuggerController.StackFrames.updateEditorLocation();
+    });
   },
 
   /**
@@ -1625,6 +1687,8 @@ StackFramesView.prototype = {
     if (document.getElementById("stackframe-" + aDepth)) {
       return null;
     }
+    // Stackframes are UI elements which benefit from visible panes.
+    DebuggerView.showPanesIfAllowed();
 
     let frame = document.createElement("box");
     let frameName = document.createElement("label");

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

@@ -19,12 +19,32 @@ function test() {
     gDebugger = gPane.contentWindow;
     gView = gDebugger.DebuggerView;
 
+    testPanesState();
+
+    gView.toggleStackframesAndBreakpointsPane({ visible: true });
+    gView.toggleVariablesPane({ visible: true });
     testPaneCollapse1();
     testPaneCollapse2();
+
     closeDebuggerAndFinish();
   });
 }
 
+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.");
+}
+
 function testPaneCollapse1() {
   let stackframesAndBrekpoints =
     gDebugger.document.getElementById("stackframes+breakpoints");
@@ -35,16 +55,16 @@ function testPaneCollapse1() {
   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.");
+    "The stackframes and breakpoints pane has an incorrect left margin.");
   ok(!stackframesAndBrekpoints.hasAttribute("animated"),
-    "The stackframes and breakpoints pane has an incorrect initial animated attribute.");
+    "The stackframes and breakpoints pane has an incorrect animated attribute.");
   ok(!togglePanesButton.getAttribute("stackframesAndBreakpointsHidden"),
-    "The stackframes and breakpoints pane should initially be visible.");
+    "The stackframes and breakpoints pane should at this point be visible.");
 
   is(gDebugger.Prefs.stackframesPaneVisible, true,
-    "The stackframes and breakpoints pane should initially be visible.");
+    "The stackframes and breakpoints pane should at this point be visible.");
 
-  gView.showStackframesAndBreakpointsPane(false, true);
+  gView.toggleStackframesAndBreakpointsPane({ visible: false, animated: true });
 
   is(gDebugger.Prefs.stackframesPaneVisible, false,
     "The stackframes and breakpoints pane should be hidden after collapsing.");
@@ -62,7 +82,7 @@ function testPaneCollapse1() {
   is(gDebugger.Prefs.stackframesPaneVisible, false,
     "The stackframes and breakpoints pane should be hidden before uncollapsing.");
 
-  gView.showStackframesAndBreakpointsPane(true, false);
+  gView.toggleStackframesAndBreakpointsPane({ visible: true, animated: false });
 
   is(gDebugger.Prefs.stackframesPaneVisible, true,
     "The stackframes and breakpoints pane should be visible after uncollapsing.");
@@ -87,16 +107,16 @@ function testPaneCollapse2() {
   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.");
+    "The variables pane has an incorrect right margin.");
   ok(!variables.hasAttribute("animated"),
-    "The variables pane has an incorrect initial animated attribute.");
+    "The variables pane has an incorrect animated attribute.");
   ok(!togglePanesButton.getAttribute("variablesHidden"),
-    "The variables pane should initially be visible.");
+    "The variables pane should at this point be visible.");
 
   is(gDebugger.Prefs.variablesPaneVisible, true,
-    "The variables pane should initially be visible.");
+    "The variables pane should at this point be visible.");
 
-  gView.showVariablesPane(false, true);
+  gView.toggleVariablesPane({ visible: false, animated: true });
 
   is(gDebugger.Prefs.variablesPaneVisible, false,
     "The variables pane should be hidden after collapsing.");
@@ -114,7 +134,7 @@ function testPaneCollapse2() {
   is(gDebugger.Prefs.variablesPaneVisible, false,
     "The variables pane should be hidden before uncollapsing.");
 
-  gView.showVariablesPane(true, false);
+  gView.toggleVariablesPane({ visible: true, animated: false });
 
   is(gDebugger.Prefs.variablesPaneVisible, true,
     "The variables pane should be visible after uncollapsing.");

browser/themes/gnomestripe/devtools/debugger.css

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #body {
-  background: -moz-dialog;
+  background-color: white;
 }
 
 /**

browser/themes/pinstripe/devtools/debugger.css

@@ -7,7 +7,7 @@
 %include ../shared.inc
 
 #body {
-  background: -moz-dialog;
+  background-color: white;
 }
 
 /**

browser/themes/winstripe/devtools/debugger.css

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #body {
-  background: -moz-dialog;
+  background-color: white;
 }
 
 /**