[Transition Tracing] Create/Process Marker Complete Callback (#24700)

This PR adds code to add a marker complete callback to the queue. It also adds code to process marker complete callback.

Marker complete callbacks, in addition to the fields that transition complete callbacks need, also have a `markerName` field

Author: lunaruan

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

@@ -21,9 +21,11 @@ export type TransitionObject = {
   startTime: number,
 };
 
+export type MarkerTransitionObject = TransitionObject & {markerName: string};
 export type PendingTransitionCallbacks = {
   transitionStart: Array<TransitionObject> | null,
   transitionComplete: Array<TransitionObject> | null,
+  markerComplete: Array<MarkerTransitionObject> | null,
 };
 
 export type Transition = {
@@ -58,6 +60,20 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerComplete = pendingTransitions.markerComplete;
+      if (markerComplete !== null) {
+        markerComplete.forEach(transition => {
+          if (callbacks.onMarkerComplete != null) {
+            callbacks.onMarkerComplete(
+              transition.transitionName,
+              transition.markerName,
+              transition.startTime,
+              endTime,
+            );
+          }
+        });
+      }
+
       const transitionComplete = pendingTransitions.transitionComplete;
       if (transitionComplete !== null) {
         transitionComplete.forEach(transition => {

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

@@ -21,9 +21,11 @@ export type TransitionObject = {
   startTime: number,
 };
 
+export type MarkerTransitionObject = TransitionObject & {markerName: string};
 export type PendingTransitionCallbacks = {
   transitionStart: Array<TransitionObject> | null,
   transitionComplete: Array<TransitionObject> | null,
+  markerComplete: Array<MarkerTransitionObject> | null,
 };
 
 export type Transition = {
@@ -58,6 +60,20 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerComplete = pendingTransitions.markerComplete;
+      if (markerComplete !== null) {
+        markerComplete.forEach(transition => {
+          if (callbacks.onMarkerComplete != null) {
+            callbacks.onMarkerComplete(
+              transition.transitionName,
+              transition.markerName,
+              transition.startTime,
+              endTime,
+            );
+          }
+        });
+      }
+
       const transitionComplete = pendingTransitions.transitionComplete;
       if (transitionComplete !== null) {
         transitionComplete.forEach(transition => {

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

@@ -18,6 +18,7 @@ import type {EventPriority} from './ReactEventPriorities.new';
 import type {
   PendingTransitionCallbacks,
   TransitionObject,
+  MarkerTransitionObject,
   Transition,
 } from './ReactFiberTracingMarkerComponent.new';
 
@@ -350,6 +351,7 @@ export function addTransitionStartCallbackToPendingTransition(
       currentPendingTransitionCallbacks = {
         transitionStart: [],
         transitionComplete: null,
+        markerComplete: null,
       };
     }
 
@@ -361,6 +363,26 @@ export function addTransitionStartCallbackToPendingTransition(
   }
 }
 
+export function addMarkerCompleteCallbackToPendingTransition(
+  transition: MarkerTransitionObject,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionComplete: null,
+        markerComplete: [],
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerComplete === null) {
+      currentPendingTransitionCallbacks.markerComplete = [];
+    }
+
+    currentPendingTransitionCallbacks.markerComplete.push(transition);
+  }
+}
+
 export function addTransitionCompleteCallbackToPendingTransition(
   transition: TransitionObject,
 ) {
@@ -369,6 +391,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
       currentPendingTransitionCallbacks = {
         transitionStart: null,
         transitionComplete: [],
+        markerComplete: null,
       };
     }
 

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

@@ -18,6 +18,7 @@ import type {EventPriority} from './ReactEventPriorities.old';
 import type {
   PendingTransitionCallbacks,
   TransitionObject,
+  MarkerTransitionObject,
   Transition,
 } from './ReactFiberTracingMarkerComponent.old';
 
@@ -349,6 +350,7 @@ export function addTransitionStartCallbackToPendingTransition(
       currentPendingTransitionCallbacks = {
         transitionStart: [],
         transitionComplete: null,
+        markerComplete: null,
       };
     }
 
@@ -360,6 +362,26 @@ export function addTransitionStartCallbackToPendingTransition(
   }
 }
 
+export function addMarkerCompleteCallbackToPendingTransition(
+  transition: MarkerTransitionObject,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionComplete: null,
+        markerComplete: [],
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerComplete === null) {
+      currentPendingTransitionCallbacks.markerComplete = [];
+    }
+
+    currentPendingTransitionCallbacks.markerComplete.push(transition);
+  }
+}
+
 export function addTransitionCompleteCallbackToPendingTransition(
   transition: TransitionObject,
 ) {
@@ -368,6 +390,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
       currentPendingTransitionCallbacks = {
         transitionStart: null,
         transitionComplete: [],
+        markerComplete: null,
       };
     }