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

Feature was added in facebook#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.

Author: hoxyq

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