harden: show a personal message's hex and its text in byte order, hidden characters marked (closes #403)

The signature screen showed only the text a personal message decodes
to, with bidirectional, right-to-left and zero-width characters acting
on it, so a site could make the message read differently from the
bytes that are signed, and a message that was not hex was decoded into
NUL characters. The screen now shows the hex as "Raw data" alongside
the text, lays the text out left to right in byte order, and shows each
control character, line and paragraph separator, and character that
paints nothing (the set src/shared/symbolSpoof.js already strips) as a
U+XXXX mark. A message is hex when getBytes, which signing uses, reads
it; one that is not cannot be signed, so it is shown as plain text with
"Sign" disabled.

Model: opus-5-5

tests/e2e/run.js

@@ -3232,6 +3232,64 @@ test("personal_sign rejected returns a rejection to the page (#183)", async (env
     );
 });
 
+// A right-to-left character must not move the characters around it: U+05C3
+// between "5" and "00" would otherwise put "500" on screen before it. A
+// paragraph separator (U+2029) before it, left in the text, would end the
+// byte-order layout and bring that back
+// (https://git.eeqj.de/sneak/AutistMask/issues/403).
+test("a personal message is laid out in the order of its bytes (#403)", async (env) => {
+    const rightToLeft = String.fromCodePoint(0x05c3);
+    const text =
+        "Sign in" +
+        String.fromCodePoint(0x2029) +
+        "Pay 5" +
+        rightToLeft +
+        "00 ETH";
+    await startRequest(env.dapp, "sign-bidi", "personal_sign", [
+        hexlify(toUtf8Bytes(text)),
+        env.expectedAddress,
+    ]);
+    const popup = await waitForApprovalWindow(env.ctx);
+    await visible(popup, "#view-approve-sign");
+
+    // The text on screen, marks included, and the left edge of each of its
+    // characters, in byte order. A character the browser's fonts draw with
+    // no width shares its neighbour's edge.
+    const shown = await popup.evaluate(() => {
+        const message = document.getElementById("approve-sign-message");
+        const walker = document.createTreeWalker(message, NodeFilter.SHOW_TEXT);
+        const range = document.createRange();
+        let text = "";
+        const lefts = [];
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+            for (let i = 0; i < node.length; i++) {
+                range.setStart(node, i);
+                range.setEnd(node, i + 1);
+                lefts.push(range.getBoundingClientRect().left);
+            }
+            text += node.data;
+        }
+        return { text, lefts };
+    });
+    await clickAndClose(popup, "#btn-reject-sign");
+    await assertUserRejection(
+        env.dapp,
+        "sign-bidi",
+        "the byte-order personal_sign rejection",
+    );
+
+    assert(
+        shown.text === "Sign inU+2029Pay 5" + rightToLeft + "00 ETH",
+        "the paragraph separator is not shown as a mark: " +
+            JSON.stringify(shown.text),
+    );
+    assert(
+        shown.lefts.every((left, i) => i === 0 || left >= shown.lefts[i - 1]),
+        "the personal message is not laid out in byte order: " +
+            JSON.stringify(shown.lefts),
+    );
+});
+
 test("eth_signTypedData_v4 signs, and the signature recovers (#183)", async (env) => {
     await startRequest(env.dapp, "typed", "eth_signTypedData_v4", [
         env.expectedAddress,