Skip to content

Commit cd58c10

Browse files
Simon-LauxWofWca
Simon-Laux
authored and
WofWca
committed
make tabs
1 parent 634cc68 commit cd58c10

File tree

3 files changed

+197
-121
lines changed

3 files changed

+197
-121
lines changed

‎index.html‎

Lines changed: 151 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -24,127 +24,159 @@
2424
<script src="js/utils.js"></script>
2525
</head>
2626
<body>
27-
<div class="card" id="realtime-output"></div>
28-
<script src="js/realtime.js"></script>
29-
30-
<div class="card" id="cookies-output"></div>
31-
<script src="js/cookies.js"></script>
32-
33-
<div class="card" id="storage-output"></div>
34-
<script src="js/storage.js"></script>
35-
36-
<div class="card" id="uploads-output"></div>
37-
<script src="js/uploads.js"></script>
38-
39-
<div class="card" id="import-export-output"></div>
40-
<script src="js/import-export.js"></script>
41-
42-
<div class="card" id="unload-output"></div>
43-
<script src="js/unload.js"></script>
44-
45-
<div class="card" id="navigator-output"></div>
46-
<script src="js/navigator.js"></script>
47-
48-
<div class="card" id="update-api-output"></div>
49-
<script src="js/update-api.js"></script>
50-
51-
<div class="card" id="races-output"></div>
52-
<script src="js/races.js"></script>
53-
54-
<div class="card" id="wasm-output"></div>
55-
<script src="js/wasm.js"></script>
56-
57-
<div class="card" id="camera-access"></div>
58-
<script src="js/media-access.js"></script>
59-
60-
<iframe id="iframe-regular" style="display: none"></iframe>
61-
<iframe
62-
id="iframe-allow-same-origin"
63-
sandbox="allow-same-origin"
64-
style="display: none"
65-
></iframe>
66-
<div class="card" id="webrtc-output"></div>
67-
<script src="js/webrtc.js"></script>
68-
<iframe
69-
src="./iframe-webrtc-test.html"
70-
sandbox="allow-scripts"
71-
width="100%"
72-
height="200"
73-
></iframe>
74-
75-
<!-- DNS prefetch check, originally developed by Cure53
76-
and distributed as "Cure53 Test App - DNS checker" app.
77-
See https://delta.chat/en/2023-05-22-webxdc-security#dns-prefetching-marks-another-exploit. -->
78-
<div class="dns-prefetch-output">
79-
<header class="container">
80-
<h2>DNS Prefetch</h2>
81-
</header>
82-
<div class="container">
83-
<section>
84-
<p>Usage instructions:</p>
85-
<ol>
86-
<li>
87-
Navigate to
88-
<a href="https://dig.pm/">https://dig.pm/</a>
89-
and click Get Sub Domain.
90-
</li>
91-
<li>Input the subdomain from Step 1.</li>
92-
<li>Click all 3 of the buttons.</li>
93-
<li>Click Get Results on https://dig.pm/.</li>
94-
<li>Observe the DNS lookup record.</li>
95-
</ol>
96-
<p>
97-
Also see
98-
<a
99-
href="https://public.opentech.fund/documents/XDC-01-report_2_1.pdf"
100-
>the audit</a
101-
>
102-
and
103-
<a href="https://delta.chat/en/2023-05-22-webxdc-security"
104-
>the blog post</a
105-
>.
106-
</p>
107-
</section>
108-
<p>
109-
You can also utilize Wireshark, then https://dig.pm/ is not needed.
110-
</p>
111-
<input
112-
id="dns-prefetch-domain-input"
113-
type="text"
114-
placeholder="abc.example.com"
115-
required
116-
/>
117-
<br />
118-
<button type="button" onclick="dnsPrefetchUpdateLocation()">
119-
Update top.location
120-
</button>
121-
<br />
122-
<button type="button" onclick="dnsPrefetchAddIframe()">
123-
Add iframe
124-
</button>
125-
<br />
126-
<button type="button" onclick="dnsPrefetchAddPrefetch()">
127-
Add &lt;link dns-prefetch&gt;
128-
</button>
129-
<br />
130-
<iframe id="dns-prefetch-frame"></iframe>
27+
<div class="pages">
28+
<div class="page active" id="page-webxdc">
29+
<div class="card" id="realtime-output"></div>
30+
<script src="js/realtime.js"></script>
31+
<div class="card" id="uploads-output"></div>
32+
<script src="js/uploads.js"></script>
33+
<div class="card" id="import-export-output"></div>
34+
<script src="js/import-export.js"></script>
35+
<div class="card" id="update-api-output"></div>
36+
<script src="js/update-api.js"></script>
37+
38+
<div class="card">
39+
<header class="container"><h2>Webxdc Status Update Tests</h2></header>
40+
<div class="container">
41+
<a href="./duplicated_updates_race.html">
42+
Duplicated Status Updates Race Test
43+
</a>
44+
</div>
45+
</div>
46+
47+
<div class="card" id="links-output"></div>
48+
<script src="js/links.js"></script>
49+
50+
<div class="card" id="info-output"></div>
51+
<script src="js/info.js"></script>
13152
</div>
132-
</div>
133-
<script src="js/dns-prefetch.js"></script>
134-
135-
<div class="card">
136-
<header class="container"><h2>Webxdc Status Update Tests</h2></header>
137-
<div class="container">
138-
<a href="./duplicated_updates_race.html">
139-
Duplicated Status Updates Race Test
140-
</a>
53+
<div class="page" id="page-web-api">
54+
<div class="card" id="storage-output"></div>
55+
<script src="js/storage.js"></script>
56+
<div class="card" id="unload-output"></div>
57+
<script src="js/unload.js"></script>
58+
<div class="card" id="navigator-output"></div>
59+
<script src="js/navigator.js"></script>
60+
61+
<div class="card" id="races-output"></div>
62+
<script src="js/races.js"></script>
63+
64+
<div class="card" id="wasm-output"></div>
65+
<script src="js/wasm.js"></script>
66+
</div>
67+
<div class="page" id="page-sandbox">
68+
<div class="card" id="cookies-output"></div>
69+
<script src="js/cookies.js"></script>
70+
<div class="card" id="camera-access"></div>
71+
<script src="js/media-access.js"></script>
72+
73+
<iframe id="iframe-regular" style="display: none"></iframe>
74+
<iframe
75+
id="iframe-allow-same-origin"
76+
sandbox="allow-same-origin"
77+
style="display: none"
78+
></iframe>
79+
<div class="card" id="webrtc-output"></div>
80+
<script src="js/webrtc.js"></script>
81+
<iframe
82+
src="./iframe-webrtc-test.html"
83+
sandbox="allow-scripts"
84+
width="100%"
85+
height="200"
86+
></iframe>
87+
88+
<!-- DNS prefetch check, originally developed by Cure53
89+
and distributed as "Cure53 Test App - DNS checker" app.
90+
See https://delta.chat/en/2023-05-22-webxdc-security#dns-prefetching-marks-another-exploit. -->
91+
<div class="dns-prefetch-output">
92+
<header class="container">
93+
<h2>DNS Prefetch</h2>
94+
</header>
95+
<div class="container">
96+
<section>
97+
<p>Usage instructions:</p>
98+
<ol>
99+
<li>
100+
Navigate to
101+
<a href="https://dig.pm/">https://dig.pm/</a>
102+
and click Get Sub Domain.
103+
</li>
104+
<li>Input the subdomain from Step 1.</li>
105+
<li>Click all 3 of the buttons.</li>
106+
<li>Click Get Results on https://dig.pm/.</li>
107+
<li>Observe the DNS lookup record.</li>
108+
</ol>
109+
<p>
110+
Also see
111+
<a
112+
href="https://public.opentech.fund/documents/XDC-01-report_2_1.pdf"
113+
>the audit</a
114+
>
115+
and
116+
<a href="https://delta.chat/en/2023-05-22-webxdc-security"
117+
>the blog post</a
118+
>.
119+
</p>
120+
</section>
121+
<p>
122+
You can also utilize Wireshark, then https://dig.pm/ is not
123+
needed.
124+
</p>
125+
<input
126+
id="dns-prefetch-domain-input"
127+
type="text"
128+
placeholder="abc.example.com"
129+
required
130+
/>
131+
<br />
132+
<button type="button" onclick="dnsPrefetchUpdateLocation()">
133+
Update top.location
134+
</button>
135+
<br />
136+
<button type="button" onclick="dnsPrefetchAddIframe()">
137+
Add iframe
138+
</button>
139+
<br />
140+
<button type="button" onclick="dnsPrefetchAddPrefetch()">
141+
Add &lt;link dns-prefetch&gt;
142+
</button>
143+
<br />
144+
<iframe id="dns-prefetch-frame"></iframe>
145+
</div>
146+
</div>
147+
<script src="js/dns-prefetch.js"></script>
141148
</div>
142149
</div>
143-
144-
<div class="card" id="links-output"></div>
145-
<script src="js/links.js"></script>
146-
147-
<div class="card" id="info-output"></div>
148-
<script src="js/info.js"></script>
150+
<div class="tabs">
151+
<div class="tab active" id="tab-webxdc">Webxdc</div>
152+
<div class="tab" id="tab-web-api">Web API</div>
153+
<div class="tab" id="tab-sandbox">Sandboxing</div>
154+
</div>
155+
<script>
156+
var tabs = [
157+
{
158+
page: document.getElementById("page-webxdc"),
159+
tab: document.getElementById("tab-webxdc"),
160+
},
161+
{
162+
page: document.getElementById("page-web-api"),
163+
tab: document.getElementById("tab-web-api"),
164+
},
165+
{
166+
page: document.getElementById("page-sandbox"),
167+
tab: document.getElementById("tab-sandbox"),
168+
},
169+
];
170+
for (const {page, tab} of tabs) {
171+
tab.onclick = () => {
172+
tabs.forEach(({page, tab}) => {
173+
page.classList.remove("active")
174+
tab.classList.remove("active")
175+
});
176+
page.classList.add("active")
177+
tab.classList.add("active")
178+
}
179+
}
180+
</script>
149181
</body>
150182
</html>

‎js/info.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ window.addEventListener("load", () => {
22
let container = h("div", {class: "container"});
33

44
// background is set to spot leading/trailing spaces errors
5-
container.append(h("div", {}, "webxdc.selfName: ", h("span", {style: "background:#DDD;"}, webxdc.selfName)))
6-
container.append(h("div", {}, "webxdc.selfAddr: ", h("span", {style: "background:#DDD;"}, webxdc.selfAddr)))
5+
container.append(h("div", {}, "webxdc.selfName: ", h("span", {style: "background:#DDD;word-wrap: break-word;"}, webxdc.selfName)))
6+
container.append(h("div", {}, "webxdc.selfAddr: ", h("span", {style: "background:#DDD;word-wrap: break-word;"}, webxdc.selfAddr)))
77

88
container.append(h("div", {}, "webxdc.sendUpdateInterval: " + webxdc.sendUpdateInterval))
99
container.append(h("div", {}, "webxdc.sendUpdateMaxSize: " + webxdc.sendUpdateMaxSize))

‎styles.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,48 @@ button {
4545
border-radius: 100%;
4646
display: inline-block;
4747
margin-right: 4px;
48+
}
49+
50+
html, body {
51+
margin: 0;
52+
padding: 0;
53+
}
54+
55+
body {
56+
display: flex;
57+
flex-direction: column;
58+
height: 100vh;
59+
}
60+
61+
.pages {
62+
overflow-y: scroll;
63+
flex-grow: 1;
64+
}
65+
66+
.page {
67+
margin: 10px;
68+
display: none;
69+
}
70+
71+
.page.active {
72+
display: block;
73+
}
74+
75+
.tabs {
76+
display: flex;
77+
background-color: white;
78+
border-top: 1px solid gainsboro;
79+
align-items: center;
80+
}
81+
82+
.tab {
83+
flex-grow: 1;
84+
height: 36px;
85+
font-size: 1.3em;
86+
text-align: center;
87+
align-content: center;
88+
}
89+
90+
.tab.active {
91+
background-color: lightgrey;
4892
}

0 commit comments

Comments
 (0)