From a03fef96386fec12c085892ff17a931a064db6f5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 6 Apr 2020 09:34:39 -0700
Subject: [PATCH] Profiler tooltip shows self duration

---
 .../views/Profiler/HoveredFiberInfo.css       |  2 +-
 .../views/Profiler/HoveredFiberInfo.js        | 23 +++++++++----------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
index d50e36935f20..3255b321d31f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
@@ -27,7 +27,7 @@
 }
 
 .CurrentCommit {
-  margin-top: 0.25rem;
+  margin: 0.25rem 0;
   display: block;
   width: 100%;
   text-align: left;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
index fa07d02b1d7c..78f6c5c6ae59 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
@@ -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>
   );