test: wait until the page shows a screen, not only until it lays out (closes #502)

The browser suites' wait for a screen passed as soon as the element laid
out. Until the page's stylesheet has applied, every view lays out, so an
approval test could read the prompt before the page's script had filled
it. visible() in the Chrome harness and waitVisible() in the Firefox
driver now also wait for the page to finish loading and for neither the
element nor anything around it to carry the hidden class that showView()
keeps on every view but the current one. No caller 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
@@ -2164,13 +2160,6 @@ view would leave a wallet one click from deletion.
     - Typed data that states no primary type, or one other than the type it
       would be signed as, or that cannot be read → shown with the error line
       saying so and "Sign" disabled; only "Reject" remains
-    - Typed data whose domain `chainId` names a chain other than the active
-      network's → shown with the error line naming both chain ids and "Sign"
-      disabled; only "Reject" remains. EIP-712 asks for this, because the
-      signature is valid on the chain the domain names. Typed data with no
-      `chainId` is not refused. The background refuses such a signature too,
-      against the network active when the signature reaches it, and answers the
-      site with the same sentence
     - A `personal_sign` or `eth_sign` message that is not hex (`0x` or `0X` and
       an even number of hex digits, the form ethers' `getBytes` reads when
       signing) → shown as plain text, with the error line "This message is plain

TODO.md

@@ -2,9 +2,10 @@
 
 - `git pull` `next` and cut a branch from it — one branch per issue, named
   `issue-<N>-<slug>`. Never branch from `main`.
-- Do the work as one commit whose title ends with ` (closes #N)`.
-- Add no entry to Completed Steps. What landed is recorded on the tracker and in
-  `git log`, where each commit title names the issue it closes.
+- Do the work as one commit whose title ends with ` (closes #N)`, with the
+  `TODO.md` update in that same commit.
+- Move Next Step to the top of Completed Steps; move the top item of Future
+  Steps into Next Step.
 - Run `make fmt`, then `make check`. A feature branch may be red; `next` and
   `main` may not.
 - Rebase onto current `next` immediately before pushing — other branches land on

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

@@ -22,7 +22,6 @@ const { debugFetch, log } = require("../shared/log");
 const {
     verifySignedTx,
     verifySignature,
-    typedDataChainRefusal,
     failureIsRetryable,
     describeTxFailure,
     sameAddress,
@@ -633,9 +632,8 @@ function isExtensionSender(sender) {
 // had refused.
 //
 // TX and sign approvals do not decide here. They stay pending across a
-// 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.
+// disconnect — the user can reopen the toolbar popup — and are rejected by the
+// windows.onRemoved listener below.
 runtime.onConnect.addListener((port) => {
     if (port.name.startsWith("approval:")) {
         const id = port.name.split(":")[1];
@@ -663,9 +661,7 @@ runtime.onConnect.addListener((port) => {
             const approval = pendingApprovals[id];
             if (approval) {
                 if (approval.type === "tx" || approval.type === "sign") {
-                    // When its window closes, windows.onRemoved rejects it,
-                    // unless an approved attempt is still running, in which
-                    // case that attempt answers the page.
+                    // Keep pending — user can reopen the toolbar popup
                     return;
                 }
                 settleApproval(id, { approved: false, remember: false });
@@ -1768,8 +1764,7 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
 
         (async () => {
             try {
-                const s = await getState();
-                const activeAddress = activeAddressOf(s);
+                const activeAddress = await getActiveAddress();
                 // Same as the transaction path: the address the approval named
                 // is the one that must have signed, and a switch since then is
                 // a refusal rather than a signature from another account.
@@ -1788,20 +1783,6 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
                     signature,
                     approval.approvedFrom,
                 );
-                // The sign screen refuses typed data whose domain names
-                // another chain. A signature for it that arrives anyway is
-                // refused here, against the network active now.
-                const sp = approval.signParams;
-                if (
-                    sp.method === "eth_signTypedData_v4" ||
-                    sp.method === "eth_signTypedData"
-                ) {
-                    const refusal = typedDataChainRefusal(
-                        JSON.parse(sp.typedData).domain,
-                        networkById(s.networkId),
-                    );
-                    if (refusal) throw new ApprovalMismatchError(refusal);
-                }
                 settleApproval(msg.id, { signature }, { holdsClaim: true });
                 sendResponse({ signature });
             } catch (e) {

src/popup/index.html

@@ -7,10 +7,9 @@
         <link rel="stylesheet" href="styles.css" />
     </head>
     <!-- Chrome gives extension pages a stylesheet of its own that sets the
-         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!">
+         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">
         <div id="app" class="p-2 pr-5 overflow-x-hidden">
             <!-- ============ GLOBAL TITLE BAR ============ -->
             <div
@@ -88,14 +87,11 @@
 
                 <!-- Mnemonic form section -->
                 <div id="add-wallet-section-mnemonic">
-                    <!-- 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>
+                    <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">
                         <button
                             id="btn-generate-phrase"
                             class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"
@@ -1716,7 +1712,10 @@
                     <div class="text-xs text-muted mb-1">
                         Address that will be shared:
                     </div>
-                    <div id="approve-address" class="text-xs mb-2"></div>
+                    <div
+                        id="approve-address"
+                        class="text-xs flex items-center mb-2"
+                    ></div>
                 </div>
                 <div class="mb-3">
                     <label

src/popup/views/approval.js

@@ -12,7 +12,7 @@ const {
     formatFee,
     tokenLabel,
 } = require("./helpers");
-const { state, saveState, currentNetwork } = require("../../shared/state");
+const { state, saveState } = require("../../shared/state");
 const {
     networkById,
     networkByChainId,
@@ -46,10 +46,7 @@ const {
 const { decryptWithPassword } = require("../../shared/vault");
 const { getSignerForAddress } = require("../../shared/wallet");
 const { walletDefect } = require("../../shared/walletDefects");
-const {
-    describeSigningFailure,
-    typedDataChainRefusal,
-} = require("../../shared/approvalVerify");
+const { describeSigningFailure } = require("../../shared/approvalVerify");
 const txStatus = require("./txStatus");
 const uniswap = require("../../shared/uniswap");
 const { notify, runtimeApi, sendMessage } = require("../../shared/browserApi");
@@ -446,8 +443,7 @@ function signedPrimaryType(types) {
 // Why a signature request cannot be signed, as a sentence for the error line,
 // or null when it can. Only typed data is refused: the `primaryType` the page
 // states has to be the type ethers will sign, or this screen would name one
-// message while another is signed. Its domain may name no chain but the active
-// network's.
+// message while another is signed.
 function typedDataRefusal(sp) {
     if (sp.method === "personal_sign" || sp.method === "eth_sign") return null;
     let data;
@@ -470,7 +466,7 @@ function typedDataRefusal(sp) {
             ", so it cannot be signed."
         );
     }
-    return typedDataChainRefusal(data.domain, currentNetwork());
+    return null;
 }
 
 // The largest amount a Permit2 allowance can hold, a uint160. Permit2 treats

src/shared/approvalVerify.js

@@ -53,7 +53,6 @@ const {
     accessListify,
     formatEther,
     getAddress,
-    getBigInt,
     getBytes,
     toQuantity,
     verifyMessage,
@@ -636,33 +635,6 @@ function verifySignature(signParams, signature, expectedFrom) {
     return recovered;
 }
 
-// Why typed data cannot be signed while `network` is the active network, as a
-// sentence, or null when it can. EIP-712 has a wallet refuse typed data whose
-// domain names another chain, because the signature is valid on that chain.
-// ethers signs no chain id when the domain's is null or absent, and reads any
-// other with getBigInt(), so 1, "1" and "0x1" are the same chain here too.
-function typedDataChainRefusal(domain, network) {
-    const chainId = domain?.chainId;
-    if (chainId === undefined || chainId === null) return null;
-    let named;
-    try {
-        named = getBigInt(chainId);
-    } catch {
-        return "This typed data cannot be read, so it cannot be signed.";
-    }
-    const active = getBigInt(network.chainId);
-    if (named === active) return null;
-    return (
-        "This typed data is for chain id " +
-        named +
-        ", but the active network is " +
-        network.name +
-        " (chain id " +
-        active +
-        "), so it cannot be signed."
-    );
-}
-
 // The stage a transaction approval failed at. Which stage it is decides
 // whether the approval survives the failure.
 const TX_STAGE_SIGN = "sign";
@@ -824,7 +796,6 @@ function describeSigningFailure(response, fallbackMessage) {
 module.exports = {
     verifySignedTx,
     verifySignature,
-    typedDataChainRefusal,
     assertNoForbiddenFields,
     assertNothingUnchecked,
     assertCanonicalBytes,

tests/backgroundApproval.test.js

@@ -397,13 +397,7 @@ function loadBackground(options) {
                 rpcResult = r;
             },
         );
-        return {
-            id: () =>
-                new URL(created[created.length - 1].url).searchParams.get(
-                    "approval",
-                ),
-            result: () => rpcResult,
-        };
+        return { result: () => rpcResult };
     }
 
     // A dApp asking to connect. The origin defaults to one the persisted
@@ -1490,55 +1484,6 @@ describe("what the approval is verified against", () => {
         });
     });
 
-    // Typed data whose domain names another chain is refused on the sign
-    // screen; a signature for it that reaches the background anyway is not
-    // handed to the page (https://git.eeqj.de/sneak/AutistMask/issues/519).
-    // TYPED_DATA names mainnet.
-    async function answerTypedData(bg, pending) {
-        const { domain, types, message } = JSON.parse(TYPED_DATA);
-        delete types.EIP712Domain;
-        const signature = await signer.signTypedData(domain, types, message);
-        const answer = bg.send(
-            {
-                type: "AUTISTMASK_SIGN_RESPONSE",
-                id: pending.id(),
-                approved: true,
-                signature,
-            },
-            { url: bg.fromPopup.url },
-        );
-        await settle();
-        return { answer, signature };
-    }
-
-    test("typed data for the active chain is handed back signed", async () => {
-        const bg = loadBackground();
-        const pending = bg.requestTypedData();
-        await settle();
-
-        const { answer, signature } = await answerTypedData(bg, pending);
-
-        expect(answer.sendResponse).toHaveBeenCalledWith({ signature });
-        expect(pending.result()).toEqual({ result: signature });
-    });
-
-    test("typed data for another chain is refused, not handed back", async () => {
-        const bg = loadBackground();
-        bg.setNetwork(SEPOLIA);
-        const pending = bg.requestTypedData();
-        await settle();
-
-        const { answer } = await answerTypedData(bg, pending);
-
-        const refusal =
-            "This typed data is for chain id 1, but the active network is Sepolia Testnet (chain id 11155111), so it cannot be signed.";
-        expect(answer.sendResponse).toHaveBeenCalledWith({
-            error: refusal,
-            retryable: false,
-        });
-        expect(pending.result()).toEqual({ error: { message: refusal } });
-    });
-
     test("a sign request from another address raises no approval at all", async () => {
         const bg = loadBackground();
         const pending = bg.requestSign(other.address);

tests/e2e/firefox/driver.js

@@ -290,7 +290,6 @@ class Driver {
             `const el = document.querySelector(arguments[0]);
              if (document.readyState !== "complete" || !el) return false;
              if (el.closest(".hidden")) return false;
-             if (getComputedStyle(el).visibility !== "visible") return false;
              const r = el.getBoundingClientRect();
              return r.width > 0 && r.height > 0;`,
             [selector],

tests/e2e/firefox/run.js

@@ -128,18 +128,6 @@ 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/harness.js

@@ -348,7 +348,6 @@ async function visible(page, selector, timeout = 15000) {
                 const el = document.querySelector(sel);
                 if (document.readyState !== "complete" || !el) return false;
                 if (el.closest(".hidden")) return false;
-                if (getComputedStyle(el).visibility !== "visible") return false;
                 const r = el.getBoundingClientRect();
                 return r.width > 0 && r.height > 0;
             },

tests/e2e/run.js

@@ -113,18 +113,6 @@ 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),
@@ -3857,9 +3845,6 @@ test("eth_requestAccounts approved returns the selected address (#183)", async (
             shown.toLowerCase().includes(env.expectedAddress.toLowerCase()),
             "the site prompt shows the wrong address: " + JSON.stringify(shown),
         );
-        // The text above is there even when the row is too narrow to show it
-        // all; this measures that the whole address is visible (#517).
-        await assertAddressesFit(popup, "the connection prompt");
 
         // Remembered, so the connection survives a background worker that MV3
         // terminates after 30 seconds idle. The in-memory connectedSites map

tests/typedDataPermit.test.js

@@ -240,7 +240,6 @@ function request(data) {
 beforeEach(() => {
     state.trackedTokens = [];
     state.wallets = [];
-    state.networkId = "mainnet";
 });
 
 describe("a token permission is warned about, naming spender and amount", () => {
@@ -533,66 +532,3 @@ describe("the sign screen refuses a mismatched primary type", () => {
         expect(node("btn-approve-sign").disabled).toBe(true);
     });
 });
-
-// EIP-712: a wallet refuses typed data whose domain names a chain other than
-// the active one, because the signature is valid on the chain it names
-// (https://git.eeqj.de/sneak/AutistMask/issues/519). The wallet is on Sepolia
-// and the site asks for a mainnet USDC Permit.
-describe("the sign screen refuses typed data for another chain", () => {
-    const REFUSAL =
-        "This typed data is for chain id 1, but the active network is Sepolia Testnet (chain id 11155111), so it cannot be signed.";
-
-    function withChainId(chainId) {
-        return { ...PERMIT, domain: { ...PERMIT.domain, chainId } };
-    }
-
-    beforeEach(() => {
-        decryptWithPassword.mockClear();
-        state.networkId = "sepolia";
-    });
-
-    test("another chain shows the error, with Sign disabled", async () => {
-        await openSignScreen(PERMIT);
-        expect(node("approve-sign-error").textContent).toBe(REFUSAL);
-        expect(node("btn-approve-sign").disabled).toBe(true);
-    });
-
-    test("Sign clicked anyway decrypts and signs nothing", async () => {
-        const sent = await openSignScreen(PERMIT);
-        node("approve-sign-password").value = "any password";
-        await click("btn-approve-sign");
-
-        expect(decryptWithPassword).not.toHaveBeenCalled();
-        expect(sent.map((msg) => msg.type)).not.toContain(
-            "AUTISTMASK_SIGN_RESPONSE",
-        );
-        expect(node("approve-sign-error").textContent).toBe(REFUSAL);
-    });
-
-    // ethers signs 1, "1" and "0x1" as the same chain id.
-    test("the chain id is refused in each form ethers signs", () => {
-        for (const chainId of [1, "1", "0x1"]) {
-            expect(typedDataRefusal(request(withChainId(chainId)))).toBe(
-                REFUSAL,
-            );
-        }
-    });
-
-    test("a chain id that is not a number is refused", () => {
-        expect(typedDataRefusal(request(withChainId("mainnet")))).toBe(
-            "This typed data cannot be read, so it cannot be signed.",
-        );
-    });
-
-    test("the active chain leaves Sign enabled", async () => {
-        await openSignScreen(withChainId("0xaa36a7"));
-        expect(node("approve-sign-error").textContent).toBe("");
-        expect(node("btn-approve-sign").disabled).toBe(false);
-    });
-
-    test("no chain id leaves Sign enabled", async () => {
-        await openSignScreen(withChainId(undefined));
-        expect(node("approve-sign-error").textContent).toBe("");
-        expect(node("btn-approve-sign").disabled).toBe(false);
-    });
-});