From 82c05c47be350767711d94a56c20b8512e96b0df Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Wed, 4 Oct 2023 16:57:53 +0200 Subject: [PATCH 1/8] adding warmup and step delay to deverloper UI --- resources/developer-mode.mjs | 92 ++++++++++++++++++++++++++++-------- 1 file changed, 73 insertions(+), 19 deletions(-) diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs index 749b8c839..912bd1d82 100644 --- a/resources/developer-mode.mjs +++ b/resources/developer-mode.mjs @@ -14,18 +14,22 @@ export function createDeveloperModeContainer() { content.className = "developer-mode-content"; content.append(createUIForSuites()); content.append(document.createElement("hr")); + content.append(createUIForIterationCount()); + content.append(document.createElement("br")); content.append(createUIForMeasurementMethod()); content.append(document.createElement("br")); content.append(createUIForWarmupSuite()); content.append(document.createElement("br")); - content.append(createUIForIterationCount()); + content.append(createUIForWarmupBeforeSync()) + content.append(document.createElement("br")); + content.append(createUIForSyncStepDelay()); details.append(content); container.append(details); return container; } -export function createUIForMeasurementMethod() { +function createUIForMeasurementMethod() { let check = document.createElement("input"); check.type = "checkbox"; check.id = "measurement-method"; @@ -42,7 +46,33 @@ export function createUIForMeasurementMethod() { return label; } -export function createUIForWarmupSuite() { + +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; + }; + + range.onchange = () => { + params.iterationCount = parseInt(range.value); + updateURL(); + }; + + return label; +} + +function createUIForWarmupSuite() { let check = document.createElement("input"); check.type = "checkbox"; check.id = "warmup-suite"; @@ -59,32 +89,46 @@ export function createUIForWarmupSuite() { return label; } -export function createUIForIterationCount() { - let range = document.createElement("input"); +function createUIForWarmupBeforeSync() { + const {range, label} = createTimeRangeUI("Warmup time: ", params.warmupBeforeSync); + range.onchange = () => { + 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; +} + + +function createTimeRangeUI(labelText, initialValue) { + const range = document.createElement("input"); range.type = "range"; range.id = "iteration-count"; - range.min = 1; - range.max = 20; - range.value = params.iterationCount; + range.min = 0; + range.max = 1000; + range.value = initialValue; - let label = document.createElement("label"); - let countLabel = document.createElement("span"); - countLabel.textContent = params.iterationCount; - label.append("iterations: ", countLabel, document.createElement("br"), range); + const label = document.createElement("label"); + const countLabel = document.createElement("span"); + countLabel.textContent = initialValue; + label.append(labelText, countLabel, " ms", document.createElement("br"), range); range.oninput = () => { countLabel.textContent = range.value; }; - range.onchange = () => { - params.iterationCount = parseInt(range.value); - updateURL(); - }; - - return label; + return {range, label}; } -export function createUIForSuites() { +function createUIForSuites() { const control = document.createElement("nav"); const ol = document.createElement("ol"); const checkboxes = []; @@ -229,6 +273,16 @@ function updateURL() { else url.searchParams.delete("useWarmupSuite"); + if (params.warmupBeforeSync !== defaultParams.warmupBeforeSync) + url.searchParams.set("warmupBeforeSync", params.warmupBeforeSync); + else + url.searchParams.delete("warmupBeforeSync"); + + if (params.waitBeforeSync !== defaultParams.waitBeforeSync) + url.searchParams.set("waitBeforeSync", params.waitBeforeSync); + else + url.searchParams.delete("waitBeforeSync"); + // Only push state if changed url.search = decodeURIComponent(url.search); if (url.href !== window.location.href) From 64e1e232be9e0ba44f80662862089cea9cff700d Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 7 Nov 2023 15:51:33 +0100 Subject: [PATCH 2/8] undo moving --- resources/developer-mode.mjs | 33 ++++++++++++++++----------------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs index 912bd1d82..31818b0db 100644 --- a/resources/developer-mode.mjs +++ b/resources/developer-mode.mjs @@ -46,6 +46,22 @@ function createUIForMeasurementMethod() { return label; } +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; +} function createUIForIterationCount() { let range = document.createElement("input"); @@ -72,23 +88,6 @@ function createUIForIterationCount() { return label; } -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; -} - function createUIForWarmupBeforeSync() { const {range, label} = createTimeRangeUI("Warmup time: ", params.warmupBeforeSync); range.onchange = () => { From 780f91b0580ca3239a48f45587a9923d28919412 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Fri, 24 Nov 2023 18:30:30 +0100 Subject: [PATCH 3/8] fix default --- resources/developer-mode.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs index 74e070035..7bf845b77 100644 --- a/resources/developer-mode.mjs +++ b/resources/developer-mode.mjs @@ -69,7 +69,7 @@ function createUIForWarmupSuite() { } function createUIForIterationCount() { - const { range, label } = createTimeRangeUI("Iterations: ", params.waitBeforeSync, "#"); + const { range, label } = createTimeRangeUI("Iterations: ", params.iterationCount, "#"); range.onchange = () => { params.iterationCount = parseInt(range.value); updateURL(); From 9817ff221d66276b4a2eb7f2d7c5528bcc04e04d Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Thu, 30 Nov 2023 02:01:54 +0100 Subject: [PATCH 4/8] adding max iterations --- resources/developer-mode.mjs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs index 7bf845b77..63c26c2a6 100644 --- a/resources/developer-mode.mjs +++ b/resources/developer-mode.mjs @@ -69,7 +69,7 @@ function createUIForWarmupSuite() { } function createUIForIterationCount() { - const { range, label } = createTimeRangeUI("Iterations: ", params.iterationCount, "#"); + const { range, label } = createTimeRangeUI("Iterations: ", params.iterationCount, "#", 100); range.onchange = () => { params.iterationCount = parseInt(range.value); updateURL(); @@ -95,11 +95,11 @@ function createUIForSyncStepDelay() { return label; } -function createTimeRangeUI(labelText, initialValue, unit = "ms") { +function createTimeRangeUI(labelText, initialValue, unit = "ms", max = 1000) { const range = document.createElement("input"); range.type = "range"; range.min = 0; - range.max = 1000; + range.max = max; range.value = initialValue; const label = document.createElement("label"); From b64dc033f16d25254beda41b79b7c6baa1662d67 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Thu, 30 Nov 2023 02:03:15 +0100 Subject: [PATCH 5/8] updating metric --- resources/developer-mode.mjs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs index 63c26c2a6..b12c3a385 100644 --- a/resources/developer-mode.mjs +++ b/resources/developer-mode.mjs @@ -69,7 +69,7 @@ function createUIForWarmupSuite() { } function createUIForIterationCount() { - const { range, label } = createTimeRangeUI("Iterations: ", params.iterationCount, "#", 100); + const { range, label } = createTimeRangeUI("Iterations: ", params.iterationCount, "#", 1, 100); range.onchange = () => { params.iterationCount = parseInt(range.value); updateURL(); @@ -95,10 +95,10 @@ function createUIForSyncStepDelay() { return label; } -function createTimeRangeUI(labelText, initialValue, unit = "ms", max = 1000) { +function createTimeRangeUI(labelText, initialValue, unit = "ms", min = 0, max = 1000) { const range = document.createElement("input"); range.type = "range"; - range.min = 0; + range.min = min; range.max = max; range.value = initialValue; From 195c57eae5962477cffbd284825bd538ef958e11 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 16 Jan 2024 14:43:13 +0100 Subject: [PATCH 6/8] address comment --- resources/developer-mode.mjs | 34 +++++++++++++++++++++------------- resources/main.css | 23 ++++++++++++++--------- 2 files changed, 35 insertions(+), 22 deletions(-) diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs index b12c3a385..ef7836a8d 100644 --- a/resources/developer-mode.mjs +++ b/resources/developer-mode.mjs @@ -12,19 +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(createUIForIterationCount()); - content.append(document.createElement("br")); - content.append(createUIForMeasurementMethod()); - content.append(document.createElement("br")); - content.append(createUIForWarmupSuite()); - content.append(document.createElement("br")); - content.append(createUIForWarmupBeforeSync()) - content.append(document.createElement("br")); - content.append(createUIForSyncStepDelay()); - details.append(content); + content.append(settings); content.append(document.createElement("hr")); content.append(createUIForRun()); @@ -34,6 +34,13 @@ export function createDeveloperModeContainer() { return container; } + +function span(text) { + const span = document.createElement("span"); + span.textContent = text; + return span; +} + function createUIForMeasurementMethod() { let check = document.createElement("input"); check.type = "checkbox"; @@ -46,7 +53,7 @@ function createUIForMeasurementMethod() { }; let label = document.createElement("label"); - label.append(check, " ", "rAF timing"); + label.append(check, " ", span("rAF timing")); return label; } @@ -63,7 +70,7 @@ function createUIForWarmupSuite() { }; let label = document.createElement("label"); - label.append(check, " ", "warmup suite"); + label.append(check, " ", span("warmup suite")); return label; } @@ -108,7 +115,7 @@ function createTimeRangeUI(labelText, initialValue, unit = "ms", min = 0, max = const rangeValue = document.createElement("span"); rangeLabel.append(rangeValue, " ", unit); rangeValue.textContent = initialValue; - label.append(labelText, range, rangeLabel); + label.append(span(labelText), range, rangeLabel); range.oninput = () => { rangeValue.textContent = range.value; @@ -119,6 +126,7 @@ function createTimeRangeUI(labelText, initialValue, unit = "ms", min = 0, max = function createUIForSuites() { const control = document.createElement("nav"); + control.className = "suites"; const ol = document.createElement("ol"); const checkboxes = []; const setSuiteEnabled = (suiteIndex, enabled) => { diff --git a/resources/main.css b/resources/main.css index f823e4440..55624609f 100644 --- a/resources/main.css +++ b/resources/main.css @@ -245,12 +245,21 @@ button, gap: 3px; } -.developer-mode-content input[type="range"], -.developer-mode-content .range-label-data { - float: right; +.developer-mode-content .settings label { + width: 100%; + display: flex; } -.developer-mode-content .range-label-data { - padding-right: 0.5em; +.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 { @@ -270,10 +279,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; From dc13beccbb07a50e646d05c48a9941e6fd3b6687 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 16 Jan 2024 14:55:31 +0100 Subject: [PATCH 7/8] fixes --- resources/developer-mode.mjs | 45 ++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 25 deletions(-) diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs index ef7836a8d..475dcc38a 100644 --- a/resources/developer-mode.mjs +++ b/resources/developer-mode.mjs @@ -76,7 +76,7 @@ function createUIForWarmupSuite() { } function createUIForIterationCount() { - const { range, label } = createTimeRangeUI("Iterations: ", params.iterationCount, "#", 1, 100); + const { range, label } = createTimeRangeUI("Iterations: ", params.iterationCount, "#", 1, 200); range.onchange = () => { params.iterationCount = parseInt(range.value); updateURL(); @@ -109,13 +109,15 @@ function createTimeRangeUI(labelText, initialValue, unit = "ms", min = 0, max = range.max = max; range.value = initialValue; - const label = document.createElement("label"); - const rangeLabel = document.createElement("span"); - rangeLabel.className = "range-label-data"; + const rangeValueAndUnit = document.createElement("span"); + rangeValueAndUnit.className = "range-label-data"; + const rangeValue = document.createElement("span"); - rangeLabel.append(rangeValue, " ", unit); rangeValue.textContent = initialValue; - label.append(span(labelText), range, rangeLabel); + rangeValueAndUnit.append(rangeValue, " ", unit); + + const label = document.createElement("label"); + label.append(span(labelText), range, rangeValueAndUnit); range.oninput = () => { rangeValue.textContent = range.value; @@ -272,25 +274,18 @@ 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"); - - if (params.warmupBeforeSync !== defaultParams.warmupBeforeSync) - url.searchParams.set("warmupBeforeSync", params.warmupBeforeSync); - else - url.searchParams.delete("warmupBeforeSync"); - - if (params.waitBeforeSync !== defaultParams.waitBeforeSync) - url.searchParams.set("waitBeforeSync", params.waitBeforeSync); - else - url.searchParams.delete("waitBeforeSync"); + 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); From 30977c974d5e343ddf4f31c55660502ffbf70248 Mon Sep 17 00:00:00 2001 From: Camillo Bruni Date: Tue, 16 Jan 2024 14:55:51 +0100 Subject: [PATCH 8/8] updating developer mode params and settings code. --- resources/developer-mode.mjs | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/resources/developer-mode.mjs b/resources/developer-mode.mjs index 475dcc38a..960adf13c 100644 --- a/resources/developer-mode.mjs +++ b/resources/developer-mode.mjs @@ -34,7 +34,6 @@ export function createDeveloperModeContainer() { return container; } - function span(text) { const span = document.createElement("span"); span.textContent = text; @@ -224,14 +223,14 @@ function createUIForSuites() { function createUIForRun() { let button = document.createElement("button"); - button.textContent = `Start Test`; + button.textContent = "Start Test"; button.onclick = (event) => { globalThis.benchmarkClient.start(); - } + }; let buttons = document.createElement("div"); buttons.className = "button-bar"; buttons.appendChild(button); - return buttons + return buttons; } function updateURL() { @@ -274,12 +273,7 @@ function updateURL() { else url.searchParams.delete("measurementMethod"); - const boolParamKeys = [ - "iterationCount", - "useWarmupSuite", - "warmupBeforeSync", - "waitBeforeSync", - ]; + const boolParamKeys = ["iterationCount", "useWarmupSuite", "warmupBeforeSync", "waitBeforeSync"]; for (const paramKey of boolParamKeys) { if (params[paramKey] !== defaultParams[paramKey]) url.searchParams.set(paramKey, params[paramKey]);