Bug 1227746 - Hide side panels when related request is filtered out. r=rickychien

MozReview-Commit-ID: 6QolncXMVfh

--HG--
extra : rebase_source : 765519f55b10b137212468c72019dc2de473733c

devtools/client/netmonitor/src/components/MonitorPanel.js

@@ -13,7 +13,10 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
 const Actions = require("../actions/index");
 const { updateFormDataSections } = require("../utils/request-utils");
-const { getSelectedRequest } = require("../selectors/index");
+const {
+  getSelectedRequest,
+  isSelectedRequestVisible,
+} = require("../selectors/index");
 
 // Components
 const SplitBox = createFactory(require("devtools/client/shared/components/splitter/SplitBox"));
@@ -38,6 +41,7 @@ class MonitorPanel extends Component {
       networkDetailsOpen: PropTypes.bool.isRequired,
       openNetworkDetails: PropTypes.func.isRequired,
       request: PropTypes.object,
+      selectedRequestVisible: PropTypes.func.isRequired,
       sourceMapService: PropTypes.object,
       openLink: PropTypes.func,
       updateRequest: PropTypes.func.isRequired,
@@ -62,6 +66,13 @@ class MonitorPanel extends Component {
     updateFormDataSections(nextProps);
   }
 
+  componentDidUpdate() {
+    let { selectedRequestVisible, openNetworkDetails } = this.props;
+    if (!selectedRequestVisible) {
+      openNetworkDetails(false);
+    }
+  }
+
   componentWillUnmount() {
     MediaQueryList.removeListener(this.onLayoutChange);
 
@@ -128,6 +139,7 @@ module.exports = connect(
     isEmpty: state.requests.requests.isEmpty(),
     networkDetailsOpen: state.ui.networkDetailsOpen,
     request: getSelectedRequest(state),
+    selectedRequestVisible: isSelectedRequestVisible(state),
   }),
   (dispatch) => ({
     openNetworkDetails: (open) => dispatch(Actions.openNetworkDetails(open)),

devtools/client/netmonitor/src/selectors/requests.js

@@ -129,6 +129,13 @@ const getSelectedRequest = createSelector(
   ({ selectedId, requests }) => selectedId ? requests.get(selectedId) : undefined
 );
 
+const isSelectedRequestVisible = createSelector(
+  state => state.requests,
+  getDisplayedRequests,
+  ({ selectedId }, displayedRequests) =>
+    displayedRequests.some(r => r.id === selectedId)
+);
+
 function getRequestById(state, id) {
   return state.requests.requests.get(id);
 }
@@ -154,4 +161,5 @@ module.exports = {
   getSelectedRequest,
   getSortedRequests,
   getTypeFilteredRequests,
+  isSelectedRequestVisible,
 };

devtools/client/netmonitor/test/browser_net_filter-01.js

@@ -312,11 +312,6 @@ add_task(function* () {
       yield waitUntil(() => requestsListStatus.title);
     }
 
-    isnot(getSelectedRequest(store.getState()), undefined,
-      "There should still be a selected item after filtering.");
-    is(getSelectedIndex(store.getState()), 0,
-      "The first item should be still selected after filtering.");
-
     let items = getSortedRequests(store.getState());
     let visibleItems;