diff options
| -rw-r--r-- | src/style.css | 6 | ||||
| -rw-r--r-- | tools/unread-dot-test.js | 77 |
2 files changed, 81 insertions, 2 deletions
diff --git a/src/style.css b/src/style.css index 5d98aa1..ea29891 100644 --- a/src/style.css +++ b/src/style.css @@ -428,9 +428,11 @@ hr.divider { margin: 16px 0; } .header-msgs.unread::after { content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); - box-shadow: 0 0 0 2px var(--bg); animation: dot-pop .3s ease-out; + /* No entrance animation: render() rebuilds the whole DOM, so a pop here + replayed on every repaint and read as the dot flashing. It either says + someone is waiting or it doesn't. */ + box-shadow: 0 0 0 2px var(--bg); } -@keyframes dot-pop { from { transform: scale(0); } to { transform: scale(1); } } .chat-avatar.header-ava { width: 30px; height: 30px; font-size: 11px; } .npub-box { display: flex; align-items: center; gap: 8px; } .copy-ico { flex-shrink: 0; background: none; border: none; padding: 2px; color: var(--muted); cursor: pointer; display: flex; } diff --git a/tools/unread-dot-test.js b/tools/unread-dot-test.js new file mode 100644 index 0000000..76e3417 --- /dev/null +++ b/tools/unread-dot-test.js @@ -0,0 +1,77 @@ +// The unread dot either says someone is waiting or it doesn't — it must not +// flash on the way in. render() rebuilds the whole DOM, so any entrance +// animation on the dot replays on every repaint; an earlier build popped it +// seven times in the first seconds after a refresh, which reads as flashing. +// +// Run: bun tools/unread-dot-test.js +import puppeteer from 'puppeteer-core'; +import { generateMnemonic } from '@scure/bip39'; +import { wordlist } from '@scure/bip39/wordlists/english'; +import { buildHtml } from '../build.js'; + +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); +let ok = true; +const html = await buildHtml({ minify: true, pwa: false }); +const server = Bun.serve({ port: 5233, fetch: () => new Response(html, { headers: { 'content-type': 'text/html' } }) }); +const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox'] }); +const page = await browser.newPage(); +const click = (sel, t) => page.evaluate((s, x) => { const e = [...document.querySelectorAll(s)].find((n) => n.textContent.trim().toLowerCase().includes(x.toLowerCase())); if (e) { e.click(); return true; } return false; }, sel, t); +const waitText = async (x, ms = 25000) => { for (let i = 0; i < ms / 250; i++) { if ((await page.evaluate(() => document.body.innerText)).toLowerCase().includes(x.toLowerCase())) return true; await sleep(250); } return false; }; + +try { + await page.goto('http://localhost:5233/', { waitUntil: 'domcontentloaded' }); + await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest')); + await page.reload({ waitUntil: 'domcontentloaded' }); + await sleep(400); + await click('button', 'I already have a wallet'); + await sleep(300); + await click('button', 'Import existing'); + await sleep(300); + await page.waitForSelector('textarea'); + await page.type('textarea', generateMnemonic(wordlist)); + await click('button', 'Open wallet'); + await waitText('receive', 15000); + await sleep(10000); // let the coinos room load so there IS unread + + // Now the refresh the report is about. + await page.evaluate(() => { + window.__dot = { anims: 0, appear: 0, disappear: 0, renders: 0 }; + addEventListener('animationstart', (e) => { if (e.target && e.target.classList && e.target.classList.contains('header-msgs')) window.__dot.anims++; }, true); + let had = null; + new MutationObserver(() => { + window.__dot.renders++; + const now = !!document.querySelector('.header-msgs.unread'); + if (had !== null && now !== had) { if (now) window.__dot.appear++; else window.__dot.disappear++; } + had = now; + }).observe(document.getElementById('app'), { childList: true, subtree: true }); + }); + await page.reload({ waitUntil: 'domcontentloaded' }); + // re-arm after the reload wipes it + await page.evaluate(() => { + window.__dot = { anims: 0, appear: 0, disappear: 0, renders: 0 }; + addEventListener('animationstart', (e) => { if (e.target && e.target.classList && e.target.classList.contains('header-msgs')) window.__dot.anims++; }, true); + let had = null; + new MutationObserver(() => { + window.__dot.renders++; + const now = !!document.querySelector('.header-msgs.unread'); + if (had !== null && now !== had) { if (now) window.__dot.appear++; else window.__dot.disappear++; } + had = now; + }).observe(document.body, { childList: true, subtree: true }); + }); + await sleep(12000); + const r = await page.evaluate(() => ({ ...window.__dot, dotNow: !!document.querySelector('.header-msgs.unread') })); + console.log('over 12s after a refresh:'); + const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; }; + check('the dot never animates', r.anims === 0, `${r.anims} animation(s) started`); + check('it settles once and stays', r.appear <= 1 && r.disappear === 0, `+${r.appear} / -${r.disappear}`); + check('and the repaints it sat through were real', r.renders > 1, `${r.renders} DOM mutations`); + check('it is showing (there is unread history)', r.dotNow); +} catch (e) { + console.log(' ✗ run completed —', e.message); + ok = false; +} finally { + await browser.close(); + server.stop(true); +} +console.log(ok ? '\n✅ the dot holds still' : '\n❌ failures above'); +process.exit(ok ? 0 : 1); |