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
@@ skipping 101 matching lines @@
     if (filter.userDefined)
       actionWrapper.appendChild(createActionButton(
         "remove", "Remove rule", filter.text
       ));
   }
   else
     actionWrapper.appendChild(createActionButton(
       "add", "Block item", generateFilter(request, request.specificOnly)
     ));
 
+  if (lastFilterQuery && shouldFilterRow(row, lastFilterQuery))
+    row.classList.add("filtered-by-search");
+
   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
@@ skipping 26 matching lines @@
   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":
-        var record = createRecord(message.request, message.filter, template);
-        if (lastFilterQuery && shouldFilterRow(record, lastFilterQuery))
-          record.classList.add("filtered-by-search");
-        table.appendChild(record);
+        table.appendChild(createRecord(message.request, message.filter, template));
         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);