From 25abacfc53104ff5182399681714ada19b8f85dd Mon Sep 17 00:00:00 2001
From: Gregg Tavares <github@greggman.com>
Date: Fri, 2 Feb 2024 11:00:00 -0800
Subject: [PATCH] Fit more on screen

---
 index.html | 29 ++++++++++++++++++++++-------
 index.js   | 54 +++++++++++++++++++++++++++++++++---------------------
 2 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index bbc92f4..167629e 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,8 @@
   --text-color: #006;
   --error-text-color: red;
 
-  --adapter-background-color: #CCC;
+  --section-header-background-color: #CCC;
+  --section-background-color: #DDD;
   --table-background-color: #EEE;
   --even-row-color: rgba(0, 0, 0, 0.05);
   --hover-color: rgba(0, 0, 0, 0.2);
@@ -52,7 +53,8 @@
     --text-color: #0F0;
     --error-text-color: #F66;
 
-    --adapter-background-color: #444;
+    --section-header-background-color: #444;
+    --section-background-color: #333;
     --table-background-color: #222;
     --even-row-color: rgba(255, 255, 255, 0.05);
     --hover-color: rgba(255, 255, 255, 0.2);
@@ -90,7 +92,7 @@
   justify-content: flex-start;
 }
 h2 {
- margin: 0.5em 0 0.5em 0;
+ margin: 0;
 }
 h2, td {
   padding: 0 10px 0 10px;
@@ -98,6 +100,9 @@
 .logo {
   height: 1.5em;
 }
+table.misc {
+  min-width: 100%;
+}
 .misc td:nth-child(2) {
   white-space: pre;
 }
@@ -108,15 +113,22 @@
 #content {
   margin: 0 auto;
 }
-.adapters {
+.adapters,
+.others {
   display: inline-flex;
   flex-wrap: wrap;
 }
-.adapter {
-  background: var(--adapter-background-color);
+.adapter,
+.other {
+  background: var(--section-background-color);
   margin-right: 10px;
   margin-bottom: 10px;
 }
+.adapter h2,
+.other h2 {
+  padding: 0.5em 10px 0.5em 10px;
+  background: var(--section-header-background-color);
+}
 .name>td,
 .section>td {
   font-size: larger;
@@ -178,11 +190,14 @@
     text-align: right;
   }
   .adapters,
+  .others,
   .adapter,
+  .other,
   table {
     width: 100%;
   }
-  .adapter {
+  .adapter,
+  .other {
     margin-right: 0;
   }
   tr {
diff --git a/index.js b/index.js
index 2d3e10b..a10f93e 100644
--- a/index.js
+++ b/index.js
@@ -416,17 +416,18 @@ class WorkerHelper {
   }
 }
 
-async function checkMisc({haveFallback}) {
-  addElemToDocument(createHeading('h2', '-', 'WGSL language features:'));
-
-  addElemToDocument(el('table', { className: 'misc' }, [
-    el('tbody', {}, [
-      ...setLikeToTableRows(navigator.gpu.wgslLanguageFeatures || []),
+function checkWGSLLanguageFeatures(parent) {
+  parent.appendChild(el('div', {className: 'other'}, [
+    (createHeading('h2', '-', 'WGSL language features:')),
+    el('table', { className: 'misc' }, [
+      el('tbody', {}, [
+        ...setLikeToTableRows(navigator.gpu.wgslLanguageFeatures || []),
+      ]),
     ]),
   ]));
+}
 
-  addElemToDocument(createHeading('h2', '-', 'misc:'));
-
+function checkMisc(parent, {haveFallback}) {
   const obj = {};
   const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
   obj.getPreferredCanvasFormat = presentationFormat;
@@ -434,14 +435,15 @@ async function checkMisc({haveFallback}) {
     obj['fallback adapter'] = 'not supported';
   }
 
-  addElemToDocument(el('table', { className: 'misc' }, [
-    el('tbody', {}, mapLikeToTableRows(obj)),
+  parent.appendChild(el('div', {className: 'other'}, [
+    (createHeading('h2', '-', 'misc:')),
+    el('table', { className: 'misc' }, [
+        el('tbody', {}, mapLikeToTableRows(obj)),
+    ]),
   ]));
 }
 
-async function checkWorkers(workerType) {
-  addElemToDocument(createHeading('h2', '=', `${workerType} workers:`));
-
+async function getWorkerInfo(workerType) {
   const canvas = document.createElement('canvas');
   const offscreen = !!canvas.transferControlToOffscreen
   let offscreenCanvas = offscreen && canvas.transferControlToOffscreen();
@@ -456,10 +458,9 @@ async function checkWorkers(workerType) {
     worker = new WorkerHelper('worker.js', workerType);
     await worker.ready();
   } catch(error) {
-    addElemToDocument(el('table', { className: 'worker' }, [
+    return el('table', { className: 'worker' }, [
       el('tbody', {}, setLikeToTableRows(undefined)),
-    ]));
-    return;
+    ]);
   }
   const {rAF, gpu, adapter, device, compat, context, offscreen: offscreenSupported, twoD } = await worker.getMessage('checkWebGPU', {canvas: offscreenCanvas}, [offscreenCanvas]);
   addSupportsRow('webgpu API', gpu, 'exists', 'n/a');
@@ -480,8 +481,15 @@ async function checkWorkers(workerType) {
   addSupportsRow('OffscreenCanvas', offscreenSupported);
   addSupportsRow('CanvasRenderingContext2D', twoD);
 
-  addElemToDocument(el('table', { className: 'worker' }, [
+  return el('table', { className: 'worker' }, [
     el('tbody', {}, mapLikeToTableRows(obj, false)),
+  ]);
+}
+
+async function checkWorker(parent, workerType) {
+  parent.appendChild(el('div', {className: 'other'}, [
+    createHeading('h2', '=', `${workerType} workers:`),
+    await getWorkerInfo(workerType),
   ]));
 }
 
@@ -616,10 +624,14 @@ async function main() {
       createHeading('h2', '=', `${adapterIds.size > 1 ? `#${ndx + 1} ` : ''}${(adapterIds.size > 1) ? `${desc}` : ''}`),
       elem,
     ]))));
-  await checkMisc({haveFallback});
-  await checkWorkers('dedicated');
-  await checkWorkers('shared');
-  await checkWorkers('service');
+
+  const others = el('div', {className: 'others'})
+  addElemToDocument(others);
+  checkWGSLLanguageFeatures(others);
+  checkMisc(others, {haveFallback});
+  await checkWorker(others, 'dedicated');
+  await checkWorker(others, 'shared');
+  await checkWorker(others, 'service');
 
   // Add a copy handler to massage the text for plain text.
   document.addEventListener('copy', (event) => {