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.
Ruslan Lesiutin committed
Jan 9, 2025 at 18:00 UTC
79dcc47191b9e4bb8b767d7371cefe1d21579f3f
6 files changed
+2
-59
packages/react-devtools-shared/src/backend/agent.js
-12
@@ -148,7 +148,6 @@ export default class Agent extends EventEmitter<{
148
getIfHasUnsupportedRendererVersion: [],
149
updateHookSettings: [$ReadOnly<DevToolsHookSettings>],
150
getHookSettings: [],
151
- showNamesWhenTracing: [boolean],
151
}> {
152
_bridge: BackendBridge;
153
_isProfiling: boolean = false;
@@ -159,7 +158,6 @@ export default class Agent extends EventEmitter<{
158
_onReloadAndProfile:
159
| ((recordChangeDescriptions: boolean, recordTimeline: boolean) => void)
160
| void;
162
- _showNamesWhenTracing: boolean = true;
161
162
constructor(
163
bridge: BackendBridge,
@@ -204,7 +202,6 @@ export default class Agent extends EventEmitter<{
202
bridge.addListener('reloadAndProfile', this.reloadAndProfile);
203
bridge.addListener('renamePath', this.renamePath);
204
bridge.addListener('setTraceUpdatesEnabled', this.setTraceUpdatesEnabled);
207
- bridge.addListener('setShowNamesWhenTracing', this.setShowNamesWhenTracing);
205
bridge.addListener('startProfiling', this.startProfiling);
206
bridge.addListener('stopProfiling', this.stopProfiling);
207
bridge.addListener('storeAsGlobal', this.storeAsGlobal);
@@ -727,7 +724,6 @@ export default class Agent extends EventEmitter<{
724
this._traceUpdatesEnabled = traceUpdatesEnabled;
725
726
setTraceUpdatesEnabled(traceUpdatesEnabled);
730
- this.emit('showNamesWhenTracing', this._showNamesWhenTracing);
727
728
for (const rendererID in this._rendererInterfaces) {
729
const renderer = ((this._rendererInterfaces[
@@ -737,14 +733,6 @@ export default class Agent extends EventEmitter<{
733
}
734
};
735
740
- setShowNamesWhenTracing: (show: boolean) => void = show => {
741
- if (this._showNamesWhenTracing === show) {
742
- return;
743
- }
744
- this._showNamesWhenTracing = show;
745
- this.emit('showNamesWhenTracing', show);
746
- };
747
-
736
syncSelectionFromBuiltinElementsPanel: () => void = () => {
737
const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
738
if (target == null) {
packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
+2
-13
@@ -50,20 +50,11 @@ const nodeToData: Map<HostInstance, Data> = new Map();
50
let agent: Agent = ((null: any): Agent);
51
let drawAnimationFrameID: AnimationFrameID | null = null;
52
let isEnabled: boolean = false;
53
-let showNames: boolean = false;
53
let redrawTimeoutID: TimeoutID | null = null;
54
55
export function initialize(injectedAgent: Agent): void {
56
agent = injectedAgent;
57
agent.addListener('traceUpdates', traceUpdates);
59
- agent.addListener('showNamesWhenTracing', (shouldShowNames: boolean) => {
60
- showNames = shouldShowNames;
61
- if (isEnabled) {
62
- if (drawAnimationFrameID === null) {
63
- drawAnimationFrameID = requestAnimationFrame(prepareToDraw);
64
- }
65
- }
66
- });
58
}
59
60
export function toggleEnabled(value: boolean): void {
@@ -101,9 +92,7 @@ function traceUpdates(nodes: Set<HostInstance>): void {
92
rect = measureNode(node);
93
}
94
104
- let displayName = showNames
105
- ? agent.getComponentNameForHostInstance(node)
106
- : null;
95
+ let displayName = agent.getComponentNameForHostInstance(node);
96
if (displayName) {
97
const {baseComponentName, hocNames} = extractHOCNames(displayName);
98
@@ -127,7 +116,7 @@ function traceUpdates(nodes: Set<HostInstance>): void {
116
: now + DISPLAY_DURATION,
117
lastMeasuredAt,
118
rect,
130
- displayName: showNames ? displayName : null,
119
+ displayName,
120
});
121
});
122
packages/react-devtools-shared/src/bridge.js
-1
@@ -234,7 +234,6 @@ type FrontendEvents = {
234
renamePath: [RenamePath],
235
savedPreferences: [SavedPreferencesParams],
236
setTraceUpdatesEnabled: [boolean],
237
- setShowNamesWhenTracing: [boolean],
237
shutdown: [],
238
startInspectingHost: [],
239
startProfiling: [StartProfilingParams],
packages/react-devtools-shared/src/constants.js
-2
@@ -50,8 +50,6 @@ export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
50
'React::DevTools::traceUpdatesEnabled';
51
export const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
52
'React::DevTools::supportsProfiling';
53
-export const LOCAL_STORAGE_SHOW_NAMES_WHEN_TRACING_KEY =
54
- 'React::DevTools::showNamesWhenTracing';
53
54
export const PROFILER_EXPORT_VERSION = 5;
55
packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
-15
@@ -34,10 +34,8 @@ export default function GeneralSettings(_: {}): React.Node {
34
setDisplayDensity,
35
setTheme,
36
setTraceUpdatesEnabled,
37
- setShowNamesWhenTracing,
37
theme,
38
traceUpdatesEnabled,
40
- showNamesWhenTracing,
39
} = useContext(SettingsContext);
40
41
const {backendVersion, supportsTraceUpdates} = useContext(StoreContext);
@@ -85,19 +83,6 @@ export default function GeneralSettings(_: {}): React.Node {
83
/>{' '}
84
Highlight updates when components render.
85
</label>
88
- <div className={styles.Setting}>
89
- <label>
90
- <input
91
- type="checkbox"
92
- checked={showNamesWhenTracing}
93
- disabled={!traceUpdatesEnabled}
94
- onChange={({currentTarget}) =>
95
- setShowNamesWhenTracing(currentTarget.checked)
96
- }
97
- />{' '}
98
- Show component names while highlighting.
99
- </label>
100
- </div>
86
</div>
87
)}
88
packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
-16
@@ -21,7 +21,6 @@ import {
21
LOCAL_STORAGE_BROWSER_THEME,
22
LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
23
LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
24
- LOCAL_STORAGE_SHOW_NAMES_WHEN_TRACING_KEY,
24
} from 'react-devtools-shared/src/constants';
25
import {
26
COMFORTABLE_LINE_HEIGHT,
@@ -54,9 +53,6 @@ type Context = {
53
54
traceUpdatesEnabled: boolean,
55
setTraceUpdatesEnabled: (value: boolean) => void,
57
-
58
- showNamesWhenTracing: boolean,
59
- setShowNamesWhenTracing: (showNames: boolean) => void,
56
};
57
58
const SettingsContext: ReactContext<Context> = createContext<Context>(
@@ -115,11 +111,6 @@ function SettingsContextController({
111
LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
112
false,
113
);
118
- const [showNamesWhenTracing, setShowNamesWhenTracing] =
119
- useLocalStorageWithLog<boolean>(
120
- LOCAL_STORAGE_SHOW_NAMES_WHEN_TRACING_KEY,
121
- true,
122
- );
114
115
const documentElements = useMemo<DocumentElements>(() => {
116
const array: Array<HTMLElement> = [
@@ -173,10 +164,6 @@ function SettingsContextController({
164
bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);
165
}, [bridge, traceUpdatesEnabled]);
166
176
- useEffect(() => {
177
- bridge.send('setShowNamesWhenTracing', showNamesWhenTracing);
178
- }, [bridge, showNamesWhenTracing]);
179
-
167
const value: Context = useMemo(
168
() => ({
169
displayDensity,
@@ -192,8 +179,6 @@ function SettingsContextController({
179
theme,
180
browserTheme,
181
traceUpdatesEnabled,
195
- showNamesWhenTracing,
196
- setShowNamesWhenTracing,
182
}),
183
[
184
displayDensity,
@@ -205,7 +190,6 @@ function SettingsContextController({
190
theme,
191
browserTheme,
192
traceUpdatesEnabled,
208
- showNamesWhenTracing,
193
],
194
);
195