From 37ca2fc25ca58e533c6c25593b17be9fd2ad1f12 Mon Sep 17 00:00:00 2001
From: Sam Atkins <sam@ladybird.org>
Date: Thu, 13 Feb 2025 16:05:02 +0000
Subject: [PATCH] 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.
---
 Base/res/ladybird/inspector.css | 6 +++++-
 Base/res/ladybird/inspector.js  | 8 +++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/Base/res/ladybird/inspector.css b/Base/res/ladybird/inspector.css
index a291446469b..176999b5c2b 100644
--- 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
index 3ca035a5052..c3d9917b49b 100644
--- 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 => {