From 79dcc47191b9e4bb8b767d7371cefe1d21579f3f Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Thu, 9 Jan 2025 18:00:09 +0000 Subject: [PATCH] chore[DevTools/TraceUpdates]: display names by default (#32019) Feature was added in https://github.com/facebook/react/pull/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. --- .../react-devtools-shared/src/backend/agent.js | 12 ------------ .../src/backend/views/TraceUpdates/index.js | 15 ++------------- packages/react-devtools-shared/src/bridge.js | 1 - packages/react-devtools-shared/src/constants.js | 2 -- .../devtools/views/Settings/GeneralSettings.js | 15 --------------- .../devtools/views/Settings/SettingsContext.js | 16 ---------------- 6 files changed, 2 insertions(+), 59 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 111c458bdbda1..e883724f49765 100644 --- 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], 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 index 48e504eddbb1d..5b274e8a2f606 100644 --- 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 = 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): 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): 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 index e00ba5518a1a9..cb494e1b3c1ba 100644 --- 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 index bb8d9f5b130f9..b08738165906c 100644 --- 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 index 69f4ec737581a..d56f32f81142c 100644 --- 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. -
- -
)} diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js index ec7b3ba9c9da4..196ea806f6aac 100644 --- 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 = createContext( @@ -115,11 +111,6 @@ function SettingsContextController({ LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY, false, ); - const [showNamesWhenTracing, setShowNamesWhenTracing] = - useLocalStorageWithLog( - LOCAL_STORAGE_SHOW_NAMES_WHEN_TRACING_KEY, - true, - ); const documentElements = useMemo(() => { const array: Array = [ @@ -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, ], );