[DevTools] Add shortcut keys for tab switching (#18248)

* [DevTools] Add shortcut keys for tab switching
* Use LocalStorage to remember most recently selected tab

Resolves #18227 and #18226

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>

packages/react-devtools-shared/src/devtools/views/DevTools.js

@@ -13,7 +13,7 @@ import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
 import * as React from 'react';
-import {useEffect, useMemo, useState} from 'react';
+import {useEffect, useMemo, useRef} from 'react';
 import Store from '../store';
 import {BridgeContext, ContextMenuContext, StoreContext} from './context';
 import Components from './Components/Components';
@@ -27,6 +27,7 @@ import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
+import {useLocalStorage} from './hooks';
 
 import styles from './DevTools.css';
 
@@ -106,9 +107,13 @@ export default function DevTools({
  viewAttributeSourceFunction,
  viewElementSourceFunction,
 }: Props) {
- const [tab, setTab] = useState(defaultTab);
- if (overrideTab != null && overrideTab !== tab) {
- setTab(overrideTab);
+ let [tab, setTab] = useLocalStorage<TabID>(
+ 'React::DevTools::defaultTab',
+ defaultTab,
+ );
+
+ if (overrideTab != null) {
+ tab = overrideTab;
  }
 
  const viewElementSource = useMemo(
@@ -127,6 +132,41 @@ export default function DevTools({
  [enabledInspectedElementContextMenu, viewAttributeSourceFunction],
  );
 
+ const devToolsRef = useRef<HTMLElement | null>(null);
+
+ useEffect(() => {
+ if (!showTabBar) {
+ return;
+ }
+
+ const div = devToolsRef.current;
+ if (div === null) {
+ return;
+ }
+
+ const ownerWindow = div.ownerDocument.defaultView;
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.ctrlKey || event.metaKey) {
+ switch (event.key) {
+ case '1':
+ setTab(tabs[0].id);
+ event.preventDefault();
+ event.stopPropagation();
+ break;
+ case '2':
+ setTab(tabs[1].id);
+ event.preventDefault();
+ event.stopPropagation();
+ break;
+ }
+ }
+ };
+ ownerWindow.addEventListener('keydown', handleKeyDown);
+ return () => {
+ ownerWindow.removeEventListener('keydown', handleKeyDown);
+ };
+ }, [showTabBar]);
+
  useEffect(() => {
  return () => {
  try {
@@ -149,7 +189,7 @@ export default function DevTools({
  <ViewElementSourceContext.Provider value={viewElementSource}>
  <TreeContextController>
  <ProfilerContextController>
- <div className={styles.DevTools}>
+ <div className={styles.DevTools} ref={devToolsRef}>
  {showTabBar && (
  <div className={styles.TabBar}>
  <ReactLogo />