fix: use checkVisibility() (#348)

The checkVisibility is a standard API to enable checking if the element
is visible.

https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility

src/content/presenters/FocusPresenter.ts

@@ -1,5 +1,4 @@
 import { injectable } from "inversify";
-import * as doms from "../../shared/utils/dom";
 
 export default interface FocusPresenter {
   focusFirstElement(): boolean;
@@ -15,7 +14,12 @@ export class FocusPresenterImpl implements FocusPresenter {
     const targets = window.document.querySelectorAll(
       inputSelector + ",input:not([type]),textarea",
     );
-    const target = Array.from(targets).find(doms.isVisible);
+    const target = Array.from(targets).find((e) =>
+      e.checkVisibility({
+        checkOpacity: true,
+        checkVisibilityCSS: true,
+      }),
+    );
     if (target instanceof HTMLInputElement) {
       target.focus();
       return true;

src/content/presenters/HintPresenter.ts

@@ -161,13 +161,13 @@ export class HintPresenterImpl implements HintPresenter {
     viewSize: Size,
     framePosition: Point,
   ): boolean {
-    const style = window.getComputedStyle(element);
-
     // AREA's 'display' in Browser style is 'none'
     return (
-      (element.tagName === "AREA" || style.display !== "none") &&
-      style.visibility !== "hidden" &&
-      (element as HTMLInputElement).type !== "hidden" &&
+      element.checkVisibility({
+        checkOpacity: true,
+        checkVisibilityCSS: true,
+      }) &&
+      element.offsetWidth > 0 &&
       element.offsetHeight > 0 &&
       !isAriaHiddenOrAriaDisabled(window, element) &&
       inViewport(window, element, viewSize, framePosition)

src/content/presenters/ScrollPresenter.ts

@@ -1,5 +1,4 @@
 import { injectable } from "inversify";
-import * as doms from "../../shared/utils/dom";
 
 const SCROLL_DELTA_X = 64;
 const SCROLL_DELTA_Y = 64;
@@ -42,7 +41,12 @@ const findScrollable = (element: Element): Element | null => {
     return element;
   }
 
-  const children = Array.from(element.children).filter(doms.isVisible);
+  const children = Array.from(element.children).filter((e) =>
+    e.checkVisibility({
+      checkOpacity: true,
+      checkVisibilityCSS: true,
+    }),
+  );
   for (const child of children) {
     const scrollable = findScrollable(child);
     if (scrollable) {

src/shared/utils/dom.ts

@@ -92,31 +92,4 @@ const viewportRect = (e: Element): Rect => {
   };
 };
 
-const isVisible = (element: Element): boolean => {
-  const rect = element.getBoundingClientRect();
-  const style = window.getComputedStyle(element);
-
-  if (style.overflow !== "visible" && (rect.width === 0 || rect.height === 0)) {
-    return false;
-  }
-  if (rect.right < 0 && rect.bottom < 0) {
-    return false;
-  }
-  if (window.innerWidth < rect.left && window.innerHeight < rect.top) {
-    return false;
-  }
-  if (
-    element instanceof HTMLInputElement &&
-    element.type.toLowerCase() === "hidden"
-  ) {
-    return false;
-  }
-
-  const { display, visibility } = window.getComputedStyle(element);
-  if (display === "none" || visibility === "hidden") {
-    return false;
-  }
-  return true;
-};
-
-export { isContentEditable, viewportRect, isVisible };
+export { isContentEditable, viewportRect };

test/content/presenters/HintPresenter.test.ts

@@ -15,6 +15,11 @@ describe("HintPresenterImpl", () => {
 
     // HintPresenterImpl checks if the element is visible by the offsetHeight.
     Object.defineProperties(window.HTMLElement.prototype, {
+      offsetWidth: {
+        get() {
+          return 10;
+        },
+      },
       offsetHeight: {
         get() {
           return 10;

test/main.ts

@@ -53,3 +53,7 @@ global.chrome = {
     },
   },
 } as unknown as typeof chrome;
+
+if (global.Element) {
+  global.Element.prototype.checkVisibility = () => true;
+}