@samitouri / QOS-React-2 / commits / 51c558aeb6

Rename (some) "scheduling profiler" references to "timeline" (#22690)

Brian Vaughn committed Nov 3, 2021 at 15:10 UTC 51c558aeb6f5b0ae639d975fd4044007a73115c1
20 files changed +158 -168
packages/react-devtools-extensions/src/main.js
+1 -1
@@ -152,7 +152,7 @@ function createPanelIfReactLoaded() {
152 isProfiling,
153 supportsReloadAndProfile: isChrome || isEdge,
154 supportsProfiling,
155 - // At this time, the scheduling profiler can only parse Chrome performance profiles.
155 + // At this time, the timeline can only parse Chrome performance profiles.
156 supportsSchedulingProfiler: isChrome,
157 supportsTraceUpdates: true,
158 });
packages/react-devtools-scheduling-profiler/README.md
+1 -1
@@ -1,3 +1,3 @@
1 # React Concurrent Mode Profiler
2
3 -This package contains the new/experimental "scheduling profiler" for React 18. This profiler exists as its own project because it was initially deployed as a standalone app. It has since been moved into the DevTools Profiler under the "Scheduling" tab. This package will likely eventually be moved into `react-devtools-shared`.
\ No newline at end of file
3 +This package contains the new/experimental "timeline" for React 18. This profiler exists as its own project because it was initially deployed as a standalone app. It has since been moved into the DevTools Profiler under the "Scheduling" tab. This package will likely eventually be moved into `react-devtools-shared`.
\ No newline at end of file
packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+40 -46
@@ -109,86 +109,82 @@ export function updateColorsToMatchTheme(element: Element): boolean {
109 COLORS = {
110 BACKGROUND: computedStyle.getPropertyValue('--color-background'),
111 INTERNAL_MODULE_FRAME: computedStyle.getPropertyValue(
112 - '--color-scheduling-profiler-internal-module',
112 + '--color-timeline-internal-module',
113 ),
114 INTERNAL_MODULE_FRAME_HOVER: computedStyle.getPropertyValue(
115 - '--color-scheduling-profiler-internal-module-hover',
115 + '--color-timeline-internal-module-hover',
116 ),
117 INTERNAL_MODULE_FRAME_TEXT: computedStyle.getPropertyValue(
118 - '--color-scheduling-profiler-internal-module-text',
118 + '--color-timeline-internal-module-text',
119 ),
120 NATIVE_EVENT: computedStyle.getPropertyValue(
121 - '--color-scheduling-profiler-native-event',
121 + '--color-timeline-native-event',
122 ),
123 NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
124 - '--color-scheduling-profiler-native-event-hover',
124 + '--color-timeline-native-event-hover',
125 ),
126 NETWORK_PRIMARY: computedStyle.getPropertyValue(
127 - '--color-scheduling-profiler-network-primary',
127 + '--color-timeline-network-primary',
128 ),
129 NETWORK_PRIMARY_HOVER: computedStyle.getPropertyValue(
130 - '--color-scheduling-profiler-network-primary-hover',
130 + '--color-timeline-network-primary-hover',
131 ),
132 NETWORK_SECONDARY: computedStyle.getPropertyValue(
133 - '--color-scheduling-profiler-network-secondary',
133 + '--color-timeline-network-secondary',
134 ),
135 NETWORK_SECONDARY_HOVER: computedStyle.getPropertyValue(
136 - '--color-scheduling-profiler-network-secondary-hover',
136 + '--color-timeline-network-secondary-hover',
137 ),
138 PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
139 - '--color-scheduling-profiler-priority-background',
139 + '--color-timeline-priority-background',
140 ),
141 PRIORITY_BORDER: computedStyle.getPropertyValue(
142 - '--color-scheduling-profiler-priority-border',
142 + '--color-timeline-priority-border',
143 ),
144 PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),
145 - USER_TIMING: computedStyle.getPropertyValue(
146 - '--color-scheduling-profiler-user-timing',
147 - ),
145 + USER_TIMING: computedStyle.getPropertyValue('--color-timeline-user-timing'),
146 USER_TIMING_HOVER: computedStyle.getPropertyValue(
149 - '--color-scheduling-profiler-user-timing-hover',
150 - ),
151 - REACT_IDLE: computedStyle.getPropertyValue(
152 - '--color-scheduling-profiler-react-idle',
147 + '--color-timeline-user-timing-hover',
148 ),
149 + REACT_IDLE: computedStyle.getPropertyValue('--color-timeline-react-idle'),
150 REACT_IDLE_HOVER: computedStyle.getPropertyValue(
155 - '--color-scheduling-profiler-react-idle-hover',
151 + '--color-timeline-react-idle-hover',
152 ),
153 REACT_RENDER: computedStyle.getPropertyValue(
158 - '--color-scheduling-profiler-react-render',
154 + '--color-timeline-react-render',
155 ),
156 REACT_RENDER_HOVER: computedStyle.getPropertyValue(
161 - '--color-scheduling-profiler-react-render-hover',
157 + '--color-timeline-react-render-hover',
158 ),
159 REACT_RENDER_TEXT: computedStyle.getPropertyValue(
164 - '--color-scheduling-profiler-react-render-text',
160 + '--color-timeline-react-render-text',
161 ),
162 REACT_COMMIT: computedStyle.getPropertyValue(
167 - '--color-scheduling-profiler-react-commit',
163 + '--color-timeline-react-commit',
164 ),
165 REACT_COMMIT_HOVER: computedStyle.getPropertyValue(
170 - '--color-scheduling-profiler-react-commit-hover',
166 + '--color-timeline-react-commit-hover',
167 ),
168 REACT_COMMIT_TEXT: computedStyle.getPropertyValue(
173 - '--color-scheduling-profiler-react-commit-text',
169 + '--color-timeline-react-commit-text',
170 ),
171 REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(
176 - '--color-scheduling-profiler-react-layout-effects',
172 + '--color-timeline-react-layout-effects',
173 ),
174 REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(
179 - '--color-scheduling-profiler-react-layout-effects-hover',
175 + '--color-timeline-react-layout-effects-hover',
176 ),
177 REACT_LAYOUT_EFFECTS_TEXT: computedStyle.getPropertyValue(
182 - '--color-scheduling-profiler-react-layout-effects-text',
178 + '--color-timeline-react-layout-effects-text',
179 ),
180 REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(
185 - '--color-scheduling-profiler-react-passive-effects',
181 + '--color-timeline-react-passive-effects',
182 ),
183 REACT_PASSIVE_EFFECTS_HOVER: computedStyle.getPropertyValue(
188 - '--color-scheduling-profiler-react-passive-effects-hover',
184 + '--color-timeline-react-passive-effects-hover',
185 ),
186 REACT_PASSIVE_EFFECTS_TEXT: computedStyle.getPropertyValue(
191 - '--color-scheduling-profiler-react-passive-effects-text',
187 + '--color-timeline-react-passive-effects-text',
188 ),
189 REACT_RESIZE_BAR: computedStyle.getPropertyValue('--color-resize-bar'),
190 REACT_RESIZE_BAR_ACTIVE: computedStyle.getPropertyValue(
@@ -201,44 +197,42 @@ export function updateColorsToMatchTheme(element: Element): boolean {
197 '--color-resize-bar-dot',
198 ),
199 REACT_SCHEDULE: computedStyle.getPropertyValue(
204 - '--color-scheduling-profiler-react-schedule',
200 + '--color-timeline-react-schedule',
201 ),
202 REACT_SCHEDULE_HOVER: computedStyle.getPropertyValue(
207 - '--color-scheduling-profiler-react-schedule-hover',
203 + '--color-timeline-react-schedule-hover',
204 ),
205 REACT_SUSPENSE_REJECTED_EVENT: computedStyle.getPropertyValue(
210 - '--color-scheduling-profiler-react-suspense-rejected',
206 + '--color-timeline-react-suspense-rejected',
207 ),
208 REACT_SUSPENSE_REJECTED_EVENT_HOVER: computedStyle.getPropertyValue(
213 - '--color-scheduling-profiler-react-suspense-rejected-hover',
209 + '--color-timeline-react-suspense-rejected-hover',
210 ),
211 REACT_SUSPENSE_RESOLVED_EVENT: computedStyle.getPropertyValue(
216 - '--color-scheduling-profiler-react-suspense-resolved',
212 + '--color-timeline-react-suspense-resolved',
213 ),
214 REACT_SUSPENSE_RESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
219 - '--color-scheduling-profiler-react-suspense-resolved-hover',
215 + '--color-timeline-react-suspense-resolved-hover',
216 ),
217 REACT_SUSPENSE_UNRESOLVED_EVENT: computedStyle.getPropertyValue(
222 - '--color-scheduling-profiler-react-suspense-unresolved',
218 + '--color-timeline-react-suspense-unresolved',
219 ),
220 REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
225 - '--color-scheduling-profiler-react-suspense-unresolved-hover',
221 + '--color-timeline-react-suspense-unresolved-hover',
222 ),
223 REACT_THROWN_ERROR: computedStyle.getPropertyValue(
228 - '--color-scheduling-profiler-thrown-error',
224 + '--color-timeline-thrown-error',
225 ),
226 REACT_THROWN_ERROR_HOVER: computedStyle.getPropertyValue(
231 - '--color-scheduling-profiler-thrown-error-hover',
227 + '--color-timeline-thrown-error-hover',
228 ),
229 REACT_WORK_BORDER: computedStyle.getPropertyValue(
234 - '--color-scheduling-profiler-react-work-border',
230 + '--color-timeline-react-work-border',
231 ),
232 SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
237 - TEXT_COLOR: computedStyle.getPropertyValue(
238 - '--color-scheduling-profiler-text-color',
239 - ),
233 + TEXT_COLOR: computedStyle.getPropertyValue('--color-timeline-text-color'),
234 TEXT_DIM_COLOR: computedStyle.getPropertyValue(
241 - '--color-scheduling-profiler-text-dim-color',
235 + '--color-timeline-text-dim-color',
236 ),
237 TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),
238 WARNING_BACKGROUND: computedStyle.getPropertyValue(
packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+1 -1
@@ -575,7 +575,7 @@ function processTimelineEvent(
575 }
576 }
577
578 - // TODO (scheduling profiler) Maybe we should calculate depth in post,
578 + // TODO (timeline) Maybe we should calculate depth in post,
579 // so unresolved Suspense requests don't take up space.
580 // We can't know if they'll be resolved or not at this point.
581 // We'll just give them a default (fake) duration width.
packages/react-devtools-shared/src/backend/types.js
+1 -1
@@ -420,7 +420,7 @@ export type DevToolsHook = {
420 didError?: boolean,
421 ) => void,
422
423 - // Scheduling Profiler internal module filtering
423 + // Timeline internal module filtering
424 getInternalModuleRanges: () => Array<[string, string]>,
425 registerInternalModuleStart: (moduleStartError: Error) => void,
426 registerInternalModuleStop: (moduleStopError: Error) => void,
packages/react-devtools-shared/src/constants.js
+80 -80
@@ -154,46 +154,46 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
154 '--color-resize-bar-active': '#dcdcdc',
155 '--color-resize-bar-border': '#d1d1d1',
156 '--color-resize-bar-dot': '#333333',
157 - '--color-scheduling-profiler-internal-module': '#d1d1d1',
158 - '--color-scheduling-profiler-internal-module-hover': '#c9c9c9',
159 - '--color-scheduling-profiler-internal-module-text': '#444',
160 - '--color-scheduling-profiler-native-event': '#ccc',
161 - '--color-scheduling-profiler-native-event-hover': '#aaa',
162 - '--color-scheduling-profiler-network-primary': '#fcf3dc',
163 - '--color-scheduling-profiler-network-primary-hover': '#f0e7d1',
164 - '--color-scheduling-profiler-network-secondary': '#efc457',
165 - '--color-scheduling-profiler-network-secondary-hover': '#e3ba52',
166 - '--color-scheduling-profiler-priority-background': '#f6f6f6',
167 - '--color-scheduling-profiler-priority-border': '#eeeeee',
168 - '--color-scheduling-profiler-user-timing': '#c9cacd',
169 - '--color-scheduling-profiler-user-timing-hover': '#93959a',
170 - '--color-scheduling-profiler-react-idle': '#d3e5f6',
171 - '--color-scheduling-profiler-react-idle-hover': '#c3d9ef',
172 - '--color-scheduling-profiler-react-render': '#9fc3f3',
173 - '--color-scheduling-profiler-react-render-hover': '#83afe9',
174 - '--color-scheduling-profiler-react-render-text': '#11365e',
175 - '--color-scheduling-profiler-react-commit': '#c88ff0',
176 - '--color-scheduling-profiler-react-commit-hover': '#b281d6',
177 - '--color-scheduling-profiler-react-commit-text': '#3e2c4a',
178 - '--color-scheduling-profiler-react-layout-effects': '#b281d6',
179 - '--color-scheduling-profiler-react-layout-effects-hover': '#9d71bd',
180 - '--color-scheduling-profiler-react-layout-effects-text': '#3e2c4a',
181 - '--color-scheduling-profiler-react-passive-effects': '#b281d6',
182 - '--color-scheduling-profiler-react-passive-effects-hover': '#9d71bd',
183 - '--color-scheduling-profiler-react-passive-effects-text': '#3e2c4a',
184 - '--color-scheduling-profiler-react-schedule': '#9fc3f3',
185 - '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
186 - '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
187 - '--color-scheduling-profiler-react-suspense-rejected-hover': '#ffdf37',
188 - '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
189 - '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
190 - '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
191 - '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
192 - '--color-scheduling-profiler-thrown-error': '#ee1638',
193 - '--color-scheduling-profiler-thrown-error-hover': '#da1030',
194 - '--color-scheduling-profiler-text-color': '#000000',
195 - '--color-scheduling-profiler-text-dim-color': '#ccc',
196 - '--color-scheduling-profiler-react-work-border': '#eeeeee',
157 + '--color-timeline-internal-module': '#d1d1d1',
158 + '--color-timeline-internal-module-hover': '#c9c9c9',
159 + '--color-timeline-internal-module-text': '#444',
160 + '--color-timeline-native-event': '#ccc',
161 + '--color-timeline-native-event-hover': '#aaa',
162 + '--color-timeline-network-primary': '#fcf3dc',
163 + '--color-timeline-network-primary-hover': '#f0e7d1',
164 + '--color-timeline-network-secondary': '#efc457',
165 + '--color-timeline-network-secondary-hover': '#e3ba52',
166 + '--color-timeline-priority-background': '#f6f6f6',
167 + '--color-timeline-priority-border': '#eeeeee',
168 + '--color-timeline-user-timing': '#c9cacd',
169 + '--color-timeline-user-timing-hover': '#93959a',
170 + '--color-timeline-react-idle': '#d3e5f6',
171 + '--color-timeline-react-idle-hover': '#c3d9ef',
172 + '--color-timeline-react-render': '#9fc3f3',
173 + '--color-timeline-react-render-hover': '#83afe9',
174 + '--color-timeline-react-render-text': '#11365e',
175 + '--color-timeline-react-commit': '#c88ff0',
176 + '--color-timeline-react-commit-hover': '#b281d6',
177 + '--color-timeline-react-commit-text': '#3e2c4a',
178 + '--color-timeline-react-layout-effects': '#b281d6',
179 + '--color-timeline-react-layout-effects-hover': '#9d71bd',
180 + '--color-timeline-react-layout-effects-text': '#3e2c4a',
181 + '--color-timeline-react-passive-effects': '#b281d6',
182 + '--color-timeline-react-passive-effects-hover': '#9d71bd',
183 + '--color-timeline-react-passive-effects-text': '#3e2c4a',
184 + '--color-timeline-react-schedule': '#9fc3f3',
185 + '--color-timeline-react-schedule-hover': '#2683E2',
186 + '--color-timeline-react-suspense-rejected': '#f1cc14',
187 + '--color-timeline-react-suspense-rejected-hover': '#ffdf37',
188 + '--color-timeline-react-suspense-resolved': '#a6e59f',
189 + '--color-timeline-react-suspense-resolved-hover': '#89d281',
190 + '--color-timeline-react-suspense-unresolved': '#c9cacd',
191 + '--color-timeline-react-suspense-unresolved-hover': '#93959a',
192 + '--color-timeline-thrown-error': '#ee1638',
193 + '--color-timeline-thrown-error-hover': '#da1030',
194 + '--color-timeline-text-color': '#000000',
195 + '--color-timeline-text-dim-color': '#ccc',
196 + '--color-timeline-react-work-border': '#eeeeee',
197 '--color-search-match': 'yellow',
198 '--color-search-match-current': '#f7923b',
199 '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
@@ -298,46 +298,46 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
298 '--color-resize-bar-active': '#31363f',
299 '--color-resize-bar-border': '#3d424a',
300 '--color-resize-bar-dot': '#cfd1d5',
301 - '--color-scheduling-profiler-internal-module': '#303542',
302 - '--color-scheduling-profiler-internal-module-hover': '#363b4a',
303 - '--color-scheduling-profiler-internal-module-text': '#7f8899',
304 - '--color-scheduling-profiler-native-event': '#b2b2b2',
305 - '--color-scheduling-profiler-native-event-hover': '#949494',
306 - '--color-scheduling-profiler-network-primary': '#fcf3dc',
307 - '--color-scheduling-profiler-network-primary-hover': '#e3dbc5',
308 - '--color-scheduling-profiler-network-secondary': '#efc457',
309 - '--color-scheduling-profiler-network-secondary-hover': '#d6af4d',
310 - '--color-scheduling-profiler-priority-background': '#1d2129',
311 - '--color-scheduling-profiler-priority-border': '#282c34',
312 - '--color-scheduling-profiler-user-timing': '#c9cacd',
313 - '--color-scheduling-profiler-user-timing-hover': '#93959a',
314 - '--color-scheduling-profiler-react-idle': '#3d485b',
315 - '--color-scheduling-profiler-react-idle-hover': '#465269',
316 - '--color-scheduling-profiler-react-render': '#2683E2',
317 - '--color-scheduling-profiler-react-render-hover': '#1a76d4',
318 - '--color-scheduling-profiler-react-render-text': '#11365e',
319 - '--color-scheduling-profiler-react-commit': '#731fad',
320 - '--color-scheduling-profiler-react-commit-hover': '#611b94',
321 - '--color-scheduling-profiler-react-commit-text': '#e5c1ff',
322 - '--color-scheduling-profiler-react-layout-effects': '#611b94',
323 - '--color-scheduling-profiler-react-layout-effects-hover': '#51167a',
324 - '--color-scheduling-profiler-react-layout-effects-text': '#e5c1ff',
325 - '--color-scheduling-profiler-react-passive-effects': '#611b94',
326 - '--color-scheduling-profiler-react-passive-effects-hover': '#51167a',
327 - '--color-scheduling-profiler-react-passive-effects-text': '#e5c1ff',
328 - '--color-scheduling-profiler-react-schedule': '#2683E2',
329 - '--color-scheduling-profiler-react-schedule-hover': '#1a76d4',
330 - '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
331 - '--color-scheduling-profiler-react-suspense-rejected-hover': '#e4c00f',
332 - '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
333 - '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
334 - '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
335 - '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
336 - '--color-scheduling-profiler-thrown-error': '#fb3655',
337 - '--color-scheduling-profiler-thrown-error-hover': '#f82042',
338 - '--color-scheduling-profiler-text-color': '#282c34',
339 - '--color-scheduling-profiler-text-dim-color': '#555b66',
340 - '--color-scheduling-profiler-react-work-border': '#3d424a',
301 + '--color-timeline-internal-module': '#303542',
302 + '--color-timeline-internal-module-hover': '#363b4a',
303 + '--color-timeline-internal-module-text': '#7f8899',
304 + '--color-timeline-native-event': '#b2b2b2',
305 + '--color-timeline-native-event-hover': '#949494',
306 + '--color-timeline-network-primary': '#fcf3dc',
307 + '--color-timeline-network-primary-hover': '#e3dbc5',
308 + '--color-timeline-network-secondary': '#efc457',
309 + '--color-timeline-network-secondary-hover': '#d6af4d',
310 + '--color-timeline-priority-background': '#1d2129',
311 + '--color-timeline-priority-border': '#282c34',
312 + '--color-timeline-user-timing': '#c9cacd',
313 + '--color-timeline-user-timing-hover': '#93959a',
314 + '--color-timeline-react-idle': '#3d485b',
315 + '--color-timeline-react-idle-hover': '#465269',
316 + '--color-timeline-react-render': '#2683E2',
317 + '--color-timeline-react-render-hover': '#1a76d4',
318 + '--color-timeline-react-render-text': '#11365e',
319 + '--color-timeline-react-commit': '#731fad',
320 + '--color-timeline-react-commit-hover': '#611b94',
321 + '--color-timeline-react-commit-text': '#e5c1ff',
322 + '--color-timeline-react-layout-effects': '#611b94',
323 + '--color-timeline-react-layout-effects-hover': '#51167a',
324 + '--color-timeline-react-layout-effects-text': '#e5c1ff',
325 + '--color-timeline-react-passive-effects': '#611b94',
326 + '--color-timeline-react-passive-effects-hover': '#51167a',
327 + '--color-timeline-react-passive-effects-text': '#e5c1ff',
328 + '--color-timeline-react-schedule': '#2683E2',
329 + '--color-timeline-react-schedule-hover': '#1a76d4',
330 + '--color-timeline-react-suspense-rejected': '#f1cc14',
331 + '--color-timeline-react-suspense-rejected-hover': '#e4c00f',
332 + '--color-timeline-react-suspense-resolved': '#a6e59f',
333 + '--color-timeline-react-suspense-resolved-hover': '#89d281',
334 + '--color-timeline-react-suspense-unresolved': '#c9cacd',
335 + '--color-timeline-react-suspense-unresolved-hover': '#93959a',
336 + '--color-timeline-thrown-error': '#fb3655',
337 + '--color-timeline-thrown-error-hover': '#f82042',
338 + '--color-timeline-text-color': '#282c34',
339 + '--color-timeline-text-dim-color': '#555b66',
340 + '--color-timeline-react-work-border': '#3d424a',
341 '--color-search-match': 'yellow',
342 '--color-search-match-current': '#f7923b',
343 '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
+1 -1
@@ -71,7 +71,7 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
71 callbacks.add(callback);
72 },
73
74 - // Optional property used by Scheduling Profiler:
74 + // Optional property used by Timeline:
75 displayName: `Searching GitHub issues for error "${errorMessage}"`,
76 };
77 const wake = () => {
packages/react-devtools-shared/src/devtools/views/Icon.js
+2 -2
@@ -21,7 +21,7 @@ export type IconType =
21 | 'flame-chart'
22 | 'profiler'
23 | 'ranked-chart'
24 - | 'scheduling-profiler'
24 + | 'timeline'
25 | 'search'
26 | 'settings'
27 | 'store-as-global-variable'
@@ -65,7 +65,7 @@ export default function Icon({className = '', type}: Props) {
65 case 'ranked-chart':
66 pathData = PATH_RANKED_CHART;
67 break;
68 - case 'scheduling-profiler':
68 + case 'timeline':
69 pathData = PATH_SCHEDULING_PROFILER;
70 break;
71 case 'search':
packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+2 -2
@@ -26,14 +26,14 @@ export default function ClearProfilingDataButton() {
26 const {profilerStore} = store;
27
28 let doesHaveData = false;
29 - if (selectedTabID === 'scheduling-profiler') {
29 + if (selectedTabID === 'timeline') {
30 doesHaveData = schedulingProfilerData !== null;
31 } else {
32 doesHaveData = didRecordCommits;
33 }
34
35 const clear = () => {
36 - if (selectedTabID === 'scheduling-profiler') {
36 + if (selectedTabID === 'timeline') {
37 clearSchedulingProfilerData();
38 } else {
39 profilerStore.clear();
packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+8 -12
@@ -48,7 +48,7 @@ function Profiler(_: {||}) {
48 let isLegacyProfilerSelected = false;
49
50 let view = null;
51 - if (didRecordCommits || selectedTabID === 'scheduling-profiler') {
51 + if (didRecordCommits || selectedTabID === 'timeline') {
52 switch (selectedTabID) {
53 case 'flame-chart':
54 isLegacyProfilerSelected = true;
@@ -58,7 +58,7 @@ function Profiler(_: {||}) {
58 isLegacyProfilerSelected = true;
59 view = <CommitRanked />;
60 break;
61 - case 'scheduling-profiler':
61 + case 'timeline':
62 view = <SchedulingProfiler />;
63 break;
64 default:
@@ -104,14 +104,10 @@ function Profiler(_: {||}) {
104 <div className={styles.LeftColumn}>
105 <div className={styles.Toolbar}>
106 <RecordToggle
107 - disabled={
108 - !supportsProfiling || selectedTabID === 'scheduling-profiler'
109 - }
107 + disabled={!supportsProfiling || selectedTabID === 'timeline'}
108 />
109 <ReloadAndProfileButton
112 - disabled={
113 - selectedTabID === 'scheduling-profiler' || !supportsProfiling
114 - }
110 + disabled={selectedTabID === 'timeline' || !supportsProfiling}
111 />
112 <ClearProfilingDataButton />
113 <ProfilingImportExportButtons />
@@ -168,10 +164,10 @@ const tabsWithSchedulingProfiler = [
164 ...tabs,
165 null, // Divider/separator
166 {
171 - id: 'scheduling-profiler',
172 - icon: 'scheduling-profiler',
173 - label: 'Scheduling',
174 - title: 'Scheduling Profiler',
167 + id: 'timeline',
168 + icon: 'timeline',
169 + label: 'Timeline',
170 + title: 'Timeline',
171 },
172 ];
173
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+2 -2
@@ -19,8 +19,8 @@ import {StoreContext} from '../context';
19
20 import type {ProfilingDataFrontend} from './types';
21
22 -// TODO (scheduling profiler) Should this be its own context?
23 -export type TabID = 'flame-chart' | 'ranked-chart' | 'scheduling-profiler';
22 +// TODO (timeline) Should this be its own context?
23 +export type TabID = 'flame-chart' | 'ranked-chart' | 'timeline';
24
25 export type Context = {|
26 // Which tab is selected in the Profiler UI?
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+2 -2
@@ -123,7 +123,7 @@ export default function ProfilingImportExportButtons() {
123 className={styles.Input}
124 type="file"
125 onChange={
126 - selectedTabID === 'scheduling-profiler'
126 + selectedTabID === 'timeline'
127 ? importSchedulingProfilerDataWrapper
128 : importProfilerData
129 }
@@ -140,7 +140,7 @@ export default function ProfilingImportExportButtons() {
140 disabled={
141 isProfiling ||
142 !profilerStore.didRecordCommits ||
143 - selectedTabID === 'scheduling-profiler'
143 + selectedTabID === 'timeline'
144 }
145 onClick={downloadData}
146 title="Save profile...">
packages/react-devtools-shared/src/dynamicImportCache.js
+1 -1
@@ -74,7 +74,7 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
74 callbacks.add(callback);
75 },
76
77 - // Optional property used by Scheduling Profiler:
77 + // Optional property used by Timeline:
78 displayName: `Loading module "${moduleLoaderFunction.name}"`,
79 };
80
packages/react-devtools-shared/src/hookNamesCache.js
+1 -1
@@ -93,7 +93,7 @@ export function loadHookNames(
93 callbacks.add(callback);
94 },
95
96 - // Optional property used by Scheduling Profiler:
96 + // Optional property used by Timeline:
97 displayName: `Loading hook names for ${element.displayName || 'Unknown'}`,
98 };
99
packages/react-devtools-shared/src/inspectedElementCache.js
+1 -1
@@ -95,7 +95,7 @@ export function inspectElement(
95 callbacks.add(callback);
96 },
97
98 - // Optional property used by Scheduling Profiler:
98 + // Optional property used by Timeline:
99 displayName: `Inspecting ${element.displayName || 'Unknown'}`,
100 };
101
packages/react-reconciler/src/ReactFiberLane.new.js
+1 -1
@@ -78,7 +78,7 @@ export const IdleLane: Lanes = /* */ 0b0100000000000000000
78
79 export const OffscreenLane: Lane = /* */ 0b1000000000000000000000000000000;
80
81 -// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
81 +// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
82 // It should be kept in sync with the Lanes values above.
83 export function getLabelForLane(lane: Lane): string | void {
84 if (enableSchedulingProfiler) {
packages/react-reconciler/src/ReactFiberLane.old.js
+1 -1
@@ -78,7 +78,7 @@ export const IdleLane: Lanes = /* */ 0b0100000000000000000
78
79 export const OffscreenLane: Lane = /* */ 0b1000000000000000000000000000000;
80
81 -// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
81 +// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
82 // It should be kept in sync with the Lanes values above.
83 export function getLabelForLane(lane: Lane): string | void {
84 if (enableSchedulingProfiler) {
packages/react-reconciler/src/SchedulingProfiler.js
+10 -10
@@ -147,7 +147,7 @@ export function markComponentRenderStarted(fiber: Fiber): void {
147 if (enableSchedulingProfiler) {
148 if (supportsUserTimingV3) {
149 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
150 - // TODO (scheduling profiler) Add component stack id
150 + // TODO (timeline) Add component stack id
151 markAndClear(`--component-render-start-${componentName}`);
152 }
153 }
@@ -165,7 +165,7 @@ export function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
165 if (enableSchedulingProfiler) {
166 if (supportsUserTimingV3) {
167 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
168 - // TODO (scheduling profiler) Add component stack id
168 + // TODO (timeline) Add component stack id
169 markAndClear(`--component-passive-effect-mount-start-${componentName}`);
170 }
171 }
@@ -183,7 +183,7 @@ export function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
183 if (enableSchedulingProfiler) {
184 if (supportsUserTimingV3) {
185 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
186 - // TODO (scheduling profiler) Add component stack id
186 + // TODO (timeline) Add component stack id
187 markAndClear(`--component-passive-effect-unmount-start-${componentName}`);
188 }
189 }
@@ -201,7 +201,7 @@ export function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
201 if (enableSchedulingProfiler) {
202 if (supportsUserTimingV3) {
203 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
204 - // TODO (scheduling profiler) Add component stack id
204 + // TODO (timeline) Add component stack id
205 markAndClear(`--component-layout-effect-mount-start-${componentName}`);
206 }
207 }
@@ -219,7 +219,7 @@ export function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
219 if (enableSchedulingProfiler) {
220 if (supportsUserTimingV3) {
221 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
222 - // TODO (scheduling profiler) Add component stack id
222 + // TODO (timeline) Add component stack id
223 markAndClear(`--component-layout-effect-unmount-start-${componentName}`);
224 }
225 }
@@ -254,7 +254,7 @@ export function markComponentErrored(
254 message = thrownValue;
255 }
256
257 - // TODO (scheduling profiler) Add component stack id
257 + // TODO (timeline) Add component stack id
258 markAndClear(`--error-${componentName}-${phase}-${message}`);
259 }
260 }
@@ -287,10 +287,10 @@ export function markComponentSuspended(
287 // Following the non-standard fn.displayName convention,
288 // frameworks like Relay may also annotate Promises with a displayName,
289 // describing what operation/data the thrown Promise is related to.
290 - // When this is available we should pass it along to the Scheduling Profiler.
290 + // When this is available we should pass it along to the Timeline.
291 const displayName = (wakeable: any).displayName || '';
292
293 - // TODO (scheduling profiler) Add component stack id
293 + // TODO (timeline) Add component stack id
294 markAndClear(
295 `--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
296 );
@@ -370,7 +370,7 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
370 if (enableSchedulingProfiler) {
371 if (supportsUserTimingV3) {
372 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
373 - // TODO (scheduling profiler) Add component stack id
373 + // TODO (timeline) Add component stack id
374 markAndClear(`--schedule-forced-update-${lane}-${componentName}`);
375 }
376 }
@@ -380,7 +380,7 @@ export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
380 if (enableSchedulingProfiler) {
381 if (supportsUserTimingV3) {
382 const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
383 - // TODO (scheduling profiler) Add component stack id
383 + // TODO (timeline) Add component stack id
384 markAndClear(`--schedule-state-update-${lane}-${componentName}`);
385 }
386 }
packages/shared/ReactFeatureFlags.js
+1 -1
@@ -16,7 +16,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
16 export const enableDebugTracing = false;
17
18 // Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
19 -// for an experimental scheduling profiler tool.
19 +// for an experimental timeline tool.
20 export const enableSchedulingProfiler = __PROFILE__;
21
22 // Helps identify side effects in render-phase lifecycle hooks and setState
scripts/rollup/wrappers.js
+1 -1
@@ -360,7 +360,7 @@ function wrapBundle(
360 case RN_FB_DEV:
361 case RN_FB_PROFILING:
362 // Certain DEV and Profiling bundles should self-register their own module boundaries with DevTools.
363 - // This allows the Scheduling Profiler to de-emphasize (dim) internal stack frames.
363 + // This allows the Timeline to de-emphasize (dim) internal stack frames.
364 source = `
365 ${registerInternalModuleStart(globalName)}
366 ${source}