mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-24 21:45:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWebView: Split about:settings into modules

Browse source 
The about:settings page has gotten beefy enough that it is a bit of a
paint to manage in a single HTML file. This patch breaks the settings
into several modules to make this page easier to mantain.

Modules have some nice benefits over classic scripts, such as enabling
strict mode by default, and allowing each module to function without
polluting the global object.
This commit is contained in:
Timothy Flynn 2025-04-23 11:49:53 -04:00 • committed by Tim Flynn
parent 6a6c56aabe
commit 234c07adc9
Notes: github-actions[bot] 2025-04-23 23:59:53 +00:00
8 changed files with 694 additions and 616 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

624
Base/res/ladybird/about-pages/settings.html
View file

@ -500,45 +500,7 @@
</div>
</dialog>
<script src="resource://ladybird/about-pages/settings/languages.js"></script>
<script>
const newTabPageURL = document.querySelector("#new-tab-page-url");
const languagesAdd = document.querySelector("#languages-add");
const languagesClose = document.querySelector("#languages-close");
const languagesDialog = document.querySelector("#languages-dialog");
const languagesList = document.querySelector("#languages-list");
const languagesSelect = document.querySelector("#languages-select");
const languagesSettings = document.querySelector("#languages-settings");
const searchClose = document.querySelector("#search-close");
const searchCustomAdd = document.querySelector("#search-custom-add");
const searchCustomName = document.querySelector("#search-custom-name");
const searchCustomURL = document.querySelector("#search-custom-url");
const searchDialog = document.querySelector("#search-dialog");
const searchEngine = document.querySelector("#search-engine");
const searchList = document.querySelector("#search-list");
const searchSettings = document.querySelector("#search-settings");
const searchToggle = document.querySelector("#search-toggle");
const autocompleteEngine = document.querySelector("#autocomplete-engine");
const autocompleteToggle = document.querySelector("#autocomplete-toggle");
const autoplaySettings = document.querySelector("#autoplay-settings");
const siteSettings = document.querySelector("#site-settings");
const siteSettingsAdd = document.querySelector("#site-settings-add");
const siteSettingsClose = document.querySelector("#site-settings-close");
const siteSettingsGlobal = document.querySelector("#site-settings-global");
const siteSettingsList = document.querySelector("#site-settings-list");
const siteSettingsInput = document.querySelector("#site-settings-input");
const siteSettingsRemoveAll = document.querySelector("#site-settings-remove-all");
const siteSettingsTitle = document.querySelector("#site-settings-title");
const doNotTrackToggle = document.querySelector("#do-not-track-toggle");
const restoreDefaults = document.querySelector("#restore-defaults");
const dnsUpstream = document.querySelector("#dns-upstream");
const dnsServer = document.querySelector("#dns-server");
const dnsPort = document.querySelector("#dns-port");
const dnsType = document.querySelector("#dns-type");
const customDnsSettings = document.querySelector("#custom-dns-settings");
const dnsForciblyEnabled = document.querySelector("#dns-forcibly-enabled");
// FIXME: When we support per-glyph font fallbacks, replace these SVGs with analogous code points.
// https://github.com/LadybirdBrowser/ladybird/issues/864
const upwardArrowSVG =
@ -546,572 +508,20 @@
const downwardArrowSVG =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
window.settings = {};
window.nativeSearchEngineCount = 0;
const loadSettings = settings => {
window.settings = settings;
renderSettings();
};
const renderSettings = () => {
newTabPageURL.classList.remove("error");
newTabPageURL.value = window.settings.newTabPageURL;
if (languagesDialog.open) {
showLanguages();
}
const renderEngineSettings = (type, setting) => {
const [name, toggle, engine] = engineForType(type);
if (setting?.name) {
toggle.checked = true;
engine.value = setting?.name;
} else {
toggle.checked = false;
}
renderEngine(type);
};
loadCustomSearchEngines();
renderEngineSettings(Engine.search, window.settings.searchEngine);
renderEngineSettings(Engine.autocomplete, window.settings.autocompleteEngine);
if (searchDialog.open) {
showSearchEngineSettings();
}
const siteSetting = currentSiteSetting();
if (siteSetting === "autoplay") {
showSiteSettings("Autoplay", window.settings.autoplay);
}
doNotTrackToggle.checked = window.settings.doNotTrack;
loadDnsSettings(window.settings.dnsSettings);
};
const containsValidURL = input => {
return input.value.length !== 0 && input.checkValidity();
};
</script>
newTabPageURL.addEventListener("change", () => {
newTabPageURL.classList.remove("success");
newTabPageURL.classList.remove("error");
<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>
<script src="resource://ladybird/about-pages/settings/permissions.js" type="module"></script>
<script src="resource://ladybird/about-pages/settings/privacy.js" type="module"></script>
<script src="resource://ladybird/about-pages/settings/search.js" type="module"></script>
if (!containsValidURL(newTabPageURL)) {
newTabPageURL.classList.add("error");
return;
}
ladybird.sendMessage("setNewTabPageURL", newTabPageURL.value);
newTabPageURL.classList.add("success");
setTimeout(() => {
newTabPageURL.classList.remove("success");
}, 1000);
});
const languageDisplayName = language => {
const item = window.languages.find(item => item.language === language);
return item.displayName;
};
const saveLanguages = () => {
ladybird.sendMessage("setLanguages", window.settings.languages);
};
const moveLanguage = (from, to) => {
[window.settings.languages[from], window.settings.languages[to]] = [
window.settings.languages[to],
window.settings.languages[from],
];
saveLanguages();
};
const removeLanguage = index => {
window.settings.languages.splice(index, 1);
saveLanguages();
};
const loadLanguages = () => {
for (const language of window.languages) {
const option = document.createElement("option");
option.text = language.displayName;
option.value = language.language;
languagesSelect.add(option);
}
};
const showLanguages = () => {
languagesList.innerHTML = "";
window.settings.languages.forEach((language, index) => {
const name = document.createElement("span");
name.className = "dialog-list-item-label";
name.textContent = languageDisplayName(language);
const moveUp = document.createElement("button");
moveUp.className = "dialog-button";
moveUp.innerHTML = upwardArrowSVG;
moveUp.title = "Move up";
if (index === 0) {
moveUp.disabled = true;
} else {
moveUp.addEventListener("click", () => {
moveLanguage(index, index - 1);
});
}
const moveDown = document.createElement("button");
moveDown.className = "dialog-button";
moveDown.innerHTML = downwardArrowSVG;
moveDown.title = "Move down";
if (index === window.settings.languages.length - 1) {
moveDown.disabled = true;
} else {
moveDown.addEventListener("click", () => {
moveLanguage(index, index + 1);
});
}
const remove = document.createElement("button");
remove.className = "dialog-button";
remove.innerHTML = "&times;";
remove.title = "Remove";
if (window.settings.languages.length <= 1) {
remove.disabled = true;
} else {
remove.addEventListener("click", () => {
removeLanguage(index);
});
}
const controls = document.createElement("div");
controls.className = "dialog-controls";
controls.appendChild(moveUp);
controls.appendChild(moveDown);
controls.appendChild(remove);
const item = document.createElement("div");
item.className = "dialog-list-item";
item.appendChild(name);
item.appendChild(controls);
languagesList.appendChild(item);
});
for (const language of languagesSelect.options) {
language.disabled = window.settings.languages.includes(language.value);
}
if (!languagesDialog.open) {
setTimeout(() => languagesSelect.focus());
languagesDialog.showModal();
}
};
languagesAdd.addEventListener("click", () => {
const language = languagesSelect.value;
languagesAdd.disabled = true;
languagesSelect.selectedIndex = 0;
if (!language || window.settings.languages.includes(language)) {
return;
}
window.settings.languages.push(language);
saveLanguages();
});
languagesClose.addEventListener("click", () => {
languagesDialog.close();
});
languagesSelect.addEventListener("change", () => {
languagesAdd.disabled = !languagesSelect.value;
});
languagesSettings.addEventListener("click", event => {
showLanguages();
event.stopPropagation();
});
const Engine = Object.freeze({
search: 1,
autocomplete: 2,
});
const engineForType = engine => {
if (engine === Engine.search) {
return ["Search", searchToggle, searchEngine];
}
if (engine === Engine.autocomplete) {
return ["Autocomplete", autocompleteToggle, autocompleteEngine];
}
throw Error(`Unrecognized engine type ${engine}`);
};
const loadEngines = (type, engines) => {
const [name, toggle, engine] = engineForType(type);
for (const engineName of engines) {
const option = document.createElement("option");
option.text = engineName;
option.value = engineName;
engine.add(option);
}
if (type === Engine.search) {
window.nativeSearchEngineCount = engine.length;
engine.appendChild(document.createElement("hr"));
}
};
const renderEngine = type => {
const [name, toggle, engine] = engineForType(type);
if (toggle.checked) {
engine.closest(".card-group").classList.remove("hidden");
} else {
engine.closest(".card-group").classList.add("hidden");
}
if (toggle.checked && engine.selectedIndex !== 0) {
engine.item(0).disabled = true;
} else if (!toggle.checked) {
engine.item(0).disabled = false;
engine.selectedIndex = 0;
}
};
const saveEngine = type => {
const [name, toggle, engine] = engineForType(type);
if (toggle.checked && engine.selectedIndex !== 0) {
ladybird.sendMessage(`set${name}Engine`, engine.value);
} else if (!toggle.checked) {
ladybird.sendMessage(`set${name}Engine`, null);
}
renderEngine(type);
};
const setSaveEngineListeners = type => {
const [name, toggle, engine] = engineForType(type);
toggle.addEventListener("change", () => {
saveEngine(type);
});
engine.addEventListener("change", () => {
saveEngine(type);
});
};
setSaveEngineListeners(Engine.search);
setSaveEngineListeners(Engine.autocomplete);
const loadCustomSearchEngines = () => {
while (searchEngine.length > window.nativeSearchEngineCount) {
searchEngine.remove(window.nativeSearchEngineCount);
}
const custom = window.settings.searchEngine?.custom || [];
custom.forEach(custom => {
const option = document.createElement("option");
option.text = custom.name;
option.value = custom.name;
searchEngine.add(option);
});
};
const showSearchEngineSettings = () => {
searchCustomName.classList.remove("error");
searchCustomURL.classList.remove("error");
searchList.innerHTML = "";
const custom = window.settings.searchEngine?.custom || [];
if (custom.length === 0) {
const placeholder = document.createElement("div");
placeholder.className = "dialog-list-item-placeholder";
placeholder.textContent = "No custom search engines added";
searchList.appendChild(placeholder);
}
custom.forEach(custom => {
const name = document.createElement("span");
name.textContent = custom.name;
const url = document.createElement("span");
url.className = "dialog-list-item-placeholder";
url.style = "padding-left: 0";
url.textContent = ` — ${custom.url}`;
const engine = document.createElement("span");
engine.className = "dialog-list-item-label";
engine.appendChild(name);
engine.appendChild(url);
const remove = document.createElement("button");
remove.className = "dialog-button";
remove.innerHTML = "&times;";
remove.title = `Remove ${custom.name}`;
remove.addEventListener("click", () => {
ladybird.sendMessage("removeCustomSearchEngine", custom);
});
const item = document.createElement("div");
item.className = "dialog-list-item";
item.appendChild(engine);
item.appendChild(remove);
searchList.appendChild(item);
});
if (!searchDialog.open) {
setTimeout(() => searchCustomName.focus());
searchDialog.showModal();
}
};
const addCustomSearchEngine = () => {
searchCustomName.classList.remove("error");
searchCustomURL.classList.remove("error");
for (const i = 0; i < searchEngine.length; ++i) {
if (searchCustomName.value === searchEngine.item(i).value) {
searchCustomName.classList.add("error");
return;
}
}
if (!containsValidURL(searchCustomURL)) {
searchCustomURL.classList.add("error");
return;
}
ladybird.sendMessage("addCustomSearchEngine", {
name: searchCustomName.value,
url: searchCustomURL.value,
});
searchCustomName.value = "";
searchCustomURL.value = "";
setTimeout(() => searchCustomName.focus());
};
searchCustomAdd.addEventListener("click", addCustomSearchEngine);
searchCustomName.addEventListener("keydown", event => {
if (event.key === "Enter") {
addCustomSearchEngine();
}
});
searchCustomURL.addEventListener("keydown", event => {
if (event.key === "Enter") {
addCustomSearchEngine();
}
});
searchClose.addEventListener("click", () => {
searchDialog.close();
});
searchSettings.addEventListener("click", event => {
showSearchEngineSettings();
event.stopPropagation();
});
const forciblyEnableSiteSettings = settings => {
settings.forEach(setting => {
const label = document.querySelector(`#${setting}-forcibly-enabled`);
label.classList.remove("hidden");
const button = document.querySelector(`#${setting}-settings`);
button.classList.add("hidden");
});
};
const currentSiteSetting = () => {
if (!siteSettings.open) {
return null;
}
return siteSettingsTitle.innerText.toLowerCase();
};
const showSiteSettings = (title, settings) => {
siteSettingsTitle.innerText = title;
siteSettingsGlobal.checked = settings.enabledGlobally;
siteSettingsList.innerHTML = "";
siteSettingsGlobal.onchange = () => {
ladybird.sendMessage("setSiteSettingEnabledGlobally", {
setting: currentSiteSetting(),
enabled: siteSettingsGlobal.checked,
});
};
if (settings.siteFilters.length === 0) {
const placeholder = document.createElement("div");
placeholder.className = "dialog-list-item-placeholder";
placeholder.textContent = "No sites added";
siteSettingsList.appendChild(placeholder);
}
settings.siteFilters.forEach(site => {
const filter = document.createElement("span");
filter.className = "dialog-list-item-label";
filter.textContent = site;
const remove = document.createElement("button");
remove.className = "dialog-button";
remove.innerHTML = "&times;";
remove.title = `Remove ${site}`;
remove.addEventListener("click", () => {
ladybird.sendMessage("removeSiteSettingFilter", {
setting: currentSiteSetting(),
filter: site,
});
});
const item = document.createElement("div");
item.className = "dialog-list-item";
item.appendChild(filter);
item.appendChild(remove);
siteSettingsList.appendChild(item);
});
if (!siteSettings.open) {
setTimeout(() => siteSettingsInput.focus());
siteSettings.showModal();
}
};
const addSiteSettingFilter = () => {
ladybird.sendMessage("addSiteSettingFilter", {
setting: currentSiteSetting(),
filter: siteSettingsInput.value,
});
siteSettingsInput.classList.add("success");
siteSettingsInput.value = "";
setTimeout(() => {
siteSettingsInput.classList.remove("success");
}, 1000);
setTimeout(() => siteSettingsInput.focus());
};
siteSettingsAdd.addEventListener("click", addSiteSettingFilter);
siteSettingsInput.addEventListener("keydown", event => {
if (event.key === "Enter") {
addSiteSettingFilter();
}
});
siteSettingsClose.addEventListener("click", () => {
siteSettings.close();
});
siteSettingsRemoveAll.addEventListener("click", () => {
ladybird.sendMessage("removeAllSiteSettingFilters", {
setting: currentSiteSetting(),
});
});
// DNS settings
const loadDnsSettings = settings => {
dnsUpstream.value = settings.mode;
if (settings.mode === "custom") {
dnsServer.value = settings.server;
dnsPort.value = settings.port;
dnsType.value = settings.type;
customDnsSettings.classList.remove("hidden");
} else {
dnsServer.value = "";
dnsType.value = "udp";
dnsPort.value = "53";
customDnsSettings.classList.add("hidden");
}
if (settings.forciblyEnabled) {
dnsForciblyEnabled.classList.remove("hidden");
dnsUpstream.setAttribute("disabled", "");
dnsServer.setAttribute("disabled", "");
dnsPort.setAttribute("disabled", "");
dnsType.setAttribute("disabled", "");
} else {
dnsForciblyEnabled.classList.add("hidden");
dnsUpstream.removeAttribute("disabled");
dnsServer.removeAttribute("disabled");
dnsPort.removeAttribute("disabled");
dnsType.removeAttribute("disabled");
}
};
dnsUpstream.addEventListener("change", () => {
if (dnsUpstream.value === "custom") {
customDnsSettings.classList.remove("hidden");
if (dnsServer.value !== "" && dnsPort.value !== "") {
updateDnsSettings();
}
} else {
customDnsSettings.classList.add("hidden");
ladybird.sendMessage("setDNSSettings", { mode: "system" });
}
});
function updateDnsSettings() {
if (dnsUpstream.value === "custom") {
dnsPort.placeholder = dnsType.value === "tls" ? "853" : "53";
if ((dnsPort.value | 0) === 0) dnsPort.value = dnsPort.placeholder;
const settings = {
mode: "custom",
server: dnsServer.value,
port: dnsPort.value | 0,
type: dnsType.value,
};
ladybird.sendMessage("setDNSSettings", settings);
}
}
dnsServer.addEventListener("change", updateDnsSettings);
dnsPort.addEventListener("change", updateDnsSettings);
dnsType.addEventListener("change", updateDnsSettings);
autoplaySettings.addEventListener("click", event => {
showSiteSettings("Autoplay", window.settings.autoplay);
event.stopPropagation();
});
doNotTrackToggle.addEventListener("change", () => {
ladybird.sendMessage("setDoNotTrack", doNotTrackToggle.checked);
});
<script type="module">
const restoreDefaults = document.querySelector("#restore-defaults");
restoreDefaults.addEventListener("click", () => {
ladybird.sendMessage("restoreDefaultSettings");
@ -1134,23 +544,7 @@
);
document.addEventListener("WebUILoaded", () => {
ladybird.sendMessage("loadAvailableEngines");
ladybird.sendMessage("loadCurrentSettings");
ladybird.sendMessage("loadForciblyEnabledSiteSettings");
loadLanguages();
});
document.addEventListener("WebUIMessage", event => {
if (event.detail.name === "loadSettings") {
loadSettings(event.detail.data);
} else if (event.detail.name === "loadEngines") {
loadEngines(Engine.search, event.detail.data.search);
loadEngines(Engine.autocomplete, event.detail.data.autocomplete);
} else if (event.detail.name === "forciblyEnableSiteSettings") {
forciblyEnableSiteSettings(event.detail.data);
} else if (event.detail.name === "loadDNSSettings") {
loadDnsSettings(event.detail.data);
}
});
</script>
</body>

156
Base/res/ladybird/about-pages/settings/languages.js
View file

@ -1,9 +1,163 @@
const languagesAdd = document.querySelector("#languages-add");
const languagesClose = document.querySelector("#languages-close");
const languagesDialog = document.querySelector("#languages-dialog");
const languagesList = document.querySelector("#languages-list");
const languagesSelect = document.querySelector("#languages-select");
const languagesSettings = document.querySelector("#languages-settings");
let LANGUAGES = {};
function loadSettings(settings) {
LANGUAGES = settings.languages;
if (languagesDialog.open) {
showLanguages();
}
}
function languageDisplayName(language) {
const item = AVAILABLE_LANGUAGES.find(item => item.language === language);
return item.displayName;
}
function saveLanguages() {
ladybird.sendMessage("setLanguages", LANGUAGES);
}
function moveLanguage(from, to) {
[LANGUAGES[from], LANGUAGES[to]] = [LANGUAGES[to], LANGUAGES[from]];
saveLanguages();
}
function removeLanguage(index) {
LANGUAGES.splice(index, 1);
saveLanguages();
}
function loadLanguages() {
for (const language of AVAILABLE_LANGUAGES) {
const option = document.createElement("option");
option.text = language.displayName;
option.value = language.language;
languagesSelect.add(option);
}
}
function showLanguages() {
languagesList.innerHTML = "";
LANGUAGES.forEach((language, index) => {
const name = document.createElement("span");
name.className = "dialog-list-item-label";
name.textContent = languageDisplayName(language);
const moveUp = document.createElement("button");
moveUp.className = "dialog-button";
moveUp.innerHTML = upwardArrowSVG;
moveUp.title = "Move up";
if (index === 0) {
moveUp.disabled = true;
} else {
moveUp.addEventListener("click", () => {
moveLanguage(index, index - 1);
});
}
const moveDown = document.createElement("button");
moveDown.className = "dialog-button";
moveDown.innerHTML = downwardArrowSVG;
moveDown.title = "Move down";
if (index === LANGUAGES.length - 1) {
moveDown.disabled = true;
} else {
moveDown.addEventListener("click", () => {
moveLanguage(index, index + 1);
});
}
const remove = document.createElement("button");
remove.className = "dialog-button";
remove.innerHTML = "&times;";
remove.title = "Remove";
if (LANGUAGES.length <= 1) {
remove.disabled = true;
} else {
remove.addEventListener("click", () => {
removeLanguage(index);
});
}
const controls = document.createElement("div");
controls.className = "dialog-controls";
controls.appendChild(moveUp);
controls.appendChild(moveDown);
controls.appendChild(remove);
const item = document.createElement("div");
item.className = "dialog-list-item";
item.appendChild(name);
item.appendChild(controls);
languagesList.appendChild(item);
});
for (const language of languagesSelect.options) {
language.disabled = LANGUAGES.includes(language.value);
}
if (!languagesDialog.open) {
setTimeout(() => languagesSelect.focus());
languagesDialog.showModal();
}
}
languagesAdd.addEventListener("click", () => {
const language = languagesSelect.value;
languagesAdd.disabled = true;
languagesSelect.selectedIndex = 0;
if (!language || LANGUAGES.includes(language)) {
return;
}
LANGUAGES.push(language);
saveLanguages();
});
languagesClose.addEventListener("click", () => {
languagesDialog.close();
});
languagesSelect.addEventListener("change", () => {
languagesAdd.disabled = !languagesSelect.value;
});
languagesSettings.addEventListener("click", event => {
showLanguages();
event.stopPropagation();
});
document.addEventListener("WebUILoaded", () => {
loadLanguages();
});
document.addEventListener("WebUIMessage", event => {
if (event.detail.name === "loadSettings") {
loadSettings(event.detail.data);
}
});
// Rather than creating a list of all languages supported by ICU (of which there are on the order of a thousand), we
// create a list of languages that are supported by both Chrome and Firefox. We can extend this list as needed.
//
// https://github.com/chromium/chromium/blob/main/ui/base/l10n/l10n_util.cc (see kAcceptLanguageList)
// https://github.com/mozilla/gecko-dev/blob/master/intl/locale/language.properties
window.languages = (() => {
const AVAILABLE_LANGUAGES = (() => {
const display = new Intl.DisplayNames([], { type: "language", languageDisplay: "standard" });
const language = languageID => {

90
Base/res/ladybird/about-pages/settings/network.js Normal file
View file

@ -0,0 +1,90 @@
const customDnsSettings = document.querySelector("#custom-dns-settings");
const dnsForciblyEnabled = document.querySelector("#dns-forcibly-enabled");
const dnsUpstream = document.querySelector("#dns-upstream");
const dnsType = document.querySelector("#dns-type");
const dnsServer = document.querySelector("#dns-server");
const dnsPort = document.querySelector("#dns-port");
let DNS_SETTINGS = {};
function loadSettings(settings) {
DNS_SETTINGS = settings.dnsSettings || {};
loadDnsSettings();
}
function loadDnsSettings() {
dnsUpstream.value = DNS_SETTINGS.mode || "system";
if (dnsUpstream.value === "custom") {
dnsType.value = DNS_SETTINGS.type;
dnsServer.value = DNS_SETTINGS.server;
dnsPort.value = DNS_SETTINGS.port;
customDnsSettings.classList.remove("hidden");
} else {
dnsType.value = "udp";
dnsServer.value = "";
dnsPort.value = "53";
customDnsSettings.classList.add("hidden");
}
if (DNS_SETTINGS.forciblyEnabled) {
dnsForciblyEnabled.classList.remove("hidden");
dnsUpstream.disabled = true;
dnsType.disabled = true;
dnsServer.disabled = true;
dnsPort.disabled = true;
} else {
dnsForciblyEnabled.classList.add("hidden");
dnsUpstream.disabled = false;
dnsType.disabled = false;
dnsServer.disabled = false;
dnsPort.disabled = false;
}
}
dnsUpstream.addEventListener("change", () => {
if (dnsUpstream.value === "custom") {
customDnsSettings.classList.remove("hidden");
if (dnsServer.value.length !== 0 && dnsPort.value.length !== 0) {
updateDnsSettings();
}
} else {
customDnsSettings.classList.add("hidden");
ladybird.sendMessage("setDNSSettings", { mode: "system" });
}
});
function updateDnsSettings() {
if (dnsUpstream.value !== "custom") {
return;
}
dnsPort.placeholder = dnsType.value === "tls" ? "853" : "53";
if ((dnsPort.value || 0) === 0) {
dnsPort.value = dnsPort.placeholder;
}
ladybird.sendMessage("setDNSSettings", {
mode: "custom",
type: dnsType.value,
server: dnsServer.value,
port: dnsPort.value | 0,
});
}
dnsServer.addEventListener("change", updateDnsSettings);
dnsPort.addEventListener("change", updateDnsSettings);
dnsType.addEventListener("change", updateDnsSettings);
document.addEventListener("WebUIMessage", event => {
if (event.detail.name === "loadSettings") {
loadSettings(event.detail.data);
}
});

29
Base/res/ladybird/about-pages/settings/new-tab-page.js Normal file
View file

@ -0,0 +1,29 @@
const newTabPageURL = document.querySelector("#new-tab-page-url");
const loadSettings = settings => {
newTabPageURL.classList.remove("error");
newTabPageURL.value = settings.newTabPageURL;
};
newTabPageURL.addEventListener("change", () => {
newTabPageURL.classList.remove("success");
newTabPageURL.classList.remove("error");
if (!containsValidURL(newTabPageURL)) {
newTabPageURL.classList.add("error");
return;
}
ladybird.sendMessage("setNewTabPageURL", newTabPageURL.value);
newTabPageURL.classList.add("success");
setTimeout(() => {
newTabPageURL.classList.remove("success");
}, 1000);
});
document.addEventListener("WebUIMessage", event => {
if (event.detail.name === "loadSettings") {
loadSettings(event.detail.data);
}
});

142
Base/res/ladybird/about-pages/settings/permissions.js Normal file
View file

@ -0,0 +1,142 @@
const siteSettings = document.querySelector("#site-settings");
const siteSettingsAdd = document.querySelector("#site-settings-add");
const siteSettingsClose = document.querySelector("#site-settings-close");
const siteSettingsGlobal = document.querySelector("#site-settings-global");
const siteSettingsList = document.querySelector("#site-settings-list");
const siteSettingsInput = document.querySelector("#site-settings-input");
const siteSettingsRemoveAll = document.querySelector("#site-settings-remove-all");
const siteSettingsTitle = document.querySelector("#site-settings-title");
const autoplaySettings = document.querySelector("#autoplay-settings");
let AUTOPLAY_SETTINGS = {};
function loadSiteSettings(settings) {
AUTOPLAY_SETTINGS = settings.autoplay;
const siteSetting = currentSiteSetting();
if (siteSetting === "autoplay") {
showSiteSettings("Autoplay", AUTOPLAY_SETTINGS);
}
}
function forciblyEnableSiteSettings(settings) {
settings.forEach(setting => {
const label = document.querySelector(`#${setting}-forcibly-enabled`);
label.classList.remove("hidden");
const button = document.querySelector(`#${setting}-settings`);
button.classList.add("hidden");
});
}
function currentSiteSetting() {
if (!siteSettings.open) {
return null;
}
return siteSettingsTitle.innerText.toLowerCase();
}
function showSiteSettings(title, settings) {
siteSettingsTitle.innerText = title;
siteSettingsGlobal.checked = settings.enabledGlobally;
siteSettingsList.innerHTML = "";
siteSettingsGlobal.onchange = () => {
ladybird.sendMessage("setSiteSettingEnabledGlobally", {
setting: currentSiteSetting(),
enabled: siteSettingsGlobal.checked,
});
};
if (settings.siteFilters.length === 0) {
const placeholder = document.createElement("div");
placeholder.className = "dialog-list-item-placeholder";
placeholder.textContent = "No sites added";
siteSettingsList.appendChild(placeholder);
}
settings.siteFilters.forEach(site => {
const filter = document.createElement("span");
filter.className = "dialog-list-item-label";
filter.textContent = site;
const remove = document.createElement("button");
remove.className = "dialog-button";
remove.innerHTML = "&times;";
remove.title = `Remove ${site}`;
remove.addEventListener("click", () => {
ladybird.sendMessage("removeSiteSettingFilter", {
setting: currentSiteSetting(),
filter: site,
});
});
const item = document.createElement("div");
item.className = "dialog-list-item";
item.appendChild(filter);
item.appendChild(remove);
siteSettingsList.appendChild(item);
});
if (!siteSettings.open) {
setTimeout(() => siteSettingsInput.focus());
siteSettings.showModal();
}
}
function addSiteSettingFilter() {
ladybird.sendMessage("addSiteSettingFilter", {
setting: currentSiteSetting(),
filter: siteSettingsInput.value,
});
siteSettingsInput.classList.add("success");
siteSettingsInput.value = "";
setTimeout(() => {
siteSettingsInput.classList.remove("success");
}, 1000);
setTimeout(() => siteSettingsInput.focus());
}
siteSettingsAdd.addEventListener("click", addSiteSettingFilter);
siteSettingsInput.addEventListener("keydown", event => {
if (event.key === "Enter") {
addSiteSettingFilter();
}
});
siteSettingsClose.addEventListener("click", () => {
siteSettings.close();
});
siteSettingsRemoveAll.addEventListener("click", () => {
ladybird.sendMessage("removeAllSiteSettingFilters", {
setting: currentSiteSetting(),
});
});
autoplaySettings.addEventListener("click", event => {
showSiteSettings("Autoplay", AUTOPLAY_SETTINGS);
event.stopPropagation();
});
document.addEventListener("WebUILoaded", () => {
ladybird.sendMessage("loadForciblyEnabledSiteSettings");
});
document.addEventListener("WebUIMessage", event => {
if (event.detail.name === "loadSettings") {
loadSiteSettings(event.detail.data);
} else if (event.detail.name === "forciblyEnableSiteSettings") {
forciblyEnableSiteSettings(event.detail.data);
}
});

15
Base/res/ladybird/about-pages/settings/privacy.js Normal file
View file

@ -0,0 +1,15 @@
const doNotTrackToggle = document.querySelector("#do-not-track-toggle");
function loadSettings(settings) {
doNotTrackToggle.checked = settings.doNotTrack;
}
doNotTrackToggle.addEventListener("change", () => {
ladybird.sendMessage("setDoNotTrack", doNotTrackToggle.checked);
});
document.addEventListener("WebUIMessage", event => {
if (event.detail.name === "loadSettings") {
loadSettings(event.detail.data);
}
});

249
Base/res/ladybird/about-pages/settings/search.js Normal file
View file

@ -0,0 +1,249 @@
const searchClose = document.querySelector("#search-close");
const searchCustomAdd = document.querySelector("#search-custom-add");
const searchCustomName = document.querySelector("#search-custom-name");
const searchCustomURL = document.querySelector("#search-custom-url");
const searchDialog = document.querySelector("#search-dialog");
const searchEngine = document.querySelector("#search-engine");
const searchList = document.querySelector("#search-list");
const searchSettings = document.querySelector("#search-settings");
const searchToggle = document.querySelector("#search-toggle");
const autocompleteEngine = document.querySelector("#autocomplete-engine");
const autocompleteToggle = document.querySelector("#autocomplete-toggle");
let SEARCH_ENGINE = {};
let AUTOCOMPLETE_ENGINE = {};
let NATIVE_SEARCH_ENGINE_COUNT = 0;
const Engine = Object.freeze({
search: 1,
autocomplete: 2,
});
function loadEngineSettings(settings) {
SEARCH_ENGINE = settings.searchEngine || {};
AUTOCOMPLETE_ENGINE = settings.autocompleteEngine || {};
const renderEngineSettings = (type, setting) => {
const [name, toggle, engine] = engineForType(type);
if (setting.name) {
toggle.checked = true;
engine.value = setting.name;
} else {
toggle.checked = false;
}
renderEngine(type);
};
loadCustomSearchEngines();
renderEngineSettings(Engine.search, SEARCH_ENGINE);
renderEngineSettings(Engine.autocomplete, AUTOCOMPLETE_ENGINE);
if (searchDialog.open) {
showSearchEngineSettings();
}
}
function engineForType(engine) {
if (engine === Engine.search) {
return ["Search", searchToggle, searchEngine];
}
if (engine === Engine.autocomplete) {
return ["Autocomplete", autocompleteToggle, autocompleteEngine];
}
throw Error(`Unrecognized engine type ${engine}`);
}
function loadEngines(type, engines) {
const [name, toggle, engine] = engineForType(type);
for (const engineName of engines) {
const option = document.createElement("option");
option.text = engineName;
option.value = engineName;
engine.add(option);
}
if (type === Engine.search) {
NATIVE_SEARCH_ENGINE_COUNT = engine.length;
engine.appendChild(document.createElement("hr"));
}
}
function renderEngine(type) {
const [name, toggle, engine] = engineForType(type);
if (toggle.checked) {
engine.closest(".card-group").classList.remove("hidden");
} else {
engine.closest(".card-group").classList.add("hidden");
}
if (toggle.checked && engine.selectedIndex !== 0) {
engine.item(0).disabled = true;
} else if (!toggle.checked) {
engine.item(0).disabled = false;
engine.selectedIndex = 0;
}
}
function saveEngine(type) {
const [name, toggle, engine] = engineForType(type);
if (toggle.checked && engine.selectedIndex !== 0) {
ladybird.sendMessage(`set${name}Engine`, engine.value);
} else if (!toggle.checked) {
ladybird.sendMessage(`set${name}Engine`, null);
}
renderEngine(type);
}
function setSaveEngineListeners(type) {
const [name, toggle, engine] = engineForType(type);
toggle.addEventListener("change", () => {
saveEngine(type);
});
engine.addEventListener("change", () => {
saveEngine(type);
});
}
setSaveEngineListeners(Engine.search);
setSaveEngineListeners(Engine.autocomplete);
function loadCustomSearchEngines() {
while (searchEngine.length > NATIVE_SEARCH_ENGINE_COUNT) {
searchEngine.remove(NATIVE_SEARCH_ENGINE_COUNT);
}
const custom = SEARCH_ENGINE.custom || [];
custom.forEach(custom => {
const option = document.createElement("option");
option.text = custom.name;
option.value = custom.name;
searchEngine.add(option);
});
}
function showSearchEngineSettings() {
searchCustomName.classList.remove("error");
searchCustomURL.classList.remove("error");
searchList.innerHTML = "";
const custom = SEARCH_ENGINE.custom || [];
if (custom.length === 0) {
const placeholder = document.createElement("div");
placeholder.className = "dialog-list-item-placeholder";
placeholder.textContent = "No custom search engines added";
searchList.appendChild(placeholder);
}
custom.forEach(custom => {
const name = document.createElement("span");
name.textContent = custom.name;
const url = document.createElement("span");
url.className = "dialog-list-item-placeholder";
url.style = "padding-left: 0";
url.textContent = ` — ${custom.url}`;
const engine = document.createElement("span");
engine.className = "dialog-list-item-label";
engine.appendChild(name);
engine.appendChild(url);
const remove = document.createElement("button");
remove.className = "dialog-button";
remove.innerHTML = "&times;";
remove.title = `Remove ${custom.name}`;
remove.addEventListener("click", () => {
ladybird.sendMessage("removeCustomSearchEngine", custom);
});
const item = document.createElement("div");
item.className = "dialog-list-item";
item.appendChild(engine);
item.appendChild(remove);
searchList.appendChild(item);
});
if (!searchDialog.open) {
setTimeout(() => searchCustomName.focus());
searchDialog.showModal();
}
}
function addCustomSearchEngine() {
searchCustomName.classList.remove("error");
searchCustomURL.classList.remove("error");
for (const i = 0; i < searchEngine.length; ++i) {
if (searchCustomName.value === searchEngine.item(i).value) {
searchCustomName.classList.add("error");
return;
}
}
if (!containsValidURL(searchCustomURL)) {
searchCustomURL.classList.add("error");
return;
}
ladybird.sendMessage("addCustomSearchEngine", {
name: searchCustomName.value,
url: searchCustomURL.value,
});
searchCustomName.value = "";
searchCustomURL.value = "";
setTimeout(() => searchCustomName.focus());
}
searchCustomAdd.addEventListener("click", addCustomSearchEngine);
searchCustomName.addEventListener("keydown", event => {
if (event.key === "Enter") {
addCustomSearchEngine();
}
});
searchCustomURL.addEventListener("keydown", event => {
if (event.key === "Enter") {
addCustomSearchEngine();
}
});
searchClose.addEventListener("click", () => {
searchDialog.close();
});
searchSettings.addEventListener("click", event => {
showSearchEngineSettings();
event.stopPropagation();
});
document.addEventListener("WebUILoaded", () => {
ladybird.sendMessage("loadAvailableEngines");
});
document.addEventListener("WebUIMessage", event => {
if (event.detail.name === "loadSettings") {
loadEngineSettings(event.detail.data);
} else if (event.detail.name === "loadEngines") {
loadEngines(Engine.search, event.detail.data.search);
loadEngines(Engine.autocomplete, event.detail.data.autocomplete);
}
});

5
UI/cmake/ResourceFiles.cmake
View file

@ -76,6 +76,11 @@ list(TRANSFORM ABOUT_PAGES PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/ladybird/abo
set(ABOUT_SETTINGS_RESOURCES
languages.js
network.js
new-tab-page.js
permissions.js
privacy.js
search.js
)
list(TRANSFORM ABOUT_SETTINGS_RESOURCES PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/ladybird/about-pages/settings/")