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

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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-var typeMap = {
+"use strict";
+
+const typeMap = {
   "img": "IMAGE",
   "input": "IMAGE",
   "picture": "IMAGE",
   "audio": "MEDIA",
   "video": "MEDIA",
   "frame": "SUBDOCUMENT",
   "iframe": "SUBDOCUMENT",
   "object": "OBJECT",
   "embed": "OBJECT"
 };
 
 function getURLsFromObjectElement(element)
 {
-  var url = element.getAttribute("data");
+  let url = element.getAttribute("data");
   if (url)
     return [url];
 
-  for (var i = 0; i < element.children.length; i++)
-  {
-    var child = element.children[i];
+  for (let child of element.children)
+  {
     if (child.localName != "param")
       continue;
 
-    var name = child.getAttribute("name");
+    let name = child.getAttribute("name");
     if (name != "movie"  && // Adobe Flash
         name != "source" && // Silverlight
         name != "src"    && // Real Media + Quicktime
         name != "FileName") // Windows Media
       continue;
 
-    var value = child.getAttribute("value");
+    let value = child.getAttribute("value");
     if (!value)
       continue;
 
     return [value];
   }
 
   return [];
 }
 
 function getURLsFromAttributes(element)
 {
-  var urls = [];
+  let urls = [];
 
   if (element.src)
     urls.push(element.src);
 
   if (element.srcset)
   {
-    var candidates = element.srcset.split(",");
-    for (var i = 0; i < candidates.length; i++)
-    {
-      var url = candidates[i].trim().replace(/\s+\S+$/, "");
+    for (let candidate of element.srcset.split(","))
+    {
+      let url = candidate.trim().replace(/\s+\S+$/, "");
       if (url)
         urls.push(url);
     }
   }
 
   return urls;
 }
 
 function getURLsFromMediaElement(element)
 {
-  var urls = getURLsFromAttributes(element);
-
-  for (var i = 0; i < element.children.length; i++)
-  {
-    var child = element.children[i];
+  let urls = getURLsFromAttributes(element);
+
+  for (let child of element.children)
+  {
     if (child.localName == "source" || child.localName == "track")
       urls.push.apply(urls, getURLsFromAttributes(child));
   }
 
   if (element.poster)
     urls.push(element.poster);
 
   return urls;
 }
 
 function getURLsFromElement(element)
 {
-  var urls;
+  let urls;
   switch (element.localName)
   {
     case "object":
       urls = getURLsFromObjectElement(element);
       break;
 
     case "video":
     case "audio":
     case "picture":
       urls = getURLsFromMediaElement(element);
       break;
 
     default:
       urls = getURLsFromAttributes(element);
       break;
   }
 
-  for (var i = 0; i < urls.length; i++)
+  for (let i = 0; i < urls.length; i++)
   {
     if (/^(?!https?:)[\w-]+:/i.test(urls[i]))
       urls.splice(i--, 1);
   }
 
   return urls;
 }
 
 function checkCollapse(element)
 {
-  var mediatype = typeMap[element.localName];
+  let mediatype = typeMap[element.localName];
   if (!mediatype)
     return;
 
-  var urls = getURLsFromElement(element);
+  let urls = getURLsFromElement(element);
   if (urls.length == 0)
     return;
 
   ext.backgroundPage.sendMessage(
     {
       type: "filters.collapse",
       urls: urls,
       mediatype: mediatype,
       baseURL: document.location.href
     },
 
-    function(collapse)
+    collapse =>
     {
       function collapseElement()
       {
-        var propertyName = "display";
-        var propertyValue = "none";
+        let propertyName = "display";
+        let propertyValue = "none";
         if (element.localName == "frame")
         {
           propertyName = "visibility";
           propertyValue = "hidden";
         }
 
         if (element.style.getPropertyValue(propertyName) != propertyValue ||
             element.style.getPropertyPriority(propertyName) != "important")
           element.style.setProperty(propertyName, propertyValue, "important");
       }
 
       if (collapse)
       {
         collapseElement();
 
         new MutationObserver(collapseElement).observe(
           element, {
             attributes: true,
             attributeFilter: ["style"]
           }
         );
       }
     }
   );
 }
 
 function checkSitekey()
 {
-  var attr = document.documentElement.getAttribute("data-adblockkey");
+  let attr = document.documentElement.getAttribute("data-adblockkey");
   if (attr)
     ext.backgroundPage.sendMessage({type: "filters.addKey", token: attr});
 }
 
 function getContentDocument(element)
 {
   try
   {
     return element.contentDocument;
   }
   catch (e)
   {
     return null;
   }
 }
 
 function ElementHidingTracer()
 {
-  this.filters = new Map();

[Sebastian Noack, 2017/02/09 11:07:39]

Why to use a a Map object? It seems the logic would be much simpler, if you just
have one array for selectors and one for the filters?

[wspee, 2017/02/10 10:46:46]

If you have information that are are dependent from one another it makes sense
to also use a data structure to reflects that. The selectors belong to a filter
so it makes sense to use a key/value data structure for that. The performance
arguments we used against a map previously don't apply here because (as it
stands now) the ElementHidingTracer will hold all ElementHiding filters in
memory anyways (could change that as well but might be out of scope) which is OK
because it will only do that if the panel is opened.

But a an array of arrays is actually simpler here than an map because you don't
have to use nested loops to iterate over all filters and its maps straighter to
an two arrays so the conversion is simpler. The dependency between filter and
selector will still be clear.

So I changed the approach to use a [[filter_a, selector_a_1], [filter_a,
selector_a_2]] instead of a Map([filter_a, [selector_a_1, selector_a_2]]).

What do you think?

[Sebastian Noack, 2017/02/10 14:52:55]

I'd generally agree, that data that have a mutual dependency should be stored in
the same data structure. Though, an n-dimensional array isn't the most efficient
data structure in JavaScript, as each array is a first-class object with notable
memory boilerplate. But more importantly, elemHideEmulation.js works with two
separate arrays, and translating these into a two-dimensional array (or Map
previously) adds quite some complexity, with not much of a benefit since we
access those data only once. Not to mention the leaky abstraction where you
store selectors (redundantly) as filter when the filter is unknown.

+  this.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 = {
-  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);
-
-    for (let [key, value] of filters)
-    {
-      if (!this.filters.has(key))
-        this.filters.set(key, []);
-      Array.prototype.push.apply(this.filters.get(key), value);
-    }
-  },
-
-  checkNodes: function(nodes, filters)
-  {
-    let matchedFilters = [];
-
-    for (let [filter, selectors] of filters)
-    {
-      for (let selector of selectors)
-      {
-        for (let node of nodes)
+  addSelectors(selectors, filters)
+  {
+    if (document.readyState != "loading")
+      this.checkNodes([document], selectors, filters);
+
+    this.selectors.push(...selectors);
+    this.filters.push(...filters);
+  },
+
+  checkNodes(nodes, selectors, filters)
+  {
+    let matchedSelectors = [];
+
+    for (let i = 0; i < selectors.length; i++)
+    {
+      nodes: for (let node of nodes)
+      {
+        let elements = node.querySelectorAll(selectors[i]);
+
+        for (let element of elements)
         {
-          let elements = node.querySelectorAll(selector);
-          let matched = false;
-
-          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(element).display == "none")
           {
-            // 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(element).display == "none")
-            {
-              matchedFilters.push(filter.replace(/^.*?##/, ""));
-              matched = true;

[Sebastian Noack, 2017/02/09 11:07:39]

It seems, the "match" variable would be unnecessary, if you break out of the
outer loop here, directly:

  nodes: for (let node of nodes)
  {
    for (let element of elements)
    {
        ...
        break nodes;
      }
    }
  }

[wspee, 2017/02/10 10:46:46]

Done.

-              break;
-            }
+            matchedSelectors.push(filters[i].replace(/^.*?##/, ""));
+            break nodes;
           }
-
-          if (matched)
-            break;
         }
       }
     }
 
-    if (matchedFilters.length > 0)
+    if (matchedSelectors.length > 0)
       ext.backgroundPage.sendMessage({
         type: "devtools.traceElemHide",
-        selectors: matchedFilters
+        selectors: matchedSelectors
       });
   },
 
-  onTimeout: function()
-  {
-    this.checkNodes(this.changedNodes, this.filters);
+  onTimeout()
+  {
+    this.checkNodes(this.changedNodes, this.selectors, this.filters);
     this.changedNodes = [];
     this.timeout = null;
   },
 
-  observe: function(mutations)
+  observe(mutations)
   {
     // Forget previously changed nodes that are no longer in the DOM.
-    for (var i = 0; i < this.changedNodes.length; i++)
+    for (let i = 0; i < this.changedNodes.length; i++)
     {
       if (!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;
+    for (let mutation of mutations)
+    {
+      let 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 < this.changedNodes.length; k++)
-      {
-        var previouslyChangedNode = this.changedNodes[k];
+      let addNode = true;
+      for (let i = 0; i < this.changedNodes.length; i++)
+      {
+        let previouslyChangedNode = this.changedNodes[i];
 
         // 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);
+          this.changedNodes.splice(i--, 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([document], this.filters);
+  trace()
+  {
+    this.checkNodes([document], this.selectors, this.filters);
 
     this.observer.observe(
       document,
       {
         childList: true,
         attributes: true,
         subtree: true
       }
     );
   },
 
-  disconnect: function()
+  disconnect()
   {
     document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
 function runInPageContext(fn, arg)
 {
-  var script = document.createElement("script");
+  let script = document.createElement("script");
   script.type = "application/javascript";
   script.async = false;
   script.textContent = "(" + fn + ")(" + JSON.stringify(arg) + ");";
   document.documentElement.appendChild(script);
   document.documentElement.removeChild(script);
 }
 
 // Chrome doesn't allow us to intercept WebSockets[1], and therefore
 // some ad networks are misusing them as a way to serve adverts and circumvent
 // us. As a workaround we wrap WebSocket, preventing blocked WebSocket
 // connections from being opened.
 // [1] - https://bugs.chromium.org/p/chromium/issues/detail?id=129353
 function wrapWebSocket()
 {
-  var eventName = "abpws-" + Math.random().toString(36).substr(2);
-
-  document.addEventListener(eventName, function(event)
+  let eventName = "abpws-" + Math.random().toString(36).substr(2);
+
+  document.addEventListener(eventName, event =>
   {
     ext.backgroundPage.sendMessage({
       type: "request.websocket",
       url: event.detail.url
-    }, function (block)
+    }, block =>
     {
       document.dispatchEvent(
         new CustomEvent(eventName + "-" + event.detail.url, {detail: block})
       );
     });
   });
 
-  runInPageContext(function(eventName)
+  runInPageContext(eventName =>
   {
     // As far as possible we must track everything we use that could be
     // sabotaged by the website later in order to circumvent us.
-    var RealWebSocket = WebSocket;
-    var closeWebSocket = Function.prototype.call.bind(RealWebSocket.prototype.close);
-    var addEventListener = document.addEventListener.bind(document);
-    var removeEventListener = document.removeEventListener.bind(document);
-    var dispatchEvent = document.dispatchEvent.bind(document);
-    var CustomEvent = window.CustomEvent;
+    let RealWebSocket = WebSocket;
+    let closeWebSocket = Function.prototype.call.bind(RealWebSocket.prototype.close);
+    let addEventListener = document.addEventListener.bind(document);
+    let removeEventListener = document.removeEventListener.bind(document);
+    let dispatchEvent = document.dispatchEvent.bind(document);
+    let CustomEvent = window.CustomEvent;
 
     function checkRequest(url, callback)
     {
-      var incomingEventName = eventName + "-" + url;
+      let incomingEventName = eventName + "-" + url;
       function listener(event)
       {
         callback(event.detail);
         removeEventListener(incomingEventName, listener);
       }
       addEventListener(incomingEventName, listener);
 
       dispatchEvent(new CustomEvent(eventName, {
         detail: {url: url}
       }));
     }
 
     function WrappedWebSocket(url)
     {
       // Throw correct exceptions if the constructor is used improperly.
       if (!(this instanceof WrappedWebSocket)) return RealWebSocket();
       if (arguments.length < 1) return new RealWebSocket();
 
-      var websocket;
+      let websocket;
       if (arguments.length == 1)
         websocket = new RealWebSocket(url);
       else
         websocket = new RealWebSocket(url, arguments[1]);
 
-      checkRequest(websocket.url, function(blocked)
+      checkRequest(websocket.url, blocked =>
       {
         if (blocked)
           closeWebSocket(websocket);
       });
 
       return websocket;
     }
     WrappedWebSocket.prototype = RealWebSocket.prototype;
     WebSocket = WrappedWebSocket.bind();
     Object.defineProperties(WebSocket, {
       CONNECTING: {value: RealWebSocket.CONNECTING, enumerable: true},
       OPEN: {value: RealWebSocket.OPEN, enumerable: true},
       CLOSING: {value: RealWebSocket.CLOSING, enumerable: true},
       CLOSED: {value: RealWebSocket.CLOSED, enumerable: true},
       prototype: {value: RealWebSocket.prototype}
     });
 
     RealWebSocket.prototype.constructor = WebSocket;
   }, eventName);
 }
 
 function ElemHide()
 {
   this.shadow = this.createShadowTree();
   this.style = null;
   this.tracer = null;
 
   this.elemHideEmulation = new ElemHideEmulation(
     window,
-    function(callback)
+    callback =>
     {
       ext.backgroundPage.sendMessage({
         type: "filters.get",
         what: "elemhideemulation"
       }, callback);
     },
     this.addSelectors.bind(this)
   );
 }
 ElemHide.prototype = {
   selectorGroupSize: 200,
 
-  createShadowTree: function()
+  createShadowTree()
   {
     // Use Shadow DOM if available as to not mess with 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).
     if (!("createShadowRoot" in document.documentElement))
       return null;
 
     // Using shadow DOM causes issues on some Google websites,
     // including Google Docs, Gmail and Blogger (#1770, #2602, #2687).
     if (/\.(?:google|blogger)\.com$/.test(document.domain))
       return null;
 
     // Finally since some users have both AdBlock and Adblock Plus installed we
     // have to consider how the two extensions interact. For example we want to
     // avoid creating the shadowRoot twice.
-    var shadow = document.documentElement.shadowRoot ||
+    let shadow = document.documentElement.shadowRoot ||
                  document.documentElement.createShadowRoot();
     shadow.appendChild(document.createElement("shadow"));
 
     // Stop the website from messing with our shadow root (#4191, #4298).
     if ("shadowRoot" in Element.prototype)
     {
-      runInPageContext(function()
-      {
-        var ourShadowRoot = document.documentElement.shadowRoot;
+      runInPageContext(() =>
+      {
+        let ourShadowRoot = document.documentElement.shadowRoot;
         if (!ourShadowRoot)
           return;
-        var desc = Object.getOwnPropertyDescriptor(Element.prototype, "shadowRoot");
-        var shadowRoot = Function.prototype.call.bind(desc.get);
+        let desc = Object.getOwnPropertyDescriptor(Element.prototype, "shadowRoot");
+        let shadowRoot = Function.prototype.call.bind(desc.get);
 
         Object.defineProperty(Element.prototype, "shadowRoot", {
-          configurable: true, enumerable: true, get: function()
+          configurable: true, enumerable: true, get()
           {
-            var shadow = shadowRoot(this);
+            let shadow = shadowRoot(this);
             return shadow == ourShadowRoot ? null : shadow;
           }
         });
       }, null);
     }
 
     return shadow;
   },
 
-  addSelectors: function(selectors, filters)
-  {
-    if (!selectors)

[Sebastian Noack, 2017/02/09 11:07:39]

Why did you change this line? Note that an empty array evaluates to true.

[wspee, 2017/02/10 10:46:46]

Done.

+  addSelectors(selectors, filters)
+  {
+    if (selectors.length == 0)
       return;
-
-    if (this.tracer)
-    {
-      let tracedFilters = new Map();
-      for (let i = 0; i < selectors.length; i++)
-      {
-        let filterKey = filters ? filters[i] : selectors[i];
-        let tracedFilter = tracedFilters.get(filterKey);
-        if (!tracedFilter)
-        {
-          tracedFilter = [];
-          tracedFilters.set(filterKey, tracedFilter);
-        }
-        tracedFilter.push(selectors[i]);
-      }
-      this.tracer.addFilters(tracedFilters);
-    }
 
     if (!this.style)
     {
       // 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.
       this.style = document.createElement("style");
       (this.shadow || document.head
                    || document.documentElement).appendChild(this.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 (!this.style.sheet)
         return;
     }
 
     // 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;
+      for (let selector of selectors)
+      {
+        let subSelectors = splitSelector(selector);
+        for (let subSelector of subSelectors)
+          preparedSelectors.push("::content " + subSelector);
+      }
+    }
+    else
+    {
+      preparedSelectors = selectors;
     }
 
     // Safari only allows 8192 primitive selectors to be injected at once[1], we
     // therefore chunk the inserted selectors into groups of 200 to be safe.
     // (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)
-    {
-      var selector = selectors.slice(i, i + this.selectorGroupSize).join(", ");
+    for (let i = 0; i < preparedSelectors.length; i += this.selectorGroupSize)
+    {
+      let selector = preparedSelectors.slice(i, i + this.selectorGroupSize).join(", ");
       this.style.sheet.insertRule(selector + "{display: none !important;}",
                                   this.style.sheet.cssRules.length);
     }
-  },
-
-  apply: function()
-  {
-    var selectors = null;
-
-    var checkLoaded = function()
+
+    if (this.tracer)
+      this.tracer.addSelectors(selectors, filters || selectors);
+  },
+
+  apply()
+  {
+    ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
     {
       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;
 
-      if (selectors.selectors)
-        this.addSelectors(selectors.selectors);
-
+      if (response.trace)
+        this.tracer = new ElementHidingTracer();
+
+      this.addSelectors(response.selectors);
       this.elemHideEmulation.apply();
-
-      if (this.tracer)
-        this.tracer.start();
-    }.bind(this);
-
-    ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
-    {
-      selectors = response;
-      this.elemHideEmulation.load(checkLoaded);
     });
   }
 };
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   wrapWebSocket();
 
+  // This variable is also used by our other content scripts, outside of the
+  // current scope.
   var elemhide = new ElemHide();
   elemhide.apply();
 
-  document.addEventListener("error", function(event)
+  document.addEventListener("error", event =>
   {
     checkCollapse(event.target);
   }, true);
 
-  document.addEventListener("load", function(event)
-  {
-    var element = event.target;
+  document.addEventListener("load", event =>
+  {
+    let element = event.target;
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
   }, true);
 }