[feat](trx-frontend-http): GPU-composited CSS overlay for instant freq/BW updates

Replace synchronous drawSignalOverlay() calls in freq/BW change handlers
with lightweight CSS div elements repositioned via transform: translateX().
This is GPU-composited with zero layout/paint cost, making frequency and
bandwidth changes appear instantaneous. The full WebGL overlay catches up
on the next requestAnimationFrame.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-22 08:09:36 +01:00
parent dc2c8b6eb1
commit 54df7cf0f9
3 changed files with 103 additions and 8 deletions
@@ -675,6 +675,35 @@ small { color: var(--text-muted); }
pointer-events: none;
z-index: 4;
}
#fast-freq-marker {
display: none;
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: #ff1744;
opacity: 0.85;
pointer-events: none;
z-index: 5;
will-change: transform;
}
#fast-bw-left, #fast-bw-right {
display: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
pointer-events: none;
z-index: 3;
will-change: transform, width;
}
#fast-bw-left {
background: linear-gradient(to right, transparent, rgba(255,23,68,0.10));
}
#fast-bw-right {
background: linear-gradient(to left, transparent, rgba(255,23,68,0.10));
}
#rds-ps-overlay {
display: none;
position: absolute;