Inspector: Preserve zebra-striping when hiding table rows

Instead of simply setting rows to hidden, add a class so that we can only include visible rows when applying zebra-striping.
SaxJ · Feb 17, 2025 · 37ca2fc · 37ca2fc
1 parent a10984e
commit 37ca2fc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/Base/res/ladybird/inspector.css b/Base/res/ladybird/inspector.css
@@ -295,7 +295,11 @@ details > :not(:first-child) {
     text-overflow: ellipsis;
 }
 
-.property-table tr:nth-child(even) {
+.hidden-row {
+    display: none;
+}
+
+.property-table tr:nth-child(even of :not(.hidden-row)) {
     background-color: var(--property-table-row);
 }
 

diff --git a/Base/res/ladybird/inspector.js b/Base/res/ladybird/inspector.js
@@ -339,7 +339,13 @@ inspector.setStyleSheetSource = (identifier, sourceBase64) => {
 const applyPropertyFilter = (row, searchText) => {
     const nameMatch = row.cells[0].textContent.toLowerCase().includes(searchText);
     const valueMatch = row.cells[1].textContent.toLowerCase().includes(searchText);
-    row.style.display = nameMatch || valueMatch ? "" : "none";
+    let matches = nameMatch || valueMatch;
+
+    if (matches) {
+        row.classList.remove("hidden-row");
+    } else {
+        row.classList.add("hidden-row");
+    }
 };
 
 const setupPropertyFilter = inputId => {