Add Lane labels to scheduling profiler marks

This commit changes scheduling profiler marks from a format like "--schedule-render-1" to "--schedule-render-1-Sync" (where 1 is the numeric value of the Sync lane). This will enable the profiler itself to show more meaningful labels for updates and render work.

packages/react-reconciler/src/ReactFiberLane.new.js

@@ -39,6 +39,7 @@ import invariant from 'shared/invariant';
 import {
  enableCache,
  enableNonInterruptingNormalPri,
+ enableSchedulingProfiler,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -85,10 +86,10 @@ export const SyncLane: Lane = /* */ 0b0000000000000000000
 export const SyncBatchedLane: Lane = /* */ 0b0000000000000000000000000000010;
 
 export const InputDiscreteHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;
-const InputDiscreteLane: Lanes = /*  */ 0b0000000000000000000000000001000;
+export const InputDiscreteLane: Lanes = /* */ 0b0000000000000000000000000001000;
 
 const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;
-const InputContinuousLane: Lanes = /* */ 0b0000000000000000000000000100000;
+export const InputContinuousLane: Lanes = /* */ 0b0000000000000000000000000100000;
 
 export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000001000000;
 export const DefaultLane: Lanes = /* */ 0b0000000000000000000000010000000;
@@ -127,6 +128,60 @@ const IdleLane: Lanes = /* */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /* */ 0b1000000000000000000000000000000;
 
+// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
+// It should be kept in sync with the Lanes values above.
+export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
+ if (enableSchedulingProfiler) {
+ const labels = [];
+ if (lanes & SyncLane) {
+ labels.push('Sync');
+ }
+ if (lanes & SyncBatchedLane) {
+ labels.push('SyncBatched');
+ }
+ if (lanes & InputDiscreteHydrationLane) {
+ labels.push('InputDiscreteHydration');
+ }
+ if (lanes & InputDiscreteLane) {
+ labels.push('InputDiscrete');
+ }
+ if (lanes & InputContinuousHydrationLane) {
+ labels.push('InputContinuousHydration');
+ }
+ if (lanes & InputContinuousLane) {
+ labels.push('InputContinuous');
+ }
+ if (lanes & DefaultHydrationLane) {
+ labels.push('DefaultHydration');
+ }
+ if (lanes & DefaultLane) {
+ labels.push('Default');
+ }
+ if (lanes & TransitionHydrationLane) {
+ labels.push('TransitionHydration');
+ }
+ if (lanes & TransitionLanes) {
+ labels.push('Transition(s)');
+ }
+ if (lanes & RetryLanes) {
+ labels.push('Retry(s)');
+ }
+ if (lanes & SelectiveHydrationLane) {
+ labels.push('SelectiveHydration');
+ }
+ if (lanes & IdleHydrationLane) {
+ labels.push('IdleHydration');
+ }
+ if (lanes & IdleLane) {
+ labels.push('Idle');
+ }
+ if (lanes & OffscreenLane) {
+ labels.push('Offscreen');
+ }
+ return labels;
+ }
+}
+
 export const NoTimestamp = -1;
 
 let currentUpdateLanePriority: LanePriority = NoLanePriority;

packages/react-reconciler/src/ReactFiberLane.old.js

@@ -39,6 +39,7 @@ import invariant from 'shared/invariant';
 import {
  enableCache,
  enableNonInterruptingNormalPri,
+ enableSchedulingProfiler,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -85,10 +86,10 @@ export const SyncLane: Lane = /* */ 0b0000000000000000000
 export const SyncBatchedLane: Lane = /* */ 0b0000000000000000000000000000010;
 
 export const InputDiscreteHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;
-const InputDiscreteLane: Lanes = /*  */ 0b0000000000000000000000000001000;
+export const InputDiscreteLane: Lanes = /* */ 0b0000000000000000000000000001000;
 
 const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;
-const InputContinuousLane: Lanes = /* */ 0b0000000000000000000000000100000;
+export const InputContinuousLane: Lanes = /* */ 0b0000000000000000000000000100000;
 
 export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000001000000;
 export const DefaultLane: Lanes = /* */ 0b0000000000000000000000010000000;
@@ -127,6 +128,60 @@ const IdleLane: Lanes = /* */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /* */ 0b1000000000000000000000000000000;
 
+// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
+// It should be kept in sync with the Lanes values above.
+export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
+ if (enableSchedulingProfiler) {
+ const labels = [];
+ if (lanes & SyncLane) {
+ labels.push('Sync');
+ }
+ if (lanes & SyncBatchedLane) {
+ labels.push('SyncBatched');
+ }
+ if (lanes & InputDiscreteHydrationLane) {
+ labels.push('InputDiscreteHydration');
+ }
+ if (lanes & InputDiscreteLane) {
+ labels.push('InputDiscrete');
+ }
+ if (lanes & InputContinuousHydrationLane) {
+ labels.push('InputContinuousHydration');
+ }
+ if (lanes & InputContinuousLane) {
+ labels.push('InputContinuous');
+ }
+ if (lanes & DefaultHydrationLane) {
+ labels.push('DefaultHydration');
+ }
+ if (lanes & DefaultLane) {
+ labels.push('Default');
+ }
+ if (lanes & TransitionHydrationLane) {
+ labels.push('TransitionHydration');
+ }
+ if (lanes & TransitionLanes) {
+ labels.push('Transition(s)');
+ }
+ if (lanes & RetryLanes) {
+ labels.push('Retry(s)');
+ }
+ if (lanes & SelectiveHydrationLane) {
+ labels.push('SelectiveHydration');
+ }
+ if (lanes & IdleHydrationLane) {
+ labels.push('IdleHydration');
+ }
+ if (lanes & IdleLane) {
+ labels.push('Idle');
+ }
+ if (lanes & OffscreenLane) {
+ labels.push('Offscreen');
+ }
+ return labels;
+ }
+}
+
 export const NoTimestamp = -1;
 
 let currentUpdateLanePriority: LanePriority = NoLanePriority;

packages/react-reconciler/src/SchedulingProfiler.js

@@ -11,10 +11,20 @@ import type {Lane, Lanes} from './ReactFiberLane.old';
 import type {Fiber} from './ReactInternalTypes';
 import type {Wakeable} from 'shared/ReactTypes';
 
-import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
+import {
+ enableNewReconciler,
+ enableSchedulingProfiler,
+} from 'shared/ReactFeatureFlags';
 import ReactVersion from 'shared/ReactVersion';
 import getComponentName from 'shared/getComponentName';
 
+import {getLabelsForLanes as getLabelsForLanes_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {getLabelsForLanes as getLabelsForLanes_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const getLabelsForLanes = enableNewReconciler
+ ? getLabelsForLanes_new
+ : getLabelsForLanes_old;
+
 /**
  * If performance exists and supports the subset of the User Timing API that we
  * require.
@@ -49,8 +59,14 @@ if (enableSchedulingProfiler) {
  }
 }
 
-function formatLanes(laneOrLanes: Lane | Lanes): string {
- return ((laneOrLanes: any): number).toString();
+export function formatLanes(laneOrLanes: Lane | Lanes): string {
+ let labels = getLabelsForLanes(laneOrLanes);
+ if (labels != null) {
+ labels = labels.sort().join(',');
+ } else {
+ labels = '';
+ }
+ return `${laneOrLanes}-${labels}`;
 }
 
 function markAndClear(name) {