Make sure saved trace-updates preference is restored properly after a…

… reload
facebook · Oct 3, 2019 · 2492694 · 2492694
1 parent 4ed7ff0
commit 2492694
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 2 deletions.
diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
@@ -114,7 +114,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
           }
 
           if (bridge !== null) {
-            bridge.emit('shutdown');
+            bridge.shutdown();
           }
 
           scheduleRetry();

diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js
@@ -67,6 +67,10 @@ function setup(hook) {
 
   initBackend(hook, agent, window);
 
+  // Let the frontend know that the backend has attached listeners and is ready for messages.
+  // This covers the case of of syncing saved values after reloading/navigating while DevTools remain open.
+  bridge.send('extensionBackendInitialized');
+
   // Setup React Native style editor if a renderer like react-native-web has injected it.
   if (hook.resolveRNStyle) {
     setupNativeStyleEditor(

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
@@ -9,6 +9,7 @@ import {
   getBrowserName,
   getBrowserTheme,
 } from './utils';
+import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
 import {
   getSavedComponentFilters,
   getAppendComponentStack,
@@ -125,6 +126,16 @@ function createPanelIfReactLoaded() {
           profilingData = store.profilerStore.profilingData;
         }
 
+        bridge.addListener('extensionBackendInitialized', () => {
+          // Initialize the renderer's trace-updates setting.
+          // This handles the case of navigating to a new page after the DevTools have already been shown.
+          bridge.send(
+            'setTraceUpdatesEnabled',
+            localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
+              'true',
+          );
+        });
+
         store = new Store(bridge, {
           isProfiling,
           supportsReloadAndProfile: isChrome,

diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
@@ -70,6 +70,7 @@ type NativeStyleEditor_SetValueParams = {|
 |};
 
 type BackendEvents = {|
+  extensionBackendInitialized: [],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
   operations: [Array<number>],

diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
@@ -30,6 +30,9 @@ export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
 export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
   'React::DevTools::appendComponentStack';
 
+export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
+  'React::DevTools::traceUpdatesEnabled';
+
 export const PROFILER_EXPORT_VERSION = 4;
 
 export const CHANGE_LOG_URL =

diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -18,6 +18,7 @@ import {
   COMFORTABLE_LINE_HEIGHT,
   COMPACT_LINE_HEIGHT,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+  LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
 } from 'react-devtools-shared/src/constants';
 import {useLocalStorage} from '../hooks';
 import {BridgeContext} from '../context';
@@ -78,7 +79,7 @@ function SettingsContextController({
   >(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);
   const [traceUpdatesEnabled, setTraceUpdatesEnabled] = useLocalStorage<
     boolean,
-  >('React::DevTools::traceUpdatesEnabled', false);
+  >(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY, false);
 
   const documentElements = useMemo<DocumentElements>(
     () => {