DevTools Profiler: Add commit and post-commit durations to UI (#20984)

packages/react-devtools-shared/src/backend/renderer.js

@@ -2097,6 +2097,25 @@ export function attach(
         // Checking root.memoizedInteractions handles multi-renderer edge-case-
         // where some v16 renderers support profiling and others don't.
         if (isProfiling && root.memoizedInteractions != null) {
+          // Profiling durations are only available for certain builds.
+          // If available, they'll be stored on the HostRoot.
+          let effectDuration = null;
+          let passiveEffectDuration = null;
+          const hostRoot = root.current;
+          if (hostRoot != null) {
+            const stateNode = hostRoot.stateNode;
+            if (stateNode != null) {
+              effectDuration =
+                stateNode.effectDuration != null
+                  ? stateNode.effectDuration
+                  : null;
+              passiveEffectDuration =
+                stateNode.passiveEffectDuration != null
+                  ? stateNode.passiveEffectDuration
+                  : null;
+            }
+          }
+
           // If profiling is active, store commit time and duration, and the current interactions.
           // The frontend may request this information after profiling has stopped.
           currentCommitProfilingMetadata = {
@@ -2111,6 +2130,8 @@ export function attach(
             ),
             maxActualDuration: 0,
             priorityLevel: null,
+            effectDuration,
+            passiveEffectDuration,
           };
         }
 
@@ -2149,6 +2170,23 @@ export function attach(
     const isProfilingSupported = root.memoizedInteractions != null;
 
     if (isProfiling && isProfilingSupported) {
+      // Profiling durations are only available for certain builds.
+      // If available, they'll be stored on the HostRoot.
+      let effectDuration = null;
+      let passiveEffectDuration = null;
+      const hostRoot = root.current;
+      if (hostRoot != null) {
+        const stateNode = hostRoot.stateNode;
+        if (stateNode != null) {
+          effectDuration =
+            stateNode.effectDuration != null ? stateNode.effectDuration : null;
+          passiveEffectDuration =
+            stateNode.passiveEffectDuration != null
+              ? stateNode.passiveEffectDuration
+              : null;
+        }
+      }
+
       // If profiling is active, store commit time and duration, and the current interactions.
       // The frontend may request this information after profiling has stopped.
       currentCommitProfilingMetadata = {
@@ -2164,6 +2202,8 @@ export function attach(
         maxActualDuration: 0,
         priorityLevel:
           priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
+        effectDuration,
+        passiveEffectDuration,
       };
     }
 
@@ -3294,8 +3334,10 @@ export function attach(
     changeDescriptions: Map<number, ChangeDescription> | null,
     commitTime: number,
     durations: Array<number>,
+    effectDuration: number | null,
     interactions: Array<Interaction>,
     maxActualDuration: number,
+    passiveEffectDuration: number | null,
     priorityLevel: string | null,
   |};
 
@@ -3349,8 +3391,10 @@ export function attach(
           const {
             changeDescriptions,
             durations,
+            effectDuration,
             interactions,
             maxActualDuration,
+            passiveEffectDuration,
             priorityLevel,
             commitTime,
           } = commitProfilingData;
@@ -3386,9 +3430,11 @@ export function attach(
                 ? Array.from(changeDescriptions.entries())
                 : null,
             duration: maxActualDuration,
+            effectDuration,
             fiberActualDurations,
             fiberSelfDurations,
             interactionIDs,
+            passiveEffectDuration,
             priorityLevel,
             timestamp: commitTime,
           });

packages/react-devtools-shared/src/backend/types.js

@@ -156,11 +156,15 @@ export type CommitDataBackend = {|
   // Tuple of fiber ID and change description
   changeDescriptions: Array<[number, ChangeDescription]> | null,
   duration: number,
+  // Only available in certain (newer) React builds,
+  effectDuration: number | null,
   // Tuple of fiber ID and actual duration
   fiberActualDurations: Array<[number, number]>,
   // Tuple of fiber ID and computed "self" duration
   fiberSelfDurations: Array<[number, number]>,
   interactionIDs: Array<number>,
+  // Only available in certain (newer) React builds,
+  passiveEffectDuration: number | null,
   priorityLevel: string | null,
   timestamp: number,
 |};

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css

@@ -63,3 +63,19 @@
   height: 100%;
   color: var(--color-dim);
 }
+
+.DurationsList {
+  list-style: none;
+  margin: 0.25rem 0 0 0;
+  padding: 0;
+  background: var(--color-background-inactive);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.DurationsListItem {
+  margin: 0.25rem 0 0 0;
+}
+.DurationsListItem:first-of-type {
+  margin: 0;
+}

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js

@@ -34,7 +34,9 @@ export default function SidebarCommitInfo(_: Props) {
   const {interactions} = profilerStore.getDataForRoot(rootID);
   const {
     duration,
+    effectDuration,
     interactionIDs,
+    passiveEffectDuration,
     priorityLevel,
     timestamp,
   } = profilerStore.getCommitData(rootID, selectedCommitIndex);
@@ -44,6 +46,9 @@ export default function SidebarCommitInfo(_: Props) {
     selectInteraction(interactionID);
   };
 
+  const hasCommitPhaseDurations =
+    effectDuration !== null || passiveEffectDuration !== null;
+
   return (
     <Fragment>
       <div className={styles.Toolbar}>Commit information</div>
@@ -59,10 +64,44 @@ export default function SidebarCommitInfo(_: Props) {
             <label className={styles.Label}>Committed at</label>:{' '}
             <span className={styles.Value}>{formatTime(timestamp)}s</span>
           </li>
-          <li className={styles.ListItem}>
-            <label className={styles.Label}>Render duration</label>:{' '}
-            <span className={styles.Value}>{formatDuration(duration)}ms</span>
-          </li>
+
+          {!hasCommitPhaseDurations && (
+            <li className={styles.ListItem}>
+              <label className={styles.Label}>Render duration</label>:{' '}
+              <span className={styles.Value}>{formatDuration(duration)}ms</span>
+            </li>
+          )}
+
+          {hasCommitPhaseDurations && (
+            <li className={styles.ListItem}>
+              <label className={styles.Label}>Durations</label>
+              <ul className={styles.DurationsList}>
+                <li className={styles.DurationsListItem}>
+                  <label className={styles.Label}>Render</label>:{' '}
+                  <span className={styles.Value}>
+                    {formatDuration(duration)}ms
+                  </span>
+                </li>
+                {effectDuration !== null && (
+                  <li className={styles.DurationsListItem}>
+                    <label className={styles.Label}>Layout effects</label>:{' '}
+                    <span className={styles.Value}>
+                      {formatDuration(effectDuration)}ms
+                    </span>
+                  </li>
+                )}
+                {passiveEffectDuration !== null && (
+                  <li className={styles.DurationsListItem}>
+                    <label className={styles.Label}>Passive effects</label>:{' '}
+                    <span className={styles.Value}>
+                      {formatDuration(passiveEffectDuration)}ms
+                    </span>
+                  </li>
+                )}
+              </ul>
+            </li>
+          )}
+
           <li className={styles.Interactions}>
             <label className={styles.Label}>Interactions</label>:
             <div className={styles.InteractionList}>

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css

@@ -7,3 +7,56 @@
    */
   overflow-x: hidden !important;
 }
+
+.Tooltip {
+  margin-top: 2.5rem;
+}
+
+.TooltipList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.TooltipListItem {
+  display: flex;
+}
+
+.TooltipLabel {
+  font-weight: bold;
+  margin-right: 0.25rem;
+}
+.TooltipLabel:after {
+  content: ':';
+}
+
+.TooltipValue {
+  flex-grow: 1;
+  text-align: end;
+}
+
+.DurationsWrapper {
+  flex-grow: 1;
+}
+
+.DurationsList {
+  list-style: none;
+  margin: 0 0 0 1rem;
+  padding: 0;
+}
+
+.DurationsListItem {
+  display: flex;
+}
+
+.DurationsLabel {
+  margin-right: 0.25rem;
+}
+.DurationsLabel:after {
+  content: ':';
+}
+
+.DurationsValue {
+  flex-grow: 1;
+  text-align: end;
+}