[pull] main from facebook:main

packages/react-art/src/ReactFiberConfigART.js

@@ -621,6 +621,10 @@ export function waitForCommitToBeReady(timeoutOffset) {
   return null;
 }
 
+export function getSuspendedCommitReason(state, rootContainer) {
+  return null;
+}
+
 export const NotPendingTransition = null;
 export const HostTransitionContext: ReactContext<TransitionStatus> = {
   $$typeof: REACT_CONTEXT_TYPE,

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2100,6 +2100,7 @@ export function startViewTransition(
   passiveCallback: () => mixed,
   errorCallback: mixed => void,
   blockedCallback: string => void, // Profiling-only
+  finishedAnimation: () => void, // Profiling-only
 ): null | RunningViewTransition {
   const ownerDocument: Document =
     rootContainer.nodeType === DOCUMENT_NODE
@@ -2302,6 +2303,9 @@ export function startViewTransition(
         // $FlowFixMe[prop-missing]
         ownerDocument.__reactViewTransition = null;
       }
+      if (enableProfilerTimer) {
+        finishedAnimation();
+      }
       passiveCallback();
     });
     return transition;
@@ -5965,6 +5969,7 @@ export opaque type SuspendedState = {
   imgBytes: number, // number of bytes we estimate needing to download
   suspenseyImages: Array<HTMLImageElement>, // instances of suspensey images (whether loaded or not)
   waitingForImages: boolean, // false when we're no longer blocking on images
+  waitingForViewTransition: boolean,
   unsuspend: null | (() => void),
 };
 
@@ -5976,6 +5981,7 @@ export function startSuspendingCommit(): SuspendedState {
     imgBytes: 0,
     suspenseyImages: [],
     waitingForImages: true,
+    waitingForViewTransition: false,
     // We use a noop function when we begin suspending because if possible we want the
     // waitfor step to finish synchronously. If it doesn't we'll return a function to
     // provide the actual unsuspend function and that will get completed when the count
@@ -6123,6 +6129,7 @@ export function suspendOnActiveViewTransition(
     return;
   }
   state.count++;
+  state.waitingForViewTransition = true;
   const ping = onUnsuspend.bind(state);
   activeViewTransition.finished.then(ping, ping);
 }
@@ -6206,6 +6213,28 @@ export function waitForCommitToBeReady(
   return null;
 }
 
+export function getSuspendedCommitReason(
+  state: SuspendedState,
+  rootContainer: Container,
+): null | string {
+  if (state.waitingForViewTransition) {
+    return 'Waiting for the previous Animation';
+  }
+  if (state.count > 0) {
+    if (state.imgCount > 0) {
+      return 'Suspended on CSS and Images';
+    }
+    return 'Suspended on CSS';
+  }
+  if (state.imgCount === 1) {
+    return 'Suspended on an Image';
+  }
+  if (state.imgCount > 0) {
+    return 'Suspended on Images';
+  }
+  return null;
+}
+
 function checkIfFullyUnsuspended(state: SuspendedState) {
   if (state.count === 0 && (state.imgCount === 0 || !state.waitingForImages)) {
     if (state.stylesheets) {

packages/react-native-renderer/src/ReactFiberConfigFabric.js

@@ -627,6 +627,13 @@ export function waitForCommitToBeReady(
   return null;
 }
 
+export function getSuspendedCommitReason(
+  state: SuspendedState,
+  rootContainer: Container,
+): null | string {
+  return null;
+}
+
 export type FragmentInstanceType = {
   _fragmentFiber: Fiber,
   _observers: null | Set<IntersectionObserver>,

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -674,6 +674,7 @@ export function startViewTransition(
   passiveCallback: () => mixed,
   errorCallback: mixed => void,
   blockedCallback: string => void, // Profiling-only
+  finishedAnimation: () => void, // Profiling-only
 ): null | RunningViewTransition {
   mutationCallback();
   layoutCallback();
@@ -806,6 +807,13 @@ export function waitForCommitToBeReady(
   return null;
 }
 
+export function getSuspendedCommitReason(
+  state: SuspendedState,
+  rootContainer: Container,
+): null | string {
+  return null;
+}
+
 export const NotPendingTransition: TransitionStatus = null;
 export const HostTransitionContext: ReactContext<TransitionStatus> = {
   $$typeof: REACT_CONTEXT_TYPE,

packages/react-noop-renderer/src/createReactNoop.js

@@ -702,6 +702,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     waitForCommitToBeReady,
 
+    getSuspendedCommitReason(
+      state: SuspendedState,
+      rootContainer: Container,
+    ): null | string {
+      return null;
+    },
+
     NotPendingTransition: (null: TransitionStatus),
 
     resetFormInstance(form: Instance) {},
@@ -853,6 +860,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           spawnedWorkCallback: () => void,
           passiveCallback: () => mixed,
           errorCallback: mixed => void,
+          blockedCallback: string => void, // Profiling-only
+          finishedAnimation: () => void, // Profiling-only
         ): null | RunningViewTransition {
           mutationCallback();
           layoutCallback();

packages/react-reconciler/src/ReactFiberCommitViewTransitions.js

@@ -39,6 +39,11 @@ import {
   getViewTransitionName,
   getViewTransitionClassName,
 } from './ReactFiberViewTransitionComponent';
+import {trackAnimatingTask} from './ReactProfilerTimer';
+import {
+  enableComponentPerformanceTrack,
+  enableProfilerTimer,
+} from 'shared/ReactFeatureFlags';
 
 export let shouldStartViewTransition: boolean = false;
 
@@ -101,21 +106,27 @@ export function popViewTransitionCancelableScope(
 
 let viewTransitionHostInstanceIdx = 0;
 
-export function applyViewTransitionToHostInstances(
-  child: null | Fiber,
+function applyViewTransitionToHostInstances(
+  fiber: Fiber,
   name: string,
   className: ?string,
   collectMeasurements: null | Array<InstanceMeasurement>,
   stopAtNestedViewTransitions: boolean,
 ): boolean {
   viewTransitionHostInstanceIdx = 0;
-  return applyViewTransitionToHostInstancesRecursive(
-    child,
+  const inViewport = applyViewTransitionToHostInstancesRecursive(
+    fiber.child,
     name,
     className,
     collectMeasurements,
     stopAtNestedViewTransitions,
   );
+  if (enableProfilerTimer && enableComponentPerformanceTrack && inViewport) {
+    if (fiber._debugTask != null) {
+      trackAnimatingTask(fiber._debugTask);
+    }
+  }
+  return inViewport;
 }
 
 function applyViewTransitionToHostInstancesRecursive(
@@ -247,7 +258,7 @@ function commitAppearingPairViewTransitions(placement: Fiber): void {
             // We found a new appearing view transition with the same name as this deletion.
             // We'll transition between them.
             const inViewport = applyViewTransitionToHostInstances(
-              child.child,
+              child,
               name,
               className,
               null,
@@ -284,7 +295,7 @@ export function commitEnterViewTransitions(
     );
     if (className !== 'none') {
       const inViewport = applyViewTransitionToHostInstances(
-        placement.child,
+        placement,
         name,
         className,
         null,
@@ -355,7 +366,7 @@ function commitDeletedPairViewTransitions(deletion: Fiber): void {
             if (className !== 'none') {
               // We found a new appearing view transition with the same name as this deletion.
               const inViewport = applyViewTransitionToHostInstances(
-                child.child,
+                child,
                 name,
                 className,
                 null,
@@ -406,7 +417,7 @@ export function commitExitViewTransitions(deletion: Fiber): void {
     );
     if (className !== 'none') {
       const inViewport = applyViewTransitionToHostInstances(
-        deletion.child,
+        deletion,
         name,
         className,
         null,
@@ -490,7 +501,7 @@ export function commitBeforeUpdateViewTransition(
     return;
   }
   applyViewTransitionToHostInstances(
-    current.child,
+    current,
     oldName,
     className,
     (current.memoizedState = []),
@@ -518,7 +529,7 @@ export function commitNestedViewTransitions(changedParent: Fiber): void {
       child.flags &= ~Update;
       if (className !== 'none') {
         applyViewTransitionToHostInstances(
-          child.child,
+          child,
           name,
           className,
           (child.memoizedState = []),

packages/react-reconciler/src/ReactFiberLane.js

@@ -73,6 +73,8 @@ const TransitionLane12: Lane = /*                       */ 0b0000000000010000000
 const TransitionLane13: Lane = /*                       */ 0b0000000000100000000000000000000;
 const TransitionLane14: Lane = /*                       */ 0b0000000001000000000000000000000;
 
+export const SomeTransitionLane: Lane = TransitionLane1;
+
 const TransitionUpdateLanes =
   TransitionLane1 |
   TransitionLane2 |
@@ -633,6 +635,22 @@ export function includesTransitionLane(lanes: Lanes): boolean {
   return (lanes & TransitionLanes) !== NoLanes;
 }
 
+export function includesRetryLane(lanes: Lanes): boolean {
+  return (lanes & RetryLanes) !== NoLanes;
+}
+
+export function includesIdleGroupLanes(lanes: Lanes): boolean {
+  return (
+    (lanes &
+      (SelectiveHydrationLane |
+        IdleHydrationLane |
+        IdleLane |
+        OffscreenLane |
+        DeferredLane)) !==
+    NoLanes
+  );
+}
+
 export function includesOnlyHydrationLanes(lanes: Lanes): boolean {
   return (lanes & HydrationLanes) === lanes;
 }

packages/react-reconciler/src/ReactFiberPerformanceTrack.js

@@ -1180,45 +1180,10 @@ export function logInconsistentRender(
   }
 }
 
-export function logSuspenseThrottlePhase(
-  startTime: number,
-  endTime: number,
-  debugTask: null | ConsoleTask,
-): void {
-  // This was inside a throttled Suspense boundary commit.
-  if (supportsUserTiming) {
-    if (endTime <= startTime) {
-      return;
-    }
-    if (__DEV__ && debugTask) {
-      debugTask.run(
-        // $FlowFixMe[method-unbinding]
-        console.timeStamp.bind(
-          console,
-          'Throttled',
-          startTime,
-          endTime,
-          currentTrack,
-          LANES_TRACK_GROUP,
-          'secondary-light',
-        ),
-      );
-    } else {
-      console.timeStamp(
-        'Throttled',
-        startTime,
-        endTime,
-        currentTrack,
-        LANES_TRACK_GROUP,
-        'secondary-light',
-      );
-    }
-  }
-}
-
 export function logSuspendedCommitPhase(
   startTime: number,
   endTime: number,
+  reason: string,
   debugTask: null | ConsoleTask,
 ): void {
   // This means the commit was suspended on CSS or images.
@@ -1233,7 +1198,7 @@ export function logSuspendedCommitPhase(
         // $FlowFixMe[method-unbinding]
         console.timeStamp.bind(
           console,
-          'Suspended on CSS or Images',
+          reason,
           startTime,
           endTime,
           currentTrack,
@@ -1243,7 +1208,7 @@ export function logSuspendedCommitPhase(
       );
     } else {
       console.timeStamp(
-        'Suspended on CSS or Images',
+        reason,
         startTime,
         endTime,
         currentTrack,
@@ -1493,7 +1458,7 @@ export function logAnimatingPhase(
           endTime,
           currentTrack,
           LANES_TRACK_GROUP,
-          'secondary',
+          'secondary-dark',
         ),
       );
     } else {
@@ -1503,7 +1468,7 @@ export function logAnimatingPhase(
         endTime,
         currentTrack,
         LANES_TRACK_GROUP,
-        'secondary',
+        'secondary-dark',
       );
     }
   }