tosijs-ui 1.16.36 → 1.16.37

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 1.16.37
+
+Doc-site test running, as a developer meets it. On a deployed site, tests still start off; the
+only difference there is how a passing run looks to a reader who turns them on.
+
+- **Safari no longer stalls the background test run.** The runner loads each page with tests in
+  a hidden frame, and parked that frame off-screen; WebKit gives an off-screen frame no
+  animation frames, tosijs renders on them, so every page waited out its 45-second deadline and
+  the header read "Running 0" for the whole run. The frame now sits inside the viewport, clipped
+  so nothing paints. The doc-test gate runs in WebKit for the first time, and passes.
+- **Over the tunnel, tests run as they do on localhost.** They started off there, and turned on
+  ran only the page on screen; the dev server now marks the pages it serves, so any page it
+  served starts with tests on and runs the whole site in the background. That is every visitor
+  to a dev server, on the LAN or through a tunnel link, with or without an edit session: a
+  preview link opened on a phone runs every page's tests in hidden frames. Turning tests off
+  from the header menu is remembered per browser. A deployed site has no mark and still
+  defaults to off.
+- **A pass no longer blanks the header's test widget.** It faded to nothing and left an empty
+  rectangle in the bar. It now turns grey and then translucent, all as a CSS filter over the
+  pass colour, and stays readable and clickable. Floating over a page with no header it still
+  fades out.
+
 ## 1.16.36
 
 One additive site option. Nothing changes for a site that does not set it.

package/dist/doc-browser.js

@@ -119,6 +119,7 @@ import { popMenu } from './menu.js';
 import { codeEditor } from './code-editor.js';
 import { tosiDiff } from './diff.js';
 import { LAN_REFUSAL_ADVICE } from './live-example/source-access.js';
+import { servedForDevelopment } from './live-example/dev-served.js';
 /*
 Does this doc contain a REAL ` ```test ` block, as opposed to mentioning one?
 
@@ -186,6 +187,18 @@ const testIndicatorStyleSpec = {
         '70%': { opacity: '1', transform: 'scale(1.1)' },
         '100%': { opacity: '0', transform: 'scale(0.9)', pointerEvents: 'none' },
     },
+    /*
+    A pass in the header settles into a muted, monochrome badge rather than fading out. Faded,
+    it left an empty rectangle in the bar (the widget keeps its box), and the result was gone
+    for anyone who looked a moment late. Muted, it reads as "nothing to see" and stays a button.
+    All of it is a filter over the pass colour, never a new colour. Grey first, then faded: fading
+    while still green put a washed-out green on the header's colour.
+    */
+    '@keyframes test-settle': {
+        '0%, 40%': { filter: 'grayscale(0) opacity(1)' },
+        '55%': { filter: 'grayscale(1) opacity(1)' },
+        '100%': { filter: 'grayscale(1) opacity(0.55)' },
+    },
     // Hide when tests disabled
     'body:not(.tests-enabled) .doc-link::after, body:not(.tests-enabled) .test-widget': {
         display: 'none !important',
@@ -240,8 +253,19 @@ const testIndicatorStyleSpec = {
     '.test-widget.-passed': {
         _testBg: testColor.pass,
         _testFg: testTextColor.pass,
+        animation: 'test-settle 3s ease-out forwards',
+    },
+    // Floating over the page (no header), it still gets out of the way: there is no gap to leave.
+    '.test-widget.-floating.-passed': {
         animation: 'test-fade 3s ease-out forwards',
     },
+    '@media (prefers-reduced-motion: reduce)': {
+        '.test-widget.-passed': {
+            animation: 'none',
+            filter: 'grayscale(1) opacity(0.55)',
+        },
+        '.test-widget.-floating.-passed': { opacity: '0', pointerEvents: 'none' },
+    },
     '.test-widget.-failed': {
         _testBg: testColor.fail,
         _testFg: testTextColor.fail,
@@ -1762,7 +1786,7 @@ export function createDocBrowser(options) {
             else {
                 testWidget.classList.add('-passed');
                 testWidget.classList.remove('-failed');
-                testWidget.hidden = false; // Show briefly before fade
+                testWidget.hidden = false; // settles into a muted badge (see `.test-widget.-passed`)
             }
         }
         updateTestWidgetDisplay();
@@ -1938,9 +1962,15 @@ export function createDocBrowser(options) {
         const currentFilename = String(app.currentDoc.filename);
         /*
         Create a hidden iframe that loads the full page. Keep a real layout size — layout-dependent
-        example tests need one — but park it off-screen rather than rely on opacity:0 over the
-        visible page: Chromium (and haltija on top of it) still composites a 0-opacity layer at 0,0,
-        which flashes as the frame navigates page to page.
+        example tests need one — and hide it with a clip that leaves nothing to paint, not opacity:
+        Chromium (and haltija on top of it) still composites a 0-opacity layer at 0,0, which flashes
+        as the frame navigates page to page.
+    
+        INSIDE the viewport, though. It used to be parked at left:-10000px, and WebKit throttles a
+        frame outside the viewport: its animation frames never came, tosijs renders on animation
+        frames, so every page sat until its 45s deadline and Safari showed "Running 0" for the whole
+        run. That was the "WebKit's iframe runner never signals" of the e2e lane, and it reached
+        readers once the tunnel ran tests in the background.
     
         THE SIZE IS OVERRIDABLE, because 800x600 was the only width the inline tier had ever run at.
         A doc-system layout regression at phone width shipped in 1.12.3 and was found by a reader,
@@ -1959,7 +1989,7 @@ export function createDocBrowser(options) {
         const vpWidth = Number(vp?.width) > 0 ? Number(vp?.width) : 800;
         const vpHeight = Number(vp?.height) > 0 ? Number(vp?.height) : 600;
         const testFrame = document.createElement('iframe');
-        testFrame.style.cssText = `position: fixed; left: -10000px; top: 0; width: ${vpWidth}px; height: ${vpHeight}px; opacity: 0; pointer-events: none;`;
+        testFrame.style.cssText = `position: fixed; left: 0; top: 0; z-index: -1; clip-path: inset(100%); width: ${vpWidth}px; height: ${vpHeight}px; opacity: 0; pointer-events: none;`;
         document.body.appendChild(testFrame);
         // Listen for test results posted from the iframe
         const messageHandler = (event) => {
@@ -2032,11 +2062,12 @@ export function createDocBrowser(options) {
             void settleCurrentPage(currentFilename);
         }
     };
-    // Run background tests when enabled (initially or when toggled on)
+    // Run background tests when enabled (initially or when toggled on). Every page where a
+    // developer is looking, the tunnel included; elsewhere only the page on screen.
     const startBackgroundTests = () => {
         if (!testManager.enabled.value)
             return;
-        if (isLocalhost) {
+        if (servedForDevelopment()) {
             setTimeout(runBackgroundTests, 1000);
         }
         else {

package/dist/doc-system/site/dev-server.d.ts

@@ -31,6 +31,11 @@ import { isLoopbackAddressForAuth as isLoopbackAddress } from './dev-auth.js';
  *
  * `root + sep` rather than a bare `startsWith`, or `/srv/docs-evil` counts as inside `/srv/docs`.
  */
+/**
+ * Put `snippet` before every script in `html`: just inside `<head>`, or else just after the
+ * doctype. Never before the doctype, which would put the page in quirks mode.
+ */
+export declare function injectFirst(html: string, snippet: string): string;
 export declare function isUnderRoot(root: string, candidate: string): boolean;
 export declare function resolveWatchPaths(config: {
     docPaths?: string[];

package/dist/doc-system/site/dev-server.js

@@ -28,6 +28,7 @@ import { assertSecretNotServed, ensureSessionSecret, readSessionSecret, sessionS
 import { revocationList, startRevocationSweep } from './device-revocation.js';
 import { resolveDataStore, resolveDataFile, dataContentProblem, listDataFiles, saveDataFile, dataHistory, readDataAt, isGitWorkTree, } from './data-store.js';
 import { SOURCE_ACCESS_HEADER, SOURCE_ENDPOINT_SNIPPET, } from '../../live-example/source-access.js';
+import { DEV_SERVER_SNIPPET } from '../../live-example/dev-served.js';
 /**
  * Every path the dev server watches for changes.
  *
@@ -59,6 +60,20 @@ import { SOURCE_ACCESS_HEADER, SOURCE_ENDPOINT_SNIPPET, } from '../../live-examp
  *
  * `root + sep` rather than a bare `startsWith`, or `/srv/docs-evil` counts as inside `/srv/docs`.
  */
+/**
+ * Put `snippet` before every script in `html`: just inside `<head>`, or else just after the
+ * doctype. Never before the doctype, which would put the page in quirks mode.
+ */
+export function injectFirst(html, snippet) {
+    const head = /<head(\s[^>]*)?>/i.exec(html);
+    if (head) {
+        const at = head.index + head[0].length;
+        return html.slice(0, at) + snippet + html.slice(at);
+    }
+    const doctype = /^\s*<!doctype[^>]*>/i.exec(html);
+    const at = doctype ? doctype[0].length : 0;
+    return html.slice(0, at) + snippet + html.slice(at);
+}
 export function isUnderRoot(root, candidate) {
     const base = path.resolve(root);
     const target = path.resolve(candidate);
@@ -1373,12 +1388,19 @@ export async function devServer(config, opts = {}) {
             // deployed static site, which has none, is never asked.
             (config.editableSources ? SOURCE_ENDPOINT_SNIPPET : '');
         const encoding = negotiateEncoding(request?.headers.get('accept-encoding') ?? null);
-        if ((extras || asRoot) && filePath.endsWith('.html')) {
+        if (filePath.endsWith('.html')) {
             const read = await Bun.file(filePath).text();
             const html = asRoot ? rootRelativeUrls(read) : read;
-            const injected = html.includes('</body>')
+            const withExtras = html.includes('</body>')
                 ? html.replace('</body>', `${extras}</body>`)
                 : html + extras;
+            /*
+            Tests on by default, every page, for whoever is looking through the dev server (the tunnel
+            included); see dev-served.ts. FIRST in <head>, unlike the extras: it is read when the
+            bundle evaluates, and on the iife path that is a classic script, which runs as it is
+            parsed, before anything at the end of <body> exists.
+            */
+            const injected = injectFirst(withExtras, DEV_SERVER_SNIPPET);
             // Injected HTML is built per request, so it is compressed but never cached — the
             // cache key would have to include the injected extras, and HTML is small anyway.
             const body = encoding