Fixed Scheduler Profiler tooltip positions in extension builds

Author: Brian Vaughn

packages/react-devtools-scheduling-profiler/src/CanvasPage.js

@@ -509,6 +509,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       </ContextMenu>
       {!isContextMenuShown && !surfaceRef.current.hasActiveView() && (
         <EventTooltip
+          canvasRef={canvasRef}
           data={data}
           hoveredEvent={hoveredEvent}
           origin={mouseLocation}

packages/react-devtools-scheduling-profiler/src/EventTooltip.js

@@ -28,6 +28,7 @@ import useSmartTooltip from './utils/useSmartTooltip';
 import styles from './EventTooltip.css';
 
 type Props = {|
+  canvasRef: {|current: HTMLCanvasElement | null|},
   data: ReactProfilerData,
   hoveredEvent: ReactHoverContextInfo | null,
   origin: Point,
@@ -102,8 +103,14 @@ function getReactMeasureLabel(type): string | null {
   }
 }
 
-export default function EventTooltip({data, hoveredEvent, origin}: Props) {
+export default function EventTooltip({
+  canvasRef,
+  data,
+  hoveredEvent,
+  origin,
+}: Props) {
   const tooltipRef = useSmartTooltip({
+    canvasRef,
     mouseX: origin.x,
     mouseY: origin.y,
   });

packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js

@@ -12,22 +12,32 @@ import {useLayoutEffect, useRef} from 'react';
 const TOOLTIP_OFFSET = 4;
 
 export default function useSmartTooltip({
+  canvasRef,
   mouseX,
   mouseY,
 }: {
+  canvasRef: {|current: HTMLCanvasElement | null|},
   mouseX: number,
   mouseY: number,
 }) {
   const ref = useRef<HTMLElement | null>(null);
 
+  // HACK: Browser extension reports window.innerHeight of 0,
+  // so we fallback to using the tooltip target element.
+  let height = window.innerHeight;
+  let width = window.innerWidth;
+  const target = canvasRef.current;
+  if (target !== null) {
+    const rect = target.getBoundingClientRect();
+    height = rect.top + rect.height;
+    width = rect.left + rect.width;
+  }
+
   useLayoutEffect(() => {
     const element = ref.current;
     if (element !== null) {
       // Let's check the vertical position.
-      if (
-        mouseY + TOOLTIP_OFFSET + element.offsetHeight >=
-        window.innerHeight
-      ) {
+      if (mouseY + TOOLTIP_OFFSET + 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.
@@ -45,7 +55,7 @@ export default function useSmartTooltip({
       }
 
       // Now let's check the horizontal position.
-      if (mouseX + TOOLTIP_OFFSET + element.offsetWidth >= window.innerWidth) {
+      if (mouseX + TOOLTIP_OFFSET + 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