Bug 969448 - Netmonitor selected filter reset to "All" upon every new page request, r=rcampbell

browser/app/profile/firefox.js

@@ -1152,6 +1152,7 @@ pref("devtools.netmonitor.enabled", true);
 pref("devtools.netmonitor.panes-network-details-width", 450);
 pref("devtools.netmonitor.panes-network-details-height", 450);
 pref("devtools.netmonitor.statistics", true);
+pref("devtools.netmonitor.filters", "[\"all\"]");
 
 // Enable the Tilt inspector
 pref("devtools.tilt.enabled", true);

browser/devtools/netmonitor/netmonitor-controller.js

@@ -691,7 +691,8 @@ let L10N = new ViewHelpers.L10N(NET_STRINGS_URI);
 let Prefs = new ViewHelpers.Prefs("devtools.netmonitor", {
   networkDetailsWidth: ["Int", "panes-network-details-width"],
   networkDetailsHeight: ["Int", "panes-network-details-height"],
-  statistics: ["Bool", "statistics"]
+  statistics: ["Bool", "statistics"],
+  filters: ["Json", "filters"]
 });
 
 /**

browser/devtools/netmonitor/netmonitor-view.js

@@ -338,7 +338,9 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     this._summary = $("#requests-menu-network-summary-label");
     this._summary.setAttribute("value", L10N.getStr("networkMenu.empty"));
 
+    Prefs.filters.forEach(type => this.filterOn(type));
     this.sortContents(this._byTiming);
+
     this.allowFocusOnRightClick = true;
     this.maintainSelectionVisible = true;
     this.widget.autoscrollWithAppendedItems = true;
@@ -386,6 +388,8 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
   destroy: function() {
     dumpn("Destroying the SourcesView");
 
+    Prefs.filters = this._activeFilters;
+
     this.widget.removeEventListener("select", this._onSelect, false);
     this._splitter.removeEventListener("mousemove", this._onResize, false);
     window.removeEventListener("resize", this._onResize, false);
@@ -414,7 +418,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
    */
   reset: function() {
     this.empty();
-    this.filterOn("all");
     this._firstRequestStartedMillis = -1;
     this._lastRequestEndedMillis = -1;
   },
@@ -604,8 +607,9 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     target.removeAttribute("checked");
 
     // Check if the filter disabled was the last one. If so, toggle all on.
-    if (this._activeFilters.length === 0)
+    if (this._activeFilters.length === 0) {
       this._enableFilter("all");
+    }
   },
 
   /**

browser/devtools/netmonitor/test/browser_net_filter-02.js

@@ -52,6 +52,12 @@ function test() {
           testButtons("html");
           return testContents([1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0]);
         })
+        .then(() => {
+          info("Resetting filters.");
+          EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+          testButtons("all");
+          return testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+        })
         .then(() => {
           return teardown(aMonitor);
         })

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

@@ -13,17 +13,33 @@ function test() {
     // hosts (bottom, side, window). This seems to be slow on debug builds.
     requestLongerTimeout(3);
 
+    // Use these getters instead of caching instances inside the panel win,
+    // since the tool is reopened a bunch of times during this test
+    // and the instances will differ.
+    let getView = () => aMonitor.panelWin.NetMonitorView;
+    let getController = () => aMonitor.panelWin.NetMonitorController;
+
     let prefsToCheck = {
+      filters: {
+        // A custom new value to be used for the verified preference.
+        newValue: ["html", "css"],
+        // Getter used to retrieve the current value from the frontend, in order
+        // to verify that the pref was applied properly.
+        validateValue: ($) => getView().RequestsMenu._activeFilters,
+        // Predicate used to modify the frontend when setting the new pref value,
+        // before trying to validate the changes.
+        modifyFrontend: ($, aValue) => aValue.forEach(e => getView().RequestsMenu.filterOn(e))
+      },
       networkDetailsWidth: {
         newValue: ~~(Math.random() * 200 + 100),
-        validate: ($) => ~~$("#details-pane").getAttribute("width"),
+        validateValue: ($) => ~~$("#details-pane").getAttribute("width"),
         modifyFrontend: ($, aValue) => $("#details-pane").setAttribute("width", aValue)
       },
       networkDetailsHeight: {
         newValue: ~~(Math.random() * 300 + 100),
-        validate: ($) => ~~$("#details-pane").getAttribute("height"),
+        validateValue: ($) => ~~$("#details-pane").getAttribute("height"),
         modifyFrontend: ($, aValue) => $("#details-pane").setAttribute("height", aValue)
-      },
+      }
       /* add more prefs here... */
     };
 
@@ -42,11 +58,11 @@ function test() {
       for (let name in prefsToCheck) {
         let currentValue = aMonitor.panelWin.Prefs[name];
         let firstValue = prefsToCheck[name].firstValue;
-        let validate = prefsToCheck[name].validate;
+        let validateValue = prefsToCheck[name].validateValue;
 
-        is(currentValue, firstValue,
+        is(currentValue.toSource(), firstValue.toSource(),
           "Pref " + name + " should be equal to first value: " + firstValue);
-        is(currentValue, validate(aMonitor.panelWin.$),
+        is(currentValue.toSource(), validateValue(aMonitor.panelWin.$).toSource(),
           "Pref " + name + " should validate: " + currentValue);
       }
     }
@@ -58,17 +74,17 @@ function test() {
         let currentValue = aMonitor.panelWin.Prefs[name];
         let firstValue = prefsToCheck[name].firstValue;
         let newValue = prefsToCheck[name].newValue;
-        let validate = prefsToCheck[name].validate;
+        let validateValue = prefsToCheck[name].validateValue;
         let modifyFrontend = prefsToCheck[name].modifyFrontend;
 
         modifyFrontend(aMonitor.panelWin.$, newValue);
         info("Modified UI element affecting " + name + " to: " + newValue);
 
-        is(currentValue, firstValue,
+        is(currentValue.toSource(), firstValue.toSource(),
           "Pref " + name + " should still be equal to first value: " + firstValue);
-        isnot(currentValue, newValue,
+        isnot(currentValue.toSource(), newValue.toSource(),
           "Pref " + name + " should't yet be equal to second value: " + newValue);
-        is(newValue, validate(aMonitor.panelWin.$),
+        is(newValue.toSource(), validateValue(aMonitor.panelWin.$).toSource(),
           "The UI element affecting " + name + " should validate: " + newValue);
       }
     }
@@ -80,13 +96,13 @@ function test() {
         let currentValue = aMonitor.panelWin.Prefs[name];
         let firstValue = prefsToCheck[name].firstValue;
         let newValue = prefsToCheck[name].newValue;
-        let validate = prefsToCheck[name].validate;
+        let validateValue = prefsToCheck[name].validateValue;
 
-        isnot(currentValue, firstValue,
+        isnot(currentValue.toSource(), firstValue.toSource(),
           "Pref " + name + " should't be equal to first value: " + firstValue);
-        is(currentValue, newValue,
+        is(currentValue.toSource(), newValue.toSource(),
           "Pref " + name + " should now be equal to second value: " + newValue);
-        is(newValue, validate(aMonitor.panelWin.$),
+        is(newValue.toSource(), validateValue(aMonitor.panelWin.$).toSource(),
           "The UI element affecting " + name + " should validate: " + newValue);
       }
     }
@@ -98,17 +114,17 @@ function test() {
         let currentValue = aMonitor.panelWin.Prefs[name];
         let firstValue = prefsToCheck[name].firstValue;
         let newValue = prefsToCheck[name].newValue;
-        let validate = prefsToCheck[name].validate;
+        let validateValue = prefsToCheck[name].validateValue;
         let modifyFrontend = prefsToCheck[name].modifyFrontend;
 
         modifyFrontend(aMonitor.panelWin.$, firstValue);
         info("Modified UI element affecting " + name + " to: " + firstValue);
 
-        isnot(currentValue, firstValue,
+        isnot(currentValue.toSource(), firstValue.toSource(),
           "Pref " + name + " should't yet be equal to first value: " + firstValue);
-        is(currentValue, newValue,
+        is(currentValue.toSource(), newValue.toSource(),
           "Pref " + name + " should still be equal to second value: " + newValue);
-        is(firstValue, validate(aMonitor.panelWin.$),
+        is(firstValue.toSource(), validateValue(aMonitor.panelWin.$).toSource(),
           "The UI element affecting " + name + " should validate: " + firstValue);
       }
     }

browser/devtools/netmonitor/test/head.js

@@ -44,12 +44,16 @@ const TEST_IMAGE = EXAMPLE_URL + "test-image.png";
 waitForExplicitFinish();
 
 // Enable logging for all the relevant tests.
-let gEnableLogging = Services.prefs.getBoolPref("devtools.debugger.log");
+const gEnableLogging = Services.prefs.getBoolPref("devtools.debugger.log");
 Services.prefs.setBoolPref("devtools.debugger.log", true);
 
+// Always reset some prefs to their original values after the test finishes.
+const gDefaultFilters = Services.prefs.getCharPref("devtools.netmonitor.filters");
+
 registerCleanupFunction(() => {
   info("finish() was called, cleaning up...");
   Services.prefs.setBoolPref("devtools.debugger.log", gEnableLogging);
+  Services.prefs.setCharPref("devtools.netmonitor.filters", gDefaultFilters);
 });
 
 function addTab(aUrl, aWindow) {

browser/devtools/shared/widgets/ViewHelpers.jsm

@@ -395,15 +395,23 @@ ViewHelpers.Prefs.prototype = {
 
   /**
    * Maps a property name to a pref, defining lazy getters and setters.
+   * Supported types are "Bool", "Char", "Int" and "Json" (which is basically
+   * just sugar for "Char" using the standard JSON serializer).
    *
    * @param string aAccessorName
    * @param string aType
    * @param string aPrefName
+   * @param array aSerializer
    */
-  map: function(aAccessorName, aType, aPrefName) {
+  map: function(aAccessorName, aType, aPrefName, aSerializer = { in: e => e, out: e => e }) {
+    if (aType == "Json") {
+      this.map(aAccessorName, "Char", aPrefName, { in: JSON.parse, out: JSON.stringify });
+      return;
+    }
+
     Object.defineProperty(this, aAccessorName, {
-      get: () => this._get(aType, [this.root, aPrefName].join(".")),
+      get: () => aSerializer.in(this._get(aType, [this.root, aPrefName].join("."))),
-      set: (aValue) => this._set(aType, [this.root, aPrefName].join("."), aValue)
+      set: (e) => this._set(aType, [this.root, aPrefName].join("."), aSerializer.out(e))
     });
   }
 };

browser/themes/shared/devtools/netmonitor.inc.css

@@ -502,6 +502,14 @@ box.requests-menu-status {
   border-top: solid 1px hsla(210,5%,5%,.3);
 }
 
+.theme-dark #requests-menu-footer {
+  background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
+}
+
+.theme-light #requests-menu-footer {
+  background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */
+}
+
 .requests-menu-footer-button,
 .requests-menu-footer-label {
   min-width: 1em;