Bug 864176 - Details pane should remember its height when docked on the right, r=rcampbell

browser/app/profile/firefox.js

@@ -1084,6 +1084,7 @@ pref("devtools.netmonitor.enabled", true);
 
 // The default Network Monitor UI settings
 pref("devtools.netmonitor.panes-network-details-width", 450);
+pref("devtools.netmonitor.panes-network-details-height", 450);
 
 // Enable the Tilt inspector
 pref("devtools.tilt.enabled", true);

browser/devtools/netmonitor/netmonitor-controller.js

@@ -515,7 +515,8 @@ let L10N = new ViewHelpers.L10N(NET_STRINGS_URI);
  * Shortcuts for accessing various network monitor preferences.
  */
 let Prefs = new ViewHelpers.Prefs("devtools.netmonitor", {
-  networkDetailsWidth: ["Int", "panes-network-details-width"]
+  networkDetailsWidth: ["Int", "panes-network-details-width"],
+  networkDetailsHeight: ["Int", "panes-network-details-height"]
 });
 
 /**

browser/devtools/netmonitor/netmonitor-view.js

@@ -103,6 +103,7 @@ let NetMonitorView = {
     this._expandPaneString = L10N.getStr("expandDetailsPane");
 
     this._detailsPane.setAttribute("width", Prefs.networkDetailsWidth);
+    this._detailsPane.setAttribute("height", Prefs.networkDetailsHeight);
     this.toggleDetailsPane({ visible: false });
   },
 
@@ -113,6 +114,7 @@ let NetMonitorView = {
     dumpn("Destroying the NetMonitorView panes");
 
     Prefs.networkDetailsWidth = this._detailsPane.getAttribute("width");
+    Prefs.networkDetailsHeight = this._detailsPane.getAttribute("height");
 
     this._detailsPane = null;
     this._detailsPaneToggleButton = null;

browser/devtools/netmonitor/test/browser_net_prefs-reload.js

@@ -9,13 +9,20 @@ function test() {
   initNetMonitor(SIMPLE_URL).then(([aTab, aDebuggee, aMonitor]) => {
     info("Starting test... ");
 
+    // This test reopens the network monitor a bunch of times, for different
+    // hosts (bottom, side, window). This seems to be slow on debug builds.
+    requestLongerTimeout(2);
+
     let prefsToCheck = {
       networkDetailsWidth: {
         newValue: ~~(Math.random() * 200 + 100),
-        validate: () =>
-          ~~aMonitor._view._detailsPane.getAttribute("width"),
-        modifyFrontend: (aValue) =>
-          aMonitor._view._detailsPane.setAttribute("width", aValue)
+        validate: ($) => ~~$("#details-pane").getAttribute("width"),
+        modifyFrontend: ($, aValue) => $("#details-pane").setAttribute("width", aValue)
+      },
+      networkDetailsHeight: {
+        newValue: ~~(Math.random() * 300 + 100),
+        validate: ($) => ~~$("#details-pane").getAttribute("height"),
+        modifyFrontend: ($, aValue) => $("#details-pane").setAttribute("height", aValue)
       },
       /* add more prefs here... */
     };
@@ -39,7 +46,7 @@ function test() {
 
         is(currentValue, firstValue,
           "Pref " + name + " should be equal to first value: " + firstValue);
-        is(currentValue, validate(),
+        is(currentValue, validate(aMonitor.panelWin.$),
           "Pref " + name + " should validate: " + currentValue);
       }
     }
@@ -54,14 +61,14 @@ function test() {
         let validate = prefsToCheck[name].validate;
         let modifyFrontend = prefsToCheck[name].modifyFrontend;
 
-        modifyFrontend(newValue);
+        modifyFrontend(aMonitor.panelWin.$, newValue);
         info("Modified UI element affecting " + name + " to: " + newValue);
 
         is(currentValue, firstValue,
           "Pref " + name + " should still be equal to first value: " + firstValue);
         isnot(currentValue, newValue,
           "Pref " + name + " should't yet be equal to second value: " + newValue);
-        is(newValue, validate(),
+        is(newValue, validate(aMonitor.panelWin.$),
           "The UI element affecting " + name + " should validate: " + newValue);
       }
     }
@@ -74,13 +81,12 @@ function test() {
         let firstValue = prefsToCheck[name].firstValue;
         let newValue = prefsToCheck[name].newValue;
         let validate = prefsToCheck[name].validate;
-        let modifyFrontend = prefsToCheck[name].modifyFrontend;
 
         isnot(currentValue, firstValue,
           "Pref " + name + " should't be equal to first value: " + firstValue);
         is(currentValue, newValue,
           "Pref " + name + " should now be equal to second value: " + newValue);
-        is(newValue, validate(),
+        is(newValue, validate(aMonitor.panelWin.$),
           "The UI element affecting " + name + " should validate: " + newValue);
       }
     }
@@ -95,36 +101,117 @@ function test() {
         let validate = prefsToCheck[name].validate;
         let modifyFrontend = prefsToCheck[name].modifyFrontend;
 
-        modifyFrontend(firstValue);
+        modifyFrontend(aMonitor.panelWin.$, firstValue);
         info("Modified UI element affecting " + name + " to: " + firstValue);
 
         isnot(currentValue, firstValue,
           "Pref " + name + " should't yet be equal to first value: " + firstValue);
         is(currentValue, newValue,
           "Pref " + name + " should still be equal to second value: " + newValue);
-        is(firstValue, validate(),
+        is(firstValue, validate(aMonitor.panelWin.$),
           "The UI element affecting " + name + " should validate: " + firstValue);
       }
     }
 
-    storeFirstPrefValues();
+    function testBottom() {
+      info("Testing prefs reload for a bottom host.");
+      storeFirstPrefValues();
 
-    // Validate and modify.
-    validateFirstPrefValues();
-    modifyFrontend();
-    restartNetMonitor(aMonitor).then(([,, aNewMonitor]) => {
-      aMonitor = aNewMonitor;
+      // Validate and modify while toolbox is on the bottom.
+      validateFirstPrefValues();
+      modifyFrontend();
 
-      // Revalidate and reset.
-      validateNewPrefValues();
-      resetFrontend();
-      restartNetMonitor(aMonitor).then(([,, aNewMonitor]) => {
-        aMonitor = aNewMonitor;
+      return restartNetMonitor(aMonitor)
+        .then(([,, aNewMonitor]) => {
+          aMonitor = aNewMonitor;
 
-        // Revalidate and finish.
-        validateFirstPrefValues();
-        teardown(aMonitor).then(finish);
-      });
-    });
+          // Revalidate and reset frontend while toolbox is on the bottom.
+          validateNewPrefValues();
+          resetFrontend();
+
+          return restartNetMonitor(aMonitor);
+        })
+        .then(([,, aNewMonitor]) => {
+          aMonitor = aNewMonitor;
+
+          // Revalidate.
+          validateFirstPrefValues();
+        });
+    }
+
+    function testSide() {
+      info("Moving toolbox to the side...");
+
+      return aMonitor._toolbox.switchHost(Toolbox.HostType.SIDE)
+        .then(() => {
+          info("Testing prefs reload for a side host.");
+          storeFirstPrefValues();
+
+          // Validate and modify frontend while toolbox is on the side.
+          validateFirstPrefValues();
+          modifyFrontend();
+
+          return restartNetMonitor(aMonitor);
+        })
+        .then(([,, aNewMonitor]) => {
+          aMonitor = aNewMonitor;
+
+          // Revalidate and reset frontend while toolbox is on the side.
+          validateNewPrefValues();
+          resetFrontend();
+
+          return restartNetMonitor(aMonitor);
+        })
+        .then(([,, aNewMonitor]) => {
+          aMonitor = aNewMonitor;
+
+          // Revalidate.
+          validateFirstPrefValues();
+        });
+    }
+
+    function testWindow() {
+      info("Moving toolbox into a window...");
+
+      return aMonitor._toolbox.switchHost(Toolbox.HostType.WINDOW)
+        .then(() => {
+          info("Testing prefs reload for a window host.");
+          storeFirstPrefValues();
+
+          // Validate and modify frontend while toolbox is in a window.
+          validateFirstPrefValues();
+          modifyFrontend();
+
+          return restartNetMonitor(aMonitor);
+        })
+        .then(([,, aNewMonitor]) => {
+          aMonitor = aNewMonitor;
+
+          // Revalidate and reset frontend while toolbox is in a window.
+          validateNewPrefValues();
+          resetFrontend();
+
+          return restartNetMonitor(aMonitor);
+        })
+        .then(([,, aNewMonitor]) => {
+          aMonitor = aNewMonitor;
+
+          // Revalidate.
+          validateFirstPrefValues();
+        });
+    }
+
+    function cleanupAndFinish() {
+      info("Moving toolbox back to the bottom...");
+
+      aMonitor._toolbox.switchHost(Toolbox.HostType.BOTTOM)
+        .then(() => teardown(aMonitor))
+        .then(finish);
+    }
+
+    testBottom()
+      .then(testSide)
+      .then(testWindow)
+      .then(cleanupAndFinish);
   });
 }

browser/devtools/netmonitor/test/head.js

@@ -7,6 +7,7 @@ const { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
 let { Services } = Cu.import("resource://gre/modules/Services.jsm", {});
 let { Promise } = Cu.import("resource://gre/modules/commonjs/sdk/core/promise.js", {});
 let { TargetFactory } = Cu.import("resource:///modules/devtools/Target.jsm", {});
+let { Toolbox } = Cu.import("resource:///modules/devtools/Toolbox.jsm", {});
 let { gDevTools } = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
 
 const EXAMPLE_URL = "http://example.com/browser/browser/devtools/netmonitor/test/";