maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Profiler tooltip shows self duration (#18510)

This commit is contained in:
Brian Vaughn 2020-04-06 09:47:15 -07:00 committed by GitHub
parent c781156163
commit 3498f13669
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
View File

@ -27,7 +27,7 @@
}
.CurrentCommit {
margin-top: 0.25rem;
margin: 0.25rem 0;
display: block;
width: 100%;
text-align: left;

23
packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js vendored
View File

@ -10,7 +10,7 @@
import * as React from 'react';
import {Fragment, useContext} from 'react';
import {ProfilerContext} from './ProfilerContext';
import {formatDuration, formatTime} from './utils';
import {formatDuration} from './utils';
import WhatChanged from './WhatChanged';
import {StoreContext} from '../context';
@ -44,18 +44,17 @@ export default function HoveredFiberInfo({fiberData}: Props) {
for (i = 0; i < commitIndices.length; i++) {
const commitIndex = commitIndices[i];
if (selectedCommitIndex === commitIndex) {
const {duration, timestamp} = profilerStore.getCommitData(
((rootID: any): number),
commitIndex,
);
const {
fiberActualDurations,
fiberSelfDurations,
} = profilerStore.getCommitData(((rootID: any): number), commitIndex);
const actualDuration = fiberActualDurations.get(id) || 0;
const selfDuration = fiberSelfDurations.get(id) || 0;
renderDurationInfo = (
<Fragment>
<label className={styles.Label}>Rendered at:</label>
<div key={commitIndex} className={styles.CurrentCommit}>
{formatTime(timestamp)}s for {formatDuration(duration)}ms
</div>
</Fragment>
<div key={commitIndex} className={styles.CurrentCommit}>
{formatDuration(selfDuration)}ms of {formatDuration(actualDuration)}ms
</div>
);
break;
@ -68,10 +67,10 @@ export default function HoveredFiberInfo({fiberData}: Props) {
<div className={styles.Component}>{name}</div>
</div>
<div className={styles.Content}>
<WhatChanged fiberID={((id: any): number)} />
{renderDurationInfo || (
<div>Did not render during this profiling session.</div>
)}
<WhatChanged fiberID={((id: any): number)} />
</div>
</Fragment>
);