Skip to content

Commit b75561c

Browse files
velzievelzie
committed
ui tweaks
1 parent fbb1e8e commit b75561c

5 files changed

Lines changed: 210 additions & 118 deletions

File tree

‎demo/chrome/index.html‎

Lines changed: 119 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<title>gecko.js — chrome demo</title>
6+
<title>Firefox in WebAssembly</title>
7+
<link id="favicon" rel="icon" type="image/webp" href="logo.webp" />
78
<link rel="preconnect" href="https://fonts.googleapis.com" />
89
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
910
<link
@@ -14,27 +15,43 @@
1415
<body>
1516
<section id="splash" aria-live="polite">
1617
<header class="top-nav">
17-
<a
18-
class="nav-brand"
19-
href="https://puter.com"
20-
target="_blank"
21-
rel="noreferrer"
22-
aria-label="Puter"
23-
>
24-
<img
25-
src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2248px%22%20height%3D%2248px%22%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke-width%3D%222%22%20transform%3D%22matrix(0%2C%201%2C%20-1%2C%200%2C%2047.999504%2C%200.000014)%22%3E%3Cpolyline%20points%3D%2239%2024%2025%2024%2025%2028%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpolyline%20points%3D%2235.879%2010.121%2032%2014%2025%2014%2025%2018%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M13%2C26a10.29%2C10.29%2C0%2C0%2C1-7.2-3%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M17%2C31.6A5.826%2C5.826%2C0%2C0%2C1%2C13%2C26a5.731%2C5.731%2C0%2C0%2C1%2C2-4.4%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M35.879%2C37.879%2C32%2C34H25v2A9.9%2C9.9%2C0%2C0%2C1%2C15%2C46%2C9.9%2C9.9%2C0%2C0%2C1%2C5%2C36a9.058%2C9.058%2C0%2C0%2C1%2C.6-3.2A5.627%2C5.627%2C0%2C0%2C1%2C3%2C28a5.888%2C5.888%2C0%2C0%2C1%2C2.8-5A9.994%2C9.994%2C0%2C0%2C1%2C3%2C16%2C9.9%2C9.9%2C0%2C0%2C1%2C13%2C6h.4A5.826%2C5.826%2C0%2C0%2C1%2C19%2C2a5.893%2C5.893%2C0%2C0%2C1%2C6%2C6%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20data-color%3D%22color-2%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%2224%22%20r%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20data-color%3D%22color-2%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2240%22%20r%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20data-color%3D%22color-2%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"
26-
alt="Puter"
27-
height="30"
28-
/>
29-
</a>
18+
<div class="nav-left">
19+
<a
20+
class="nav-brand"
21+
href="https://puter.com"
22+
target="_blank"
23+
rel="noreferrer"
24+
aria-label="Puter"
25+
>
26+
<img
27+
src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2248px%22%20height%3D%2248px%22%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke-width%3D%222%22%20transform%3D%22matrix(0%2C%201%2C%20-1%2C%200%2C%2047.999504%2C%200.000014)%22%3E%3Cpolyline%20points%3D%2239%2024%2025%2024%2025%2028%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpolyline%20points%3D%2235.879%2010.121%2032%2014%2025%2014%2025%2018%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M13%2C26a10.29%2C10.29%2C0%2C0%2C1-7.2-3%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M17%2C31.6A5.826%2C5.826%2C0%2C0%2C1%2C13%2C26a5.731%2C5.731%2C0%2C0%2C1%2C2-4.4%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Cpath%20d%3D%22M35.879%2C37.879%2C32%2C34H25v2A9.9%2C9.9%2C0%2C0%2C1%2C15%2C46%2C9.9%2C9.9%2C0%2C0%2C1%2C5%2C36a9.058%2C9.058%2C0%2C0%2C1%2C.6-3.2A5.627%2C5.627%2C0%2C0%2C1%2C3%2C28a5.888%2C5.888%2C0%2C0%2C1%2C2.8-5A9.994%2C9.994%2C0%2C0%2C1%2C3%2C16%2C9.9%2C9.9%2C0%2C0%2C1%2C13%2C6h.4A5.826%2C5.826%2C0%2C0%2C1%2C19%2C2a5.893%2C5.893%2C0%2C0%2C1%2C6%2C6%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20data-color%3D%22color-2%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%2224%22%20r%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20data-color%3D%22color-2%22%20stroke-linejoin%3D%22miter%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2240%22%20r%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20data-color%3D%22color-2%22%20stroke-linejoin%3D%22miter%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"
28+
alt="Puter"
29+
height="30"
30+
/>
31+
</a>
32+
<a
33+
class="nav-brand-label"
34+
href="http://developer.puter.com/labs/"
35+
target="_blank"
36+
rel="noreferrer"
37+
>
38+
Puter <span class="labs-badge">Labs</span>
39+
</a>
40+
</div>
3041
<div class="nav-links">
3142
<a
3243
class="nav-link"
3344
href="https://github.com/MercuryWorkshop/firefox-wasm"
3445
target="_blank"
3546
rel="noreferrer"
3647
>
37-
<svg viewBox="0 0 16 16" width="18" height="18" fill="currentColor" aria-hidden="true">
48+
<svg
49+
viewBox="0 0 16 16"
50+
width="18"
51+
height="18"
52+
fill="currentColor"
53+
aria-hidden="true"
54+
>
3855
<path
3956
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
4057
/>
@@ -55,9 +72,8 @@ <h1 id="project-title" class="splash-title">
5572
</h1>
5673
<p class="project-copy">
5774
This is the gecko engine compiled to WebAssembly, running the
58-
actual firefox UI in a web browser. All js execution and
59-
rendering is done inside webassembly, instead of the host
60-
browser.
75+
actual firefox UI in a web browser. All js execution and rendering
76+
is done inside webassembly, instead of the host browser.
6177
</p>
6278
<div class="project-facts" aria-label="Project highlights">
6379
<div class="fact">
@@ -73,10 +89,7 @@ <h1 id="project-title" class="splash-title">
7389
<span>Tabs load web content through a Wisp server.</span>
7490
</div>
7591
</div>
76-
<section
77-
class="startup-console"
78-
aria-label="Startup console"
79-
>
92+
<section class="startup-console" aria-label="Startup console">
8093
<p class="phase-kicker">Startup log</p>
8194
<div
8295
id="console-output"
@@ -87,90 +100,93 @@ <h1 id="project-title" class="splash-title">
87100
</section>
88101
</div>
89102

90-
<div id="stage-card" class="stage-card" data-phase="predownload">
91-
<section
92-
class="phase-section phase-predownload"
93-
aria-label="Download browser assets"
94-
>
95-
<p class="phase-kicker">Phase 1</p>
96-
<h2 class="phase-title">Download browser files</h2>
97-
<p class="splash-status">
98-
The Firefox user interface ships as a ~18&nbsp;MB download,
99-
fetched fresh on every visit and served from memory.
100-
</p>
101-
<div class="splash-actions">
102-
<button id="download-btn" type="button" class="start-btn">
103-
Download
104-
</button>
105-
</div>
106-
</section>
103+
<div id="stage-card" class="stage-card" data-phase="predownload">
104+
<section
105+
class="phase-section phase-predownload"
106+
aria-label="Download browser assets"
107+
>
108+
<p class="phase-kicker">Phase 1</p>
109+
<h2 class="phase-title">Download browser files</h2>
110+
<p class="splash-status">
111+
The Firefox user interface ships as a ~18&nbsp;MB download,
112+
fetched fresh on every visit and served from memory.
113+
</p>
114+
<div class="splash-actions">
115+
<button id="download-btn" type="button" class="start-btn">
116+
Download
117+
</button>
118+
</div>
119+
</section>
107120

108-
<section
109-
class="phase-section phase-loading"
110-
aria-label="Preparing browser assets"
111-
>
112-
<p class="phase-kicker">Phase 2</p>
113-
<h2 class="phase-title">Preparing browser files</h2>
114-
<p id="splash-status" class="splash-status">
115-
Preparing chrome assets
116-
</p>
117-
<div
118-
class="progress-track"
119-
role="progressbar"
120-
aria-valuemin="0"
121-
aria-valuemax="100"
122-
aria-valuenow="0"
121+
<section
122+
class="phase-section phase-loading"
123+
aria-label="Preparing browser assets"
123124
>
124-
<div id="progress-fill" class="progress-fill"></div>
125-
</div>
126-
<div class="progress-meta">
127-
<span id="progress-phase">Checking</span>
128-
<span id="progress-percent">0%</span>
129-
</div>
130-
</section>
125+
<p class="phase-kicker">Phase 2</p>
126+
<h2 class="phase-title">Preparing browser files</h2>
127+
<p id="splash-status" class="splash-status">
128+
Preparing chrome assets
129+
</p>
130+
<div
131+
class="progress-track"
132+
role="progressbar"
133+
aria-valuemin="0"
134+
aria-valuemax="100"
135+
aria-valuenow="0"
136+
>
137+
<div id="progress-fill" class="progress-fill"></div>
138+
</div>
139+
<div class="progress-meta">
140+
<span id="progress-phase">Checking</span>
141+
<span id="progress-percent">0%</span>
142+
</div>
143+
</section>
131144

132-
<section
133-
class="phase-section phase-ready"
134-
aria-label="Launch options"
135-
>
136-
<p class="phase-kicker">Phase 3</p>
137-
<h2 class="phase-title">Launch options</h2>
138-
<div class="splash-controls">
139-
<label class="option-card">
140-
<input type="checkbox" id="opt-gpu" />
141-
<span class="option-copy">
142-
<strong>Use GPU acceleration</strong>
143-
<span>Uses webgl based rendering for web contents</span>
144-
</span>
145-
</label>
146-
<label class="option-card">
147-
<input type="checkbox" id="opt-jit" />
148-
<span class="option-copy">
149-
<strong>Enable JIT</strong>
150-
<span>Experimental JS -> WASM JIT. Will be buggy</span>
151-
</span>
152-
</label>
153-
<label class="wisp-field">
154-
<span>Wisp server</span>
155-
<span class="wisp-copy">
156-
Websocket proxy endpoint that tabs load web content through.
157-
</span>
158-
<input
159-
type="text"
160-
id="opt-wisp"
161-
spellcheck="false"
162-
autocomplete="off"
163-
aria-label="Wisp server"
164-
/>
165-
</label>
166-
</div>
167-
<div class="splash-actions">
168-
<button id="start-btn" type="button" class="start-btn">
169-
Start
170-
</button>
171-
</div>
172-
</section>
173-
</div>
145+
<section
146+
class="phase-section phase-ready"
147+
aria-label="Launch options"
148+
>
149+
<p class="phase-kicker">Phase 3</p>
150+
<h2 class="phase-title">Launch options</h2>
151+
<div class="splash-controls">
152+
<div class="flags-group">
153+
<span>Flags</span>
154+
<label class="option-card">
155+
<input type="checkbox" id="opt-gpu" />
156+
<span class="option-copy">
157+
<strong>Use GPU acceleration</strong>
158+
<span>Uses webgl based rendering for web contents</span>
159+
</span>
160+
</label>
161+
<label class="option-card">
162+
<input type="checkbox" id="opt-jit" />
163+
<span class="option-copy">
164+
<strong>Enable JIT</strong>
165+
<span>Experimental JS -> WASM JIT. Will be buggy</span>
166+
</span>
167+
</label>
168+
</div>
169+
<label class="wisp-field">
170+
<span>Wisp server</span>
171+
<span class="wisp-copy">
172+
Websocket proxy endpoint that tabs load web content through.
173+
</span>
174+
<input
175+
type="text"
176+
id="opt-wisp"
177+
spellcheck="false"
178+
autocomplete="off"
179+
aria-label="Wisp server"
180+
/>
181+
</label>
182+
</div>
183+
<div class="splash-actions">
184+
<button id="start-btn" type="button" class="start-btn">
185+
Start
186+
</button>
187+
</div>
188+
</section>
189+
</div>
174190
</div>
175191
</div>
176192
</section>

‎demo/chrome/src/chrome-fs.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@ type ProgressCallback = (progress: ChromeAssetsProgress) => void;
2323
// as an in-memory FsProvider for `fs`: the engine consults it provider-first
2424
// for /gre, falling back to the baked gecko.data on a miss. Only the persistent
2525
// profile touches OPFS (PROFILE_OPFS_PATH, gecko.js's built-in OPFS provider).
26-
const ARCHIVE_URL = '/chrome-assets.tar.zst';
27-
const MANIFEST_URL = '/chrome-assets.json';
26+
// Page-relative (the build uses vite base './' so the site works from any
27+
// subdirectory; these live next to index.html in dist/).
28+
const ARCHIVE_URL = new URL('chrome-assets.tar.zst', location.href).href;
29+
const MANIFEST_URL = new URL('chrome-assets.json', location.href).href;
2830
// OPFS path for the persistent profile (gecko.js `profile` option).
2931
export const PROFILE_OPFS_PATH = 'profile';
3032
const REQUIRED_FILES = [

‎demo/chrome/src/main.ts‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,18 @@ declare global {
1212
interface ImportMeta {
1313
env: {
1414
VITE_PUTER_BRANDING?: string;
15+
VITE_DISABLE_BRANDING?: string;
1516
};
1617
}
1718
}
1819

20+
// VITE_DISABLE_BRANDING strips the Firefox logo (the hero image and the
21+
// favicon, which use the same artwork).
22+
if (import.meta.env.VITE_DISABLE_BRANDING) {
23+
document.querySelector(".project-logo")?.remove();
24+
document.getElementById("favicon")?.remove();
25+
}
26+
1927
const canvas = document.getElementById("screen") as HTMLCanvasElement;
2028
const splash = document.getElementById("splash") as HTMLElement;
2129
const splashShell = document.getElementById("splash-shell") as HTMLElement;
@@ -116,8 +124,12 @@ const BROWSER_CHROME_URL = "chrome://browser/content/browser.xhtml";
116124

117125
// The Vite dev/preview server runs a WISP proxy at /wisp/ on this same origin
118126
// (see vite.config.ts). Default the engine's WISP endpoint to it so the chrome
119-
// front-end can load sites in tabs out of the box.
120-
let defaultWisp = `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/wisp/`;
127+
// front-end can load sites in tabs out of the box. Resolved RELATIVE to the
128+
// page URL (the build uses vite base './' so a deploy can live in any
129+
// subdirectory, with its wisp proxy next to it).
130+
const wispUrl = new URL("wisp/", location.href);
131+
wispUrl.protocol = location.protocol === "https:" ? "wss:" : "ws:";
132+
let defaultWisp = wispUrl.href;
121133
const puterBranding = Boolean(import.meta.env.VITE_PUTER_BRANDING);
122134

123135
if (puterBranding) {
@@ -266,8 +278,14 @@ async function start(): Promise<void> {
266278
// Fill the viewport; a debounced window-resize listener keeps it in sync (below).
267279
width: window.innerWidth,
268280
height: window.innerHeight,
269-
// __GECKO_WASM__ (injected by vite.config) is { url, compressed } for the served wasm.
270-
wasm: __GECKO_WASM__,
281+
// __GECKO_WASM__ (injected by vite.config) is { url, compressed } for the
282+
// served wasm. The url is page-relative (vite base './'); absolutize it here
283+
// since the engine's fetch may run where relative URLs don't resolve
284+
// against the page (e.g. a worker).
285+
wasm: {
286+
url: new URL(__GECKO_WASM__.url, location.href).href,
287+
compressed: __GECKO_WASM__.compressed,
288+
},
271289
env: optEnv,
272290
// GRE: an FsProvider over the in-memory decompressed tar (consulted
273291
// provider-first for /gre, baked gecko.data as fallback). Profile:

0 commit comments

Comments
 (0)