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

@@ -2071,9 +2071,7 @@ view would leave a wallet one click from deletion.
   artifact can be compared with it field for field. A nonce the site supplies is
   ignored: the nonce is always the account's next nonce from the node, so a site
   cannot replace one of the user's pending transactions or leave this one stuck
-  behind a gap. A gas limit the site supplies, as `gas` or `gasLimit`, is used
-  in place of the node's estimate; a request giving both with different values
-  is refused. A request that cannot be populated — unreachable node, reverting
+  behind a gap. A request that cannot be populated — unreachable node, reverting
   gas estimate — opens no window and is failed back to the site. Only one
   transaction approval exists at a time: populating fixes the nonce, so a second
   `eth_sendTransaction` arriving while one is unanswered is refused with

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"

src/shared/approvalTx.js

@@ -31,7 +31,6 @@ const {
     VoidSigner,
     accessListify,
     getAddress,
-    getBigInt,
     getBytes,
     hexlify,
     toQuantity,
@@ -48,11 +47,10 @@ const {
 // minutes long, which is not a wait anyone will sit through.
 const POPULATE_TIMEOUT_MS = 20000;
 
-// The request fields taken from the page, plus `gas`, which requestFrom()
-// takes as the gas limit. Anything else is dropped rather than passed to
-// ethers: the object is page-controlled, and a future ethers that learns to
-// carry a new transaction field must not start picking one up out of it
-// without this module knowing.
+// The request fields taken from the page. Anything else is dropped rather than
+// passed to ethers: the object is page-controlled, and a future ethers that
+// learns to carry a new transaction field must not start picking one up out of
+// it without this module knowing.
 //
 // The nonce is not taken from the page; it is always the account's next nonce
 // from the network. A page that chose it could replace one of the user's
@@ -86,16 +84,6 @@ function present(v) {
     return v !== null && v !== undefined && v !== "";
 }
 
-// Whether two quantities from the page are the same number. One that is not a
-// number matches nothing.
-function sameQuantity(a, b) {
-    try {
-        return getBigInt(a) === getBigInt(b);
-    } catch {
-        return false;
-    }
-}
-
 // These strings reach the user through the requesting page, so they are full
 // sentences even when the tail of one came from ethers or from the node.
 function sentence(text) {
@@ -123,20 +111,6 @@ function requestFrom(txParams, from) {
     for (const key of REQUEST_FIELDS) {
         if (present(txParams[key])) request[key] = txParams[key];
     }
-    // JSON-RPC calls the gas limit `gas`, and that is the name sites send.
-    // ethers only reads `gasLimit`: left as `gas` it would be dropped and an
-    // estimate signed in its place.
-    if (present(txParams.gas)) {
-        if (
-            present(request.gasLimit) &&
-            !sameQuantity(request.gasLimit, txParams.gas)
-        ) {
-            throw fail(
-                "The site asked for two different gas limits for this transaction.",
-            );
-        }
-        request.gasLimit = txParams.gas;
-    }
     if (
         present(request.type) &&
         !ALLOWED_TX_TYPES.includes(Number(request.type))

tests/approvalTx.test.js

@@ -9,7 +9,7 @@
 // requesting page or the RPC node can say turns it into an approval that
 // should never have been raised.
 
-const { Network, Transaction, Wallet, toQuantity } = require("ethers");
+const { Network, Wallet } = require("ethers");
 const {
     prepareApprovalTx,
     serializeApprovedTx,
@@ -138,43 +138,6 @@ describe("prepareApprovalTx", () => {
         expect(approved.maxFeePerGas).toBe("0x12a05f200");
     });
 
-    // `gas` is the JSON-RPC name for the gas limit and the one sites send.
-    // The node would estimate 21000; the site's 200000 is what is shown and
-    // what is signed.
-    test("uses the gas limit a site sends as gas", async () => {
-        const approved = await prepareApprovalTx(
-            providerWith(),
-            signer.address,
-            { ...TX_PARAMS, gas: "0x30d40" },
-        );
-        expect(approved.gasLimit).toBe("0x30d40");
-        const signed = Transaction.from(
-            await signer.signTransaction({ ...approved }),
-        );
-        expect(signed.gasLimit).toBe(200000n);
-    });
-
-    test("accepts gas and gasLimit that name the same number", async () => {
-        const approved = await prepareApprovalTx(
-            providerWith(),
-            signer.address,
-            { ...TX_PARAMS, gas: "0x30d40", gasLimit: 200000 },
-        );
-        expect(approved.gasLimit).toBe("0x30d40");
-    });
-
-    test("refuses gas and gasLimit that disagree", async () => {
-        await expect(
-            prepareApprovalTx(providerWith(), signer.address, {
-                ...TX_PARAMS,
-                gas: "0x30d40",
-                gasLimit: "0x5208",
-            }),
-        ).rejects.toThrow(
-            "The site asked for two different gas limits for this transaction.",
-        );
-    });
-
     test("carries an access list the request asked for", async () => {
         const approved = await prepareApprovalTx(
             providerWith(),
@@ -249,15 +212,6 @@ describe("prepareApprovalTx", () => {
         ).rejects.toThrow(/gas limit no network this wallet supports/);
     });
 
-    test("refuses a gas limit the site sent above the ceiling", async () => {
-        await expect(
-            prepareApprovalTx(providerWith(), signer.address, {
-                ...TX_PARAMS,
-                gas: toQuantity(MAX_GAS_LIMIT + 1n),
-            }),
-        ).rejects.toThrow(/gas limit no network this wallet supports/);
-    });
-
     // The combined bound at population: a gas limit and a fee that are each
     // under their own ceiling but multiply to thousands of ETH is refused
     // before the approval window opens, so the user is never shown a

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),