Issue 154 - Added devtools panel showing blocked and blockable items

include.preload.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 172 matching lines @@
   try
   {
     return element.contentDocument;
   }
   catch (e)
   {
     return null;
   }
 }
 
+function ElementHidingTracer(document, selectors)
+{
+  this.document = document;
+  this.selectors = selectors;
+
+  this.changedNodes = [];
+  this.timeout = null;
+
+  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)
+  {
+    var matchedSelectors = [];
+
+    // Find all selectors that match any hidden element inside the given nodes.
+    for (var i = 0; i < this.selectors.length; i++)

[kzar, 2016/01/31 13:33:51]

Nit: Could you use `for ... of ...` for these loops instead?

[Sebastian Noack, 2016/02/02 10:39:52]

This is a content script. So there is no jsHydra magic.

[kzar, 2016/02/02 15:42:09]

Acknowledged.

+    {
+      var selector = this.selectors[i];
+
+      for (var j = 0; j < nodes.length; j++)
+      {
+        var elements = nodes[j].querySelectorAll(selector);
+        var matched = false;
+
+        for (var k = 0; k < elements.length; k++)
+        {
+          // 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")
+          {
+            matchedSelectors.push(selector);
+            matched = true;
+            break;
+          }
+        }
+
+        if (matched)
+          break;
+      }
+    }
+
+    if (matchedSelectors.length > 0)
+      ext.backgroundPage.sendMessage({type: "trace-elemhide", selectors: matchedSelectors});

[kzar, 2016/01/31 13:33:51]

Nit: Mind wrapping this long line?

[Sebastian Noack, 2016/02/02 10:39:52]

Done.

+  },
+
+  onTimeout: function()
+  {
+    this.checkNodes(this.changedNodes);
+    this.changedNodes = [];
+    this.timeout = null;
+  },
+
+  observe: function(mutations)
+  {
+    // Forget previously changed nodes that are no longer in the DOM.
+    for (var i = 0; i < this.changedNodes.length; i++)
+    {
+      if (!this.document.contains(this.changedNodes[i]))
+        this.changedNodes.splice(i--, 1);
+    }
+
+    for (var j = 0; j < mutations.length; j++)
+    {
+      var mutation = mutations[j];
+      var node = mutation.target;
+
+      // Ignore mutations of nodes that aren't in the DOM anymore.
+      if (!this.document.contains(node))
+        continue;
+
+      // Since querySelectorAll() doesn't consider the root itself
+      // and since CSS selectors can also match siblings, we have
+      // to consider the parent node for attribute mutations.
+      if (mutation.type == "attributes")
+        node = node.parentNode;
+
+      var addNode = true;
+      for (var k = 0; k < this.changedNodes.length; k++)
+      {
+        var previouslyChangedNode = this.changedNodes[k];
+
+        // If we are already going to check an ancestor of this node,
+        // we can ignore this node, since it will be considered anyway
+        // when checking one of its ancestors.
+        if (previouslyChangedNode.contains(node))
+        {
+          addNode = false;
+          break;
+        }
+
+        // If this node is an ancestor of a node that previously changed,
+        // we can ignore that node, since it will be considered anyway
+        // when checking one of its ancestors.
+        if (node.contains(previouslyChangedNode))
+          this.changedNodes.splice(k--, 1);
+      }
+
+      if (addNode)
+        this.changedNodes.push(node);
+    }
+
+    // Check only nodes whose descendants have changed, and not more often
+    // than once a second. Otherwise large pages with a lot of DOM mutations
+    // (like YouTube) freeze when the devtools panel is active.
+    if (this.timeout == null)
+      this.timeout = setTimeout(this.onTimeout.bind(this), 1000);
+  },
+
+  trace: function()
+  {
+    this.checkNodes([this.document]);
+
+    this.observer.observe(
+      this.document,
+      {
+        childList: true,
+        attributes: true,
+        subtree: true
+      }
+    );
+  },
+
+  disconnect: function()
+  {
+    this.document.removeEventListener("DOMContentLoaded", this.trace);
+    this.observer.disconnect();
+    clearTimeout(this.timeout);
+  }
+};
+
 function reinjectRulesWhenRemoved(document, style)
 {
   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
   if (!MutationObserver)
     return;
 
   var observer = new MutationObserver(function(mutations)
   {
     var isStyleRemoved = false;
     for (var i = 0; i < mutations.length; i++)
@@ skipping 10 matching lines @@
     observer.disconnect();
 
     var n = document.styleSheets.length;
     if (n == 0)
       return;
 
     var stylesheet = document.styleSheets[n - 1];
     ext.backgroundPage.sendMessage(
       {type: "get-selectors"},
 
-      function(selectors)
+      function(response)
       {
+        var selectors = response.selectors;
         while (selectors.length > 0)
         {
           var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", ");
 
           // Using non-standard addRule() here. This is the only way
           // to add rules at the end of a cross-origin stylesheet
           // because we don't know how many rules are already in there
           stylesheet.addRule(selector, "display: none !important;");
         }
       }
@@ skipping 43 matching lines @@
   }
 
   return result;
 }
 
 function init(document)
 {
   var shadow = null;
   var style = null;
   var observer = null;
+  var tracer = null;
   var propertyFilters = new CSSPropertyFilters(window, addElemHideSelectors);
 
   // Use Shadow DOM if available to don't mess with web pages that rely on
   // the order of their own <style> tags (#309).
   //
   // However, creating a shadow root breaks running CSS transitions. So we
   // have to create the shadow root before transistions might start (#452).
   //
   // Also, using shadow DOM causes issues on some Google websites,
   // including Google Docs and Gmail (#1770, #2602).
@@ skipping 49 matching lines @@
 
     var checkLoaded = function()
     {
       if (!selectors || !CSSPropertyFiltersLoaded)
         return;
 
       if (observer)
         observer.disconnect();
       observer = null;
 
+      if (tracer)
+        tracer.disconnect();
+      tracer = null;
+
       if (style && style.parentElement)
         style.parentElement.removeChild(style);
       style = null;
 
-      addElemHideSelectors(selectors);
+      addElemHideSelectors(selectors.selectors);
       propertyFilters.apply();
+
+      if (selectors.trace)
+        tracer = new ElementHidingTracer(document, selectors.selectors);
     };
 
     ext.backgroundPage.sendMessage({type: "get-selectors"}, function(response)
     {
       selectors = response;
       checkLoaded();
     });
 
     propertyFilters.load(function()
     {
@@ skipping 43 matching lines @@
   }, true);
 
   return updateStylesheet;
 }
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   window.updateStylesheet = init(document);
 }