@skrillex1224/playwright-toolkit 2.1.228 → 2.1.230

package/dist/index.cjs

@@ -580,6 +580,21 @@ var expandScrollableContent = async (page, options = {}) => {
       const scrollableOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
       return scrollableOverflow.has(overflowY) || scrollableOverflow.has(overflow);
     };
+    const measureNeededHeight = (el) => {
+      if (!el) return 0;
+      const scrollHeight = Math.ceil(el.scrollHeight || 0);
+      if (scrollHeight <= 0) return 0;
+      if (isDocumentElement(el)) {
+        return scrollHeight;
+      }
+      const rect = el.getBoundingClientRect();
+      if (!rect || rect.width <= 0 || rect.height <= 0) {
+        return 0;
+      }
+      const documentTop = Math.max(0, Math.ceil(rect.top + (window.scrollY || window.pageYOffset || 0)));
+      return documentTop + scrollHeight;
+    };
+    const scrollableElements = [];
     candidates.forEach((el) => {
       const style = window.getComputedStyle(el);
       const rect = el.getBoundingClientRect();
@@ -589,13 +604,14 @@ var expandScrollableContent = async (page, options = {}) => {
       if (!isScrollableY(el, style)) {
         return;
       }
-      const scrollHeight = Math.ceil(el.scrollHeight || 0);
-      if (scrollHeight <= 0) {
+      const neededHeight = measureNeededHeight(el);
+      if (neededHeight <= 0) {
         return;
       }
-      if (scrollHeight > maxHeight) {
-        maxHeight = scrollHeight;
+      if (neededHeight > maxHeight) {
+        maxHeight = neededHeight;
       }
+      scrollableElements.push(el);
       if (isDocumentElement(el)) {
         return;
       }
@@ -611,6 +627,7 @@ var expandScrollableContent = async (page, options = {}) => {
         el.classList.add(className);
       }
       if (forceScrollableHeight) {
+        const scrollHeight = Math.ceil(el.scrollHeight || 0);
         el.style.setProperty("overflow", "visible", "important");
         el.style.setProperty("height", `${scrollHeight}px`, "important");
         el.style.setProperty("min-height", `${scrollHeight}px`, "important");
@@ -621,10 +638,16 @@ var expandScrollableContent = async (page, options = {}) => {
       el.style.height = "auto";
       el.style.maxHeight = "none";
     });
+    scrollableElements.forEach((el) => {
+      const neededHeight = measureNeededHeight(el);
+      if (neededHeight > maxHeight) {
+        maxHeight = neededHeight;
+      }
+    });
     return maxHeight;
   }, {
     className: EXPANDED_SCROLLABLE_CLASS,
-    forceScrollableHeight: Boolean(options.forceScrollableHeight),
+    forceScrollableHeight: options.forceScrollableHeight !== false,
     visibleOnly: options.visibleOnly !== false
   });
 };
@@ -6301,18 +6324,15 @@ var DEFAULT_STRIP_PROMPT_MAX_LINES = 3;
 var DEFAULT_STRIP_CONTENT_SAFE_PADDING_X = 12;
 var DEFAULT_STRIP_TEXT_WIDTH_SAFETY = 10;
 var DEFAULT_BROWSER_COMPOSITOR_VIEWPORT_HEIGHT = 1200;
-var MOBILE_STRIP_HEIGHT = 104;
+var MOBILE_STRIP_HEIGHT = 78;
 var MOBILE_STRIP_PADDING_X = 14;
 var MOBILE_STRIP_PADDING_Y = 13;
 var MOBILE_STRIP_ROW_HEIGHT = 22;
-var MOBILE_STRIP_ROW_GAP = 7;
+var MOBILE_STRIP_ROW_GAP = 8;
 var MOBILE_STRIP_LABEL_FONT_SIZE = 12.5;
 var MOBILE_STRIP_VALUE_FONT_SIZE = 13.5;
-var MOBILE_STRIP_LABEL_WIDTH = 45;
-var MOBILE_STRIP_PROMPT_LABEL_WIDTH = 60;
-var MOBILE_STRIP_LOC_LABEL_WIDTH = 30;
-var MOBILE_STRIP_IP_LABEL_WIDTH = 22;
-var MOBILE_STRIP_META_GAP = 12;
+var MOBILE_STRIP_META_GAP = 16;
+var MOBILE_STRIP_VALUE_WIDTH_SAFETY = 10;
 var WEAK_LOCATION_VALUES = /* @__PURE__ */ new Set(["cn", "\u4E2D\u56FD"]);
 var LOCATION_NETWORK_SUFFIX_PATTERNS = [
   /(?:中国)?移动$/i,
@@ -6709,9 +6729,10 @@ var readImageInfo = (buffer) => {
     height: 0
   };
 };
-var buildWatermarkifyRenderHtml = ({ imageSrc, overlaySvg, width, height }) => {
+var buildWatermarkifyRenderHtml = ({ imageSrc, overlaySvg, width, height, imageHeight }) => {
   const safeWidth = Math.max(1, Number(width) || 1);
   const safeHeight = Math.max(1, Number(height) || 1);
+  const safeImageHeight = Math.max(1, Number(imageHeight || height) || 1);
   return `
         <!doctype html>
         <html lang="zh-CN">
@@ -6740,10 +6761,11 @@ var buildWatermarkifyRenderHtml = ({ imageSrc, overlaySvg, width, height }) => {
 
                 #pk-base-image {
                     position: absolute;
-                    inset: 0;
+                    top: 0;
+                    left: 0;
                     display: block;
                     width: ${safeWidth}px;
-                    height: ${safeHeight}px;
+                    height: ${safeImageHeight}px;
                 }
 
                 #pk-overlay {
@@ -6777,7 +6799,8 @@ var composeScreenshotBufferWithBrowser = async (page, buffer, overlaySvg, imageI
   try {
     const renderPage = renderScope.page;
     const safeWidth = Math.max(1, Number(imageInfo.width) || 1);
-    const safeHeight = Math.max(1, Number(imageInfo.height) || 1);
+    const safeImageHeight = Math.max(1, Number(imageInfo.imageHeight || imageInfo.height) || 1);
+    const safeHeight = Math.max(safeImageHeight, Number(imageInfo.height) || safeImageHeight);
     const viewportHeight = Math.max(
       1,
       Math.min(safeHeight, DEFAULT_BROWSER_COMPOSITOR_VIEWPORT_HEIGHT)
@@ -6791,7 +6814,8 @@ var composeScreenshotBufferWithBrowser = async (page, buffer, overlaySvg, imageI
       imageSrc: `data:${imageInfo.mimeType || "image/png"};base64,${buffer.toString("base64")}`,
       overlaySvg,
       width: safeWidth,
-      height: safeHeight
+      height: safeHeight,
+      imageHeight: safeImageHeight
     }), {
       waitUntil: "load"
     });
@@ -7438,15 +7462,15 @@ var renderMobileStripText = ({
   label,
   value,
   labelX,
+  valueX,
   y,
   valueWidth,
-  labelWidth = MOBILE_STRIP_LABEL_WIDTH,
   fontFamily
 }) => {
   const safeLabel = normalizeWhitespace(label) || "-";
   const safeValue = fitTextWithEllipsis(
     Array.from(normalizeWhitespace(value) || "-"),
-    Math.max(18, valueWidth),
+    Math.max(18, valueWidth - MOBILE_STRIP_VALUE_WIDTH_SAFETY),
     MOBILE_STRIP_VALUE_FONT_SIZE
   );
   return `
@@ -7461,7 +7485,7 @@ var renderMobileStripText = ({
             dominant-baseline="middle"
         >${escapeXml(safeLabel)}</text>
         <text
-            x="${labelX + labelWidth}"
+            x="${valueX}"
             y="${y}"
             fill="#111111"
             font-family="${fontFamily}"
@@ -7471,9 +7495,9 @@ var renderMobileStripText = ({
         >${escapeXml(safeValue)}</text>
     `;
 };
-var renderMobileStrip = ({ meta, width, height, fontFamily }) => {
+var renderMobileStrip = ({ meta, width, baseHeight, fontFamily }) => {
   const stripHeight = MOBILE_STRIP_HEIGHT;
-  const stripY = height - stripHeight;
+  const stripY = baseHeight;
   const contentX = MOBILE_STRIP_PADDING_X;
   const contentWidth = Math.max(1, width - MOBILE_STRIP_PADDING_X * 2);
   const prompt = findStripSegment(meta.stripSegments, "prompt");
@@ -7482,63 +7506,70 @@ var renderMobileStrip = ({ meta, width, height, fontFamily }) => {
   const ip = findStripSegment(meta.stripSegments, "ip");
   const row1Y = stripY + MOBILE_STRIP_PADDING_Y + MOBILE_STRIP_ROW_HEIGHT / 2;
   const row2Y = row1Y + MOBILE_STRIP_ROW_HEIGHT + MOBILE_STRIP_ROW_GAP;
-  const row3Y = row2Y + MOBILE_STRIP_ROW_HEIGHT + MOBILE_STRIP_ROW_GAP;
-  const promptValueWidth = contentWidth - MOBILE_STRIP_PROMPT_LABEL_WIDTH;
-  const locValueX = contentX + MOBILE_STRIP_LOC_LABEL_WIDTH;
-  const ipLabelX = Math.min(
-    width - MOBILE_STRIP_PADDING_X - MOBILE_STRIP_IP_LABEL_WIDTH - 70,
+  const rightColumnX = Math.min(
+    width - MOBILE_STRIP_PADDING_X - 112,
     Math.max(
-      locValueX + 80 + MOBILE_STRIP_META_GAP,
-      contentX + Math.round(contentWidth * 0.52)
+      contentX + 200,
+      contentX + Math.round(contentWidth * 0.62)
     )
   );
+  const leftValueX = contentX + 48;
+  const rightValueX = rightColumnX + 28;
+  const promptValueWidth = Math.max(
+    28,
+    rightColumnX - leftValueX - MOBILE_STRIP_META_GAP
+  );
+  const timeValueWidth = Math.max(
+    28,
+    rightColumnX - leftValueX - MOBILE_STRIP_META_GAP
+  );
   const locValueWidth = Math.max(
     28,
-    ipLabelX - locValueX - MOBILE_STRIP_META_GAP
+    width - MOBILE_STRIP_PADDING_X - rightValueX
   );
   const ipValueWidth = Math.max(
     28,
-    width - MOBILE_STRIP_PADDING_X - (ipLabelX + MOBILE_STRIP_IP_LABEL_WIDTH)
+    width - MOBILE_STRIP_PADDING_X - rightValueX
   );
   return `
         <g id="strip">
             <rect x="0" y="${stripY}" width="${width}" height="${stripHeight}" fill="#ffffff" fill-opacity="0.985" />
             <rect x="0" y="${stripY}" width="${width}" height="1" fill="#111111" fill-opacity="0.10" />
-            <rect x="${contentX}" y="${stripY}" width="${Math.max(96, Math.round(width * 0.36))}" height="2" fill="url(#stripAccent)" />
+            <rect x="${contentX}" y="${stripY}" width="${Math.max(96, Math.round(width * 0.34))}" height="2" fill="url(#stripAccent)" />
             ${renderMobileStripText({
     label: "Prompt",
     value: prompt.rawValue || prompt.value || "-",
     labelX: contentX,
+    valueX: leftValueX,
     y: row1Y,
     valueWidth: promptValueWidth,
-    labelWidth: MOBILE_STRIP_PROMPT_LABEL_WIDTH,
     fontFamily
   })}
             ${renderMobileStripText({
-    label: "Time",
-    value: time.rawValue || time.value || "-",
-    labelX: contentX,
-    y: row2Y,
-    valueWidth: promptValueWidth,
-    labelWidth: MOBILE_STRIP_LABEL_WIDTH,
+    label: "Loc",
+    value: location.rawValue || location.value || "-",
+    labelX: rightColumnX,
+    valueX: rightValueX,
+    y: row1Y,
+    valueWidth: locValueWidth,
     fontFamily
   })}
             ${renderMobileStripText({
-    label: "Loc",
-    value: location.rawValue || location.value || "-",
+    label: "Time",
+    value: time.rawValue || time.value || "-",
     labelX: contentX,
-    y: row3Y,
-    valueWidth: locValueWidth,
-    labelWidth: MOBILE_STRIP_LOC_LABEL_WIDTH,
+    valueX: leftValueX,
+    y: row2Y,
+    valueWidth: timeValueWidth,
     fontFamily
   })}
             ${renderMobileStripText({
     label: "IP",
     value: ip.rawValue || ip.value || "-",
-    labelX: ipLabelX,
-    y: row3Y,
+    labelX: rightColumnX,
+    valueX: rightValueX,
+    y: row2Y,
     valueWidth: ipValueWidth,
-    labelWidth: MOBILE_STRIP_IP_LABEL_WIDTH,
     fontFamily
   })}
         </g>
@@ -7551,7 +7582,8 @@ var buildWatermarkifySvg = (meta, imageWidth, imageHeight) => {
     return "";
   }
   const width = Math.max(1, Number(imageWidth) || 1);
-  const height = Math.max(1, Number(imageHeight) || 1);
+  const baseHeight = Math.max(1, Number(imageHeight) || 1);
+  const canvasHeight = normalizeDevice(meta.device) === Device.Mobile && hasStrip ? baseHeight + MOBILE_STRIP_HEIGHT : baseHeight;
   const fontFamily = escapeXml(buildFontFamily());
   const parts = [];
   if (hasWatermark) {
@@ -7564,7 +7596,7 @@ var buildWatermarkifySvg = (meta, imageWidth, imageHeight) => {
     const startX = -Math.round(cellWidth * 0.16);
     const startY = -Math.round(cellHeight * 0.12);
     const cols = Math.ceil((width + cellWidth * 1.1) / cellWidth) + 1;
-    const rows = Math.ceil((height + cellHeight * 0.9) / cellHeight) + 1;
+    const rows = Math.ceil((baseHeight + cellHeight * 0.9) / cellHeight) + 1;
     const stamps = [];
     for (let row = 0; row < rows; row += 1) {
       for (let col = 0; col < cols; col += 1) {
@@ -7596,11 +7628,11 @@ var buildWatermarkifySvg = (meta, imageWidth, imageHeight) => {
       parts.push(renderMobileStrip({
         meta,
         width,
-        height,
+        baseHeight,
         fontFamily
       }));
       return `
-                <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${canvasHeight}" viewBox="0 0 ${width} ${canvasHeight}">
                     <defs>
                         <linearGradient id="stripAccent" x1="0%" y1="0%" x2="100%" y2="0%">
                             <stop offset="0%" stop-color="#111111" stop-opacity="0.98" />
@@ -7619,7 +7651,7 @@ var buildWatermarkifySvg = (meta, imageWidth, imageHeight) => {
     const contentWidth = width - contentStartX - DEFAULT_STRIP_PADDING_RIGHT;
     const stripLayout = buildStripLayout(meta.stripSegments, contentWidth);
     const stripHeight = stripLayout.height;
-    const stripY = height - stripHeight;
+    const stripY = baseHeight - stripHeight;
     const logoY = Number((stripY + (stripHeight - logoSize) / 2).toFixed(2));
     let stripContentSvg = "";
     const centerY = stripY + stripHeight / 2 + 1;
@@ -7708,7 +7740,7 @@ var buildWatermarkifySvg = (meta, imageWidth, imageHeight) => {
         `);
   }
   return `
-        <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${canvasHeight}" viewBox="0 0 ${width} ${canvasHeight}">
             <defs>
                 <linearGradient id="stripAccent" x1="0%" y1="0%" x2="100%" y2="0%">
                     <stop offset="0%" stop-color="#111111" stop-opacity="0.98" />
@@ -7732,11 +7764,17 @@ var watermarkifyScreenshotBuffer = async (buffer, meta, page = null) => {
     logger13.warning("watermarkify \u8DF3\u8FC7: \u65E0\u6CD5\u89E3\u6790\u622A\u56FE\u5C3A\u5BF8\u6216\u683C\u5F0F");
     return buffer;
   }
+  const isMobileStrip = normalizeDevice(meta.device) === Device.Mobile && hasStrip;
+  const outputImageInfo = isMobileStrip ? {
+    ...imageInfo,
+    imageHeight: imageInfo.height,
+    height: imageInfo.height + MOBILE_STRIP_HEIGHT
+  } : imageInfo;
   const overlaySvg = buildWatermarkifySvg(meta, imageInfo.width, imageInfo.height);
   if (!overlaySvg) {
     return buffer;
   }
-  return await composeScreenshotBufferWithBrowser(page, buffer, overlaySvg, imageInfo);
+  return await composeScreenshotBufferWithBrowser(page, buffer, overlaySvg, outputImageInfo);
 };
 
 // src/internals/compression.js