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

Brian Vaughn · Brian Vaughn · commit 2492694ef986 · 2019-10-03T10:32:43.000-07:00
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>(
     () => {

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,7 @@ export function connectToDevTools(options: ?ConnectOptions) {`
`114`	`114`	`}`
`115`	`115`
`116`	`116`	`if (bridge !== null) {`
`117`		`- bridge.emit('shutdown');`
	`117`	`+ bridge.shutdown();`
`118`	`118`	`}`
`119`	`119`
`120`	`120`	`scheduleRetry();`