[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..f28b7c0ea11b855e60906584cb521036bae5b8f1 100644
--- a/include.preload.js
+++ b/include.preload.js
@@ -192,64 +192,85 @@ function getContentDocument(element)
   }
 }
 
-function ElementHidingTracer(selectors)
+function ElementHidingTracer()
 {
-  this.selectors = selectors;
+  this.filters = {};
 
   this.changedNodes = [];
   this.timeout = null;
+  this.started = false;
 
   this.observer = new MutationObserver(this.observe.bind(this));
   this.trace = this.trace.bind(this);
-
-  if (document.readyState == "loading")
-    document.addEventListener("DOMContentLoaded", this.trace);
-  else
-    this.trace();
 }
 ElementHidingTracer.prototype = {
-  checkNodes: function(nodes)
+  start: function()
+  {
+    let _start = () => {
+      this.trace();
+      this.started = true;
+    };
+
+    if (document.readyState == "loading")
+      document.addEventListener("DOMContentLoaded", _start);
+    else
+      _start();
+  },
+
+ addFilters: function(filters)
+  {
+    if (this.started)
+      window.setTimeout(() => {
+        this.checkNodes([document], filters);
+      }, 0);
+
+    Object.assign(this.filters, filters);
+  },
+
+  checkNodes: function(nodes, filters)
   {
-    var matchedSelectors = [];
+    let matchedFilters = [];
 
-    // Find all selectors that match any hidden element inside the given nodes.
-    for (var i = 0; i < this.selectors.length; i++)
+    for (let filter of Object.keys(this.filters))
     {
-      var selector = this.selectors[i];
+      let selectors = this.filters[filter];
 
-      for (var j = 0; j < nodes.length; j++)
+      for (let i = 0; i < selectors.length; i++)
       {
-        var elements = nodes[j].querySelectorAll(selector);
-        var matched = false;
-
-        for (var k = 0; k < elements.length; k++)
+        for (var j = 0; j < nodes.length; j++)
         {
-          // 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")
+          var elements = nodes[j].querySelectorAll(selectors[i]);
+          var matched = false;
+
+          for (var k = 0; k < elements.length; k++)
           {
-            matchedSelectors.push(selector);
-            matched = true;
-            break;
+            // 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")
+            {
+              matchedFilters.push(filter.replace(/^.*?##/, ""));
+              matched = true;
+              break;
+            }
           }
-        }
 
-        if (matched)
-          break;
+          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.changedNodes = [];
     this.timeout = null;
   },
@@ -312,7 +333,7 @@ ElementHidingTracer.prototype = {
 
   trace: function()
   {
-    this.checkNodes([document]);
+    this.checkNodes([document], this.selectors);
 
     this.observer.observe(
       document,
@@ -490,11 +511,22 @@ ElemHide.prototype = {
     return shadow;
   },
 
-  addSelectors: function(selectors)
+  addSelectors: function(filters)
   {
-    if (selectors.length == 0)
+    if (!filters)
       return;
 
+    if (this.tracer)
+      this.tracer.addFilters(filters);
+
+    let selectors = [];
+    for (let filter of Object.keys(filters))
+    {
+      let filterSelectors = filters[filter];
+      for (let i = 0; i < filterSelectors.length; i++)
+        selectors.push(filterSelectors[i]);
+    }
+
     if (!this.style)
     {
       // Create <style> element lazily, only if we add styles. Add it to
@@ -544,38 +576,37 @@ ElemHide.prototype = {
   apply: function()
   {
     var selectors = null;
-    var elemHideEmulationLoaded = false;
 
     var checkLoaded = function()
     {
-      if (!selectors || !elemHideEmulationLoaded)
-        return;
-
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;
 
+      if (selectors.trace)
+        this.tracer = new ElementHidingTracer();
+
       if (this.style && this.style.parentElement)
         this.style.parentElement.removeChild(this.style);
       this.style = null;
 
-      this.addSelectors(selectors.selectors);
+      if (selectors.selectors)
+      {
+        let filters = {};
+        for (let i = 0; i < selectors.selectors.length; i++)
+          filters[selectors.selectors[i]] = [selectors.selectors[i]];
+        this.addSelectors(filters);
+      }
       this.elemHideEmulation.apply();
 
-      if (selectors.trace)
-        this.tracer = new ElementHidingTracer(selectors.selectors);
+      if (this.tracer)
+        this.tracer.start();
     }.bind(this);
 
-    ext.backgroundPage.sendMessage({type: "get-selectors"}, function(response)
+    ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
     {
       selectors = response;
-      checkLoaded();
-    });
-
-    this.elemHideEmulation.load(function()
-    {
-      elemHideEmulationLoaded = true;
-      checkLoaded();
+      this.elemHideEmulation.load(checkLoaded);
     });
   }
 };