[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>
Kerollos Magdy committed
Mar 18, 2020 at 20:05 UTC
6b7281ec14397d6908fb4ae3292243ab6b2c4ef8
1 file changed
+45
-5
packages/react-devtools-shared/src/devtools/views/DevTools.js
+45
-5
@@ -13,7 +13,7 @@ import '@reach/menu-button/styles.css';
13
import '@reach/tooltip/styles.css';
14
15
import * as React from 'react';
16
-import {useEffect, useMemo, useState} from 'react';
16
+import {useEffect, useMemo, useRef} from 'react';
17
import Store from '../store';
18
import {BridgeContext, ContextMenuContext, StoreContext} from './context';
19
import Components from './Components/Components';
@@ -27,6 +27,7 @@ import {ModalDialogContextController} from './ModalDialog';
27
import ReactLogo from './ReactLogo';
28
import UnsupportedVersionDialog from './UnsupportedVersionDialog';
29
import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
30
+import {useLocalStorage} from './hooks';
31
32
import styles from './DevTools.css';
33
@@ -106,9 +107,13 @@ export default function DevTools({
107
viewAttributeSourceFunction,
108
viewElementSourceFunction,
109
}: Props) {
109
- const [tab, setTab] = useState(defaultTab);
110
- if (overrideTab != null && overrideTab !== tab) {
111
- setTab(overrideTab);
110
+ let [tab, setTab] = useLocalStorage<TabID>(
111
+ 'React::DevTools::defaultTab',
112
+ defaultTab,
113
+ );
114
+
115
+ if (overrideTab != null) {
116
+ tab = overrideTab;
117
}
118
119
const viewElementSource = useMemo(
@@ -127,6 +132,41 @@ export default function DevTools({
132
[enabledInspectedElementContextMenu, viewAttributeSourceFunction],
133
);
134
135
+ const devToolsRef = useRef<HTMLElement | null>(null);
136
+
137
+ useEffect(() => {
138
+ if (!showTabBar) {
139
+ return;
140
+ }
141
+
142
+ const div = devToolsRef.current;
143
+ if (div === null) {
144
+ return;
145
+ }
146
+
147
+ const ownerWindow = div.ownerDocument.defaultView;
148
+ const handleKeyDown = (event: KeyboardEvent) => {
149
+ if (event.ctrlKey || event.metaKey) {
150
+ switch (event.key) {
151
+ case '1':
152
+ setTab(tabs[0].id);
153
+ event.preventDefault();
154
+ event.stopPropagation();
155
+ break;
156
+ case '2':
157
+ setTab(tabs[1].id);
158
+ event.preventDefault();
159
+ event.stopPropagation();
160
+ break;
161
+ }
162
+ }
163
+ };
164
+ ownerWindow.addEventListener('keydown', handleKeyDown);
165
+ return () => {
166
+ ownerWindow.removeEventListener('keydown', handleKeyDown);
167
+ };
168
+ }, [showTabBar]);
169
+
170
useEffect(() => {
171
return () => {
172
try {
@@ -149,7 +189,7 @@ export default function DevTools({
189
<ViewElementSourceContext.Provider value={viewElementSource}>
190
<TreeContextController>
191
<ProfilerContextController>
152
- <div className={styles.DevTools}>
192
+ <div className={styles.DevTools} ref={devToolsRef}>
193
{showTabBar && (
194
<div className={styles.TabBar}>
195
<ReactLogo />