chore[DevTools/TraceUpdates]: display names by default (#32019)

Feature was added in #31577, lets enable it by default. Note: for gradual rollout with React Native, we will continue to emit different event, requires some changes on React Native side to support this. I have plans to make this feature to be accessible via browser context menu, which has really limited API. In order to minimize potential divergence, lets make this the default state for the feature.
facebook · Jan 9, 2025 · 79dcc47 · 79dcc47
1 parent d16fe4b
commit 79dcc47
Show file tree

Hide file tree

Showing 6 changed files with 2 additions and 59 deletions.
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
@@ -148,7 +148,6 @@ export default class Agent extends EventEmitter<{
   getIfHasUnsupportedRendererVersion: [],
   updateHookSettings: [$ReadOnly<DevToolsHookSettings>],
   getHookSettings: [],
-  showNamesWhenTracing: [boolean],
 }> {
   _bridge: BackendBridge;
   _isProfiling: boolean = false;
@@ -159,7 +158,6 @@ export default class Agent extends EventEmitter<{
   _onReloadAndProfile:
     | ((recordChangeDescriptions: boolean, recordTimeline: boolean) => void)
     | void;
-  _showNamesWhenTracing: boolean = true;
 
   constructor(
     bridge: BackendBridge,
@@ -204,7 +202,6 @@ export default class Agent extends EventEmitter<{
     bridge.addListener('reloadAndProfile', this.reloadAndProfile);
     bridge.addListener('renamePath', this.renamePath);
     bridge.addListener('setTraceUpdatesEnabled', this.setTraceUpdatesEnabled);
-    bridge.addListener('setShowNamesWhenTracing', this.setShowNamesWhenTracing);
     bridge.addListener('startProfiling', this.startProfiling);
     bridge.addListener('stopProfiling', this.stopProfiling);
     bridge.addListener('storeAsGlobal', this.storeAsGlobal);
@@ -727,7 +724,6 @@ export default class Agent extends EventEmitter<{
       this._traceUpdatesEnabled = traceUpdatesEnabled;
 
       setTraceUpdatesEnabled(traceUpdatesEnabled);
-      this.emit('showNamesWhenTracing', this._showNamesWhenTracing);
 
       for (const rendererID in this._rendererInterfaces) {
         const renderer = ((this._rendererInterfaces[
@@ -737,14 +733,6 @@ export default class Agent extends EventEmitter<{
       }
     };
 
-  setShowNamesWhenTracing: (show: boolean) => void = show => {
-    if (this._showNamesWhenTracing === show) {
-      return;
-    }
-    this._showNamesWhenTracing = show;
-    this.emit('showNamesWhenTracing', show);
-  };
-
   syncSelectionFromBuiltinElementsPanel: () => void = () => {
     const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
     if (target == null) {

diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
@@ -50,20 +50,11 @@ const nodeToData: Map<HostInstance, Data> = new Map();
 let agent: Agent = ((null: any): Agent);
 let drawAnimationFrameID: AnimationFrameID | null = null;
 let isEnabled: boolean = false;
-let showNames: boolean = false;
 let redrawTimeoutID: TimeoutID | null = null;
 
 export function initialize(injectedAgent: Agent): void {
   agent = injectedAgent;
   agent.addListener('traceUpdates', traceUpdates);
-  agent.addListener('showNamesWhenTracing', (shouldShowNames: boolean) => {
-    showNames = shouldShowNames;
-    if (isEnabled) {
-      if (drawAnimationFrameID === null) {
-        drawAnimationFrameID = requestAnimationFrame(prepareToDraw);
-      }
-    }
-  });
 }
 
 export function toggleEnabled(value: boolean): void {
@@ -101,9 +92,7 @@ function traceUpdates(nodes: Set<HostInstance>): void {
       rect = measureNode(node);
     }
 
-    let displayName = showNames
-      ? agent.getComponentNameForHostInstance(node)
-      : null;
+    let displayName = agent.getComponentNameForHostInstance(node);
     if (displayName) {
       const {baseComponentName, hocNames} = extractHOCNames(displayName);
 
@@ -127,7 +116,7 @@ function traceUpdates(nodes: Set<HostInstance>): void {
           : now + DISPLAY_DURATION,
       lastMeasuredAt,
       rect,
-      displayName: showNames ? displayName : null,
+      displayName,
     });
   });
 

diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
@@ -234,7 +234,6 @@ type FrontendEvents = {
   renamePath: [RenamePath],
   savedPreferences: [SavedPreferencesParams],
   setTraceUpdatesEnabled: [boolean],
-  setShowNamesWhenTracing: [boolean],
   shutdown: [],
   startInspectingHost: [],
   startProfiling: [StartProfilingParams],

diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
@@ -50,8 +50,6 @@ export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
   'React::DevTools::traceUpdatesEnabled';
 export const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
-export const LOCAL_STORAGE_SHOW_NAMES_WHEN_TRACING_KEY =
-  'React::DevTools::showNamesWhenTracing';
 
 export const PROFILER_EXPORT_VERSION = 5;
 

diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -34,10 +34,8 @@ export default function GeneralSettings(_: {}): React.Node {
     setDisplayDensity,
     setTheme,
     setTraceUpdatesEnabled,
-    setShowNamesWhenTracing,
     theme,
     traceUpdatesEnabled,
-    showNamesWhenTracing,
   } = useContext(SettingsContext);
 
   const {backendVersion, supportsTraceUpdates} = useContext(StoreContext);
@@ -85,19 +83,6 @@ export default function GeneralSettings(_: {}): React.Node {
             />{' '}
             Highlight updates when components render.
           </label>
-          <div className={styles.Setting}>
-            <label>
-              <input
-                type="checkbox"
-                checked={showNamesWhenTracing}
-                disabled={!traceUpdatesEnabled}
-                onChange={({currentTarget}) =>
-                  setShowNamesWhenTracing(currentTarget.checked)
-                }
-              />{' '}
-              Show component names while highlighting.
-            </label>
-          </div>
         </div>
       )}
 

diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -21,7 +21,6 @@ import {
   LOCAL_STORAGE_BROWSER_THEME,
   LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
-  LOCAL_STORAGE_SHOW_NAMES_WHEN_TRACING_KEY,
 } from 'react-devtools-shared/src/constants';
 import {
   COMFORTABLE_LINE_HEIGHT,
@@ -54,9 +53,6 @@ type Context = {
 
   traceUpdatesEnabled: boolean,
   setTraceUpdatesEnabled: (value: boolean) => void,
-
-  showNamesWhenTracing: boolean,
-  setShowNamesWhenTracing: (showNames: boolean) => void,
 };
 
 const SettingsContext: ReactContext<Context> = createContext<Context>(
@@ -115,11 +111,6 @@ function SettingsContextController({
       LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
       false,
     );
-  const [showNamesWhenTracing, setShowNamesWhenTracing] =
-    useLocalStorageWithLog<boolean>(
-      LOCAL_STORAGE_SHOW_NAMES_WHEN_TRACING_KEY,
-      true,
-    );
 
   const documentElements = useMemo<DocumentElements>(() => {
     const array: Array<HTMLElement> = [
@@ -173,10 +164,6 @@ function SettingsContextController({
     bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);
   }, [bridge, traceUpdatesEnabled]);
 
-  useEffect(() => {
-    bridge.send('setShowNamesWhenTracing', showNamesWhenTracing);
-  }, [bridge, showNamesWhenTracing]);
-
   const value: Context = useMemo(
     () => ({
       displayDensity,
@@ -192,8 +179,6 @@ function SettingsContextController({
       theme,
       browserTheme,
       traceUpdatesEnabled,
-      showNamesWhenTracing,
-      setShowNamesWhenTracing,
     }),
     [
       displayDensity,
@@ -205,7 +190,6 @@ function SettingsContextController({
       theme,
       browserTheme,
       traceUpdatesEnabled,
-      showNamesWhenTracing,
     ],
   );