mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-03 16:16:43 +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-header">Search</div>
<div class="card-body">
<div class="card-group inline-container">
<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="card-group">
<div class="inline-container">
<select id="search-engine">
<option value="">Please select a search engine</option>
<hr />
</select>
<label for="search-engine">Default Search Engine</label>
<button id="search-settings" class="secondary-button">Settings...</button>
</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>
<hr />
<div class="card-group inline-container">
<label for="autocomplete-toggle">Enable Autocomplete</label>
<input id="autocomplete-toggle" type="checkbox" switch />
</div>
<div class="card-group hidden">
<label for="autocomplete-engine">Default Autocomplete Engine</label>
<div class="card-group">
<label for="autocomplete-engine">Search Suggestions</label>
<p class="description">Select the engine that will provide search suggestions.</p>
<select id="autocomplete-engine">
<option value="">Please select an autocomplete engine</option>
<option value="">Disable search suggestions</option>
<hr />
</select>
</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 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 = {};
@ -25,22 +23,9 @@ 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);
renderEngine(Engine.search, SEARCH_ENGINE);
renderEngine(Engine.autocomplete, AUTOCOMPLETE_ENGINE);
if (searchDialog.open) {
showSearchEngineSettings();
@ -49,16 +34,16 @@ function loadEngineSettings(settings) {
function engineForType(engine) {
if (engine === Engine.search) {
return ["Search", searchToggle, searchEngine];
return ["Search", searchEngine];
}
if (engine === Engine.autocomplete) {
return ["Autocomplete", autocompleteToggle, autocompleteEngine];
return ["Autocomplete", autocompleteEngine];
}
throw Error(`Unrecognized engine type ${engine}`);
}
function loadEngines(type, engines) {
const [name, toggle, engine] = engineForType(type);
const [name, engine] = engineForType(type);
for (const engineName of engines) {
const option = document.createElement("option");
@ -74,41 +59,29 @@ function loadEngines(type, engines) {
}
}
function renderEngine(type) {
const [name, toggle, engine] = engineForType(type);
function renderEngine(type, setting) {
const [name, engine] = engineForType(type);
if (toggle.checked) {
engine.closest(".card-group").classList.remove("hidden");
if (setting.name) {
engine.value = setting.name;
} 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);
const [name, engine] = engineForType(type);
if (toggle.checked && engine.selectedIndex !== 0) {
if (engine.selectedIndex !== 0) {
ladybird.sendMessage(`set${name}Engine`, engine.value);
} else if (!toggle.checked) {
} else {
ladybird.sendMessage(`set${name}Engine`, null);
}
renderEngine(type);
}
function setSaveEngineListeners(type) {
const [name, toggle, engine] = engineForType(type);
const [name, engine] = engineForType(type);
toggle.addEventListener("change", () => {
saveEngine(type);
});
engine.addEventListener("change", () => {
saveEngine(type);
});