help.test.mjs

// The help add-in, add-in/, increments 1 to 3 of Stage 4 in WIP.HelpAddin.md:
// F1 shows the page for the selection or for the name under the cursor in the
// help pane, whose search box and results list find any page of the index;
// for the name under the cursor, the compiler's hover says where it is
// declared.
//
// The add-in is built as committed, with its copy of the symbol index,
// add-in/Resources/SYMBOLS/symbols.json, embedded as a resource. This file
// serves the built site, docs/_site, on localhost and gives the add-in it as
// TB_DOCS_HELP_SITE, which Open in browser opens. The lane named help builds
// the add-in without the help archive, so the pane's frame loads that site
// too; the lane named help-offline builds it with an archive of the built
// offline tree (lib/help-archive.mjs, the writer a build uses too), so the frame
// loads the add-in's own server. Either way every page a case reaches is a page of the
// build, and nothing comes from the network. Run build.bat first.
// Each case is a line and column in helphost/Sources/Cases.twin, so a change to
// that file is a change to this table.
//
// The last cases are the Detach button, which moves the pane into a window of
// the add-in's own, a Form holding a WebView2 control. The window's page is
// read and operated over DevTools: the add-in starts the control with the
// debugging port in TB_DOCS_HELP_WINDOW_PORT, which only the test switch
// allows, and prints "window page <src>" when the frame in it has loaded.
//
// Run it with addin-test.bat, which gives it a lane; on its own it is skipped.

import assert from "node:assert/strict";
import { spawnSync } from "node:child_process";
import fs from "node:fs";
import path from "node:path";
import { before, test } from "node:test";
import { fileURLToPath } from "node:url";
import { helpArchiveSkips } from "../../builder/help-archive-step.mjs";
import { createStaticHandler } from "../../builder/static-files.mjs";
import { writeHelpArchive } from "../../lib/help-archive.mjs";
import { attach } from "../../scripts/lib/tb-cdp.mjs";
import { leaseSlot, sleep } from "../../scripts/lib/tb-ide.mjs";
import { loadedAddins } from "../../scripts/lib/tb-ide-addins.mjs";
import { consoleMark, linesSince } from "../../scripts/lib/tb-ide-console.mjs";
import { fixPageSize, PAGE } from "../../scripts/lib/tb-lane.mjs";
import {
  click,
  clickAt,
  elementRect,
  listViewItems,
  notifications,
  openedUrls,
  openFile,
  pressKey,
  select,
  setCursor,
  toolWindow,
  typeText,
  waitFor,
} from "../../scripts/lib/tb-operate.mjs";
import { hoverLink, hoverText, mouseAway, restMouse } from "./hover.mjs";
import { frameEval, frameOf, serveLoopback } from "./pages.mjs";
import { scenario } from "./scenario.mjs";

const HERE = path.dirname(fileURLToPath(import.meta.url));
const ROOT = path.resolve(HERE, "..", "..");
const ADDIN = path.join(ROOT, "add-in");
const INDEX = path.join(ADDIN, "Resources", "SYMBOLS", "symbols.json");
const BUILT = path.join(ROOT, "docs", "_site");
const BUILT_OFFLINE = path.join(ROOT, "docs", "_site-offline");
const FRESH_GATE = path.join(ROOT, "scripts", "check_tree_fresh.mjs");
// "serving site.zip, <n> files, at <origin>", which the add-in prints when it
// has the archive.
const SERVING = /^serving site\.zip, \d+ files, at (http:\/\/localhost:\d+)$/;
const HOST = path.join(HERE, "helphost");
const FILE = "/HelpHost/Sources/Cases.twin";
const PANE = "tbDocsHelpPane";
// The page height the hover test emulates, so that a hover reaches past the editor.
const SHORT_PAGE = 480;
// A page as small as a user's IDE window makes it: 1200 by 900 at 150%.
const SMALL_PAGE = { width: 800, height: 600 };

const addinLines = async (c, mark) => linesSince(c, mark, { prefix: "[tbDocsHelp] " });

// An expression on the pane's shadow root, `root`.
const inPane = (c, body) =>
  c.evaluate(`(() => {
  const w = toolWindowsById[${JSON.stringify(PANE)}];
  if (!w) return null;
  const root = w.bodyElement.getRootNode();
  ${body}
})()`);

const frameSrc = (c) => inPane(c, `return root.querySelector("#helpPage")?.getAttribute("src") ?? null;`);
// "dark" or "light", from the IDE theme's panel colour rather than from the
// API the add-in asks (Themes.ActiveThemeNameGroup).
const themeGroup = (c) =>
  c.evaluate(`(() => {
  const probe = document.createElement("div");
  probe.style.background = "var(--themeGeneralPanelBackColor)";
  document.body.appendChild(probe);
  const [r, g, b] = getComputedStyle(probe).backgroundColor.match(/\\d+/g).map(Number);
  probe.remove();
  return 0.299 * r + 0.587 * g + 0.114 * b < 128 ? "dark" : "light";
})()`);
const focusedId = (c) => inPane(c, "return root.activeElement?.id ?? null;");
const searchValue = (c) => inPane(c, `return root.querySelector("#helpSearch")?.value ?? null;`);
const results = async (c) => (await listViewItems(c, { toolWindow: PANE, css: "#helpResults" })).map((i) => i.text);
// The results list's height, one drawn row's, the whole pane's,
// and whether the list's scrollbar shows; null while the list is hidden. The
// list view keeps a hidden copy of a row to measure with, so the row is the
// first one with a height.
const resultsBox = (c) =>
  inPane(
    c,
    `const l = root.querySelector("#helpResults");
  if (!l || l.style.display === "none") return null;
  const heights = [...l.querySelectorAll(".hit, .none")].map((e) => e.getBoundingClientRect().height);
  return {
    height: l.getBoundingClientRect().height,
    row: heights.find((h) => h > 0) ?? null,
    pane: root.querySelector("#helpWrap").getBoundingClientRect().height,
    scrollbar: getComputedStyle(l.querySelector(".scrollBackV")).display !== "none",
  };`,
  );
// The line between the results list and what is under it, in the pane (`root`
// is its shadow root) or in the window's page (`root` is the document): the
// top border of the frame and of the summary, the theme's text colour at 40%
// as a probe element has it, the list's own bottom border, which has to
// stay none (its height is its rows), and whether the list shows.
const SEPARATOR_LOOK = `(() => {
  const look = (e) => { const s = getComputedStyle(e); return { width: s.borderTopWidth, style: s.borderTopStyle, color: s.borderTopColor }; };
  const probe = document.createElement("div");
  probe.style.cssText = "border: 2px solid color-mix(in srgb, var(--themeToolWindowBodyForeColor) 40%, transparent)";
  (root.querySelector("#helpWrap") ?? root.body).appendChild(probe);
  const want = look(probe);
  probe.remove();
  const list = root.querySelector("#helpResults");
  return {
    want,
    page: look(root.querySelector("#helpPage")),
    summary: look(root.querySelector("#helpSummary")),
    listBottom: getComputedStyle(list).borderBottomWidth,
    listShown: list.style.display !== "none",
  };
})()`;
const paneSeparator = (c) => inPane(c, `return ${SEPARATOR_LOOK};`);
const windowSeparator = (conn) => conn.evaluate(`(() => { const root = document; return ${SEPARATOR_LOOK}; })()`);
const NO_LINE = { width: "0px", style: "none" };
// Whether `got`, from SEPARATOR_LOOK, has the line under a shown list and
// none under a hidden one; "" when it has, else what was wrong.
function separatorFault(got) {
  const line = got.listShown ? got.want : NO_LINE;
  if (got.want.style === "none" || got.want.width === "0px")
    return "the probe has no border: color-mix is not supported, or the theme has no text colour";
  for (const name of ["page", "summary"]) {
    for (const key of Object.keys(line)) {
      if (got[name][key] !== line[key]) return `${name} ${key} is ${got[name][key]}, not ${line[key]}`;
    }
  }
  return got.listBottom === "0px" ? "" : "the list has a border of its own";
}
// What shows in place of the page for a name with none: null while the page shows.
const summary = (c) =>
  inPane(
    c,
    `const s = root.querySelector("#helpSummary");
  if (!s || s.style.display === "none") return null;
  const text = (css) => s.querySelector(css)?.textContent ?? null;
  return {
    declaration: text(".declaration"),
    description: text(".description"),
    where: text(".where"),
    frameHidden: root.querySelector("#helpPage").style.display === "none",
    browserDisabled: root.querySelector("#helpBrowser").disabled,
  };`,
  );
// Whether the frame shows, rather than a summary, with Open in browser enabled.
const pageState = (c) =>
  inPane(
    c,
    `return {
    summary: root.querySelector("#helpSummary")?.style.display ?? null,
    frame: root.querySelector("#helpPage")?.style.display ?? null,
    browserDisabled: root.querySelector("#helpBrowser")?.disabled ?? null,
  };`,
  );
// What a frame's page shows of the theme, read in that page: its path and
// query, whether it has loaded and is the document marked earlier
// (tbDocsTestMark), its data-theme and data-pane, whether its background is
// dark or light, the choice theme-toggle.js shows on the site's theme button,
// the colour scheme the frame prefers, and, to say why when the
// theme is wrong, what its two storages hold for the theme and its window.name.
const DOCS_STATE = `(() => {
  const stored = (name) => { try { const v = window[name].getItem("theme"); return v === null ? "empty" : v; } catch (e) { return "throws " + e.name; } };
  const [r, g, b] = getComputedStyle(document.body).backgroundColor.match(/\\d+/g).map(Number);
  return {
    url: location.pathname + location.search,
    ready: document.readyState === "complete",
    marked: !!window.tbDocsTestMark,
    theme: document.documentElement.getAttribute("data-theme"),
    pane: document.documentElement.hasAttribute("data-pane"),
    toggle: document.getElementById("theme-toggle")?.getAttribute("data-theme-choice") ?? null,
    background: 0.299 * r + 0.587 * g + 0.114 * b < 128 ? "dark" : "light",
    prefers: matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
    sessionStorage: stored("sessionStorage"),
    localStorage: stored("localStorage"),
    name: window.name,
  };
})()`;
const otherScheme = (group) => (group === "dark" ? "light" : "dark");
// The frame is told to prefer the other colour scheme than the IDE's group,
// so that a page left to follow its colour scheme shows the wrong theme.
const preferOther = (conn, group) =>
  conn.send("Emulation.setEmulatedMedia", { features: [{ name: "prefers-color-scheme", value: otherScheme(group) }] });
// Whether a DOCS_STATE read under preferOther has the IDE's theme: the
// attribute, the background it gives, and the pane's layout. "" when it has,
// else what is wrong, so that a case can go on to the next page and report
// every one.
function docsThemeFault(state, group, where) {
  if (!state) return `${where}: no page`;
  if (state.prefers !== otherScheme(group)) return `${where}: the frame does not prefer the other scheme`;
  const got = { theme: state.theme, background: state.background, pane: state.pane };
  const want = { theme: group, background: group, pane: true };
  return JSON.stringify(got) === JSON.stringify(want) ? "" : `${where}: ${JSON.stringify(state)}`;
}

// The floating panel that holds the pane, as a box in the page, with the page's
// size; null while the pane is docked or has no panel.
const floatingBox = (c) =>
  c.evaluate(`(() => {
  const w = toolWindowsById[${JSON.stringify(PANE)}];
  const p = w?.shadowDom.host.closest(".floatingPanel");
  if (!p) return null;
  const r = p.getBoundingClientRect();
  return { left: r.left, top: r.top, width: r.width, height: r.height, page: [innerWidth, innerHeight] };
})()`);
// Whether a floatingBox is wholly inside its page: "" when it is.
const boxFault = (b) =>
  b.left >= 0 && b.top >= 0 && b.left + b.width <= b.page[0] && b.top + b.height <= b.page[1]
    ? ""
    : "the pane's floating panel is not inside the page";

async function at(c, line, column) {
  await setCursor(c, line, column);
  await sleep(100);
}

async function emptySearch(c) {
  await click(c, { toolWindow: PANE, css: "#helpSearch" });
  await pressKey(c, "End");
  for (let n = (await searchValue(c)).length; n > 0; n--) await pressKey(c, "Backspace");
}

scenario("the help add-in: F1 and the help pane", (lane) => {
  let c;
  let entries;
  let origin; // the site this file serves
  let pages; // where the frame's pages come from: origin, or the add-in's server
  let server;
  let windowPort; // the detached window's DevTools port
  const offline = lane.name === "help-offline";
  // What the IDE is started with: the site this file serves, the window's
  // debugging port, and the window's frame, which the IDE's own option
  // "Show real OS titlebar" would otherwise decide: 0 the frame the page draws
  // a title bar for, 1 the Windows one. The option is never changed.
  const ideEnv = (realTitlebar) => ({
    TB_DOCS_HELP_SITE: origin,
    TB_DOCS_HELP_WINDOW_PORT: String(windowPort),
    TB_DOCS_HELP_REAL_TITLEBAR: String(realTitlebar),
  });

  // The frame shows `url` from the built site in the IDE's theme: the add-in
  // gave it that src with ?theme= and ?pane=1, the page it loaded is the
  // build's, not a 404, and the page applied the theme and hid the site's
  // navigation and header. With `fresh`, the page is a new document: not the
  // one markFrame marked.
  async function showsPage(url, { fresh = false } = {}) {
    const group = await themeGroup(c);
    const [pagePath, fragment] = url.split("#");
    const want = `${pages}${pagePath}?theme=${group}&pane=1${fragment ? `#${fragment}` : ""}`;
    // The frame can have this src already, hidden behind a summary, so the
    // page showing again is waited for too.
    const shown = { summary: "none", frame: "", browserDisabled: false };
    const src = await waitFor(c, async (c) => {
      const s = await frameSrc(c);
      return s === want && JSON.stringify(await pageState(c)) === JSON.stringify(shown) && s;
    });
    assert.equal(src ?? (await frameSrc(c)), want, "the frame's src");
    assert.ok((await toolWindow(c, PANE))?.visible, "the pane is not showing");
    assert.deepEqual(await pageState(c), shown);
    const loaded = await waitFor(c, async (c) => {
      const f = await frameOf(c, pages);
      const loadedUrl = `${pages}${pagePath.replace(/\/$/, "")}?theme=${group}&pane=1`;
      if (!f || f.url.replace(/\/\?/, "?") !== loadedUrl) return false;
      // A src set to the URL the frame already has reloads it, and a question
      // put to the page being replaced fails: that is not loaded yet.
      const ready = `document.readyState === "complete"${fresh ? " && !window.tbDocsTestMark" : ""}`;
      return (await frameEval(c, pages, ready).catch(() => false)) === true;
    });
    if (!loaded) {
      const frames = (await c.send("Page.getFrameTree")).frameTree.childFrames ?? [];
      assert.fail(
        `the frame did not load ${want}; the page's frames: ${JSON.stringify(frames.map((f) => f.frame.url))}`,
      );
    }
    if (fragment) assert.equal((await frameOf(c, pages)).urlFragment, `#${fragment}`);
    // The status the page itself came with, after any redirect to its folder.
    const status = await frameEval(c, pages, `performance.getEntriesByType("navigation")[0]?.responseStatus`);
    assert.equal(status, 200, `${url} as served`);
    assert.equal(
      await frameEval(c, pages, `document.documentElement.getAttribute("data-theme")`),
      group,
      "the page's theme",
    );
    assert.deepEqual(await paneChrome(), PANE_CHROME, "the site's chrome in the pane");
  }

  // What the frame's page shows of the site's chrome: the pane hides the
  // sidebar and the header, and keeps the breadcrumbs and the footer.
  const PANE_CHROME = { sidebar: "none", header: "none", breadcrumbs: "block", footer: "block" };
  const paneChrome = () =>
    frameEval(
      c,
      pages,
      `(() => {
        const shown = (s) => { const e = document.querySelector(s); return e ? getComputedStyle(e).display : "missing"; };
        return { sidebar: shown(".side-bar"), header: shown(".main-header"), breadcrumbs: shown(".breadcrumb-nav"), footer: shown("footer[role=contentinfo]") };
      })()`,
    );

  // Marks the page the frame shows now, so that showsPage can tell a page F1
  // loaded from it: F1 on the name whose page shows already loads it again,
  // and the page before the reload looks loaded until the reload begins.
  const markFrame = () => frameEval(c, pages, "window.tbDocsTestMark = true").catch(() => {});

  // The IDE's theme, switched with the IDE's own commands for its theme menu.
  const switchTheme = (group) =>
    c.evaluate(
      `executeIdeCommand(${JSON.stringify(group === "dark" ? "tbTheme_SwitchToDarkMode" : "tbTheme_SwitchToLightMode")})`,
    );

  // The frame's origin once the add-in has loaded after `mark`: the add-in's
  // server, whose port changes with every start, or the site this file serves.
  async function pagesOrigin(mark) {
    const loaded = await waitFor(c, async (c) => (await addinLines(c, mark)).some((l) => l.startsWith("loaded")));
    assert.ok(loaded, "the add-in never printed its loaded line");
    const serving = (await addinLines(c, mark)).filter((l) => l.startsWith("serving") || l.startsWith("not serving"));
    if (!offline) {
      assert.deepEqual(serving, [], "the add-in built without the archive serves it");
      return origin;
    }
    assert.equal(serving.length, 1, `the add-in's lines about the archive: ${JSON.stringify(serving)}`);
    const m = serving[0].match(SERVING);
    assert.ok(m, `the add-in does not serve the archive: ${serving[0]}`);
    return m[1];
  }

  // Press F1 at line:column, and expect `want` in place of the page, the frame
  // hidden, Open in browser disabled, and nothing printed.
  async function f1Summary(line, column, want) {
    await at(c, line, column);
    const mark = await consoleMark(c);
    await pressKey(c, "F1");
    const got = await waitFor(c, async (c) => {
      const s = await summary(c);
      return s?.declaration === want.declaration && s;
    });
    assert.deepEqual(got || (await summary(c)), { ...want, frameHidden: true, browserDisabled: true });
    assert.ok((await toolWindow(c, PANE))?.visible, "the pane is not showing");
    assert.deepEqual(await addinLines(c, mark), [], "the add-in printed something");
  }

  // Press F1 (or run `act`), and expect `url` in the pane and nothing printed.
  async function f1Shows(url, act = () => pressKey(c, "F1")) {
    const mark = await consoleMark(c);
    await markFrame();
    await act();
    await showsPage(url, { fresh: true });
    assert.deepEqual(await addinLines(c, mark), [], "the add-in printed something");
  }

  before(async () => {
    assert.ok(fs.existsSync(path.join(BUILT, "tB", "symbols.json")), `no built site in ${BUILT}: run build.bat`);
    entries = JSON.parse(fs.readFileSync(INDEX, "utf8")).symbols.length;
    server = await serveLoopback(createStaticHandler(BUILT));
    origin = `http://localhost:${server.port}`;
    // The add-in as committed, with the archive only in the offline lane,
    // whatever add-in/Resources/HELP holds in this working tree.
    const src = path.join(lane.work, "help-src");
    fs.rmSync(src, { recursive: true, force: true });
    const skip = [path.join(ADDIN, "Build"), path.join(ADDIN, "Resources", "HELP")];
    fs.cpSync(ADDIN, src, { recursive: true, filter: (f) => !skip.includes(f) });
    if (offline) {
      // A tree older than its sources is refused, so the lane never tests
      // a previous build's pages.
      const fresh = spawnSync(process.execPath, [FRESH_GATE, "--tree", BUILT_OFFLINE], { encoding: "utf8" });
      assert.equal(fresh.status, 0, `${BUILT_OFFLINE} is stale or missing; run build.bat first:\n${fresh.stderr}`);
      try {
        await writeHelpArchive({
          src: BUILT_OFFLINE,
          out: path.join(src, "Resources", "HELP", "site.zip"),
          skip: helpArchiveSkips,
        });
      } catch (err) {
        assert.fail(`writeHelpArchive failed: ${err.message}${err.problems ? `\n${err.problems.join("\n")}` : ""}`);
      }
    }
    await lane.addAddin(src);
    // A port the add-in is told before it binds it, so one the broker hands out
    // (WIP.Broker.md); held, with its slot, until this process ends.
    ({ port: windowPort } = await leaseSlot({ tag: "help.test detached window", port: true }));
    // The lane gives the page 1600 by 1000 (PAGE): in a page as small as the
    // user's IDE window can make it, the pane, which first floats at 480 by 640,
    // covers the toolbar's buttons and the editor.
    c = await lane.open(HOST, { env: ideEnv(0) });
    pages = await pagesOrigin(null);
    await openFile(c, FILE, { line: 5, column: 9 });
  });

  test("it loads with the whole index and the test switch on, and makes its pane", async () => {
    assert.ok((await loadedAddins(c)).some((a) => a.name === "twinBASIC Documentation Help"));
    const loaded = await waitFor(c, async (c) => (await addinLines(c, null)).find((l) => l.startsWith("loaded")));
    // Checked before any key is pressed: with the switch off, the add-in would
    // ignore TB_DOCS_HELP_SITE, and "Open in browser" would start a browser.
    const m = /^loaded, index (\d+) entries, packages ([^,]*), test switch on$/.exec(loaded);
    assert.ok(m, `the loaded line: ${loaded}`);
    assert.equal(Number(m[1]), entries);
    // The packages the host project references, and the ones those reference,
    // in the order the IDE lists them.
    assert.deepEqual(m[2].split(" ").sort(), ["VB", "VBA", "VBRUN", "tbIDE"], loaded);
    const pane = await toolWindow(c, PANE);
    assert.equal(pane?.title, "TWINBASIC HELP");
    assert.equal(pane.visible, false);
    assert.equal(await frameSrc(c), null, "a page in the frame before any was asked for");
  });

  // Asked from here, not from the pane: the server finds a path as GitHub
  // Pages does, and sends each file as the offline tree has it.
  test("the add-in's server answers as GitHub Pages does", { skip: !offline && "the help lane" }, async () => {
    const get = (p, o = {}) => fetch(`${pages}${p}`, { redirect: "manual", signal: AbortSignal.timeout(10000), ...o });
    const tree = (rel) => fs.readFileSync(path.join(BUILT_OFFLINE, rel));

    let r = await get("/tB/Modules/Interaction/MsgBox?theme=dark&pane=1");
    assert.equal(r.status, 200);
    assert.equal(r.headers.get("content-type"), "text/html; charset=utf-8");
    assert.equal(r.headers.get("content-encoding"), "gzip");
    assert.ok(Buffer.from(await r.arrayBuffer()).equals(tree("tB/Modules/Interaction/MsgBox.html")));

    r = await get("/favicon.png");
    assert.equal(r.status, 200);
    assert.equal(r.headers.get("content-type"), "image/png");
    assert.equal(r.headers.get("content-encoding"), null);
    assert.ok(Buffer.from(await r.arrayBuffer()).equals(tree("favicon.png")));

    r = await get("/Features/Advanced?pane=1");
    assert.equal(r.status, 301);
    assert.equal(r.headers.get("location"), "/Features/Advanced/?pane=1");
    await r.body?.cancel();
    r = await get("/Features/Advanced/");
    assert.ok(Buffer.from(await r.arrayBuffer()).equals(tree("Features/Advanced/index.html")));

    // A file the archive lacks, a page or a download, is on the site, the one
    // the lane serves.
    assert.ok(fs.existsSync(path.join(BUILT_OFFLINE, "Documentation/Development/Building.html")));
    r = await get("/Documentation/Development/Building?pane=1");
    assert.equal(r.status, 302);
    assert.equal(r.headers.get("location"), `${origin}/Documentation/Development/Building?pane=1`);
    await r.body?.cancel();
    r = await get("/Videos/");
    assert.equal(r.status, 302);
    assert.equal(r.headers.get("location"), `${origin}/Videos/`);
    await r.body?.cancel();
    r = await get("/no/such/page.html");
    assert.equal(r.status, 302);
    assert.equal(r.headers.get("location"), `${origin}/no/such/page.html`);
    await r.body?.cancel();
    assert.ok(fs.existsSync(path.join(BUILT_OFFLINE, "Features/Packages/downloads/impexp.py")));
    r = await get("/Features/Packages/downloads/impexp.py");
    assert.equal(r.status, 302);
    assert.equal(r.headers.get("location"), `${origin}/Features/Packages/downloads/impexp.py`);
    await r.body?.cancel();
    r = await get("/no/such/picture.png");
    assert.equal(r.status, 302);
    await r.body?.cancel();
    // A path the server refuses is not sent on.
    r = await get("/tB%5Cindex.html");
    assert.equal(r.status, 404);
    await r.body?.cancel();
    r = await get("/tB/Modules/Interaction/MsgBox", { method: "HEAD" });
    assert.equal(r.status, 200);
    assert.ok(Number(r.headers.get("content-length")) > 0);
  });

  // [line, column, URL] in Cases.twin; the comment says what the cursor is on.
  // The compiler's hover says where most of these are declared; the ones it
  // says nothing about (Debug.Print, a statement, a comment) take the index's
  // lookup alone.
  const CASES = [
    [5, 9, "/tB/Modules/Interaction/MsgBox", "the first letter of a name"],
    [5, 15, "/tB/Modules/Interaction/MsgBox", "just after a name"],
    [6, 27, "/tB/Modules/Interaction/MsgBox", "VBA.Interaction.MsgBox: Container.Name"],
    [6, 15, "/tB/Modules/Interaction/", "VBA.Interaction: Package.Name"],
    [7, 15, "/tB/Modules/Debug#print", "Debug.Print: the member, not the statement"],
    [7, 21, "/tB/Modules/Strings/Len", "a function inside a call"],
    [8, 9, "/tB/Core/Dim", "a statement"],
    [9, 9, "/tB/Core/Close", "a bare name: the statement wins over twelve methods"],
    [10, 28, "/tB/Packages/tbIDE/ToolWindows#add", "a chain in a comment: ToolWindows.Add"],
    [4, 12, "/tB/Modules/Collection/Add", "c.Add, c a Collection: VBA._Collection's"],
    [21, 15, "/tB/Modules/Collection/Add", ".Add inside With on a Collection"],
    [16, 35, "/tB/Packages/tbIDE/ToolWindows#add", "Host.ToolWindows.Add: tbIDE.IToolWindowsV1's"],
    [14, 25, "/tB/Packages/VB/CheckBox/#value", "a CheckBox's Value: VB._CheckBox's"],
    [14, 42, "/tB/Modules/Constants/VbMsgBoxStyle", "an enumeration's value"],
    [14, 52, "/tB/Modules/Constants/", "a constant"],
    // Hover names another procedure for these, GetAppPath and GetErrNumber,
    // but its package still picks VB's App from AppGlobalClassObject's, and
    // ErrObject.Number from every other Number.
    [14, 36, "/tB/Packages/VB/App/#path", "App.Path"],
    [14, 64, "/tB/Modules/ErrObject/Number", "Err.Number"],
    // A data type is the language's, at its section of the Data Types page;
    // the function or property of the same name is picked by the hover's
    // package, which names VBA for String( and Date, and nothing for a type.
    // No two of the page's cases are next to each other: a change of
    // fragment alone does not load the page again.
    [8, 29, "/Reference/Data-Types#long", "a data type: Long"],
    [42, 27, "/tB/Modules/Strings/String", 'String(5, "x"): the function, not the type'],
    [42, 18, "/Reference/Data-Types#string", "As String: the type, not the function"],
    [43, 25, "/tB/Modules/DateTime/Date", "= Date: the property, not the type"],
    [43, 18, "/Reference/Data-Types#date", "As Date: the type, not the property"],
  ];
  for (const [line, column, url, what] of CASES) {
    test(`F1 on ${what} (${line}:${column})`, async () => {
      await at(c, line, column);
      await f1Shows(url);
    });
  }

  test("in a page of 1600 by 1000 the pane first floats at 480 by 640, inside the page", async () => {
    const box = await floatingBox(c);
    assert.ok(box, "the pane is not floating");
    assert.deepEqual([box.width, box.height], [480, 640], JSON.stringify(box));
    assert.equal(boxFault(box), "", JSON.stringify(box));
  });

  test("a selection is looked up as selected", async () => {
    // "Print" alone is the bare name, where the cursor would give Debug.Print.
    await select(c, { startLine: 7, startColumn: 15, endLine: 7, endColumn: 20 });
    await sleep(100);
    await f1Shows("/tB/Core/Print");
  });

  test("a name with no page says so and leaves the page", async () => {
    const was = await frameSrc(c);
    await at(c, 8, 13);
    await pressKey(c, "F1");
    const text = "No help for 'zzqHelpProbe'";
    const shown = await waitFor(c, async (c) => (await notifications(c)).find((t) => t.trim() === text));
    assert.ok(shown, `notifications: ${JSON.stringify(await notifications(c))}`);
    await sleep(300);
    assert.equal(await frameSrc(c), was);
  });

  test("F1 with no name at the cursor puts the focus in the search box", async () => {
    await at(c, 3, 3);
    await pressKey(c, "F1");
    assert.equal(await waitFor(c, async (c) => (await focusedId(c)) === "helpSearch" && "helpSearch"), "helpSearch");
  });

  // P15: the compiler's hover gives a name's [Description]. A name declared
  // where the documentation has no page shows that in place of the page.
  test("a name the project declares shows its declaration and description, though a package has a page for it", async () => {
    // Cases.Beep, not VBA.Interaction.Beep.
    await f1Summary(18, 10, {
      declaration: "Sub Beep ( )",
      description: "Sounds the project's own tone.",
      where: "Declared in HelpHost.Cases",
    });
  });

  test("a procedure of the project with no [Description] shows its declaration", async () => {
    await f1Summary(36, 22, {
      declaration: "Function Plain ( ) As Long",
      description: "No description.",
      where: "Declared in HelpHost.Cases",
    });
  });

  test("a class of the project shows its description, without its members", async () => {
    await f1Summary(35, 24, {
      declaration: "class Gadget",
      description: "A gadget of the project's own.",
      where: "Declared in HelpHost",
    });
  });

  test("F1 on a procedure's own name where it is declared says so, and leaves the pane", async () => {
    const was = await summary(c);
    await at(c, 27, 17);
    await pressKey(c, "F1");
    const text = "No help for 'Beep': it is declared here";
    const shown = await waitFor(c, async (c) => (await notifications(c)).find((t) => t.trim() === text));
    assert.ok(shown, `notifications: ${JSON.stringify(await notifications(c))}`);
    await sleep(300);
    assert.deepEqual(await summary(c), was);
  });

  test("a member of a late-bound object lists its pages, and a click shows one", async () => {
    // o.Add, o As Object: the compiler cannot tell either, so every page of an
    // Add is listed.
    await at(c, 17, 12);
    const was = await frameSrc(c);
    await pressKey(c, "F1");
    // A list read as soon as it had items once held 3 of the 12, so wait until
    // it has stopped changing for a second.
    let list = "";
    let since = 0;
    const items = await waitFor(c, async (c) => {
      const r = await results(c);
      if (JSON.stringify(r) !== list) [list, since] = [JSON.stringify(r), Date.now()];
      return r.length > 0 && Date.now() - since >= 1000 && r;
    });
    // The index has 12 Add pages; those of the packages the project does not
    // reference are not offered.
    assert.equal(items?.length, 6, JSON.stringify(items));
    assert.ok(items.includes("Collection.Addmethod") && items.includes("ToolWindows.Addmethod"), JSON.stringify(items));
    assert.equal(await searchValue(c), "o.Add");
    assert.equal(await frameSrc(c), was, "a list must not change the page");
    await f1Shows("/tB/Modules/Collection/Add", () =>
      click(c, { toolWindow: PANE, css: "#helpResults .hit .label", text: "Collection.Add" }),
    );
  });

  test("the search box finds names as typed, and Enter shows the first", async () => {
    await emptySearch(c);
    await typeText(c, "msgbo");
    const items = await waitFor(c, async (c) => {
      const r = await results(c);
      return r[0] === "Interaction.MsgBoxfunction" && r;
    });
    assert.ok(items, JSON.stringify(await results(c)));
    await f1Shows("/tB/Modules/Interaction/MsgBox", () => pressKey(c, "Enter"));
  });

  test("a search that matches nothing says so", async () => {
    await emptySearch(c);
    await typeText(c, "zzqq");
    assert.ok(
      await waitFor(c, async (c) => (await results(c)).join() === "No matches"),
      JSON.stringify(await results(c)),
    );
    // The list draws its rows a moment after it has them: no row has a height yet.
    const box = await waitFor(c, async (c) => (await resultsBox(c))?.row > 0 && (await resultsBox(c)));
    assert.ok(box && Math.abs(box.height - box.row) < 1 && !box.scrollbar, JSON.stringify(await resultsBox(c)));
  });

  test("the results list is as tall as its rows, up to 35% of the pane", async () => {
    await emptySearch(c);
    await typeText(c, "msgbo");
    // The add-in fills the list before it shows it, so wait for both.
    const few = await waitFor(c, async (c) => {
      const r = await results(c);
      return r.length > 0 && r[0] === "Interaction.MsgBoxfunction" && (await resultsBox(c))?.row > 0 && r.length;
    });
    let box = await resultsBox(c);
    assert.ok(
      box.height < 0.3 * box.pane && Math.abs(box.height - few * box.row) < 1 && !box.scrollbar,
      JSON.stringify({ few, box }),
    );
    // "a" finds the search's limit of 100, far more than 35% of the pane holds.
    await emptySearch(c);
    await typeText(c, "a");
    box = await waitFor(c, async (c) => {
      const b = await resultsBox(c);
      return b && (await results(c)).length > 0 && b.scrollbar && b;
    });
    assert.ok(box && Math.abs(box.height - 0.35 * box.pane) < 1, JSON.stringify(box));
  });

  // The list's own height is its rows (the two tests before), so the line
  // between it and the page is the page's top border, and only while it shows.
  test("the page is under a line in the theme's text colour at 40% while the list shows, and the line goes with the list", async () => {
    await emptySearch(c);
    await typeText(c, "msgbo");
    assert.ok(await waitFor(c, async (c) => (await resultsBox(c))?.row > 0), "the list did not show");
    let got = await paneSeparator(c);
    assert.ok(got.listShown, JSON.stringify(got));
    assert.equal(separatorFault(got), "", JSON.stringify(got));
    await emptySearch(c);
    assert.ok(await waitFor(c, async (c) => (await resultsBox(c)) === null), "the list did not hide");
    got = await paneSeparator(c);
    assert.ok(!got.listShown, JSON.stringify(got));
    assert.equal(separatorFault(got), "", JSON.stringify(got));
  });

  test("the search box's clear button hides the results", async () => {
    await emptySearch(c);
    await typeText(c, "zzqq");
    assert.ok(await waitFor(c, async (c) => (await results(c)).join() === "No matches"));
    // The clear button is drawn at the box's right end, inside its padding.
    const r = await elementRect(c, { toolWindow: PANE, css: "#helpSearch" });
    await clickAt(c, r.x + r.width - 14, r.y + r.height / 2);
    assert.equal(await searchValue(c), "", "the click missed the clear button");
    assert.ok(await waitFor(c, async (c) => (await resultsBox(c)) === null), JSON.stringify(await resultsBox(c)));
  });

  test("the toolbar's Help button puts the focus in the search box", async () => {
    await at(c, 7, 21);
    await click(c, "addinButton-tbDocsHelp");
    assert.equal(await waitFor(c, async (c) => (await focusedId(c)) === "helpSearch" && "helpSearch"), "helpSearch");
  });

  // The IDE draws the pane's header, the tool-window header the detached
  // window's title bar copies; what a copy has to match is read here, while the
  // pane shows.
  let paneHeader;
  test("the pane's header is the IDE's tool-window header", async () => {
    paneHeader = await c.evaluate(`(() => {
      const h = [...document.querySelectorAll("#ADDIN_${PANE} .sectionHeader")]
        .find((e) => e.textContent.trim() === "TWINBASIC HELP");
      if (!h) return null;
      const s = getComputedStyle(h);
      return {
        height: h.getBoundingClientRect().height,
        look: { backgroundColor: s.backgroundColor, color: s.color, fontSize: s.fontSize, fontWeight: s.fontWeight, paddingTop: s.paddingTop, paddingBottom: s.paddingBottom },
      };
    })()`);
    assert.ok(paneHeader, "no header for the pane");
  });

  test("Open in browser opens the page the pane shows", async () => {
    const mark = await consoleMark(c);
    await click(c, { toolWindow: PANE, css: "#helpBrowser" });
    const urls = await waitFor(c, async (c) => {
      const u = await openedUrls(c, { since: mark });
      return u.length > 0 && u;
    });
    assert.deepEqual(urls, [`${origin}/tB/Modules/Interaction/MsgBox`]);
  });

  // The background, since it is not inherited: the IDE gives the tool window
  // the theme's text colour already, so the pane's would match with no CSS.
  test("the pane's colours are the IDE theme's", async () => {
    const colours = await inPane(
      c,
      `const probe = document.createElement("div");
  probe.style.background = "var(--themeGeneralPanelBackColor)";
  document.body.appendChild(probe);
  const theme = getComputedStyle(probe).backgroundColor;
  probe.remove();
  return { theme, pane: getComputedStyle(root.querySelector("#helpWrap")).backgroundColor };`,
    );
    assert.ok(colours.theme && colours.theme !== "rgba(0, 0, 0, 0)", JSON.stringify(colours));
    assert.equal(colours.pane, colours.theme);
  });

  // Through the IDE's own commands for its theme menu, which tell the compiler,
  // and so the add-in, of the change (OnChangedTheme). The IDE's save of the
  // theme, where the user's own IDE reads it, is guarded by the
  // --no-save-ide-settings every harness IDE has (IDE_FLAGS in
  // scripts/lib/tb-ide.mjs), so the registry keeps the user's theme. The test
  // switches it back at the end for the tests after it.
  test("a theme change loads the page again in the new theme", async () => {
    const page = "/tB/Modules/Interaction/MsgBox";
    const was = await themeGroup(c);
    const other = was === "dark" ? "light" : "dark";
    const switchTo = (group) =>
      c.evaluate(
        `executeIdeCommand(${JSON.stringify(group === "dark" ? "tbTheme_SwitchToDarkMode" : "tbTheme_SwitchToLightMode")})`,
      );
    try {
      await switchTo(other);
      assert.equal(await themeGroup(c), other, "the IDE's theme did not change");
      await showsPage(page);
    } finally {
      await switchTo(was);
    }
    await showsPage(page);
  });

  test("a compiler restart empties the pane, and the add-in puts its page back", async () => {
    // The old frame is marked, so that the frame found after is the new pane's.
    await inPane(c, `root.querySelector("#helpPage").dataset.beforeRestart = "1";`);
    const mark = await consoleMark(c);
    await lane.restartCompiler();
    pages = await pagesOrigin(mark);
    const src = await waitFor(c, (c) =>
      inPane(
        c,
        `const f = root.querySelector("#helpPage"); return f && !f.dataset.beforeRestart && f.getAttribute("src");`,
      ),
    );
    assert.equal(src, `${pages}/tB/Modules/Interaction/MsgBox?theme=${await themeGroup(c)}&pane=1`);
  });

  // A page reached from the pane's page has no parameters of its own; the site
  // keeps both for the tab.
  test("a page reached by a link keeps the IDE's theme and the pane's layout", async () => {
    await f1Shows("/tB/Modules/Interaction/MsgBox", () => at(c, 5, 9).then(() => pressKey(c, "F1")));
    const next = "/tB/Modules/Strings/Len";
    await frameEval(c, pages, `location.href = ${JSON.stringify(next)}`);
    const loaded = await waitFor(c, async (c) => {
      const f = await frameOf(c, pages);
      if (f?.url !== `${pages}${next}`) return false;
      return (await frameEval(c, pages, `document.readyState === "complete"`).catch(() => false)) === true;
    });
    assert.ok(loaded, `the frame did not load ${next}: ${JSON.stringify(await frameOf(c, pages))}`);
    assert.equal(
      await frameEval(c, pages, `document.documentElement.getAttribute("data-theme")`),
      await themeGroup(c),
      "the page's theme",
    );
    assert.deepEqual(await paneChrome(), PANE_CHROME, "the site's chrome in the pane");
  });

  // In both of the IDE's groups, with the frame preferring the other colour
  // scheme: the page F1 shows, the same page given again by a theme change,
  // and a page reached by a link from either. The pane's frame is on the IDE
  // page's own site, so it is in the IDE page's frame tree, and the scheme is
  // emulated on the IDE's page.
  test("the pane's page has the IDE's theme in Light and Dark, after a link too, whatever the frame's colour scheme", async () => {
    const was = await themeGroup(c);
    const page = "/tB/Modules/Interaction/MsgBox";
    const next = "/tB/Modules/Strings/Len";
    const paneDocs = async (group) => {
      await preferOther(c, group);
      return frameEval(c, pages, DOCS_STATE).catch(() => null);
    };
    const faults = [];
    try {
      for (const group of [was, otherScheme(was)]) {
        if (group === was) {
          await f1Shows(page, () => at(c, 5, 9).then(() => pressKey(c, "F1")));
        } else {
          await markFrame();
          await switchTheme(group);
          assert.equal(await themeGroup(c), group, "the IDE's theme did not change");
          await showsPage(page, { fresh: true });
        }
        faults.push(docsThemeFault(await paneDocs(group), group, `${group}, the page given`));
        await frameEval(c, pages, `location.href = ${JSON.stringify(next)}`);
        const linked = await waitFor(c, async () => {
          const s = await paneDocs(group);
          return s?.url === next && s.ready && s;
        });
        faults.push(docsThemeFault(linked || (await paneDocs(group)), group, `${group}, after a link`));
      }
      assert.deepEqual(faults.filter(Boolean), []);
    } finally {
      await c.send("Emulation.setEmulatedMedia", { features: [] });
      await switchTheme(was);
    }
    await showsPage(page);
  });

  // Hover help: links in the IDE's own hover under the mouse, while the pane's
  // box is ticked.
  const hoverBox = () => inPane(c, `return root.querySelector("#helpHover")?.checked ?? null;`);

  // The settings panel, in the pane (inPane) and in the window's page (its
  // `root` is the document): what the gear says, and whether the panel and the
  // shade under it show.
  const SETTINGS_STATE = `const g = root.querySelector("#helpSettings");
    const p = root.querySelector("#helpSettingsPanel");
    const s = root.querySelector("#helpSettingsShade");
    if (!g || !p || !s) return null;
    return {
      expanded: g.getAttribute("aria-expanded"),
      panel: getComputedStyle(p).display !== "none",
      shade: getComputedStyle(s).display !== "none",
    };`;
  const SETTINGS_OPEN = { expanded: "true", panel: true, shade: true };
  const SETTINGS_CLOSED = { expanded: "false", panel: false, shade: false };
  const paneSettings = () => inPane(c, SETTINGS_STATE);
  const windowSettings = () => win.evaluate(`(() => { const root = document; ${SETTINGS_STATE} })()`);
  // Waits for a view's panel to be in `want`, which the add-in sets a moment
  // after the click, and fails with what it was.
  async function settingsBecome(read, want, what) {
    await waitFor(c, async () => JSON.stringify(await read()) === JSON.stringify(want));
    assert.deepEqual(await read(), want, what);
  }
  // The look the panel has to have, in the pane (`root`) or in the window's
  // page: the theme's panel colours and border, read from elements the theme's
  // own properties are applied to.
  const PANEL_LOOK = `(() => {
    const look = (e) => { const s = getComputedStyle(e); return { background: s.backgroundColor, color: s.color, border: s.borderTopColor, borderStyle: s.borderTopStyle, borderWidth: s.borderTopWidth }; };
    const probe = document.createElement("div");
    probe.style.cssText = "background: var(--themeGeneralPanelBackColor); color: var(--themeToolWindowBodyForeColor); border: var(--themePropertySheetValueBorderColor)";
    (root.querySelector("#helpWrap") ?? root.body).appendChild(probe);
    const want = look(probe);
    probe.remove();
    return { want, got: look(root.querySelector("#helpSettingsPanel")) };
  })()`;
  const paneLook = () => inPane(c, `return ${PANEL_LOOK};`);
  const windowLook = () => win.evaluate(`(() => { const root = document; return ${PANEL_LOOK}; })()`);
  // Where the panel, the gear and the shade are, and what a click at the
  // panel's centre and at the page's would reach: the panel's own element, or
  // the shade.
  const SETTINGS_PLACE = `const box = (e) => { const r = e.getBoundingClientRect(); return [r.left, r.top, r.right, r.bottom].map(Math.round); };
    const g = root.querySelector("#helpSettings");
    const p = root.querySelector("#helpSettingsPanel");
    const page = root.querySelector("#helpPage").getBoundingClientRect();
    const hitAt = (x, y) => { const e = root.elementFromPoint(x, y); return e?.closest("#helpSettingsPanel") ? "panel" : e?.id ?? null; };
    const r = p.getBoundingClientRect();
    return {
      gear: box(g),
      panel: box(p),
      wrap: box(root.querySelector("#helpWrap")),
      row: p.contains(root.querySelector("#helpHoverLabel")),
      panelHit: hitAt(r.left + r.width / 2, r.top + r.height / 2),
      pageHit: hitAt(page.left + page.width / 2, page.top + page.height / 2),
    };`;
  const panePlace = () => inPane(c, SETTINGS_PLACE);
  const windowPlace = () => win.evaluate(`(() => { const root = document; ${SETTINGS_PLACE} })()`);
  // What a view's panel has to look like open: right-aligned with the gear
  // and under it, inside the view, on top of everything else; and the shade
  // over the page.
  function assertPlace(place, what) {
    const [gl, gt, gr, gb] = place.gear;
    const [pl, pt, pr, pb] = place.panel;
    const [wl, wt, wr, wb] = place.wrap;
    assert.equal(pr, gr, `${what}: the panel is not right-aligned with the gear`);
    assert.ok(pt >= gb, `${what}: the panel is not under the gear: ${JSON.stringify(place)}`);
    assert.ok(
      pl >= wl && pr <= wr && pb <= wb && gt >= wt && gl >= wl,
      `${what}: the panel is cut off: ${JSON.stringify(place)}`,
    );
    assert.ok(place.row, `${what}: the Hover help row is not in the panel`);
    assert.equal(place.panelHit, "panel", `${what}: something is over the panel`);
    assert.equal(place.pageHit, "helpSettingsShade", `${what}: the shade is not over the page`);
  }
  // Ticks or unticks one of the pane's boxes, which are in the settings
  // panel: opens the panel, clicks the box, checks the panel is still open,
  // and closes it with the gear.
  async function clickSettingBox(css) {
    await click(c, { toolWindow: PANE, css: "#helpSettings" });
    await settingsBecome(paneSettings, SETTINGS_OPEN, "the gear did not open the panel");
    await click(c, { toolWindow: PANE, css });
    assert.deepEqual(await paneSettings(), SETTINGS_OPEN, "the panel closed when the box was clicked");
    await click(c, { toolWindow: PANE, css: "#helpSettings" });
    await settingsBecome(paneSettings, SETTINGS_CLOSED, "the gear did not close the panel");
  }
  const clickHoverBox = () => clickSettingBox("#helpHover");
  const clickAllBox = () => clickSettingBox("#helpAllPackages");
  // The All packages box in the pane, and in the window's page.
  const allBox = () => inPane(c, `return root.querySelector("#helpAllPackages")?.checked ?? null;`);
  const windowAllBox = () => win.evaluate(`document.getElementById("helpAllPackages").checked`);
  // The two page-side fixes: a box each in the settings panel, and what the
  // fix's script leaves on the IDE's page while it is on.
  const FIXES = [
    { box: "helpKeysOn", global: "tbDocsAddinKeys", label: "Ctrl and Alt shortcuts of add-ins" },
    { box: "helpFindOn", global: "tbDocsTextFind", label: "Find in the shortcut editors" },
  ];
  const paneFixBox = (id) => inPane(c, `return root.querySelector("#helpSettingsPanel #${id}")?.checked ?? null;`);
  const windowFixBox = (id) => win.evaluate(`document.getElementById(${JSON.stringify(id)}).checked`);
  const fixInstalled = (name) => c.evaluate(`!!window.${name}`);
  // Waits for the results to be `want`, a function of the rows, and fails with the rows.
  async function resultsBecome(want, what) {
    const rows = await waitFor(c, async (c) => {
      const r = await results(c);
      return want(r) && r;
    });
    assert.ok(rows, `${what}: ${JSON.stringify(await results(c))}`);
    return rows;
  }
  const NO_MATCHES = (r) => r.join() === "No matches";
  // The eight Waynes... controls are in CustomControls, and no other name has
  // "Waynes" in it.
  const HAS_WAYNES = (r) => r.some((t) => t.startsWith("CustomControlsPackage.Waynes"));
  // A class's hover lists its members, and is taller than the room below it.
  const COLLECTION_LINK = "Help: Collection class (VBA)";
  const LEN_LINK = "Help: Len function (VBA.Strings)";

  // The pane floats over the middle of the code editor, where the mouse has to
  // rest and click: move it against the window's right edge.
  const paneAside = () =>
    c.evaluate(`(() => {
  const s = toolWindowsById[${JSON.stringify(PANE)}].shadowDom.host.closest(".floatingPanel");
  if (!s) return null;
  s.style.left = (innerWidth - s.getBoundingClientRect().width - 4) + "px";
  return s.getBoundingClientRect().left;
})()`);

  // The hover under the mouse at a place, once the IDE's own text is in it.
  // The first hover after a compiler restart can come back empty, while the
  // compiler is still starting, and stays empty however long the mouse rests;
  // the mouse then rests again, once.
  async function mouseHover(line, column, want = "in VBA.") {
    await paneAside();
    for (let attempt = 0; ; attempt++) {
      await restMouse(c, line, column);
      const t = await waitFor(c, async (c) => {
        const t = await hoverText(c);
        return t?.includes(want) && t;
      });
      if (t || attempt === 1) return t;
    }
  }

  // The settings gear at the bar's right end opens a panel of rows under it.
  test("the bar ends in a gear, drawn in the text colour, as tall and bordered as the other buttons", async () => {
    const bar = await inPane(
      c,
      `const el = (id) => root.querySelector("#" + id);
      const g = el("helpSettings"), d = el("helpDetach");
      const gs = getComputedStyle(g), ds = getComputedStyle(d);
      return {
        order: [...el("helpBar").children].map((e) => e.id),
        title: g.title,
        label: g.getAttribute("aria-label"),
        expanded: g.getAttribute("aria-expanded"),
        shapes: g.querySelectorAll("svg circle, svg path").length > 0,
        stroke: getComputedStyle(g.querySelector("svg path")).stroke === gs.color,
        sameHeight: g.getBoundingClientRect().height === d.getBoundingClientRect().height,
        sameBorder: gs.borderTopColor === ds.borderTopColor && gs.borderTopWidth === ds.borderTopWidth,
        sameFont: gs.fontSize === ds.fontSize && gs.color === ds.color,
      };`,
    );
    assert.deepEqual(bar, {
      order: ["helpSearch", "helpBrowser", "helpDetach", "helpSettingsWrap"],
      title: "Settings",
      label: "Settings",
      expanded: "false",
      shapes: true,
      stroke: true,
      sameHeight: true,
      sameBorder: true,
      sameFont: true,
    });
    assert.deepEqual(await paneSettings(), SETTINGS_CLOSED);
  });

  test("the gear opens the settings panel under it, over the pane, and sets aria-expanded", async () => {
    await click(c, { toolWindow: PANE, css: "#helpSettings" });
    await settingsBecome(paneSettings, SETTINGS_OPEN, "the gear did not open the panel");
    assertPlace(await panePlace(), "the pane");
    const { want, got } = await paneLook();
    assert.deepEqual(got, want, "the panel is not in the theme's colours");
    assert.notEqual(got.borderStyle, "none");
    await click(c, { toolWindow: PANE, css: "#helpSettings" });
    await settingsBecome(paneSettings, SETTINGS_CLOSED, "the gear did not close the panel");
  });

  // A click outside the panel closes it and does nothing else: not on another
  // control, which is under the shade, and not over the page's frame.
  async function clickOutsidePane(css) {
    await click(c, { toolWindow: PANE, css: "#helpSettings" });
    await settingsBecome(paneSettings, SETTINGS_OPEN, "the gear did not open the panel");
    // The shade shows in the page's style before the compositor has drawn it,
    // and a press over a cross-site frame is routed by what was drawn: once in
    // four runs it reached the frame, and the panel stayed open.
    await c.evaluate(`new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r(true))))`);
    const mark = await consoleMark(c);
    const r = await elementRect(c, { toolWindow: PANE, css });
    await clickAt(c, r.x + r.width / 2, r.y + r.height / 2);
    await settingsBecome(paneSettings, SETTINGS_CLOSED, `a click on ${css} did not close the panel`);
    assert.deepEqual(await openedUrls(c, { since: mark }), [], `the click on ${css} reached it`);
  }

  test("a click on the shade closes the panel, over another control or over the page", async () => {
    await clickOutsidePane("#helpBrowser");
    await clickOutsidePane("#helpPage");
  });

  // The live site is on another site than the IDE's page, and a press over a
  // frame there goes to the frame's own process.
  test("a click over a page on another site closes the panel", async () => {
    const was = await frameSrc(c);
    const other = `http://127.0.0.1:${server.port}/index.html`;
    await inPane(c, `root.querySelector("#helpPage").src = ${JSON.stringify(other)}; return null;`);
    assert.ok(await waitFor(c, async (c) => !(await frameOf(c, pages))), "the frame is still in the page's tree");
    // The new page has a DevTools target of its own (P3); the click waits for it to load.
    const loaded = await waitFor(c, async () => {
      const t = await attach(lane.port, other, { type: "iframe", timeout: 5 * 1000 }).catch(() => null);
      try {
        return t && (await t.evaluate(`document.readyState`)) === "complete";
      } finally {
        t?.close();
      }
    });
    assert.ok(loaded, `the frame did not load ${other}`);
    try {
      await clickOutsidePane("#helpPage");
    } finally {
      await inPane(c, `root.querySelector("#helpPage").src = ${JSON.stringify(was)}; return null;`);
      await waitFor(c, async (c) => !!(await frameOf(c, pages)));
    }
  });

  test("Esc closes the panel from inside it, and the gear has the focus", async () => {
    await click(c, { toolWindow: PANE, css: "#helpSettings" });
    await settingsBecome(paneSettings, SETTINGS_OPEN, "the gear did not open the panel");
    await inPane(c, `root.querySelector("#helpHover").focus(); return null;`);
    assert.equal(await focusedId(c), "helpHover");
    await pressKey(c, "Escape");
    await settingsBecome(paneSettings, SETTINGS_CLOSED, "Esc did not close the panel");
    assert.ok(
      await waitFor(c, async (c) => (await focusedId(c)) === "helpSettings"),
      `the focus: ${await focusedId(c)}`,
    );
  });

  test("the settings panel has a box for each page-side fix, ticked, and the fixes are in the page", async () => {
    for (const { box, global, label } of FIXES) {
      assert.equal(await paneFixBox(box), true, `${label}: the pane's box is missing or unticked`);
      assert.equal(await fixInstalled(global), true, `${label}: window.${global} is not set`);
      const text = await inPane(c, `return root.querySelector("#${box}")?.parentNode.textContent.trim() ?? null;`);
      assert.equal(text, label);
    }
  });

  // Unticking a box takes the fix out of the page at once, ticking it puts it back.
  test("unticking a fix's box removes it from the page, and ticking it puts it back", async () => {
    for (const { box, global, label } of FIXES) {
      await clickSettingBox(`#${box}`);
      assert.ok(await waitFor(c, async () => (await fixInstalled(global)) === false), `${label}: still in the page`);
      assert.equal(await paneFixBox(box), false);
      await clickSettingBox(`#${box}`);
      assert.ok(await waitFor(c, () => fixInstalled(global)), `${label}: not back in the page`);
      assert.equal(await paneFixBox(box), true);
    }
  });

  // The IDE's own command opens Manage Keyboard Shortcuts, whose first entry,
  // the built-in <DEFAULT> group, is a read-only text area of JSON.
  test("Ctrl+F in Manage Keyboard Shortcuts finds text, scrolls to it, and Esc leaves the dialog open", async () => {
    const WORD = "ctrl";
    const AREA = ".modalDialogContainer textarea.genericMonospaceTextArea";
    const onArea = (expr) =>
      c.evaluate(`(() => { const a = document.querySelector(${JSON.stringify(AREA)}); return a ? ${expr} : null; })()`);
    const modals = () => c.evaluate(`modalDialogs.length`);
    const selection = () =>
      onArea(
        `({ start: a.selectionStart, end: a.selectionEnd, text: a.value.substring(a.selectionStart, a.selectionEnd), focused: document.activeElement === a, top: a.scrollTop })`,
      );
    const findBox = () =>
      c.evaluate(`(() => {
        const i = document.querySelector(".tbDocsFindBar input");
        return i ? { focused: document.activeElement === i, missing: i.classList.contains("tbDocsFindMissing") } : null;
      })()`);
    // What the script measures for the selection: in view, and not under the find box.
    const visibility = () => onArea(`window.tbDocsTextFind.visible(a)`);
    // The selection is the match at `start` for `word`, has the focus, and shows.
    const selectionIs = async (start, what, word = WORD) => {
      const ok = await waitFor(c, async () => (await selection())?.start === start);
      const s = await selection();
      assert.ok(ok, `${what}: the selection is ${JSON.stringify(s)}, expected a match at ${start}`);
      assert.equal(s.text.toLowerCase(), word, what);
      assert.equal(s.focused, true, `${what}: the text area has not got the focus`);
      const v = await visibility();
      assert.ok(v.visible, `${what}: the match is not in view: ${JSON.stringify({ ...v, scrollTop: s.top })}`);
    };
    const keyDown = (key, mods) => pressKey(c, key, mods);
    assert.equal(await modals(), 0, "a dialog is open already");
    await c.evaluate(`executeIdeCommand("tbKeyboardShortcuts_ShowManageKeyboardShortcuts")`);
    try {
      assert.ok(await waitFor(c, async () => (await onArea("true")) === true), "the dialog has no text area");
      const { at, length, room } = await onArea(`(() => {
        const t = a.value.toLowerCase(), at = [];
        for (let i = t.indexOf(${JSON.stringify(WORD)}); i >= 0; i = t.indexOf(${JSON.stringify(WORD)}, i + 1)) at.push(i);
        return { at, length: t.length, room: a.scrollHeight - a.clientHeight };
      })()`);
      assert.ok(at.length >= 3, `"${WORD}" is in the text ${at.length} times`);
      assert.ok(room > 0, "the text does not need scrolling");
      await onArea(`(a.focus(), a.setSelectionRange(0, 0), true)`);

      await pressKey(c, "f", { ctrl: true });
      assert.ok(
        await waitFor(c, async () => (await findBox())?.focused === true),
        `Ctrl+F opened no find box: ${JSON.stringify(await findBox())}`,
      );
      assert.equal(await modals(), 1, "Ctrl+F closed the dialog");
      await typeText(c, WORD);
      await pressKey(c, "Enter");
      await selectionIs(at[0], "Enter: the first match");
      await pressKey(c, "F3");
      await selectionIs(at[1], "F3: the next match");
      await pressKey(c, "F3", { shift: true });
      await selectionIs(at[0], "Shift+F3: the match before");
      // Round past the start to the last match, which is far down the text.
      await pressKey(c, "F3", { shift: true });
      const last = at[at.length - 1];
      await selectionIs(last, "Shift+F3 from the first: the last match");
      const scrolledDown = (await selection()).top;
      assert.ok(scrolledDown > 0, `the text area did not scroll to a match at ${last} of ${length}`);
      // Backwards from the last match to the first scrolls up, a match at a time.
      for (let n = at.length - 2; n >= 0; n--) {
        await keyDown("F3", { shift: true });
        await selectionIs(at[n], `Shift+F3 to match ${n}`);
      }
      assert.ok((await selection()).top < scrolledDown, "going back to the first match did not scroll up");
      // Round past the start to the last, and past the end to the first.
      await keyDown("F3", { shift: true });
      await selectionIs(last, "Shift+F3 round past the start");
      await keyDown("F3");
      await selectionIs(at[0], "F3 round past the end");

      // A word that is not there marks the box, and leaves the selection.
      const was = await selection();
      await pressKey(c, "f", { ctrl: true });
      assert.ok(await waitFor(c, async () => (await findBox())?.focused === true), "Ctrl+F did not return to the box");
      await typeText(c, "zzqq");
      await pressKey(c, "Enter");
      assert.ok(
        await waitFor(c, async () => (await findBox())?.missing === true),
        `no match was not shown: ${JSON.stringify(await findBox())}`,
      );
      assert.equal((await selection()).start, was.start, "a search with no match moved the selection");

      // The box searches for what it holds; Esc then closes it and only it.
      await pressKey(c, "f", { ctrl: true });
      await typeText(c, WORD);
      await pressKey(c, "Enter");
      await selectionIs(at[1], "Enter in the box after a search with no match");
      await pressKey(c, "Escape");
      assert.ok(await waitFor(c, async () => (await findBox()) === null), "Esc did not close the find box");
      assert.equal(await modals(), 1, "Esc closed the dialog");
      assert.equal((await selection()).focused, true, "the text area has not got the focus after Esc");

      // With the box closed, F3 and Shift+F3 go on with the last query.
      await keyDown("F3");
      await selectionIs(at[2], "F3 with the box closed");
      assert.equal(await findBox(), null, "F3 opened the box");
      await keyDown("F3", { shift: true });
      await selectionIs(at[1], "Shift+F3 with the box closed");

      // Ctrl+F3 takes the word at the caret: its next occurrence, then, from there, the one before.
      const { word, first, next, before } = await onArea(`(() => {
        const t = a.value, counts = {};
        for (const m of t.matchAll(/[A-Za-z0-9_]+/g)) if (m[0].length >= 8) (counts[m[0]] ??= []).push(m.index);
        const word = Object.keys(counts).find((w) => counts[w].length >= 3);
        const lower = t.toLowerCase(), w = word.toLowerCase();
        const first = counts[word][0];
        const next = lower.indexOf(w, first + w.length);
        return { word: w, first, next, before: lower.lastIndexOf(w, next - 1) };
      })()`);
      await onArea(`(a.focus(), a.setSelectionRange(${first + 3}, ${first + 3}), true)`);
      await keyDown("F3", { ctrl: true });
      await selectionIs(next, `Ctrl+F3 on ${word}`, word);
      assert.equal(await findBox(), null, "Ctrl+F3 opened the box");
      await onArea(`(a.setSelectionRange(${next + 3}, ${next + 3}), true)`);
      await keyDown("F3", { ctrl: true, shift: true });
      await selectionIs(before, `Ctrl+Shift+F3 on ${word}`, word);
    } finally {
      // Cancel, the dialog's own button; leaves the IDE as it was found.
      await c.evaluate(`(() => {
        const m = [...document.querySelectorAll(".modalDialogContainer")].pop();
        const b = m && [...m.querySelectorAll("button, .dialogButton, [class*=Button]")].find((e) => e.textContent.trim() === "Cancel");
        if (b) b.click(); else if (typeof hideModalDialog === "function" && modalDialogs.length) hideModalDialog();
      })()`);
      assert.ok(await waitFor(c, async () => (await modals()) === 0), "the dialog did not close");
    }
  });

  test("hover help is off until its box is ticked", async () => {
    assert.equal(await hoverBox(), false);
    const mark = await consoleMark(c);
    const t = await mouseHover(5, 9);
    assert.ok(t && !t.includes("Help:"), `the mouse hover: ${JSON.stringify(t)}`);
    assert.deepEqual(await addinLines(c, mark), []);
  });

  // The IDE's dock resizer along the code editor's bottom edge, and the dock's
  // drop targets, lay over a hover that reached past it and took the mouse, and
  // Monaco then hid the hover (twinbasic/twinbasic#2506). The IDE draws the
  // hover above them since BETA 1005; the add-in does nothing for it, with
  // hover help on or off. This tests the IDE. The lane's page is large, so
  // it is emulated short enough that the hover reaches past the editor's
  // bottom, and put back after.
  test("with the box unticked, the hover stays while the mouse slides down it past the editor's bottom", async () => {
    // The hover over Collection, without the link while the box is unticked.
    const COLLECTION_HOVER = "in package VBA";
    await fixPageSize(c, { width: PAGE.width, height: SHORT_PAGE });
    try {
      await mouseHover(3, 22, COLLECTION_HOVER);
      const box = await c.evaluate(`(() => {
  const h = [...document.querySelectorAll(".monaco-hover")].find((e) => !e.classList.contains("hidden") && e.getBoundingClientRect().height > 0);
  const r = h.getBoundingClientRect(), e = editor.getDomNode().getBoundingClientRect();
  return { left: r.left, bottom: r.bottom, editor: e.bottom };
})()`);
      assert.ok(box.bottom > box.editor + 12, `the hover does not reach past the editor: ${JSON.stringify(box)}`);
      const x = Math.round(box.left + 40);
      for (let y = Math.round(box.editor) - 12; y <= Math.round(box.editor) + 12; y++) {
        await c.send("Input.dispatchMouseEvent", { type: "mouseMoved", x, y });
        await sleep(20);
        const shown = await hoverText(c);
        assert.ok(
          shown?.includes(COLLECTION_HOVER),
          `the hover went at ${x},${y}, the editor's bottom at ${box.editor}`,
        );
      }
      await mouseAway(c);
    } finally {
      await fixPageSize(c);
    }
  });

  // The link is the hover's first line, where a long hover shows it without
  // being scrolled.
  test("with the box ticked, the mouse hover has the link first, and a click shows the page", async () => {
    await clickHoverBox();
    assert.equal(await hoverBox(), true);
    const mark = await consoleMark(c);
    const t = await mouseHover(3, 22, COLLECTION_LINK);
    assert.ok(t, `the mouse hover: ${JSON.stringify(await hoverText(c))}`);
    assert.ok(t.startsWith(COLLECTION_LINK) && t.includes("in package VBA"), JSON.stringify(t));
    assert.equal(t.split(COLLECTION_LINK).length, 2, `the link is there more than once: ${JSON.stringify(t)}`);
    const link = await hoverLink(c, COLLECTION_LINK);
    assert.ok(link?.top, `the link cannot be clicked: ${JSON.stringify(link)}`);
    await markFrame();
    await clickAt(c, link.x, link.y);
    await showsPage("/tB/Modules/Collection/", { fresh: true });
    await mouseAway(c);
    assert.deepEqual(await openedUrls(c, { since: mark }), [], "the click opened a browser");
    assert.deepEqual(await addinLines(c, mark), []);
  });

  test("hover help shows nothing for a name with no page", async () => {
    const mark = await consoleMark(c);
    // The project's own Beep, which has a summary but no page.
    const t = await mouseHover(18, 10, "Beep");
    assert.ok(t && !t.includes("Help:"), `the mouse hover: ${JSON.stringify(t)}`);
    assert.deepEqual(await addinLines(c, mark), []);
  });

  // The All packages box is ticked before the restart and unticked after it.
  test("after a compiler restart the boxes are still ticked and the mouse hover has the link once", async () => {
    await clickAllBox();
    assert.equal(await allBox(), true);
    const mark = await consoleMark(c);
    await lane.restartCompiler();
    pages = await pagesOrigin(mark);
    assert.ok(await waitFor(c, async () => (await hoverBox()) === true), "the box is not ticked after the restart");
    assert.ok(await waitFor(c, async () => (await allBox()) === true), "All packages is not ticked after the restart");
    // The new instance offered every package from the start.
    await click(c, "addinButton-tbDocsHelp");
    assert.ok(await waitFor(c, async (c) => (await toolWindow(c, PANE))?.visible), "the pane is not showing");
    await emptySearch(c);
    await typeText(c, "Waynes");
    await resultsBecome(HAS_WAYNES, "the search after the restart with All packages");
    await clickAllBox();
    assert.equal(await allBox(), false);
    await resultsBecome(NO_MATCHES, "unticking All packages with a search showing");
    await emptySearch(c);
    await openFile(c, "/HelpHost/Sources/Cases.twin", { line: 9, column: 9 });
    const t = await mouseHover(7, 21, LEN_LINK);
    assert.ok(t, `the mouse hover: ${JSON.stringify(await hoverText(c))}`);
    assert.equal(t.split(LEN_LINK).length, 2, `the link is there more than once: ${JSON.stringify(t)}`);
    await mouseAway(c);
  });

  test("unticking the box turns hover help off", async () => {
    await clickHoverBox();
    assert.equal(await hoverBox(), false);
    const t = await mouseHover(7, 21);
    assert.ok(t && !t.includes("Help:"), `the mouse hover: ${JSON.stringify(t)}`);
    await mouseAway(c);
  });

  // ------------------------------------------------------------ the packages offered

  // The host references tbIDE, VB, VBRUN and VBA. The Waynes controls are in
  // CustomControls, CefBrowser in CEF and WebView2 in WebView2, which it does
  // not; VBRUN has a constant named for each of the last two.
  async function searchFor(text) {
    await emptySearch(c);
    await typeText(c, text);
  }

  test("a search offers the names of the referenced packages and the language's, not another package's", async () => {
    assert.equal(await allBox(), false);
    for (const [text, row] of [
      ["Collection", "VBA.Collection"], // VBA
      ["CheckBox", "VB.CheckBox"], // VB
      ["ToolWindows", "tbIDE.ToolWindows"], // tbIDE
      ["Dim", "Dim"], // the language itself
    ]) {
      await searchFor(text);
      const rows = await resultsBecome((r) => r.some((t) => t.startsWith(row)), `a search for ${text}`);
      assert.ok(!NO_MATCHES(rows));
    }
    await searchFor("Waynes");
    await resultsBecome(NO_MATCHES, "a search for Waynes");
    // Only the VBRUN constant that names the control matches.
    await searchFor("CefBrowser");
    let rows = await resultsBecome((r) => r.some((t) => t.includes("vbCefBrowser")), "a search for CefBrowser");
    assert.ok(!rows.some((t) => t.startsWith("cefPackage.")), JSON.stringify(rows));
    await searchFor("WebView2");
    rows = await resultsBecome((r) => r.some((t) => t.includes("vbWebView2")), "a search for WebView2");
    assert.ok(!rows.some((t) => t.startsWith("WebView2Package.")), JSON.stringify(rows));
  });

  test("the All packages box offers every package at once, and unticking it takes them away again", async () => {
    await searchFor("Waynes");
    await resultsBecome(NO_MATCHES, "a search for Waynes");
    await clickAllBox();
    assert.equal(await allBox(), true);
    // The search runs again with no key pressed.
    await resultsBecome(HAS_WAYNES, "ticking All packages");
    assert.equal(await searchValue(c), "Waynes");
    await searchFor("WebView2");
    await resultsBecome((r) => r.some((t) => t.startsWith("WebView2Package.WebView2")), "a search for WebView2");
    await searchFor("CefBrowser");
    await resultsBecome((r) => r.some((t) => t.startsWith("cefPackage.CefBrowser")), "a search for CefBrowser");
    await clickAllBox();
    assert.equal(await allBox(), false);
    await resultsBecome((r) => !r.some((t) => t.startsWith("cefPackage.")), "unticking All packages");
    await searchFor("Waynes");
    await resultsBecome(NO_MATCHES, "a search for Waynes again");
  });

  test("F1 on a name only an unreferenced package documents says so, and with All packages shows its page", async () => {
    const was = await frameSrc(c);
    await at(c, 39, 10);
    await pressKey(c, "F1");
    const text = "No help for 'CefBrowser' in the packages this project references";
    const shown = await waitFor(c, async (c) => (await notifications(c)).find((t) => t.trim() === text));
    assert.ok(shown, `notifications: ${JSON.stringify(await notifications(c))}`);
    await sleep(300);
    assert.equal(await frameSrc(c), was, "the page changed");
    await clickAllBox();
    try {
      await f1Shows("/tB/Packages/CEF/CefBrowser/");
    } finally {
      if (await allBox()) await clickAllBox();
    }
    assert.equal(await allBox(), false);
    // The window starts with the search box as the pane leaves it: empty.
    await emptySearch(c);
  });

  // ------------------------------------------------------------ the detached window

  let win; // the DevTools connection to the window's page
  let firstDetach; // the console mark before the first Detach
  // The window's style bits that tell a Windows title bar from none.
  const WS_CAPTION = 0xc00000;
  const WS_THICKFRAME = 0x40000;
  const WS_VISIBLE = 0x10000000;
  // The style the add-in printed for the window's frame after `mark`, as
  // "window chrome <custom|native> style <hex>".
  async function windowFrame(mark) {
    const m = (await addinLines(c, mark)).map((l) => l.match(/^window chrome (custom|native) style ([0-9A-F]+)$/));
    const last = m.filter(Boolean).pop();
    return last ? { chrome: last[1], style: Number.parseInt(last[2], 16) } : null;
  }
  // Wait for the add-in's line after `mark`, and return the lines.
  async function waitForLine(mark, line, timeout = 10 * 1000) {
    const found = await waitFor(c, async (c) => (await addinLines(c, mark)).includes(line), { timeout });
    assert.ok(found, `no "${line}" in ${JSON.stringify(await addinLines(c, mark))}`);
    return addinLines(c, mark);
  }
  // The centre of an element of the window's page.
  const centreInWindow = (css) =>
    win.evaluate(`(() => { const r = document.querySelector(${JSON.stringify(css)})
      .getBoundingClientRect(); return { x: r.x + r.width / 2, y: r.y + r.height / 2 }; })()`);
  // The src of the frame in the window, from the add-in's "window page" line
  // after a mark.
  const windowPage = async (mark) =>
    (await addinLines(c, mark)).find((l) => l.startsWith("window page "))?.slice("window page ".length) ?? null;
  const windowRows = () =>
    win.evaluate(`[...document.querySelectorAll("#helpResults .hit .label")].map((e) => e.textContent)`);
  // The rows of the window's results, or its "No matches".
  const windowResultText = () =>
    win.evaluate(
      `[...document.querySelectorAll("#helpResults .hit .label, #helpResults .none")].map((e) => e.textContent)`,
    );
  const windowBox = () => win.evaluate(`document.getElementById("helpHover").checked`);
  // A click on an element of the window's page.
  async function clickInWindow(css) {
    const p = await centreInWindow(css);
    await clickAt(win, p.x, p.y);
  }
  // The same theme properties in the IDE and in the window's page; the IDE
  // sets them on its document, the add-in on the window's from the theme's
  // files. None is in the window's plain palette.
  const THEME_PROPERTIES = ["CodePanelBackColor", "MenuBackColor", "TreeItemHoverBackColor", "ErrorTabTextColor"];
  const themeProperties = (conn) =>
    conn.evaluate(
      `${JSON.stringify(THEME_PROPERTIES)}.map((n) => getComputedStyle(document.documentElement).getPropertyValue("--theme" + n).trim())`,
    );

  // Click Detach in the pane, and wait for the window to say "detached".
  async function detach() {
    const mark = await consoleMark(c);
    await click(c, { toolWindow: PANE, css: "#helpDetach" });
    assert.ok(
      await waitFor(c, async (c) => (await addinLines(c, mark)).includes("detached"), { timeout: 30 * 1000 }),
      `the add-in did not detach: ${JSON.stringify(await addinLines(c, mark))}`,
    );
    return mark;
  }

  // Connect to the window's page, which the control starts with the debugging
  // port: the page is there once the window has made its control.
  async function connectWindow() {
    win?.close();
    win = null;
    const connected = await waitFor(
      c,
      async () => {
        try {
          win = await attach(windowPort, "", { timeout: 30 * 1000 });
          return true;
        } catch {
          return false;
        }
      },
      { timeout: 30 * 1000 },
    );
    assert.ok(connected, `no page on the window's debugging port ${windowPort}`);
    await win.send("Emulation.setFocusEmulationEnabled", { enabled: true });
  }

  test("Detach hides the pane and shows the window with the page the pane had, and the pane's frame stays", async () => {
    const was = await frameSrc(c);
    assert.ok(was, "the pane had no page to carry over");
    const mark = await detach();
    firstDetach = mark;
    assert.equal(await waitFor(c, () => windowPage(mark), { timeout: 30 * 1000 }), was);
    assert.equal((await toolWindow(c, PANE))?.visible, false, "the pane is still showing");
    assert.equal(await frameSrc(c), was);
    await connectWindow();
    assert.equal(await win.evaluate(`document.getElementById("helpPage").src`), was);
    assert.equal(await win.evaluate(`document.title`), "twinBASIC Help");
  });

  test("the window has the IDE theme's properties", async () => {
    const ide = await themeProperties(c);
    assert.ok(
      ide.every((v) => v),
      JSON.stringify(ide),
    );
    assert.deepEqual(await themeProperties(win), ide);
    assert.equal(
      await win.evaluate(`document.documentElement.getAttribute("data-group")`),
      await themeGroup(c),
      "the window's group",
    );
  });

  test("the window is set in the IDE's font size", async () => {
    const ide = await c.evaluate(
      `getComputedStyle(document.documentElement).getPropertyValue("--ide-fontsize").trim()`,
    );
    assert.ok(ide, "the IDE has no --ide-fontsize");
    assert.equal(await win.evaluate(`getComputedStyle(document.body).fontSize`), ide);
  });

  test("the window's title bar is one row, with the title and five buttons, and Windows draws no caption", async () => {
    const bar = await win.evaluate(`(() => {
      const el = (id) => document.getElementById(id);
      const bar = el("helpTitleBar").getBoundingClientRect();
      const rects = {};
      const inRow = (id) => {
        const r = el(id).getBoundingClientRect();
        rects[id] = [r.left, r.top, r.width, r.height].map(Math.round);
        return r.width > 0 && r.top >= bar.top && r.bottom <= bar.bottom;
      };
      const s = getComputedStyle(el("helpTitleBar"));
      return {
        chrome: document.documentElement.getAttribute("data-chrome"),
        top: bar.top,
        height: bar.height,
        below: el("helpBar").getBoundingClientRect().top,
        title: el("helpTitle").textContent,
        inRow: ["helpGrip", "helpTitle", "helpAttach", "helpSettings", "helpMinimize", "helpMaximize", "helpClose"].map(inRow),
        rects,
        attachIn: el("helpAttach").parentElement.id,
        attachWord: getComputedStyle(el("helpAttach").querySelector(".label")).display,
        look: { backgroundColor: s.backgroundColor, color: s.color, fontSize: s.fontSize, fontWeight: s.fontWeight, paddingTop: s.paddingTop, paddingBottom: s.paddingBottom },
      };
    })()`);
    const { rects, look, height, ...rest } = bar;
    assert.ok(paneHeader, "the pane's header was not read");
    assert.deepEqual(
      rest,
      {
        chrome: "custom",
        top: 0,
        below: height,
        title: "TWINBASIC HELP",
        inRow: [true, true, true, true, true, true, true],
        attachIn: "helpTitleBar",
        attachWord: "none",
      },
      JSON.stringify(rects),
    );
    // The IDE's own tool-window header, read from the pane while it showed.
    assert.deepEqual(look, paneHeader.look);
    assert.ok(
      Math.abs(height - paneHeader.height) <= 1,
      `the bar is ${height} high, the IDE's header ${paneHeader.height}`,
    );
    const frame = await windowFrame(firstDetach);
    assert.equal(frame?.chrome, "custom");
    assert.notEqual(frame.style & WS_CAPTION, WS_CAPTION, `the window's style ${frame.style.toString(16)}`);
    assert.ok(frame.style & WS_THICKFRAME, "the window cannot be resized");
    assert.ok(frame.style & WS_VISIBLE, "the window is not visible");
  });

  // The Maximize button and the title bar's double click maximize the window
  // and restore it, and the button shows which it will do.
  const maximizeButton = () =>
    win.evaluate(`({
      state: document.documentElement.getAttribute("data-state"),
      title: document.getElementById("helpMaximize").title,
      glyphs: [".maximize", ".restore"].map((s) => getComputedStyle(document.querySelector("#helpMaximize " + s)).display === "none"),
    })`);

  // Where the window's client area, its WebView2 control and the work area of
  // its monitor are, in screen pixels, which only the add-in can read (it asks
  // the window, the test switch being on), and the size of the page the
  // control shows, in device pixels. Each rectangle is [left, top, right,
  // bottom].
  async function windowGeometry() {
    const mark = await consoleMark(c);
    await win.evaluate(`chrome.webview.postMessage("geometry")`);
    const found = await waitFor(c, async (c) =>
      (await addinLines(c, mark)).find((l) => l.startsWith("window geometry ")),
    );
    assert.ok(found, `the add-in did not report the window's geometry: ${JSON.stringify(await addinLines(c, mark))}`);
    const g = {};
    for (const m of found.matchAll(/(client|control|work) (-?\d+),(-?\d+),(-?\d+),(-?\d+)/g)) {
      g[m[1]] = m.slice(2).map(Number);
    }
    g.page = await win.evaluate(`[innerWidth * devicePixelRatio, innerHeight * devicePixelRatio]`);
    return g;
  }

  // Whether the control fills the client area exactly, and the page it shows
  // fills the control, to a pixel (the page's size is rounded to CSS pixels).
  // With `rect`, the client area is also that rectangle. Returns what is wrong,
  // or "" when nothing is.
  function geometryFault(g, rect) {
    const faults = [];
    if (g.control.some((v, i) => v !== g.client[i])) faults.push("the control is not the client area");
    const size = [g.client[2] - g.client[0], g.client[3] - g.client[1]];
    if (g.page.some((v, i) => Math.abs(v - size[i]) > 1)) faults.push("the page is not the client area's size");
    if (rect && g.client.some((v, i) => v !== rect[i])) faults.push("the client area is not the work area");
    return faults.length ? `${faults.join("; ")}: ${JSON.stringify(g)}` : "";
  }

  // Waits for the window's geometry to be right, which follows a change of
  // its state a moment after the add-in reports the state; fails with what was
  // wrong at the end.
  async function assertGeometry(what, { workArea = false } = {}) {
    let last;
    const fits = await waitFor(c, async () => {
      last = await windowGeometry();
      return geometryFault(last, workArea ? last.work : null) === "";
    });
    assert.ok(fits, `${what}: ${geometryFault(last, workArea ? last.work : null)}`);
  }

  test("the window's control fills its client area", async () => {
    await assertGeometry("normal");
  });

  // A maximized window with no title bar of its own has to fill the work area,
  // not the whole monitor over the taskbar, with nothing cut off at its edges
  // and no strip of the form showing (WindowApi, LimitMaximizeToWorkArea).
  test("Maximize and Restore change the window's state, and the button shows which it will do", async () => {
    let mark = await consoleMark(c);
    await clickInWindow("#helpMaximize");
    await waitForLine(mark, "window state max");
    await assertGeometry("maximized", { workArea: true });
    assert.ok(
      await waitFor(c, async () => (await maximizeButton()).state === "max"),
      JSON.stringify(await maximizeButton()),
    );
    assert.deepEqual(await maximizeButton(), { state: "max", title: "Restore", glyphs: [true, false] });
    mark = await consoleMark(c);
    await clickInWindow("#helpMaximize");
    await waitForLine(mark, "window state normal");
    assert.ok(await waitFor(c, async () => (await maximizeButton()).state === "normal"));
    assert.deepEqual(await maximizeButton(), { state: "normal", title: "Maximize", glyphs: [false, true] });
    await assertGeometry("restored");
  });

  test("a double click on the bar maximizes the window, and another restores it", async () => {
    const p = await centreInWindow("#helpTitle");
    for (const want of ["max", "normal"]) {
      const mark = await consoleMark(c);
      await clickAt(win, p.x, p.y, { clickCount: 2 });
      await waitForLine(mark, `window state ${want}`);
    }
  });

  test("Minimize, and F1 brings the window back", async () => {
    let mark = await consoleMark(c);
    await clickInWindow("#helpMinimize");
    await waitForLine(mark, "window state min");
    await at(c, 7, 21);
    mark = await consoleMark(c);
    await pressKey(c, "F1");
    const want = `${pages}/tB/Modules/Strings/Len?theme=${await themeGroup(c)}&pane=1`;
    await waitForLine(mark, "window state normal");
    assert.equal(await waitFor(c, () => windowPage(mark)), want);
  });

  test("F1 shows the page in the window, and the pane is left alone", async () => {
    const pane = await frameSrc(c);
    await at(c, 7, 21);
    const mark = await consoleMark(c);
    await pressKey(c, "F1");
    const want = `${pages}/tB/Modules/Strings/Len?theme=${await themeGroup(c)}&pane=1`;
    assert.equal(await waitFor(c, () => windowPage(mark)), want);
    assert.equal(await win.evaluate(`document.getElementById("helpPage").src`), want);
    assert.equal(await frameSrc(c), pane, "the pane's frame changed");
    assert.equal((await toolWindow(c, PANE))?.visible, false, "the pane is showing");
    assert.deepEqual(await addinLines(c, mark), [`window page ${want}`]);
  });

  test("typing in the window's search box lists the results there, and Enter shows the first", async () => {
    const mark = await consoleMark(c);
    await win.evaluate(`document.getElementById("helpSearch").focus()`);
    await typeText(win, "msgbo");
    const rows = await waitFor(c, async () => {
      const r = await windowRows();
      return r[0] === "Interaction.MsgBox" && r;
    });
    assert.ok(rows, JSON.stringify(await windowRows()));
    assert.ok((await addinLines(c, mark)).some((l) => /^window results \d+$/.test(l)));
    const enter = await consoleMark(c);
    await pressKey(win, "Enter");
    assert.equal(
      await waitFor(c, () => windowPage(enter)),
      `${pages}/tB/Modules/Interaction/MsgBox?theme=${await themeGroup(c)}&pane=1`,
    );
  });

  test("the window's page is under the same line while its list shows", async () => {
    const got = await windowSeparator(win);
    assert.ok(got.listShown, JSON.stringify(got));
    assert.equal(separatorFault(got), "", JSON.stringify(got));
  });

  test("a click on a result in the window shows its page there", async () => {
    const rows = await windowRows();
    const n = rows.indexOf("Interaction.MsgBox");
    assert.ok(n >= 0, JSON.stringify(rows));
    const mark = await consoleMark(c);
    // The first row is the page shown already; the next is another entry.
    await clickInWindow(`#helpResults .hit:nth-child(${n === 0 ? 2 : 1})`);
    const got = await waitFor(c, () => windowPage(mark));
    assert.ok(got?.startsWith(`${pages}/tB/`) && !got.includes("/Interaction/MsgBox?"), String(got));
    assert.equal((await toolWindow(c, PANE))?.visible, false);
  });

  // The window's gear is in its title bar, and its panel is the window's own:
  // opening it there does not open the pane's.
  test("the gear in the window's title bar opens the settings panel under it, and sets aria-expanded", async () => {
    assert.deepEqual(await windowSettings(), SETTINGS_CLOSED);
    const gear = await win.evaluate(`(() => {
      const g = document.getElementById("helpSettings");
      return {
        in: g.parentElement.parentElement.id,
        title: g.title,
        label: g.getAttribute("aria-label"),
        shapes: g.querySelectorAll("svg circle, svg path").length > 0,
      };
    })()`);
    assert.deepEqual(gear, { in: "helpTitleBar", title: "Settings", label: "Settings", shapes: true });
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_OPEN, "the gear did not open the panel");
    assertPlace(await windowPlace(), "the window");
    const { want, got } = await windowLook();
    assert.deepEqual(got, want, "the panel is not in the theme's colours");
    assert.notEqual(got.borderStyle, "none");
    assert.deepEqual(await paneSettings(), SETTINGS_CLOSED, "the pane's panel opened");
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_CLOSED, "the gear did not close the panel");
  });

  // The window's page is on no site of its own, so its frame is always in a
  // process of its own, and a press over the frame never reaches the shade:
  // the page's blur closes the panel then.
  async function clickOutsideWindow(css) {
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_OPEN, "the gear did not open the panel");
    const mark = await consoleMark(c);
    await clickInWindow(css);
    await settingsBecome(windowSettings, SETTINGS_CLOSED, `a click on ${css} did not close the panel`);
    assert.deepEqual(await openedUrls(c, { since: mark }), [], `the click on ${css} reached it`);
  }

  test("a click on the shade closes the window's panel, over another control or over the page", async () => {
    await clickOutsideWindow("#helpBrowser");
    await clickOutsideWindow("#helpPage");
  });

  test("Esc closes the window's panel from inside it, and the gear has the focus", async () => {
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_OPEN, "the gear did not open the panel");
    await win.evaluate(`document.getElementById("helpHover").focus()`);
    await pressKey(win, "Escape");
    await settingsBecome(windowSettings, SETTINGS_CLOSED, "Esc did not close the panel");
    assert.equal(await win.evaluate(`document.activeElement?.id`), "helpSettings");
  });

  test("Hover help can be ticked in the window, which leaves the panel open, and the pane's box follows", async () => {
    assert.equal(await hoverBox(), false);
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_OPEN, "the gear did not open the panel");
    await clickInWindow("#helpHover");
    assert.ok(await waitFor(c, async () => (await hoverBox()) === true), "the pane's box is not ticked");
    assert.equal(await windowBox(), true);
    assert.deepEqual(await windowSettings(), SETTINGS_OPEN, "ticking the box closed the panel");
    await clickInWindow("#helpHover");
    assert.ok(await waitFor(c, async () => (await hoverBox()) === false), "the pane's box is still ticked");
    assert.equal(await windowBox(), false);
    assert.deepEqual(await windowSettings(), SETTINGS_OPEN, "unticking the box closed the panel");
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_CLOSED, "the gear did not close the panel");
  });

  // Both ways: a tick in the window reaches the pane's box, and the pane's box,
  // clicked as the page does though the pane is hidden, reaches the window's.
  test("All packages can be ticked in the window or the pane, and the other follows", async () => {
    assert.equal(await allBox(), false);
    assert.equal(await windowAllBox(), false);
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_OPEN, "the gear did not open the panel");
    await clickInWindow("#helpAllPackages");
    assert.ok(await waitFor(c, async () => (await allBox()) === true), "the pane's box is not ticked");
    assert.equal(await windowAllBox(), true);
    assert.deepEqual(await windowSettings(), SETTINGS_OPEN, "ticking the box closed the panel");
    await clickInWindow("#helpAllPackages");
    assert.ok(await waitFor(c, async () => (await allBox()) === false), "the pane's box is still ticked");
    assert.equal(await windowAllBox(), false);
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_CLOSED, "the gear did not close the panel");

    await inPane(c, `root.querySelector("#helpAllPackages").click(); return null;`);
    assert.ok(await waitFor(c, () => windowAllBox()), "the window's box is not ticked");
    await inPane(c, `root.querySelector("#helpAllPackages").click(); return null;`);
    assert.ok(await waitFor(c, async () => (await windowAllBox()) === false), "the window's box is still ticked");
    assert.equal(await allBox(), false);
  });

  // Both ways, as for All packages: the window's box reaches the pane's and the
  // page, and the pane's box, clicked though the pane is hidden, the window's.
  test("the page-side fixes can be unticked in the window or the pane, and the other follows", async () => {
    for (const { box, global, label } of FIXES) {
      assert.equal(await windowFixBox(box), true, `${label}: the window's box is not ticked`);
      await clickInWindow("#helpSettings");
      await settingsBecome(windowSettings, SETTINGS_OPEN, "the gear did not open the panel");
      await clickInWindow(`#${box}`);
      assert.ok(await waitFor(c, async () => (await paneFixBox(box)) === false), `${label}: the pane's box is ticked`);
      assert.ok(await waitFor(c, async () => (await fixInstalled(global)) === false), `${label}: still in the page`);
      assert.equal(await windowFixBox(box), false);
      assert.deepEqual(await windowSettings(), SETTINGS_OPEN, "unticking the box closed the panel");
      await clickInWindow(`#${box}`);
      assert.ok(await waitFor(c, async () => (await paneFixBox(box)) === true), `${label}: the pane's box is unticked`);
      assert.ok(await waitFor(c, () => fixInstalled(global)), `${label}: not back in the page`);
      await clickInWindow("#helpSettings");
      await settingsBecome(windowSettings, SETTINGS_CLOSED, "the gear did not close the panel");

      await inPane(c, `root.querySelector("#${box}").click(); return null;`);
      assert.ok(
        await waitFor(c, async () => (await windowFixBox(box)) === false),
        `${label}: the window's box is ticked`,
      );
      assert.equal(await fixInstalled(global), false);
      await inPane(c, `root.querySelector("#${box}").click(); return null;`);
      assert.ok(await waitFor(c, () => windowFixBox(box)), `${label}: the window's box is unticked`);
      assert.ok(await waitFor(c, () => fixInstalled(global)), `${label}: not back in the page`);
    }
  });

  test("the window's results follow the All packages box", async () => {
    await win.evaluate(`document.getElementById("helpSearch").focus()`);
    await win.evaluate(`document.getElementById("helpSearch").value = ""`);
    await typeText(win, "Waynes");
    assert.ok(
      await waitFor(c, async () => (await windowResultText()).join() === "No matches"),
      JSON.stringify(await windowResultText()),
    );
    await clickInWindow("#helpSettings");
    await clickInWindow("#helpAllPackages");
    assert.ok(
      await waitFor(c, async () => HAS_WAYNES(await windowResultText())),
      JSON.stringify(await windowResultText()),
    );
    await clickInWindow("#helpAllPackages");
    assert.ok(
      await waitFor(c, async () => (await windowResultText()).join() === "No matches"),
      JSON.stringify(await windowResultText()),
    );
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_CLOSED, "the gear did not close the panel");
    // Back to what the later cases expect in the box.
    await win.evaluate(`document.getElementById("helpSearch").focus()`);
    await win.evaluate(`document.getElementById("helpSearch").value = ""`);
    await typeText(win, "msgbo");
    assert.ok(await waitFor(c, async () => (await windowResultText())[0] === "Interaction.MsgBox"));
  });

  test("a name with no page shows its summary in the window, and Open in browser is disabled there", async () => {
    await at(c, 18, 10);
    const mark = await consoleMark(c);
    await pressKey(c, "F1");
    assert.ok(
      await waitFor(c, async (c) => (await addinLines(c, mark)).includes("window summary")),
      JSON.stringify(await addinLines(c, mark)),
    );
    const shown = await win.evaluate(`({
      declaration: document.querySelector("#helpSummary .declaration")?.textContent,
      summary: document.getElementById("helpSummary").style.display,
      frame: document.getElementById("helpPage").style.display,
      browserDisabled: document.getElementById("helpBrowser").disabled,
    })`);
    assert.deepEqual(shown, { declaration: "Sub Beep ( )", summary: "", frame: "none", browserDisabled: true });
  });

  test("a theme change reaches the window", async () => {
    const was = await themeGroup(c);
    const other = was === "dark" ? "light" : "dark";
    const switchTo = (group) =>
      c.evaluate(
        `executeIdeCommand(${JSON.stringify(group === "dark" ? "tbTheme_SwitchToDarkMode" : "tbTheme_SwitchToLightMode")})`,
      );
    const panelBefore = await windowLook();
    assert.deepEqual(panelBefore.got, panelBefore.want, "the panel is not in the theme's colours");
    const lineBefore = await windowSeparator(win);
    assert.equal(separatorFault(lineBefore), "", JSON.stringify(lineBefore));
    try {
      await switchTo(other);
      assert.equal(await themeGroup(c), other, "the IDE's theme did not change");
      const sameAsIde = await waitFor(
        c,
        async () => JSON.stringify(await themeProperties(win)) === JSON.stringify(await themeProperties(c)),
      );
      assert.ok(sameAsIde, "the window's properties are not the new theme's");
      assert.equal(await win.evaluate(`document.documentElement.getAttribute("data-group")`), other);
      // The panel follows the theme: the other theme's colours, not the old.
      const panelAfter = await windowLook();
      assert.deepEqual(panelAfter.got, panelAfter.want, "the panel is not in the new theme's colours");
      assert.notEqual(panelAfter.got.background, panelBefore.got.background, "the panel kept the old background");
      // So does the line under the list, which the earlier tests left showing.
      const lineAfter = await windowSeparator(win);
      assert.equal(separatorFault(lineAfter), "", JSON.stringify(lineAfter));
      assert.notEqual(lineAfter.want.color, lineBefore.want.color, "the line kept the old colour");
    } finally {
      await switchTo(was);
    }
    assert.ok(
      await waitFor(
        c,
        async () => JSON.stringify(await themeProperties(win)) === JSON.stringify(await themeProperties(c)),
      ),
      "the window's properties are not the old theme's again",
    );
  });

  // The window's frame, in its own target on the window's port when it is a
  // frame of another site than the window's page, else in the window page's
  // frame tree: `expression` evaluated in its page, after the frame has been
  // told to prefer the other colour scheme than `group`, if one is given.
  async function inWindowDocs(expression, group) {
    let docs = null;
    try {
      docs = await attach(windowPort, pages, { type: "iframe", timeout: 10 * 1000 });
    } catch {}
    try {
      if (group) await preferOther(docs ?? win, group);
      return docs ? await docs.evaluate(expression) : await frameEval(win, pages, expression);
    } finally {
      docs?.close();
    }
  }
  // Waits for the window's frame to have loaded `url` (path and query), a
  // document other than the one marked, and returns its DOCS_STATE.
  async function windowDocsShows(url, group) {
    const read = () => inWindowDocs(DOCS_STATE, group).catch(() => null);
    const got = await waitFor(c, async () => {
      const s = await read();
      return s?.url === url && s.ready && !s.marked && s;
    });
    return got || (await read());
  }

  // As in the pane. In the window the frame is on another site than its page,
  // which NavigateToString loads as a data: URL, and the frame's storage
  // throws. The first page is shown with F1, and each theme change after it
  // gives the window the page again, the last back to the IDE's first theme.
  // The frame's every load is a "window page" line, which is waited for, so
  // that none is left to arrive after a later case's mark.
  test("the window's page has the IDE's theme in Light and Dark, after a link too, whatever the frame's colour scheme", async () => {
    const was = await themeGroup(c);
    const page = "/tB/Modules/Interaction/MsgBox";
    const next = "/tB/Modules/Strings/Len";
    const mark = () => inWindowDocs("window.tbDocsTestMark = true").catch(() => {});
    const faults = [];
    try {
      for (const [i, group] of [was, otherScheme(was), was].entries()) {
        await mark();
        let lines = await consoleMark(c);
        if (i === 0) {
          await at(c, 5, 9);
          await pressKey(c, "F1");
        } else {
          await switchTheme(group);
          assert.equal(await themeGroup(c), group, "the IDE's theme did not change");
        }
        const given = `${page}?theme=${group}&pane=1`;
        assert.equal(await waitFor(c, () => windowPage(lines)), `${pages}${given}`);
        const how = i === 0 ? "the page F1 gave" : "the page a theme change gave";
        faults.push(docsThemeFault(await windowDocsShows(given, group), group, `${group}, ${how}`));
        await mark();
        lines = await consoleMark(c);
        await inWindowDocs(`location.href = ${JSON.stringify(next)}`);
        faults.push(docsThemeFault(await windowDocsShows(next, group), group, `${group}, after a link`));
        assert.ok(await waitFor(c, () => windowPage(lines)), "the frame's load after the link was not reported");
      }
    } finally {
      if ((await themeGroup(c)) !== was) {
        const lines = await consoleMark(c);
        await switchTheme(was);
        await waitFor(c, () => windowPage(lines));
      }
    }
    assert.deepEqual(faults.filter(Boolean), []);
  });

  // A press on the bar with the mouse moved a few pixels, or held for 250 ms,
  // starts the system's move loop through the add-in, and a click does not.
  // The page posts "drag" and the add-in prints "window drag" before it runs
  // the loop, which follows the real mouse; the harness's desktop has none,
  // and the window does not move under the page's synthetic mouse (its
  // screenX and screenY were read before and after), so that is not asserted.
  const mouse = (type, p, extra = {}) =>
    win.send("Input.dispatchMouseEvent", { type, x: p.x, y: p.y, button: "left", buttons: 1, ...extra });

  test("a click or a small move on the bar starts no drag, and a larger move does", async () => {
    const p = await centreInWindow("#helpTitle");
    const mark = await consoleMark(c);
    await clickAt(win, p.x, p.y);
    await win.send("Input.dispatchMouseEvent", { type: "mouseMoved", x: p.x, y: p.y });
    await mouse("mousePressed", p, { clickCount: 1 });
    await mouse("mouseMoved", { x: p.x + 2, y: p.y + 1 });
    await sleep(100);
    await mouse("mouseReleased", { x: p.x + 2, y: p.y + 1 }, { buttons: 0 });
    await sleep(500);
    assert.deepEqual(await addinLines(c, mark), [], "a click started a drag");
    await mouse("mousePressed", p, { clickCount: 1 });
    await mouse("mouseMoved", { x: p.x + 30, y: p.y + 10 });
    await waitForLine(mark, "window drag");
    await mouse("mouseReleased", { x: p.x + 30, y: p.y + 10 }, { buttons: 0 });
  });

  test("a press held on the bar for 250 ms starts a drag", async () => {
    const p = await centreInWindow("#helpTitle");
    const mark = await consoleMark(c);
    await mouse("mousePressed", p, { clickCount: 1 });
    await waitForLine(mark, "window drag");
    await mouse("mouseReleased", p, { buttons: 0 });
  });

  test("the X hides the window and the help stays detached, and F1 shows it again", async () => {
    let mark = await consoleMark(c);
    await clickInWindow("#helpClose");
    await waitForLine(mark, "window hidden");
    assert.equal((await toolWindow(c, PANE))?.visible, false, "the pane is showing");
    await at(c, 5, 9);
    mark = await consoleMark(c);
    await pressKey(c, "F1");
    const lines = await waitForLine(mark, "window shown");
    assert.equal(
      await waitFor(c, () => windowPage(mark)),
      `${pages}/tB/Modules/Interaction/MsgBox?theme=${await themeGroup(c)}&pane=1`,
    );
    assert.ok(!lines.includes("detached") && !lines.includes("attached"), JSON.stringify(lines));
    assert.equal((await toolWindow(c, PANE))?.visible, false, "the pane is showing");
    assert.equal((await windowFrame(mark))?.chrome, "custom");
  });

  test("Attach brings the pane back with the search and the last page", async () => {
    await at(c, 7, 21);
    const mark = await consoleMark(c);
    await pressKey(c, "F1");
    const want = `${pages}/tB/Modules/Strings/Len?theme=${await themeGroup(c)}&pane=1`;
    assert.equal(await waitFor(c, () => windowPage(mark)), want);
    await clickInWindow("#helpAttach");
    assert.ok(
      await waitFor(c, async (c) => (await addinLines(c, mark)).includes("attached")),
      JSON.stringify(await addinLines(c, mark)),
    );
    assert.ok(await waitFor(c, async (c) => (await toolWindow(c, PANE))?.visible), "the pane is not showing");
    await showsPage("/tB/Modules/Strings/Len");
    assert.equal(await searchValue(c), "msgbo");
  });

  test("a detached window comes back after a compiler restart", async () => {
    await detach();
    const mark = await consoleMark(c);
    await lane.restartCompiler();
    pages = await pagesOrigin(mark);
    assert.ok(
      await waitFor(c, async (c) => (await addinLines(c, mark)).includes("detached"), { timeout: 30 * 1000 }),
      JSON.stringify(await addinLines(c, mark)),
    );
    const want = `${pages}/tB/Modules/Strings/Len?theme=${await themeGroup(c)}&pane=1`;
    assert.equal(await waitFor(c, () => windowPage(mark), { timeout: 30 * 1000 }), want);
    assert.equal((await toolWindow(c, PANE))?.visible, false);
    await connectWindow();
    const attached = await consoleMark(c);
    await clickInWindow("#helpAttach");
    assert.ok(await waitFor(c, async (c) => (await addinLines(c, attached)).includes("attached")));
    assert.ok(await waitFor(c, async (c) => (await toolWindow(c, PANE))?.visible), "the pane is not showing");
    await showsPage("/tB/Modules/Strings/Len");
  });

  test("a window hidden with the X stays hidden after a compiler restart, until the Help button shows it", async () => {
    await detach();
    await connectWindow();
    let mark = await consoleMark(c);
    await clickInWindow("#helpClose");
    await waitForLine(mark, "window hidden");
    mark = await consoleMark(c);
    await lane.restartCompiler();
    pages = await pagesOrigin(mark);
    await sleep(2000);
    const lines = await addinLines(c, mark);
    assert.deepEqual(
      lines.filter((l) => l.startsWith("window") || l === "detached"),
      [],
      "the window was shown again",
    );
    assert.equal((await toolWindow(c, PANE))?.visible, false, "the pane is showing");
    mark = await consoleMark(c);
    await click(c, "addinButton-tbDocsHelp");
    await waitForLine(mark, "window shown", 30 * 1000);
    await connectWindow();
    // The search box gets the focus once the new window's page is ready.
    assert.ok(
      await waitFor(c, async () => (await win.evaluate(`document.activeElement?.id`)) === "helpSearch"),
      "the search box has no focus in the window",
    );
    mark = await consoleMark(c);
    await clickInWindow("#helpAttach");
    await waitForLine(mark, "attached");
    assert.ok(await waitFor(c, async (c) => (await toolWindow(c, PANE))?.visible), "the pane is not showing");
  });

  // The IDE's option "Show real OS titlebar" gives the window the Windows title
  // bar, and the page then draws none. The harness cannot change the option
  // without changing the user's own, so the add-in reads
  // TB_DOCS_HELP_REAL_TITLEBAR under the test switch instead, which is the
  // IDE's environment: a second IDE is started with it.
  test("with the IDE's option Show real OS titlebar on, the window has the Windows title bar and Attach is in the search bar", async () => {
    win?.close();
    win = null;
    await lane.closeProject();
    // This IDE first shows the pane in a page of 800 by 600, the IDE window of
    // 1200 by 900 at 150%, where 480 by 640 would be taller than the page: the
    // pane is capped at 85% of it, and centred inside it.
    c = await lane.open(HOST, { env: ideEnv(1), page: SMALL_PAGE });
    pages = await pagesOrigin(null);
    await click(c, "addinButton-tbDocsHelp");
    assert.ok(await waitFor(c, async (c) => (await toolWindow(c, PANE))?.visible), "the pane is not showing");
    const small = await floatingBox(c);
    assert.ok(small, "the pane is not floating");
    assert.deepEqual([small.width, small.height], [480, 510], JSON.stringify(small));
    assert.equal(boxFault(small), "", JSON.stringify(small));
    await fixPageSize(c, PAGE);
    const mark = await detach();
    const frame = await windowFrame(mark);
    assert.equal(frame?.chrome, "native");
    assert.equal(frame.style & WS_CAPTION, WS_CAPTION, `the window's style ${frame.style.toString(16)}`);
    assert.ok(frame.style & WS_THICKFRAME, "the window cannot be resized");
    await connectWindow();
    // The add-in tells the page which frame it has once the page is ready. The
    // window's target can be there while NavigateToString has yet to give it
    // a document.
    await waitFor(
      c,
      async () => (await win.evaluate(`document.documentElement?.getAttribute("data-chrome")`)) === "native",
    );
    const page = await win.evaluate(`(() => {
      const el = (id) => document.getElementById(id);
      return {
        chrome: document.documentElement.getAttribute("data-chrome"),
        bar: getComputedStyle(el("helpTitleBar")).display,
        attachIn: el("helpAttach").parentElement.id,
        attachWord: getComputedStyle(el("helpAttach").querySelector(".label")).display !== "none",
        searchTop: el("helpBar").getBoundingClientRect().top,
        order: [...el("helpBar").children].map((e) => e.id),
      };
    })()`);
    assert.deepEqual(page, {
      chrome: "native",
      bar: "none",
      attachIn: "helpBar",
      attachWord: true,
      searchTop: 0,
      order: ["helpSearch", "helpBrowser", "helpAttach", "helpSettingsWrap"],
    });
    // The gear is the bar's, and opens the panel under it, as it does in the title bar.
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_OPEN, "the gear did not open the panel");
    assertPlace(await windowPlace(), "the native window");
    await clickInWindow("#helpSettings");
    await settingsBecome(windowSettings, SETTINGS_CLOSED, "the gear did not close the panel");
    // The control fills the client area with the Windows title bar too, in the
    // window's own size and maximized (the page has no button to press).
    await assertGeometry("native, normal");
    let state = await consoleMark(c);
    await win.evaluate(`chrome.webview.postMessage("maxrestore")`);
    await waitForLine(state, "window state max");
    await assertGeometry("native, maximized");
    state = await consoleMark(c);
    await win.evaluate(`chrome.webview.postMessage("maxrestore")`);
    await waitForLine(state, "window state normal");
    await assertGeometry("native, restored");
    const attached = await consoleMark(c);
    await clickInWindow("#helpAttach");
    await waitForLine(attached, "attached");
  });

  return () => {
    win?.close();
    server?.close();
  };
});