fergalmoran/ladybird
1
0
Fork 0
mirror of https://github.com/fergalmoran/ladybird.git synced 2025-12-22 09:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Inspector: Keep property filter across tabs

Browse Source 
Remember the query, so that if you're filtering for "color" on the
computed style tab, and switch to the resolved style tab, it's filtered
for "color" too.

This means we also can save looking up the filter text when a new node
is inspected.
This commit is contained in:
Sam Atkins
2025-02-13 16:33:25 +00:00
committed by Jelle Raaijmakers
parent 4c024e41cb
commit 7be78ec044
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
Base/res/ladybird/inspector.js
View File

@@ -62,6 +62,14 @@ const selectTab = (tabButton, tabID, selectedTab, selectedTabButton) => {
tab.style.display = "block"; tab.style.display = "block";
tabButton.classList.add("active"); tabButton.classList.add("active");
// Apply any filtering if we have it
let filterInput = tab.querySelector(".property-filter");
let propertyTable = tab.querySelector(".property-table");
if (filterInput && propertyTable) {
filterInput.value = inspector.propertyFilterText || "";
filterInput.dispatchEvent(new InputEvent("input"));
}
return tab; return tab;
}; };
@@ -361,12 +369,12 @@ const setupPropertyFilter = inputId => {
const filterInput = document.getElementById(`${inputId}-filter`); const filterInput = document.getElementById(`${inputId}-filter`);
filterInput.addEventListener("input", event => { filterInput.addEventListener("input", event => {
const searchText = event.target.value.toLowerCase(); inspector.propertyFilterText = event.target.value.toLowerCase();
const tbody = document.getElementById(`${inputId}-table`); const tbody = document.getElementById(`${inputId}-table`);
const rows = tbody.getElementsByTagName("tr"); const rows = tbody.getElementsByTagName("tr");
for (let row of rows) { for (let row of rows) {
applyPropertyFilter(row, searchText); applyPropertyFilter(row, inspector.propertyFilterText);
} }
}); });
}; };
@@ -377,8 +385,6 @@ inspector.createPropertyTables = (computedStyle, resolvedStyle, customProperties
let newTable = document.createElement("tbody"); let newTable = document.createElement("tbody");
newTable.setAttribute("id", tableID); newTable.setAttribute("id", tableID);
let searchText = oldTable.parentNode.parentNode.querySelector(".property-filter").value;
Object.keys(properties) Object.keys(properties)
.sort((a, b) => { .sort((a, b) => {
let baseResult = a.localeCompare(b); let baseResult = a.localeCompare(b);
@@ -403,8 +409,8 @@ inspector.createPropertyTables = (computedStyle, resolvedStyle, customProperties
let valueColumn = row.insertCell(); let valueColumn = row.insertCell();
valueColumn.innerText = properties[name]; valueColumn.innerText = properties[name];
if (searchText) { if (inspector.propertyFilterText) {
applyPropertyFilter(row, searchText); applyPropertyFilter(row, inspector.propertyFilterText);
} }
}); });