Bug 1588089 - The Search panel should auto focus the input box when selected. r=Honza

Differential Revision: https://phabricator.services.mozilla.com/D49000

--HG--
extra : moz-landing-system : lando

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

@@ -68,7 +68,7 @@ class NetworkActionBar extends Component {
         showSearchPanel &&
           TabPanel(
             {
-              id: "network-action-bar-search",
+              id: PANELS.SEARCH,
               title: L10N.getStr("netmonitor.actionbar.search"),
               className: "network-action-bar-search",
             },

devtools/client/netmonitor/src/components/search/SearchPanel.js

@@ -12,6 +12,7 @@ const {
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { div, span } = dom;
 const Actions = require("devtools/client/netmonitor/src/actions/index");
+const { PANELS } = require("../../constants");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const {
   connect,
@@ -47,6 +48,7 @@ class SearchPanel extends Component {
       query: PropTypes.string.isRequired,
       results: PropTypes.array,
       navigate: PropTypes.func.isRequired,
+      isDisplaying: PropTypes.bool.isRequired,
     };
   }
 
@@ -66,6 +68,12 @@ class SearchPanel extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.isDisplaying && !prevProps.isDisplaying) {
+      this.searchboxRef.current.focus();
+    }
+  }
+
   onClickTreeRow(path, event, member) {
     if (member.object.parentResource) {
       this.props.navigate(member.object);
@@ -234,6 +242,7 @@ module.exports = connect(
     caseSensitive: state.search.caseSensitive,
     results: state.search.results,
     ongoingSearch: state.search.ongoingSearch,
+    isDisplaying: state.ui.selectedActionBarTabId === PANELS.SEARCH,
     status: state.search.status,
   }),
   dispatch => ({

devtools/client/netmonitor/src/constants.js

@@ -208,6 +208,7 @@ const PANELS = {
   SECURITY: "security",
   STACK_TRACE: "stack-trace",
   TIMINGS: "timings",
+  SEARCH: "network-action-bar-search",
   BLOCKING: "network-action-bar-blocked",
 };