Base+UI: Implement user interface for defaultZoomLevelFactor setting

This commit is contained in:
rmg-x
2025-08-23 11:18:48 -05:00
committed by Tim Flynn
parent 333164ecf9
commit 9b0157523d
Notes: github-actions[bot] 2025-08-26 10:32:43 +00:00
3 changed files with 80 additions and 1 deletions

View File

@@ -317,6 +317,11 @@
<input id="new-tab-page-url" type="url" placeholder="about:newtab" />
</div>
<div class="card-group">
<label for="default-zoom-level">Default Zoom Level</label>
<select id="default-zoom-level"></select>
</div>
<hr />
<div class="card-group inline-container">
@@ -345,7 +350,9 @@
<div class="card-group">
<label for="autocomplete-engine">Search Suggestions</label>
<p class="description">Select the engine that will provide search suggestions.</p>
<p class="description">
Select the engine that will provide search suggestions.
</p>
<select id="autocomplete-engine">
<option value="">Disable search suggestions</option>
<hr />
@@ -509,6 +516,7 @@
};
</script>
<script src="resource://ladybird/about-pages/settings/default-zoom-level.js" type="module"></script>
<script src="resource://ladybird/about-pages/settings/languages.js" type="module"></script>
<script src="resource://ladybird/about-pages/settings/network.js" type="module"></script>
<script src="resource://ladybird/about-pages/settings/new-tab-page.js" type="module"></script>

View File

@@ -0,0 +1,70 @@
const defaultZoomLevelDropdown = document.querySelector("#default-zoom-level");
const zoomLevelFactors = [
1 / 3.0,
0.5,
2 / 3.0,
0.75,
0.8,
0.9,
1.0,
1.1,
1.25,
1.5,
1.75,
2.0,
2.5,
3.0,
4.0,
5.0,
];
const zoomLevelFactorMap = zoomLevelFactors.map(factor => ({
factor,
label: `${Math.round(factor * 100)}%`,
}));
function snapToClosestFactor(value, factorMap) {
const tolerance = 0.001;
let closest = factorMap[0].factor;
let minDiff = Math.abs(value - closest);
for (const item of factorMap) {
const diff = Math.abs(value - item.factor);
if (diff < minDiff) {
minDiff = diff;
closest = item.factor;
}
}
return minDiff <= tolerance ? closest : null;
}
const loadSettings = settings => {
defaultZoomLevelDropdown.innerHTML = "";
zoomLevelFactorMap.forEach(item => {
const zoomLevelOption = document.createElement("option");
zoomLevelOption.textContent = item.label;
zoomLevelOption.value = item.factor.toString();
defaultZoomLevelDropdown.appendChild(zoomLevelOption);
});
const snapped = snapToClosestFactor(settings.defaultZoomLevelFactor, zoomLevelFactorMap);
if (snapped !== null) {
defaultZoomLevelDropdown.value = snapped.toString();
} else {
console.warn("No close match found for zoom factor: ", settings.defaultZoomLevelFactor);
}
};
defaultZoomLevelDropdown.addEventListener("change", () => {
ladybird.sendMessage("setDefaultZoomLevelFactor", parseFloat(defaultZoomLevelDropdown.value));
});
document.addEventListener("WebUIMessage", event => {
if (event.detail.name === "loadSettings") {
loadSettings(event.detail.data);
}
});