@ralphralphai/playwright 2.5.0 → 2.7.0

package/dist/{upload-D40MqSQa.cjs → upload-_UWss__c.cjs}

@@ -70,7 +70,7 @@ function snapshot(value) {
 }
 //#endregion
 //#region package.json
-var version = "2.5.0";
+var version = "2.7.0";
 //#endregion
 //#region src/actions.ts
 const BINDING = "__ralphAction";
@@ -551,30 +551,57 @@ async function waitForAnimations(page, timeoutMs) {
 //#region src/image_responses.ts
 const IMAGE_HASH_TIMEOUT_MS = 3e4;
 const hashesByPage = /* @__PURE__ */ new WeakMap();
+/**
+* The latest hash per url across all of a context's pages. The HTTP cache is
+* shared by the context, so this is the copy a 304 tells any of them to reuse.
+*/
+const hashesByContext = /* @__PURE__ */ new WeakMap();
 function sha256(data) {
 	return (0, node_crypto.createHash)("sha256").update(data).digest("hex");
 }
 /**
-* Hashes every image the page loads, as it loads, so a snapshot hashes the
-* bytes the page showed instead of fetching them a second time. A second fetch
-* of a page's images comes as a burst, which hosts such as
+* Hashes every image the context's pages load, as they load, so a snapshot
+* hashes the bytes the page showed instead of fetching them a second time. A
+* second fetch of a page's images comes as a burst, which hosts such as
 * upload.wikimedia.org answer with 429 for a share of them, and the image then
 * reads as replaced. Only the hash is kept, not the body. Entries persist
 * across navigations until another request for the same image replaces them
 * or the page closes.
+*
+* Watched on the context rather than each page: Playwright reports a popup
+* only once its first navigation has committed, and the images that document
+* requests early are gone by the time a listener can be added to the page.
 */
-function watchImageResponses(page) {
-	if (hashesByPage.has(page)) return;
-	const hashes = /* @__PURE__ */ new Map();
-	hashesByPage.set(page, hashes);
-	page.on("request", (request) => {
-		if (request.resourceType() !== "image") return;
+function watchImageResponses(context) {
+	if (hashesByContext.has(context)) return;
+	const latest = /* @__PURE__ */ new Map();
+	hashesByContext.set(context, latest);
+	context.on("request", (request) => {
+		if (request.resourceType() !== "image" || request.serviceWorker()) return;
+		const hashes = pageHashes(request.frame().page());
+		const cached = latest.get(request.url());
 		const hash = request.response().then(async (response) => {
+			if (response?.status() === 304) return cached;
 			return response?.ok() ? sha256(await response.body()) : void 0;
 		}).catch(() => void 0);
-		for (let redirected = request; redirected !== null; redirected = redirected.redirectedFrom()) hashes.set(redirected.url(), hash);
+		for (const url of redirectChain(request)) {
+			hashes.set(url, hash);
+			latest.set(url, hash);
+		}
 	});
+}
+function pageHashes(page) {
+	const existing = hashesByPage.get(page);
+	if (existing) return existing;
+	const hashes = /* @__PURE__ */ new Map();
+	hashesByPage.set(page, hashes);
 	page.once("close", () => hashesByPage.delete(page));
+	return hashes;
+}
+function redirectChain(request) {
+	const urls = [];
+	for (let redirected = request; redirected !== null; redirected = redirected.redirectedFrom()) urls.push(redirected.url());
+	return urls;
 }
 /**
 * The hash from the latest observed request for this URL, across navigations.
@@ -654,8 +681,10 @@ async function captureAriaSnapshot(page, { viewport, scroll }) {
 		boxes: true,
 		depth: MAX_ARIA_DEPTH
 	});
-	const visible = (await Promise.all(snapshot.map((node) => toDocument(page, node, scroll)))).flatMap((node) => {
-		const kept = keepShown(node, viewport.width);
+	const placed = await Promise.all(snapshot.map((node) => toDocument(page, node, scroll)));
+	const clips = await readClips(page, placed);
+	const visible = placed.flatMap((node) => {
+		const kept = keepShown(node, viewport.width, clips, void 0);
 		return kept === void 0 ? [] : [kept];
 	});
 	const described = await Promise.all(visible.map((node) => describe(page, node, {}, false)));
@@ -719,12 +748,129 @@ function isReachable(box, viewportWidth) {
 function isShown(node, viewportWidth) {
 	return node.ref !== void 0 && isReachable(node.box, viewportWidth);
 }
-function keepShown(node, viewportWidth) {
+function edgesOf(box) {
+	return {
+		left: box.x,
+		top: box.y,
+		right: box.x + box.width,
+		bottom: box.y + box.height
+	};
+}
+function intersect(a, b) {
+	if (a === void 0) return b;
+	return {
+		left: Math.max(a.left, b.left),
+		top: Math.max(a.top, b.top),
+		right: Math.min(a.right, b.right),
+		bottom: Math.min(a.bottom, b.bottom)
+	};
+}
+const ROUNDING_SLACK = 1;
+function sticksOut(inner, outer) {
+	return inner.x < outer.x - ROUNDING_SLACK || inner.y < outer.y - ROUNDING_SLACK || inner.x + inner.width > outer.x + outer.width + ROUNDING_SLACK || inner.y + inner.height > outer.y + outer.height + ROUNDING_SLACK;
+}
+function overlaps(a, b) {
+	return Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x) > ROUNDING_SLACK && Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y) > ROUNDING_SLACK;
+}
+function isOutside(box, clip) {
+	return box.x >= clip.right || box.x + box.width <= clip.left || box.y >= clip.bottom || box.y + box.height <= clip.top;
+}
+/**
+* The area each element is clipped to by its ancestors' `overflow`, in
+* document space, by ref.
+*
+* The boxes are not clipped (the rows of a 448px scroll box run thousands of
+* pixels down the page), and reading an element's ancestors is a page round
+* trip. Only an element that may overflow one is read: a root, one sticking
+* out of its parent, or one running into its next sibling. The clipping
+* ancestor itself is often missing from the tree, since Playwright unwraps a
+* nameless wrapper with one child. Every other element takes its parent's
+* clip.
+*/
+async function readClips(page, nodes) {
+	const candidates = [];
+	const visit = (node, parent, next, frame) => {
+		if (node.box !== void 0 && (parent === void 0 || sticksOut(node.box, parent) || next?.box !== void 0 && overlaps(node.box, next.box))) candidates.push({
+			node,
+			frame
+		});
+		const childFrame = node.role === "iframe" && node.box !== void 0 ? intersect(frame, edgesOf(node.box)) : frame;
+		const elements = (node.children ?? []).filter((child) => {
+			return typeof child !== "string";
+		});
+		elements.forEach((child, index) => {
+			visit(child, node.box, elements[index + 1], childFrame);
+		});
+	};
+	nodes.forEach((node, index) => {
+		visit(node, void 0, nodes[index + 1], void 0);
+	});
+	const clips = await Promise.all(candidates.map(async ({ node, frame }) => {
+		const clip = await readClip(page, node);
+		return clip === void 0 || node.ref === void 0 ? [] : [[node.ref, intersect(frame, clip)]];
+	}));
+	return new Map(clips.flat());
+}
+async function readClip(page, node) {
+	if (node.box === void 0 || node.ref === void 0) return;
+	let read;
+	try {
+		read = await page.locator(`aria-ref=${node.ref}`).evaluate((element) => {
+			const clip = {
+				left: -Infinity,
+				top: -Infinity,
+				right: Infinity,
+				bottom: Infinity
+			};
+			let position = getComputedStyle(element).position;
+			for (let ancestor = element.parentElement; ancestor !== null && ancestor !== document.body && ancestor !== document.documentElement; ancestor = ancestor.parentElement) {
+				if (position === "fixed") break;
+				const style = getComputedStyle(ancestor);
+				if (position === "absolute" && style.position === "static" && style.transform === "none") continue;
+				position = style.position;
+				const clipsX = style.overflowX !== "visible";
+				const clipsY = style.overflowY !== "visible";
+				if (!clipsX && !clipsY || style.display === "inline") continue;
+				const rect = ancestor.getBoundingClientRect();
+				const left = rect.left + ancestor.clientLeft;
+				const top = rect.top + ancestor.clientTop;
+				if (clipsX) {
+					clip.left = Math.max(clip.left, left);
+					clip.right = Math.min(clip.right, left + ancestor.clientWidth);
+				}
+				if (clipsY) {
+					clip.top = Math.max(clip.top, top);
+					clip.bottom = Math.min(clip.bottom, top + ancestor.clientHeight);
+				}
+			}
+			const own = element.getBoundingClientRect();
+			return {
+				x: own.x,
+				y: own.y,
+				clip
+			};
+		}, void 0, { timeout: ELEMENT_LOOKUP_TIMEOUT_MS });
+	} catch {
+		return;
+	}
+	const dx = node.box.x - read.x;
+	const dy = node.box.y - read.y;
+	return {
+		left: read.clip.left + dx,
+		top: read.clip.top + dy,
+		right: read.clip.right + dx,
+		bottom: read.clip.bottom + dy
+	};
+}
+function keepShown(node, viewportWidth, clips, inherited) {
 	if (node.role === "iframe" && node.box !== void 0 && (node.box.width < MIN_IFRAME_SIZE || node.box.height < MIN_IFRAME_SIZE)) return;
+	const clip = (node.ref === void 0 ? void 0 : clips.get(node.ref)) ?? inherited;
+	if (clip !== void 0 && node.box !== void 0 && isOutside(node.box, clip)) return;
 	const shown = isShown(node, viewportWidth);
+	const childClip = node.role === "iframe" && node.box !== void 0 ? intersect(clip, edgesOf(node.box)) : clip;
 	const children = (node.children ?? []).flatMap((child) => {
 		if (typeof child === "string") return shown ? [child] : [];
-		const kept = keepShown(child, viewportWidth);
+		const kept = keepShown(child, viewportWidth, clips, childClip);
 		return kept === void 0 ? [] : [kept];
 	});
 	if (!shown && children.length === 0) return;
@@ -1305,6 +1451,7 @@ var Recorder = class {
 			freezer
 		});
 		this.actions.observe(context);
+		watchImageResponses(context);
 		context.on("page", onPage);
 		for (const page of context.pages()) onPage(page);
 		return ready;
@@ -1405,7 +1552,6 @@ var Recorder = class {
 			}
 		}).catch(() => void 0);
 		page.on("framenavigated", state.onNavigation);
-		watchImageResponses(page);
 		this.urlChanged(state);
 	}
 	urlChanged(state) {
@@ -2039,4 +2185,4 @@ Object.defineProperty(exports, "visitAllLinks", {
 	}
 });
 
-//# sourceMappingURL=upload-D40MqSQa.cjs.map
+//# sourceMappingURL=upload-_UWss__c.cjs.map