Issue 4644 - Filter requests in devtools panel by search string

devtools-panel.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 "use strict";
 
+var lastFilterQuery = null;
+
 function generateFilter(request, domainSpecific)
 {
   var filter = request.url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||");
   var options = [];
 
   if (request.type == "POPUP")
   {
     options.push("popup");
 
     if (request.url == "about:blank")
@@ skipping 83 matching lines @@
       ));
   }
   else
     actionWrapper.appendChild(createActionButton(
       "add", "Block item", generateFilter(request, request.specificOnly)
     ));
 
   return row;
 }
 
+function shouldFilterRow(row, query)
+{
+  var filtered = true;

[Thomas Greiner, 2016/11/29 12:17:06]

Detail: Unused variable.

[kzar, 2016/11/30 14:50:18]

Whoops well spotted, done.

+  var elementsToSearch = [
+    row.getElementsByClassName("url"),
+    row.getElementsByClassName("filter"),
+    row.getElementsByClassName("origin"),
+    row.getElementsByClassName("type")
+  ];
+
+  for (var elements of elementsToSearch)

[Thomas Greiner, 2016/11/29 12:17:07]

Detail: For consistency and to reduce the potential for accidents, please use
braces around blocks with multiple lines.

[kzar, 2016/11/30 14:50:20]

Done.

[Thomas Greiner, 2016/11/30 15:40:16]

Thanks!

+    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");
   var table = container.querySelector("tbody");
   var template = document.querySelector("template").content.firstElementChild;
 
   document.getElementById("reload").addEventListener("click", function()
   {
     ext.devtools.inspectedWindow.reload();
   }, false);
 
   document.getElementById("filter-state").addEventListener("change", function(event)
   {
     container.dataset.filterState = event.target.value;
   }, false);
 
   document.getElementById("filter-type").addEventListener("change", function(event)
   {
     container.dataset.filterType = event.target.value;
   }, false);
 
   ext.onMessage.addListener(function(message)
   {
     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.classList.add("filtered-by-search");
+        table.appendChild(record);
         break;
 
       case "update-record":

[Thomas Greiner, 2016/11/29 12:17:07]

Since you're adapting "add-record" to ensure that the filter also applies to
newly added records, why not do that for updated records?

Generally, it seems that the class should be added in `createRecord()` instead
of here.

[kzar, 2016/11/30 14:50:18]

Done.

         var oldRow = table.getElementsByTagName("tr")[message.index];
         var newRow = createRecord(message.request, message.filter, template);
         oldRow.parentNode.replaceChild(newRow, oldRow);
         newRow.classList.add("changed");
         container.classList.add("has-changes");
         break;
 
       case "remove-record":
         var row = table.getElementsByTagName("tr")[message.index];
         row.parentNode.removeChild(row);
         container.classList.add("has-changes");
         break;
 
       case "reset":
         table.innerHTML = "";
         container.classList.remove("has-changes");
         break;
     }
   });
+  window.addEventListener("message", function(event)

[Thomas Greiner, 2016/11/29 12:17:07]

Detail: Separating those two listeners by a newline would be great to further
differentiate those.

[kzar, 2016/11/30 14:50:20]

Done.

+  {
+    switch(event.data.type)
+    {
+      case "performSearch":
+        performSearch(table, event.data.queryString);
+        lastFilterQuery = event.data.queryString;
+        break;
+      case "cancelSearch":
+        cancelSearch(table);
+        lastFilterQuery = null;
+        break;
+    }
+  });
 }, false);