Profiler tooltip tweaks (#18082)

* Moved Profiler views into Profiler folder

* Tweaked Profiler tooltip CSS styles

* Tweaked Tooltip positioning code

packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js

@@ -23,7 +23,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
 import {scale} from './utils';
 import {StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
-import Tooltip from '../Components/Tooltip';
+import Tooltip from './Tooltip';
 
 import styles from './CommitFlamegraph.css';
 

packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js

@@ -17,7 +17,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
 import {scale} from './utils';
 import {StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
-import Tooltip from '../Components/Tooltip';
+import Tooltip from './Tooltip';
 
 import styles from './CommitRanked.css';
 

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

@@ -1,14 +1,13 @@
 .Toolbar {
-  height: 2.25rem;
-  padding: 0 0.5rem;
+  padding: 0.25rem 0;
+  margin-bottom: 0.25rem;
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--color-border);
 }
 
 .Content {
-  padding: 0.5rem;
   user-select: none;
   overflow-y: auto;
 }
@@ -25,14 +24,13 @@
 
 .Label {
   font-weight: bold;
-  margin-bottom: 0.5rem;
 }
 
 .CurrentCommit {
+  margin-top: 0.25rem;
   display: block;
   width: 100%;
   text-align: left;
   background: none;
   border: none;
-  padding: 0.25rem 0.5rem;
 }

packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js

@@ -10,7 +10,7 @@
 import React, {Fragment, useContext} from 'react';
 import {ProfilerContext} from './ProfilerContext';
 import {formatDuration, formatTime} from './utils';
-import ProfilerWhatChanged from '../Components/ProfilerWhatChanged';
+import WhatChanged from './WhatChanged';
 import {StoreContext} from '../context';
 
 import styles from './HoveredFiberInfo.css';
@@ -67,7 +67,7 @@ export default function HoveredFiberInfo({fiberData}: Props) {
         <div className={styles.Component}>{name}</div>
       </div>
       <div className={styles.Content}>
-        <ProfilerWhatChanged fiberID={((id: any): number)} />
+        <WhatChanged fiberID={((id: any): number)} />
         {renderDurationInfo || (
           <div>Did not render during this profiling session.</div>
         )}

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js

@@ -8,7 +8,7 @@
  */
 
 import React, {Fragment, useContext} from 'react';
-import ProfilerWhatChanged from '../Components/ProfilerWhatChanged';
+import WhatChanged from './WhatChanged';
 import {ProfilerContext} from './ProfilerContext';
 import {formatDuration, formatTime} from './utils';
 import {StoreContext} from '../context';
@@ -75,7 +75,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         </Button>
       </div>
       <div className={styles.Content}>
-        <ProfilerWhatChanged fiberID={((selectedFiberID: any): number)} />
+        <WhatChanged fiberID={((selectedFiberID: any): number)} />
         {listItems.length > 0 && (
           <Fragment>
             <label className={styles.Label}>Rendered at</label>: {listItems}

packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js → packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js

@@ -43,46 +43,32 @@ export default function Tooltip({children, label}: any) {
   );
 }
 
+const TOOLTIP_OFFSET = 5;
+
 // Method used to find the position of the tooltip based on current mouse position
 function getTooltipPosition(element, mousePosition) {
   const {height, mouseX, mouseY, width} = mousePosition;
-  const TOOLTIP_OFFSET_X = 5;
-  const TOOLTIP_OFFSET_Y = 15;
   let top = 0;
   let left = 0;
 
-  // Let's check the vertical position.
-  if (mouseY + TOOLTIP_OFFSET_Y + element.offsetHeight >= height) {
-    // The tooltip doesn't fit below the mouse cursor (which is our
-    // default strategy). Therefore we try to position it either above the
-    // mouse cursor or finally aligned with the window's top edge.
-    if (mouseY - TOOLTIP_OFFSET_Y - element.offsetHeight > 0) {
-      // We position the tooltip above the mouse cursor if it fits there.
-      top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET_Y}px`;
+  if (mouseY + TOOLTIP_OFFSET + element.offsetHeight >= height) {
+    if (mouseY - TOOLTIP_OFFSET - element.offsetHeight > 0) {
+      top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET}px`;
     } else {
-      // Otherwise we align the tooltip with the window's top edge.
       top = '0px';
     }
   } else {
-    top = `${mouseY + TOOLTIP_OFFSET_Y}px`;
+    top = `${mouseY + TOOLTIP_OFFSET}px`;
   }
 
-  // Now let's check the horizontal position.
-  if (mouseX + TOOLTIP_OFFSET_X + element.offsetWidth >= width) {
-    // The tooltip doesn't fit at the right of the mouse cursor (which is
-    // our default strategy). Therefore we try to position it either at the
-    // left of the mouse cursor or finally aligned with the window's left
-    // edge.
-    if (mouseX - TOOLTIP_OFFSET_X - element.offsetWidth > 0) {
-      // We position the tooltip at the left of the mouse cursor if it fits
-      // there.
-      left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET_X}px`;
+  if (mouseX + TOOLTIP_OFFSET + element.offsetWidth >= width) {
+    if (mouseX - TOOLTIP_OFFSET - element.offsetWidth > 0) {
+      left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET}px`;
     } else {
-      // Otherwise, align the tooltip with the window's left edge.
       left = '0px';
     }
   } else {
-    left = `${mouseX + TOOLTIP_OFFSET_X * 2}px`;
+    left = `${mouseX + TOOLTIP_OFFSET * 2}px`;
   }
 
   return {left, top};
@@ -94,9 +80,19 @@ function getMousePosition(
   mouseEvent: SyntheticMouseEvent<*>,
 ) {
   if (relativeContainer !== null) {
-    const {height, top, width} = relativeContainer.getBoundingClientRect();
+    // Positon within the nearest position:relative container.
+    let targetContainer = relativeContainer;
+    while (targetContainer.parentElement != null) {
+      if (targetContainer.style.position === 'relative') {
+        break;
+      } else {
+        targetContainer = targetContainer.parentElement;
+      }
+    }
+
+    const {height, left, top, width} = targetContainer.getBoundingClientRect();
 
-    const mouseX = mouseEvent.clientX;
+    const mouseX = mouseEvent.clientX - left;
     const mouseY = mouseEvent.clientY - top;
 
     return {height, mouseX, mouseY, width};

packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css → packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css

@@ -1,5 +1,5 @@
 .Component {
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 .Item {
@@ -26,5 +26,4 @@
 
 .Label {
   font-weight: bold;
-  margin-bottom: 0.5rem;
 }

packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js → packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js

@@ -11,15 +11,13 @@ import React, {useContext} from 'react';
 import {ProfilerContext} from '../Profiler/ProfilerContext';
 import {StoreContext} from '../context';
 
-import styles from './ProfilerWhatChanged.css';
+import styles from './WhatChanged.css';
 
-type ProfilerWhatChangedProps = {|
+type Props = {|
   fiberID: number,
 |};
 
-export default function ProfilerWhatChanged({
-  fiberID,
-}: ProfilerWhatChangedProps) {
+export default function WhatChanged({fiberID}: Props) {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex} = useContext(ProfilerContext);