@jsenv/core 41.4.13 → 41.4.14

package/dist/start_dev_server/start_dev_server.js

@@ -906,6 +906,13 @@ const osFromUserAgent = (userAgent) => {
   return { name: "unknown", version: "" };
 };
 
+// A browser driven by a program rather than by someone looking at it: a test
+// run, a screenshot script. Chromium says so in its user-agent ("HeadlessChrome"
+// / "Headless"), the others do not — so the reporter also sends
+// navigator.webdriver, which every automated browser sets, and either one is
+// enough to classify the client (see the headless flag on the record).
+const isHeadlessUserAgent = (userAgent) => /Headless/i.test(userAgent);
+
 // The machine the dev server runs on, talking to itself: the main client. A
 // phone (or any other device) reaching the server over the network reports
 // with the machine's LAN address instead — which is why the ip is kept on
@@ -939,6 +946,10 @@ const jsenvPluginClientMonitoring = () => {
         userAgent,
         runtime: runtimeFromRequest(request),
         os: osFromUserAgent(userAgent),
+        // Automated browser (test run, script) rather than someone browsing;
+        // set from the user-agent here, and again from navigator.webdriver when
+        // a report brings it (the only signal for headless firefox/webkit).
+        headless: isHeadlessUserAgent(userAgent),
         // The address the reports come from; request.ipForwarded when a proxy
         // sits in between, so the client's own address is kept, not the proxy's.
         ip: request.ipForwarded || request.ip,
@@ -958,6 +969,7 @@ const jsenvPluginClientMonitoring = () => {
         client.userAgent = userAgent;
         client.runtime = runtimeFromRequest(request);
         client.os = osFromUserAgent(userAgent);
+        client.headless = client.headless || isHeadlessUserAgent(userAgent);
       }
       // A device changes address (wifi drop, DHCP): the record follows it.
       const ip = request.ipForwarded || request.ip;
@@ -1076,6 +1088,7 @@ const jsenvPluginClientMonitoring = () => {
       // parsed { name, version } so pages can show a friendly browser/OS
       runtime: client.runtime,
       os: client.os,
+      headless: client.headless,
       ip: client.ip,
       // The main client — the machine the dev server runs on, talking to
       // itself over localhost.
@@ -1133,6 +1146,11 @@ const jsenvPluginClientMonitoring = () => {
     const wasOnline = !firstEver && isOnline(client);
     client.everSeen = true;
     client.lastSeen = now();
+    // navigator.webdriver, reported once per batch: true for any browser under
+    // automation, including the headless firefox/webkit the user-agent hides.
+    if (body.webdriver === true) {
+      client.headless = true;
+    }
 
     updateTab(client, body.tab);
     pruneTabs(client);
@@ -1391,6 +1409,9 @@ const jsenvPluginPageSwitcher = () => {
       html: (urlInfo) => {
         const htmlAst = parseHtml({ html: urlInfo.content, url: urlInfo.url });
         injectJsenvScript(htmlAst, {
+          // A module: the tree it opens is the shared page picker
+          // (protocol_file/client/page_picker.js), which it imports.
+          type: "module",
           src: clientFileUrl$1,
           pluginName: "jsenv:page_switcher",
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "41.4.13",
+  "version": "41.4.14",
   "type": "module",
   "description": "Tool to develop, test and build js projects",
   "repository": {

package/src/plugins/client_monitoring/client/client_reporter.js

@@ -185,6 +185,10 @@ const setup = () => {
     pendingActivities = [];
     const payload = JSON.stringify({
       clientId,
+      // The server reads browser/OS from the request headers, but a headless
+      // firefox/webkit looks exactly like a windowed one there; this flag is
+      // what tells them apart (chromium also says "Headless" in its user-agent).
+      webdriver: window.navigator.webdriver === true,
       tab: tabInfo({ closing }),
       activities,
       logs,

package/src/plugins/client_monitoring/client/clients_page.html

@@ -125,21 +125,6 @@
       .btn.primary:hover {
         background: #1d4ed8;
       }
-      .picker-filter {
-        box-sizing: border-box;
-        width: 100%;
-        margin-bottom: 10px;
-        padding: 8px 10px;
-        font: inherit;
-        border: 1px solid #d1d5db;
-        border-radius: 6px;
-      }
-      .pagepick {
-        width: 100%;
-        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-        text-align: left;
-        word-break: break-all;
-      }
       .monitor {
         margin-left: 4px;
         padding: 2px 4px;
@@ -227,6 +212,16 @@
       <tbody id="other-rows"></tbody>
     </table>
 
+    <h2>Headless browsers</h2>
+    <p class="intro">
+      Browsers driven by a program — a test run, a screenshot script — rather
+      than by someone looking at them.
+    </p>
+    <table>
+      <thead id="head3"></thead>
+      <tbody id="headless-rows"></tbody>
+    </table>
+
     <dialog id="dlg">
       <div class="dlg-head">
         <strong id="dlg-title"></strong>
@@ -238,8 +233,11 @@
     </dialog>
 
     <script type="module">
+      import { openPagePicker } from "../../protocol_file/client/page_picker.js";
+
       const selfRows = document.getElementById("self-rows");
       const otherRows = document.getElementById("other-rows");
+      const headlessRows = document.getElementById("headless-rows");
       // The monitoring script (injected into this page too) stores our own id.
       let selfId = null;
       try {
@@ -254,6 +252,7 @@
       </tr>`;
       document.getElementById("head").innerHTML = headHtml;
       document.getElementById("head2").innerHTML = headHtml;
+      document.getElementById("head3").innerHTML = headHtml;
       const COLSPAN = 8;
 
       const ago = (ts) => {
@@ -420,16 +419,26 @@
       const render = (clients) => {
         lastClients = clients;
         const self = selfId ? clients.find((d) => d.id === selfId) : null;
-        // Others ordered by when they first connected, so rows don't reshuffle.
+        // Ordered by when they first connected, so rows don't reshuffle.
+        const byFirstSeen = (a, b) => a.firstSeen - b.firstSeen;
+        // A headless browser is a program's, not a person's: it comes and goes
+        // with a test run, so it gets its own table instead of pushing the
+        // clients someone is actually browsing with out of sight.
         const others = clients
-          .filter((d) => d !== self)
-          .sort((a, b) => a.firstSeen - b.firstSeen);
+          .filter((d) => d !== self && !d.headless)
+          .sort(byFirstSeen);
+        const headless = clients
+          .filter((d) => d !== self && d.headless)
+          .sort(byFirstSeen);
         selfRows.innerHTML = self
           ? rowHtml(self)
           : `<tr><td class="empty" colspan="${COLSPAN}">This browser isn't registered yet — it will appear shortly.</td></tr>`;
         otherRows.innerHTML = others.length
           ? others.map(rowHtml).join("")
           : `<tr><td class="empty" colspan="${COLSPAN}">No other client has connected.</td></tr>`;
+        headlessRows.innerHTML = headless.length
+          ? headless.map(rowHtml).join("")
+          : `<tr><td class="empty" colspan="${COLSPAN}">No headless browser has connected.</td></tr>`;
       };
 
       // Dialogs (all tabs / recent activity / user agent).
@@ -514,68 +523,33 @@
           // dev server gone — ignore
         }
       };
-      // The .html pages available to navigate to (fetched once, lazily).
-      let navigablePages = null;
-      const loadPages = async () => {
-        if (navigablePages) {
-          return navigablePages;
-        }
-        try {
-          navigablePages = await (await fetch("/.internal/pages.json")).json();
-        } catch {
-          navigablePages = [];
-        }
-        return navigablePages;
-      };
       const shortLabel = (d) => {
         const parts = [d.os && d.os.name, d.runtime && d.runtime.name].filter(
           Boolean,
         );
         return parts.length ? parts.join(" ") : d.id.slice(0, 8);
       };
-      // A searchable list of pages; picking one navigates the client's active
-      // tab there (tabId from activeTab so only that tab moves).
-      const openNavigateDialog = async (client) => {
-        dlgTitle.textContent = `Navigate ${shortLabel(client)} to…`;
-        dlgCopy.style.display = "none";
-        dlgBody.innerHTML = `
-          <input class="picker-filter" id="page-filter" type="search" placeholder="Filter pages…" />
-          <ul class="list" id="page-list"></ul>`;
-        dlg.showModal();
-        const pages = await loadPages();
-        const listEl = document.getElementById("page-list");
-        const filterEl = document.getElementById("page-filter");
-        const renderPages = (query) => {
-          const needle = query.trim().toLowerCase();
-          const matches = needle
-            ? pages.filter((p) => p.toLowerCase().includes(needle))
-            : pages;
-          listEl.innerHTML = matches.length
-            ? matches
-                .slice(0, 300)
-                .map(
-                  (p) =>
-                    `<li><button class="btn pagepick" data-url="${escapeHtml(p)}">${escapeHtml(p)}</button></li>`,
-                )
-                .join("")
-            : '<li class="muted">No page matches.</li>';
-        };
-        renderPages("");
-        filterEl.oninput = () => renderPages(filterEl.value);
-        filterEl.focus();
-        listEl.onclick = (event) => {
-          const button = event.target.closest("button.pagepick");
-          if (!button) {
-            return;
-          }
-          sendCommand({
-            clientId: client.id,
-            tabId: client.activeTab ? client.activeTab.id : null,
-            type: "navigate",
-            url: button.getAttribute("data-url"),
-          });
-          dlg.close();
-        };
+      // Which page to send a client to is the same question cmd+K asks on any
+      // dev-served page, so it is the same tree that answers it (see
+      // protocol_file/client/page_picker.js) — filters, folding and all. Only
+      // the ending differs: the url goes to the client's active tab (tabId from
+      // activeTab, so no other tab moves) instead of to this window. No href on
+      // the rows for that very reason: a click here must not take THIS browser
+      // to a page meant for another one.
+      const openNavigateDialog = (client) => {
+        openPagePicker({
+          title: `Navigate ${shortLabel(client)} to…`,
+          placeholder: "Go to page…",
+          hereUrl: client.activeTab ? client.activeTab.url : null,
+          onPick: (page) => {
+            sendCommand({
+              clientId: client.id,
+              tabId: client.activeTab ? client.activeTab.id : null,
+              type: "navigate",
+              url: page.url,
+            });
+          },
+        });
       };
 
       document.addEventListener("click", async (event) => {

package/src/plugins/client_monitoring/jsenv_plugin_client_monitoring.js

@@ -140,6 +140,13 @@ const osFromUserAgent = (userAgent) => {
   return { name: "unknown", version: "" };
 };
 
+// A browser driven by a program rather than by someone looking at it: a test
+// run, a screenshot script. Chromium says so in its user-agent ("HeadlessChrome"
+// / "Headless"), the others do not — so the reporter also sends
+// navigator.webdriver, which every automated browser sets, and either one is
+// enough to classify the client (see the headless flag on the record).
+const isHeadlessUserAgent = (userAgent) => /Headless/i.test(userAgent);
+
 // The machine the dev server runs on, talking to itself: the main client. A
 // phone (or any other device) reaching the server over the network reports
 // with the machine's LAN address instead — which is why the ip is kept on
@@ -173,6 +180,10 @@ export const jsenvPluginClientMonitoring = () => {
         userAgent,
         runtime: runtimeFromRequest(request),
         os: osFromUserAgent(userAgent),
+        // Automated browser (test run, script) rather than someone browsing;
+        // set from the user-agent here, and again from navigator.webdriver when
+        // a report brings it (the only signal for headless firefox/webkit).
+        headless: isHeadlessUserAgent(userAgent),
         // The address the reports come from; request.ipForwarded when a proxy
         // sits in between, so the client's own address is kept, not the proxy's.
         ip: request.ipForwarded || request.ip,
@@ -192,6 +203,7 @@ export const jsenvPluginClientMonitoring = () => {
         client.userAgent = userAgent;
         client.runtime = runtimeFromRequest(request);
         client.os = osFromUserAgent(userAgent);
+        client.headless = client.headless || isHeadlessUserAgent(userAgent);
       }
       // A device changes address (wifi drop, DHCP): the record follows it.
       const ip = request.ipForwarded || request.ip;
@@ -310,6 +322,7 @@ export const jsenvPluginClientMonitoring = () => {
       // parsed { name, version } so pages can show a friendly browser/OS
       runtime: client.runtime,
       os: client.os,
+      headless: client.headless,
       ip: client.ip,
       // The main client — the machine the dev server runs on, talking to
       // itself over localhost.
@@ -367,6 +380,11 @@ export const jsenvPluginClientMonitoring = () => {
     const wasOnline = !firstEver && isOnline(client);
     client.everSeen = true;
     client.lastSeen = now();
+    // navigator.webdriver, reported once per batch: true for any browser under
+    // automation, including the headless firefox/webkit the user-agent hides.
+    if (body.webdriver === true) {
+      client.headless = true;
+    }
 
     updateTab(client, body.tab);
     pruneTabs(client);