[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.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();

[Sebastian Noack, 2017/02/13 15:09:17]

Please correct me if I'm wrong, but it seems this is the only place where
trace() is called. So if you just set the started property inside the trace()
function, we wouldn't need this wrapper.

[wspee, 2017/02/14 09:28:40]

Done.

-      this.started = true;
-    };
-
-    if (document.readyState == "loading")
-      document.addEventListener("DOMContentLoaded", _start);
-    else
-      _start();
-  },
-
- addFilters: function(selectors, filters)
-  {
-    if (this.started)
-      window.setTimeout(() => {
-        this.checkNodes([document], selectors, filters);
-      }, 0);
-
-    Array.prototype.push.apply(this.selectors, selectors);

[Sebastian Noack, 2017/02/13 15:09:17]

As mentioned before, please use the rest operator instead of .apply():

  this.selectors.push(...selectors);
  this.filters.push(...filters);

[wspee, 2017/02/14 09:28:40]

Done.

-    Array.prototype.push.apply(this.filters, filters);
-  },
-
-  checkNodes: function(nodes, selectors, filters)
-  {
-    let matchedFilters = [];
+  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++)
     {
-      let selector = selectors[i];

[Sebastian Noack, 2017/02/13 15:09:17]

It seems "selector" and "filter" are only used once each. So these temporary
variables seem unnecessary. Instead you could inline selectors[i]/filters[i].

[wspee, 2017/02/14 09:28:40]

Done.

-      let filter = filters[i];
-
       nodes: for (let node of nodes)
       {
-        let elements = node.querySelectorAll(selector);
+        let elements = node.querySelectorAll(selectors[i]);
 
         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")
           {
-            matchedFilters.push(filter.replace(/^.*?##/, ""));
+            matchedSelectors.push(filters[i].replace(/^.*?##/, ""));
             break nodes;
           }
         }
       }
     }
 
-    if (matchedFilters.length > 0)
+    if (matchedSelectors.length > 0)
       ext.backgroundPage.sendMessage({
         type: "devtools.traceElemHide",
-        selectors: matchedFilters
+        selectors: matchedSelectors
       });
   },
 
-  onTimeout: function()
+  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()
+  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.length)
+  addSelectors(selectors, filters)
+  {
+    if (selectors.length == 0)
       return;
-
-    if (this.tracer)
-    {
-      if (!filters)
-      {
-        filters = [];
-        Array.prototype.push.apply(filters, selectors);

[Sebastian Noack, 2017/02/13 15:09:17]

As indicated before, I'm not sure if it is a good idea to redundantly store the
selectors as filters, when we don't know the actual filters. This is a leaky
abstraction. While it works for the code above, it raises wrong assumptions. Not
to mention the redundancy in the data structure.

I'd rather create an array which holds the value of undefined for each selector
we don't know the filter of (i.e. `new Array(selectors.length)`), and handle
that case explicitly, when extracting the original selectors.

Moreover, I feel that this logic belongs into the addFilter() method.

[wspee, 2017/02/14 09:28:40]

Done.

-      }
-      this.tracer.addFilters(selectors, filters);
-    }
 
     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);
 }