fix: history rows show the ISO datetime and the age (closes #760)

Home, AddressDetail and AddressToken showed only the relative age, with
the datetime as a tooltip. Each row now shows the datetime and then the
age in parentheses, on a line of its own, through transactionTimeHtml()
in helpers.js, which TransactionDetail also uses. The direction label
moves to its own right-aligned line below.

Model: opus-5-5

tests/e2e/run.js

@@ -951,6 +951,70 @@ test("tap-to-copy on the transaction detail screen copies the address (#151)", a
     );
 });
 
+// ------------------------------------------ history row time (#760)
+
+// A Home history row shows the ISO datetime and then the relative age, on a
+// line of its own. Measured at the popup's size: the time line is one line
+// high, and no line of a row is wider than the row or the popup.
+test("a Home history row shows the datetime and the age, one line high, without overflow (#760)", async (env) => {
+    await goHome(env.page);
+    env.routeOpts.seedNativeTransfer = true;
+    const page = await openPopup(env.ctx, env.popupUrl);
+    try {
+        await page.setViewportSize(POPUP_VIEWPORT);
+        await visible(page, "#view-main");
+        await page.waitForFunction(
+            () =>
+                document.querySelectorAll("#home-tx-list .home-tx-row")
+                    .length === 2,
+            null,
+            { timeout: 30000 },
+        );
+        const rows = await page.evaluate(() => {
+            const popupRight = document.body.getBoundingClientRect().right;
+            return [
+                ...document.querySelectorAll("#home-tx-list .home-tx-row"),
+            ].map((row) => {
+                const time = row.firstElementChild;
+                return {
+                    time: time.textContent,
+                    timeHeight: time.getBoundingClientRect().height,
+                    lineHeight: parseFloat(getComputedStyle(time).lineHeight),
+                    overflowingLines: [...row.children].filter(
+                        (line) =>
+                            line.scrollWidth > line.clientWidth ||
+                            line.getBoundingClientRect().right > popupRight,
+                    ).length,
+                };
+            });
+        });
+        console.log("# Home history rows: " + JSON.stringify(rows));        for (const row of rows) {
+            assert(
+                /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d(Z|[+-]\d\d:\d\d) \(\d+ \w+ ago\)$/.test(
+                    row.time,
+                ),
+                "the time line is not the ISO datetime and then the age: " +
+                    JSON.stringify(row.time),
+            );
+            assert(
+                row.timeHeight === row.lineHeight,
+                "the time line is " +
+                    row.timeHeight +
+                    "px high, not one line of " +
+                    row.lineHeight +
+                    "px",
+            );
+            assert(
+                row.overflowingLines === 0,
+                row.overflowingLines + " line(s) of a row overflow it",
+            );
+        }
+    } finally {
+        env.routeOpts.seedNativeTransfer = false;
+        await page.close();
+    }
+});
+
 // ------------------------- the last of the #150 and #151 items (#295)
 //
 // Add Token's confirm button, TransactionDetail opened from the token screen