From b21fa15400d28ac4fe9c80b81bb7d5a08a7f96d1 Mon Sep 17 00:00:00 2001
From: Gregg Tavares <github@greggman.com>
Date: Wed, 31 Jan 2024 10:22:22 -0800
Subject: [PATCH] colorize missing stuff

---
 index.html |  3 +++
 index.js   | 17 +++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index e4e09c1..f84bcbb 100644
--- a/index.html
+++ b/index.html
@@ -138,6 +138,9 @@
 .unknown {
   color: var(--unknown-text-color);
 }
+.not-supported {
+  color: var(--error-text-color);
+}
 
 .limit>td:first-child,
 .feature>td:first-child,
diff --git a/index.js b/index.js
index e591e66..73a4b66 100644
--- a/index.js
+++ b/index.js
@@ -432,7 +432,7 @@ async function checkWorkers(workerType) {
 
   const obj = {};
   const addSupportsRow = (feature, supported, success = 'successful', fail = 'failed') => {
-    obj[feature] = supported ? success : fail;
+    obj[feature] = supported ? success : [fail, {className: 'not-supported'}];
   };
 
   const worker = new WorkerHelper('worker.js', workerType);
@@ -574,11 +574,16 @@ async function main() {
 
   const actualAdaptersIds = [...adapterIds].filter(([, {elem}]) => !!elem);
   if (actualAdaptersIds.length === 0) {
-    if (adapterIds.size > 0) {
-      addElemToDocument(el('div', {textContent: `webgpu appears to be disabled`}));
-    } else {
-      addElemToDocument(el('div', {textContent: `webgpu appears to not be supported`}));
-    }
+    addElemToDocument(
+      el(
+        'div', 
+        {
+          className: 'not-supported',
+          textContent: adapterIds.size > 0
+            ? `webgpu appears to be disabled`
+            : `webgpu appears to not be supported`,
+          },
+      ));
   }
   window.a = adapterIds;
   addElemToDocument(el('div', {className: 'adapters'},