From 7be78ec044742f6eff320c6466dbf4cb0a04aa76 Mon Sep 17 00:00:00 2001
From: Sam Atkins <sam@ladybird.org>
Date: Thu, 13 Feb 2025 16:33:25 +0000
Subject: [PATCH] Inspector: Keep property filter across tabs

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.
---
 Base/res/ladybird/inspector.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/Base/res/ladybird/inspector.js b/Base/res/ladybird/inspector.js
index eb002bb5d2f..2eab1728410 100644
--- a/Base/res/ladybird/inspector.js
+++ b/Base/res/ladybird/inspector.js
@@ -62,6 +62,14 @@ const selectTab = (tabButton, tabID, selectedTab, selectedTabButton) => {
     tab.style.display = "block";
     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;
 };
 
@@ -361,12 +369,12 @@ const setupPropertyFilter = inputId => {
     const filterInput = document.getElementById(`${inputId}-filter`);
 
     filterInput.addEventListener("input", event => {
-        const searchText = event.target.value.toLowerCase();
+        inspector.propertyFilterText = event.target.value.toLowerCase();
         const tbody = document.getElementById(`${inputId}-table`);
         const rows = tbody.getElementsByTagName("tr");
 
         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");
         newTable.setAttribute("id", tableID);
 
-        let searchText = oldTable.parentNode.parentNode.querySelector(".property-filter").value;
-
         Object.keys(properties)
             .sort((a, b) => {
                 let baseResult = a.localeCompare(b);
@@ -403,8 +409,8 @@ inspector.createPropertyTables = (computedStyle, resolvedStyle, customProperties
                 let valueColumn = row.insertCell();
                 valueColumn.innerText = properties[name];
 
-                if (searchText) {
-                    applyPropertyFilter(row, searchText);
+                if (inspector.propertyFilterText) {
+                    applyPropertyFilter(row, inspector.propertyFilterText);
                 }
             });