Bug 996778 - Remember split console height;r=msucan

browser/app/profile/firefox.js

@@ -1293,6 +1293,7 @@ pref("devtools.toolbox.toolbarSpec", '["splitconsole", "paintflashing toggle","t
 pref("devtools.toolbox.sideEnabled", true);
 pref("devtools.toolbox.zoomValue", "1");
 pref("devtools.toolbox.splitconsoleEnabled", false);
+pref("devtools.toolbox.splitconsoleHeight", 100);
 
 // Toolbox Button preferences
 pref("devtools.command-button-pick.enabled", true);

browser/devtools/framework/toolbox.js

@@ -7,6 +7,7 @@
 const MAX_ORDINAL = 99;
 const ZOOM_PREF = "devtools.toolbox.zoomValue";
 const SPLITCONSOLE_ENABLED_PREF = "devtools.toolbox.splitconsoleEnabled";
+const SPLITCONSOLE_HEIGHT_PREF = "devtools.toolbox.splitconsoleHeight";
 const MIN_ZOOM = 0.5;
 const MAX_ZOOM = 2;
 
@@ -74,6 +75,7 @@ function Toolbox(target, selectedTool, hostType, hostOptions) {
   this._highlighterReady = this._highlighterReady.bind(this);
   this._highlighterHidden = this._highlighterHidden.bind(this);
   this._prefChanged = this._prefChanged.bind(this);
+  this._saveSplitConsoleHeight = this._saveSplitConsoleHeight.bind(this);
 
   this._target.on("close", this.destroy);
 
@@ -240,8 +242,8 @@ Toolbox.prototype = {
       let domReady = () => {
         this.isReady = true;
 
-        let closeButton = this.doc.getElementById("toolbox-close");
-        closeButton.addEventListener("command", this.destroy, true);
+        this.closeButton = this.doc.getElementById("toolbox-close");
+        this.closeButton.addEventListener("command", this.destroy, true);
 
         gDevTools.on("pref-changed", this._prefChanged);
 
@@ -255,10 +257,17 @@ Toolbox.prototype = {
         this._addZoomKeys();
         this._loadInitialZoom();
 
+        this.webconsolePanel = this.doc.querySelector("#toolbox-panel-webconsole");
+        this.webconsolePanel.height =
+          Services.prefs.getIntPref(SPLITCONSOLE_HEIGHT_PREF);
+        this.webconsolePanel.addEventListener("resize",
+          this._saveSplitConsoleHeight);
+
         let splitConsolePromise = promise.resolve();
         if (Services.prefs.getBoolPref(SPLITCONSOLE_ENABLED_PREF)) {
           splitConsolePromise = this.openSplitConsole();
         }
+
         let buttonsPromise = this._buildButtons();
 
         this._telemetry.toolOpened("toolbox");
@@ -347,6 +356,11 @@ Toolbox.prototype = {
     this.doc.addEventListener("keypress", this._splitConsoleOnKeypress, false);
   },
 
+  _saveSplitConsoleHeight: function() {
+    Services.prefs.setIntPref(SPLITCONSOLE_HEIGHT_PREF,
+      this.webconsolePanel.height);
+  },
+
   /**
    * Make sure that the console is showing up properly based on all the
    * possible conditions.
@@ -361,7 +375,7 @@ Toolbox.prototype = {
    */
   _refreshConsoleDisplay: function() {
     let deck = this.doc.getElementById("toolbox-deck");
-    let webconsolePanel = this.doc.getElementById("toolbox-panel-webconsole");
+    let webconsolePanel = this.webconsolePanel;
     let splitter = this.doc.getElementById("toolbox-console-splitter");
     let openedConsolePanel = this.currentToolId === "webconsole";
 
@@ -524,11 +538,10 @@ Toolbox.prototype = {
       return;
     }
 
-    let closeButton = this.doc.getElementById("toolbox-close");
     if (this.hostType == Toolbox.HostType.WINDOW) {
-      closeButton.setAttribute("hidden", "true");
+      this.closeButton.setAttribute("hidden", "true");
     } else {
-      closeButton.removeAttribute("hidden");
+      this.closeButton.removeAttribute("hidden");
     }
 
     let sideEnabled = Services.prefs.getBoolPref(this._prefs.SIDE_ENABLED);
@@ -1321,6 +1334,11 @@ Toolbox.prototype = {
 
     gDevTools.off("pref-changed", this._prefChanged);
 
+    this._saveSplitConsoleHeight();
+    this.webconsolePanel.removeEventListener("resize",
+      this._saveSplitConsoleHeight);
+    this.closeButton.removeEventListener("command", this.destroy, true);
+
     let outstanding = [];
     for (let [id, panel] of this._toolPanels) {
       try {

browser/devtools/framework/toolbox.xul

@@ -80,7 +80,11 @@
       </hbox>
     </toolbar>
     <vbox flex="1">
-      <deck id="toolbox-deck" flex="1" minheight="75" />
+      <!-- Set large flex to allow the toolbox-panel-webconsole to have a
+           height set to a small value without flexing to fill up extra
+           space. There must be a flex on both to ensure that the console
+           panel itself is sized properly -->
+      <deck id="toolbox-deck" flex="1000" minheight="75" />
       <splitter id="toolbox-console-splitter" class="devtools-horizontal-splitter" hidden="true" />
       <box minheight="75" flex="1" id="toolbox-panel-webconsole" collapsed="true" />
     </vbox>

browser/devtools/webconsole/panel.js

@@ -52,7 +52,6 @@ WebConsolePanel.prototype = {
   {
     let parentDoc = this._toolbox.doc;
     let iframe = parentDoc.getElementById("toolbox-panel-iframe-webconsole");
-    iframe.className = "web-console-frame";
 
     // Make sure the iframe content window is ready.
     let deferredIframe = promise.defer();

browser/devtools/webconsole/test/browser_webconsole_split.js

@@ -67,7 +67,7 @@ function test()
   {
     let win = toolbox.doc.defaultView;
     let deck = toolbox.doc.querySelector("#toolbox-deck");
-    let webconsolePanel = toolbox.doc.querySelector("#toolbox-panel-webconsole");
+    let webconsolePanel = toolbox.webconsolePanel;
     let splitter = toolbox.doc.querySelector("#toolbox-console-splitter");
 
     let containerHeight = parseFloat(win.getComputedStyle(deck.parentNode).getPropertyValue("height"));
@@ -181,7 +181,7 @@ function test()
     ok (currentUIState.splitterVisibility, "Splitter is visible when console is split");
     ok (currentUIState.deckHeight > 0, "Deck has a height > 0 when console is split");
     ok (currentUIState.webconsoleHeight > 0, "Web console has a height > 0 when console is split");
-    is (currentUIState.deckHeight + currentUIState.webconsoleHeight,
+    is (Math.round(currentUIState.deckHeight + currentUIState.webconsoleHeight),
           currentUIState.containerHeight,
         "Everything adds up to container height");
     ok (!currentUIState.openedConsolePanel, "The console panel is not the current tool");

browser/devtools/webconsole/test/browser_webconsole_split_persist.js

@@ -20,7 +20,10 @@ function test() {
     ok(!toolbox.splitConsole, "Split console is hidden by default.");
     yield toggleSplitConsoleWithEscape();
     ok(toolbox.splitConsole, "Split console is now visible.");
-    ok(getPrefValue(), "Pref is true");
+    ok(getVisiblePrefValue(), "Visibility pref is true");
+
+    is(getHeightPrefValue(), toolbox.webconsolePanel.height, "Panel height matches the pref");
+    toolbox.webconsolePanel.height = 200;
 
     yield toolbox.destroy();
 
@@ -30,27 +33,44 @@ function test() {
     toolbox = yield gDevTools.showToolbox(target, "inspector");
 
     ok(toolbox.splitConsole, "Split console is visible by default.");
+    is(getHeightPrefValue(), 200, "Height is set based on panel height after closing");
+
+    toolbox.webconsolePanel.height = 1;
+    ok (toolbox.webconsolePanel.clientHeight > 1,
+        "The actual height of the console is bound with a min height");
+
+    toolbox.webconsolePanel.height = 10000;
+    ok (toolbox.webconsolePanel.clientHeight < 10000,
+        "The actual height of the console is bound with a max height");
+
     yield toggleSplitConsoleWithEscape();
     ok(!toolbox.splitConsole, "Split console is now hidden.");
-    ok(!getPrefValue(), "Pref is false");
+    ok(!getVisiblePrefValue(), "Visibility pref is false");
 
     yield toolbox.destroy();
 
+    is(getHeightPrefValue(), 10000, "Height is set based on panel height after closing");
+
+
     info("Opening a tab while there is a false user setting on split console pref");
     let {tab} = yield loadTab(TEST_URI);
     let target = TargetFactory.forTab(tab);
     toolbox = yield gDevTools.showToolbox(target, "inspector");
 
     ok(!toolbox.splitConsole, "Split console is hidden by default.");
-    ok(!getPrefValue(), "Pref is false");
+    ok(!getVisiblePrefValue(), "Visibility pref is false");
 
     yield toolbox.destroy();
   }
 
-  function getPrefValue() {
+  function getVisiblePrefValue() {
     return Services.prefs.getBoolPref("devtools.toolbox.splitconsoleEnabled");
   }
 
+  function getHeightPrefValue() {
+    return Services.prefs.getIntPref("devtools.toolbox.splitconsoleHeight");
+  }
+
   function toggleSplitConsoleWithEscape() {
     let onceSplitConsole = toolbox.once("split-console");
     let contentWindow = toolbox.frame.contentWindow;
@@ -62,6 +82,7 @@ function test() {
   function finish() {
     toolbox = TEST_URI = null;
     Services.prefs.clearUserPref("devtools.toolbox.splitconsoleEnabled");
+    Services.prefs.clearUserPref("devtools.toolbox.splitconsoleHeight");
     finishTest();
   }
 }