maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Brian Vaughn 2021-11-03 15:10:29 -04:00 committed by GitHub
parent 255221c869
commit 51c558aeb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 158 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-devtools-extensions/src/main.js vendored
View File

@ -152,7 +152,7 @@ function createPanelIfReactLoaded() {
isProfiling,
supportsReloadAndProfile: isChrome || isEdge,
supportsProfiling,
// At this time, the scheduling profiler can only parse Chrome performance profiles.
// At this time, the timeline can only parse Chrome performance profiles.
supportsSchedulingProfiler: isChrome,
supportsTraceUpdates: true,
});

2
packages/react-devtools-scheduling-profiler/README.md
View File

@ -1,3 +1,3 @@
# React Concurrent Mode Profiler
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`.
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`.

86
packages/react-devtools-scheduling-profiler/src/content-views/constants.js vendored
View File

@ -109,86 +109,82 @@ export function updateColorsToMatchTheme(element: Element): boolean {
COLORS = {
BACKGROUND: computedStyle.getPropertyValue('--color-background'),
INTERNAL_MODULE_FRAME: computedStyle.getPropertyValue(
'--color-scheduling-profiler-internal-module',
'--color-timeline-internal-module',
),
INTERNAL_MODULE_FRAME_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-internal-module-hover',
'--color-timeline-internal-module-hover',
),
INTERNAL_MODULE_FRAME_TEXT: computedStyle.getPropertyValue(
'--color-scheduling-profiler-internal-module-text',
'--color-timeline-internal-module-text',
),
NATIVE_EVENT: computedStyle.getPropertyValue(
'--color-scheduling-profiler-native-event',
'--color-timeline-native-event',
),
NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-native-event-hover',
'--color-timeline-native-event-hover',
),
NETWORK_PRIMARY: computedStyle.getPropertyValue(
'--color-scheduling-profiler-network-primary',
'--color-timeline-network-primary',
),
NETWORK_PRIMARY_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-network-primary-hover',
'--color-timeline-network-primary-hover',
),
NETWORK_SECONDARY: computedStyle.getPropertyValue(
'--color-scheduling-profiler-network-secondary',
'--color-timeline-network-secondary',
),
NETWORK_SECONDARY_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-network-secondary-hover',
'--color-timeline-network-secondary-hover',
),
PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
'--color-scheduling-profiler-priority-background',
'--color-timeline-priority-background',
),
PRIORITY_BORDER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-priority-border',
'--color-timeline-priority-border',
),
PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),
USER_TIMING: computedStyle.getPropertyValue(
'--color-scheduling-profiler-user-timing',
),
USER_TIMING: computedStyle.getPropertyValue('--color-timeline-user-timing'),
USER_TIMING_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-user-timing-hover',
),
REACT_IDLE: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-idle',
'--color-timeline-user-timing-hover',
),
REACT_IDLE: computedStyle.getPropertyValue('--color-timeline-react-idle'),
REACT_IDLE_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-idle-hover',
'--color-timeline-react-idle-hover',
),
REACT_RENDER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-render',
'--color-timeline-react-render',
),
REACT_RENDER_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-render-hover',
'--color-timeline-react-render-hover',
),
REACT_RENDER_TEXT: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-render-text',
'--color-timeline-react-render-text',
),
REACT_COMMIT: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-commit',
'--color-timeline-react-commit',
),
REACT_COMMIT_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-commit-hover',
'--color-timeline-react-commit-hover',
),
REACT_COMMIT_TEXT: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-commit-text',
'--color-timeline-react-commit-text',
),
REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-layout-effects',
'--color-timeline-react-layout-effects',
),
REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-layout-effects-hover',
'--color-timeline-react-layout-effects-hover',
),
REACT_LAYOUT_EFFECTS_TEXT: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-layout-effects-text',
'--color-timeline-react-layout-effects-text',
),
REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-passive-effects',
'--color-timeline-react-passive-effects',
),
REACT_PASSIVE_EFFECTS_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-passive-effects-hover',
'--color-timeline-react-passive-effects-hover',
),
REACT_PASSIVE_EFFECTS_TEXT: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-passive-effects-text',
'--color-timeline-react-passive-effects-text',
),
REACT_RESIZE_BAR: computedStyle.getPropertyValue('--color-resize-bar'),
REACT_RESIZE_BAR_ACTIVE: computedStyle.getPropertyValue(
@ -201,44 +197,42 @@ export function updateColorsToMatchTheme(element: Element): boolean {
'--color-resize-bar-dot',
),
REACT_SCHEDULE: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-schedule',
'--color-timeline-react-schedule',
),
REACT_SCHEDULE_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-schedule-hover',
'--color-timeline-react-schedule-hover',
),
REACT_SUSPENSE_REJECTED_EVENT: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-suspense-rejected',
'--color-timeline-react-suspense-rejected',
),
REACT_SUSPENSE_REJECTED_EVENT_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-suspense-rejected-hover',
'--color-timeline-react-suspense-rejected-hover',
),
REACT_SUSPENSE_RESOLVED_EVENT: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-suspense-resolved',
'--color-timeline-react-suspense-resolved',
),
REACT_SUSPENSE_RESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-suspense-resolved-hover',
'--color-timeline-react-suspense-resolved-hover',
),
REACT_SUSPENSE_UNRESOLVED_EVENT: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-suspense-unresolved',
'--color-timeline-react-suspense-unresolved',
),
REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-suspense-unresolved-hover',
'--color-timeline-react-suspense-unresolved-hover',
),
REACT_THROWN_ERROR: computedStyle.getPropertyValue(
'--color-scheduling-profiler-thrown-error',
'--color-timeline-thrown-error',
),
REACT_THROWN_ERROR_HOVER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-thrown-error-hover',
'--color-timeline-thrown-error-hover',
),
REACT_WORK_BORDER: computedStyle.getPropertyValue(
'--color-scheduling-profiler-react-work-border',
'--color-timeline-react-work-border',
),
SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
TEXT_COLOR: computedStyle.getPropertyValue(
'--color-scheduling-profiler-text-color',
),
TEXT_COLOR: computedStyle.getPropertyValue('--color-timeline-text-color'),
TEXT_DIM_COLOR: computedStyle.getPropertyValue(
'--color-scheduling-profiler-text-dim-color',
'--color-timeline-text-dim-color',
),
TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),
WARNING_BACKGROUND: computedStyle.getPropertyValue(

2
packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js vendored
View File

@ -575,7 +575,7 @@ function processTimelineEvent(
}
}
// TODO (scheduling profiler) Maybe we should calculate depth in post,
// TODO (timeline) Maybe we should calculate depth in post,
// so unresolved Suspense requests don't take up space.
// We can't know if they'll be resolved or not at this point.
// We'll just give them a default (fake) duration width.

2
packages/react-devtools-shared/src/backend/types.js vendored
View File

@ -420,7 +420,7 @@ export type DevToolsHook = {
didError?: boolean,
) => void,
// Scheduling Profiler internal module filtering
// Timeline internal module filtering
getInternalModuleRanges: () => Array<[string, string]>,
registerInternalModuleStart: (moduleStartError: Error) => void,
registerInternalModuleStop: (moduleStopError: Error) => void,

160
packages/react-devtools-shared/src/constants.js vendored
View File

@ -154,46 +154,46 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
'--color-resize-bar-active': '#dcdcdc',
'--color-resize-bar-border': '#d1d1d1',
'--color-resize-bar-dot': '#333333',
'--color-scheduling-profiler-internal-module': '#d1d1d1',
'--color-scheduling-profiler-internal-module-hover': '#c9c9c9',
'--color-scheduling-profiler-internal-module-text': '#444',
'--color-scheduling-profiler-native-event': '#ccc',
'--color-scheduling-profiler-native-event-hover': '#aaa',
'--color-scheduling-profiler-network-primary': '#fcf3dc',
'--color-scheduling-profiler-network-primary-hover': '#f0e7d1',
'--color-scheduling-profiler-network-secondary': '#efc457',
'--color-scheduling-profiler-network-secondary-hover': '#e3ba52',
'--color-scheduling-profiler-priority-background': '#f6f6f6',
'--color-scheduling-profiler-priority-border': '#eeeeee',
'--color-scheduling-profiler-user-timing': '#c9cacd',
'--color-scheduling-profiler-user-timing-hover': '#93959a',
'--color-scheduling-profiler-react-idle': '#d3e5f6',
'--color-scheduling-profiler-react-idle-hover': '#c3d9ef',
'--color-scheduling-profiler-react-render': '#9fc3f3',
'--color-scheduling-profiler-react-render-hover': '#83afe9',
'--color-scheduling-profiler-react-render-text': '#11365e',
'--color-scheduling-profiler-react-commit': '#c88ff0',
'--color-scheduling-profiler-react-commit-hover': '#b281d6',
'--color-scheduling-profiler-react-commit-text': '#3e2c4a',
'--color-scheduling-profiler-react-layout-effects': '#b281d6',
'--color-scheduling-profiler-react-layout-effects-hover': '#9d71bd',
'--color-scheduling-profiler-react-layout-effects-text': '#3e2c4a',
'--color-scheduling-profiler-react-passive-effects': '#b281d6',
'--color-scheduling-profiler-react-passive-effects-hover': '#9d71bd',
'--color-scheduling-profiler-react-passive-effects-text': '#3e2c4a',
'--color-scheduling-profiler-react-schedule': '#9fc3f3',
'--color-scheduling-profiler-react-schedule-hover': '#2683E2',
'--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
'--color-scheduling-profiler-react-suspense-rejected-hover': '#ffdf37',
'--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
'--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
'--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
'--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
'--color-scheduling-profiler-thrown-error': '#ee1638',
'--color-scheduling-profiler-thrown-error-hover': '#da1030',
'--color-scheduling-profiler-text-color': '#000000',
'--color-scheduling-profiler-text-dim-color': '#ccc',
'--color-scheduling-profiler-react-work-border': '#eeeeee',
'--color-timeline-internal-module': '#d1d1d1',
'--color-timeline-internal-module-hover': '#c9c9c9',
'--color-timeline-internal-module-text': '#444',
'--color-timeline-native-event': '#ccc',
'--color-timeline-native-event-hover': '#aaa',
'--color-timeline-network-primary': '#fcf3dc',
'--color-timeline-network-primary-hover': '#f0e7d1',
'--color-timeline-network-secondary': '#efc457',
'--color-timeline-network-secondary-hover': '#e3ba52',
'--color-timeline-priority-background': '#f6f6f6',
'--color-timeline-priority-border': '#eeeeee',
'--color-timeline-user-timing': '#c9cacd',
'--color-timeline-user-timing-hover': '#93959a',
'--color-timeline-react-idle': '#d3e5f6',
'--color-timeline-react-idle-hover': '#c3d9ef',
'--color-timeline-react-render': '#9fc3f3',
'--color-timeline-react-render-hover': '#83afe9',
'--color-timeline-react-render-text': '#11365e',
'--color-timeline-react-commit': '#c88ff0',
'--color-timeline-react-commit-hover': '#b281d6',
'--color-timeline-react-commit-text': '#3e2c4a',
'--color-timeline-react-layout-effects': '#b281d6',
'--color-timeline-react-layout-effects-hover': '#9d71bd',
'--color-timeline-react-layout-effects-text': '#3e2c4a',
'--color-timeline-react-passive-effects': '#b281d6',
'--color-timeline-react-passive-effects-hover': '#9d71bd',
'--color-timeline-react-passive-effects-text': '#3e2c4a',
'--color-timeline-react-schedule': '#9fc3f3',
'--color-timeline-react-schedule-hover': '#2683E2',
'--color-timeline-react-suspense-rejected': '#f1cc14',
'--color-timeline-react-suspense-rejected-hover': '#ffdf37',
'--color-timeline-react-suspense-resolved': '#a6e59f',
'--color-timeline-react-suspense-resolved-hover': '#89d281',
'--color-timeline-react-suspense-unresolved': '#c9cacd',
'--color-timeline-react-suspense-unresolved-hover': '#93959a',
'--color-timeline-thrown-error': '#ee1638',
'--color-timeline-thrown-error-hover': '#da1030',
'--color-timeline-text-color': '#000000',
'--color-timeline-text-dim-color': '#ccc',
'--color-timeline-react-work-border': '#eeeeee',
'--color-search-match': 'yellow',
'--color-search-match-current': '#f7923b',
'--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
@ -298,46 +298,46 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
'--color-resize-bar-active': '#31363f',
'--color-resize-bar-border': '#3d424a',
'--color-resize-bar-dot': '#cfd1d5',
'--color-scheduling-profiler-internal-module': '#303542',
'--color-scheduling-profiler-internal-module-hover': '#363b4a',
'--color-scheduling-profiler-internal-module-text': '#7f8899',
'--color-scheduling-profiler-native-event': '#b2b2b2',
'--color-scheduling-profiler-native-event-hover': '#949494',
'--color-scheduling-profiler-network-primary': '#fcf3dc',
'--color-scheduling-profiler-network-primary-hover': '#e3dbc5',
'--color-scheduling-profiler-network-secondary': '#efc457',
'--color-scheduling-profiler-network-secondary-hover': '#d6af4d',
'--color-scheduling-profiler-priority-background': '#1d2129',
'--color-scheduling-profiler-priority-border': '#282c34',
'--color-scheduling-profiler-user-timing': '#c9cacd',
'--color-scheduling-profiler-user-timing-hover': '#93959a',
'--color-scheduling-profiler-react-idle': '#3d485b',
'--color-scheduling-profiler-react-idle-hover': '#465269',
'--color-scheduling-profiler-react-render': '#2683E2',
'--color-scheduling-profiler-react-render-hover': '#1a76d4',
'--color-scheduling-profiler-react-render-text': '#11365e',
'--color-scheduling-profiler-react-commit': '#731fad',
'--color-scheduling-profiler-react-commit-hover': '#611b94',
'--color-scheduling-profiler-react-commit-text': '#e5c1ff',
'--color-scheduling-profiler-react-layout-effects': '#611b94',
'--color-scheduling-profiler-react-layout-effects-hover': '#51167a',
'--color-scheduling-profiler-react-layout-effects-text': '#e5c1ff',
'--color-scheduling-profiler-react-passive-effects': '#611b94',
'--color-scheduling-profiler-react-passive-effects-hover': '#51167a',
'--color-scheduling-profiler-react-passive-effects-text': '#e5c1ff',
'--color-scheduling-profiler-react-schedule': '#2683E2',
'--color-scheduling-profiler-react-schedule-hover': '#1a76d4',
'--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
'--color-scheduling-profiler-react-suspense-rejected-hover': '#e4c00f',
'--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
'--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
'--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
'--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
'--color-scheduling-profiler-thrown-error': '#fb3655',
'--color-scheduling-profiler-thrown-error-hover': '#f82042',
'--color-scheduling-profiler-text-color': '#282c34',
'--color-scheduling-profiler-text-dim-color': '#555b66',
'--color-scheduling-profiler-react-work-border': '#3d424a',
'--color-timeline-internal-module': '#303542',
'--color-timeline-internal-module-hover': '#363b4a',
'--color-timeline-internal-module-text': '#7f8899',
'--color-timeline-native-event': '#b2b2b2',
'--color-timeline-native-event-hover': '#949494',
'--color-timeline-network-primary': '#fcf3dc',
'--color-timeline-network-primary-hover': '#e3dbc5',
'--color-timeline-network-secondary': '#efc457',
'--color-timeline-network-secondary-hover': '#d6af4d',
'--color-timeline-priority-background': '#1d2129',
'--color-timeline-priority-border': '#282c34',
'--color-timeline-user-timing': '#c9cacd',
'--color-timeline-user-timing-hover': '#93959a',
'--color-timeline-react-idle': '#3d485b',
'--color-timeline-react-idle-hover': '#465269',
'--color-timeline-react-render': '#2683E2',
'--color-timeline-react-render-hover': '#1a76d4',
'--color-timeline-react-render-text': '#11365e',
'--color-timeline-react-commit': '#731fad',
'--color-timeline-react-commit-hover': '#611b94',
'--color-timeline-react-commit-text': '#e5c1ff',
'--color-timeline-react-layout-effects': '#611b94',
'--color-timeline-react-layout-effects-hover': '#51167a',
'--color-timeline-react-layout-effects-text': '#e5c1ff',
'--color-timeline-react-passive-effects': '#611b94',
'--color-timeline-react-passive-effects-hover': '#51167a',
'--color-timeline-react-passive-effects-text': '#e5c1ff',
'--color-timeline-react-schedule': '#2683E2',
'--color-timeline-react-schedule-hover': '#1a76d4',
'--color-timeline-react-suspense-rejected': '#f1cc14',
'--color-timeline-react-suspense-rejected-hover': '#e4c00f',
'--color-timeline-react-suspense-resolved': '#a6e59f',
'--color-timeline-react-suspense-resolved-hover': '#89d281',
'--color-timeline-react-suspense-unresolved': '#c9cacd',
'--color-timeline-react-suspense-unresolved-hover': '#93959a',
'--color-timeline-thrown-error': '#fb3655',
'--color-timeline-thrown-error-hover': '#f82042',
'--color-timeline-text-color': '#282c34',
'--color-timeline-text-dim-color': '#555b66',
'--color-timeline-react-work-border': '#3d424a',
'--color-search-match': 'yellow',
'--color-search-match-current': '#f7923b',
'--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',

2
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js vendored
View File

@ -71,7 +71,7 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
callbacks.add(callback);
},
// Optional property used by Scheduling Profiler:
// Optional property used by Timeline:
displayName: `Searching GitHub issues for error "${errorMessage}"`,
};
const wake = () => {

4
packages/react-devtools-shared/src/devtools/views/Icon.js vendored
View File

@ -21,7 +21,7 @@ export type IconType =
| 'flame-chart'
| 'profiler'
| 'ranked-chart'
| 'scheduling-profiler'
| 'timeline'
| 'search'
| 'settings'
| 'store-as-global-variable'
@ -65,7 +65,7 @@ export default function Icon({className = '', type}: Props) {
case 'ranked-chart':
pathData = PATH_RANKED_CHART;
break;
case 'scheduling-profiler':
case 'timeline':
pathData = PATH_SCHEDULING_PROFILER;
break;
case 'search':

4
packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js vendored
View File

@ -26,14 +26,14 @@ export default function ClearProfilingDataButton() {
const {profilerStore} = store;
let doesHaveData = false;
if (selectedTabID === 'scheduling-profiler') {
if (selectedTabID === 'timeline') {
doesHaveData = schedulingProfilerData !== null;
} else {
doesHaveData = didRecordCommits;
}
const clear = () => {
if (selectedTabID === 'scheduling-profiler') {
if (selectedTabID === 'timeline') {
clearSchedulingProfilerData();
} else {
profilerStore.clear();

20
packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js vendored
View File

@ -48,7 +48,7 @@ function Profiler(_: {||}) {
let isLegacyProfilerSelected = false;
let view = null;
if (didRecordCommits || selectedTabID === 'scheduling-profiler') {
if (didRecordCommits || selectedTabID === 'timeline') {
switch (selectedTabID) {
case 'flame-chart':
isLegacyProfilerSelected = true;
@ -58,7 +58,7 @@ function Profiler(_: {||}) {
isLegacyProfilerSelected = true;
view = <CommitRanked />;
break;
case 'scheduling-profiler':
case 'timeline':
view = <SchedulingProfiler />;
break;
default:
@ -104,14 +104,10 @@ function Profiler(_: {||}) {
<div className={styles.LeftColumn}>
<div className={styles.Toolbar}>
<RecordToggle
disabled={
!supportsProfiling || selectedTabID === 'scheduling-profiler'
}
disabled={!supportsProfiling || selectedTabID === 'timeline'}
/>
<ReloadAndProfileButton
disabled={
selectedTabID === 'scheduling-profiler' || !supportsProfiling
}
disabled={selectedTabID === 'timeline' || !supportsProfiling}
/>
<ClearProfilingDataButton />
<ProfilingImportExportButtons />
@ -168,10 +164,10 @@ const tabsWithSchedulingProfiler = [
...tabs,
null, // Divider/separator
{
id: 'scheduling-profiler',
icon: 'scheduling-profiler',
label: 'Scheduling',
title: 'Scheduling Profiler',
id: 'timeline',
icon: 'timeline',
label: 'Timeline',
title: 'Timeline',
},
];

4
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js vendored
View File

@ -19,8 +19,8 @@ import {StoreContext} from '../context';
import type {ProfilingDataFrontend} from './types';
// TODO (scheduling profiler) Should this be its own context?
export type TabID = 'flame-chart' | 'ranked-chart' | 'scheduling-profiler';
// TODO (timeline) Should this be its own context?
export type TabID = 'flame-chart' | 'ranked-chart' | 'timeline';
export type Context = {|
// Which tab is selected in the Profiler UI?

4
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js vendored
View File

@ -123,7 +123,7 @@ export default function ProfilingImportExportButtons() {
className={styles.Input}
type="file"
onChange={
selectedTabID === 'scheduling-profiler'
selectedTabID === 'timeline'
? importSchedulingProfilerDataWrapper
: importProfilerData
}
@ -140,7 +140,7 @@ export default function ProfilingImportExportButtons() {
disabled={
isProfiling ||
!profilerStore.didRecordCommits ||
selectedTabID === 'scheduling-profiler'
selectedTabID === 'timeline'
}
onClick={downloadData}
title="Save profile...">

2
packages/react-devtools-shared/src/dynamicImportCache.js vendored
View File

@ -74,7 +74,7 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
callbacks.add(callback);
},
// Optional property used by Scheduling Profiler:
// Optional property used by Timeline:
displayName: `Loading module "${moduleLoaderFunction.name}"`,
};

2
packages/react-devtools-shared/src/hookNamesCache.js vendored
View File

@ -93,7 +93,7 @@ export function loadHookNames(
callbacks.add(callback);
},
// Optional property used by Scheduling Profiler:
// Optional property used by Timeline:
displayName: `Loading hook names for ${element.displayName || 'Unknown'}`,
};

2
packages/react-devtools-shared/src/inspectedElementCache.js vendored
View File

@ -95,7 +95,7 @@ export function inspectElement(
callbacks.add(callback);
},
// Optional property used by Scheduling Profiler:
// Optional property used by Timeline:
displayName: `Inspecting ${element.displayName || 'Unknown'}`,
};

2
packages/react-reconciler/src/ReactFiberLane.new.js
View File

@ -78,7 +78,7 @@ export const IdleLane: Lanes = /* */ 0b0100000000000000000
export const OffscreenLane: Lane = /* */ 0b1000000000000000000000000000000;
// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
// It should be kept in sync with the Lanes values above.
export function getLabelForLane(lane: Lane): string | void {
if (enableSchedulingProfiler) {

2
packages/react-reconciler/src/ReactFiberLane.old.js
View File

@ -78,7 +78,7 @@ export const IdleLane: Lanes = /* */ 0b0100000000000000000
export const OffscreenLane: Lane = /* */ 0b1000000000000000000000000000000;
// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
// It should be kept in sync with the Lanes values above.
export function getLabelForLane(lane: Lane): string | void {
if (enableSchedulingProfiler) {

20
packages/react-reconciler/src/SchedulingProfiler.js vendored
View File

@ -147,7 +147,7 @@ export function markComponentRenderStarted(fiber: Fiber): void {
if (enableSchedulingProfiler) {
if (supportsUserTimingV3) {
const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
// TODO (scheduling profiler) Add component stack id
// TODO (timeline) Add component stack id
markAndClear(`--component-render-start-${componentName}`);
}
}
@ -165,7 +165,7 @@ export function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
if (enableSchedulingProfiler) {
if (supportsUserTimingV3) {
const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
// TODO (scheduling profiler) Add component stack id
// TODO (timeline) Add component stack id
markAndClear(`--component-passive-effect-mount-start-${componentName}`);
}
}
@ -183,7 +183,7 @@ export function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
if (enableSchedulingProfiler) {
if (supportsUserTimingV3) {
const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
// TODO (scheduling profiler) Add component stack id
// TODO (timeline) Add component stack id
markAndClear(`--component-passive-effect-unmount-start-${componentName}`);
}
}
@ -201,7 +201,7 @@ export function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
if (enableSchedulingProfiler) {
if (supportsUserTimingV3) {
const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
// TODO (scheduling profiler) Add component stack id
// TODO (timeline) Add component stack id
markAndClear(`--component-layout-effect-mount-start-${componentName}`);
}
}
@ -219,7 +219,7 @@ export function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
if (enableSchedulingProfiler) {
if (supportsUserTimingV3) {
const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
// TODO (scheduling profiler) Add component stack id
// TODO (timeline) Add component stack id
markAndClear(`--component-layout-effect-unmount-start-${componentName}`);
}
}
@ -254,7 +254,7 @@ export function markComponentErrored(
message = thrownValue;
}
// TODO (scheduling profiler) Add component stack id
// TODO (timeline) Add component stack id
markAndClear(`--error-${componentName}-${phase}-${message}`);
}
}
@ -287,10 +287,10 @@ export function markComponentSuspended(
// Following the non-standard fn.displayName convention,
// frameworks like Relay may also annotate Promises with a displayName,
// describing what operation/data the thrown Promise is related to.
// When this is available we should pass it along to the Scheduling Profiler.
// When this is available we should pass it along to the Timeline.
const displayName = (wakeable: any).displayName || '';
// TODO (scheduling profiler) Add component stack id
// TODO (timeline) Add component stack id
markAndClear(
`--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
);
@ -370,7 +370,7 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
if (enableSchedulingProfiler) {
if (supportsUserTimingV3) {
const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
// TODO (scheduling profiler) Add component stack id
// TODO (timeline) Add component stack id
markAndClear(`--schedule-forced-update-${lane}-${componentName}`);
}
}
@ -380,7 +380,7 @@ export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
if (enableSchedulingProfiler) {
if (supportsUserTimingV3) {
const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
// TODO (scheduling profiler) Add component stack id
// TODO (timeline) Add component stack id
markAndClear(`--schedule-state-update-${lane}-${componentName}`);
}
}

2
packages/shared/ReactFeatureFlags.js
View File

@ -16,7 +16,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
export const enableDebugTracing = false;
// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
// for an experimental scheduling profiler tool.
// for an experimental timeline tool.
export const enableSchedulingProfiler = __PROFILE__;
// Helps identify side effects in render-phase lifecycle hooks and setState

2
scripts/rollup/wrappers.js
View File

@ -360,7 +360,7 @@ function wrapBundle(
case RN_FB_DEV:
case RN_FB_PROFILING:
// Certain DEV and Profiling bundles should self-register their own module boundaries with DevTools.
// This allows the Scheduling Profiler to de-emphasize (dim) internal stack frames.
// This allows the Timeline to de-emphasize (dim) internal stack frames.
source = `
${registerInternalModuleStart(globalName)}
${source}