From c3a58c95ce544380dd72d4219a3d877b80b4a6c1 Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Thu, 3 Apr 2025 13:42:39 -0400
Subject: [PATCH] LibWebView: Add language settings to about:settings

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.
---
 Base/res/ladybird/about-pages/settings.html   | 225 +++++++++++++++++-
 .../about-pages/settings/languages.js         | 177 ++++++++++++++
 Base/res/ladybird/ladybird.css                |   4 +
 Libraries/LibWebView/Settings.cpp             |  46 ++++
 Libraries/LibWebView/Settings.h               |   6 +
 Libraries/LibWebView/WebUI/SettingsUI.cpp     |  11 +
 Libraries/LibWebView/WebUI/SettingsUI.h       |   1 +
 UI/cmake/ResourceFiles.cmake                  |   9 +
 8 files changed, 466 insertions(+), 13 deletions(-)
 create mode 100644 Base/res/ladybird/about-pages/settings/languages.js

diff --git a/Base/res/ladybird/about-pages/settings.html b/Base/res/ladybird/about-pages/settings.html
index e86390dbf87..4cb811836b7 100644
--- a/Base/res/ladybird/about-pages/settings.html
+++ b/Base/res/ladybird/about-pages/settings.html
@@ -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 => {
diff --git a/Base/res/ladybird/about-pages/settings/languages.js b/Base/res/ladybird/about-pages/settings/languages.js
new file mode 100644
index 00000000000..a3dde2b7ea9
--- /dev/null
+++ b/Base/res/ladybird/about-pages/settings/languages.js
@@ -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;
+})();
diff --git a/Base/res/ladybird/ladybird.css b/Base/res/ladybird/ladybird.css
index ae7d14c3f4d..b58dc86d84f 100644
--- a/Base/res/ladybird/ladybird.css
+++ b/Base/res/ladybird/ladybird.css
@@ -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);
 }
diff --git a/Libraries/LibWebView/Settings.cpp b/Libraries/LibWebView/Settings.cpp
index 1d816518443..cc2fe8f03d6 100644
--- a/Libraries/LibWebView/Settings.cpp
+++ b/Libraries/LibWebView/Settings.cpp
@@ -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())
diff --git a/Libraries/LibWebView/Settings.h b/Libraries/LibWebView/Settings.h
index f3789d064f8..f5ceef03913 100644
--- a/Libraries/LibWebView/Settings.h
+++ b/Libraries/LibWebView/Settings.h
@@ -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;
diff --git a/Libraries/LibWebView/WebUI/SettingsUI.cpp b/Libraries/LibWebView/WebUI/SettingsUI.cpp
index c418a65cbf2..d496c6039f9 100644
--- a/Libraries/LibWebView/WebUI/SettingsUI.cpp
+++ b/Libraries/LibWebView/WebUI/SettingsUI.cpp
@@ -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;
diff --git a/Libraries/LibWebView/WebUI/SettingsUI.h b/Libraries/LibWebView/WebUI/SettingsUI.h
index bcb33c1f5e9..8e6651684bf 100644
--- a/Libraries/LibWebView/WebUI/SettingsUI.h
+++ b/Libraries/LibWebView/WebUI/SettingsUI.h
@@ -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&);
diff --git a/UI/cmake/ResourceFiles.cmake b/UI/cmake/ResourceFiles.cmake
index 2bad6de510a..18795afce26 100644
--- a/UI/cmake/ResourceFiles.cmake
+++ b/UI/cmake/ResourceFiles.cmake
@@ -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}
     )