perf(electrobun): fix CEF high CPU — disable GPU flags + remove CSS animations

- electrobun.config.ts: add --disable-gpu --disable-gpu-compositing to CEF
  flags (GLXBadWindow X11 errors cause continuous recovery loop)
- StatusBar.svelte: replace @keyframes pulse with CSS transition + JS toggle
- app.css: remove @keyframes pulse-dot (continuous compositor repaint)

CSS animations on small elements cause 10-30% CPU in both CEF and WebKitGTK.
JS class toggle with transition: opacity 0.3s uses near-zero CPU.
This commit is contained in:
Hibryda 2026-03-22 09:35:24 +01:00
parent b83845a78f
commit 3a61158e00
3 changed files with 15 additions and 11 deletions

View file

@ -7,7 +7,15 @@ const useCEF = process.env.AGOR_CEF === "1";
// When CEF is active, enable remote debugging for CDP-based E2E automation.
const cefFlags: Record<string, string | boolean> | undefined = useCEF
? { "remote-debugging-port": "9222", "remote-allow-origins": "*" }
? {
"remote-debugging-port": "9222",
"remote-allow-origins": "*",
// Reduce CPU: disable GPU acceleration (GLXBadWindow errors on Linux
// cause continuous error recovery loop in software fallback mode)
"disable-gpu": true,
"disable-gpu-compositing": true,
"disable-software-rasterizer": false,
}
: undefined;
export default {

View file

@ -178,13 +178,11 @@
.dot.orange { background: var(--ctp-peach); }
.pulse-dot {
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
/* No CSS animation — use JS class toggle to avoid continuous repaint.
CEF + WebKitGTK both suffer from high CPU with @keyframes on small elements. */
transition: opacity 0.3s ease;
}
.pulse-dot.dim { opacity: 0.4; }
.val { color: var(--ctp-text); font-weight: 500; }
.cost { color: var(--ctp-yellow); }

View file

@ -219,10 +219,8 @@ html, body {
--dot-color: var(--ctp-peach);
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
/* @keyframes pulse-dot removed CSS animations cause continuous repaint
in CEF + WebKitGTK. Use JS class toggle instead. */
.project-name {
font-weight: 600;