Revert "feat: hover overlay positioning in browser extension"

This reverts commit 990c28f.

Author: felixfbecker

src/hoverifier.ts

@@ -69,8 +69,6 @@ interface HoverifierOptions {
 
     fetchHover: HoverFetcher
     fetchJumpURL: JumpURLFetcher
-
-    containerIsScrollable: boolean
 }
 
 /**
@@ -213,7 +211,6 @@ export const createHoverifier = ({
     fetchJumpURL,
     logTelemetryEvent,
     dom,
-    containerIsScrollable,
 }: HoverifierOptions): Hoverifier => {
     // Internal state that is not exposed to the caller
     // Shared between all hoverified code views
@@ -338,7 +335,7 @@ export const createHoverifier = ({
                 // with the latest target that came from either a mouseover, click or location change (whatever was the most recent)
                 withLatestFrom(merge(codeMouseOverTargets, codeClickTargets, jumpTargets)),
                 map(([{ hoverOverlayElement, scrollElement }, { target }]) =>
-                    calculateOverlayPosition(scrollElement, target, hoverOverlayElement, containerIsScrollable)
+                    calculateOverlayPosition(scrollElement, target, hoverOverlayElement)
                 )
             )
             .subscribe(hoverOverlayPosition => {

src/overlay_position.ts

@@ -4,7 +4,15 @@
  */
 const BLOB_PADDING_TOP = 8
 
-const calculateOverlayPositionWithinScrollable = (
+/**
+ * Calculates the desired position of the hover overlay depending on the container,
+ * the hover target and the size of the hover overlay
+ *
+ * @param scrollable The closest container that is scrollable
+ * @param target The DOM Node that was hovered
+ * @param tooltip The DOM Node of the tooltip
+ */
+export const calculateOverlayPosition = (
     scrollable: HTMLElement,
     target: HTMLElement,
     tooltip: HTMLElement
@@ -17,68 +25,18 @@ const calculateOverlayPositionWithinScrollable = (
     // changes to vertical height if the tooltip is at the edge of the viewport.
     const relLeft = targetBound.left - scrollableBounds.left
 
-    const scrollTop = scrollable === document.documentElement ? window.pageYOffset : scrollable.scrollTop
-
     // Anchor the tooltip vertically.
     const tooltipBound = tooltip.getBoundingClientRect()
-    const relTop = targetBound.top + scrollTop - scrollableBounds.top
+    const relTop = targetBound.top + scrollable.scrollTop - scrollableBounds.top
     // This is the padding-top of the blob element
     let tooltipTop = relTop - (tooltipBound.height - BLOB_PADDING_TOP)
-    if (tooltipTop - scrollTop < 0) {
+    if (tooltipTop - scrollable.scrollTop < 0) {
         // Tooltip wouldn't be visible from the top, so display it at the
         // bottom.
-        const relBottom = targetBound.bottom + scrollTop - scrollableBounds.top
+        const relBottom = targetBound.bottom + scrollable.scrollTop - scrollableBounds.top
         tooltipTop = relBottom
     } else {
         tooltipTop -= BLOB_PADDING_TOP
     }
     return { left: relLeft, top: tooltipTop }
 }
-
-const calculateOverlayPositionWithoutScrollable = (
-    container: HTMLElement,
-    target: HTMLElement,
-    tooltip: HTMLElement
-): { left: number; top: number } => {
-    const containerBound = container.getBoundingClientRect()
-
-    // Anchor it horizontally, prior to rendering to account for wrapping
-    // changes to vertical height if the tooltip is at the edge of the viewport.
-    const targetBound = target.getBoundingClientRect()
-    const tooltipLeft = targetBound.left - containerBound.left + window.scrollX
-
-    // Anchor the tooltip vertically.
-    const tooltipBound = tooltip.getBoundingClientRect()
-    const relTop = targetBound.top - containerBound.top + container.offsetTop
-
-    let tooltipTop = relTop - tooltipBound.height
-    if (tooltipTop - window.scrollY < 0) {
-        // Tooltip wouldn't be visible from the top, so display it at the bottom.
-        const relBottom = relTop + targetBound.height
-        tooltipTop = relBottom
-    }
-
-    return { top: tooltipTop, left: tooltipLeft }
-}
-
-/**
- * Calculates the desired position of the hover overlay depending on the container,
- * the hover target and the size of the hover overlay
- *
- * @param container The container. If the code view is scrollable, it's the scrollable element, otherwise its the codeView itself.
- * @param target The DOM Node that was hovered.
- * @param tooltip The DOM Node of the tooltip.
- * @param isScrollable Whether the code view is scrollable or not.
- */
-export const calculateOverlayPosition = (
-    container: HTMLElement,
-    target: HTMLElement,
-    tooltip: HTMLElement,
-    isScrollable?: boolean
-): { left: number; top: number } => {
-    if (isScrollable) {
-        return calculateOverlayPositionWithinScrollable(container, target, tooltip)
-    }
-
-    return calculateOverlayPositionWithoutScrollable(container, target, tooltip)
-}