From 1345c37941d4e2e29034bb0fc0cfb6d01bb1d841 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Fri, 22 Nov 2024 13:04:05 -0500
Subject: [PATCH] Mark all lanes in order on every new render (#31615)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is a hack that ensures that all four lanes as visible whether you
have any tracks in them or not, and that they're in the priority order
within the Scheduler track group. We do want to show all even if they're
not used because it shows what options you're missing out on.

<img width="1035" alt="Screenshot 2024-11-22 at 12 38 30 PM"
src="https://github.com/user-attachments/assets/f30ab0b9-af5e-48ed-b042-138444352575">

In Chrome, the order of tracks within a group are determined by the
earliest start time. We add fake markers at start time zero in that
order eagerly. Ideally we could do this only once but because calls that
aren't recorded aren't considered for ordering purposes, we need to keep
adding these over and over again in case recording has just started. We
can't tell when recording starts.

Currently performance.mark() are in first insertion order but
performance.measure() are in the reverse order. I'm not sure that's
intentional. We can always add the 0 time slot even if it's in the past.
That's still considered for ordering purposes as long as the measurement
is recorded at the time we call it.
---
 .../src/ReactFiberPerformanceTrack.js         | 59 ++++++++++++++++++-
 .../src/ReactFiberWorkLoop.js                 | 12 +++-
 2 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js
index 04e586314293d..56470bb0e55d6 100644
--- a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js
+++ b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js
@@ -25,7 +25,6 @@ const COMPONENTS_TRACK = 'Components ⚛';
 
 // Reused to avoid thrashing the GC.
 const reusableComponentDevToolDetails = {
-  dataType: 'track-entry',
   color: 'primary',
   track: COMPONENTS_TRACK,
 };
@@ -40,7 +39,6 @@ const reusableComponentOptions = {
 const LANES_TRACK_GROUP = 'Scheduler ⚛';
 
 const reusableLaneDevToolDetails = {
-  dataType: 'track-entry',
   color: 'primary',
   track: 'Blocking', // Lane
   trackGroup: LANES_TRACK_GROUP,
@@ -57,6 +55,63 @@ export function setCurrentTrackFromLanes(lanes: number): void {
   reusableLaneDevToolDetails.track = getGroupNameOfHighestPriorityLane(lanes);
 }
 
+const blockingLaneMarker = {
+  startTime: 0,
+  detail: {
+    devtools: {
+      color: 'primary-light',
+      track: 'Blocking',
+      trackGroup: LANES_TRACK_GROUP,
+    },
+  },
+};
+
+const transitionLaneMarker = {
+  startTime: 0,
+  detail: {
+    devtools: {
+      color: 'primary-light',
+      track: 'Transition',
+      trackGroup: LANES_TRACK_GROUP,
+    },
+  },
+};
+
+const suspenseLaneMarker = {
+  startTime: 0,
+  detail: {
+    devtools: {
+      color: 'primary-light',
+      track: 'Suspense',
+      trackGroup: LANES_TRACK_GROUP,
+    },
+  },
+};
+
+const idleLaneMarker = {
+  startTime: 0,
+  detail: {
+    devtools: {
+      color: 'primary-light',
+      track: 'Idle',
+      trackGroup: LANES_TRACK_GROUP,
+    },
+  },
+};
+
+export function markAllLanesInOrder() {
+  if (supportsUserTiming) {
+    // Ensure we create all tracks in priority order. Currently performance.mark() are in
+    // first insertion order but performance.measure() are in the reverse order. We can
+    // always add the 0 time slot even if it's in the past. That's still considered for
+    // ordering.
+    performance.mark('Blocking Track', blockingLaneMarker);
+    performance.mark('Transition Track', transitionLaneMarker);
+    performance.mark('Suspense Track', suspenseLaneMarker);
+    performance.mark('Idle Track', idleLaneMarker);
+  }
+}
+
 export function logComponentRender(
   fiber: Fiber,
   startTime: number,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index 2ff35b0c6a7f2..f812d16c9c65a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -82,6 +82,8 @@ import {
   logYieldTime,
   logActionYieldTime,
   logSuspendedYieldTime,
+  setCurrentTrackFromLanes,
+  markAllLanesInOrder,
 } from './ReactFiberPerformanceTrack';
 
 import {
@@ -271,7 +273,6 @@ import {
   yieldReason,
   startPingTimerByLanes,
 } from './ReactProfilerTimer';
-import {setCurrentTrackFromLanes} from './ReactFiberPerformanceTrack';
 
 // DEV stuff
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -1727,6 +1728,15 @@ function finalizeRender(lanes: Lanes, finalizationTime: number): void {
 
 function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   if (enableProfilerTimer && enableComponentPerformanceTrack) {
+    // The order of tracks within a group are determined by the earliest start time.
+    // Are tracks should show up in priority order and we should ideally always show
+    // every track. This is a hack to ensure that we're displaying all tracks in the
+    // right order. Ideally we could do this only once but because calls that aren't
+    // recorded aren't considered for ordering purposes, we need to keep adding these
+    // over and over again in case recording has just started. We can't tell when
+    // recording starts.
+    markAllLanesInOrder();
+
     const previousRenderStartTime = renderStartTime;
     // Starting a new render. Log the end of any previous renders and the
     // blocked time before the render started.