Issue 4644 - Filter requests in devtools panel by search string

devtools-panel.js

Index: devtools-panel.js
diff --git a/devtools-panel.js b/devtools-panel.js
index 85068dd5c1ed8a02309a7370b841b84f7e134df6..231a803af524a91ccc0cf2e009bc6749340e30c5 100644
--- a/devtools-panel.js
+++ b/devtools-panel.js
@@ -17,6 +17,8 @@
 
 "use strict";
 
+var lastFilterQuery = null;
+
 function generateFilter(request, domainSpecific)
 {
   var filter = request.url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||");
@@ -120,6 +122,39 @@ function createRecord(request, filter, template)
   return row;
 }
 
+function shouldFilterRow(row, query)
+{
+  var filtered = true;
+  var elementsToSearch = [
+    row.getElementsByClassName("url"),
+    row.getElementsByClassName("filter"),
+    row.getElementsByClassName("origin")
+  ];
+
+  for (var elements of elementsToSearch)
+    for (var element of elements)
+      if (element.innerText.search(query) != -1)
+        return false;
+  return true;
+}
+
+function performSearch(table, query)
+{
+  for (var row of table.rows)
+  {
+    if (shouldFilterRow(row, query))
+      row.classList.add("filtered-by-search");
+    else
+      row.classList.remove("filtered-by-search");
+  }
+}
+
+function cancelSearch(table)
+{
+  for (var row of table.rows)
+    row.classList.remove("filtered-by-search");
+}
+
 document.addEventListener("DOMContentLoaded", function()
 {
   var container = document.getElementById("items");
@@ -146,7 +181,10 @@ document.addEventListener("DOMContentLoaded", function()
     switch (message.type)
     {
       case "add-record":
-        table.appendChild(createRecord(message.request, message.filter, template));
+        var record = createRecord(message.request, message.filter, template);
+        if (lastFilterQuery && shouldFilterRow(record, lastFilterQuery))
+          record.add("filtered-by-search");
+        table.appendChild(record);
         break;
 
       case "update-record":
@@ -169,4 +207,18 @@ document.addEventListener("DOMContentLoaded", function()
         break;
     }
   });
+  window.addEventListener("message", function(event)
+  {
+    switch(event.data.type)
+    {
+      case "performSearch":
+        performSearch(table, event.data.queryString);
+        lastFilterQuery = event.data.queryString;
+        break;
+      case "cancelSearch":
+        cancelSearch(table);
+        lastFilterQuery = null;
+        break;
+    }
+  });
 }, false);