Cleaned up event names

Author: Brian Vaughn

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

@@ -126,6 +126,7 @@ export default class Agent extends EventEmitter<{|
 
     this._bridge = bridge;
 
+    bridge.addListener('enableTraceUpdates', this.enableTraceUpdates);
     bridge.addListener('getProfilingData', this.getProfilingData);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('getOwnersList', this.getOwnersList);
@@ -149,7 +150,6 @@ export default class Agent extends EventEmitter<{|
       this.updateAppendComponentStack,
     );
     bridge.addListener('updateComponentFilters', this.updateComponentFilters);
-    bridge.addListener('updateTraceUpdates', this.updateTraceUpdates);
     bridge.addListener('viewElementSource', this.viewElementSource);
 
     if (this._isProfiling) {
@@ -204,6 +204,19 @@ export default class Agent extends EventEmitter<{|
     return null;
   }
 
+  enableTraceUpdates = (isEnabled: boolean) => {
+    this._traceUpdatesEnabled = isEnabled;
+
+    toggleTraceUpdatesEnabled(isEnabled);
+
+    for (let rendererID in this._rendererInterfaces) {
+      const renderer = ((this._rendererInterfaces[
+        (rendererID: any)
+      ]: any): RendererInterface);
+      renderer.toggleTraceUpdatesEnabled(isEnabled);
+    }
+  };
+
   getProfilingData = ({rendererID}: {|rendererID: RendererID|}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
@@ -417,19 +430,6 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
-  updateTraceUpdates = (isEnabled: boolean) => {
-    this._traceUpdatesEnabled = isEnabled;
-
-    toggleTraceUpdatesEnabled(isEnabled);
-
-    for (let rendererID in this._rendererInterfaces) {
-      const renderer = ((this._rendererInterfaces[
-        (rendererID: any)
-      ]: any): RendererInterface);
-      renderer.toggleTraceUpdatesEnabled(isEnabled);
-    }
-  };
-
   viewElementSource = ({id, rendererID}: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {

packages/react-devtools-shared/src/bridge.js

@@ -94,6 +94,7 @@ type BackendEvents = {|
 
 type FrontendEvents = {|
   clearNativeElementHighlight: [],
+  enableTraceUpdates: [boolean],
   getOwnersList: [ElementAndRendererID],
   getProfilingData: [{|rendererID: RendererID|}],
   getProfilingStatus: [],
@@ -115,7 +116,6 @@ type FrontendEvents = {|
   stopProfiling: [],
   updateAppendComponentStack: [boolean],
   updateComponentFilters: [Array<ComponentFilter>],
-  updateTraceUpdates: [boolean],
   viewElementSource: [ElementAndRendererID],
 
   // React Native style editor plug-in.

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

@@ -18,12 +18,12 @@ export default function GeneralSettings(_: {||}) {
   const {
     appendComponentStack,
     displayDensity,
-    traceUpdates,
     setAppendComponentStack,
-    setTraceUpdates,
     setDisplayDensity,
     setTheme,
+    setTraceUpdatesEnabled,
     theme,
+    traceUpdatesEnabled,
   } = useContext(SettingsContext);
 
   const {supportsTraceUpdates} = useContext(StoreContext);
@@ -60,9 +60,9 @@ export default function GeneralSettings(_: {||}) {
           <label>
             <input
               type="checkbox"
-              checked={traceUpdates}
+              checked={traceUpdatesEnabled}
               onChange={({currentTarget}) =>
-                setTraceUpdates(currentTarget.checked)
+                setTraceUpdatesEnabled(currentTarget.checked)
               }
             />{' '}
             Highlight updates when components render.

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

@@ -41,8 +41,8 @@ type Context = {|
   theme: Theme,
   setTheme(value: Theme): void,
 
-  traceUpdates: boolean,
-  setTraceUpdates: (value: boolean) => void,
+  traceUpdatesEnabled: boolean,
+  setTraceUpdatesEnabled: (value: boolean) => void,
 |};
 
 const SettingsContext = createContext<Context>(((null: any): Context));
@@ -76,10 +76,9 @@ function SettingsContextController({
   const [appendComponentStack, setAppendComponentStack] = useLocalStorage<
     boolean,
   >(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);
-  const [traceUpdates, setTraceUpdates] = useLocalStorage<boolean>(
-    'React::DevTools::traceUpdates',
-    false,
-  );
+  const [traceUpdatesEnabled, setTraceUpdatesEnabled] = useLocalStorage<
+    boolean,
+  >('React::DevTools::traceUpdatesEnabled', false);
 
   const documentElements = useMemo<DocumentElements>(
     () => {
@@ -147,35 +146,35 @@ function SettingsContextController({
 
   useEffect(
     () => {
-      bridge.send('updateTraceUpdates', traceUpdates);
+      bridge.send('enableTraceUpdates', traceUpdatesEnabled);
     },
-    [bridge, traceUpdates],
+    [bridge, traceUpdatesEnabled],
   );
 
   const value = useMemo(
     () => ({
-      displayDensity,
-      setDisplayDensity,
-      theme,
-      setTheme,
       appendComponentStack,
-      setAppendComponentStack,
-      traceUpdates,
-      setTraceUpdates,
+      displayDensity,
       lineHeight:
         displayDensity === 'compact'
           ? COMPACT_LINE_HEIGHT
           : COMFORTABLE_LINE_HEIGHT,
+      setAppendComponentStack,
+      setDisplayDensity,
+      setTheme,
+      setTraceUpdatesEnabled,
+      theme,
+      traceUpdatesEnabled,
     }),
     [
+      appendComponentStack,
       displayDensity,
+      setAppendComponentStack,
       setDisplayDensity,
       setTheme,
-      appendComponentStack,
-      setAppendComponentStack,
-      traceUpdates,
-      setTraceUpdates,
+      setTraceUpdatesEnabled,
       theme,
+      traceUpdatesEnabled,
     ],
   );