Profiler tooltip shows self duration (#18510)
Brian Vaughn committed
Apr 6, 2020 at 09:47 UTC
3498f1366987977659b37e099aef79f05170fed0
2 files changed
+12
-13
packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
+1
-1
@@ -27,7 +27,7 @@
27
}
28
29
.CurrentCommit {
30
- margin-top: 0.25rem;
30
+ margin: 0.25rem 0;
31
display: block;
32
width: 100%;
33
text-align: left;
packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
+11
-12
@@ -10,7 +10,7 @@
10
import * as React from 'react';
11
import {Fragment, useContext} from 'react';
12
import {ProfilerContext} from './ProfilerContext';
13
-import {formatDuration, formatTime} from './utils';
13
+import {formatDuration} from './utils';
14
import WhatChanged from './WhatChanged';
15
import {StoreContext} from '../context';
16
@@ -44,18 +44,17 @@ export default function HoveredFiberInfo({fiberData}: Props) {
44
for (i = 0; i < commitIndices.length; i++) {
45
const commitIndex = commitIndices[i];
46
if (selectedCommitIndex === commitIndex) {
47
- const {duration, timestamp} = profilerStore.getCommitData(
48
- ((rootID: any): number),
49
- commitIndex,
50
- );
47
+ const {
48
+ fiberActualDurations,
49
+ fiberSelfDurations,
50
+ } = profilerStore.getCommitData(((rootID: any): number), commitIndex);
51
+ const actualDuration = fiberActualDurations.get(id) || 0;
52
+ const selfDuration = fiberSelfDurations.get(id) || 0;
53
54
renderDurationInfo = (
53
- <Fragment>
54
- <label className={styles.Label}>Rendered at:</label>
55
- <div key={commitIndex} className={styles.CurrentCommit}>
56
- {formatTime(timestamp)}s for {formatDuration(duration)}ms
57
- </div>
58
- </Fragment>
55
+ <div key={commitIndex} className={styles.CurrentCommit}>
56
+ {formatDuration(selfDuration)}ms of {formatDuration(actualDuration)}ms
57
+ </div>
58
);
59
60
break;
@@ -68,10 +67,10 @@ export default function HoveredFiberInfo({fiberData}: Props) {
67
<div className={styles.Component}>{name}</div>
68
</div>
69
<div className={styles.Content}>
71
- <WhatChanged fiberID={((id: any): number)} />
70
{renderDurationInfo || (
71
<div>Did not render during this profiling session.</div>
72
)}
73
+ <WhatChanged fiberID={((id: any): number)} />
74
</div>
75
</Fragment>
76
);