docs: say what a closed window does to a tx or sign approval (closes #505)

The approval port's disconnect handler leaves a transaction or signing
approval pending, and its comments said that was so the user could reopen
the toolbar popup. Those approvals open in their own window. When that
window closes, the windows.onRemoved listener rejects the approval, unless
an approved attempt is still running, in which case that attempt answers
the page. Both comments now say so. No code changed.

Model: opus-5-5

README.md

@@ -239,12 +239,8 @@ provide:
   `make check` stays non-mutating. Linting runs only in the container, because
   an ESLint result that depends on whichever ESLint the host happens to have is
   not a result, so docker is required to lint.
-- `script/fmt` — format all files (writes), on the host, with the `prettier`
-  that `script/bootstrap` installs in `node_modules/`; when that one is missing
-  it fails and says to run `script/bootstrap`, instead of using a `prettier`
-  from the `PATH`
-- `script/fmt-check` — check formatting (read-only), on the host, with the same
-  `prettier` and the same refusal
+- `script/fmt` — format all files (writes), on the host
+- `script/fmt-check` — check formatting (read-only), on the host
 - `script/check` — run `script/test`, `script/lint` and `script/fmt-check`
 - `script/check-censored` — assert the competitor name RULES.md bars appears
   nowhere in the working tree or under `dist/` outside its documented

script/fmt

@@ -25,13 +25,6 @@ run_yarn() {
 
 main() {
     cd "$ROOT"
-    # Without the repo's own prettier, yarn runs whatever prettier is on
-    # the PATH, which may be a version that formats files differently.
-    if [ ! -x node_modules/.bin/prettier ]; then
-        echo "fmt: this repo's prettier is not installed in node_modules/," \
-            "so run script/bootstrap first." >&2
-        exit 1
-    fi
     echo "Formatting..."
     run_yarn run fmt
 }

script/fmt-check

@@ -26,13 +26,6 @@ run_yarn() {
 
 main() {
     cd "$ROOT"
-    # Without the repo's own prettier, yarn runs whatever prettier is on
-    # the PATH, which may be a version that formats files differently.
-    if [ ! -x node_modules/.bin/prettier ]; then
-        echo "fmt-check: this repo's prettier is not installed in" \
-            "node_modules/, so run script/bootstrap first." >&2
-        exit 1
-    fi
     echo "Checking formatting..."
     run_yarn run fmt-check
 }

src/background/index.js

@@ -632,8 +632,9 @@ function isExtensionSender(sender) {
 // had refused.
 //
 // TX and sign approvals do not decide here. They stay pending across a
-// disconnect — the user can reopen the toolbar popup — and are rejected by the
-// windows.onRemoved listener below.
+// disconnect. When their window closes, the windows.onRemoved listener below
+// rejects them, unless an approved attempt is still running, in which case
+// that attempt answers the page.
 runtime.onConnect.addListener((port) => {
     if (port.name.startsWith("approval:")) {
         const id = port.name.split(":")[1];
@@ -661,7 +662,9 @@ runtime.onConnect.addListener((port) => {
             const approval = pendingApprovals[id];
             if (approval) {
                 if (approval.type === "tx" || approval.type === "sign") {
-                    // Keep pending — user can reopen the toolbar popup
+                    // When its window closes, windows.onRemoved rejects it,
+                    // unless an approved attempt is still running, in which
+                    // case that attempt answers the page.
                     return;
                 }
                 settleApproval(id, { approved: false, remember: false });

src/popup/index.html

@@ -7,9 +7,10 @@
         <link rel="stylesheet" href="styles.css" />
     </head>
     <!-- Chrome gives extension pages a stylesheet of its own that sets the
-         font on body, and a Tailwind class beats it only when marked
-         important: hence font-mono! rather than font-mono. -->
-    <body class="bg-bg text-fg font-mono! text-sm">
+         font and its size on body, and a Tailwind class beats it only when
+         marked important: hence font-mono! and text-sm! rather than
+         font-mono and text-sm. -->
+    <body class="bg-bg text-fg font-mono! text-sm!">
         <div id="app" class="p-2 pr-5 overflow-x-hidden">
             <!-- ============ GLOBAL TITLE BAR ============ -->
             <div
@@ -87,11 +88,14 @@
 
                 <!-- Mnemonic form section -->
                 <div id="add-wallet-section-mnemonic">
-                    <p class="mb-2">
-                        Enter your 12 or 24 word recovery phrase below, or click
-                        the button to roll the die for a new one.
-                    </p>
-                    <div class="mb-1 flex justify-end">
+                    <!-- The die button shares the instruction's row: on a row
+                         of its own it pushes Import below the fold at
+                         360x600. -->
+                    <div class="mb-2 flex justify-between items-start gap-2">
+                        <p>
+                            Enter your 12 or 24 word recovery phrase below, or
+                            click the button to roll the die for a new one.
+                        </p>
                         <button
                             id="btn-generate-phrase"
                             class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"

tests/e2e/firefox/run.js

@@ -128,6 +128,18 @@ step("the popup is drawn in the monospace font it declares", async (env) => {
     );
 });
 
+// The same check as the Chrome suite's (#456), so both browsers are held to
+// the same size.
+step("the popup's text is drawn at the 14px text-sm declares", async (env) => {
+    const size = await env.driver.execute(
+        "return getComputedStyle(document.body).fontSize;",
+    );
+    assert(
+        size === "14px",
+        "the popup's text is drawn at " + size + ", not at the 14px of text-sm",
+    );
+});
+
 // The recovery screen (#361): the Chrome suite's four cases, run before any
 // wallet exists for the same reason. With no wallet nothing saves on a timer,
 // so no save can write a good record over the unreadable one. The last of them

tests/e2e/run.js

@@ -113,6 +113,18 @@ test("the popup is drawn in the monospace font it declares (#418)", async (env)
     );
 });
 
+// The same stylesheet sets the size on body to 75%, which would draw the
+// popup at 12px.
+test("the popup's text is drawn at the 14px text-sm declares (#456)", async (env) => {
+    const size = await env.page.evaluate(
+        () => getComputedStyle(document.body).fontSize,
+    );
+    assert(
+        size === "14px",
+        "the popup's text is drawn at " + size + ", not at the 14px of text-sm",
+    );
+});
+
 // The empirical half of #182. The manifest change is only a claim about
 // what the CSP permits; this is the observation. Two things have to hold
 // together, and the run covers both: the popup realm compiles WASM (here),