Issue 4864 - Start using ESLint for adblockpluschrome

include.preload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
- * Copyright (C) 2006-2016 Eyeo GmbH
+ * Copyright (C) 2006-2017 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/>.
  */
 
 /* globals ElemHideEmulation, splitSelector */
 
 "use strict";
 
 // This variable is also used by our other content scripts.

[Sebastian Noack, 2017/02/09 01:04:50]

This comment is kinda redundant with the /* globals ... */ comment in
composer.postload.js. But as I said there, these global variables aren't great
in particular in regard to the additional boilerplate. This should rather be a
module export.

[wspee, 2017/03/02 10:27:13]

You might want to also comment on this? But as far as I got it from the other
similar comments this is going to stay this way?

[kzar, 2017/03/07 11:41:35]

Yes, I think for now this stuff will stay as it is. We need to get the ESLint
changes to these repositories pushed soon, since it's blocking other people from
collaborating or at least making it much harder.

I do agree with Sebastian that we should reduce the use of globals via modules,
and I'm going to keep #4864 open until we've done that. When Sebastian's back
I'll work with him on that.

 let elemhide;
 
 const typeMap = new Map([
   ["img", "IMAGE"],
   ["input", "IMAGE"],
   ["picture", "IMAGE"],
   ["audio", "MEDIA"],
   ["video", "MEDIA"],
   ["frame", "SUBDOCUMENT"],
   ["iframe", "SUBDOCUMENT"],
@@ skipping 144 matching lines @@
   );
 }
 
 function checkSitekey()
 {
   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(selectors)
-{
-  this.selectors = selectors;
+function ElementHidingTracer()
+{
+  this.selectors = [];
+  this.filters = [];
 
   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(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 = [];
 
-    // Find all selectors that match any hidden element inside the given nodes.
-    for (let selector of this.selectors)
-    {
-      for (let node of nodes)
-      {
-        let elements = node.querySelectorAll(selector);
-        let matched = false;
+    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)
         {
           // 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")
           {
-            matchedSelectors.push(selector);
-            matched = true;
-            break;
+            matchedSelectors.push(filters[i].replace(/^.*?##/, ""));
+            break nodes;
           }
         }
-
-        if (matched)
-          break;
       }
     }
 
     if (matchedSelectors.length > 0)
     {
       ext.backgroundPage.sendMessage({
         type: "devtools.traceElemHide",
         selectors: matchedSelectors
       });
     }
   },
 
   onTimeout()
   {
-    this.checkNodes(this.changedNodes);
+    this.checkNodes(this.changedNodes, this.selectors, this.filters);
     this.changedNodes = [];
     this.timeout = null;
   },
 
   observe(mutations)
   {
     // Forget previously changed nodes that are no longer in the DOM.
     for (let i = 0; i < this.changedNodes.length; i++)
     {
       if (!document.contains(this.changedNodes[i]))
@@ skipping 41 matching lines @@
 
     // 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()
   {
-    this.checkNodes([document]);
+    this.checkNodes([document], this.selectors, this.filters);
 
     this.observer.observe(
       document,
       {
         childList: true,
         attributes: true,
         subtree: true
       }
     );
   },
 
   disconnect()
   {
     document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
 function runInPageContext(fn, arg)
 {
   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.
+// Before Chrome 58 the webRequest API didn'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()
 {
   let randomEventName = "abpws-" + Math.random().toString(36).substr(2);
 
   document.addEventListener(randomEventName, event =>
   {
     ext.backgroundPage.sendMessage({
       type: "request.websocket",
       url: event.detail.url
     }, block =>
     {
       document.dispatchEvent(new CustomEvent(
         randomEventName + "-" + event.detail.url, {detail: block}

[Sebastian Noack, 2017/02/09 01:04:50]

If you rename the argument to "detail", you can use the shorthand syntax here. 

[kzar, 2017/02/20 10:27:31]

I think block is a better name for the variable though, since it's a boolean
indicating if the request should be blocked or not.

       ));
     });
   });
 
   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.
     let RealWebSocket = WebSocket;
     let RealCustomEvent = window.CustomEvent;
@@ skipping 16 matching lines @@
 
       dispatchEvent(new RealCustomEvent(eventName, {detail: {url}}));
     }
 
     function WrappedWebSocket(url, ...args)
     {
       // Throw correct exceptions if the constructor is used improperly.
       if (!(this instanceof WrappedWebSocket)) return RealWebSocket();
       if (arguments.length < 1) return new RealWebSocket();
 
-      let websocket;
-      if (arguments.length == 1)
-        websocket = new RealWebSocket(url);
-      else
-        websocket = new RealWebSocket(url, args[0]);
+      let websocket = new RealWebSocket(url, ...args);
 
       checkRequest(websocket.url, blocked =>
       {
         if (blocked)
           closeWebSocket(websocket);
       });
 
       return websocket;
     }
     WrappedWebSocket.prototype = RealWebSocket.prototype;
@@ skipping 61 matching lines @@
         if (!ourShadowRoot)
           return;
         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()
           {
             let thisShadow = shadowRoot(this);
-            return thisShadow == ourShadowRoot ? null : shadow;
+            return thisShadow == ourShadowRoot ? null : thisShadow;
           }
         });
       }, null);
     }
 
     return shadow;
   },
 
-  addSelectors(selectors)
+  addSelectors(selectors, filters)
   {
     if (selectors.length == 0)
       return;
 
     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);

[Sebastian Noack, 2017/02/09 01:04:50]

Is the fallback to document.documentElement even still necessary?

[kzar, 2017/02/20 10:27:31]

I have no idea.

+                      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)
     {
-      let preparedSelectors = [];
       for (let selector of selectors)
       {
         let subSelectors = splitSelector(selector);
         for (let subSelector of subSelectors)
           preparedSelectors.push("::content " + subSelector);
       }
-      selectors = preparedSelectors;
+    }
+    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 (let i = 0; i < selectors.length; i += this.selectorGroupSize)
-    {
-      let 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);
     }
+
+    if (this.tracer)
+      this.tracer.addSelectors(selectors, filters || selectors);
   },
 
   apply()
   {
-    let selectors = null;
-    let elemHideEmulationLoaded = false;
-
-    let checkLoaded = function()
-    {
-      if (!selectors || !elemHideEmulationLoaded)
-        return;
-
+    ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
+    {
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;
 
       if (this.style && this.style.parentElement)
         this.style.parentElement.removeChild(this.style);
       this.style = null;
 
-      this.addSelectors(selectors.selectors);
+      if (response.trace)
+        this.tracer = new ElementHidingTracer();
+
+      this.addSelectors(response.selectors);
       this.elemHideEmulation.apply();
-
-      if (selectors.trace)
-        this.tracer = new ElementHidingTracer(selectors.selectors);
-    }.bind(this);
-
-    ext.backgroundPage.sendMessage({type: "get-selectors"}, response =>
-    {
-      selectors = response;
-      checkLoaded();
-    });
-
-    this.elemHideEmulation.load(() =>
-    {
-      elemHideEmulationLoaded = true;
-      checkLoaded();
     });
   }
 };
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   wrapWebSocket();
 
   elemhide = new ElemHide();
   elemhide.apply();
 
   document.addEventListener("error", event =>
   {
     checkCollapse(event.target);
   }, true);
 
   document.addEventListener("load", event =>
   {
     let element = event.target;
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
   }, true);
 }