WIP: service worker preload support

index.html

@@ -26,13 +26,20 @@
                 </div>
                 <div class="buttons">
                     <div class="button-row">
-                        <button class="start-tests-button">Start Test</button>
+                        <button class="start-tests-button"><div>Start Test</div></button>
                     </div>
                     <div class="button-row">
                         <a href="about.html">About Speedometer</a>
                         <a href="instructions.html">Test Instructions</a>
                     </div>
                 </div>
+                <div id="preload-progress">
+                    <progress aria-label="Progress" id="preload-progress-completed"></progress>
+                </div>
+                <div id="preload-info">
+                    <div id="preload-info-label"></div>
+                    <div id="preload-info-progress"></div>
+                </div>
             </section>
 
             <section id="running">

resources/benchmark-configurator.mjs

@@ -56,6 +56,8 @@ export class BenchmarkConfigurator {
         this.#suites.forEach((suite) => {
             if (!suite.tags)
                 suite.tags = [];
+            if (!("measurePrepare" in suite))
+                suite.measurePrepare = false;
             if (suite.url.startsWith("experimental/"))
                 suite.tags.unshift("all", "experimental");
             else
@@ -115,8 +117,10 @@ export class BenchmarkConfigurator {
     }
 
     _loadSuite(suite) {
-        suite.tags.forEach((tag) => this.#tags.add(tag));
-        this.#suites.push(suite);
+        if (suite.tags)
+            suite.tags.forEach((tag) => this.#tags.add(tag));
+
+        this.#suites.push({ ...suite, tags: suite.tags ? [...suite.tags] : [] });
     }
 
     enableSuites(names, tags) {

resources/developer-mode.mjs

@@ -29,6 +29,7 @@ export function createDeveloperModeContainer() {
     settings.append(createUIForWaitAfterSuite());
     settings.append(createUIForAsyncSteps());
     settings.append(createUIForLayoutMode());
+    settings.append(createUIForPreload());
     settings.append(createUIForComplexity());
 
     content.append(document.createElement("hr"));
@@ -54,6 +55,12 @@ function createUIForWarmupSuite() {
     });
 }
 
+function createUIForPreload() {
+    return createCheckboxUI("Use service worker for resource preloading", params.preload, (isChecked) => {
+        params.preload = isChecked;
+    });
+}
+
 function createUIForMeasurePrepare() {
     return createCheckboxUI("Measure Prepare", params.measurePrepare, (isChecked) => {
         params.measurePrepare = isChecked;

resources/main.css

@@ -419,7 +419,17 @@ button.show-about {
     display: none;
 }
 
-#progress {
+#preload-progress {
+    display: none;
+}
+
+:root[data-benchmark-state="PRELOADING"] #preload-progress,
+:root[data-benchmark-state="PRELOADING"] #preload-info {
+    display: block;
+}
+
+#progress,
+#preload-progress {
     position: absolute;
     bottom: -6px;
     left: 60px;
@@ -429,7 +439,8 @@ button.show-about {
     border-right: 6px solid var(--background);
 }
 
-#progress-completed {
+#progress-completed,
+#preload-progress-completed {
     position: absolute;
     top: 0;
     left: 0;
@@ -440,11 +451,13 @@ button.show-about {
     background-color: var(--inactive-color);
 }
 
-#progress-completed::-webkit-progress-value {
+#progress-completed::-webkit-progress-value,
+#preload-progress-completed::-webkit-progress-value {
     background-color: var(--foreground);
 }
 
-#progress-completed::-moz-progress-bar {
+#progress-completed::-moz-progress-bar,
+#preload-progress-completed::-moz-progress-bar {
     background-color: var(--foreground);
 }
 
@@ -455,7 +468,9 @@ button.show-about {
     background-color: var(--background);
 }
 
-#info {
+#info,
+#preload-info {
+    display: none;
     position: absolute;
     bottom: -25px;
     left: 60px;
@@ -465,11 +480,13 @@ button.show-about {
     text-align: center;
     font-size: 12px;
 }
-#info-label {
+#info-label,
+#preload-info-label {
     position: absolute;
     left: 6px;
 }
-#info-progress {
+#info-progress,
+#preload-info-progress {
     position: absolute;
     right: 6px;
     text-align: right;
@@ -945,3 +962,50 @@ section#about .note {
     color: #fff;
     stroke: #fff;
 }
+
+#preload-progress,
+#preload-info {
+    display: none;
+}
+
+[data-benchmark-state="PRELOADING"] {
+    cursor: wait;
+}
+
+[data-benchmark-state="PRELOADING"] #preload-progress,
+[data-benchmark-state="PRELOADING"] #preload-info {
+    display: block;
+}
+
+[data-benchmark-state="RUNNING"] #info {
+    display: block;
+}
+
+[data-benchmark-state="PRELOADING"] .start-tests-button {
+    color: var(--foreground);
+    background-image: linear-gradient(-45deg, var(--foreground) 3px, transparent 3px, transparent 50%, var(--foreground) 50%, var(--foreground) calc(50% + 3px), transparent calc(50% + 3px), transparent 100%);
+    background-size: 20px 20px;
+    animation: barber-pole 1s linear infinite;
+    pointer-events: none;
+}
+
+[data-benchmark-state="PRELOADING"] .developer-mode .start-tests-button {
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+[data-benchmark-state="PRELOADING"] .start-tests-button > div {
+    background-color: var(--background);
+    border-radius: 10px;
+    padding: 0 0.3em;
+    display: inline-block;
+}
+
+@keyframes barber-pole {
+    0% {
+        background-position: 0 0, 0 0;
+    }
+    100% {
+        background-position: 20px 0, 0 0;
+    }
+}