diff --git a/Base/res/ladybird/inspector.css b/Base/res/ladybird/inspector.css index c53459e7eae..604337bd061 100644 --- a/Base/res/ladybird/inspector.css +++ b/Base/res/ladybird/inspector.css @@ -259,6 +259,18 @@ details > :not(:first-child) { color: var(--console-warning-color); } +.property-filter { + display: block; + width: calc(100% - 10px); + height: 20px; + padding: 4px; + position: sticky; + top: 0; + border: 1px solid var(--console-table-border); + background-color: var(--console-input-color); + color: var(--text-color); +} + .property-table { width: 100%; @@ -269,7 +281,7 @@ details > :not(:first-child) { .property-table th { background-color: var(--property-table-head); position: sticky; - top: 0px; + top: 30px; } .property-table th, diff --git a/Base/res/ladybird/inspector.js b/Base/res/ladybird/inspector.js index 14482b328e8..4902c8f6ce0 100644 --- a/Base/res/ladybird/inspector.js +++ b/Base/res/ladybird/inspector.js @@ -336,10 +336,26 @@ inspector.setStyleSheetSource = (identifier, sourceBase64) => { styleSheetSource.innerHTML = decodeBase64(sourceBase64); }; +const setupPropertyFilter = inputId => { + const filterInput = document.getElementById(`${inputId}-filter`); + + filterInput.addEventListener("input", event => { + const searchText = event.target.value.toLowerCase(); + const tbody = document.getElementById(`${inputId}-table`); + const rows = tbody.getElementsByTagName("tr"); + + for (let row of rows) { + const nameMatch = row.cells[0].textContent.toLowerCase().includes(searchText); + const valueMatch = row.cells[1].textContent.toLowerCase().includes(searchText); + + row.style.display = nameMatch || valueMatch ? "" : "none"; + } + }); +}; + inspector.createPropertyTables = (computedStyle, resolvedStyle, customProperties) => { const createPropertyTable = (tableID, properties) => { let oldTable = document.getElementById(tableID); - let newTable = document.createElement("tbody"); newTable.setAttribute("id", tableID); @@ -813,5 +829,8 @@ document.addEventListener("DOMContentLoaded", () => { } }); + // Setup filters for property tables + ["computed-style", "resolved-style", "custom-properties"].forEach(setupPropertyFilter); + inspector.inspectorLoaded(); }); diff --git a/Libraries/LibWebView/InspectorClient.cpp b/Libraries/LibWebView/InspectorClient.cpp index 9b3cb4c34d9..720cfe011f9 100644 --- a/Libraries/LibWebView/InspectorClient.cpp +++ b/Libraries/LibWebView/InspectorClient.cpp @@ -512,6 +512,7 @@ void InspectorClient::load_inspector() auto generate_property_table = [&](auto name) { return MUST(String::formatted(R"~~~(
+