Bug 1416194 - Reduce Toolbar component updates in netmonitor. r=gasolin

MozReview-Commit-ID: Apwj73aeC0U

--HG--
extra : rebase_source : 2bc8501263dc44497971ceeded8bac31b62d8e1b

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

@@ -12,12 +12,12 @@ const {
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
+const I = require("devtools/client/shared/vendor/immutable");
 
 const Actions = require("../actions/index");
 const { FILTER_SEARCH_DELAY, FILTER_TAGS } = require("../constants");
 const {
   getRecordingState,
-  getRequestFilterTypes,
   getTypeFilteredRequests,
   isNetworkDetailsToggleButtonDisabled,
 } = require("../selectors/index");
@@ -62,7 +62,7 @@ class Toolbar extends Component {
       toggleRecording: PropTypes.func.isRequired,
       recording: PropTypes.bool.isRequired,
       clearRequests: PropTypes.func.isRequired,
-      requestFilterTypes: PropTypes.array.isRequired,
+      requestFilterTypes: PropTypes.object.isRequired,
       setRequestFilterText: PropTypes.func.isRequired,
       networkDetailsToggleDisabled: PropTypes.bool.isRequired,
       networkDetailsOpen: PropTypes.bool.isRequired,
@@ -93,6 +93,18 @@ class Toolbar extends Component {
                                this.updateBrowserCacheDisabled);
   }
 
+  shouldComponentUpdate(nextProps) {
+    return this.props.networkDetailsOpen !== nextProps.networkDetailsOpen
+    || this.props.networkDetailsToggleDisabled !== nextProps.networkDetailsToggleDisabled
+    || this.props.persistentLogsEnabled !== nextProps.persistentLogsEnabled
+    || this.props.browserCacheDisabled !== nextProps.browserCacheDisabled
+    || this.props.recording !== nextProps.recording
+    || !I.is(this.props.requestFilterTypes, nextProps.requestFilterTypes)
+
+    // Filtered requests are useful only when searchbox is focused
+    || this.refs.searchbox && this.refs.searchbox.focused;
+  }
+
   componentWillUnmount() {
     Services.prefs.removeObserver(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
                                   this.updatePersistentLogsEnabled);
@@ -138,7 +150,7 @@ class Toolbar extends Component {
     } = this.props;
 
     // Render list of filter-buttons.
-    let buttons = requestFilterTypes.map(([type, checked]) => {
+    let buttons = requestFilterTypes.entrySeq().toArray().map(([type, checked]) => {
       let classList = ["devtools-button", `requests-list-filter-${type}-button`];
       checked && classList.push("checked");
 
@@ -227,6 +239,7 @@ class Toolbar extends Component {
             keyShortcut: SEARCH_KEY_SHORTCUT,
             placeholder: SEARCH_PLACE_HOLDER,
             type: "filter",
+            ref: "searchbox",
             onChange: setRequestFilterText,
             autocompleteProvider: this.autocompleteProvider,
           }),
@@ -251,7 +264,7 @@ module.exports = connect(
     networkDetailsOpen: state.ui.networkDetailsOpen,
     persistentLogsEnabled: state.ui.persistentLogsEnabled,
     recording: getRecordingState(state),
-    requestFilterTypes: getRequestFilterTypes(state),
+    requestFilterTypes: state.filters.requestFilterTypes,
   }),
   (dispatch) => ({
     clearRequests: () => dispatch(Actions.clearRequests()),

devtools/client/netmonitor/src/middleware/prefs.js

@@ -13,7 +13,6 @@ const {
   ENABLE_PERSISTENT_LOGS,
   DISABLE_BROWSER_CACHE,
 } = require("../constants");
-const { getRequestFilterTypes } = require("../selectors/index");
 
 /**
   * Update the relevant prefs when:
@@ -26,7 +25,8 @@ function prefsMiddleware(store) {
     switch (action.type) {
       case ENABLE_REQUEST_FILTER_TYPE_ONLY:
       case TOGGLE_REQUEST_FILTER_TYPE:
-        let filters = getRequestFilterTypes(store.getState())
+        let filters = store.getState().filters.requestFilterTypes
+          .entrySeq().toArray()
           .filter(([type, check]) => check)
           .map(([type, check]) => type);
         Services.prefs.setCharPref(

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

@@ -1,13 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-function getRequestFilterTypes(state) {
-  return state.filters.requestFilterTypes.entrySeq().toArray();
-}
-
-module.exports = {
-  getRequestFilterTypes,
-};

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

@@ -4,13 +4,11 @@
 
 "use strict";
 
-const filters = require("./filters");
 const requests = require("./requests");
 const timingMarkers = require("./timing-markers");
 const ui = require("./ui");
 
 Object.assign(exports,
-  filters,
   requests,
   timingMarkers,
   ui

devtools/client/netmonitor/src/selectors/moz.build

@@ -3,7 +3,6 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
-    'filters.js',
     'index.js',
     'requests.js',
     'timing-markers.js',

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

@@ -9,8 +9,6 @@
 
 add_task(function* () {
   let { monitor } = yield initNetMonitor(SIMPLE_URL);
-  let { getRequestFilterTypes } = monitor.panelWin
-    .windowRequire("devtools/client/netmonitor/src/selectors/index");
   let Actions = monitor.panelWin
     .windowRequire("devtools/client/netmonitor/src/actions/index");
   info("Starting test... ");
@@ -34,7 +32,8 @@ add_task(function* () {
       newValue: ["html", "css"],
       // Getter used to retrieve the current value from the frontend, in order
       // to verify that the pref was applied properly.
-      validateValue: () => getRequestFilterTypes(getState())
+      validateValue: () => getState().filters.requestFilterTypes
+        .entrySeq().toArray()
         .filter(([type, check]) => check)
         .map(([type, check]) => type),
       // Predicate used to modify the frontend when setting the new pref value,