imgtune 0.1.0 → 0.3.0

package/dist/locate-join.js

@@ -18,8 +18,91 @@ export function isFlagged(record) {
     // A CSS background is not an <img>: the dev page's images cannot join it, so it is never located.
     if (record.kind === "css-background")
         return false;
+    // A poster is a video's image: no <img> of the dev page is its element, so it is never located (its evidence names the video).
+    if (record.poster === true)
+        return false;
     return record.fix.bytes.saved > 0 || record.fix.bytes.addedForSharpness > 0;
 }
+/** A video costs bytes per view, so a locate asks for it. Posters are image records and follow isFlagged. */
+export function isFlaggedVideo(record) {
+    return record.bytes.perView > 0;
+}
+/**
+ * Joins the flagged measured videos to the dev page's videos by URL (each side's URLs are keyed against its own page, see
+ * devVideosOf). A pair is made only when the URL is on exactly one measured video and exactly one dev video; a URL on
+ * several is not guessed at (the videos count as not joined). Videos have no element order to fall back on, so there is
+ * no second rule.
+ */
+export function joinVideos(records, devVideos, flagged) {
+    const measured = records.filter(flagged).map((record) => ({ record, key: joinKeyOfUrls([record.src], record.page) }));
+    const measuredCount = new Map();
+    for (const { key } of measured)
+        measuredCount.set(key, (measuredCount.get(key) ?? 0) + 1);
+    const devCount = new Map();
+    for (const dev of devVideos) {
+        const list = devCount.get(dev.pattern);
+        if (list)
+            list.push(dev);
+        else
+            devCount.set(dev.pattern, [dev]);
+    }
+    const pairs = new Map();
+    let notJoined = 0;
+    for (const { record, key } of measured) {
+        const devs = devCount.get(key) ?? [];
+        if (key !== "" && measuredCount.get(key) === 1 && devs.length === 1)
+            pairs.set(record, devs[0]);
+        else
+            notJoined++;
+    }
+    return { pairs, notJoined, devLeft: devVideos.length - pairs.size };
+}
+/** The videos of a dev page's viewport, keyed by URL against that page, with the source the dev build resolved for each. */
+export function devVideosOf(observation, pageUrl, resolved) {
+    return (observation.videos ?? []).map((video) => {
+        const source = resolved.get(video);
+        const dev = { index: video.index, pattern: joinKeyOfUrls([video.currentSrc], pageUrl), currentSrc: video.currentSrc, component: source?.component ?? [] };
+        if (source?.file !== undefined) {
+            dev.file = source.file;
+            dev.line = source.line;
+            dev.kind = source.check;
+            dev.via = source.via;
+            dev.ownerChain = source.ownerChain;
+        }
+        return dev;
+    });
+}
+/**
+ * The located videos: each paired record's locator takes the dev video's file:line and its source check, and its component.
+ * The record's id and bytes do not change: a locate only says where the element is in the source.
+ */
+export function applyLocateVideos(records, join) {
+    return records.map((record) => {
+        const dev = join.pairs.get(record);
+        if (dev === undefined)
+            return record;
+        const locator = { ...record.locator };
+        delete locator.file;
+        delete locator.line;
+        delete locator.kind;
+        delete locator.verified;
+        delete locator.via;
+        delete locator.ownerChain;
+        if (dev.file !== undefined && dev.line !== undefined) {
+            locator.file = dev.file;
+            locator.line = dev.line;
+            if (dev.via !== undefined)
+                locator.via = dev.via;
+            locator.kind = dev.kind ?? "unchecked";
+            locator.verified = locator.kind === "image";
+            if (dev.ownerChain?.length)
+                locator.ownerChain = dev.ownerChain;
+        }
+        if (dev.component.length > 0)
+            locator.component = dev.component;
+        return { ...record, locator };
+    });
+}
 /** A URL with the page's own origin taken out, so a built server and a dev server give the same pattern. */
 export function joinUrl(url, pageUrl) {
     let origin;
@@ -102,6 +185,9 @@ export function joinLocate(records, viewport, devImages, flagged) {
     const notMeasured = [];
     let noOrder = 0;
     for (const record of records) {
+        // A poster never joins an <img> (see isFlagged): skipped, so it can never take another element's file:line.
+        if (record.poster === true)
+            continue;
         const entry = record.perViewport.find((p) => p.viewport === viewport);
         if (!entry) {
             if (flagged(record))

package/dist/locate-only.js

@@ -5,7 +5,7 @@ import { mkdir } from "node:fs/promises";
 import { dirname, resolve } from "node:path";
 import { writeFileAtomic } from "./atomic.js";
 import { DEFAULT_VIEWPORTS } from "./config.js";
-import { applyLocate, devImagesOf, isFlagged, joinLocate, joinKeyOfImage, joinKeyOfRecord, readMeasuredScan, reasonCounts } from "./locate-join.js";
+import { applyLocate, applyLocateVideos, devImagesOf, devVideosOf, isFlagged, isFlaggedVideo, joinLocate, joinKeyOfImage, joinKeyOfRecord, joinVideos, readMeasuredScan, reasonCounts } from "./locate-join.js";
 import { observeLight, rootOf } from "./remote.js";
 import { parseAllowHosts, thirdPartyFromFlags } from "./third-party.js";
 import { unreadSourceNote } from "./source-root.js";
@@ -119,6 +119,7 @@ export async function locateCommand(argv, cwd, log) {
         ignoreRobots: args.ignoreRobots,
         wanted: (img, pageUrl) => flaggedPatterns.has(joinKeyOfImage(img, pageUrl)),
         thirdParty: args.thirdParty,
+        videos: true,
     });
     if (light.status !== "ok") {
         return { output: `locate: the dev page is ${light.status}${light.error ? `: ${safeText(light.error)}` : ""}\n`, exitCode: 1 };
@@ -127,6 +128,9 @@ export async function locateCommand(argv, cwd, log) {
     const devImages = devImagesOf(observation, args.url, light.resolved);
     const unread = await unreadSourceNote(devImages.flatMap((d) => (d.kind === "unread" && d.file !== undefined ? [d.file] : [])), cwd, root);
     const join = joinLocate(measured.images, viewport, devImages, (record) => flaggedSet.has(record));
+    // Videos are joined by URL (no element order): a flagged video (one that costs bytes per view) gets its dev file:line.
+    const videoJoin = joinVideos(measured.videos ?? [], devVideosOf(observation, args.url, light.resolvedVideos), isFlaggedVideo);
+    const flaggedVideos = (measured.videos ?? []).filter(isFlaggedVideo).length;
     const seconds = (Date.now() - started) / 1000;
     const summary = {
         url: args.url,
@@ -141,7 +145,12 @@ export async function locateCommand(argv, cwd, log) {
         noOrder: join.noOrder,
         reasons: reasonCounts(join),
     };
-    const located = { ...measured, locate: summary, images: applyLocate(measured.images, join, viewport) };
+    const located = {
+        ...measured,
+        locate: summary,
+        images: applyLocate(measured.images, join, viewport),
+        ...(measured.videos !== undefined ? { videos: applyLocateVideos(measured.videos, videoJoin) } : {}),
+    };
     const outPath = resolve(cwd, args.out ?? defaultLocateOut(args.from));
     if (outPath === resolve(cwd, args.from))
         throw new Error("--locate-out must not be the measured scan itself");
@@ -153,12 +162,14 @@ export async function locateCommand(argv, cwd, log) {
     ];
     for (const [code, count] of Object.entries(summary.reasons))
         lines.push(`  not located, ${count}: ${REASON_TEXT[code] ?? code}`);
+    if (flaggedVideos > 0)
+        lines.push(`flagged videos: ${flaggedVideos}; located: ${videoJoin.pairs.size}; not located: ${videoJoin.notJoined}`);
     if (summary.devLeft > 0)
         lines.push(`dev images of a flagged URL with no measured partner: ${summary.devLeft}`);
     if (summary.noOrder > 0)
         lines.push(`measured elements without an element order: ${summary.noOrder} (the scan is older: scan again)`);
     lines.push(`wrote ${safeText(outPath)}`);
-    const exitCode = flagged.length > 0 && summary.joined === 0 ? 1 : 0;
+    const exitCode = flagged.length + flaggedVideos > 0 && summary.joined + videoJoin.pairs.size === 0 ? 1 : 0;
     if (exitCode !== 0)
         lines.push("nothing located: is this the dev page of the measured scan, with the same images?");
     else

package/dist/locate.js

@@ -347,8 +347,12 @@ export const SOURCE_WINDOW = 3;
 const OPENING_SEARCH = 30;
 /** Largest project file read for the check. */
 export const MAX_SOURCE_READ = 2 * 1024 * 1024;
-/** An opening image tag or a srcset prop. */
-const IMAGE_TOKEN = /<(?:img|Image|picture|source)(?=[\s/>]|$)|\bsrc[sS]et\s*[={]/;
+/**
+ * An opening image tag or a srcset prop. A <video> opening and a <source> child count too: a video's poster is an image
+ * record that carries the video's locator, so its owner line is the <video> element (and the sources sit on their own
+ * lines). Lowercase only, so a component such as <VideoPlayer> is not taken for the element.
+ */
+const IMAGE_TOKEN = /<(?:img|Image|picture|source|video)(?=[\s/>]|$)|\bsrc[sS]et\s*[={]/;
 /**
  * Whether a project source line (1-based) renders an image: an image token within SOURCE_WINDOW lines of it, an opening
  * image tag above it with no closing tag between, or the definition (`function Name`, `const Name`) of the component

package/dist/measure.js

@@ -184,14 +184,52 @@ export async function settleWithin(promises, ms) {
     await Promise.race([Promise.all(promises), timeout]);
     clearTimeout(timer);
 }
-/** Scrolls one viewport height at a time until the bottom, so lazy images start loading. */
+/**
+ * Marks, on the page, every image and video that is visible at this scroll position: not display:none, not
+ * visibility hidden, opacity above 0, a box inside the viewport, and not outside an overflow-hidden ancestor (a carousel slide
+ * off its track is not visible). The marks live in window.__imgtuneSeen (a WeakSet of elements) for the page's read (see
+ * readView): a copy seen visible at any scroll step of the scan's own pass is shown, whatever its state at the read.
+ */
+export const MARK_VISIBLE_SCRIPT = `(() => {
+  const seen = window.__imgtuneSeen || (window.__imgtuneSeen = new WeakSet());
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  for (const el of document.querySelectorAll("img, video")) {
+    const cs = getComputedStyle(el);
+    if (cs.display === "none" || cs.visibility === "hidden" || cs.visibility === "collapse") continue;
+    if (!(parseFloat(cs.opacity) > 0)) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0 || r.right <= 0 || r.bottom <= 0 || r.left >= vw || r.top >= vh) continue;
+    // The same rules as the hidden check (readView): content-visibility hidden, a closed details (except its summary), a
+    // display:none ancestor, and an overflow-hidden ancestor the box lies outside of.
+    let clipped = false;
+    for (let a = el.parentElement; a && !clipped; a = a.parentElement) {
+      const s = getComputedStyle(a);
+      if (s.display === "none" || s.getPropertyValue("content-visibility") === "hidden") clipped = true;
+      else if (a.tagName === "DETAILS" && !a.hasAttribute("open") && el.closest("summary") === null) clipped = true;
+      else if (/hidden|clip/.test(s.overflowX + " " + s.overflowY)) {
+        const b = a.getBoundingClientRect();
+        if (r.right <= b.left || r.left >= b.right || r.bottom <= b.top || r.top >= b.bottom) clipped = true;
+      }
+    }
+    if (!clipped) seen.add(el);
+  }
+})()`;
+/**
+ * Scrolls one viewport height at a time until the bottom, so lazy images start loading. After each step the copies visible at
+ * that position are marked (see MARK_VISIBLE_SCRIPT): a copy shown at any step of the pass is not a hidden copy.
+ */
 async function scrollThrough(page) {
+    await page.evaluate(MARK_VISIBLE_SCRIPT);
     for (let step = 0; step < MAX_SCROLL_STEPS; step++) {
         const atBottom = await page.evaluate(() => {
             window.scrollBy(0, window.innerHeight);
             return window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 1;
         });
         count("scroll steps");
+        // Two frames: the scroll events the step fired have run, so a state a scroll listener sets is the one marked.
+        await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))));
+        await page.evaluate(MARK_VISIBLE_SCRIPT);
         await new Promise((resolve) => setTimeout(resolve, SCROLL_STEP_WAIT_MS));
         if (atBottom)
             return;