diff --git a/JetStreamDriver.js b/JetStreamDriver.js index 735e9f0c..4edd17e8 100644 --- a/JetStreamDriver.js +++ b/JetStreamDriver.js @@ -217,10 +217,7 @@ class Driver { // the global `fileLoader` cache. this.blobDataCache = { }; this.loadCache = { }; - this.counter = { }; - this.counter.loadedResources = 0; - this.counter.totalResources = 0; - this.counter.failedPreloadResources = 0; + this.counter = { loadedResources: 0, totalResources: 0, failedPreloadResources: 0 }; } async start() { @@ -324,7 +321,6 @@ class Driver { } summaryHtml += ""; const summaryElement = document.getElementById("result-summary"); - summaryElement.classList.add("done"); summaryElement.innerHTML = summaryHtml; summaryElement.onclick = displayCategoryScores; statusElement.innerHTML = ""; @@ -357,7 +353,7 @@ class Driver { } } - prepareBrowserUI() { + async prepareBrowserUI() { let text = ""; for (const benchmark of this.benchmarks) text += benchmark.renderHTML(); @@ -370,6 +366,27 @@ class Driver { if (e.key === "Enter") JetStream.start(); }); + + document.body.classList.add("ready"); + const statusElement = document.getElementById("status"); + statusElement.innerHTML = `Start Test`; + + await this.waitForBrowserUIStartupAnimation(); + + statusElement.addEventListener("click", (e) => { + e.preventDefault(); + JetStream.start(); + return false; + }, { once: true}); + } + + + async waitForBrowserUIStartupAnimation() { + if (!JetStreamParams.isDefault) + return + const cssValue = window.getComputedStyle(document.body).getPropertyValue("--startup-animation-duration"); + const startupAnimationDuration = parseInt(cssValue.split("ms")[0]) + await new Promise((resolve) => setTimeout(resolve, startupAnimationDuration)); } reportError(benchmark, error) { @@ -401,7 +418,7 @@ class Driver { await this.prefetchResources(); this.benchmarks.sort((a, b) => a.plan.name.toLowerCase() < b.plan.name.toLowerCase() ? 1 : -1); if (isInBrowser) - this.prepareBrowserUI(); + await this.prepareBrowserUI(); this.isReady = true; if (isInBrowser) { globalThis.dispatchEvent(new Event("JetStreamReady")); @@ -445,15 +462,6 @@ class Driver { } JetStream.loadCache = { }; // Done preloading all the files. - - const statusElement = document.getElementById("status"); - statusElement.classList.remove('loading'); - statusElement.innerHTML = `Start Test`; - statusElement.onclick = () => { - statusElement.onclick = null; - JetStream.start(); - return false; - } } resultsObject(format = "run-benchmark") { @@ -1046,7 +1054,7 @@ class Benchmark { updateCounter() { const counter = JetStream.counter; ++counter.loadedResources; - const statusElement = document.getElementById("status"); + const statusElement = document.getElementById("status-counter"); statusElement.innerHTML = `Loading ${counter.loadedResources} of ${counter.totalResources} ...`; } diff --git a/index.html b/index.html index cf3104fc..fbbb7cc8 100644 --- a/index.html +++ b/index.html @@ -51,7 +51,9 @@ } async function initialize() { + const bodyClassList = document.body.classList; if (!JetStreamParams.isDefault) { + bodyClassList.remove("animate"); showNonDefaultParams(); } if (globalThis.allIsGood) { @@ -60,16 +62,17 @@ } catch (e) { globalThis.allIsGood = false; console.error(e); + } finally { + bodyClassList.remove("loading"); } } if (!globalThis.allIsGood) { + bodyClassList.add('error'); let statusElement = document.getElementById("status"); - statusElement.classList.remove('loading'); - statusElement.classList.add('error'); statusElement.innerHTML = "

ERROR

Errors were encountered during page load. Refusing to run a partial benchmark suite.

"; } } - + function showNonDefaultParams() { document.body.classList.add("nonDefaultParams"); const body = document.querySelector("#non-standard-params-table tbody"); @@ -87,7 +90,7 @@ - +

JetStream 3 @@ -116,7 +119,9 @@

Non-standard Parameters

-
Loading Benchmark...
+
+
Loading Benchmark...
+
diff --git a/resources/JetStream.css b/resources/JetStream.css index 2ffba2de..c897e1ee 100644 --- a/resources/JetStream.css +++ b/resources/JetStream.css @@ -41,6 +41,7 @@ --benchmark-done-result-color: #4A4A4A; --gap: 3rem; --width: 200px; + --startup-animation-duration: 500ms; } html, @@ -64,6 +65,7 @@ body { background-size: 100vw; padding-bottom: 0px; background-image: url('clouds.svg'); + padding-bottom: 0px; overflow-y: hidden; height: 100%; } @@ -175,25 +177,43 @@ img { background-position: center; background-image: url('JetStream3Logo.svg'); color: transparent; - animation: swingin 350ms ease-out forwards; - will-change: transform, opacity; height: 75px; } +.loading.animate .logo .logo-image { + animation: swingin var(--startup-animation-duration) ease-out forwards; + will-change: transform, opacity; + animation-delay: 50ms; +} + +.ready .logo .logo-image { + animation: none; + opacity: 1; +} + #jetstreams { - background-image: url('jetstreams.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; padding: 2rem 0; margin: -2rem 0; + background-image: url("jetstreams-static.svg"); } + #jetstreams svg { width: 100%; max-height: 120px; } +.animate #jetstreams { + background-image: url("jetstreams.svg"); + transition: background-image var(--startup-animation-duration) ease-in-out; +} +.ready #jetstreams { + background-image: url("jetstreams-static.svg") !important; +} + #magic { position: absolute; top: -900px; @@ -215,8 +235,14 @@ article, .summary { max-width: 70rem; margin: 0 auto 0 auto; +} + +.loading.animate .summary { opacity: 0; - animation: fadein 0.5s ease-in-out forwards; +} + +article, .loading.animate .summary { + animation: fadein var(--startup-animation-duration) ease-in-out forwards; animation-delay: 200ms; } @@ -302,17 +328,18 @@ a.button { user-select: none; } -a.button { - animation: fadein 500ms ease-in forwards, scaledown 500ms ease-in forwards; +.animate a.button { + animation: fadein var(--startup-animation-duration) ease-in forwards, scaledown var(--startup-animation-duration) ease-in forwards; opacity: 0; } + #status label, .button:hover { background-image: none; } -#status.loading { +.loading #status-counter { position: absolute; top: 0; left: 0; @@ -331,7 +358,7 @@ a.button { user-select: none; } -#status.error { +.error #status { max-width: 70rem; margin: 0 auto 1rem; } @@ -386,14 +413,13 @@ a.button { justify-content: space-around; gap: var(--gap); margin: 0 calc(var(--gap) * -1) 0 calc(-var(--gap) * -1); - animation: fadein 500ms ease-out forwards; - opacity: 0; overflow-y: auto; flex: 1; padding-bottom: var(--gap); box-sizing: border-box; } + .benchmark { position: relative; flex: 1; @@ -406,6 +432,12 @@ a.button { scroll-margin-bottom: 20vh; } +.animate .benchmark { + animation: fadein var(--startup-animation-duration) ease-in forwards; + opacity: 0; +} + + .benchmark .result.detail { display: none; } @@ -593,16 +625,6 @@ dt:target { } } -@keyframes shine { - 0% { - background-position: -1200px center; - } - - 100% { - background-position: 100vw center; - } -} - @keyframes swingin { from { opacity: 0; diff --git a/resources/jetstreams-static.svg b/resources/jetstreams-static.svg new file mode 100644 index 00000000..a734b574 --- /dev/null +++ b/resources/jetstreams-static.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/resources/jetstreams.svg b/resources/jetstreams.svg index b767e43f..1b6e1613 100644 --- a/resources/jetstreams.svg +++ b/resources/jetstreams.svg @@ -6,27 +6,27 @@ stroke-dasharray: 2680; stroke-dashoffset: 2680; animation: dash 1.1s ease-in forwards; - animation-delay: 400ms; + animation-delay: 100ms; } .line.second { - animation-delay: 500ms; - animation-duration: 900ms; + animation-delay: 200ms; + animation-duration: 2900ms; } .line.third { - animation-delay: 600ms; - animation-duration: 800ms; + animation-delay: 300ms; + animation-duration: 1800ms; } .line.fourth { - animation-delay: 700ms; - animation-duration: 700ms; + animation-delay: 400ms; + animation-duration: 1700ms; } .line.fifth { - animation-delay: 800ms; - animation-duration: 600ms; + animation-delay: 900ms; + animation-duration: 1600ms; } @keyframes dash {