Bug 1412837 - clean shouldComponentupdate draft
authorFred Lin <gasolin@gmail.com>
Tue, 31 Oct 2017 13:34:39 +0800
changeset 689152 a359d0c10c0ed2af99c22acc5f538ac9c18e0bf4
parent 689081 083a9c84fbd09a6ff9bfecabbf773650842fe1c0
child 689169 d3147bb47bdee7bed49dc285d3f28b40e1135eeb
child 689177 a86d5cdbfe3589012dd71fa5f87e5be8a2dc8810
child 689201 553f52935a5598e4540d5d49a13c4dc3736d3013
push id86936
push userbmo:gasolin@mozilla.com
push dateTue, 31 Oct 2017 05:34:55 +0000
bugs1412837
milestone58.0a1
Bug 1412837 - clean shouldComponentupdate MozReview-Commit-ID: 6v5JPh05kX2
devtools/client/netmonitor/src/components/Toolbar.js
devtools/client/shared/components/SearchBox.js
--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -7,20 +7,20 @@
 const Services = require("Services");
 const {
   Component,
   createFactory,
   DOM,
   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 {
-  getDisplayedRequestsSummary,
   getRecordingState,
   getRequestFilterTypes,
   getTypeFilteredRequests,
   isNetworkDetailsToggleButtonDisabled,
 } = require("../selectors/index");
 
 const { autocompleteProvider } = require("../utils/filter-autocomplete-provider");
 const { L10N } = require("../utils/l10n");
@@ -57,17 +57,17 @@ const DISABLE_CACHE_LABEL = L10N.getStr(
  * as well as set of filters for filtering the content.
  */
 class Toolbar extends Component {
   static get propTypes() {
     return {
       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,
       toggleNetworkDetails: PropTypes.func.isRequired,
       enablePersistentLogs: PropTypes.func.isRequired,
       togglePersistentLogs: PropTypes.func.isRequired,
       persistentLogsEnabled: PropTypes.bool.isRequired,
       disableBrowserCache: PropTypes.func.isRequired,
@@ -87,16 +87,28 @@ class Toolbar extends Component {
 
   componentDidMount() {
     Services.prefs.addObserver(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
                                this.updatePersistentLogsEnabled);
     Services.prefs.addObserver(DEVTOOLS_DISABLE_CACHE_PREF,
                                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.focused;
+  }
+
   componentWillUnmount() {
     Services.prefs.removeObserver(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
                                   this.updatePersistentLogsEnabled);
     Services.prefs.removeObserver(DEVTOOLS_DISABLE_CACHE_PREF,
                                   this.updateBrowserCacheDisabled);
   }
 
   toggleRequestFilterType(evt) {
@@ -138,17 +150,17 @@ class Toolbar extends Component {
       "devtools-button",
     ];
 
     if (!networkDetailsOpen) {
       toggleButtonClassName.push("pane-collapsed");
     }
 
     // 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");
 
       return (
         button({
           className: classList.join(" "),
           key: type,
           onClick: this.toggleRequestFilterType,
@@ -215,16 +227,17 @@ class Toolbar extends Component {
         ),
         span({ className: "devtools-toolbar-group" },
           SearchBox({
             delay: FILTER_SEARCH_DELAY,
             keyShortcut: SEARCH_KEY_SHORTCUT,
             placeholder: SEARCH_PLACE_HOLDER,
             type: "filter",
             onChange: setRequestFilterText,
+            ref: "searchbox",
             autocompleteProvider: filter =>
               autocompleteProvider(filter, filteredRequests),
           }),
           button({
             className: toggleButtonClassName.join(" "),
             title: networkDetailsOpen ? COLLAPSE_DETAILS_PANE : EXPAND_DETAILS_PANE,
             disabled: networkDetailsToggleDisabled,
             tabIndex: "0",
@@ -238,19 +251,18 @@ class Toolbar extends Component {
 
 module.exports = connect(
   (state) => ({
     networkDetailsToggleDisabled: isNetworkDetailsToggleButtonDisabled(state),
     networkDetailsOpen: state.ui.networkDetailsOpen,
     persistentLogsEnabled: state.ui.persistentLogsEnabled,
     browserCacheDisabled: state.ui.browserCacheDisabled,
     recording: getRecordingState(state),
-    requestFilterTypes: getRequestFilterTypes(state),
+    requestFilterTypes: state.filters.requestFilterTypes,
     filteredRequests: getTypeFilteredRequests(state),
-    summary: getDisplayedRequestsSummary(state),
   }),
   (dispatch) => ({
     clearRequests: () => dispatch(Actions.clearRequests()),
     disableBrowserCache: (disabled) => dispatch(Actions.disableBrowserCache(disabled)),
     enablePersistentLogs: (enabled) => dispatch(Actions.enablePersistentLogs(enabled)),
     setRequestFilterText: (text) => dispatch(Actions.setRequestFilterText(text)),
     toggleBrowserCache: () => dispatch(Actions.toggleBrowserCache()),
     toggleNetworkDetails: () => dispatch(Actions.toggleNetworkDetails()),
--- a/devtools/client/shared/components/SearchBox.js
+++ b/devtools/client/shared/components/SearchBox.js
@@ -27,17 +27,22 @@ module.exports = createClass({
 
   getInitialState() {
     return {
       value: "",
       focused: false,
     };
   },
 
-  componentDidMount() {
+  shouldComponentUpdate(nextProps, nextState) {
+        return this.state.value !== nextState.value ||
+               this.state.focused !== nextState.focused;
+  },
+
+    componentDidMount() {
     if (!this.props.keyShortcut) {
       return;
     }
 
     this.shortcuts = new KeyShortcuts({
       window
     });
     this.shortcuts.on(this.props.keyShortcut, (name, event) => {