Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add warmup and step delay to developer UI #323

Merged
merged 12 commits into from
Feb 29, 2024
Merged

Add warmup and step delay to developer UI #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
82c05c4
adding warmup and step delay to deverloper UI
camillobruni Oct 4, 2023
951a4e1
Merge branch 'main' into 2023-10-04_delay_params
camillobruni Nov 7, 2023
64e1e23
undo moving
camillobruni Nov 7, 2023
23687f5
Merge branch 'main' into 2023-10-04_delay_params
camillobruni Nov 24, 2023
780f91b
fix default
camillobruni Nov 24, 2023
9817ff2
adding max iterations
camillobruni Nov 30, 2023
b64dc03
updating metric
camillobruni Nov 30, 2023
7ff287a
Merge branch 'main' into 2023-10-04_delay_params
camillobruni Jan 16, 2024
195c57e
address comment
camillobruni Jan 16, 2024
dc13bec
fixes
camillobruni Jan 16, 2024
30977c9
updating developer mode params and settings code.
camillobruni Jan 16, 2024
aa38532
Merge branch 'main' into 2023-10-04_delay_params
camillobruni Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 71 additions & 35 deletions resources/developer-mode.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand All @@ -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";
Expand All @@ -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";
Expand All @@ -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;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like we could factorize a bit more these UI creations, but I'm not sure this would actually be easier to read. So I'm fine with keeping them this way.


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) => {
Expand Down Expand Up @@ -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);
}

camillobruni marked this conversation as resolved.
Show resolved Hide resolved
// Only push state if changed
url.search = decodeURIComponent(url.search);
Expand Down
21 changes: 17 additions & 4 deletions resources/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,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;
}
Expand All @@ -262,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;
Expand Down
Loading