From 60b1bde8f2813e386566294bd10e7f744e974089 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Wed, 14 Jan 2026 11:26:28 +0100 Subject: [PATCH 1/3] cherry-pick --- JetStreamDriver.js | 10 +++++++ index.html | 7 ++++- resources/JetStream.css | 59 +++++++++++++++++++++++++++-------------- 3 files changed, 55 insertions(+), 21 deletions(-) diff --git a/JetStreamDriver.js b/JetStreamDriver.js index db875b3e..f74a21e7 100644 --- a/JetStreamDriver.js +++ b/JetStreamDriver.js @@ -578,6 +578,16 @@ class Driver { } } + updateCounterUI() { + const counter = JetStream.counter; + 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}%`; + } + resultsObject(format = "run-benchmark") { switch(format) { case "run-benchmark": diff --git a/index.html b/index.html index 3c58c48b..06741d2c 100644 --- a/index.html +++ b/index.html @@ -118,7 +118,12 @@

Non-standard Parameters

-
Loading Benchmark...
+
+
Loading Benchmark...
+
+
+
+
diff --git a/resources/JetStream.css b/resources/JetStream.css index cfd99174..86023eef 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; --nonDefaultRotate: 152deg; @@ -64,7 +64,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%; } @@ -92,7 +92,7 @@ body.nonDefaultParams { & h2 { text-align: center; - } + } & p { text-align: center; @@ -131,7 +131,6 @@ body.nonDefaultParams { color: var(--highlight); } - .overflow-scroll { overflow-y: auto; } @@ -140,7 +139,6 @@ body.nonDefaultParams { overflow: visible; } - ::selection { background-color: var(--color-primary); color: var(--text-color-inverse); @@ -179,7 +177,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; @@ -187,7 +185,7 @@ img { } #jetstreams { - background-image: url('jetstreams.svg'); + background-image: url("jetstreams.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; @@ -237,7 +235,6 @@ h1 { margin-bottom: 0; } - h2, h3, h4, @@ -247,7 +244,6 @@ h6 { text-align: left; } - h4, h5, h6 { @@ -318,6 +314,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; @@ -328,9 +337,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; @@ -342,6 +350,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); @@ -422,7 +442,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; @@ -441,7 +462,6 @@ a.button { background-image: none; } - .benchmark-done h3, .benchmark-done h4, .benchmark-done .result, @@ -494,10 +514,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 { From d86cdebefaff25117e0d2c7a48dab027e1522dd5 Mon Sep 17 00:00:00 2001 From: Keith Miller Date: Tue, 13 Jan 2026 18:26:13 -0500 Subject: [PATCH 2/3] cherry-pick --- JetStreamDriver.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/JetStreamDriver.js b/JetStreamDriver.js index f74a21e7..f939874f 100644 --- a/JetStreamDriver.js +++ b/JetStreamDriver.js @@ -1322,8 +1322,8 @@ class Benchmark { for (let i = 0; i < scores.length; i++) { const result = scores[i]; const cx = padding + i * xRatio; - const cy = height - padding - (result - minResult) * yRatio; - const title = `Iteration ${i + 1}: ${uiFriendlyScore(result)} (${uiFriendlyDuration(this.results[i])})`; + const cy = padding + (result - minResult) * yRatio; + const title = `Iteration ${i + 1}: ${uiFriendlyDuration(result)}`; circlesSVG += `${title}`; } plotContainer.innerHTML = `${circlesSVG}`; From ec5ff60006bbc83bc34dae88259d79d7eb5c03a5 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Mon, 19 Jan 2026 15:26:26 +0100 Subject: [PATCH 3/3] cleanup --- JetStreamDriver.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/JetStreamDriver.js b/JetStreamDriver.js index f939874f..9670901e 100644 --- a/JetStreamDriver.js +++ b/JetStreamDriver.js @@ -1129,8 +1129,7 @@ class Benchmark { updateCounter() { const counter = JetStream.counter; ++counter.loadedResources; - const statusElement = document.getElementById("status"); - statusElement.innerHTML = `Loading ${counter.loadedResources} of ${counter.totalResources} ...`; + JetStream.updateCounterUI(); } prefetchResourcesForBrowser(counter) { @@ -1322,8 +1321,8 @@ class Benchmark { for (let i = 0; i < scores.length; i++) { const result = scores[i]; const cx = padding + i * xRatio; - const cy = padding + (result - minResult) * yRatio; - const title = `Iteration ${i + 1}: ${uiFriendlyDuration(result)}`; + const cy = height - padding - (result - minResult) * yRatio; + const title = `Iteration ${i + 1}: ${uiFriendlyScore(result)} (${uiFriendlyDuration(this.results[i])})`; circlesSVG += `${title}`; } plotContainer.innerHTML = `${circlesSVG}`;