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
  *
  * 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";
 
-const typeMap = {
-  "img": "IMAGE",
-  "input": "IMAGE",
-  "picture": "IMAGE",
-  "audio": "MEDIA",
-  "video": "MEDIA",
-  "frame": "SUBDOCUMENT",
-  "iframe": "SUBDOCUMENT",
-  "object": "OBJECT",
-  "embed": "OBJECT"
-};
+// 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"],
+  ["object", "OBJECT"],
+  ["embed", "OBJECT"]
+]);
 
 function getURLsFromObjectElement(element)
 {
   let url = element.getAttribute("data");
   if (url)
     return [url];
 
   for (let child of element.children)
   {
     if (child.localName != "param")
       continue;
 
     let name = child.getAttribute("name");
-    if (name != "movie"  && // Adobe Flash
+    if (name != "movie" &&  // Adobe Flash
         name != "source" && // Silverlight
-        name != "src"    && // Real Media + Quicktime
+        name != "src" &&    // Real Media + Quicktime
         name != "FileName") // Windows Media
       continue;
 
     let value = child.getAttribute("value");
     if (!value)
       continue;
 
     return [value];
   }
 
@@ skipping 20 matching lines @@
   return urls;
 }
 
 function getURLsFromMediaElement(element)
 {
   let urls = getURLsFromAttributes(element);
 
   for (let child of element.children)
   {
     if (child.localName == "source" || child.localName == "track")
-      urls.push.apply(urls, getURLsFromAttributes(child));
+      urls.push(...getURLsFromAttributes(child));
   }
 
   if (element.poster)
     urls.push(element.poster);
 
   return urls;
 }
 
 function getURLsFromElement(element)
 {
@@ skipping 19 matching lines @@
   {
     if (/^(?!https?:)[\w-]+:/i.test(urls[i]))
       urls.splice(i--, 1);
   }
 
   return urls;
 }
 
 function checkCollapse(element)
 {
-  let mediatype = typeMap[element.localName];
+  let mediatype = typeMap.get(element.localName);
   if (!mediatype)
     return;
 
   let urls = getURLsFromElement(element);
   if (urls.length == 0)
     return;
 
   ext.backgroundPage.sendMessage(
     {
       type: "filters.collapse",
-      urls: urls,
-      mediatype: mediatype,
+      urls,
+      mediatype,
       baseURL: document.location.href
     },
 
     collapse =>
     {
       function collapseElement()
       {
         let propertyName = "display";
         let propertyValue = "none";
         if (element.localName == "frame")
@@ skipping 81 matching lines @@
             break;
           }
         }
 
         if (matched)
           break;
       }
     }
 
     if (matchedSelectors.length > 0)
+    {
       ext.backgroundPage.sendMessage({
         type: "devtools.traceElemHide",
         selectors: matchedSelectors
       });
+    }
   },
 
   onTimeout()
   {
     this.checkNodes(this.changedNodes);
     this.changedNodes = [];
     this.timeout = null;
   },
 
   observe(mutations)
@@ skipping 83 matching lines @@
   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()
 {
-  let eventName = "abpws-" + Math.random().toString(36).substr(2);
+  let randomEventName = "abpws-" + Math.random().toString(36).substr(2);
 
-  document.addEventListener(eventName, event =>
+  document.addEventListener(randomEventName, event =>
   {
     ext.backgroundPage.sendMessage({
       type: "request.websocket",
       url: event.detail.url
     }, block =>
     {
-      document.dispatchEvent(
-        new CustomEvent(eventName + "-" + event.detail.url, {detail: 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 closeWebSocket = Function.prototype.call.bind(RealWebSocket.prototype.close);
+    let RealCustomEvent = window.CustomEvent;
+    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)
     {
       let incomingEventName = eventName + "-" + url;
       function listener(event)
       {
         callback(event.detail);
         removeEventListener(incomingEventName, listener);
       }
       addEventListener(incomingEventName, listener);
 
-      dispatchEvent(new CustomEvent(eventName, {
-        detail: {url: url}
-      }));
+      dispatchEvent(new RealCustomEvent(eventName, {detail: {url}}));
     }
 
-    function WrappedWebSocket(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, arguments[1]);
+        websocket = new RealWebSocket(url, args[0]);
 
       checkRequest(websocket.url, blocked =>
       {
         if (blocked)
           closeWebSocket(websocket);
       });
 
       return websocket;
     }
     WrappedWebSocket.prototype = RealWebSocket.prototype;
-    WebSocket = WrappedWebSocket.bind();
+    window.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);
+  }, randomEventName);
 }
 
 function ElemHide()
 {
   this.shadow = this.createShadowTree();
   this.style = null;
   this.tracer = null;
 
   this.elemHideEmulation = new ElemHideEmulation(
     window,
@@ skipping 32 matching lines @@
     shadow.appendChild(document.createElement("shadow"));
 
     // Stop the website from messing with our shadow root (#4191, #4298).
     if ("shadowRoot" in Element.prototype)
     {
       runInPageContext(() =>
       {
         let ourShadowRoot = document.documentElement.shadowRoot;
         if (!ourShadowRoot)
           return;
-        let desc = Object.getOwnPropertyDescriptor(Element.prototype, "shadowRoot");
+        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 shadow = shadowRoot(this);
-            return shadow == ourShadowRoot ? null : shadow;
+            let thisShadow = shadowRoot(this);
+            return thisShadow == ourShadowRoot ? null : shadow;
           }
         });
       }, null);
     }
 
     return shadow;
   },
 
   addSelectors(selectors)
   {
     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);
+      (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.

 
       // 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
@@ skipping 61 matching lines @@
       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 = 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);
 }