Bug 1442884 - Show request details button does not work when the first request list item is not shown using any filters. r=Honza a=jcristau
authormayank.raj <mayank9856@gmail.com>
Fri, 06 Apr 2018 18:54:15 +0530
changeset 463204 4f4f03584f6a7ce3bc5278b97cd0a090116db501
parent 463203 99690fed70cc2a25e1b78efd2ec445969e92f3e7
child 463205 ce914d685d4950e0aa70d76534481edd6200ecdc
push id1683
push usersfraser@mozilla.com
push dateThu, 26 Apr 2018 16:43:40 +0000
treeherdermozilla-release@5af6cb21869d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza, jcristau
bugs1442884
milestone60.0
Bug 1442884 - Show request details button does not work when the first request list item is not shown using any filters. r=Honza a=jcristau MozReview-Commit-ID: uE44j14qMB
devtools/client/netmonitor/src/actions/ui.js
devtools/client/netmonitor/src/reducers/requests.js
devtools/client/netmonitor/test/browser.ini
devtools/client/netmonitor/test/browser_net_pane-network-details.js
--- a/devtools/client/netmonitor/src/actions/ui.js
+++ b/devtools/client/netmonitor/src/actions/ui.js
@@ -12,25 +12,33 @@ const {
   DISABLE_BROWSER_CACHE,
   OPEN_STATISTICS,
   RESET_COLUMNS,
   SELECT_DETAILS_PANEL_TAB,
   TOGGLE_COLUMN,
   WATERFALL_RESIZE,
 } = require("../constants");
 
+const { getDisplayedRequests } = require("../selectors/index");
+
 /**
  * Change network details panel.
  *
  * @param {boolean} open - expected network details panel open state
  */
 function openNetworkDetails(open) {
-  return {
-    type: OPEN_NETWORK_DETAILS,
-    open,
+  return (dispatch, getState) => {
+    const visibleRequestItems = getDisplayedRequests(getState());
+    let defaultSelectedId = visibleRequestItems.length ? visibleRequestItems[0].id : null;
+
+    return dispatch({
+      type: OPEN_NETWORK_DETAILS,
+      open,
+      defaultSelectedId,
+    });
   };
 }
 
 /**
  * Change network details panel size.
  *
  * @param {integer} width
  * @param {integer} height
--- a/devtools/client/netmonitor/src/reducers/requests.js
+++ b/devtools/client/netmonitor/src/reducers/requests.js
@@ -172,18 +172,18 @@ function requestsReducer(state = Request
     // Side bar with request details opened.
     case OPEN_NETWORK_DETAILS: {
       let nextState = { ...state };
       if (!action.open) {
         nextState.selectedId = null;
         return nextState;
       }
 
-      if (!state.selectedId && state.requests.size > 0) {
-        nextState.selectedId = [...state.requests.values()][0].id;
+      if (!state.selectedId && action.defaultSelectedId) {
+        nextState.selectedId = action.defaultSelectedId;
         return nextState;
       }
 
       return state;
     }
 
     default:
       return state;
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -134,16 +134,17 @@ skip-if = (os == 'linux' && debug && bit
 [browser_net_json_text_mime.js]
 [browser_net_jsonp.js]
 [browser_net_large-response.js]
 [browser_net_leak_on_tab_close.js]
 [browser_net_open_in_debugger.js]
 [browser_net_open_in_style_editor.js]
 [browser_net_open_request_in_tab.js]
 [browser_net_pane-collapse.js]
+[browser_net_pane-network-details.js]
 [browser_net_pane-toggle.js]
 [browser_net_pause.js]
 [browser_net_params_sorted.js]
 [browser_net_persistent_logs.js]
 [browser_net_post-data-01.js]
 [browser_net_post-data-02.js]
 [browser_net_post-data-03.js]
 [browser_net_post-data-04.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_pane-network-details.js
@@ -0,0 +1,127 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test the action of request details panel when filters are applied.
+ * If there are any visible requests, the first request from the
+ * list of visible requests should be displayed in the network
+ * details panel
+ * If there are no visible requests the panel should remain closed
+ */
+
+const REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS = [
+  { url: "sjs_content-type-test-server.sjs?fmt=html&res=undefined&text=Sample" },
+  { url: "sjs_content-type-test-server.sjs?fmt=css&text=sample" },
+  { url: "sjs_content-type-test-server.sjs?fmt=js&text=sample" },
+  { url: "sjs_content-type-test-server.sjs?fmt=font" },
+  { url: "sjs_content-type-test-server.sjs?fmt=image" },
+  { url: "sjs_content-type-test-server.sjs?fmt=audio" },
+  { url: "sjs_content-type-test-server.sjs?fmt=video" },
+  { url: "sjs_content-type-test-server.sjs?fmt=flash" },
+  { url: "sjs_content-type-test-server.sjs?fmt=ws" },
+];
+
+add_task(async function() {
+  let { monitor } = await initNetMonitor(FILTERING_URL);
+  let { document, store, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+  let {
+    getSelectedRequest,
+    getSortedRequests,
+  } = windowRequire("devtools/client/netmonitor/src/selectors/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  function setFreetextFilter(value) {
+    store.dispatch(Actions.setRequestFilterText(value));
+  }
+
+  info("Starting test... ");
+
+  let wait = waitForNetworkEvents(monitor, 9);
+  loadFrameScriptUtils();
+  await performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
+  await wait;
+
+  let toggleButton = document.querySelector(".network-details-panel-toggle");
+
+  info("Test with the first request in the list visible");
+  EventUtils.sendMouseEvent({ type: "click" },
+      document.querySelector(".requests-list-filter-all-button"));
+  testDetailsPanel(true, 0);
+
+  info("Test with first request in the list not visible");
+  EventUtils.sendMouseEvent({ type: "click" },
+      document.querySelector(".requests-list-filter-all-button"));
+  EventUtils.sendMouseEvent({ type: "click" },
+      document.querySelector(".requests-list-filter-js-button"));
+  testFilterButtons(monitor, "js");
+  testDetailsPanel(true, 2);
+
+  info("Test with no request in the list visible i.e. no request match the filters");
+  EventUtils.sendMouseEvent({ type: "click" },
+      document.querySelector(".requests-list-filter-all-button"));
+  setFreetextFilter("foobar");
+  // The network details panel should not open as there are no available requests visible
+  testDetailsPanel(false);
+
+  await teardown(monitor);
+
+  function getSelectedIndex(state) {
+    if (!state.requests.selectedId) {
+      return -1;
+    }
+    return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
+  }
+
+  async function testDetailsPanel(shouldPanelOpen, selectedItemIndex = 0) {
+    // Expected default state should be panel closed
+    if (shouldPanelOpen) {
+      // Toggle switch should be enabled only when there are visible requests
+      is(toggleButton.hasAttribute("disabled"), false,
+          "The pane toggle button should be enabled.");
+    } else {
+      is(toggleButton.hasAttribute("disabled"), true,
+          "The pane toggle button should be disabled.");
+    }
+
+    is(toggleButton.classList.contains("pane-collapsed"), true,
+        "The pane toggle button should still indicate that the details pane is " +
+        "collapsed.");
+    is(!!document.querySelector(".network-details-panel"), false,
+        "The details pane should still be hidden.");
+    is(getSelectedRequest(store.getState()), null,
+        "There should still be no selected item in the requests menu.");
+
+    // Trigger the details panel toggle action
+    EventUtils.sendMouseEvent({ type: "click" }, toggleButton);
+
+    if (shouldPanelOpen) {
+      is(toggleButton.hasAttribute("disabled"), false,
+          "The pane toggle button should still be enabled after being pressed.");
+      is(toggleButton.classList.contains("pane-collapsed"), false,
+          "The pane toggle button should now indicate that the details pane is " +
+          "not collapsed anymore after being pressed.");
+      is(!!document.querySelector(".network-details-panel"), true,
+          "The details pane should not be hidden after toggle button was pressed.");
+      isnot(getSelectedRequest(store.getState()), null,
+          "There should be a selected item in the requests menu.");
+      is(getSelectedIndex(store.getState()), selectedItemIndex,
+          `The item index ${selectedItemIndex} should be selected in the requests menu.`);
+      // Close the panel
+      EventUtils.sendMouseEvent({ type: "click" }, toggleButton);
+    } else {
+      is(toggleButton.hasAttribute("disabled"), true,
+          "The pane toggle button should be disabled.");
+      is(toggleButton.classList.contains("pane-collapsed"), true,
+          "The pane toggle button should still indicate that the details pane is " +
+          "collapsed.");
+      is(!!document.querySelector(".network-details-panel"), false,
+          "The details pane should still be hidden.");
+      is(getSelectedRequest(store.getState()), null,
+          "There should still be no selected item in the requests menu.");
+    }
+  }
+});