diff --git a/frontend/index.html b/frontend/index.html index 1e38013..80ec249 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -120,8 +120,10 @@ body { font: 14px/1.5 system-ui, sans-serif; background: var(--bg); color: var(- /* APDU list */ .apdu-list { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 8px; } -.apdu-list::-webkit-scrollbar { width: 12px; } -.apdu-list::-webkit-scrollbar-thumb { border-radius: 6px; } +.apdu-list::-webkit-scrollbar, +.side-panel::-webkit-scrollbar { width: 12px; } +.apdu-list::-webkit-scrollbar-thumb, +.side-panel::-webkit-scrollbar-thumb { border-radius: 6px; } .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); } diff --git a/frontend/sw.js b/frontend/sw.js index 5bfa91e..de1e8db 100644 --- a/frontend/sw.js +++ b/frontend/sw.js @@ -1,4 +1,4 @@ -const CACHE = 'simtrace-analyser-v73'; +const CACHE = 'simtrace-analyser-v74'; const PRECACHE = [ 'index.html', diff --git a/frontend/tests/style.test.js b/frontend/tests/style.test.js new file mode 100644 index 0000000..dee24df --- /dev/null +++ b/frontend/tests/style.test.js @@ -0,0 +1,22 @@ +// Scrollbar styling: the APDU list and the side panel share one rule, so +// their widths cannot drift apart (the side panel used to fall back to the +// global 6px bar while the list uses 12px). + +const { test } = require('node:test'); +const assert = require('node:assert'); +const { loadSrc } = require('./helpers.js'); + +const src = loadSrc(); + +test('the APDU list and the side panel share the 12px scrollbar rule', () => { + const rule = /\.apdu-list::-webkit-scrollbar,\s*\n\.side-panel::-webkit-scrollbar \{ width: 12px; \}/; + assert.match(src, rule); + // the thumb radius pairs with the width (6px = half of 12px) + assert.match( + src, + /\.apdu-list::-webkit-scrollbar-thumb,\s*\n\.side-panel::-webkit-scrollbar-thumb \{ border-radius: 6px; \}/); +}); + +test('the global scrollbar default stays thin for the other panes', () => { + assert.match(src, /::-webkit-scrollbar \{ width: 6px; \}/); +});