Bug 873751 - Closing the requests details pane should deselect the currently selected item, r=rcampbell

browser/devtools/netmonitor/netmonitor-view.js

@@ -231,16 +231,14 @@ ToolbarView.prototype = {
    */
   _onTogglePanesPressed: function() {
     let requestsMenu = NetMonitorView.RequestsMenu;
-    let networkDetails = NetMonitorView.NetworkDetails;
+    let selectedIndex = requestsMenu.selectedIndex;
 
     // Make sure there's a selection if the button is pressed, to avoid
     // showing an empty network details pane.
-    if (!requestsMenu.selectedItem && requestsMenu.itemCount) {
+    if (selectedIndex == -1 && requestsMenu.itemCount) {
       requestsMenu.selectedIndex = 0;
-    }
-    // Proceed with toggling the network details pane normally.
-    else {
-      networkDetails.toggle(NetMonitorView.detailsPaneHidden);
+    } else {
+      requestsMenu.selectedIndex = -1;
     }
   },
 
@@ -929,8 +927,8 @@ create({ constructor: RequestsMenuView, proto: MenuContainer.prototype }, {
   /**
    * The mouse down listener for this container.
    */
-  _onMouseDown: function(e) {
-    let item = this.getItemForElement(e.target);
+  _onMouseDown: function({ target }) {
+    let item = this.getItemForElement(target);
     if (item) {
       // The container is not empty and we clicked on an actual item.
       this.selectedItem = item;
@@ -940,9 +938,13 @@ create({ constructor: RequestsMenuView, proto: MenuContainer.prototype }, {
   /**
    * The selection listener for this container.
    */
-  _onSelect: function(e) {
-    NetMonitorView.NetworkDetails.populate(this.selectedItem.attachment);
-    NetMonitorView.NetworkDetails.toggle(true);
+  _onSelect: function({ detail: item }) {
+    if (item) {
+      NetMonitorView.NetworkDetails.populate(item.attachment);
+      NetMonitorView.NetworkDetails.toggle(true);
+    } else {
+      NetMonitorView.NetworkDetails.toggle(false);
+    }
   },
 
   /**

browser/devtools/netmonitor/test/Makefile.in

@@ -18,6 +18,7 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_net_prefs-and-l10n.js \
 	browser_net_prefs-reload.js \
 	browser_net_pane-collapse.js \
+	browser_net_pane-toggle.js \
 	browser_net_simple-request.js \
 	browser_net_simple-request-data.js \
 	browser_net_simple-request-details.js \

browser/devtools/netmonitor/test/browser_net_pane-toggle.js

@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests if toggling the details pane works as expected.
+ */
+
+function test() {
+  initNetMonitor(SIMPLE_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    let { document, NetMonitorView } = aMonitor.panelWin;
+    let { RequestsMenu } = NetMonitorView;
+
+    RequestsMenu.lazyUpdate = false;
+
+    is(document.querySelector("#details-pane-toggle")
+      .hasAttribute("disabled"), true,
+      "The pane toggle button should be disabled when the frontend is opened.");
+    is(document.querySelector("#details-pane-toggle")
+      .hasAttribute("pane-collapsed"), true,
+      "The pane toggle button should indicate that the details pane is " +
+      "collapsed when the frontend is opened.");
+    is(NetMonitorView.detailsPaneHidden, true,
+      "The details pane should be hidden when the frontend is opened.");
+    is(RequestsMenu.selectedItem, null,
+      "There should be no selected item in the requests menu.");
+
+    aMonitor.panelWin.once("NetMonitor:NetworkEvent", () => {
+      is(document.querySelector("#details-pane-toggle")
+        .hasAttribute("disabled"), false,
+        "The pane toggle button should be enabled after the first request.");
+      is(document.querySelector("#details-pane-toggle")
+        .hasAttribute("pane-collapsed"), true,
+        "The pane toggle button should still indicate that the details pane is " +
+        "collapsed after the first request.");
+      is(NetMonitorView.detailsPaneHidden, true,
+        "The details pane should still be hidden after the first request.");
+      is(RequestsMenu.selectedItem, null,
+        "There should still be no selected item in the requests menu.");
+
+      EventUtils.sendMouseEvent({ type: "mousedown" },
+        document.getElementById("details-pane-toggle"));
+
+      is(document.querySelector("#details-pane-toggle")
+        .hasAttribute("disabled"), false,
+        "The pane toggle button should still be enabled after being pressed.");
+      is(document.querySelector("#details-pane-toggle")
+        .hasAttribute("pane-collapsed"), false,
+        "The pane toggle button should now indicate that the details pane is " +
+        "not collapsed anymore after being pressed.");
+      is(NetMonitorView.detailsPaneHidden, false,
+        "The details pane should not be hidden after toggle button was pressed.");
+      isnot(RequestsMenu.selectedItem, null,
+        "There should be a selected item in the requests menu.");
+      is(RequestsMenu.selectedIndex, 0,
+        "The first item should be selected in the requests menu.");
+
+      EventUtils.sendMouseEvent({ type: "mousedown" },
+        document.getElementById("details-pane-toggle"));
+
+      is(document.querySelector("#details-pane-toggle")
+        .hasAttribute("disabled"), false,
+        "The pane toggle button should still be enabled after being pressed again.");
+      is(document.querySelector("#details-pane-toggle")
+        .hasAttribute("pane-collapsed"), true,
+        "The pane toggle button should now indicate that the details pane is " +
+        "collapsed after being pressed again.");
+      is(NetMonitorView.detailsPaneHidden, true,
+        "The details pane should now be hidden after the toggle button was pressed again.");
+      is(RequestsMenu.selectedItem, null,
+        "There should now be no selected item in the requests menu.");
+
+      teardown(aMonitor).then(finish);
+    });
+
+    aDebuggee.location.reload();
+  });
+}

browser/devtools/shared/widgets/ViewHelpers.jsm

@@ -55,7 +55,7 @@ this.ViewHelpers = {
    *         called preventDefault.
    */
   dispatchEvent: function(aTarget, aType, aDetail) {
-    if (!aTarget) {
+    if (!(aTarget instanceof Ci.nsIDOMNode)) {
       return true; // Event cancelled.
     }
     let document = aTarget.ownerDocument || aTarget;
@@ -880,14 +880,14 @@ MenuContainer.prototype = {
   set selectedItem(aItem) {
     // A falsy item is allowed to invalidate the current selection.
     let targetElement = aItem ? aItem._target : null;
+    let prevElement = this._container.selectedItem;
 
     // Prevent selecting the same item again, so return early.
-    if (this._container.selectedItem == targetElement) {
+    if (targetElement == prevElement) {
       return;
     }
-
     this._container.selectedItem = targetElement;
-    ViewHelpers.dispatchEvent(targetElement, "select", aItem);
+    ViewHelpers.dispatchEvent(targetElement || prevElement, "select", aItem);
   },
 
   /**