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 index a47598e92d522..c9e7f9770159f 100644 --- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap +++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap @@ -26,6 +26,7 @@ Object { }, }, "duration": 16, + "effectDuration": null, "fiberActualDurations": Map { 1 => 16, 2 => 16, @@ -39,6 +40,7 @@ Object { 5 => 1, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 16, } @@ -63,6 +65,7 @@ Object { }, }, "duration": 15, + "effectDuration": null, "fiberActualDurations": Map { 1 => 15, 2 => 15, @@ -76,6 +79,7 @@ Object { 4 => 2, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 15, } @@ -93,6 +97,7 @@ Object { }, }, "duration": 3, + "effectDuration": null, "fiberActualDurations": Map { 5 => 3, 3 => 3, @@ -102,6 +107,7 @@ Object { 3 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 18, } @@ -140,6 +146,7 @@ Object { }, }, "duration": 12, + "effectDuration": null, "fiberActualDurations": Map { 1 => 12, 2 => 12, @@ -155,6 +162,7 @@ Object { 5 => 1, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 12, } @@ -195,6 +203,7 @@ Object { }, }, "duration": 13, + "effectDuration": null, "fiberActualDurations": Map { 3 => 0, 4 => 1, @@ -210,6 +219,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 25, } @@ -236,6 +246,7 @@ Object { }, }, "duration": 10, + "effectDuration": null, "fiberActualDurations": Map { 3 => 0, 2 => 10, @@ -247,6 +258,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 35, } @@ -266,6 +278,7 @@ Object { }, }, "duration": 10, + "effectDuration": null, "fiberActualDurations": Map { 2 => 10, 1 => 10, @@ -275,6 +288,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 45, } @@ -329,6 +343,7 @@ Object { ], ], "duration": 12, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 1, @@ -374,6 +389,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 12, }, @@ -423,6 +439,7 @@ Object { ], ], "duration": 13, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -468,6 +485,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 25, }, @@ -497,6 +515,7 @@ Object { ], ], "duration": 10, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -526,6 +545,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 35, }, @@ -545,6 +565,7 @@ Object { ], ], "duration": 10, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 2, @@ -566,6 +587,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 45, }, @@ -792,6 +814,7 @@ Object { ], ], "duration": 11, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 1, @@ -829,6 +852,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 11, }, @@ -868,6 +892,7 @@ Object { ], ], "duration": 11, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -905,6 +930,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 22, }, @@ -954,6 +980,7 @@ Object { ], ], "duration": 13, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -999,6 +1026,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 35, }, @@ -1183,6 +1211,7 @@ Object { }, }, "duration": 13, + "effectDuration": null, "fiberActualDurations": Map { 3 => 0, 4 => 1, @@ -1198,6 +1227,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 13, }, @@ -1221,6 +1251,7 @@ Object { }, }, "duration": 10, + "effectDuration": null, "fiberActualDurations": Map { 3 => 0, 2 => 10, @@ -1232,6 +1263,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 34, }, @@ -1248,6 +1280,7 @@ Object { }, }, "duration": 10, + "effectDuration": null, "fiberActualDurations": Map { 2 => 10, 1 => 10, @@ -1257,6 +1290,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 44, }, @@ -1419,6 +1453,7 @@ Object { }, }, "duration": 11, + "effectDuration": null, "fiberActualDurations": Map { 11 => 11, 12 => 11, @@ -1432,6 +1467,7 @@ Object { 14 => 1, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 24, }, @@ -1511,9 +1547,11 @@ Object { Object { "changeDescriptions": Map {}, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map {}, "fiberSelfDurations": Map {}, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 34, }, @@ -1636,6 +1674,7 @@ Object { ], ], "duration": 13, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -1681,6 +1720,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 13, }, @@ -1710,6 +1750,7 @@ Object { ], ], "duration": 10, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -1739,6 +1780,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 34, }, @@ -1758,6 +1800,7 @@ Object { ], ], "duration": 10, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 2, @@ -1779,6 +1822,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 44, }, @@ -1977,6 +2021,7 @@ Object { ], ], "duration": 11, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 11, @@ -2014,6 +2059,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 24, }, @@ -2090,9 +2136,11 @@ Object { Object { "changeDescriptions": Array [], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [], "fiberSelfDurations": Array [], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 34, }, @@ -2197,6 +2245,7 @@ Object { Object { "changeDescriptions": Map {}, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 1 => 0, 2 => 0, @@ -2206,6 +2255,7 @@ Object { 2 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 0, }, @@ -2262,6 +2312,7 @@ Object { }, }, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 1 => 0, 2 => 0, @@ -2273,6 +2324,7 @@ Object { 3 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 0, } @@ -2292,6 +2344,7 @@ Object { }, }, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 3 => 0, 2 => 0, @@ -2303,6 +2356,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, } @@ -2320,6 +2374,7 @@ Object { }, }, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 3 => 0, }, @@ -2327,6 +2382,7 @@ Object { 3 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, } @@ -2344,6 +2400,7 @@ Object { }, }, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 3 => 0, }, @@ -2351,6 +2408,7 @@ Object { 3 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, } @@ -2368,6 +2426,7 @@ Object { }, }, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 3 => 0, 2 => 0, @@ -2379,6 +2438,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, } @@ -2403,6 +2463,7 @@ Object { ], ], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 1, @@ -2432,6 +2493,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 0, }, @@ -2451,6 +2513,7 @@ Object { ], ], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -2480,6 +2543,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, }, @@ -2497,6 +2561,7 @@ Object { ], ], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -2510,6 +2575,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, }, @@ -2527,6 +2593,7 @@ Object { ], ], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -2540,6 +2607,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, }, @@ -2557,6 +2625,7 @@ Object { ], ], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -2586,6 +2655,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, }, @@ -2721,6 +2791,7 @@ Object { }, }, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 1 => 0, 2 => 0, @@ -2740,6 +2811,7 @@ Object { 7 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 0, } @@ -2793,6 +2865,7 @@ Object { }, }, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 5 => 0, 4 => 0, @@ -2810,6 +2883,7 @@ Object { 2 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, } @@ -2857,6 +2931,7 @@ Object { }, }, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 5 => 0, 4 => 0, @@ -2876,6 +2951,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, } @@ -2924,6 +3000,7 @@ Object { }, }, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 5 => 0, 4 => 0, @@ -2943,6 +3020,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, } @@ -2990,6 +3068,7 @@ Object { }, }, "duration": 0, + "effectDuration": null, "fiberActualDurations": Map { 5 => 0, 4 => 0, @@ -3009,6 +3088,7 @@ Object { 1 => 0, }, "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, } @@ -3073,6 +3153,7 @@ Object { ], ], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 1, @@ -3134,6 +3215,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 0, }, @@ -3199,6 +3281,7 @@ Object { ], ], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 5, @@ -3252,6 +3335,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, }, @@ -3311,6 +3395,7 @@ Object { ], ], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 5, @@ -3372,6 +3457,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, }, @@ -3432,6 +3518,7 @@ Object { ], ], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 5, @@ -3493,6 +3580,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, }, @@ -3552,6 +3640,7 @@ Object { ], ], "duration": 0, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 5, @@ -3613,6 +3702,7 @@ Object { ], ], "interactionIDs": Array [], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 0, }, @@ -3887,6 +3977,7 @@ Object { ], ], "duration": 11, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 1, @@ -3926,6 +4017,7 @@ Object { "interactionIDs": Array [ 0, ], + "passiveEffectDuration": null, "priorityLevel": "Normal", "timestamp": 11, }, @@ -3965,6 +4057,7 @@ Object { ], ], "duration": 11, + "effectDuration": null, "fiberActualDurations": Array [ Array [ 3, @@ -4004,6 +4097,7 @@ Object { "interactionIDs": Array [ 1, ], + "passiveEffectDuration": null, "priorityLevel": "Immediate", "timestamp": 22, }, diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index b23b59f73d84a..c2de357a1b5f6 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/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 | null, commitTime: number, durations: Array, + effectDuration: number | null, interactions: Array, 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, }); diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index 3c42d2f9cc288..627e9a45045ab 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/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, + // Only available in certain (newer) React builds, + passiveEffectDuration: number | null, priorityLevel: string | null, timestamp: number, |}; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js index 6cff0e209fa9a..e10f4a8138156 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js +++ b/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); @@ -63,6 +65,22 @@ export default function SidebarCommitInfo(_: Props) { :{' '} {formatDuration(duration)}ms + {effectDuration !== null && ( +
  • + :{' '} + + {formatDuration(effectDuration)}ms + +
    • + )} + {passiveEffectDuration !== null && ( +
  • + :{' '} + + {formatDuration(passiveEffectDuration)}ms + +
    • + )}
  • :
    diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css index 53faae5c38129..7713f5c666005 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css @@ -7,3 +7,30 @@ */ 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; +} \ No newline at end of file diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js index b4b42ddc82215..737cca079d1f1 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js @@ -7,6 +7,8 @@ * @flow */ +import type {CommitDataFrontend} from './types'; + import * as React from 'react'; import {useEffect, useMemo, useRef, useState} from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; @@ -31,6 +33,7 @@ export type ItemData = {| |}; type Props = {| + commitData: CommitDataFrontend, commitDurations: Array, commitTimes: Array, filteredCommitIndices: Array, @@ -40,6 +43,7 @@ type Props = {| |}; export default function SnapshotCommitList({ + commitData, commitDurations, commitTimes, filteredCommitIndices, @@ -51,6 +55,7 @@ export default function SnapshotCommitList({ {({height, width}) => ( , commitTimes: Array, height: number, @@ -83,6 +89,7 @@ type DragState = { }; function List({ + commitData, commitDurations, selectedCommitIndex, commitTimes, @@ -200,15 +207,68 @@ function List({ let tooltipLabel = null; if (hoveredCommitIndex !== null) { - const commitDuration = commitDurations[hoveredCommitIndex]; - const commitTime = commitTimes[hoveredCommitIndex]; - tooltipLabel = `${formatDuration(commitDuration)}ms at ${formatTime( - commitTime, - )}s`; + const { + duration, + effectDuration, + passiveEffectDuration, + priorityLevel, + timestamp, + } = commitData[hoveredCommitIndex]; + + // Only some React versions include commit durations. + // Show a richer tooltip only for builds that have that info. + if (effectDuration > 0 || passiveEffectDuration > 0) { + tooltipLabel = ( +
      + {priorityLevel !== null && ( +
    • + + {priorityLevel} +
      • + )} +
    • + + + {formatTime(timestamp)}s + +
      • +
    • + + + {formatDuration(duration)}ms + +
      • + {effectDuration !== null && ( +
    • + + + {formatDuration(effectDuration)}ms + +
      • + )} + {passiveEffectDuration !== null && ( +
    • + + + {formatDuration(passiveEffectDuration)}ms + +
      • + )} +
    + ); + } else { + tooltipLabel = `${formatDuration(duration)}ms at ${formatTime( + timestamp, + )}s`; + } } return ( - +
    0) { + backgroundColor = getGradientColor(colorScale); + } + return (
    0 ? getGradientColor(colorScale) : undefined, + backgroundColor, }} />
    diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js index c67b895edf46e..c2259d56401d5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js @@ -35,7 +35,11 @@ export default function SnapshotSelector(_: Props) { const commitDurations: Array = []; const commitTimes: Array = []; commitData.forEach(commitDatum => { - commitDurations.push(commitDatum.duration); + commitDurations.push( + commitDatum.duration + + (commitDatum.effectDuration || 0) + + (commitDatum.passiveEffectDuration || 0), + ); commitTimes.push(commitDatum.timestamp); }); @@ -151,6 +155,7 @@ export default function SnapshotSelector(_: Props) { tabIndex={0}> {numFilteredCommits > 0 && ( -
    +
    {label}
    {children} diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js index 2ca28cefd3cf9..803aeac6a0f0f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js @@ -52,9 +52,13 @@ export type CommitDataFrontend = {| // Map of Fiber (ID) to a description of what changed in this commit. changeDescriptions: Map | null, - // How long was this commit? + // How long was the render phase? duration: number, + // How long was the layout commit phase? + // Note that not all builds of React expose this property. + effectDuration: number | null, + // Map of Fiber (ID) to actual duration for this commit; // Fibers that did not render will not have entries in this Map. fiberActualDurations: Map, @@ -66,6 +70,10 @@ export type CommitDataFrontend = {| // Which interactions (IDs) were associated with this commit. interactionIDs: Array, + // How long was the passive commit phase? + // Note that not all builds of React expose this property. + passiveEffectDuration: number | null, + // Priority level of the commit (if React provided this info) priorityLevel: string | null, @@ -113,11 +121,13 @@ export type ProfilingDataFrontend = {| export type CommitDataExport = {| changeDescriptions: Array<[number, ChangeDescription]> | null, duration: number, + 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, + passiveEffectDuration: number | null, priorityLevel: string | null, timestamp: number, |}; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js index 9691af89a588d..c667276cfafac 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js @@ -75,11 +75,13 @@ export function prepareProfilingDataFrontendFromBackendAndStore( ? new Map(commitDataBackend.changeDescriptions) : null, duration: commitDataBackend.duration, + effectDuration: commitDataBackend.effectDuration, fiberActualDurations: new Map( commitDataBackend.fiberActualDurations, ), fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations), interactionIDs: commitDataBackend.interactionIDs, + passiveEffectDuration: commitDataBackend.passiveEffectDuration, priorityLevel: commitDataBackend.priorityLevel, timestamp: commitDataBackend.timestamp, }), @@ -129,18 +131,22 @@ export function prepareProfilingDataFrontendFromExport( ({ changeDescriptions, duration, + effectDuration, fiberActualDurations, fiberSelfDurations, interactionIDs, + passiveEffectDuration, priorityLevel, timestamp, }) => ({ changeDescriptions: changeDescriptions != null ? new Map(changeDescriptions) : null, duration, + effectDuration, fiberActualDurations: new Map(fiberActualDurations), fiberSelfDurations: new Map(fiberSelfDurations), interactionIDs, + passiveEffectDuration, priorityLevel, timestamp, }), @@ -180,9 +186,11 @@ export function prepareProfilingDataExport( ({ changeDescriptions, duration, + effectDuration, fiberActualDurations, fiberSelfDurations, interactionIDs, + passiveEffectDuration, priorityLevel, timestamp, }) => ({ @@ -191,9 +199,11 @@ export function prepareProfilingDataExport( ? Array.from(changeDescriptions.entries()) : null, duration, + effectDuration, fiberActualDurations: Array.from(fiberActualDurations.entries()), fiberSelfDurations: Array.from(fiberSelfDurations.entries()), interactionIDs, + passiveEffectDuration, priorityLevel, timestamp, }), diff --git a/packages/react-devtools-shell/src/app/InteractionTracing/index.js b/packages/react-devtools-shell/src/app/InteractionTracing/index.js index fd9bb891e0e67..544b335d0b36a 100644 --- a/packages/react-devtools-shell/src/app/InteractionTracing/index.js +++ b/packages/react-devtools-shell/src/app/InteractionTracing/index.js @@ -8,7 +8,13 @@ */ import * as React from 'react'; -import {Fragment, useCallback, useEffect, useState} from 'react'; +import { + Fragment, + useCallback, + useLayoutEffect, + useEffect, + useState, +} from 'react'; import {unstable_batchedUpdates as batchedUpdates} from 'react-dom'; import { unstable_trace as trace, @@ -68,6 +74,10 @@ export default function InteractionTracing() { } }, [count, shouldCascade]); + useLayoutEffect(() => { + Math.sqrt(100 * 100 * 100 * 100 * 100); + }); + return (

    Interaction Tracing