From 6b7281ec14397d6908fb4ae3292243ab6b2c4ef8 Mon Sep 17 00:00:00 2001
From: Kerollos Magdy <kerolloz@yahoo.com>
Date: Wed, 18 Mar 2020 20:05:41 +0200
Subject: [PATCH] [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>
---
 .../src/devtools/views/DevTools.js            | 50 +++++++++++++++++--
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 4eac118696637..28714cb927c74 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/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 />