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) {