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-2015 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 86 matching lines @@
   if (!contentDocument)
     return false;
 
   // Return true, if the element is a first-party frame which doesn't
   // have this function, hence our content script isn't running there.
   // Those are dynamically created frames as well as frames
   // with "about:blank", "about:srcdoc" and "javascript:" URL.
   return !("isFrameWithoutContentScript" in contentDocument.defaultView);
 }
 
+function traceHiddenElements(document, selectors)
+{
+  var changedNodes = [];
+  var timeout = null;
+
+  var checkNodes = function(nodes)
+  {
+    var matchedSelectors = [];
+
+    // Find all selectors that match any hidden element inside the given nodes.
+    for (var i = 0; i < selectors.length; i++)
+    {
+      var selector = 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});
+  };
+
+  var observer = new MutationObserver(function(mutations)
+  {
+    // Forget previously changed nodes that are no longer in the DOM.
+    for (var i = 0; i < changedNodes.length; i++)
+    {
+      if (!document.contains(changedNodes[i]))
+        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 (!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 < changedNodes.length; k++)
+      {
+        var previouslyChangedNode = 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))
+          changedNodes.splice(k--, 1);
+      }
+
+      if (addNode)
+        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 (!timeout)
+    {
+      timeout = setTimeout(function()
+      {
+        checkNodes(changedNodes);
+        changedNodes = [];
+        timeout = null;
+      }, 1000);
+    }
+  });
+
+  var startTracing = function()
+  {
+    checkNodes([document]);
+
+    observer.observe(
+      document,
+      {
+        childList: true,
+        attributes: true,
+        subtree: true
+      }
+    );
+  };
+
+  var stopTracing = function()
+  {
+    document.removeEventListener("DOMContentLoaded", startTracing);
+    observer.disconnect();
+    clearTimeout(timeout);
+  };
+
+  if (document.readyState == "loading")
+    document.addEventListener("DOMContentLoaded", startTracing);
+  else
+    startTracing();
+
+  return stopTracing;
+}
+
 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 34 matching lines @@
     result.push(prefix + selector.substring(start));
   }
 
   return result;
 }
 
 function init(document)
 {
   var shadow = null;
   var style = null;
-  var observer = null;
+
+  var reinjectObserver = null;
+  var stopTracing = null;
 
   // 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, we can't use shadow DOM on Google Docs, since it breaks printing
   // there (#1770).
   if ("createShadowRoot" in document.documentElement && document.domain != "docs.google.com")
   {
     shadow = document.documentElement.createShadowRoot();
     shadow.appendChild(document.createElement("shadow"));
   }
 
   var updateStylesheet = function(reinject)
   {
-    ext.backgroundPage.sendMessage({type: "get-selectors"}, function(selectors)
+    ext.backgroundPage.sendMessage({type: "get-selectors"}, function(response)
     {
-      if (observer)
+      if (reinjectObserver)
       {
-        observer.disconnect();
-        observer = null;
+        reinjectObserver.disconnect();
+        reinjectObserver = null;
+      }
+
+      if (stopTracing)
+      {
+        stopTracing();
+        stopTracing = null;
       }
 
       if (style && style.parentElement)
       {
         style.parentElement.removeChild(style);
         style = null;
       }
 
+      var selectors = response.selectors;
       if (selectors.length > 0)
       {
         // Create <style> element lazily, only if we add styles. Add it to
         // the shadow DOM if possible. Otherwise fallback to the <head> or
         // <html> element. If we have injected a style element before that
         // has been removed (the sheet property is null), create a new one.
         style = document.createElement("style");
         (shadow || document.head || document.documentElement).appendChild(style);
 
         // It can happen that the frame already navigated to a different
         // document while we were waiting for the background page to respond.
         // In that case the sheet property will stay null, after addind the
         // <style> element to the shadow DOM.
         if (style.sheet)
         {
           // If using shadow DOM, we have to add the ::content pseudo-element
           // before each selector, in order to match elements within the
           // insertion point.
           if (shadow)
             selectors = convertSelectorsForShadowDOM(selectors);
 
           // WebKit (and Blink?) apparently chokes when the selector list in a
           // CSS rule is huge. So we split the elemhide selectors into groups.
           for (var i = 0; selectors.length > 0; i++)
           {
             var selector = selectors.splice(0, SELECTOR_GROUP_SIZE).join(", ");
             style.sheet.insertRule(selector + " { display: none !important; }", i);
           }
+
+          reinjectObserver = reinjectRulesWhenRemoved(document, style);
+
+          if (response.trace)
+            stopTracing = traceHiddenElements(document, response.selectors);
         }
-
-        observer = reinjectRulesWhenRemoved(document, style);
       }
     });
   };
 
   updateStylesheet();
 
   document.addEventListener("error", function(event)
   {
     checkCollapse(event.target);
   }, true);
@@ skipping 19 matching lines @@
   }, true);
 
   return updateStylesheet;
 }
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   window.updateStylesheet = init(document);
 }