split link card into multiple cards for the different tabs

Author: Simon-Laux

index.html

@@ -44,8 +44,8 @@
           </div>
         </div>
 
-        <div class="card" id="links-output"></div>
-        <script src="js/links.js"></script>
+        <div class="card" id="webxdc-notify-output"></div>
+        <script src="js/webxdc-notify.js"></script>
 
         <div class="card" id="info-output"></div>
         <script src="js/info.js"></script>
@@ -63,6 +63,9 @@
 
         <div class="card" id="wasm-output"></div>
         <script src="js/wasm.js"></script>
+
+        <div class="card" id="links-output"></div>
+        <script src="js/links.js"></script>
       </div>
       <div class="page" id="page-sandbox">
         <div class="card" id="cookies-output"></div>
@@ -77,18 +80,26 @@
           style="display: none"
         ></iframe>
         <div class="card" id="webrtc-output"></div>
-        <script src="js/webrtc.js"></script>
-        <iframe
-          src="./iframe-webrtc-test.html"
-          sandbox="allow-scripts"
-          width="100%"
-          height="200"
-        ></iframe>
+        <div class="card">
+          <header class="container">
+            <h2>webrtc-sidechannel iframe</h2>
+          </header>
+          <script src="js/webrtc.js"></script>
+          <iframe
+            src="./iframe-webrtc-test.html"
+            sandbox="allow-scripts"
+            width="100%"
+            height="200"
+          ></iframe>
+        </div>
+
+        <div class="card" id="iframe-output"></div>
+        <script src="js/iframe.js"></script>
 
         <!-- DNS prefetch check, originally developed by Cure53
             and distributed as "Cure53 Test App - DNS checker" app.
             See https://delta.chat/en/2023-05-22-webxdc-security#dns-prefetching-marks-another-exploit. -->
-        <div class="dns-prefetch-output">
+        <div class="card dns-prefetch-output">
           <header class="container">
             <h2>DNS Prefetch</h2>
           </header>
@@ -167,15 +178,15 @@ <h2>DNS Prefetch</h2>
           tab: document.getElementById("tab-sandbox"),
         },
       ];
-      for (const {page, tab} of tabs) {
+      for (const { page, tab } of tabs) {
         tab.onclick = () => {
-            tabs.forEach(({page, tab}) => {
-                page.classList.remove("active")
-                tab.classList.remove("active")
-            });
-            page.classList.add("active")
-            tab.classList.add("active")
-        }
+          tabs.forEach(({ page, tab }) => {
+            page.classList.remove("active");
+            tab.classList.remove("active");
+          });
+          page.classList.add("active");
+          tab.classList.add("active");
+        };
       }
     </script>
   </body>

js/iframe.js

@@ -0,0 +1,17 @@
+window.addEventListener("load", () => {
+  const ifrmExplain = h(
+    "p",
+    {},
+    "iframe: should be blocked and not load https://delta.chat from Internet:"
+  );
+  const ifrm = h("iframe", { src: "https://delta.chat" });
+  ifrm.style.width = "100%";
+  ifrm.style.height = "auto";
+
+  document
+    .getElementById("iframe-output")
+    .append(
+      createHeader("Loading website in iframe"),
+      h("div", { class: "container" }, ifrmExplain, ifrm)
+    );
+});

js/links.js

@@ -9,30 +9,7 @@ window.addEventListener("load", () => {
         h("li", {}, h("a", {href: "chrome://crash"}, "chrome://crash")),
     );
 
-    let btn1 = h("button", {}, "info with deep-link to internal page, no notify");
-    btn1.onclick = () => {
-        window.webxdc.sendUpdate({ payload: "", info: "open page.html", href: "page.html" }, "");
-    };
-    ul.append(h("li", {}, btn1));
-
-    let btn2 = h("button", {}, "info and notify all with deep-link to internal page");
-    btn2.onclick = () => {
-        window.webxdc.sendUpdate({ payload: "", info: "open page.html", href: "page.html", notify: {"*": "notify page.html"} }, "");
-    };
-    ul.append(h("li", {}, btn2));
-
-    let btn3 = h("button", {}, "info and notify all with deep-link to #links-output section");
-    btn3.onclick = () => {
-        window.webxdc.sendUpdate({ payload: "", info: "open #links-output", href: "index.html#links-output", notify: {"*": "notify #links-output"} }, "");
-    };
-    ul.append(h("li", {}, btn3));
-
-    const ifrmExplain = h("p", {}, "iframe: should be blocked and not load https://delta.chat from Internet:");
-    const ifrm = h("iframe", {src: "https://delta.chat"});
-    ifrm.style.width = "100%";
-    ifrm.style.height = "auto";
-
     document.getElementById("links-output").append(
-        createHeader("Links"), h("div", {class: "container"}, ul, ifrmExplain, ifrm)
+        createHeader("Links"), h("div", {class: "container"}, ul)
     );
 });

js/webxdc-notify.js

@@ -0,0 +1,25 @@
+window.addEventListener("load", () => {
+    let ul = h("ul");
+
+    let btn1 = h("button", {}, "info with deep-link to internal page, no notify");
+    btn1.onclick = () => {
+        window.webxdc.sendUpdate({ payload: "", info: "open page.html", href: "page.html" }, "");
+    };
+    ul.append(h("li", {}, btn1));
+
+    let btn2 = h("button", {}, "info and notify all with deep-link to internal page");
+    btn2.onclick = () => {
+        window.webxdc.sendUpdate({ payload: "", info: "open page.html", href: "page.html", notify: {"*": "notify page.html"} }, "");
+    };
+    ul.append(h("li", {}, btn2));
+
+    let btn3 = h("button", {}, "info and notify all with deep-link to #links-output section");
+    btn3.onclick = () => {
+        window.webxdc.sendUpdate({ payload: "", info: "open #links-output", href: "index.html#links-output", notify: {"*": "notify #links-output"} }, "");
+    };
+    ul.append(h("li", {}, btn3));
+
+    document.getElementById("webxdc-notify-output").append(
+        createHeader("Webxdc Notify"), h("div", {class: "container"}, ul)
+    );
+});