devtools: Display shortcuts for prev/next search result

facebook · Dec 15, 2020 · edb8f05 · edb8f05
1 parent be178ea
commit edb8f05
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -16,14 +16,14 @@ import tooltipStyles from './Tooltip.css';
 type Props = {
   children: React$Node,
   className?: string,
-  title?: string,
+  title: React$Node,
   ...
 };
 
 export default function Button({
   children,
   className = '',
-  title = '',
+  title,
   ...rest
 }: Props) {
   let button = (

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
@@ -95,14 +95,23 @@ export default function SearchInput(props: Props) {
         className={styles.IconButton}
         disabled={!searchText}
         onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
-        title="Scroll to previous search result">
+        title={
+          <React.Fragment>
+            Scroll to previous search result (<kbd>Shift</kbd> +{' '}
+            <kbd>Enter</kbd>)
+          </React.Fragment>
+        }>
         <ButtonIcon type="up" />
       </Button>
       <Button
         className={styles.IconButton}
         disabled={!searchText}
         onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
-        title="Scroll to next search result">
+        title={
+          <React.Fragment>
+            Scroll to next search result (<kbd>Enter</kbd>)
+          </React.Fragment>
+        }>
         <ButtonIcon type="down" />
       </Button>
       <Button