Add Lane labels to scheduling profiler marks

This changes profiler marks from a format like "--schedule-render-1" like "--schedule-render-1-Sync" which will enable the profiler itself to show more meaningful labels for updates and render work.

There are a couple of downsides to this proposed change:
1. It reqiures maintaining a map of bitmask range to string/label in ReactFiberLanel. Hopefully not a huge burden but something we would need to remember to keep in sync.
2. It increases the size of User Timing data logged by the profiler during render. (I don't think there's a way around this since there's no initialization event where we can log a standalone mapping). Perhaps we could log a mapping with each commit or something but that doesn't seem like an obvious improvement.

Author: Brian Vaughn

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

@@ -39,6 +39,7 @@ import invariant from 'shared/invariant';
 import {
   enableCache,
   enableNonInterruptingNormalPri,
+  enableSchedulingProfiler,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -127,6 +128,52 @@ const IdleLane: Lanes = /*                              */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
+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 & 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 {
@@ -127,6 +128,52 @@ const IdleLane: Lanes = /*                              */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
+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 & 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) {