Add warmup and step delay to developer UI (#323)

Drive-by-fix:
- Move the more frequently used iteration count to the top
- Move warmupSuite and warmup-delay closer together

Author: camillobruni

resources/developer-mode.mjs

@@ -12,14 +12,19 @@ export function createDeveloperModeContainer() {
 
     const content = document.createElement("div");
     content.className = "developer-mode-content";
+
     content.append(createUIForSuites());
 
+    const settings = document.createElement("div");
+    settings.className = "settings";
+    settings.append(createUIForIterationCount());
+    settings.append(createUIForMeasurementMethod());
+    settings.append(createUIForWarmupSuite());
+    settings.append(createUIForWarmupBeforeSync());
+    settings.append(createUIForSyncStepDelay());
+
     content.append(document.createElement("hr"));
-    content.append(createUIForMeasurementMethod());
-    content.append(document.createElement("br"));
-    content.append(createUIForWarmupSuite());
-    content.append(document.createElement("br"));
-    content.append(createUIForIterationCount());
+    content.append(settings);
 
     content.append(document.createElement("hr"));
     content.append(createUIForRun());
@@ -29,7 +34,13 @@ export function createDeveloperModeContainer() {
     return container;
 }
 
-export function createUIForMeasurementMethod() {
+function span(text) {
+    const span = document.createElement("span");
+    span.textContent = text;
+    return span;
+}
+
+function createUIForMeasurementMethod() {
     let check = document.createElement("input");
     check.type = "checkbox";
     check.id = "measurement-method";
@@ -41,12 +52,12 @@ export function createUIForMeasurementMethod() {
     };
 
     let label = document.createElement("label");
-    label.append(check, " ", "rAF timing");
+    label.append(check, " ", span("rAF timing"));
 
     return label;
 }
 
-export function createUIForWarmupSuite() {
+function createUIForWarmupSuite() {
     let check = document.createElement("input");
     check.type = "checkbox";
     check.id = "warmup-suite";
@@ -58,38 +69,65 @@ export function createUIForWarmupSuite() {
     };
 
     let label = document.createElement("label");
-    label.append(check, " ", "warmup suite");
+    label.append(check, " ", span("Use 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.oninput = () => {
-        countLabel.textContent = range.value;
+function createUIForIterationCount() {
+    const { range, label } = createTimeRangeUI("Iterations: ", params.iterationCount, "#", 1, 200);
+    range.onchange = () => {
+        params.iterationCount = parseInt(range.value);
+        updateURL();
     };
+    return label;
+}
 
+function createUIForWarmupBeforeSync() {
+    const { range, label } = createTimeRangeUI("Warmup time: ", params.warmupBeforeSync);
     range.onchange = () => {
-        params.iterationCount = parseInt(range.value);
+        params.warmupBeforeSync = parseInt(range.value);
         updateURL();
     };
+    return label;
+}
 
+function createUIForSyncStepDelay() {
+    const { range, label } = createTimeRangeUI("Sync step delay: ", params.waitBeforeSync);
+    range.onchange = () => {
+        params.waitBeforeSync = parseInt(range.value);
+        updateURL();
+    };
     return label;
 }
 
-export function createUIForSuites() {
+function createTimeRangeUI(labelText, initialValue, unit = "ms", min = 0, max = 1000) {
+    const range = document.createElement("input");
+    range.type = "range";
+    range.min = min;
+    range.max = max;
+    range.value = initialValue;
+
+    const rangeValueAndUnit = document.createElement("span");
+    rangeValueAndUnit.className = "range-label-data";
+
+    const rangeValue = document.createElement("span");
+    rangeValue.textContent = initialValue;
+    rangeValueAndUnit.append(rangeValue, " ", unit);
+
+    const label = document.createElement("label");
+    label.append(span(labelText), range, rangeValueAndUnit);
+
+    range.oninput = () => {
+        rangeValue.textContent = range.value;
+    };
+
+    return { range, label };
+}
+
+function createUIForSuites() {
     const control = document.createElement("nav");
+    control.className = "suites";
     const ol = document.createElement("ol");
     const checkboxes = [];
     const setSuiteEnabled = (suiteIndex, enabled) => {
@@ -235,15 +273,13 @@ function updateURL() {
     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");
+    const boolParamKeys = ["iterationCount", "useWarmupSuite", "warmupBeforeSync", "waitBeforeSync"];
+    for (const paramKey of boolParamKeys) {
+        if (params[paramKey] !== defaultParams[paramKey])
+            url.searchParams.set(paramKey, params[paramKey]);
+        else
+            url.searchParams.delete(paramKey);
+    }
 
     // Only push state if changed
     url.search = decodeURIComponent(url.search);

resources/main.css

@@ -249,6 +249,23 @@ button,
     gap: 3px;
 }
 
+.developer-mode-content .settings label {
+    width: 100%;
+    display: flex;
+}
+.developer-mode-content .settings label * {
+    flex: 1;
+}
+.developer-mode-content .settings input[type="checkbox"] {
+    flex: 0;
+    margin-left: 0px;
+}
+.developer-mode-content .settings .range-label-data {
+    flex: 0;
+    min-width: 5em;
+    text-align: right;
+}
+
 .developer-mode-content li + li {
     margin-top: 0px;
 }
@@ -266,10 +283,6 @@ button,
     color: white;
     background: rgba(255, 255, 255, 0.1);
 }
-.developer-mode-content label {
-    width: 100%;
-    display: inline-block;
-}
 .developer-mode-content hr {
     width: initial;
     margin: 10px 0;