Allow to open search panel with Ctrl+F

newIDE/app/src/EventsSheet/SearchPanel.js

@@ -31,6 +31,7 @@ type State = {|
 |};
 
 export default class SearchPanel extends PureComponent<Props, State> {
+  searchTextField: ?TextField;
   state = {
     searchDirty: false,
     searchText: '',
@@ -39,6 +40,12 @@ export default class SearchPanel extends PureComponent<Props, State> {
     searchInSelection: false,
   };
 
+  focus = () => {
+    if (this.searchTextField) {
+      this.searchTextField.focus();
+    }
+  }
+
   launchSearch = () => {
     const { searchText, searchInSelection, matchCase } = this.state;
     this.props.onSearchInEvents({
@@ -92,6 +99,7 @@ export default class SearchPanel extends PureComponent<Props, State> {
         <Column>
           <Line alignItems="baseline">
             <TextField
+              ref={_searchTextField => this.searchTextField = _searchTextField}
               hintText="Text to search"
               onChange={(e, searchText) =>
                 this.setState({ searchText, searchDirty: true })}

newIDE/app/src/EventsSheet/index.js

@@ -120,6 +120,7 @@ export default class EventsSheet extends React.Component<Props, State> {
   _keyboardShortcuts: KeyboardShortcuts;
   _eventsTree: EventsTree;
   _eventSearcher: ?EventsSearcher;
+  _searchPanel: ?SearchPanel;
   eventContextMenu: ContextMenu;
   instructionContextMenu: ContextMenu;
   instructionsListContextMenu: ContextMenu;
@@ -170,6 +171,7 @@ export default class EventsSheet extends React.Component<Props, State> {
       onCopy: this.copySelection,
       onCut: this.cutSelection,
       onPaste: this.pasteEventsOrInstructions,
+      onSearch: this._toggleSearchPanel,
     });
   }
 
@@ -210,16 +212,23 @@ export default class EventsSheet extends React.Component<Props, State> {
   }
 
   _toggleSearchPanel = () => {
-    this.setState(state => {
-      const show = !state.showSearchPanel;
-      if (!show) { 
-        if (this._eventSearcher) this._eventSearcher.reset();
-      }
+    this.setState(
+      state => {
+        const show = !state.showSearchPanel;
+        if (!show) {
+          if (this._eventSearcher) this._eventSearcher.reset();
+        }
 
-      return {
-      showSearchPanel: show,
-      };
-    });
+        return {
+          showSearchPanel: show,
+        };
+      },
+      () => {
+        if (this.state.showSearchPanel && this._searchPanel) {
+          this._searchPanel.focus();
+        }
+      }
+    );
   };
 
   addSubEvents = () => {
@@ -667,7 +676,7 @@ export default class EventsSheet extends React.Component<Props, State> {
     return (
       <EventsSearcher
         key={events.ptr}
-        ref={eventSearcher => this._eventSearcher = eventSearcher}
+        ref={eventSearcher => (this._eventSearcher = eventSearcher)}
         events={events}
         project={project}
         layout={layout}
@@ -717,6 +726,7 @@ export default class EventsSheet extends React.Component<Props, State> {
             />
             {this.state.showSearchPanel && (
               <SearchPanel
+                ref={searchPanel => (this._searchPanel = searchPanel)}
                 onSearchInEvents={inputs =>
                   this._searchInEvents(searchInEvents, inputs)}
                 onReplaceInEvents={inputs =>

newIDE/app/src/UI/KeyboardShortcuts/index.js

@@ -14,6 +14,7 @@ const MINUS_KEY = 189;
 const NUMPAD_ADD = 107;
 const NUMPAD_SUBSTRACT = 109;
 const C_KEY = 67;
+const F_KEY = 70;
 const V_KEY = 86;
 const X_KEY = 88;
 const Y_KEY = 89;
@@ -29,6 +30,7 @@ export default class KeyboardShortcuts {
     onPaste,
     onUndo,
     onRedo,
+    onSearch,
     onZoomOut,
     onZoomIn,
   }) {
@@ -41,6 +43,7 @@ export default class KeyboardShortcuts {
     this.onRedo = onRedo || this._noop;
     this.onZoomOut = onZoomOut || this._noop;
     this.onZoomIn = onZoomIn || this._noop;
+    this.onSearch = onSearch || this._noop;
     this.isFocused = false;
     this.shiftPressed = false;
     this.rawCtrlPressed = false;
@@ -136,6 +139,9 @@ export default class KeyboardShortcuts {
     if (this._isControlPressed() && evt.which === Y_KEY) {
       this.onRedo();
     }
+    if (this._isControlPressed() && evt.which === F_KEY) {
+      this.onSearch();
+    }
 
     if (isMacLike()) {
       //Mac specific shortcuts -- zooming done differently on windows and linux