chore[DevTools/TraceUpdates]: display names by default

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) {

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,
     });
   });
 

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],

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;
 

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>
       )}
 

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,
     ],
   );