Added trace updates feature (DOM only) (#16989)

* Added trace updates feature (DOM only)
* Updated DevTools CHANGELOG

Author: Brian Vaughn

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();

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(

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,10 +126,21 @@ 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,
           supportsProfiling,
+          supportsTraceUpdates: true,
         });
         store.profilerStore.profilingData = profilingData;
 

packages/react-devtools-inline/src/frontend.js

@@ -64,7 +64,7 @@ export function initialize(
     },
   });
 
-  const store: Store = new Store(bridge);
+  const store: Store = new Store(bridge, {supportsTraceUpdates: true});
 
   const ForwardRef = forwardRef<Props, mixed>((props, ref) => (
     <DevTools ref={ref} bridge={bridge} store={store} {...props} />

packages/react-devtools-shared/src/backend/agent.js

@@ -21,6 +21,10 @@ import {
   sessionStorageSetItem,
 } from 'react-devtools-shared/src/storage';
 import setupHighlighter from './views/Highlighter';
+import {
+  initialize as setupTraceUpdates,
+  toggleEnabled as setTraceUpdatesEnabled,
+} from './views/TraceUpdates';
 import {patch as patchConsole, unpatch as unpatchConsole} from './console';
 
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
@@ -87,13 +91,15 @@ export default class Agent extends EventEmitter<{|
   hideNativeHighlight: [],
   showNativeHighlight: [NativeType],
   shutdown: [],
+  traceUpdates: [Set<NativeType>],
 |}> {
   _bridge: BackendBridge;
   _isProfiling: boolean = false;
   _recordChangeDescriptions: boolean = false;
   _rendererInterfaces: {[key: RendererID]: RendererInterface} = {};
   _persistedSelection: PersistedSelection | null = null;
   _persistedSelectionMatch: PathMatch | null = null;
+  _traceUpdatesEnabled: boolean = false;
 
   constructor(bridge: BackendBridge) {
     super();
@@ -131,6 +137,7 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('overrideState', this.overrideState);
     bridge.addListener('overrideSuspense', this.overrideSuspense);
     bridge.addListener('reloadAndProfile', this.reloadAndProfile);
+    bridge.addListener('setTraceUpdatesEnabled', this.setTraceUpdatesEnabled);
     bridge.addListener('startProfiling', this.startProfiling);
     bridge.addListener('stopProfiling', this.stopProfiling);
     bridge.addListener(
@@ -159,6 +166,7 @@ export default class Agent extends EventEmitter<{|
     bridge.send('isBackendStorageAPISupported', isBackendStorageAPISupported);
 
     setupHighlighter(bridge, this);
+    setupTraceUpdates(this);
   }
 
   get rendererInterfaces(): {[key: RendererID]: RendererInterface} {
@@ -340,6 +348,8 @@ export default class Agent extends EventEmitter<{|
       rendererInterface.startProfiling(this._recordChangeDescriptions);
     }
 
+    rendererInterface.setTraceUpdatesEnabled(this._traceUpdatesEnabled);
+
     // When the renderer is attached, we need to tell it whether
     // we remember the previous selection that we'd like to restore.
     // It'll start tracking mounts for matches to the last selection path.
@@ -349,6 +359,19 @@ export default class Agent extends EventEmitter<{|
     }
   }
 
+  setTraceUpdatesEnabled = (traceUpdatesEnabled: boolean) => {
+    this._traceUpdatesEnabled = traceUpdatesEnabled;
+
+    setTraceUpdatesEnabled(traceUpdatesEnabled);
+
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.setTraceUpdatesEnabled(traceUpdatesEnabled);
+    }
+  };
+
   syncSelectionFromNativeElementsPanel = () => {
     const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
     if (target == null) {
@@ -416,6 +439,10 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
+  onTraceUpdates = (nodes: Set<NativeType>) => {
+    this.emit('traceUpdates', nodes);
+  };
+
   onHookOperations = (operations: Array<number>) => {
     if (__DEBUG__) {
       debug('onHookOperations', operations);

packages/react-devtools-shared/src/backend/index.js

@@ -44,6 +44,7 @@ export function initBackend(
     }),
 
     hook.sub('operations', agent.onHookOperations),
+    hook.sub('traceUpdates', agent.onTraceUpdates),
 
     // TODO Add additional subscriptions required for profiling mode
   ];

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -912,6 +912,10 @@ export function attach(
     // Not implemented.
   }
 
+  function setTraceUpdatesEnabled(enabled: boolean) {
+    // Not implemented.
+  }
+
   function setTrackedPath(path: Array<PathFrame> | null) {
     // Not implemented.
   }
@@ -945,6 +949,7 @@ export function attach(
     setInHook,
     setInProps,
     setInState,
+    setTraceUpdatesEnabled,
     setTrackedPath,
     startProfiling,
     stopProfiling,