Feature: Use Floating UI for tooltip positioning

packages/extension/package.json

@@ -8,14 +8,16 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-		"dev": "webpack --config webpack.config.cjs --watch",
-		"build": "cross-env NODE_ENV=production webpack --config webpack.config.cjs"
-  },  
+    "dev": "webpack --config webpack.config.cjs --watch",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.config.cjs"
+  },
   "bugs": {
     "url": "https://github.com/GoogleChromeLabs/ps-analysis-tool/issues"
   },
   "homepage": "https://github.com/GoogleChromeLabs/ps-analysis-tool#readme",
   "dependencies": {
+    "@floating-ui/core": "^1.5.0",
+    "@floating-ui/dom": "^1.5.3",
     "@ps-analysis-tool/common": "*",
     "@ps-analysis-tool/design-system": "*",
     "classnames": "^2.3.2",
@@ -33,7 +35,7 @@
     "validate.js": "^0.13.1",
     "victory": "^36.6.11"
   },
-	"devDependencies": {
-		"@types/react-copy-to-clipboard": "^5.0.4"
-	}
+  "devDependencies": {
+    "@types/react-copy-to-clipboard": "^5.0.4"
+  }
 }

packages/extension/src/contentScript/index.ts

@@ -13,6 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * External dependencies
+ */
+import { noop } from '@ps-analysis-tool/common';
+import { computePosition, flip, shift } from '@floating-ui/core';
+import { autoUpdate, platform, arrow } from '@floating-ui/dom';
 /**
  * Internal dependencies.
  */
@@ -23,7 +29,6 @@ import {
   addOverlay,
   setOverlayPosition,
   addTooltip,
-  setTooltipPosition,
 } from './popovers';
 import type { ResponseType } from './types';
 import { CookieStore } from '../localStore';
@@ -41,49 +46,49 @@ import './style.css';
  */
 class WebpageContentScript {
   /**
-   * @property {chrome.runtime.Port | null} port - The connection port.
+   * Connection port
    */
   port: chrome.runtime.Port | null = null;
 
   /**
-   * @property {boolean} isInspecting - If true, the page is currently being inspected.
+   * Cleanup function that needs to run when tooltip is removed from the screen.
+   */
+  cleanup: () => void = noop;
+
+  /**
+   * If true, the page is currently being inspected.
    */
   isInspecting = false;
 
   /**
-   * @property {boolean} isHoveringOverPage - If true, the mouse is currently hovering over the page.
+   * If true, the mouse is currently hovering over the page.
    */
   isHoveringOverPage = false;
 
   /**
-   * @property {boolean} bodyHoverStateSent - Keeps track if the hover state message has been sent.
+   * Keeps track if the hover state message has been sent.
    */
   bodyHoverStateSent = false;
 
   /**
-   * @property {Array<() => void>} scrollEventListeners - Array of scroll event listeners.
+   * Array of scroll event listeners.
    */
   scrollEventListeners: Array<() => void> = [];
 
   /**
-   * @property {HTMLElement} docElement - Document element.
+   * Document element.
    */
   docElement: HTMLElement;
 
   /**
-   * @property {HTMLElement} hoveredFrame - Frame that is currently being hovered over.
+   * Frame that is currently being hovered over.
    */
   hoveredFrame: HTMLElement | null = null;
 
   /**
    * Initialize.
    */
   constructor() {
-    this.handleHoverEvent = this.handleHoverEvent.bind(this);
-    this.abortInspection = this.abortInspection.bind(this);
-    this.onMessage = this.onMessage.bind(this);
-    this.onDisconnect = this.onDisconnect.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
     this.docElement = document.documentElement;
 
     this.listenToConnection();
@@ -136,7 +141,7 @@ class WebpageContentScript {
    * Handles incoming messages from the connected port.
    * @param {ResponseType} response - The incoming message/response.
    */
-  onMessage(response: ResponseType) {
+  onMessage = (response: ResponseType) => {
     this.isInspecting = response.isInspecting;
 
     if (response.isInspecting) {
@@ -147,7 +152,7 @@ class WebpageContentScript {
     } else {
       this.abortInspection();
     }
-  }
+  };
 
   /**
    * Inserts overlay
@@ -188,23 +193,73 @@ class WebpageContentScript {
       numberOfVisibleFrames,
       numberOfHiddenFrames
     );
-
-    const isHiddenForFirstTime = frame ? !frame.clientWidth : false;
-    setTooltipPosition(
-      tooltip,
-      frame,
-      isHiddenForFirstTime,
-      response.selectedFrame
-    );
-
-    const updatePosition = () => {
-      if (isElementVisibleInViewport(frame, true)) {
-        const isHidden = frame ? !frame.clientWidth : false;
-        setTooltipPosition(tooltip, frame, isHidden, response.selectedFrame);
-      }
-    };
-
-    this.addEventListerOnScroll(updatePosition);
+    const arrowElement = document.getElementById('ps-content-tooltip-arrow');
+    if (
+      (frame?.tagName === 'BODY' || isFrameHidden(frame) || !frame) &&
+      arrowElement &&
+      tooltip
+    ) {
+      Object.assign(arrowElement.style, {
+        left: '20px',
+        top: '10px',
+        transform: 'rotate(45deg)',
+      });
+      Object.assign(tooltip.style, {
+        top: `${5 + window.scrollY}px`,
+      });
+      return tooltip;
+    }
+    if (
+      frame &&
+      (frame.tagName !== 'BODY' || !isFrameHidden(frame)) &&
+      tooltip &&
+      arrowElement
+    ) {
+      this.cleanup = autoUpdate(frame, tooltip, () => {
+        computePosition(frame, tooltip, {
+          platform: platform,
+          placement: 'top',
+          middleware: [
+            shift({
+              boundary: document.querySelector('body'),
+            }),
+            flip({
+              boundary: document.querySelector('body'),
+            }),
+            arrow({
+              element: arrowElement,
+            }),
+          ],
+        }).then(({ x, y, middlewareData, placement }) => {
+          Object.assign(tooltip.style, {
+            top: `${y}px`,
+            left: `${x}px`,
+          });
+          const side = placement.split('-')[0];
+
+          const staticSide = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+          }[side];
+
+          if (middlewareData.arrow) {
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
+            Object.assign(arrowElement.style, {
+              left: arrowX ? `${arrowX - 15}px` : '',
+              top: arrowY ? `${arrowY}px` : '',
+              right: '',
+              bottom: '',
+              [staticSide as string]: `${arrowElement.offsetWidth / 2}px`,
+              transform: 'rotate(45deg)',
+            });
+          }
+          return tooltip;
+        });
+      });
+    }
 
     return tooltip;
   }
@@ -231,27 +286,29 @@ class WebpageContentScript {
       this.scrollEventListeners = [];
     }
 
+    this.cleanup();
+
     removeAllPopovers();
   }
 
   /**
    * Handles the port disconnection event.
    */
-  onDisconnect() {
+  onDisconnect = () => {
     this.port?.onMessage.removeListener(this.onMessage);
     this.port = null;
     this.abortInspection();
-  }
+  };
 
   /**
    * Abort inspection and removes all frame popovers and hover event listeners.
    */
-  abortInspection(): void {
+  abortInspection = (): void => {
     this.removeEventListeners();
     removeAllPopovers();
     toggleFrameHighlighting(false);
     this.isInspecting = false;
-  }
+  };
 
   /**
    * Insert popovers for all visible frames.
@@ -385,18 +442,13 @@ class WebpageContentScript {
 
     const firstToolTip = popoverElement['firstToolTip'];
     const frameWithTooltip = popoverElement['frameWithTooltip'];
-
     if (
       firstToolTip &&
       !this.isHoveringOverPage &&
       frameToScrollTo.clientWidth &&
-      !isElementVisibleInViewport(frameWithTooltip)
+      !isElementVisibleInViewport(firstToolTip)
     ) {
-      (firstToolTip as HTMLElement).scrollIntoView({
-        behavior: 'instant',
-        block: 'start',
-        inline: 'nearest',
-      });
+      (frameWithTooltip as HTMLElement).scrollIntoView();
     }
   }
 
@@ -405,7 +457,7 @@ class WebpageContentScript {
    * @param {MouseEvent} event - The mouse event triggered by user action.
    */
   // eslint-disable-next-line complexity
-  handleHoverEvent(event: MouseEvent): void {
+  handleHoverEvent = (event: MouseEvent) => {
     const target = event.target as HTMLElement;
     const isNonIframeElement = target.tagName !== 'IFRAME';
     const isTooltipElement =
@@ -494,13 +546,13 @@ class WebpageContentScript {
     } catch (error) {
       this.abortInspection();
     }
-  }
+  };
 
   /**
    * Toggle this.isHoveringOverPage state when mouse or visibility is changed.
    * @param {MouseEvent} event Mouse event.
    */
-  handleMouseMove(event: Event) {
+  handleMouseMove = (event: Event) => {
     if (event?.type === 'mouseenter') {
       this.isHoveringOverPage = true;
     } else if (event?.type === 'mouseleave') {
@@ -510,7 +562,7 @@ class WebpageContentScript {
     if (document.hidden) {
       this.isHoveringOverPage = false;
     }
-  }
+  };
 
   /**
    * Set topics to be used in the Topics landing page.

packages/extension/src/contentScript/popovers/tooltip/createTooltip.ts

@@ -102,7 +102,10 @@ const createTooltip = (
     const tooltipShowButtonContainer = createShowMoreButton();
     content.appendChild(tooltipShowButtonContainer);
   }
-
+  const toolTipArrow = document.createElement('div');
+  toolTipArrow.classList.add('ps-content-arrow');
+  toolTipArrow.id = 'ps-content-tooltip-arrow';
+  tooltip.appendChild(toolTipArrow);
   tooltip.appendChild(content);
 
   tooltip.popover = 'manual';

packages/extension/src/contentScript/popovers/tooltip/index.ts

@@ -14,4 +14,3 @@
  * limitations under the License.
  */
 export { default as addTooltip } from './addTooltip';
-export { default as setTooltipPosition } from './setTooltipPosition';