@reticlehq/browser 3.8.1 → 3.9.0

package/dist/dom/text-match.js

@@ -1,4 +1,5 @@
 import { parentAcrossShadowBoundary } from './shadow-registry.js';
+import { stalledFade } from './visibility.js';
 export function normaliseVisibleText(value) {
     return value.replace(/\s+/g, ' ').trim().normalize('NFC');
 }
@@ -81,7 +82,7 @@ export function unreadableText(el) {
     let opaque = false;
     for (let node = el; null !== node; node = parentAcrossShadowBoundary(node)) {
         const style = view.getComputedStyle(node);
-        const alpha = Number.parseFloat(style.opacity);
+        const alpha = stalledFade(node) ? 1 : Number.parseFloat(style.opacity);
         opacity *= Number.isNaN(alpha) ? 1 : alpha;
         if (opaque) {
             continue;

package/dist/dom/visibility.d.ts

@@ -1,6 +1,7 @@
 export declare const HTML_DETAILS_TAG = "details";
 export declare const HTML_DETAILS_OPEN_ATTRIBUTE = "open";
 export declare const HTML_SUMMARY_TAG = "summary";
+export declare function stalledFade(el: Element): boolean;
 export declare function isHiddenByAriaOnly(el: Element): boolean;
 export declare function isRenderedOutsideAriaHidden(el: Element): boolean;
 export declare function isInViewport(el: Element, memo?: Map<Element, boolean>): boolean;

package/dist/dom/visibility.js

@@ -1,3 +1,4 @@
+import { RETICLE_OVERLAY_SELECTOR } from '@reticlehq/core';
 import { isHtmlElement } from './realm.js';
 import { parentAcrossShadowBoundary } from './shadow-registry.js';
 import { clippingBox, overflowAxes, scrolledInto, } from './paint-context.js';
@@ -16,15 +17,45 @@ function hiddenInsideClosedDetails(el) {
     const summary = Array.from(details.children).find((child) => HTML_SUMMARY_TAG === child.localName);
     return summary === undefined || !summary.contains(el);
 }
-function stalledFade(el) {
+export function stalledFade(el) {
     if (!el.ownerDocument.hidden || !('getAnimations' in el)) {
         return false;
     }
     return el.getAnimations().some((a) => 'running' === a.playState || a.pending);
 }
 const OVERLAY_ARIA_HIDDEN = 'data-aria-hidden';
+const OPEN_LAYER = '[role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], dialog[open], [aria-modal="true"]';
+const UNPAINTED_TAGS = new Set(['script', 'style', 'template', 'noscript', 'link', 'meta']);
 function hiddenByAnOverlay(el) {
-    return el.hasAttribute(OVERLAY_ARIA_HIDDEN);
+    if (el.hasAttribute(OVERLAY_ARIA_HIDDEN)) {
+        return true;
+    }
+    return hiddenByAModalManager(el);
+}
+function hiddenByAModalManager(el) {
+    const body = el.ownerDocument.body;
+    if (el.parentElement !== body) {
+        return false;
+    }
+    const others = Array.from(body.children).filter((child) => child !== el &&
+        !UNPAINTED_TAGS.has(child.localName) &&
+        !child.matches(RETICLE_OVERLAY_SELECTOR));
+    const open = others.filter((child) => 'true' !== child.getAttribute('aria-hidden'));
+    const layer = open[0];
+    return 1 === open.length && layer !== undefined && holdsOpenLayer(layer);
+}
+function holdsOpenLayer(portal) {
+    const layer = portal.matches(OPEN_LAYER) ? portal : portal.querySelector(OPEN_LAYER);
+    for (let node = layer; null !== node; node = node.parentElement) {
+        const style = node.ownerDocument.defaultView?.getComputedStyle(node) ?? null;
+        if (selfCssHidden(node, style)) {
+            return false;
+        }
+        if (node === portal) {
+            return true;
+        }
+    }
+    return false;
 }
 function selfCssHidden(el, style) {
     if (isHtmlElement(el) && el.hidden) {
@@ -106,6 +137,56 @@ export function isRenderedOutsideAriaHidden(el) {
     }
     return true;
 }
+const BACKFACE_VISIBILITY_HIDDEN = 'hidden';
+function localTransform(style) {
+    if ('undefined' === typeof DOMMatrix) {
+        return null;
+    }
+    try {
+        const transform = style?.transform;
+        return undefined === transform || '' === transform || 'none' === transform
+            ? new DOMMatrix()
+            : new DOMMatrix(transform);
+    }
+    catch {
+        return null;
+    }
+}
+function backFaceTowardViewer(matrix) {
+    return Number.isFinite(matrix.m33) && 0 > matrix.m33;
+}
+function backfaceHidden(el, memo) {
+    const chain = [];
+    let declares = false;
+    for (let current = el; null !== current; current = parentAcrossShadowBoundary(current)) {
+        const style = ownVisibilityInfo(current, memo).style;
+        if (BACKFACE_VISIBILITY_HIDDEN === style?.backfaceVisibility) {
+            declares = true;
+        }
+        chain.push(current);
+    }
+    if (!declares) {
+        return false;
+    }
+    let composed = null;
+    for (let index = chain.length - 1; index >= 0; index -= 1) {
+        const current = chain[index];
+        if (undefined === current) {
+            return false;
+        }
+        const style = ownVisibilityInfo(current, memo).style;
+        const local = localTransform(style);
+        if (null === local) {
+            return false;
+        }
+        composed = null === composed ? local : composed.multiply(local);
+        if (BACKFACE_VISIBILITY_HIDDEN === style?.backfaceVisibility &&
+            backFaceTowardViewer(composed)) {
+            return true;
+        }
+    }
+    return false;
+}
 const CLIPPING_OVERFLOW = new Set(['hidden', 'clip']);
 const SCROLLING_OVERFLOW = new Set(['auto', 'scroll']);
 const NON_CLIPPING_DISPLAY = new Set([
@@ -314,7 +395,9 @@ export function isVisible(el, memo) {
         return cached;
     }
     const info = visibilityInfoMemo(memo);
-    const result = visibleBounds(el, info, undefined, true) !== null && !collapsed(el, info);
+    const result = visibleBounds(el, info, undefined, true) !== null &&
+        !collapsed(el, info) &&
+        !backfaceHidden(el, info);
     if (memo !== undefined) {
         memo.set(el, result);
     }

package/dist/observers/network.js

@@ -228,6 +228,7 @@ export function installNetwork(emit, opts = {}) {
     }
     const owner = {};
     pageSlots()[PAGE_CAPTURE] = owner;
+    const installedAt = performance.now();
     const captureBodies = true === opts.captureBodies;
     const bodyCapture = new AbortController();
     const captureErrorBodies = false !== opts.captureErrorBodies;
@@ -550,7 +551,8 @@ export function installNetwork(emit, opts = {}) {
                         return;
                     }
                     const type = entry.initiatorType || 'other';
-                    if ('fetch' === type || 'xmlhttprequest' === type) {
+                    const patched = 'fetch' === type || 'xmlhttprequest' === type;
+                    if (patched && entry.startTime >= installedAt) {
                         continue;
                     }
                     const rawUrl = entry.name;