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

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

packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js

@@ -9,31 +9,33 @@
 
 import React, {useContext} from 'react';
 import {SettingsContext} from './SettingsContext';
+import {StoreContext} from '../context';
 import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants';
 
 import styles from './SettingsShared.css';
 
 export default function GeneralSettings(_: {||}) {
   const {
-    displayDensity,
-    setDisplayDensity,
-    theme,
-    setTheme,
     appendComponentStack,
+    displayDensity,
     setAppendComponentStack,
+    setDisplayDensity,
+    setTheme,
+    setTraceUpdatesEnabled,
+    theme,
+    traceUpdatesEnabled,
   } = useContext(SettingsContext);
 
-  const updateDisplayDensity = ({currentTarget}) =>
-    setDisplayDensity(currentTarget.value);
-  const updateTheme = ({currentTarget}) => setTheme(currentTarget.value);
-  const updateappendComponentStack = ({currentTarget}) =>
-    setAppendComponentStack(currentTarget.checked);
+  const {supportsTraceUpdates} = useContext(StoreContext);
 
   return (
     <div className={styles.Settings}>
       <div className={styles.Setting}>
         <div className={styles.RadioLabel}>Theme</div>
-        <select className={styles.Select} value={theme} onChange={updateTheme}>
+        <select
+          className={styles.Select}
+          value={theme}
+          onChange={({currentTarget}) => setTheme(currentTarget.value)}>
           <option value="auto">Auto</option>
           <option value="light">Light</option>
           <option value="dark">Dark</option>
@@ -45,18 +47,37 @@ export default function GeneralSettings(_: {||}) {
         <select
           className={styles.Select}
           value={displayDensity}
-          onChange={updateDisplayDensity}>
+          onChange={({currentTarget}) =>
+            setDisplayDensity(currentTarget.value)
+          }>
           <option value="compact">Compact</option>
           <option value="comfortable">Comfortable</option>
         </select>
       </div>
 
+      {supportsTraceUpdates && (
+        <div className={styles.Setting}>
+          <label>
+            <input
+              type="checkbox"
+              checked={traceUpdatesEnabled}
+              onChange={({currentTarget}) =>
+                setTraceUpdatesEnabled(currentTarget.checked)
+              }
+            />{' '}
+            Highlight updates when components render.
+          </label>
+        </div>
+      )}
+
       <div className={styles.Setting}>
         <label>
           <input
             type="checkbox"
             checked={appendComponentStack}
-            onChange={updateappendComponentStack}
+            onChange={({currentTarget}) =>
+              setAppendComponentStack(currentTarget.checked)
+            }
           />{' '}
           Append component stacks to console warnings and errors.
         </label>

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';
@@ -40,6 +41,9 @@ type Context = {|
 
   theme: Theme,
   setTheme(value: Theme): void,
+
+  traceUpdatesEnabled: boolean,
+  setTraceUpdatesEnabled: (value: boolean) => void,
 |};
 
 const SettingsContext = createContext<Context>(((null: any): Context));
@@ -73,6 +77,9 @@ function SettingsContextController({
   const [appendComponentStack, setAppendComponentStack] = useLocalStorage<
     boolean,
   >(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);
+  const [traceUpdatesEnabled, setTraceUpdatesEnabled] = useLocalStorage<
+    boolean,
+  >(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY, false);
 
   const documentElements = useMemo<DocumentElements>(
     () => {
@@ -138,26 +145,37 @@ function SettingsContextController({
     [bridge, appendComponentStack],
   );
 
+  useEffect(
+    () => {
+      bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);
+    },
+    [bridge, traceUpdatesEnabled],
+  );
+
   const value = useMemo(
     () => ({
-      displayDensity,
-      setDisplayDensity,
-      theme,
-      setTheme,
       appendComponentStack,
-      setAppendComponentStack,
+      displayDensity,
       lineHeight:
         displayDensity === 'compact'
           ? COMPACT_LINE_HEIGHT
           : COMFORTABLE_LINE_HEIGHT,
-    }),
-    [
-      displayDensity,
+      setAppendComponentStack,
       setDisplayDensity,
       setTheme,
-      appendComponentStack,
-      setAppendComponentStack,
+      setTraceUpdatesEnabled,
       theme,
+      traceUpdatesEnabled,
+    }),
+    [
+      appendComponentStack,
+      displayDensity,
+      setAppendComponentStack,
+      setDisplayDensity,
+      setTheme,
+      setTraceUpdatesEnabled,
+      theme,
+      traceUpdatesEnabled,
     ],
   );