From a68ee9c15660481135cd265ec92b31596760ec3c Mon Sep 17 00:00:00 2001
From: Kerollos Magdy <kerolloz@yahoo.com>
Date: Sun, 8 Mar 2020 23:58:52 +0200
Subject: [PATCH 1/3] [DevTools] Add shortcut keys for tab switching

---
 .../src/devtools/views/DevTools.js            | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 4eac11869663..bd54feff77ee 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, useState, useRef} from 'react';
 import Store from '../store';
 import {BridgeContext, ContextMenuContext, StoreContext} from './context';
 import Components from './Components/Components';
@@ -127,6 +127,37 @@ export default function DevTools({
     [enabledInspectedElementContextMenu, viewAttributeSourceFunction],
   );
 
+  const devToolsRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (devToolsRef.current === null) return () => {};
+
+    if (showTabBar) {
+      const ownerWindow = devToolsRef.current.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 +180,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 />

From 8ce4530bcfafab821b79b8b43d67512887317d29 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Wed, 18 Mar 2020 10:39:19 -0700
Subject: [PATCH 2/3] Use LocalStorage to remember most recently selected tab

Resolves #18227
---
 .../src/devtools/views/DevTools.js            | 63 ++++++++++---------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index bd54feff77ee..51937df926c0 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, useRef} 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,10 +107,10 @@ export default function DevTools({
   viewAttributeSourceFunction,
   viewElementSourceFunction,
 }: Props) {
-  const [tab, setTab] = useState(defaultTab);
-  if (overrideTab != null && overrideTab !== tab) {
-    setTab(overrideTab);
-  }
+  const [tab, setTab] = useLocalStorage<TabID>(
+    'React::DevTools::defaultTab',
+    overrideTab != null ? overrideTab : defaultTab,
+  );
 
   const viewElementSource = useMemo(
     () => ({
@@ -130,32 +131,36 @@ export default function DevTools({
   const devToolsRef = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
-    if (devToolsRef.current === null) return () => {};
-
-    if (showTabBar) {
-      const ownerWindow = devToolsRef.current.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;
-          }
-        }
-      };
+    if (!showTabBar) {
+      return;
+    }
 
-      ownerWindow.addEventListener('keydown', handleKeyDown);
-      return () => {
-        ownerWindow.removeEventListener('keydown', handleKeyDown);
-      };
+    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(() => {

From 64a3a200b34520bd65b6ea3c4262446ec7d03035 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Wed, 18 Mar 2020 10:41:46 -0700
Subject: [PATCH 3/3] Make overrideTab override more explicit

---
 .../react-devtools-shared/src/devtools/views/DevTools.js  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 51937df926c0..28714cb927c7 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -107,11 +107,15 @@ export default function DevTools({
   viewAttributeSourceFunction,
   viewElementSourceFunction,
 }: Props) {
-  const [tab, setTab] = useLocalStorage<TabID>(
+  let [tab, setTab] = useLocalStorage<TabID>(
     'React::DevTools::defaultTab',
-    overrideTab != null ? overrideTab : defaultTab,
+    defaultTab,
   );
 
+  if (overrideTab != null) {
+    tab = overrideTab;
+  }
+
   const viewElementSource = useMemo(
     () => ({
       canViewElementSourceFunction: canViewElementSourceFunction || null,