Cold-Air-Networks/mirror-speedometer
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Drive-by-fix:
- Move the more frequently used iteration count to the top
- Move warmupSuite and warmup-delay closer together
This commit is contained in:
Camillo Bruni 2024-02-29 10:46:39 +01:00 committed by GitHub
parent 899c11317d
commit c901052f2d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 90 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
resources/developer-mode.mjs
View file

@ -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;
}
export function createUIForSuites() {
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, 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);

21
resources/main.css
View file

@ -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;