Add some progress

This is a first attempt at providing some progress, at least something
that shows that things are running. Often I click play and I can't
tell.

Author: greggman

src/common/runtime/standalone.ts

@@ -32,6 +32,15 @@ const worker = optionEnabled('worker') ? new TestWorker(debug) : undefined;
 
 const autoCloseOnPass = document.getElementById('autoCloseOnPass') as HTMLInputElement;
 const resultsVis = document.getElementById('resultsVis')!;
+const progressElem = document.getElementById('progress')!;
+const progressTestNameElem = progressElem.querySelector('.progress-test-name')!;
+const stopButtonElem = progressElem.querySelector('button')!;
+let runDepth = 0;
+let stopRequested = false;
+
+stopButtonElem.addEventListener('click', () => {
+  stopRequested = true;
+});
 
 dataCache.setStore({
   load: async (path: string) => {
@@ -119,6 +128,7 @@ function makeCaseHTML(t: TestTreeLeaf): VisualizedSubtree {
     if (clearRenderedResult) clearRenderedResult();
 
     const result: SubtreeResult = emptySubtreeResult();
+    progressTestNameElem.textContent = name;
 
     haveSomeResults = true;
     const [rec, res] = logger.record(name);
@@ -212,9 +222,28 @@ function makeSubtreeHTML(n: TestSubtree, parentLevel: TestQueryLevel): Visualize
   );
 
   const runMySubtree = async () => {
+    if (runDepth === 0) {
+      stopRequested = false;
+      progressElem.style.display = '';
+    }
+    if (stopRequested) {
+      const result = emptySubtreeResult();
+      result.skip = 1;
+      result.total = 1;
+      return result;
+    }
+
+    ++runDepth;
+
     if (clearRenderedResult) clearRenderedResult();
     subtreeResult = await runSubtree();
     if (updateRenderedResult) updateRenderedResult();
+
+    --runDepth;
+    if (runDepth === 0) {
+      progressElem.style.display = 'none';
+    }
+
     return subtreeResult;
   };
 

standalone/index.html

@@ -102,6 +102,24 @@
       #info {
         font-family: monospace;
       }
+      #progress {
+        position: fixed;
+        display: flex;
+        width: 100%;
+        left: 0;
+        top: 0;
+        background-color: #000;
+        color: #fff;
+        align-items: center;
+      }
+      #progress .progress-test-name {
+        flex: 1 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        direction: rtl;
+        white-space: nowrap;
+      }
       #resultsJSON {
         font-family: monospace;
         width: 100%;
@@ -356,6 +374,7 @@ <h1><img class="logo" src="webgpu-logo-notext.svg">WebGPU Conformance Test Suite
 
     <div id="info"></div>
     <div id="resultsVis"></div>
+    <div id="progress" style="display: none;"><button type="button">stop</button><div class="progress-test-name"></div></div>
 
     <p>
       <input type="button" id="copyResultsJSON" value="Copy results as JSON">