Additional developerMode controls (#188)

resources/developer-mode.mjs

@@ -1,4 +1,5 @@
 import { Suites } from "./tests.mjs";
+import { params, defaultParams } from "./params.mjs";
 
 export function createDeveloperModeContainer() {
     const container = document.createElement("div");
@@ -12,12 +13,74 @@ export function createDeveloperModeContainer() {
     const content = document.createElement("div");
     content.className = "developer-mode-content";
     content.append(createUIForSuites());
+    content.append(document.createElement("hr"));
+    content.append(createUIForMeasurementMethod());
+    content.append(document.createElement("br"));
+    content.append(createUIForWarmupSuite());
+    content.append(document.createElement("br"));
+    content.append(createUIForIterationCount());
     details.append(content);
 
     container.append(details);
     return container;
 }
 
+export function createUIForMeasurementMethod() {
+    let check = document.createElement("input");
+    check.type = "checkbox";
+    check.id = "measurement-method";
+    check.checked = params.measurementMethod === "raf";
+
+    check.onchange = () => {
+        params.measurementMethod = check.checked ? "raf" : "timer";
+        updateURL();
+    };
+
+    let label = document.createElement("label");
+    label.append(check, " ", "rAF timing");
+
+    return label;
+}
+
+export function createUIForWarmupSuite() {
+    let check = document.createElement("input");
+    check.type = "checkbox";
+    check.id = "warmup-suite";
+    check.checked = !!params.useWarmupSuite;
+
+    check.onchange = () => {
+        params.useWarmupSuite = check.checked;
+        updateURL();
+    };
+
+    let label = document.createElement("label");
+    label.append(check, " ", "warmup suite");
+
+    return label;
+}
+
+export function createUIForIterationCount() {
+    let range = document.createElement("input");
+    range.type = "range";
+    range.id = "iteration-count";
+    range.min = 1;
+    range.max = 20;
+    range.value = params.iterationCount;
+
+    let label = document.createElement("label");
+    let countLabel = document.createElement("span");
+    countLabel.textContent = params.iterationCount;
+    label.append(`iterations: `, countLabel, document.createElement("br"), range);
+
+    range.onchange = () => {
+        params.iterationCount = parseInt(range.value);
+        countLabel.textContent = params.iterationCount;
+        updateURL();
+    };
+
+    return label;
+}
+
 export function createUIForSuites() {
     const control = document.createElement("nav");
     const ol = document.createElement("ol");
@@ -44,7 +107,7 @@ export function createUIForSuites() {
                         setSuiteEnabled(suiteIndex, true);
                 }
             }
-            fixupURL();
+            updateURL();
         };
         checkboxes.push(checkbox);
 
@@ -65,7 +128,7 @@ export function createUIForSuites() {
         for (let suiteIndex = 0; suiteIndex < Suites.length; suiteIndex++)
             setSuiteEnabled(suiteIndex, true);
 
-        fixupURL(Suites);
+        updateURL();
     };
     control.appendChild(button);
 
@@ -75,14 +138,16 @@ export function createUIForSuites() {
         for (let suiteIndex = 0; suiteIndex < Suites.length; suiteIndex++)
             setSuiteEnabled(suiteIndex, false);
 
-        fixupURL();
+        updateURL();
     };
     control.appendChild(button);
 
     return control;
 }
 
-function fixupURL() {
+function updateURL() {
+    const url = new URL(window.location.href);
+
     // If less than all suites are selected then change the URL "Suites" GET parameter
     // to comma separate only the selected
     const selectedSuites = [];
@@ -92,19 +157,30 @@ function fixupURL() {
     }
 
     if (!selectedSuites.length || selectedSuites.length === Suites.length) {
-        const url = new URL(window.location.href);
         url.searchParams.delete("suites");
         url.searchParams.delete("suite");
-        url.search = decodeURIComponent(url.search);
-
-        // Only push state if changed
-        if (url.href !== window.location.href)
-            window.history.pushState({}, "", url);
     } else {
-        const url = new URL(window.location.href);
         url.searchParams.delete("suite");
         url.searchParams.set("suites", selectedSuites.join(","));
-        url.search = decodeURIComponent(url.search);
-        window.history.pushState({}, "", url);
     }
+
+    if (params.measurementMethod === "raf")
+        url.searchParams.set("measurementMethod", "raf");
+    else
+        url.searchParams.delete("measurementMethod");
+
+    if (params.iterationCount !== defaultParams.iterationCount)
+        url.searchParams.set("iterationCount", params.iterationCount);
+    else
+        url.searchParams.delete("iterationCount");
+
+    if (params.useWarmupSuite !== defaultParams.useWarmupSuite)
+        url.searchParams.set("useWarmupSuite", params.useWarmupSuite);
+    else
+        url.searchParams.delete("useWarmupSuite");
+
+    // Only push state if changed
+    url.search = decodeURIComponent(url.search);
+    if (url.href !== window.location.href)
+        window.history.pushState({}, "", url);
 }

resources/main.css

@@ -207,7 +207,13 @@ button,
     padding: 3px;
     appearance: button;
     border: 1px solid white;
-    margin: 0 5px;
+    margin-top: 5px;
+    margin-inline-end: 3px;
+}
+
+.developer-mode-content hr {
+    width: initial;
+    margin: 10px 0;
 }
 
 section {

resources/params.mjs

@@ -8,16 +8,14 @@ class Params {
     iterationCount = 10;
     suites = [];
     useWarmupSuite = false;
-    measurementMethod = 'timer';
+    measurementMethod = "timer";
 
     constructor(searchParams = undefined) {
         if (searchParams)
-            this._copyFromParams(searchParams);
-        Object.freeze(this.viewport);
-        Object.freeze(this);
+            this._copyFromSearchParams(searchParams);
     }
 
-    _copyFromParams(searchParams) {
+    _copyFromSearchParams(searchParams) {
         if (searchParams.has("viewport")) {
             const viewportParam = searchParams.get("viewport");
             const [width, height] = viewportParam.split("x");
@@ -55,7 +53,7 @@ class Params {
 
         if (searchParams.has("measurementMethod")) {
             this.measurementMethod = searchParams.get("measurementMethod");
-            if (this.measurementMethod !== 'timer' && this.measurementMethod !== 'raf')
+            if (this.measurementMethod !== "timer" && this.measurementMethod !== "raf")
                 throw new Error(`Invalid measurement method: ${this.measurementMethod}`);
             searchParams.delete("measurementMethod");
         }
@@ -73,9 +71,11 @@ class Params {
 }
 
 export const defaultParams = new Params();
+Object.freeze(defaultParams.viewport);
+Object.freeze(defaultParams);
 
 const searchParams = new URLSearchParams(window.location.search);
-let maybeCustomParams = defaultParams;
+let maybeCustomParams = new Params();
 try {
     maybeCustomParams = new Params(searchParams);
 } catch (e) {