Inspector: Add ability to filter css properties

LadybirdBrowser · Feb 13, 2025 · 6e61cc5 · 6e61cc5
1 parent 3e46cb9
commit 6e61cc5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git 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
@@ -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
@@ -512,6 +512,7 @@ void InspectorClient::load_inspector()
     auto generate_property_table = [&](auto name) {
         return MUST(String::formatted(R"~~~(
             <div id="{0}" class="tab-content">
+                <input class="property-filter" id="{0}-filter" placeholder="Filter properties" />
                 <table class="property-table">
                     <thead>
                         <tr>