{"commit":{"shortRevision":"bf11788bf0","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","revision":"bf11788bf0c2e861dc6378ac9ab59d37e7c3e812","subject":"DevTools Profiler: Add commit and post-commit durations to UI (#20984)","authoredAt":"2021-03-17T12:27:37-04:00"},"parents":["825c3021f0477bf8bd4b57693f3303078e7c77db"],"files":[{"status":"M","path":"packages\/react-devtools-shared\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/renderer.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/types.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.css"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotSelector.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/utils.js"},{"status":"M","path":"packages\/react-devtools-shell\/src\/app\/InteractionTracing\/index.js"}],"body":"","patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap b\/packages\/react-devtools-shared\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap\nindex a47598e92d..c9e7f97701 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/__snapshots__\/profilingCache-test.js.snap\n@@ -26,6 +26,7 @@ Object {\n },\n },\n \"duration\": 16,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 1 => 16,\n 2 => 16,\n@@ -39,6 +40,7 @@ Object {\n 5 => 1,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 16,\n }\n@@ -63,6 +65,7 @@ Object {\n },\n },\n \"duration\": 15,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 1 => 15,\n 2 => 15,\n@@ -76,6 +79,7 @@ Object {\n 4 => 2,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 15,\n }\n@@ -93,6 +97,7 @@ Object {\n },\n },\n \"duration\": 3,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 5 => 3,\n 3 => 3,\n@@ -102,6 +107,7 @@ Object {\n 3 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 18,\n }\n@@ -140,6 +146,7 @@ Object {\n },\n },\n \"duration\": 12,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 1 => 12,\n 2 => 12,\n@@ -155,6 +162,7 @@ Object {\n 5 => 1,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 12,\n }\n@@ -195,6 +203,7 @@ Object {\n },\n },\n \"duration\": 13,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 3 => 0,\n 4 => 1,\n@@ -210,6 +219,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 25,\n }\n@@ -236,6 +246,7 @@ Object {\n },\n },\n \"duration\": 10,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 3 => 0,\n 2 => 10,\n@@ -247,6 +258,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 35,\n }\n@@ -266,6 +278,7 @@ Object {\n },\n },\n \"duration\": 10,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 2 => 10,\n 1 => 10,\n@@ -275,6 +288,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 45,\n }\n@@ -329,6 +343,7 @@ Object {\n ],\n ],\n \"duration\": 12,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 1,\n@@ -374,6 +389,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 12,\n },\n@@ -423,6 +439,7 @@ Object {\n ],\n ],\n \"duration\": 13,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -468,6 +485,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 25,\n },\n@@ -497,6 +515,7 @@ Object {\n ],\n ],\n \"duration\": 10,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -526,6 +545,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 35,\n },\n@@ -545,6 +565,7 @@ Object {\n ],\n ],\n \"duration\": 10,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 2,\n@@ -566,6 +587,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 45,\n },\n@@ -792,6 +814,7 @@ Object {\n ],\n ],\n \"duration\": 11,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 1,\n@@ -829,6 +852,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 11,\n },\n@@ -868,6 +892,7 @@ Object {\n ],\n ],\n \"duration\": 11,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -905,6 +930,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 22,\n },\n@@ -954,6 +980,7 @@ Object {\n ],\n ],\n \"duration\": 13,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -999,6 +1026,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 35,\n },\n@@ -1183,6 +1211,7 @@ Object {\n },\n },\n \"duration\": 13,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 3 => 0,\n 4 => 1,\n@@ -1198,6 +1227,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 13,\n },\n@@ -1221,6 +1251,7 @@ Object {\n },\n },\n \"duration\": 10,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 3 => 0,\n 2 => 10,\n@@ -1232,6 +1263,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 34,\n },\n@@ -1248,6 +1280,7 @@ Object {\n },\n },\n \"duration\": 10,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 2 => 10,\n 1 => 10,\n@@ -1257,6 +1290,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 44,\n },\n@@ -1419,6 +1453,7 @@ Object {\n },\n },\n \"duration\": 11,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 11 => 11,\n 12 => 11,\n@@ -1432,6 +1467,7 @@ Object {\n 14 => 1,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 24,\n },\n@@ -1511,9 +1547,11 @@ Object {\n Object {\n \"changeDescriptions\": Map {},\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {},\n \"fiberSelfDurations\": Map {},\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 34,\n },\n@@ -1636,6 +1674,7 @@ Object {\n ],\n ],\n \"duration\": 13,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -1681,6 +1720,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 13,\n },\n@@ -1710,6 +1750,7 @@ Object {\n ],\n ],\n \"duration\": 10,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -1739,6 +1780,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 34,\n },\n@@ -1758,6 +1800,7 @@ Object {\n ],\n ],\n \"duration\": 10,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 2,\n@@ -1779,6 +1822,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 44,\n },\n@@ -1977,6 +2021,7 @@ Object {\n ],\n ],\n \"duration\": 11,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 11,\n@@ -2014,6 +2059,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 24,\n },\n@@ -2090,9 +2136,11 @@ Object {\n Object {\n \"changeDescriptions\": Array [],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [],\n \"fiberSelfDurations\": Array [],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 34,\n },\n@@ -2197,6 +2245,7 @@ Object {\n Object {\n \"changeDescriptions\": Map {},\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 1 => 0,\n 2 => 0,\n@@ -2206,6 +2255,7 @@ Object {\n 2 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 0,\n },\n@@ -2262,6 +2312,7 @@ Object {\n },\n },\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 1 => 0,\n 2 => 0,\n@@ -2273,6 +2324,7 @@ Object {\n 3 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 0,\n }\n@@ -2292,6 +2344,7 @@ Object {\n },\n },\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 3 => 0,\n 2 => 0,\n@@ -2303,6 +2356,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n }\n@@ -2320,6 +2374,7 @@ Object {\n },\n },\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 3 => 0,\n },\n@@ -2327,6 +2382,7 @@ Object {\n 3 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n }\n@@ -2344,6 +2400,7 @@ Object {\n },\n },\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 3 => 0,\n },\n@@ -2351,6 +2408,7 @@ Object {\n 3 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n }\n@@ -2368,6 +2426,7 @@ Object {\n },\n },\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 3 => 0,\n 2 => 0,\n@@ -2379,6 +2438,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n }\n@@ -2403,6 +2463,7 @@ Object {\n ],\n ],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 1,\n@@ -2432,6 +2493,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 0,\n },\n@@ -2451,6 +2513,7 @@ Object {\n ],\n ],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -2480,6 +2543,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n },\n@@ -2497,6 +2561,7 @@ Object {\n ],\n ],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -2510,6 +2575,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n },\n@@ -2527,6 +2593,7 @@ Object {\n ],\n ],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -2540,6 +2607,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n },\n@@ -2557,6 +2625,7 @@ Object {\n ],\n ],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -2586,6 +2655,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n },\n@@ -2721,6 +2791,7 @@ Object {\n },\n },\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 1 => 0,\n 2 => 0,\n@@ -2740,6 +2811,7 @@ Object {\n 7 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 0,\n }\n@@ -2793,6 +2865,7 @@ Object {\n },\n },\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 5 => 0,\n 4 => 0,\n@@ -2810,6 +2883,7 @@ Object {\n 2 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n }\n@@ -2857,6 +2931,7 @@ Object {\n },\n },\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 5 => 0,\n 4 => 0,\n@@ -2876,6 +2951,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n }\n@@ -2924,6 +3000,7 @@ Object {\n },\n },\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 5 => 0,\n 4 => 0,\n@@ -2943,6 +3020,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n }\n@@ -2990,6 +3068,7 @@ Object {\n },\n },\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Map {\n 5 => 0,\n 4 => 0,\n@@ -3009,6 +3088,7 @@ Object {\n 1 => 0,\n },\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n }\n@@ -3073,6 +3153,7 @@ Object {\n ],\n ],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 1,\n@@ -3134,6 +3215,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 0,\n },\n@@ -3199,6 +3281,7 @@ Object {\n ],\n ],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 5,\n@@ -3252,6 +3335,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n },\n@@ -3311,6 +3395,7 @@ Object {\n ],\n ],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 5,\n@@ -3372,6 +3457,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n },\n@@ -3432,6 +3518,7 @@ Object {\n ],\n ],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 5,\n@@ -3493,6 +3580,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n },\n@@ -3552,6 +3640,7 @@ Object {\n ],\n ],\n \"duration\": 0,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 5,\n@@ -3613,6 +3702,7 @@ Object {\n ],\n ],\n \"interactionIDs\": Array [],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 0,\n },\n@@ -3887,6 +3977,7 @@ Object {\n ],\n ],\n \"duration\": 11,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 1,\n@@ -3926,6 +4017,7 @@ Object {\n \"interactionIDs\": Array [\n 0,\n ],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Normal\",\n \"timestamp\": 11,\n },\n@@ -3965,6 +4057,7 @@ Object {\n ],\n ],\n \"duration\": 11,\n+ \"effectDuration\": null,\n \"fiberActualDurations\": Array [\n Array [\n 3,\n@@ -4004,6 +4097,7 @@ Object {\n \"interactionIDs\": Array [\n 1,\n ],\n+ \"passiveEffectDuration\": null,\n \"priorityLevel\": \"Immediate\",\n \"timestamp\": 22,\n },\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\nindex b23b59f73d..c2de357a1b 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n@@ -2097,6 +2097,25 @@ export function attach(\n \/\/ Checking root.memoizedInteractions handles multi-renderer edge-case-\n \/\/ where some v16 renderers support profiling and others don't.\n if (isProfiling && root.memoizedInteractions != null) {\n+ \/\/ Profiling durations are only available for certain builds.\n+ \/\/ If available, they'll be stored on the HostRoot.\n+ let effectDuration = null;\n+ let passiveEffectDuration = null;\n+ const hostRoot = root.current;\n+ if (hostRoot != null) {\n+ const stateNode = hostRoot.stateNode;\n+ if (stateNode != null) {\n+ effectDuration =\n+ stateNode.effectDuration != null\n+ ? stateNode.effectDuration\n+ : null;\n+ passiveEffectDuration =\n+ stateNode.passiveEffectDuration != null\n+ ? stateNode.passiveEffectDuration\n+ : null;\n+ }\n+ }\n+\n \/\/ If profiling is active, store commit time and duration, and the current interactions.\n \/\/ The frontend may request this information after profiling has stopped.\n currentCommitProfilingMetadata = {\n@@ -2111,6 +2130,8 @@ export function attach(\n ),\n maxActualDuration: 0,\n priorityLevel: null,\n+ effectDuration,\n+ passiveEffectDuration,\n };\n }\n \n@@ -2149,6 +2170,23 @@ export function attach(\n const isProfilingSupported = root.memoizedInteractions != null;\n \n if (isProfiling && isProfilingSupported) {\n+ \/\/ Profiling durations are only available for certain builds.\n+ \/\/ If available, they'll be stored on the HostRoot.\n+ let effectDuration = null;\n+ let passiveEffectDuration = null;\n+ const hostRoot = root.current;\n+ if (hostRoot != null) {\n+ const stateNode = hostRoot.stateNode;\n+ if (stateNode != null) {\n+ effectDuration =\n+ stateNode.effectDuration != null ? stateNode.effectDuration : null;\n+ passiveEffectDuration =\n+ stateNode.passiveEffectDuration != null\n+ ? stateNode.passiveEffectDuration\n+ : null;\n+ }\n+ }\n+\n \/\/ If profiling is active, store commit time and duration, and the current interactions.\n \/\/ The frontend may request this information after profiling has stopped.\n currentCommitProfilingMetadata = {\n@@ -2164,6 +2202,8 @@ export function attach(\n maxActualDuration: 0,\n priorityLevel:\n priorityLevel == null ? null : formatPriorityLevel(priorityLevel),\n+ effectDuration,\n+ passiveEffectDuration,\n };\n }\n \n@@ -3294,8 +3334,10 @@ export function attach(\n changeDescriptions: Map | null,\n commitTime: number,\n durations: Array,\n+ effectDuration: number | null,\n interactions: Array,\n maxActualDuration: number,\n+ passiveEffectDuration: number | null,\n priorityLevel: string | null,\n |};\n \n@@ -3349,8 +3391,10 @@ export function attach(\n const {\n changeDescriptions,\n durations,\n+ effectDuration,\n interactions,\n maxActualDuration,\n+ passiveEffectDuration,\n priorityLevel,\n commitTime,\n } = commitProfilingData;\n@@ -3386,9 +3430,11 @@ export function attach(\n ? Array.from(changeDescriptions.entries())\n : null,\n duration: maxActualDuration,\n+ effectDuration,\n fiberActualDurations,\n fiberSelfDurations,\n interactionIDs,\n+ passiveEffectDuration,\n priorityLevel,\n timestamp: commitTime,\n });\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/types.js b\/packages\/react-devtools-shared\/src\/backend\/types.js\nindex 3c42d2f9cc..627e9a4504 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/types.js\n@@ -156,11 +156,15 @@ export type CommitDataBackend = {|\n \/\/ Tuple of fiber ID and change description\n changeDescriptions: Array<[number, ChangeDescription]> | null,\n duration: number,\n+ \/\/ Only available in certain (newer) React builds,\n+ effectDuration: number | null,\n \/\/ Tuple of fiber ID and actual duration\n fiberActualDurations: Array<[number, number]>,\n \/\/ Tuple of fiber ID and computed \"self\" duration\n fiberSelfDurations: Array<[number, number]>,\n interactionIDs: Array,\n+ \/\/ Only available in certain (newer) React builds,\n+ passiveEffectDuration: number | null,\n priorityLevel: string | null,\n timestamp: number,\n |};\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css\nindex c0564e0d8c..34917846eb 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.css\n@@ -63,3 +63,19 @@\n height: 100%;\n color: var(--color-dim);\n }\n+\n+.DurationsList {\n+ list-style: none;\n+ margin: 0.25rem 0 0 0;\n+ padding: 0;\n+ background: var(--color-background-inactive);\n+ padding: 0.25rem 0.5rem;\n+ border-radius: 0.25rem;\n+}\n+\n+.DurationsListItem {\n+ margin: 0.25rem 0 0 0;\n+}\n+.DurationsListItem:first-of-type {\n+ margin: 0;\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js\nindex 6cff0e209f..ed913984cc 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SidebarCommitInfo.js\n@@ -34,7 +34,9 @@ export default function SidebarCommitInfo(_: Props) {\n const {interactions} = profilerStore.getDataForRoot(rootID);\n const {\n duration,\n+ effectDuration,\n interactionIDs,\n+ passiveEffectDuration,\n priorityLevel,\n timestamp,\n } = profilerStore.getCommitData(rootID, selectedCommitIndex);\n@@ -44,6 +46,9 @@ export default function SidebarCommitInfo(_: Props) {\n selectInteraction(interactionID);\n };\n \n+ const hasCommitPhaseDurations =\n+ effectDuration !== null || passiveEffectDuration !== null;\n+\n return (\n \n

Commit information<\/div>\n@@ -59,10 +64,44 @@ export default function SidebarCommitInfo(_: Props) {\n Committed at<\/label>:{' '}\n {formatTime(timestamp)}s<\/span>\n <\/li>\n-

\n- Render duration<\/label>:{' '}\n- {formatDuration(duration)}ms<\/span>\n- <\/li>\n+\n+ {!hasCommitPhaseDurations && (\n+

\n+ Render duration<\/label>:{' '}\n+ {formatDuration(duration)}ms<\/span>\n+ <\/li>\n+ )}\n+\n+ {hasCommitPhaseDurations && (\n+

\n+ Durations<\/label>\n+

\n+ Render<\/label>:{' '}\n+ \n+ {formatDuration(duration)}ms\n+ <\/span>\n+ <\/li>\n+ {effectDuration !== null && (\n+
\n+ Layout effects<\/label>:{' '}\n+ \n+ {formatDuration(effectDuration)}ms\n+ <\/span>\n+ <\/li>\n+ )}\n+ {passiveEffectDuration !== null && (\n+
\n+ Passive effects<\/label>:{' '}\n+ \n+ {formatDuration(passiveEffectDuration)}ms\n+ <\/span>\n+ <\/li>\n+ )}\n+ <\/ul>\n+ <\/li>\n+ )}\n+\n
\n
Interactions<\/label>:\n
\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css\nindex 53faae5c38..ddcb7d9e08 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.css\n@@ -7,3 +7,56 @@\n *\/\n overflow-x: hidden !important;\n }\n+\n+.Tooltip {\n+ margin-top: 2.5rem;\n+}\n+\n+.TooltipList {\n+ list-style: none;\n+ padding: 0;\n+ margin: 0;\n+}\n+\n+.TooltipListItem {\n+ display: flex;\n+}\n+\n+.TooltipLabel {\n+ font-weight: bold;\n+ margin-right: 0.25rem;\n+}\n+.TooltipLabel:after {\n+ content: ':';\n+}\n+\n+.TooltipValue {\n+ flex-grow: 1;\n+ text-align: end;\n+}\n+\n+.DurationsWrapper {\n+ flex-grow: 1;\n+}\n+\n+.DurationsList {\n+ list-style: none;\n+ margin: 0 0 0 1rem;\n+ padding: 0;\n+}\n+\n+.DurationsListItem {\n+ display: flex;\n+}\n+\n+.DurationsLabel {\n+ margin-right: 0.25rem;\n+}\n+.DurationsLabel:after {\n+ content: ':';\n+}\n+\n+.DurationsValue {\n+ flex-grow: 1;\n+ text-align: end;\n+}\n\\ No newline at end of file\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\nindex b4b42ddc82..4fda417770 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\n@@ -7,6 +7,8 @@\n * @flow\n *\/\n \n+import type {CommitDataFrontend} from '.\/types';\n+\n import * as React from 'react';\n import {useEffect, useMemo, useRef, useState} from 'react';\n import AutoSizer from 'react-virtualized-auto-sizer';\n@@ -19,7 +21,6 @@ import Tooltip from '.\/Tooltip';\n import styles from '.\/SnapshotCommitList.css';\n \n export type ItemData = {|\n- commitDurations: Array
,\n commitTimes: Array
,\n filteredCommitIndices: Array,\n maxDuration: number,\n@@ -28,36 +29,40 @@ export type ItemData = {|\n selectCommitIndex: (index: number) => void,\n setHoveredCommitIndex: (index: number) => void,\n startCommitDrag: (newDragState: DragState) => void,\n+ totalDurations: Array,\n |};\n \n type Props = {|\n- commitDurations: Array,\n+ commitData: CommitDataFrontend,\n commitTimes: Array,\n filteredCommitIndices: Array,\n selectedCommitIndex: number | null,\n selectedFilteredCommitIndex: number | null,\n selectCommitIndex: (index: number) => void,\n+ totalDurations: Array,\n |};\n \n export default function SnapshotCommitList({\n- commitDurations,\n+ commitData,\n commitTimes,\n filteredCommitIndices,\n selectedCommitIndex,\n selectedFilteredCommitIndex,\n selectCommitIndex,\n+ totalDurations,\n }: Props) {\n return (\n \n {({height, width}) => (\n \n )}\n@@ -66,13 +71,14 @@ export default function SnapshotCommitList({\n }\n \n type ListProps = {|\n- commitDurations: Array,\n+ commitData: CommitDataFrontend,\n commitTimes: Array,\n height: number,\n filteredCommitIndices: Array,\n selectedCommitIndex: number | null,\n selectedFilteredCommitIndex: number | null,\n selectCommitIndex: (index: number) => void,\n+ totalDurations: Array,\n width: number,\n |};\n \n@@ -83,13 +89,14 @@ type DragState = {\n };\n \n function List({\n- commitDurations,\n+ commitData,\n selectedCommitIndex,\n commitTimes,\n height,\n filteredCommitIndices,\n selectedFilteredCommitIndex,\n selectCommitIndex,\n+ totalDurations,\n width,\n }: ListProps) {\n const listRef = useRef | null>(null);\n@@ -111,8 +118,8 @@ function List({\n [filteredCommitIndices, width],\n );\n const maxDuration = useMemo(\n- () => commitDurations.reduce((max, duration) => Math.max(max, duration), 0),\n- [commitDurations],\n+ () => totalDurations.reduce((max, duration) => Math.max(max, duration), 0),\n+ [totalDurations],\n );\n \n const maxCommitIndex = filteredCommitIndices.length - 1;\n@@ -176,7 +183,6 @@ function List({\n \/\/ Pass required contextual data down to the ListItem renderer.\n const itemData = useMemo(\n () => ({\n- commitDurations,\n commitTimes,\n filteredCommitIndices,\n maxDuration,\n@@ -185,9 +191,9 @@ function List({\n selectCommitIndex,\n setHoveredCommitIndex,\n startCommitDrag: setDragState,\n+ totalDurations,\n }),\n [\n- commitDurations,\n commitTimes,\n filteredCommitIndices,\n maxDuration,\n@@ -195,20 +201,81 @@ function List({\n selectedFilteredCommitIndex,\n selectCommitIndex,\n setHoveredCommitIndex,\n+ totalDurations,\n ],\n );\n \n let tooltipLabel = null;\n if (hoveredCommitIndex !== null) {\n- const commitDuration = commitDurations[hoveredCommitIndex];\n- const commitTime = commitTimes[hoveredCommitIndex];\n- tooltipLabel = `${formatDuration(commitDuration)}ms at ${formatTime(\n- commitTime,\n- )}s`;\n+ const {\n+ duration,\n+ effectDuration,\n+ passiveEffectDuration,\n+ priorityLevel,\n+ timestamp,\n+ } = commitData[hoveredCommitIndex];\n+\n+ \/\/ Only some React versions include commit durations.\n+ \/\/ Show a richer tooltip only for builds that have that info.\n+ if (effectDuration !== null || passiveEffectDuration !== null) {\n+ tooltipLabel = (\n+
\n+ {priorityLevel !== null && (\n+
\n+ Priority<\/label>\n+ {priorityLevel}<\/span>\n+ <\/li>\n+ )}\n+
\n+ Committed at<\/label>\n+ \n+ {formatTime(timestamp)}s\n+ <\/span>\n+ <\/li>\n+
\n+
\n+ Durations<\/label>\n+
\n+
\n+ Render<\/label>\n+ \n+ {formatDuration(duration)}ms\n+ <\/span>\n+ <\/li>\n+ {effectDuration !== null && (\n+
\n+ \n+ Layout effects\n+ <\/label>\n+ \n+ {formatDuration(effectDuration)}ms\n+ <\/span>\n+ <\/li>\n+ )}\n+ {passiveEffectDuration !== null && (\n+
\n+ \n+ Passive effects\n+ <\/label>\n+ \n+ {formatDuration(passiveEffectDuration)}ms\n+ <\/span>\n+ <\/li>\n+ )}\n+ <\/ul>\n+ <\/div>\n+ <\/li>\n+ <\/ul>\n+ );\n+ } else {\n+ tooltipLabel = `${formatDuration(duration)}ms at ${formatTime(\n+ timestamp,\n+ )}s`;\n+ }\n }\n \n return (\n- \n+ \n 0) {\n+ backgroundColor = getGradientColor(colorScale);\n+ }\n+\n return (\n \n+ }}>\n 0 ? getGradientColor(colorScale) : undefined,\n+ backgroundColor,\n }}\n \/>\n <\/div>\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotSelector.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\nindex c67b895edf..b79569df1e 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\n@@ -32,10 +32,14 @@ export default function SnapshotSelector(_: Props) {\n const {profilerStore} = useContext(StoreContext);\n const {commitData} = profilerStore.getDataForRoot(((rootID: any): number));\n \n- const commitDurations: Array = [];\n+ const totalDurations: Array = [];\n const commitTimes: Array = [];\n commitData.forEach(commitDatum => {\n- commitDurations.push(commitDatum.duration);\n+ totalDurations.push(\n+ commitDatum.duration +\n+ (commitDatum.effectDuration || 0) +\n+ (commitDatum.passiveEffectDuration || 0),\n+ );\n commitTimes.push(commitDatum.timestamp);\n });\n \n@@ -151,12 +155,13 @@ export default function SnapshotSelector(_: Props) {\n tabIndex={0}>\n {numFilteredCommits > 0 && (\n \n )}\n {numFilteredCommits === 0 && (\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.js\nindex 93955ab0d2..8e759485a6 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Tooltip.js\n@@ -7,7 +7,7 @@ import styles from '.\/Tooltip.css';\n \n const initialTooltipState = {height: 0, mouseX: 0, mouseY: 0, width: 0};\n \n-export default function Tooltip({children, label}: any) {\n+export default function Tooltip({children, className, label, style}: any) {\n const containerRef = useRef(null);\n const tooltipRef = useRef(null);\n \n@@ -36,7 +36,10 @@ export default function Tooltip({children, label}: any) {\n className={styles.Container}\n onMouseMove={onMouseMove}\n ref={containerRef}>\n-
\n+ \n {label}\n <\/div>\n {children}\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js\nindex 2ca28cefd3..803aeac6a0 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js\n@@ -52,9 +52,13 @@ export type CommitDataFrontend = {|\n \/\/ Map of Fiber (ID) to a description of what changed in this commit.\n changeDescriptions: Map | null,\n \n- \/\/ How long was this commit?\n+ \/\/ How long was the render phase?\n duration: number,\n \n+ \/\/ How long was the layout commit phase?\n+ \/\/ Note that not all builds of React expose this property.\n+ effectDuration: number | null,\n+\n \/\/ Map of Fiber (ID) to actual duration for this commit;\n \/\/ Fibers that did not render will not have entries in this Map.\n fiberActualDurations: Map,\n@@ -66,6 +70,10 @@ export type CommitDataFrontend = {|\n \/\/ Which interactions (IDs) were associated with this commit.\n interactionIDs: Array,\n \n+ \/\/ How long was the passive commit phase?\n+ \/\/ Note that not all builds of React expose this property.\n+ passiveEffectDuration: number | null,\n+\n \/\/ Priority level of the commit (if React provided this info)\n priorityLevel: string | null,\n \n@@ -113,11 +121,13 @@ export type ProfilingDataFrontend = {|\n export type CommitDataExport = {|\n changeDescriptions: Array<[number, ChangeDescription]> | null,\n duration: number,\n+ effectDuration: number | null,\n \/\/ Tuple of fiber ID and actual duration\n fiberActualDurations: Array<[number, number]>,\n \/\/ Tuple of fiber ID and computed \"self\" duration\n fiberSelfDurations: Array<[number, number]>,\n interactionIDs: Array,\n+ passiveEffectDuration: number | null,\n priorityLevel: string | null,\n timestamp: number,\n |};\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/utils.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/utils.js\nindex 9691af89a5..c667276cfa 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/utils.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/utils.js\n@@ -75,11 +75,13 @@ export function prepareProfilingDataFrontendFromBackendAndStore(\n ? new Map(commitDataBackend.changeDescriptions)\n : null,\n duration: commitDataBackend.duration,\n+ effectDuration: commitDataBackend.effectDuration,\n fiberActualDurations: new Map(\n commitDataBackend.fiberActualDurations,\n ),\n fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),\n interactionIDs: commitDataBackend.interactionIDs,\n+ passiveEffectDuration: commitDataBackend.passiveEffectDuration,\n priorityLevel: commitDataBackend.priorityLevel,\n timestamp: commitDataBackend.timestamp,\n }),\n@@ -129,18 +131,22 @@ export function prepareProfilingDataFrontendFromExport(\n ({\n changeDescriptions,\n duration,\n+ effectDuration,\n fiberActualDurations,\n fiberSelfDurations,\n interactionIDs,\n+ passiveEffectDuration,\n priorityLevel,\n timestamp,\n }) => ({\n changeDescriptions:\n changeDescriptions != null ? new Map(changeDescriptions) : null,\n duration,\n+ effectDuration,\n fiberActualDurations: new Map(fiberActualDurations),\n fiberSelfDurations: new Map(fiberSelfDurations),\n interactionIDs,\n+ passiveEffectDuration,\n priorityLevel,\n timestamp,\n }),\n@@ -180,9 +186,11 @@ export function prepareProfilingDataExport(\n ({\n changeDescriptions,\n duration,\n+ effectDuration,\n fiberActualDurations,\n fiberSelfDurations,\n interactionIDs,\n+ passiveEffectDuration,\n priorityLevel,\n timestamp,\n }) => ({\n@@ -191,9 +199,11 @@ export function prepareProfilingDataExport(\n ? Array.from(changeDescriptions.entries())\n : null,\n duration,\n+ effectDuration,\n fiberActualDurations: Array.from(fiberActualDurations.entries()),\n fiberSelfDurations: Array.from(fiberSelfDurations.entries()),\n interactionIDs,\n+ passiveEffectDuration,\n priorityLevel,\n timestamp,\n }),\ndiff --git a\/packages\/react-devtools-shell\/src\/app\/InteractionTracing\/index.js b\/packages\/react-devtools-shell\/src\/app\/InteractionTracing\/index.js\nindex fd9bb891e0..544b335d0b 100644\n--- a\/packages\/react-devtools-shell\/src\/app\/InteractionTracing\/index.js\n+++ b\/packages\/react-devtools-shell\/src\/app\/InteractionTracing\/index.js\n@@ -8,7 +8,13 @@\n *\/\n \n import * as React from 'react';\n-import {Fragment, useCallback, useEffect, useState} from 'react';\n+import {\n+ Fragment,\n+ useCallback,\n+ useLayoutEffect,\n+ useEffect,\n+ useState,\n+} from 'react';\n import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';\n import {\n unstable_trace as trace,\n@@ -68,6 +74,10 @@ export default function InteractionTracing() {\n }\n }, [count, shouldCascade]);\n \n+ useLayoutEffect(() => {\n+ Math.sqrt(100 * 100 * 100 * 100 * 100);\n+ });\n+\n return (\n \n
Interaction Tracing<\/h1>\n"}

Interaction Tracing<\/h1>\n"}

dillon1000/react

Files changed