Skip to content

Commit 2e5e7f7

Browse files
velzievelzie
committed
[chrome] move error page to discrete template and automatically update the theme when it's changed
1 parent c5c9c64 commit 2e5e7f7

File tree

7 files changed

+262
-175
lines changed

7 files changed

+262
-175
lines changed

‎packages/chrome/src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Tab } from "./Tab";
66
import { BookmarksStrip } from "./components/BookmarksStrip";
77
import { Omnibar } from "./components/Omnibar/Omnibar";
88
import { getTheme } from "./themes";
9+
import { contexts } from "./proxy/scramjet";
910

1011
export function App(props: {}, cx: ComponentContext) {
1112
const applyTheme = () => {
@@ -30,6 +31,10 @@ export function App(props: {}, cx: ComponentContext) {
3031
for (const [key, value] of Object.entries(theme.tokens)) {
3132
document.body.style.setProperty(`--${key}`, value);
3233
}
34+
35+
for (const context of contexts) {
36+
context.rpc.call("updateTheme", theme);
37+
}
3338
};
3439

3540
applyTheme();

‎packages/chrome/src/proxy/scramjet.ts‎

Lines changed: 5 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ export function renderErrorPage(controller: Controller, error: Error): string {
192192
<script src="${controller.prefix.href}${virtualWasmPath}"></script>
193193
<script src="${controller.prefix.href}${virtualInjectPath}"></script>
194194
<script>
195-
$injectLoad({
195+
$injectLoadError({
196196
id: "${contextId}",
197197
sequence: ${JSON.stringify(findSequence(top!, self)!)},
198198
config: ${JSON.stringify(makeConfig())},
@@ -201,179 +201,13 @@ export function renderErrorPage(controller: Controller, error: Error): string {
201201
codecEncode: ${codecEncode.toString()},
202202
codecDecode: ${codecDecode.toString()},
203203
prefix: "${controller.prefix.href}",
204+
}, {
205+
message: ${JSON.stringify(error.message)},
206+
stack: ${JSON.stringify(error.stack)},
207+
theme: ${JSON.stringify(theme)},
204208
});
205209
document.currentScript.remove();
206210
</script>
207-
<style>
208-
:root {
209-
--font: "Inter", system-ui, sans-serif;
210-
--bg: ${theme.tokens.ntp_background};
211-
--text: ${theme.tokens.ntp_text};
212-
--muted: color-mix(in srgb, ${theme.tokens.ntp_text} 55%, transparent);
213-
--accent: ${theme.tokens.tab_line};
214-
--button-bg: ${theme.tokens.tab_line};
215-
--button-text: ${theme.tokens.ntp_background};
216-
}
217-
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden;}
218-
.wrapper{
219-
height:100%;
220-
display:flex;
221-
align-items:flex-start;
222-
justify-content:center;
223-
padding:120px 20px 20px 20px;
224-
overflow:auto;
225-
}
226-
227-
.errpage{
228-
max-width:920px;
229-
width:100%;
230-
display:flex;
231-
flex-direction:row;
232-
gap:28px;
233-
align-items:flex-start;
234-
}
235-
236-
.err-graphic{
237-
flex:0 0 120px;
238-
display:flex;
239-
align-items:center;
240-
justify-content:center;
241-
}
242-
.err-graphic .face{
243-
width:96px;
244-
height:96px;
245-
border-radius:12px;
246-
display:flex;
247-
align-items:center;
248-
justify-content:center;
249-
background:transparent;
250-
border:4px solid var(--muted);
251-
color:var(--muted);
252-
font-size:44px;
253-
line-height:1;
254-
}
255-
256-
.err-main{
257-
flex:1 1 auto;
258-
}
259-
.err-title{
260-
font-size:28px;
261-
font-weight:600;
262-
margin:0 0 8px 0;
263-
color:var(--text);
264-
}
265-
.err-sub{
266-
margin:0 0 18px 0;
267-
color:var(--muted);
268-
font-size:14px;
269-
}
270-
271-
.controls{
272-
display:flex;
273-
gap:12px;
274-
align-items:center;
275-
flex-wrap:wrap;
276-
margin-bottom:14px;
277-
}
278-
.btn{
279-
padding:10px 16px;
280-
border-radius:8px;
281-
font-weight:600;
282-
border:none;
283-
cursor:pointer;
284-
font-size:14px;
285-
}
286-
.btn-primary{
287-
background:var(--button-bg);
288-
color:var(--button-text);
289-
box-shadow:0 2px 0 rgba(0,0,0,0.06);
290-
}
291-
.btn-link{
292-
background:transparent;
293-
color:var(--muted);
294-
border:1px solid transparent;
295-
}
296-
.details{
297-
margin-top:8px;
298-
background:transparent;
299-
border:1px dashed color-mix(in srgb, var(--muted) 22%, transparent);
300-
padding:10px;
301-
border-radius:6px;
302-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
303-
font-size:12px;
304-
color:var(--muted);
305-
max-height:260px;
306-
overflow:auto;
307-
white-space:pre-wrap;
308-
}
309-
310-
.suggestions{
311-
margin-top:12px;
312-
color:var(--muted);
313-
font-size:13px;
314-
}
315-
316-
@media (max-width:720px){
317-
.errpage{flex-direction:column;align-items:center;text-align:center;}
318-
.err-graphic{order:0;}
319-
.err-main{order:1;width:100%;}
320-
}
321-
</style>
322-
323-
<body>
324-
<div class="wrapper" role="main" aria-labelledby="errTitle">
325-
<div class="errpage" role="alert" aria-live="polite">
326-
<div class="err-graphic" aria-hidden="true">
327-
<div class="face">:(</div>
328-
</div>
329-
330-
<div class="err-main">
331-
<h1 id="errTitle" class="err-title">This page can&#39;t be loaded</h1>
332-
<p class="err-sub">The page at this address could not be loaded. This might be due to a network issue or the server being unreachable.</p>
333-
334-
<div class="controls">
335-
<button class="btn btn-primary" id="reloadBtn">Reload</button>
336-
<button class="btn btn-link" id="toggleBtn">Show details</button>
337-
<button class="btn btn-link" id="copyBtn">Copy details</button>
338-
</div>
339-
<pre id="details" class="details" style="display:none;">${escapeHtml((error.stack || error.message) as any)}</pre>
340-
341-
<p class="suggestions">Try checking your connection, or try again later. If you believe this is a problem with the browser, try disabling extensions.</p>
342-
</div>
343-
</div>
344-
</div>
345-
346-
<script>
347-
reloadBtn.addEventListener('click', ()=> location.reload());
348-
toggleBtn.addEventListener('click', function(){
349-
if(details.style.display === 'none'){
350-
details.style.display = 'block';
351-
toggleBtn.textContent = 'Hide details';
352-
} else {
353-
details.style.display = 'none';
354-
toggleBtn.textContent = 'Show details';
355-
}
356-
});
357-
358-
copyBtn.addEventListener('click', function(){
359-
const text = ${JSON.stringify((error.stack || error.message) as any)};
360-
const textarea = document.createElement('textarea');
361-
textarea.value = text;
362-
textarea.style.position = 'fixed';
363-
textarea.style.opacity = '0';
364-
document.body.appendChild(textarea);
365-
textarea.select();
366-
document.execCommand('copy');
367-
document.body.removeChild(textarea);
368-
369-
const originalText = copyBtn.textContent;
370-
copyBtn.textContent = 'Copied!';
371-
setTimeout(() => {
372-
copyBtn.textContent = originalText;
373-
}, 2000);
374-
});
375-
</script>
376-
</body>
377211
`;
378212
}
379213

‎packages/inject/src/errorpage.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
html,
2+
body {
3+
height: 100%;
4+
margin: 0;
5+
background: var(--bg);
6+
color: var(--text);
7+
font-family: var(--font);
8+
overflow: hidden;
9+
}
10+
.wrapper {
11+
height: 100%;
12+
display: flex;
13+
align-items: flex-start;
14+
justify-content: center;
15+
padding: 120px 20px 20px 20px;
16+
overflow: auto;
17+
}
18+
19+
.errpage {
20+
max-width: 920px;
21+
width: 100%;
22+
display: flex;
23+
flex-direction: row;
24+
gap: 28px;
25+
align-items: flex-start;
26+
}
27+
28+
.err-graphic {
29+
flex: 0 0 120px;
30+
display: flex;
31+
align-items: center;
32+
justify-content: center;
33+
}
34+
.err-graphic .face {
35+
width: 96px;
36+
height: 96px;
37+
border-radius: 12px;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
background: transparent;
42+
border: 4px solid var(--muted);
43+
color: var(--muted);
44+
font-size: 44px;
45+
line-height: 1;
46+
}
47+
48+
.err-main {
49+
flex: 1 1 auto;
50+
}
51+
.err-title {
52+
font-size: 28px;
53+
font-weight: 600;
54+
margin: 0 0 8px 0;
55+
color: var(--text);
56+
}
57+
.err-sub {
58+
margin: 0 0 18px 0;
59+
color: var(--muted);
60+
font-size: 14px;
61+
}
62+
63+
.controls {
64+
display: flex;
65+
gap: 12px;
66+
align-items: center;
67+
flex-wrap: wrap;
68+
margin-bottom: 14px;
69+
}
70+
.btn {
71+
padding: 10px 16px;
72+
border-radius: 8px;
73+
font-weight: 600;
74+
border: none;
75+
cursor: pointer;
76+
font-size: 14px;
77+
}
78+
.btn-primary {
79+
background: var(--button-bg);
80+
color: var(--button-text);
81+
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
82+
}
83+
.btn-link {
84+
background: transparent;
85+
color: var(--muted);
86+
border: 1px solid transparent;
87+
}
88+
.details {
89+
margin-top: 8px;
90+
background: transparent;
91+
border: 1px dashed color-mix(in srgb, var(--muted) 22%, transparent);
92+
padding: 10px;
93+
border-radius: 6px;
94+
font-family:
95+
ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
96+
font-size: 12px;
97+
color: var(--muted);
98+
max-height: 260px;
99+
overflow: auto;
100+
white-space: pre-wrap;
101+
}
102+
103+
.suggestions {
104+
margin-top: 12px;
105+
color: var(--muted);
106+
font-size: 13px;
107+
}
108+
109+
@media (max-width: 720px) {
110+
.errpage {
111+
flex-direction: column;
112+
align-items: center;
113+
text-align: center;
114+
}
115+
.err-graphic {
116+
order: 0;
117+
}
118+
.err-main {
119+
order: 1;
120+
width: 100%;
121+
}
122+
}

‎packages/inject/src/errorpage.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="wrapper" role="main" aria-labelledby="errTitle">
2+
<div class="errpage" role="alert" aria-live="polite">
3+
<div class="err-graphic" aria-hidden="true">
4+
<div class="face">:(</div>
5+
</div>
6+
7+
<div class="err-main">
8+
<h1 id="errTitle" class="err-title">This page can&#39;t be loaded</h1>
9+
<p class="err-sub">
10+
The page at this address could not be loaded. This might be due to a
11+
network issue or the server being unreachable.
12+
</p>
13+
14+
<div class="controls">
15+
<button class="btn btn-primary" id="reloadBtn">Reload</button>
16+
<button class="btn btn-link" id="toggleBtn">Show details</button>
17+
<button class="btn btn-link" id="copyBtn">Copy details</button>
18+
</div>
19+
<pre id="details" class="details" style="display: none"></pre>
20+
21+
<p class="suggestions">
22+
Try checking your connection, or try again later. If you believe this is
23+
a problem with the browser, try disabling extensions.
24+
</p>
25+
</div>
26+
</div>
27+
</div>

0 commit comments

Comments
 (0)