From 641ae5e43b3351b431cb0597e76ed61460061d83 Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Thu, 11 Dec 2025 11:37:07 +0100
Subject: [PATCH] pre-format

---
 JetStreamDriver.js      | 10 +++++--
 index.html              |  7 ++++-
 resources/JetStream.css | 59 +++++++++++++++++++++++++++--------------
 3 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/JetStreamDriver.js b/JetStreamDriver.js
index 80cd74ee..16098f12 100644
--- a/JetStreamDriver.js
+++ b/JetStreamDriver.js
@@ -1057,8 +1057,14 @@ class Benchmark {
     updateCounter() {
         const counter = JetStream.counter;
         ++counter.loadedResources;
-        const statusElement = document.getElementById("status");
-        statusElement.innerHTML = `Loading ${counter.loadedResources} of ${counter.totalResources} ...`;
+
+        const statusElement = document.getElementById("status-text");
+        statusElement.innerText = `Loading ${counter.loadedResources} of ${counter.totalResources} ...`;
+
+        const percent = (counter.loadedResources / counter.totalResources) * 100;
+        const progressBar = document.getElementById("status-progress-bar");
+        progressBar.style.width = `${percent}%`;
+
     }
 
     prefetchResourcesForBrowser() {
diff --git a/index.html b/index.html
index 4074f849..87f9f17a 100644
--- a/index.html
+++ b/index.html
@@ -118,7 +118,12 @@ <h2>Non-standard Parameters</h2>
     <p class="summary" id="mode-description"></p>
 
     <div id="result-summary"></div>
-    <div id="status" class="loading">Loading Benchmark...</div>
+    <div id="status" class="loading">
+        <div id="status-text">Loading Benchmark...</div>
+        <div id="status-progress-container">
+            <div id="status-progress-bar" style="width: 0%"></div>
+        </div>
+    </div>
 
     <div id="results"></div>
 </main>
diff --git a/resources/JetStream.css b/resources/JetStream.css
index 2ffba2de..20d00912 100644
--- a/resources/JetStream.css
+++ b/resources/JetStream.css
@@ -24,21 +24,21 @@
 */
 
 :root {
-    --color-primary: #34AADC;
-    --color-secondary: #86D9FF;
+    --color-primary: #34aadc;
+    --color-secondary: #86d9ff;
     --text-color-inverse: white;
     --text-color-primary: black;
     --text-color-secondary: #555555;
     --text-color-tertiary: #444444;
     --text-color-subtle: #6c6c71;
-    --text-color-very-subtle: #8E8E93;
-    --heading-color: #2C98D1;
-    --link-hover-color: #0086BF;
+    --text-color-very-subtle: #8e8e93;
+    --heading-color: #2c98d1;
+    --link-hover-color: #0086bf;
     --button-color-primary: rgb(52, 170, 220);
     --error-text-color: #d24a59;
     --benchmark-heading-color: rgb(183, 183, 183);
     --benchmark-error-text-color: #ff8686;
-    --benchmark-done-result-color: #4A4A4A;
+    --benchmark-done-result-color: #4a4a4a;
     --gap: 3rem;
     --width: 200px;
 }
@@ -63,7 +63,7 @@ body {
     background-position: center -5vw;
     background-size: 100vw;
     padding-bottom: 0px;
-    background-image: url('clouds.svg');
+    background-image: url("clouds.svg");
     overflow-y: hidden;
     height: 100%;
 }
@@ -86,7 +86,7 @@ body.nonDefaultParams {
 
     & h2 {
         text-align: center;
-    } 
+    }
 
     & p {
         text-align: center;
@@ -125,7 +125,6 @@ body.nonDefaultParams {
     color: var(--highlight);
 }
 
-
 .overflow-scroll {
     overflow-y: auto;
 }
@@ -134,7 +133,6 @@ body.nonDefaultParams {
     overflow: visible;
 }
 
-
 ::selection {
     background-color: var(--color-primary);
     color: var(--text-color-inverse);
@@ -173,7 +171,7 @@ img {
     box-sizing: border-box;
     background-repeat: no-repeat;
     background-position: center;
-    background-image: url('JetStream3Logo.svg');
+    background-image: url("JetStream3Logo.svg");
     color: transparent;
     animation: swingin 350ms ease-out forwards;
     will-change: transform, opacity;
@@ -181,7 +179,7 @@ img {
 }
 
 #jetstreams {
-    background-image: url('jetstreams.svg');
+    background-image: url("jetstreams.svg");
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
@@ -231,7 +229,6 @@ h1 {
     margin-bottom: 0;
 }
 
-
 h2,
 h3,
 h4,
@@ -241,7 +238,6 @@ h6 {
     text-align: left;
 }
 
-
 h4,
 h5,
 h6 {
@@ -312,6 +308,19 @@ a.button {
     background-image: none;
 }
 
+#status.loading,
+#status-progress-bar {
+    background-image: linear-gradient(
+        132deg,
+        #96e5ff 0%,
+        #96e5ff 2%,
+        #86d9ff 42%,
+        #8bdaff 84%,
+        #96e5ff 98%,
+        #96e5ff 100%
+    );
+}
+
 #status.loading {
     position: absolute;
     top: 0;
@@ -322,9 +331,8 @@ a.button {
     font-size: 4rem;
     font-style: italic;
     font-weight: 500;
-    letter-spacing: -0.10rem;
+    letter-spacing: -0.1rem;
     color: transparent;
-    background-image: linear-gradient(132deg, #96E5FF 0%, #96E5FF 2%, #86D9FF 42%, #8BDAFF 84%, #96E5FF 98%, #96E5FF 100%);
     -webkit-background-clip: text;
     background-repeat: no-repeat;
     -webkit-touch-callout: none;
@@ -336,6 +344,18 @@ a.button {
     margin: 0 auto 1rem;
 }
 
+#status-progress-container {
+    height: 2.4rem;
+    width: 80%;
+    margin: 1rem auto;
+    overflow: hidden;
+}
+
+#status-progress-bar {
+    height: 100%;
+    width: 0%;
+}
+
 .error h2,
 .error p {
     color: var(--error-text-color);
@@ -416,7 +436,8 @@ a.button {
 .benchmark h4,
 .benchmark .result,
 .benchmark label,
-.benchmark .plot {
+.benchmark .plot,
+#status-progress-container {
     color: transparent;
     background: linear-gradient(160deg, rgba(249, 249, 249, 1) 0%, rgba(238, 238, 238, 1) 100%);
     border-radius: 3px;
@@ -435,7 +456,6 @@ a.button {
     background-image: none;
 }
 
-
 .benchmark-done h3,
 .benchmark-done h4,
 .benchmark-done .result,
@@ -488,10 +508,9 @@ a.button {
     vertical-align: middle;
     font-style: italic;
     font-weight: bold;
-    font-family: 'Times New Roman', Times, serif;
+    font-family: "Times New Roman", Times, serif;
     line-height: 1.6rem;
     margin-top: -0.2rem;
-
 }
 
 .benchmark-running a.info {