mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-06 01:26:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Base: Simplify enabling search and autocomplete

Browse source 
Currently, enabling search is a bit hokey. You have to click a checkbox
to get the search engines to show up, then you have to click a drop down
to select an engine. Let's go with a simpler approach; now you only have
to interact with the drop down.
This commit is contained in:
Timothy Flynn 2025-05-11 08:32:04 -04:00 • committed by Tim Flynn
commit 9267172e28
Notes: github-actions[bot] 2025-05-11 15:49:08 +00:00
2 changed files with 24 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -329,31 +329,25 @@
<div class="card"> <div class="card">
<div class="card-header">Search</div> <div class="card-header">Search</div>
<div class="card-body"> <div class="card-body">
<div class="card-group inline-container"> <div class="card-group">
<label for="search-toggle">Enable Search</label>
<input id="search-toggle" type="checkbox" switch />
</div>
<div class="card-group hidden">
<label for="search-engine">Default Search Engine</label>
<div class="inline-container"> <div class="inline-container">
<select id="search-engine"> <label for="search-engine">Default Search Engine</label>
<option value="">Please select a search engine</option>
<hr />
</select>
<button id="search-settings" class="secondary-button">Settings...</button> <button id="search-settings" class="secondary-button">Settings...</button>
</div> </div>
<p class="description">Select the search engine to use in the address bar.</p>
<select id="search-engine">
<option value="">Disable search</option>
<hr />
</select>
</div> </div>
<hr /> <hr />
<div class="card-group inline-container"> <div class="card-group">
<label for="autocomplete-toggle">Enable Autocomplete</label> <label for="autocomplete-engine">Search Suggestions</label>
<input id="autocomplete-toggle" type="checkbox" switch /> <p class="description">Select the engine that will provide search suggestions.</p>
</div>
<div class="card-group hidden">
<label for="autocomplete-engine">Default Autocomplete Engine</label>
<select id="autocomplete-engine"> <select id="autocomplete-engine">
<option value="">Please select an autocomplete engine</option> <option value="">Disable search suggestions</option>
<hr /> <hr />
</select> </select>
</div> </div>

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

@ -6,10 +6,8 @@ const searchDialog = document.querySelector("#search-dialog");
const searchEngine = document.querySelector("#search-engine"); const searchEngine = document.querySelector("#search-engine");
const searchList = document.querySelector("#search-list"); const searchList = document.querySelector("#search-list");
const searchSettings = document.querySelector("#search-settings"); const searchSettings = document.querySelector("#search-settings");
const searchToggle = document.querySelector("#search-toggle");
const autocompleteEngine = document.querySelector("#autocomplete-engine"); const autocompleteEngine = document.querySelector("#autocomplete-engine");
const autocompleteToggle = document.querySelector("#autocomplete-toggle");
let SEARCH_ENGINE = {}; let SEARCH_ENGINE = {};
let AUTOCOMPLETE_ENGINE = {}; let AUTOCOMPLETE_ENGINE = {};
@ -25,22 +23,9 @@ function loadEngineSettings(settings) {
SEARCH_ENGINE = settings.searchEngine || {}; SEARCH_ENGINE = settings.searchEngine || {};
AUTOCOMPLETE_ENGINE = settings.autocompleteEngine || {}; 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(); loadCustomSearchEngines();
renderEngineSettings(Engine.search, SEARCH_ENGINE); renderEngine(Engine.search, SEARCH_ENGINE);
renderEngineSettings(Engine.autocomplete, AUTOCOMPLETE_ENGINE); renderEngine(Engine.autocomplete, AUTOCOMPLETE_ENGINE);
if (searchDialog.open) { if (searchDialog.open) {
showSearchEngineSettings(); showSearchEngineSettings();
@ -49,16 +34,16 @@ function loadEngineSettings(settings) {
function engineForType(engine) { function engineForType(engine) {
if (engine === Engine.search) { if (engine === Engine.search) {
return ["Search", searchToggle, searchEngine]; return ["Search", searchEngine];
} }
if (engine === Engine.autocomplete) { if (engine === Engine.autocomplete) {
return ["Autocomplete", autocompleteToggle, autocompleteEngine]; return ["Autocomplete", autocompleteEngine];
} }
throw Error(`Unrecognized engine type ${engine}`); throw Error(`Unrecognized engine type ${engine}`);
} }
function loadEngines(type, engines) { function loadEngines(type, engines) {
const [name, toggle, engine] = engineForType(type); const [name, engine] = engineForType(type);
for (const engineName of engines) { for (const engineName of engines) {
const option = document.createElement("option"); const option = document.createElement("option");
@ -74,41 +59,29 @@ function loadEngines(type, engines) {
} }
} }
function renderEngine(type) { function renderEngine(type, setting) {
const [name, toggle, engine] = engineForType(type); const [name, engine] = engineForType(type);
if (toggle.checked) { if (setting.name) {
engine.closest(".card-group").classList.remove("hidden"); engine.value = setting.name;
} else { } 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; engine.selectedIndex = 0;
} }
} }
function saveEngine(type) { function saveEngine(type) {
const [name, toggle, engine] = engineForType(type); const [name, engine] = engineForType(type);
if (toggle.checked && engine.selectedIndex !== 0) { if (engine.selectedIndex !== 0) {
ladybird.sendMessage(`set${name}Engine`, engine.value); ladybird.sendMessage(`set${name}Engine`, engine.value);
} else if (!toggle.checked) { } else {
ladybird.sendMessage(`set${name}Engine`, null); ladybird.sendMessage(`set${name}Engine`, null);
} }
renderEngine(type);
} }
function setSaveEngineListeners(type) { function setSaveEngineListeners(type) {
const [name, toggle, engine] = engineForType(type); const [name, engine] = engineForType(type);
toggle.addEventListener("change", () => {
saveEngine(type);
});
engine.addEventListener("change", () => { engine.addEventListener("change", () => {
saveEngine(type); saveEngine(type);
}); });