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

LibWebView: Add language settings to about:settings

Browse source 
This implements a setting to change the languages provided to websites
from `navigator.language(s)` and the `Accept-Language` header. Whereas
the existing Qt settings dialog allows users to type their language of
choice, this setting allows users to select from a predefined list of
languages. They may choose any number of languages and their preferred
order.

This patch only implements the persisted settings and their UI. It does
not integrate the choses languages into the WebContent process.
This commit is contained in:
Timothy Flynn 2025-04-03 13:42:39 -04:00
parent dc9aafad3b
commit c3a58c95ce
8 changed files with 466 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -215,6 +215,17 @@
opacity: 1;
}
dialog .dialog-button:disabled {
opacity: 0.3;
}
dialog .dialog-description {
margin-bottom: 10px;
font-size: 14px;
opacity: 0.7;
}
dialog .dialog-list {
outline: 1px solid var(--border-color);
border-radius: 4px;
@ -256,7 +267,13 @@
gap: 10px;
}
dialog .dialog-controls input {
dialog .dialog-controls button svg {
width: 16px;
height: 16px;
}
dialog .dialog-controls input,
dialog .dialog-controls select {
flex-grow: 1;
}
@ -288,6 +305,13 @@
<label for="new-tab-page-url">New Tab Page URL</label>
<input id="new-tab-page-url" type="url" placeholder="about:newtab" />
</div>
<hr />
<div class="card-group permission-container">
<span>Languages</span>
<button id="languages-settings" class="secondary-button">Settings...</button>
</div>
</div>
</div>
@ -349,6 +373,25 @@
<button id="restore-defaults" class="primary-button">Restore&nbsp;Defaults</button>
</div>
<dialog id="languages-dialog">
<div class="dialog-header">
<h3 class="dialog-title">Languages</h3>
<button id="languages-close" class="close-button dialog-button">&times;</button>
</div>
<div class="dialog-body">
<p class="dialog-description">
Choose languages for websites in order of preference
</p>
<div id="languages-list" class="dialog-list"></div>
<div class="dialog-controls">
<select id="languages-select">
<option value="">Select a language to add...</option>
</select>
<button id="languages-add" class="primary-button" disabled>Add</button>
</div>
</div>
</dialog>
<dialog id="site-settings">
<div class="dialog-header">
<h3 id="site-settings-title" class="dialog-title"></h3>
@ -374,8 +417,16 @@
</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 searchToggle = document.querySelector("#search-toggle");
const searchEngine = document.querySelector("#search-engine");
const autocompleteToggle = document.querySelector("#autocomplete-toggle");
@ -392,6 +443,13 @@
const doNotTrackToggle = document.querySelector("#do-not-track-toggle");
const restoreDefaults = document.querySelector("#restore-defaults");
// FIXME: When we support per-glyph font fallbacks, replace these SVGs with analogous code points.
// https://github.com/LadybirdBrowser/ladybird/issues/864
const upwardArrowSVG =
'<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="18 15 12 9 6 15"></polyline></svg>';
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 = {};
const loadSettings = settings => {
@ -403,6 +461,10 @@
newTabPageURL.classList.remove("error");
newTabPageURL.value = window.settings.newTabPageURL;
if (languagesDialog.open) {
showLanguages();
}
const renderEngineSettings = (type, setting) => {
const [name, toggle, engine] = engineForType(type);
@ -445,6 +507,137 @@
}, 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,
@ -633,26 +826,32 @@
// FIXME: Once we support `dialog::backdrop`, this event listener should be on `siteSettings`.
document.addEventListener("click", event => {
if (!siteSettings.open) {
return;
}
const close = dialog => {
if (!dialog.open) {
return;
}
const rect = siteSettings.getBoundingClientRect();
const rect = dialog.getBoundingClientRect();
if (
event.clientX < rect.left ||
event.clientX > rect.right ||
event.clientY < rect.top ||
event.clientY > rect.bottom
) {
siteSettings.close();
}
if (
event.clientX < rect.left ||
event.clientX > rect.right ||
event.clientY < rect.top ||
event.clientY > rect.bottom
) {
dialog.close();
}
};
close(languagesDialog);
close(siteSettings);
});
document.addEventListener("WebUILoaded", () => {
ladybird.sendMessage("loadAvailableEngines");
ladybird.sendMessage("loadCurrentSettings");
ladybird.sendMessage("loadForciblyEnabledSiteSettings");
loadLanguages();
});
document.addEventListener("WebUIMessage", event => {

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

@ -0,0 +1,177 @@
// 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 display = new Intl.DisplayNames([], { type: "language", languageDisplay: "standard" });
const language = languageID => {
return {
language: languageID,
displayName: display.of(languageID),
};
};
const languages = [
language("af"),
language("ak"),
language("am"),
language("ar"),
language("as"),
language("ast"),
language("az"),
language("be"),
language("bg"),
language("bm"),
language("bn"),
language("br"),
language("bs"),
language("ca"),
language("cs"),
language("cy"),
language("da"),
language("de"),
language("de-AT"),
language("de-CH"),
language("de-DE"),
language("de-LI"),
language("ee"),
language("el"),
language("en"),
language("en-AU"),
language("en-CA"),
language("en-GB"),
language("en-IE"),
language("en-NZ"),
language("en-US"),
language("en-ZA"),
language("eo"),
language("es"),
language("es-AR"),
language("es-CL"),
language("es-CO"),
language("es-CR"),
language("es-ES"),
language("es-HN"),
language("es-MX"),
language("es-PE"),
language("es-UY"),
language("es-VE"),
language("et"),
language("eu"),
language("fa"),
language("fi"),
language("fo"),
language("fr"),
language("fr-CA"),
language("fr-CH"),
language("fr-FR"),
language("fy"),
language("ga"),
language("gd"),
language("gl"),
language("gu"),
language("ha"),
language("haw"),
language("he"),
language("hi"),
language("hr"),
language("hu"),
language("hy"),
language("ia"),
language("id"),
language("ig"),
language("is"),
language("it"),
language("it-CH"),
language("ja"),
language("jv"),
language("ka"),
language("kk"),
language("km"),
language("kn"),
language("ko"),
language("kok"),
language("ku"),
language("ky"),
language("lb"),
language("lg"),
language("ln"),
language("lo"),
language("lt"),
language("lv"),
language("mai"),
language("mg"),
language("mi"),
language("mk"),
language("ml"),
language("mn"),
language("mr"),
language("ms"),
language("mt"),
language("my"),
language("nb"),
language("ne"),
language("nl"),
language("nn"),
language("no"),
language("nso"),
language("oc"),
language("om"),
language("or"),
language("pa"),
language("pl"),
language("ps"),
language("pt"),
language("pt-BR"),
language("pt-PT"),
language("qu"),
language("rm"),
language("ro"),
language("ru"),
language("rw"),
language("sa"),
language("sd"),
language("si"),
language("sk"),
language("sl"),
language("so"),
language("sq"),
language("sr"),
language("st"),
language("su"),
language("sv"),
language("sw"),
language("ta"),
language("te"),
language("tg"),
language("th"),
language("ti"),
language("tk"),
language("tn"),
language("to"),
language("tr"),
language("tt"),
language("ug"),
language("uk"),
language("ur"),
language("uz"),
language("vi"),
language("wo"),
language("xh"),
language("yi"),
language("yo"),
language("zh"),
language("zh-CN"),
language("zh-HK"),
language("zh-TW"),
language("zu"),
];
languages.sort((lhs, rhs) => {
return lhs.displayName.localeCompare(rhs.displayName);
});
return languages;
})();

4
Base/res/ladybird/ladybird.css
View file

@ -114,6 +114,10 @@ button.primary-button:active {
background-color: var(--violet-900);
}
button.primary-button:disabled {
background-color: var(--violet-60);
}
button.secondary-button {
background-color: var(--secondary-button-color);
}

46
Libraries/LibWebView/Settings.cpp
View file

@ -14,6 +14,7 @@
#include <LibCore/File.h>
#include <LibCore/StandardPaths.h>
#include <LibURL/Parser.h>
#include <LibUnicode/Locale.h>
#include <LibWebView/Application.h>
#include <LibWebView/Settings.h>
@ -21,6 +22,9 @@ namespace WebView {
static constexpr auto new_tab_page_url_key = "newTabPageURL"sv;
static constexpr auto languages_key = "languages"sv;
static auto default_language = "en"_string;
static constexpr auto search_engine_key = "searchEngine"sv;
static constexpr auto search_engine_name_key = "name"sv;
@ -81,6 +85,9 @@ Settings Settings::create(Badge<Application>)
settings.m_new_tab_page_url = parsed_new_tab_page_url.release_value();
}
if (auto languages = settings_json.value().get(languages_key); languages.has_value())
settings.m_languages = parse_json_languages(*languages);
if (auto search_engine = settings_json.value().get_object(search_engine_key); search_engine.has_value()) {
if (auto search_engine_name = search_engine->get_string(search_engine_name_key); search_engine_name.has_value())
settings.m_search_engine = find_search_engine_by_name(*search_engine_name);
@ -120,6 +127,7 @@ Settings Settings::create(Badge<Application>)
Settings::Settings(ByteString settings_path)
: m_settings_path(move(settings_path))
, m_new_tab_page_url(URL::about_newtab())
, m_languages({ default_language })
{
}
@ -128,6 +136,14 @@ JsonValue Settings::serialize_json() const
JsonObject settings;
settings.set(new_tab_page_url_key, m_new_tab_page_url.serialize());
JsonArray languages;
languages.ensure_capacity(m_languages.size());
for (auto const& language : m_languages)
languages.must_append(language);
settings.set(languages_key, move(languages));
if (m_search_engine.has_value()) {
JsonObject search_engine;
search_engine.set(search_engine_name_key, m_search_engine->name);
@ -166,6 +182,7 @@ JsonValue Settings::serialize_json() const
void Settings::restore_defaults()
{
m_new_tab_page_url = URL::about_newtab();
m_languages = { default_language };
m_search_engine.clear();
m_autocomplete_engine.clear();
m_autoplay = SiteSetting {};
@ -175,6 +192,7 @@ void Settings::restore_defaults()
for (auto& observer : m_observers) {
observer.new_tab_page_url_changed();
observer.languages_changed();
observer.search_engine_changed();
observer.autocomplete_engine_changed();
observer.autoplay_settings_changed();
@ -191,6 +209,34 @@ void Settings::set_new_tab_page_url(URL::URL new_tab_page_url)
observer.new_tab_page_url_changed();
}
Vector<String> Settings::parse_json_languages(JsonValue const& languages)
{
if (!languages.is_array())
return { default_language };
Vector<String> parsed_languages;
parsed_languages.ensure_capacity(languages.as_array().size());
languages.as_array().for_each([&](JsonValue const& language) {
if (language.is_string() && Unicode::is_locale_available(language.as_string()))
parsed_languages.append(language.as_string());
});
if (parsed_languages.is_empty())
return { default_language };
return parsed_languages;
}
void Settings::set_languages(Vector<String> languages)
{
m_languages = move(languages);
persist_settings();
for (auto& observer : m_observers)
observer.languages_changed();
}
void Settings::set_search_engine(Optional<StringView> search_engine_name)
{
if (search_engine_name.has_value())

6
Libraries/LibWebView/Settings.h
View file

@ -35,6 +35,7 @@ public:
virtual ~SettingsObserver();
virtual void new_tab_page_url_changed() { }
virtual void languages_changed() { }
virtual void search_engine_changed() { }
virtual void autocomplete_engine_changed() { }
virtual void autoplay_settings_changed() { }
@ -52,6 +53,10 @@ public:
URL::URL const& new_tab_page_url() const { return m_new_tab_page_url; }
void set_new_tab_page_url(URL::URL);
static Vector<String> parse_json_languages(JsonValue const&);
Vector<String> const& languages() const { return m_languages; }
void set_languages(Vector<String>);
Optional<SearchEngine> const& search_engine() const { return m_search_engine; }
void set_search_engine(Optional<StringView> search_engine_name);
@ -78,6 +83,7 @@ private:
ByteString m_settings_path;
URL::URL m_new_tab_page_url;
Vector<String> m_languages;
Optional<SearchEngine> m_search_engine;
Optional<AutocompleteEngine> m_autocomplete_engine;
SiteSetting m_autoplay;

11
Libraries/LibWebView/WebUI/SettingsUI.cpp
View file

@ -24,6 +24,9 @@ void SettingsUI::register_interfaces()
register_interface("setNewTabPageURL"sv, [this](auto const& data) {
set_new_tab_page_url(data);
});
register_interface("setLanguages"sv, [this](auto const& data) {
set_languages(data);
});
register_interface("loadAvailableEngines"sv, [this](auto const&) {
load_available_engines();
@ -80,6 +83,14 @@ void SettingsUI::set_new_tab_page_url(JsonValue const& new_tab_page_url)
WebView::Application::settings().set_new_tab_page_url(parsed_new_tab_page_url.release_value());
}
void SettingsUI::set_languages(JsonValue const& languages)
{
auto parsed_languages = Settings::parse_json_languages(languages);
WebView::Application::settings().set_languages(move(parsed_languages));
load_current_settings();
}
void SettingsUI::load_available_engines()
{
JsonArray search_engines;

1
Libraries/LibWebView/WebUI/SettingsUI.h
View file

@ -20,6 +20,7 @@ private:
void restore_default_settings();
void set_new_tab_page_url(JsonValue const&);
void set_languages(JsonValue const&);
void load_available_engines();
void set_search_engine(JsonValue const&);

9
UI/cmake/ResourceFiles.cmake
View file

@ -74,6 +74,11 @@ set(ABOUT_PAGES
)
list(TRANSFORM ABOUT_PAGES PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/ladybird/about-pages/")
set(ABOUT_SETTINGS_RESOURCES
languages.js
)
list(TRANSFORM ABOUT_SETTINGS_RESOURCES PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/ladybird/about-pages/settings/")
set(WEB_TEMPLATES
directory.html
error.html
@ -170,6 +175,10 @@ function(copy_resources_to_build base_directory bundle_target)
DESTINATION ${base_directory} TARGET ${bundle_target}
)
copy_resource_set(ladybird/about-pages/settings RESOURCES ${ABOUT_SETTINGS_RESOURCES}
DESTINATION ${base_directory} TARGET ${bundle_target}
)
copy_resource_set(ladybird/templates RESOURCES ${WEB_TEMPLATES}
DESTINATION ${base_directory} TARGET ${bundle_target}
)