[adblockpluschrome] Issue 3596 - Added support for CSS property filters to devtools panel

include.preload.js

Index: include.preload.js
diff --git a/include.preload.js b/include.preload.js
index 86e52c32afceb894f6591a84b0eca3b1842383ce..166b5aa3632c21507e282499fa7fd57513cbbd0a 100644
--- a/include.preload.js
+++ b/include.preload.js
@@ -192,9 +192,10 @@ function getContentDocument(element)
   }
 }
 
-function ElementHidingTracer(selectors)
+function ElementHidingTracer()
 {
-  this.selectors = selectors;
+  this.selectors = [];
+  this.filters = [];
 
   this.changedNodes = [];
   this.timeout = null;
@@ -208,48 +209,53 @@ function ElementHidingTracer(selectors)
     this.trace();
 }
 ElementHidingTracer.prototype = {
-  checkNodes: function(nodes)
+  addSelectors: function(selectors, filters)
   {
-    var matchedSelectors = [];
+    if (!filters)
+      filters = new Array(selectors.length);
 
-    // Find all selectors that match any hidden element inside the given nodes.
-    for (var i = 0; i < this.selectors.length; i++)
-    {
-      var selector = this.selectors[i];
+    if (document.readyState != "loading")
+      this.checkNodes([document], selectors, filters);
+
+    this.selectors.push(...selectors);
+    this.filters.push(...filters);
+  },
+
+  checkNodes: function(nodes, selectors, filters)
+  {
+    let matchedFilters = [];
 
-      for (var j = 0; j < nodes.length; j++)
+    for (let i = 0; i < selectors.length; i++)
+    {
+      nodes: for (let node of nodes)
       {
-        var elements = nodes[j].querySelectorAll(selector);
-        var matched = false;
+        let elements = node.querySelectorAll(selectors[i]);
 
-        for (var k = 0; k < elements.length; k++)
+        for (let element of elements)
         {
           // Only consider selectors that actually have an effect on the
           // computed styles, and aren't overridden by rules with higher
           // priority, or haven't been circumvented in a different way.
-          if (getComputedStyle(elements[k]).display == "none")
+          if (getComputedStyle(element).display == "none")
           {
-            matchedSelectors.push(selector);
-            matched = true;
-            break;
+            let filter = filters[i] || selectors[i];
+            matchedFilters.push(filter.replace(/^.*?##/, ""));
+            break nodes;
           }
         }
-
-        if (matched)
-          break;
       }
     }
 
-    if (matchedSelectors.length > 0)
+    if (matchedFilters.length > 0)
       ext.backgroundPage.sendMessage({
         type: "devtools.traceElemHide",
-        selectors: matchedSelectors
+        selectors: matchedFilters
       });
   },
 
   onTimeout: function()
   {
-    this.checkNodes(this.changedNodes);
+    this.checkNodes(this.changedNodes, this.selectors, this.filters);
     this.changedNodes = [];
     this.timeout = null;
   },
@@ -312,7 +318,7 @@ ElementHidingTracer.prototype = {
 
   trace: function()
   {
-    this.checkNodes([document]);
+    this.checkNodes([document], this.selectors, this.filters);
 
     this.observer.observe(
       document,
@@ -490,7 +496,7 @@ ElemHide.prototype = {
     return shadow;
   },
 
-  addSelectors: function(selectors)
+  addSelectors: function(selectors, filters)
   {
     if (selectors.length == 0)
       return;
@@ -516,16 +522,19 @@ ElemHide.prototype = {
     // If using shadow DOM, we have to add the ::content pseudo-element
     // before each selector, in order to match elements within the
     // insertion point.
+    let preparedSelectors = [];
     if (this.shadow)
     {
-      var preparedSelectors = [];
       for (var i = 0; i < selectors.length; i++)
       {
         var subSelectors = splitSelector(selectors[i]);
         for (var j = 0; j < subSelectors.length; j++)
           preparedSelectors.push("::content " + subSelectors[j]);
       }
-      selectors = preparedSelectors;
+    }
+    else
+    {
+      preparedSelectors = selectors;
     }
 
     // Safari only allows 8192 primitive selectors to be injected at once[1], we
@@ -533,24 +542,21 @@ ElemHide.prototype = {
     // (Chrome also has a limit, larger... but we're not certain exactly what it
     //  is! Edge apparently has no such limit.)
     // [1] - https://github.com/WebKit/webkit/blob/1cb2227f6b2a1035f7bdc46e5ab69debb75fc1de/Source/WebCore/css/RuleSet.h#L68
-    for (var i = 0; i < selectors.length; i += this.selectorGroupSize)
+    for (var i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
     {
-      var selector = selectors.slice(i, i + this.selectorGroupSize).join(", ");
+      var selector = preparedSelectors.slice(i, i + this.selectorGroupSize).join(", ");
       this.style.sheet.insertRule(selector + "{display: none !important;}",
                                   this.style.sheet.cssRules.length);
     }
+
+    if (this.tracer)
+      this.tracer.addSelectors(selectors, filters);
   },
 
   apply: function()
   {
-    var selectors = null;
-    var elemHideEmulationLoaded = false;
-
-    var checkLoaded = function()
+    ext.backgroundPage.sendMessage({type: "get-selectors"}, selectors =>

[Sebastian Noack, 2017/02/18 11:41:18]

Perhaps, call the argument "response", as it's not the selectors, but a complex
object which stores the the selectors in its "selectors" property. Hence
"response.selectors" would look less awkward than "selectors.selectors".

[wspee, 2017/02/18 13:00:14]

Done.

     {
-      if (!selectors || !elemHideEmulationLoaded)
-        return;
-
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;
@@ -559,23 +565,13 @@ ElemHide.prototype = {
         this.style.parentElement.removeChild(this.style);
       this.style = null;
 
-      this.addSelectors(selectors.selectors);
-      this.elemHideEmulation.apply();
-
       if (selectors.trace)
-        this.tracer = new ElementHidingTracer(selectors.selectors);
-    }.bind(this);
+        this.tracer = new ElementHidingTracer();
 
-    ext.backgroundPage.sendMessage({type: "get-selectors"}, function(response)
-    {
-      selectors = response;
-      checkLoaded();
-    });
+      if (selectors.selectors)

[Sebastian Noack, 2017/02/18 11:41:19]

This check is redundant, as "selectors" is always an array, which always
evaluates to true.

[wspee, 2017/02/18 13:00:14]

Done.

+        this.addSelectors(selectors.selectors);
 
-    this.elemHideEmulation.load(function()
-    {
-      elemHideEmulationLoaded = true;
-      checkLoaded();
+      this.elemHideEmulation.apply();
     });
   }
 };