Skip to content

Commit

Permalink
Rename (some) "scheduling profiler" references to "timeline" (#22690)
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn committed Nov 3, 2021
1 parent 255221c commit 51c558a
Show file tree
Hide file tree
Showing 20 changed files with 158 additions and 168 deletions.
2 changes: 1 addition & 1 deletion packages/react-devtools-extensions/src/main.js
View file
Expand Up @@ -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,
});
Expand Down
2 changes: 1 addition & 1 deletion 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 changes: 40 additions & 46 deletions packages/react-devtools-scheduling-profiler/src/content-views/constants.js
View file
Expand Up @@ -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(
Expand All @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
View file
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/backend/types.js
View file
Expand Up @@ -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,
Expand Down
160 changes: 80 additions & 80 deletions packages/react-devtools-shared/src/constants.js
View file
Expand Up @@ -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)',
Expand Down Expand Up @@ -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)',
Expand Down

0 comments on commit 51c558a

Please sign in to comment.