Bug 1587918 - Focus on the add input when the request blocking pane is shown r=Honza
authorDavid Walsh <dwalsh@mozilla.com>
Fri, 11 Oct 2019 12:56:26 +0000
changeset 497288 0046bcf5b1ffbe34e42b2c376cd4a9839ff7e165
parent 497287 42d3ccf69629e077b151538a9aad733f82a52a0c
child 497289 0f96b33c8efdde9423b068e9da3db4e229a65c05
push id97781
push userdwalsh@mozilla.com
push dateFri, 11 Oct 2019 14:04:34 +0000
treeherderautoland@0046bcf5b1ff [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1587918
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1587918 - Focus on the add input when the request blocking pane is shown r=Honza Differential Revision: https://phabricator.services.mozilla.com/D48910
devtools/client/netmonitor/src/components/request-blocking/RequestBlockingPanel.js
--- a/devtools/client/netmonitor/src/components/request-blocking/RequestBlockingPanel.js
+++ b/devtools/client/netmonitor/src/components/request-blocking/RequestBlockingPanel.js
@@ -16,51 +16,59 @@ const {
   ul,
 } = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const {
   connect,
 } = require("devtools/client/shared/redux/visibility-handler-connect");
 const Actions = require("../../actions/index");
 const { L10N } = require("../../utils/l10n");
+const { PANELS } = require("../../constants");
 
 const ENABLE_BLOCKING_LABEL = L10N.getStr(
   "netmonitor.actionbar.enableBlocking"
 );
 const ADD_BUTTON_TOOLTIP = L10N.getStr("netmonitor.actionbar.addBlockedUrl");
 const ADD_URL_PLACEHOLDER = L10N.getStr(
   "netmonitor.actionbar.blockSearchPlaceholder"
 );
 const REMOVE_URL_TOOLTIP = L10N.getStr("netmonitor.actionbar.removeBlockedUrl");
 
 class RequestBlockingPanel extends Component {
   static get propTypes() {
     return {
       blockedUrls: PropTypes.array.isRequired,
       addBlockedUrl: PropTypes.func.isRequired,
+      isDisplaying: PropTypes.bool.isRequired,
       removeBlockedUrl: PropTypes.func.isRequired,
       toggleBlockingEnabled: PropTypes.func.isRequired,
       toggleBlockedUrl: PropTypes.func.isRequired,
       updateBlockedUrl: PropTypes.func.isRequired,
       blockingEnabled: PropTypes.bool.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
       editingUrl: null,
     };
   }
 
+  componentDidMount() {
+    this.refs.addInput.focus();
+  }
+
   componentDidUpdate(prevProps) {
     if (this.state.editingUrl) {
       this.refs.editInput.focus();
       this.refs.editInput.select();
+    } else if (this.props.isDisplaying && !prevProps.isDisplaying) {
+      this.refs.addInput.focus();
     }
   }
 
   renderEnableBar() {
     return div(
       { className: "request-blocking-enable-bar" },
       div(
         { className: "request-blocking-enable-form" },
@@ -226,16 +234,17 @@ class RequestBlockingPanel extends Compo
     );
   }
 }
 
 module.exports = connect(
   state => ({
     blockedUrls: state.requestBlocking.blockedUrls,
     blockingEnabled: state.requestBlocking.blockingEnabled,
+    isDisplaying: state.ui.selectedActionBarTabId === PANELS.BLOCKING,
   }),
   dispatch => ({
     toggleBlockingEnabled: checked =>
       dispatch(Actions.toggleBlockingEnabled(checked)),
     addBlockedUrl: url => dispatch(Actions.addBlockedUrl(url)),
     removeBlockedUrl: url => dispatch(Actions.removeBlockedUrl(url)),
     toggleBlockedUrl: url => dispatch(Actions.toggleBlockedUrl(url)),
     updateBlockedUrl: (oldUrl, newUrl) =>