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

packages/react-devtools-extensions/src/main.js

@@ -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,
         });

packages/react-devtools-scheduling-profiler/README.md

@@ -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`.

packages/react-devtools-scheduling-profiler/src/content-views/constants.js

@@ -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(

packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js

@@ -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.

packages/react-devtools-shared/src/backend/types.js

@@ -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,

packages/react-devtools-shared/src/constants.js

@@ -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)',