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:
parent
b83845a78f
commit
3a61158e00
3 changed files with 15 additions and 11 deletions
|
|
@ -7,7 +7,15 @@ const useCEF = process.env.AGOR_CEF === "1";
|
||||||
|
|
||||||
// When CEF is active, enable remote debugging for CDP-based E2E automation.
|
// When CEF is active, enable remote debugging for CDP-based E2E automation.
|
||||||
const cefFlags: Record<string, string | boolean> | undefined = useCEF
|
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;
|
: undefined;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -178,13 +178,11 @@
|
||||||
.dot.orange { background: var(--ctp-peach); }
|
.dot.orange { background: var(--ctp-peach); }
|
||||||
|
|
||||||
.pulse-dot {
|
.pulse-dot {
|
||||||
animation: pulse 1.5s ease-in-out infinite;
|
/* 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;
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: 0.3; }
|
|
||||||
}
|
}
|
||||||
|
.pulse-dot.dim { opacity: 0.4; }
|
||||||
|
|
||||||
.val { color: var(--ctp-text); font-weight: 500; }
|
.val { color: var(--ctp-text); font-weight: 500; }
|
||||||
.cost { color: var(--ctp-yellow); }
|
.cost { color: var(--ctp-yellow); }
|
||||||
|
|
|
||||||
|
|
@ -219,10 +219,8 @@ html, body {
|
||||||
--dot-color: var(--ctp-peach);
|
--dot-color: var(--ctp-peach);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse-dot {
|
/* @keyframes pulse-dot removed — CSS animations cause continuous repaint
|
||||||
0%, 100% { opacity: 1; transform: scale(1); }
|
in CEF + WebKitGTK. Use JS class toggle instead. */
|
||||||
50% { opacity: 0.55; transform: scale(0.85); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-name {
|
.project-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue