Skip to content

Perf/remove idle stop and layer hacks #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dsetzer merged 4 commits into from
Jul 11, 2026
Merged

Perf/remove idle stop and layer hacks #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6187fe9
Stop pausing the render loop and remove GPU layer hacks that hurt per…
dsetzer Jul 11, 2026
4204a6c
Revert compositing layer changes
dsetzer Jul 11, 2026
7b81fe9
Restore accent color, layout, and readability changes
dsetzer Jul 11, 2026
d253499
Remove transform scaling on panels, fix search window overflow
dsetzer Jul 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions webui/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
--t-surface-high: #1e3350;
--t-border: #345070;
--t-text: #e3edff;
--t-text-dim: #b7cbe8;
--t-primary: #7c8bff;
--t-primary-text: #eceaff;
--t-text-dim: #f2f7ff;
--t-primary: #4fae82;
--t-primary-text: #d9f5e6;
--t-on-primary: #0a0e2e;
--t-secondary: #bcff5f;
--t-error: #ff6b6b;
Expand Down
6 changes: 1 addition & 5 deletions webui/src/lib/Universe.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,11 +239,7 @@
backgroundColor: 0x000000,
antialias: false,
resolution: window.devicePixelRatio * resLevels[resIndex],
autoDensity: true,
// keep the last rendered frame in the canvas buffer; without this the
// browser can discard it while the ticker is idle-paused, causing
// black flickering whenever the page recomposites
preserveDrawingBuffer: true
autoDensity: true
});
container.appendChild(app.canvas);
resButtonText = `res x${resLevels[resIndex]}`;
Expand Down
2 changes: 1 addition & 1 deletion webui/src/lib/components/InfoPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
}
</script>

<Window bind:left bind:top autoWidth={true}>
<Window bind:left bind:top autoWidth={true} zIndex={950}>
<span slot="title">
{#key JSON.stringify(info)}
<Planet {info} />
Expand Down
19 changes: 9 additions & 10 deletions webui/src/lib/components/SearchPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
import { onMount, onDestroy } from 'svelte';

export let left = 200;
export let top = 10;
export let top = 56;
export let search_results: SearchResult | null = null;
export let universe_data: UniverseData;
export let hidden = false;
Expand Down Expand Up @@ -74,7 +74,7 @@
let ro: ResizeObserver | null = null;
let spMaxHeight: number | undefined;
const spMinWidth = 360;
const spDefaultWidth = 720;
const spDefaultWidth = 780;
const spMaxWidth = 960;
function normalizeColor(v: string): string | '' {
if (!v) return '';
Expand Down Expand Up @@ -138,7 +138,7 @@
ro?.disconnect();
ro = new ResizeObserver((entries) => {
const w = entries[0].contentRect.width;
sizeClass = w < 420 ? 'xs' : w < 500 ? 'sm' : w < 660 ? 'md' : '';
sizeClass = w < 420 ? 'xs' : w < 500 ? 'sm' : w < 710 ? 'md' : '';
});
ro.observe(formEl);
}
Expand Down Expand Up @@ -721,7 +721,6 @@
}
.input::placeholder {
color: var(--t-text-dim);
opacity: 0.8;
}
.select option {
background: var(--t-surface-high);
Expand Down Expand Up @@ -788,29 +787,29 @@

.pill-wrap {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(min-content, 1fr));
gap: 0.4rem;
}
.pill-wrap :global(.tri-pill) {
width: 100%;
justify-content: flex-start;
}
.form.md .pill-wrap {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(min-content, 1fr));
}
.form.sm .pill-wrap {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(min-content, 1fr));
}
.form.xs .pill-wrap {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(min-content, 1fr));
}
.star-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3, minmax(min-content, 1fr));
gap: 0.3rem;
}
.form.md .star-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3, minmax(min-content, 1fr));
}
.form.sm .star-grid {
grid-template-columns: repeat(3, 1fr);
Expand Down
4 changes: 0 additions & 4 deletions webui/src/lib/components/SearchResults.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,12 +413,10 @@
display: flex;
gap: 0.8rem;
font-size: 0.72rem;
opacity: 0.8;
margin: -0.3rem 0 0.4rem;
}
.empty {
font-size: 0.8rem;
opacity: 0.7;
padding: 0.25rem 0;
}
.row {
Expand Down Expand Up @@ -456,12 +454,10 @@
.row .type,
.row .size {
font-size: 0.7rem;
opacity: 0.85;
}
.row .coord {
font-size: 0.75rem;
font-family: monospace;
opacity: 0.8;
margin-right: 0.35rem;
}
.row .size {
Expand Down
1 change: 0 additions & 1 deletion webui/src/lib/components/TriPill.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@
display: flex;
align-items: center;
justify-content: center;
opacity: 0.9;
}
.tri-pill-check svg {
width: 0.85rem;
Expand Down
43 changes: 10 additions & 33 deletions webui/src/lib/components/Window.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
export let minHeight: number | undefined = undefined;
export let maxHeight: number | undefined = undefined;
export let autoWidth = false;
export let zIndex = 900;

let startX = 0;
let startY = 0;
Expand All @@ -28,17 +29,8 @@
effMaxH: number | undefined;
let savedHeight = 0;
let headerHeight = 0;
let uiScale = 1;

function readScale() {
if (typeof window === 'undefined') return 1;
const v = getComputedStyle(document.documentElement).getPropertyValue('--ui-scale').trim();
const n = parseFloat(v);
return isNaN(n) ? 1 : n;
}

function dragStart(e: MouseEvent) {
uiScale = readScale();
startX = e.clientX;
startY = e.clientY;
baseL = left;
Expand Down Expand Up @@ -73,7 +65,6 @@
e.stopPropagation();
if (d.includes('n') || d.includes('s')) userResized = true;
dir = d;
uiScale = readScale();
startX = e.clientX;
startY = e.clientY;
baseL = left;
Expand Down Expand Up @@ -106,35 +97,31 @@
function resizeMove(e: MouseEvent) {
const dxScreen = e.clientX - startX;
const dyScreen = e.clientY - startY;
const dxInternal = dxScreen / uiScale;
const dyInternal = dyScreen / uiScale;
let newW = startW;
let newH = startH;
let newL = baseL;
let newT = baseT;

if (dir.includes('e')) {
newW = clamp(startW + dxInternal, effMinW, effMaxW);
newW = clamp(startW + dxScreen, effMinW, effMaxW);
}
if (dir.includes('s')) {
newH = clamp(startH + dyInternal, effMinH, effMaxH);
newH = clamp(startH + dyScreen, effMinH, effMaxH);
}
if (dir.includes('w')) {
const desired = startW - dxInternal;
const desired = startW - dxScreen;
if (effMaxW !== undefined && desired >= effMaxW) {
newW = effMaxW;
newL = baseL + (startW - effMaxW) * uiScale;
newL = baseL + (startW - effMaxW);
} else {
newW = clamp(desired, effMinW, effMaxW);
const internalDelta = startW - newW;
newL = baseL + internalDelta * uiScale;
newL = baseL + (startW - newW);
}
}
if (dir.includes('n')) {
const raw = startH - dyInternal;
const raw = startH - dyScreen;
newH = clamp(raw, effMinH, effMaxH);
const internalDelta = startH - newH;
newT = baseT + internalDelta * uiScale;
newT = baseT + (startH - newH);
}

left = newL;
Expand Down Expand Up @@ -226,6 +213,7 @@
style:height={collapsed ? headerHeight + 'px' : height ? height + 'px' : undefined}
style:min-height={collapsed ? headerHeight + 'px' : minHeight ? minHeight + 'px' : undefined}
style:max-height={collapsed ? headerHeight + 'px' : maxHeight ? maxHeight + 'px' : undefined}
style:z-index={zIndex}
>
<div bind:this={headerEl} class="header" role="toolbar" tabindex="0" on:mousedown={dragStart}>
<slot name="title"></slot>
Expand Down Expand Up @@ -281,23 +269,12 @@
overflow: hidden;
z-index: 900;
font-family: var(--t-font-body);
transform: scale(var(--ui-scale));
transform-origin: top left;
will-change: transform;
backface-visibility: hidden;
}
.panel :global(.unscaled) {
transform: scale(calc(1 / var(--ui-scale)));
transform-origin: left top;
width: calc(100% * var(--ui-scale));
display: block;
}
.panel .body {
overflow: auto;
/* scrolling inside a scaled ancestor (.panel has transform: scale())
makes Chromium/Firefox mis-rasterize tiles during scroll+resize,
showing up as black boxes; forcing its own compositing layer fixes it */
will-change: transform;
/* fill exactly the space left under the header so the bottom of the
content is never clipped by the panel's overflow: hidden */
flex: 1 1 auto;
Expand All @@ -318,7 +295,7 @@
user-select: none;
font-family: var(--t-font-mono);
font-size: 0.78rem;
font-weight: 200;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--t-primary-text);
Expand Down
2 changes: 1 addition & 1 deletion webui/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
let raw_data: any = null;
let internalUpdate = false;
let searchHidden = false;
let resultsHidden = false;
let resultsHidden = true;

function parseCoordString(str: string | null): Coordinate | null {
if (!str) return null;
Expand Down