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

[Sebastian Noack, 2017/02/14 10:58:16]

Do we even need the start method (and started flag)? What if we just put
following back into the constructor:

  if (document.readyState == "loading")
    document.addEventListener("DOMContentLoaded", this.trace);

But without the else branch. And then in addFilters(), instead of checking for
started (which we'd no longer need then), we check for document.readyState:

  if (document.readyState != "loading")
    this.checkNodes([document], selectors, filters);

Note that I also removed the timeout, which I think we can get rid of, if we
just make sure to call addFilters() after adding the rules to the stylesheet.

[Sebastian Noack, 2017/02/14 11:27:58]

I just noticed that currently we have to call trace(), to setup the
MutationObserver. But even if we separate that logic, it still seems simpler
than the current approach.

[wspee, 2017/02/15 14:09:57]

If we implement your suggestions wouldn't that mean that the tracer wouldn't
trace anything if the dom is still loading if trace is called?
We have to make sure that trace is called not only to set up the observer but
also to call checkNodes for the whole document?

[Sebastian Noack, 2017/02/15 18:49:03]

We should defer tracing (i.e. traversing through the whole document and start
observing further mutations) until when the DOM has been loaded. That is what
the document.readyState check and the DOMContentLoaded listener has been here
for in the first place.

This is necessary because the MutationObserver doesn't reliably observe nodes
added while the DOM is still being parsed. This depends a little bit on the
browser (and its version) though. But even if the MutationObserver is fired for
DOM fragments as they are parsed, it's still way faster to just wait until the
DOM is ready and then check all nodes at once.

With the suggested approach, we would still make sure everything is eventually
traced, as addFilters() will keep adding selectors/filters to
this.selectors/this.filters, which are then processed on DOMContentLoaded. Or if
the DOM has already been loaded, we process these selectors/filters immediately.

[wspee, 2017/02/17 10:51:38]

Done.

-  {
-    if (document.readyState == "loading")
-      document.addEventListener("DOMContentLoaded", this.trace);
-    else
-      this.trace();
-  },
-
- addFilters: function(selectors, filters)

[Sebastian Noack, 2017/02/14 10:58:16]

I think this method should rather be called addSelectors() now, where it always
takes selectors, and the corresponding filter are optional.

[wspee, 2017/02/15 14:09:57]

Done.

-  {
-    if (this.started)
-      window.setTimeout(() => {
-        this.checkNodes([document], selectors, filters);
-      }, 0);
-
-    if (!filters)

[Sebastian Noack, 2017/02/14 10:58:16]

I'd move this to the top of the function. If we get rid of the timeout, we even
have to. But regardless, I think it makes the code flow clearer.

[wspee, 2017/02/15 14:09:56]

Done.

-      filters = new Array(selectors.length);
+  addSelectors(selectors, filters)
+  {
+    if (document.readyState != "loading")
+      this.checkNodes([document], selectors, filters);
 
     this.selectors.push(...selectors);
     this.filters.push(...filters);
   },
 
-  checkNodes: function(nodes, selectors, filters)
-  {
-    let matchedFilters = [];
+  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)
         {
           // 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")
           {
-            let filter = filters[i] || selectors[i];
-            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()
-  {
-    this.started = true;
+  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)
-      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);

[Sebastian Noack, 2017/02/14 10:58:16]

Why did you move this inside this callback? That way "get-selectors" and
elemHideEmulation.load() are no longer requested simultaneously, adding a delay.

[wspee, 2017/02/15 14:09:56]

Hmm ... because this way checkLoaded is only called once and is stateless ...
but I didn't take into account that sendMessage could be asynchronous.

But I'm not sure if there is a way to take advantage of the async execution.
Whether or not to trace elements depends on the response of get-selectors
(response.trace) and there is not much you could do without knowing whether or
not to activate the tracer?

[Sebastian Noack, 2017/02/15 18:49:03]

Well, the whole point of having checkLoaded(), as opposed to passing an
anonymous function here, or naming it "onLoaded" at least, is to synchronize
sendMessage({type: "get-selectors"}, ...) and elemHideEmulation.load(...).

First of all, the synchronization is necessary, as you already noticed, 
so that we know whether to trace element hiding, in order to keep track of the
selectors/filters if necessary, before injecting any selectors. But there is
also another benefit of the synchronization here. That is if element hiding gets
reapplied (e.g. when using the "Block element" dialog from the icon menu),
replacing the stylesheet happens in one go before the page is redrawn, so that
you don't see any elements showing up shortly before they are hidden again.

The same could be achieved by sending the messages sequentially, like you did.
But this will cause a (small) delay, since the background page, after responding
to the first message, has to wait for us to send the second message. But if we
send the second message already while the first message hasn't been processed
yet, like this code originally did, there is no delay in between both messages
being processed by the background page.

While I don't consider your approach an improvement, I might see some potential
for improvement here. First of all, the synchronization adds some complexity,
that would be great to get rid of, as you noticed. Moreover, while it makes sure
that emulation filters are ready as soon as possible, it adds some delay for
regular element hiding filter (which is the common case), with either approach
(but even more with yours). So how about this: We setup the stylesheet and
tracer, and start injecting selectors, as soon as we got a response for
"get-selectors". And then we asynchronously retrieve and apply the emulation
filters. This will get rid of the synchronization and minimizes the delay for
regular element hiding filters as much as possible. The only downside then is
that we have a visible delay in between regular element hiding filters, and
emulation filters, being applied. However, in the common case this is
preferable, if that means regular element hiding filters become applied earlier.
And for the case where the "Block element" dialog causes element hiding to be
reapplied, this would be still acceptable, considering the performance
improvement in the common case and that this only effect emulation filters.

[wspee, 2017/02/17 10:51:38]

Like so?

[Sebastian Noack, 2017/02/17 13:55:30]

Almost. ;)

     });
   }
 };
 
 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);
 }