Add Lane labels to scheduling profiler marks (#20808)

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.

The commit also refactors and adds additional tests for the scheduling profiler package.

It also updates the preprocessor to 'support' instant events. These are no-ops for us, but adding recognition of the event type will prevent profiles imported from e.g. Chrome Canary from throwing with an 'unrecognized event' error. (This will resolve issue #20767.)

packages/react-devtools-scheduling-profiler/src/EventTooltip.js

@@ -249,7 +249,7 @@ const TooltipReactMeasure = ({
  return null;
  }
 
- const {batchUID, duration, timestamp, lanes} = measure;
+ const {batchUID, duration, timestamp, lanes, laneLabels} = measure;
  const [startTime, stopTime] = getBatchRange(batchUID, data);
 
  return (
@@ -265,7 +265,11 @@ const TooltipReactMeasure = ({
  <div className={styles.DetailsGridLabel}>
  Lane{lanes.length === 1 ? '' : 's'}:
  </div>
- <div>{lanes.join(', ')}</div>
+ <div>
+ {laneLabels.length > 0
+ ? `${laneLabels.join(', ')} (${lanes.join(', ')})`
+ : lanes.join(', ')}
+ </div>
  </div>
  </div>
  );

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

@@ -11,5 +11,6 @@ export {
  COMFORTABLE_LINE_HEIGHT,
  COMPACT_LINE_HEIGHT,
 } from 'react-devtools-shared/src/constants.js';
+import {TotalLanes} from 'react-reconciler/src/ReactFiberLane.new';
 
-export const REACT_TOTAL_NUM_LANES = 31;
+export const REACT_TOTAL_NUM_LANES = TotalLanes;