@btraut/browser-bridge 0.13.1 → 0.14.0

package/extension/dist/content.js

@@ -1,5 +1,403 @@
 "use strict";
 (() => {
+  // packages/extension/src/popup-trigger-state.ts
+  var normalizeAttr = (value) => {
+    if (typeof value !== "string") {
+      return void 0;
+    }
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : void 0;
+  };
+  var readPopupTriggerState = (target) => {
+    if (!(target instanceof HTMLElement)) {
+      return null;
+    }
+    const ariaHasPopup = normalizeAttr(target.getAttribute("aria-haspopup"));
+    const ariaExpanded = normalizeAttr(target.getAttribute("aria-expanded"));
+    const dataState = normalizeAttr(target.getAttribute("data-state"));
+    const open = "open" in target && typeof target.open === "boolean" ? target.open ?? false : void 0;
+    const qualifiesAsPopupTrigger = Boolean(ariaHasPopup) || ariaExpanded !== void 0 || open !== void 0;
+    if (!qualifiesAsPopupTrigger && dataState === void 0) {
+      return null;
+    }
+    if (!qualifiesAsPopupTrigger) {
+      return null;
+    }
+    return {
+      kind: "popup_trigger",
+      ariaHasPopup,
+      ariaExpanded,
+      dataState,
+      open
+    };
+  };
+  var popupTriggerStateChanged = (before, after) => {
+    if (!before || !after) {
+      return before !== after;
+    }
+    return before.ariaExpanded !== after.ariaExpanded || before.dataState !== after.dataState || before.open !== after.open;
+  };
+
+  // packages/extension/src/click-strategies/index.ts
+  var selectClickStrategy = (target) => {
+    const popupTriggerState = readPopupTriggerState(target);
+    if (popupTriggerState) {
+      return {
+        kind: "popup_trigger",
+        state: popupTriggerState
+      };
+    }
+    return { kind: "generic" };
+  };
+
+  // packages/extension/src/click-strategies/generic-click.ts
+  var executeGenericClick = (options) => {
+    const { target, clickCount } = options;
+    window.setTimeout(() => {
+      try {
+        if (target instanceof HTMLElement) {
+          try {
+            target.focus({ preventScroll: true });
+          } catch {
+            target.focus();
+          }
+        }
+        for (let i = 0; i < clickCount; i += 1) {
+          target.click();
+        }
+      } catch {
+      }
+    }, 0);
+    return { ok: true };
+  };
+
+  // packages/extension/src/click-strategies/popup-trigger-click.ts
+  var executePopupTriggerClick = async (options) => {
+    const popupTarget = options.target;
+    try {
+      popupTarget.focus({ preventScroll: true });
+    } catch {
+      popupTarget.focus();
+    }
+    for (let i = 0; i < options.clickCount; i += 1) {
+      popupTarget.click();
+    }
+    await options.sleep(options.settleMs ?? 50);
+    if (window.location.href !== options.locationBefore || !options.target.isConnected) {
+      return { ok: true };
+    }
+    const popupTriggerAfter = readPopupTriggerState(options.target);
+    if (!popupTriggerStateChanged(options.beforeState, popupTriggerAfter ?? null)) {
+      return {
+        ok: false,
+        error: {
+          code: "FAILED_PRECONDITION",
+          message: "Click focused the popup trigger but did not change its open state.",
+          retryable: false,
+          details: {
+            reason: "click_state_unchanged",
+            control: options.beforeState.kind,
+            aria_haspopup: options.beforeState.ariaHasPopup,
+            aria_expanded_before: options.beforeState.ariaExpanded,
+            aria_expanded_after: popupTriggerAfter?.ariaExpanded,
+            data_state_before: options.beforeState.dataState,
+            data_state_after: popupTriggerAfter?.dataState
+          }
+        }
+      };
+    }
+    return { ok: true };
+  };
+
+  // packages/extension/src/locator-point.ts
+  var pointHitsTarget = (target, x, y, options) => {
+    if (typeof document.elementFromPoint !== "function") {
+      return true;
+    }
+    const hit = document.elementFromPoint(x, y);
+    if (!hit) {
+      return false;
+    }
+    if (options?.directOnly) {
+      return target === hit;
+    }
+    return target === hit || target.contains(hit);
+  };
+  var getHittablePoint = (target, options) => {
+    const rect = target.getBoundingClientRect();
+    const insetX = Math.min(Math.max(rect.width * 0.25, 1), rect.width / 2);
+    const insetY = Math.min(Math.max(rect.height * 0.25, 1), rect.height / 2);
+    const candidatePoints = [
+      { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 },
+      { x: rect.left + insetX, y: rect.top + insetY },
+      { x: rect.right - insetX, y: rect.top + insetY },
+      { x: rect.left + insetX, y: rect.bottom - insetY },
+      { x: rect.right - insetX, y: rect.bottom - insetY },
+      { x: rect.left + rect.width / 2, y: rect.top + insetY },
+      { x: rect.left + rect.width / 2, y: rect.bottom - insetY },
+      { x: rect.left + insetX, y: rect.top + rect.height / 2 },
+      { x: rect.right - insetX, y: rect.top + rect.height / 2 }
+    ];
+    if (options?.preferDirectHit) {
+      for (const point of candidatePoints) {
+        if (pointHitsTarget(target, point.x, point.y, { directOnly: true })) {
+          return point;
+        }
+      }
+    }
+    for (const point of candidatePoints) {
+      if (pointHitsTarget(target, point.x, point.y)) {
+        return point;
+      }
+    }
+    return candidatePoints[0] ?? { x: rect.left, y: rect.top };
+  };
+
+  // packages/extension/src/locator-ranking.ts
+  var collectVisibleText = (node, isVisible2) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node.textContent || "";
+    }
+    if (!(node instanceof Element)) {
+      return "";
+    }
+    if (!isVisible2(node)) {
+      return "";
+    }
+    if (node instanceof HTMLElement) {
+      const { innerText } = node;
+      if (typeof innerText === "string" && innerText.length > 0) {
+        return innerText;
+      }
+    }
+    return Array.from(node.childNodes).map((child) => collectVisibleText(child, isVisible2)).join("");
+  };
+  var normalizeText = (value) => value.replace(/\s+/g, " ").trim();
+  var isClickable = (element) => element instanceof HTMLElement && element.matches(
+    'a,button,input,textarea,select,summary,label,[role="button"],[tabindex]'
+  );
+  var getNodeDepth = (element) => {
+    let depth = 0;
+    let current = element;
+    while (current) {
+      depth += 1;
+      current = current.parentElement;
+    }
+    return depth;
+  };
+  var isVisible = (element) => {
+    if (!(element instanceof HTMLElement)) {
+      return false;
+    }
+    const style = window.getComputedStyle(element);
+    if (style.visibility === "hidden" || style.display === "none") {
+      return false;
+    }
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      return false;
+    }
+    if (element.offsetWidth === 0 && element.offsetHeight === 0 && element.getClientRects().length === 0) {
+      return false;
+    }
+    let current = element;
+    while (current) {
+      const currentStyle = window.getComputedStyle(current);
+      if (currentStyle.display === "none") {
+        return false;
+      }
+      if (currentStyle.visibility === "hidden" || currentStyle.visibility === "collapse") {
+        return false;
+      }
+      const opacity = Number.parseFloat(currentStyle.opacity ?? "1");
+      if (Number.isFinite(opacity) && opacity <= 0) {
+        return false;
+      }
+      current = current.parentElement;
+    }
+    return true;
+  };
+  var isOnScreen = (element) => {
+    if (!(element instanceof HTMLElement) || !isVisible(element)) {
+      return false;
+    }
+    const rect = element.getBoundingClientRect();
+    return rect.right > 0 && rect.bottom > 0 && rect.left < window.innerWidth && rect.top < window.innerHeight;
+  };
+  var getRenderedText = (element) => normalizeText(collectVisibleText(element, isVisible));
+  var getRoleAccessibleName = (element) => normalizeText(
+    element.getAttribute("aria-label") ?? element.getAttribute("title") ?? getRenderedText(element)
+  );
+  var scoreCandidates = (candidates, options) => {
+    const queryText = options?.exactText ? normalizeText(options.exactText) : "";
+    const queryHref = options?.exactHref ?? "";
+    if (candidates.length === 0) {
+      return null;
+    }
+    const scored = candidates.filter(isVisible).map((candidate) => {
+      const text = getRenderedText(candidate);
+      const href = candidate.getAttribute("href") ?? "";
+      return {
+        candidate,
+        exactText: queryText.length > 0 && text === queryText,
+        exactHref: queryHref.length > 0 && (href === queryHref || candidate instanceof HTMLAnchorElement && candidate.href === queryHref),
+        onScreen: isOnScreen(candidate),
+        clickable: isClickable(candidate),
+        textLength: text.length,
+        depth: getNodeDepth(candidate)
+      };
+    }).sort((a, b) => {
+      if (a.exactHref !== b.exactHref) {
+        return a.exactHref ? -1 : 1;
+      }
+      if (a.exactText !== b.exactText) {
+        return a.exactText ? -1 : 1;
+      }
+      if (a.onScreen !== b.onScreen) {
+        return a.onScreen ? -1 : 1;
+      }
+      if (a.clickable !== b.clickable) {
+        return a.clickable ? -1 : 1;
+      }
+      if (a.textLength !== b.textLength) {
+        return a.textLength - b.textLength;
+      }
+      return b.depth - a.depth;
+    });
+    return scored[0]?.candidate ?? candidates[0] ?? null;
+  };
+  var findByText = (text) => {
+    const query = normalizeText(text);
+    if (query.length === 0) {
+      return null;
+    }
+    const candidateMap = /* @__PURE__ */ new Map();
+    const tree = document.createTreeWalker(
+      document.body,
+      NodeFilter.SHOW_ELEMENT
+    );
+    let node = tree.nextNode();
+    while (node) {
+      const element = node;
+      if (!isVisible(element)) {
+        node = tree.nextNode();
+        continue;
+      }
+      const elementText = getRenderedText(element);
+      if (!elementText.includes(query)) {
+        node = tree.nextNode();
+        continue;
+      }
+      let preferredTarget = element;
+      let current = element;
+      while (current) {
+        if (current !== element && isVisible(current) && isClickable(current) && getRenderedText(current).includes(query)) {
+          preferredTarget = current;
+          break;
+        }
+        current = current.parentElement;
+      }
+      const preferredText = getRenderedText(preferredTarget);
+      const currentBest = candidateMap.get(preferredTarget);
+      const nextScore = {
+        exact: preferredText === query || elementText === query,
+        onScreen: isOnScreen(preferredTarget),
+        clickable: isClickable(preferredTarget),
+        textLength: preferredText.length || elementText.length,
+        depth: getNodeDepth(preferredTarget)
+      };
+      if (!currentBest || Number(nextScore.exact) > Number(currentBest.exact) || nextScore.exact === currentBest.exact && Number(nextScore.onScreen) > Number(currentBest.onScreen) || nextScore.exact === currentBest.exact && nextScore.onScreen === currentBest.onScreen && Number(nextScore.clickable) > Number(currentBest.clickable) || nextScore.exact === currentBest.exact && nextScore.onScreen === currentBest.onScreen && nextScore.clickable === currentBest.clickable && nextScore.textLength < currentBest.textLength || nextScore.exact === currentBest.exact && nextScore.onScreen === currentBest.onScreen && nextScore.clickable === currentBest.clickable && nextScore.textLength === currentBest.textLength && nextScore.depth > currentBest.depth) {
+        candidateMap.set(preferredTarget, nextScore);
+      }
+      node = tree.nextNode();
+    }
+    const candidates = Array.from(candidateMap.entries()).sort((a, b) => {
+      const [, left] = a;
+      const [, right] = b;
+      if (left.exact !== right.exact) {
+        return left.exact ? -1 : 1;
+      }
+      if (left.onScreen !== right.onScreen) {
+        return left.onScreen ? -1 : 1;
+      }
+      if (left.clickable !== right.clickable) {
+        return left.clickable ? -1 : 1;
+      }
+      if (left.textLength !== right.textLength) {
+        return left.textLength - right.textLength;
+      }
+      return right.depth - left.depth;
+    });
+    return candidates[0]?.[0] ?? null;
+  };
+
+  // packages/extension/src/snapshot-ref-recovery.ts
+  var SNAPSHOT_REF_REGISTRY_ID = "__bb_snapshot_ref_registry__";
+  var readSnapshotRefRegistry = () => {
+    const registry = /* @__PURE__ */ new Map();
+    const el = document.getElementById(SNAPSHOT_REF_REGISTRY_ID);
+    const raw = el?.textContent;
+    if (!raw) {
+      return registry;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) {
+        return registry;
+      }
+      for (const entry of parsed) {
+        if (!entry || typeof entry !== "object") {
+          continue;
+        }
+        const ref = entry.ref;
+        if (typeof ref !== "string" || ref.length === 0) {
+          continue;
+        }
+        registry.set(ref, {
+          role: typeof entry.role === "string" ? entry.role ?? void 0 : void 0,
+          name: typeof entry.name === "string" ? entry.name ?? void 0 : void 0,
+          url: typeof entry.url === "string" ? entry.url ?? void 0 : void 0
+        });
+      }
+    } catch {
+      return /* @__PURE__ */ new Map();
+    }
+    return registry;
+  };
+  var recoverElementBySnapshotRef = (ref, options) => {
+    const metadata = readSnapshotRefRegistry().get(ref);
+    if (!metadata) {
+      return null;
+    }
+    if (typeof metadata.url === "string" && metadata.url.length > 0) {
+      const linkCandidates = Array.from(
+        document.querySelectorAll('a[href],[role="link"]')
+      );
+      const bestLink = scoreCandidates(linkCandidates, {
+        exactHref: metadata.url,
+        exactText: metadata.name
+      });
+      if (bestLink) {
+        return bestLink;
+      }
+    }
+    if (typeof metadata.role === "string" && metadata.role.length > 0) {
+      const roleMatch = options.findByRole({
+        role: {
+          name: metadata.role,
+          ...metadata.name ? { value: metadata.name } : {}
+        }
+      });
+      if (roleMatch) {
+        return roleMatch;
+      }
+    }
+    if (typeof metadata.name === "string" && metadata.name.length > 0) {
+      return findByText(metadata.name);
+    }
+    return null;
+  };
+
   // packages/extension/src/content.ts
   var AGENT_TAB_BRANDING_ACTION = "drive.agent_tab_branding";
   var AGENT_TAB_FAVICON_MARKER_ATTR = "data-bb-agent-favicon";
@@ -47,38 +445,6 @@
       }
       return value.replace(/[\\"']/g, "\\$&");
     };
-    const isVisible = (element) => {
-      if (!(element instanceof HTMLElement)) {
-        return false;
-      }
-      const style = window.getComputedStyle(element);
-      if (style.visibility === "hidden" || style.display === "none") {
-        return false;
-      }
-      const rect = element.getBoundingClientRect();
-      if (rect.width === 0 && rect.height === 0) {
-        return false;
-      }
-      if (element.offsetWidth === 0 && element.offsetHeight === 0 && element.getClientRects().length === 0) {
-        return false;
-      }
-      let current = element;
-      while (current) {
-        const style2 = window.getComputedStyle(current);
-        if (style2.display === "none") {
-          return false;
-        }
-        if (style2.visibility === "hidden" || style2.visibility === "collapse") {
-          return false;
-        }
-        const opacity = Number.parseFloat(style2.opacity ?? "1");
-        if (Number.isFinite(opacity) && opacity <= 0) {
-          return false;
-        }
-        current = current.parentElement;
-      }
-      return true;
-    };
     const buildUrlMatcher = (pattern) => {
       const maxLength = 256;
       if (pattern.length > maxLength) {
@@ -108,20 +474,17 @@
         return { ok: true, matcher: (url) => url.includes(pattern) };
       }
     };
-    const findByText = (text) => {
-      const tree = document.createTreeWalker(
-        document.body,
-        NodeFilter.SHOW_ELEMENT
-      );
-      let node = tree.nextNode();
-      while (node) {
-        const element = node;
-        if (element.textContent && element.textContent.includes(text)) {
-          return element;
-        }
-        node = tree.nextNode();
-      }
-      return null;
+    const getRoleCandidates = (roleName) => {
+      const selectorMap = {
+        button: 'button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],summary',
+        link: 'a[href],[role="link"]',
+        checkbox: 'input[type="checkbox"],[role="checkbox"]',
+        radio: 'input[type="radio"],[role="radio"]',
+        textbox: 'textarea,input:not([type]),input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="password"],[role="textbox"]',
+        combobox: 'select,input[list],[role="combobox"]'
+      };
+      const selector = selectorMap[roleName] ?? `[role="${escapeSelector(roleName)}"]`;
+      return Array.from(document.querySelectorAll(selector)).filter(isVisible);
     };
     const findByRole = (locator) => {
       const role = locator.role;
@@ -133,17 +496,23 @@
       if (typeof roleName !== "string" || roleName.length === 0) {
         return null;
       }
-      const candidates = Array.from(
-        document.querySelectorAll(`[role="${escapeSelector(roleName)}"]`)
-      );
+      const candidates = getRoleCandidates(roleName);
       if (typeof roleValue !== "string" || roleValue.length === 0) {
         return candidates[0] ?? null;
       }
-      return candidates.find((candidate) => {
-        const label = candidate.getAttribute("aria-label") ?? "";
-        const text = candidate.textContent ?? "";
-        return label.includes(roleValue) || text.includes(roleValue);
-      }) ?? null;
+      const query = normalizeText(roleValue);
+      const matching = candidates.filter(
+        (candidate) => getRoleAccessibleName(candidate).includes(query)
+      );
+      if (matching.length === 0) {
+        return null;
+      }
+      const exactMatches = matching.filter(
+        (candidate) => getRoleAccessibleName(candidate) === query
+      );
+      return scoreCandidates(exactMatches.length > 0 ? exactMatches : matching, {
+        exactText: query
+      });
     };
     const resolveLocator = (locator) => {
       if (!locator) {
@@ -157,18 +526,26 @@
         if (found) {
           return found;
         }
+        const fallback = recoverElementBySnapshotRef(normalized, {
+          findByRole
+        });
+        if (fallback) {
+          return fallback;
+        }
       }
       const testid = locator.testid;
       if (typeof testid === "string" && testid.length > 0) {
         const selector = `[data-testid="${escapeSelector(testid)}"]`;
-        const found = document.querySelector(selector);
+        const found = scoreCandidates(
+          Array.from(document.querySelectorAll(selector))
+        );
         if (found) {
           return found;
         }
       }
       const css = locator.css;
       if (typeof css === "string" && css.length > 0) {
-        const found = document.querySelector(css);
+        const found = scoreCandidates(Array.from(document.querySelectorAll(css)));
         if (found) {
           return found;
         }
@@ -401,12 +778,29 @@
           if (!target) {
             return buildError("LOCATOR_NOT_FOUND", "Failed to resolve locator.");
           }
-          const rect = target.getBoundingClientRect();
+          const targetState = readPopupTriggerState(target);
+          const point = getHittablePoint(target, {
+            preferDirectHit: targetState !== null
+          });
           return ok({
-            x: rect.left + rect.width / 2,
-            y: rect.top + rect.height / 2
+            x: point.x,
+            y: point.y,
+            ...targetState ? { target_state: targetState } : {}
           });
         }
+        case "drive.focus_locator": {
+          const { locator } = parseParams();
+          const target = resolveLocator(locator);
+          if (!target || !(target instanceof HTMLElement)) {
+            return buildError("LOCATOR_NOT_FOUND", "Failed to resolve locator.");
+          }
+          try {
+            target.focus({ preventScroll: true });
+          } catch {
+            target.focus();
+          }
+          return ok();
+        }
         case "drive.snapshot_html": {
           const html = document.documentElement?.outerHTML ?? "";
           return ok({ format: "html", snapshot: html });
@@ -467,22 +861,20 @@
             return buildError("LOCATOR_NOT_FOUND", "Failed to resolve locator.");
           }
           const count = typeof click_count === "number" && Number.isFinite(click_count) ? Math.max(1, Math.floor(click_count)) : 1;
-          window.setTimeout(() => {
-            try {
-              if (target instanceof HTMLElement) {
-                try {
-                  target.focus({ preventScroll: true });
-                } catch {
-                  target.focus();
-                }
-              }
-              for (let i = 0; i < count; i += 1) {
-                target.click();
-              }
-            } catch {
-            }
-          }, 0);
-          return ok();
+          const strategy = selectClickStrategy(target);
+          if (strategy.kind === "popup_trigger") {
+            return await executePopupTriggerClick({
+              target,
+              beforeState: strategy.state,
+              clickCount: count,
+              locationBefore: window.location.href,
+              sleep
+            });
+          }
+          return executeGenericClick({
+            target,
+            clickCount: count
+          });
         }
         case "drive.hover": {
           const { locator, delay_ms } = parseParams();
@@ -905,7 +1297,9 @@
           }
           const checkCondition = () => {
             if (kind === "text_present") {
-              return (document.body?.innerText ?? "").includes(value);
+              return getRenderedText(document.body).includes(
+                normalizeText(value)
+              );
             }
             if (kind === "url_matches") {
               return urlMatcher ? urlMatcher.matcher(window.location.href) : window.location.href.includes(value);