Feat/performance probe fps overlay (#472)

* feat(perf-probe): add FPS overlay toggle and tidy probe modal

Add optional rAF-based FPS readout controlled by a persisted probe flag.
Remove the separate keyboard shortcut. Collapse all phase sections by default.

* perf(fps-overlay): subscribe only to showFpsOverlay flag

Add usePerfProbeFlag so the overlay does not re-render when other probe
toggles change. Track the animation frame id with a loop-local variable.
This commit is contained in:
cucadmuh
2026-05-06 02:13:59 +03:00
committed by GitHub
parent c3d37546cf
commit de3c0d9da1
5 changed files with 100 additions and 5 deletions
+24
View File
@@ -13744,3 +13744,27 @@ html[data-perf-disable-home-artwork-clip="true"] .home-lite-artwork .song-card-c
background: color-mix(in srgb, var(--accent) 26%, transparent);
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
/* FPS overlay (Performance Probe → Show FPS overlay) */
.fps-overlay {
position: fixed;
top: 10px;
right: 10px;
z-index: 100003;
pointer-events: none;
padding: 6px 10px;
border-radius: 6px;
font-family: var(--font-mono, ui-monospace, 'Courier New', monospace);
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--text-primary, #fff);
background: color-mix(in srgb, var(--ctp-crust, #111) 82%, transparent);
border: 1px solid color-mix(in srgb, var(--border-subtle, #444) 70%, transparent);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.fps-overlay__unit {
font-size: 10px;
color: var(--text-muted, #888);
letter-spacing: 0.02em;
}