diff --git a/frontend/index.html b/frontend/index.html index f8bf728..cb41589 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -18,6 +18,8 @@ --bg: #0f172a; --bg-panel: #1e293b; --bg-input: #334155; + --selected-bg: #1e3a8a; /* a blue tint, so a selected row stands out + from the GET RESPONSE pair rows */ --border: #475569; --text: #e2e8f0; --text-muted: #94a3b8; @@ -51,6 +53,7 @@ --bg: #fafafa; --bg-panel: #e5e7eb; --bg-input: #ffffff; + --selected-bg: #dbeafe; --border: #d1d5db; --text: #1f2937; --text-muted: #6b7280; @@ -147,8 +150,7 @@ body { font: 14px/1.5 system-ui, sans-serif; background: var(--bg); color: var(- .apdu-entry { display: flex; gap: 12px; padding: 3px 12px; border-bottom: 1px solid var(--bg-panel); cursor: pointer; align-items: baseline; } .apdu-entry.apdu-pair { background: var(--pair-row); } .apdu-entry:hover { background: var(--bg-panel); } -.apdu-entry.selected { background: var(--bg-input); } -[data-theme="light"] .apdu-entry.selected { background: #dbeafe; } +.apdu-entry.selected { background: var(--selected-bg); } .apdu-time { color: var(--text-muted); font-family: monospace; white-space: nowrap; min-width: 80px; } .apdu-type { color: var(--text); font-weight: 600; min-width: 150px; } .apdu-type.atr { color: var(--green); } diff --git a/frontend/sw.js b/frontend/sw.js index fb65e99..cab5863 100644 --- a/frontend/sw.js +++ b/frontend/sw.js @@ -1,4 +1,4 @@ -const CACHE = 'simtrace-analyser-v89'; +const CACHE = 'simtrace-analyser-v90'; const PRECACHE = [ 'index.html', diff --git a/frontend/tests/style.test.js b/frontend/tests/style.test.js index 033d214..a153f1c 100644 --- a/frontend/tests/style.test.js +++ b/frontend/tests/style.test.js @@ -27,6 +27,16 @@ test('the P3 row labels Lc and Le', () => { assert.match(src, /t\('Lc \(command data length\)'\)/); }); +test('the APDU selection is a blue tint in both themes', () => { + assert.match(src, /\.apdu-entry\.selected \{ background: var\(--selected-bg\); \}/); + assert.doesNotMatch(src, /\[data-theme="light"\] \.apdu-entry\.selected/); + // Dark: a blue (not the neutral --bg-input grey that blended with the + // GET RESPONSE pair rows); light: the established blue-100. + assert.match(src, /--selected-bg: #1e3a8a;/); + assert.match(src, /--selected-bg: #dbeafe;/); + assert.doesNotMatch(src, /--selected-bg: var\(--bg-input\)/); +}); + // ── trace topbar layout ──────────────────────────────────────────────── test('the view selector sits over the side panel at the panel width', () => {