Issue 4364 - Drop support for Chrome 29-40 and remove legacy code

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 MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-var SELECTOR_GROUP_SIZE = 200;
 
 var typeMap = {
   "img": "IMAGE",
   "input": "IMAGE",
   "picture": "IMAGE",
   "audio": "MEDIA",
   "video": "MEDIA",
   "frame": "SUBDOCUMENT",
   "iframe": "SUBDOCUMENT",
   "object": "OBJECT",
@@ skipping 159 matching lines @@
   try
   {
     return element.contentDocument;
   }
   catch (e)
   {
     return null;
   }
 }
 
-function ElementHidingTracer(document, selectors)
+function ElementHidingTracer(selectors)
 {
-  this.document = document;
   this.selectors = selectors;
 
   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);
@@ skipping 45 matching lines @@
     this.checkNodes(this.changedNodes);
     this.changedNodes = [];
     this.timeout = null;
   },
 
   observe: function(mutations)
   {
     // Forget previously changed nodes that are no longer in the DOM.
     for (var i = 0; i < this.changedNodes.length; i++)
     {
-      if (!this.document.contains(this.changedNodes[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;
 
       // Ignore mutations of nodes that aren't in the DOM anymore.
-      if (!this.document.contains(node))
+      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++)
@@ skipping 22 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: function()
   {
-    this.checkNodes([this.document]);
+    this.checkNodes([document]);
 
     this.observer.observe(
-      this.document,
+      document,
       {
         childList: true,
         attributes: true,
         subtree: true
       }
     );
   },
 
   disconnect: function()
   {
-    this.document.removeEventListener("DOMContentLoaded", this.trace);
+    document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
-function runInDocument(document, fn, arg)
+function runInDocument(fn, arg)

[kzar, 2016/08/30 13:14:09]

Since this no longer takes a document argument perhaps it should be called
runInPage again? (Or something else?)

[Sebastian Noack, 2016/09/09 14:39:50]

How about runInPageContext()? No preference though, I don't think there is a
good term for that.

[kzar, 2016/09/13 12:30:01]

Sounds good to me.

 {
   var 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);
 }
 
 // Neither Chrome[1] nor Safari allow us to intercept WebSockets, 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(document)
+function wrapWebSocket()
 {
   if (typeof WebSocket == "undefined")
     return;
 
   var eventName = "abpws-" + Math.random().toString(36).substr(2);
 
   document.addEventListener(eventName, function(event)
   {
     ext.backgroundPage.sendMessage({
       type: "request.websocket",
       url: event.detail.url
     }, function (block)
     {
       document.dispatchEvent(
         new CustomEvent(eventName + "-" + event.detail.url, {detail: block})
       );
     });
   });
 
-  runInDocument(document, function(eventName)
+  runInDocument(function(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;
 
@@ skipping 39 matching lines @@
       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 init(document)
+function ElemHide()
 {
-  var shadow = null;
-  var style = null;
-  var observer = null;
-  var tracer = null;
+  this.shadow = this.createShadowTree();

[kzar, 2016/08/30 13:14:09]

I don't mind too much but perhaps this.shadow should instead be a getter that
caches the result?

[Sebastian Noack, 2016/09/09 14:39:51]

Why adding more code just for the matter of using a getter? Note the comment
explaining why we have to create the shadow root no matter what.

[kzar, 2016/09/13 12:30:01]

Acknowledged.

+  this.style = null;
+  this.tracer = null;
 
-  wrapWebSocket(document);
+  this.propertyFilters = new CSSPropertyFilters(
+    window,
+    function(callback)
+    {
+      ext.backgroundPage.sendMessage({
+        type: "filters.get",
+        what: "cssproperties"
+      }, callback);
+    },
+    this.addSelectors.bind(this)
+  );
+}
+ElemHide.prototype = {
+  selectorGroupSize: 200,
 
-  function getPropertyFilters(callback)
+  createShadowTree: function()
   {
-    ext.backgroundPage.sendMessage({
-      type: "filters.get",
-      what: "cssproperties"
-    }, callback);
-  }
-  var propertyFilters = new CSSPropertyFilters(window, getPropertyFilters,
-                                               addElemHideSelectors);
+    // Use Shadow DOM if available to don't mess with web pages that rely

[kzar, 2016/08/30 13:14:09]

Nit: Should be "...if available as to not mess with..."

[Sebastian Noack, 2016/09/09 14:39:51]

Done.

+    // 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;
 
-  // Use Shadow DOM if available to don't mess 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).
-  //
-  // Also, using shadow DOM causes issues on some Google websites,
-  // including Google Docs, Gmail and Blogger (#1770, #2602, #2687).
-  if ("createShadowRoot" in document.documentElement &&
-      !/\.(?:google|blogger)\.com$/.test(document.domain))
-  {
-    shadow = document.documentElement.createShadowRoot();
+    // 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;
+
+    var shadow = document.documentElement.createShadowRoot();

[kzar, 2016/08/30 13:14:09]

If we don't turn shadow into a getter perhaps we should just assign this.shadow
here instead of having the shadow variable?

[Sebastian Noack, 2016/09/09 14:39:50]

We still need to indicate whether we are using shadow DOM, in order to convert
the selectors accordingly. So while this would slightly simplify the code
injecting the stylesheet, it would require adding another property.

[kzar, 2016/09/13 12:30:01]

Acknowledged.

     shadow.appendChild(document.createElement("shadow"));
 
-    // Stop the website from messing with our shadowRoot
+    // Stop the website from messing with our shadow root (#4191, #4298).
     if ("shadowRoot" in Element.prototype)
     {
-      runInDocument(document, function()
+      runInDocument(function()
       {
         var ourShadowRoot = document.documentElement.shadowRoot;
         var desc = Object.getOwnPropertyDescriptor(Element.prototype, "shadowRoot");
         var shadowRoot = Function.prototype.call.bind(desc.get);
 
         Object.defineProperty(Element.prototype, "shadowRoot", {
           configurable: true, enumerable: true, get: function()
           {
             var shadow = shadowRoot(this);
             return shadow == ourShadowRoot ? null : shadow;
           }
         });
       }, null);
     }
-  }
 
-  function addElemHideSelectors(selectors)
+    return shadow;
+  },
+
+  addSelectors: function(selectors)
   {
     if (selectors.length == 0)
       return;
 
-    if (!style)
+    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.
-      style = document.createElement("style");
-      (shadow || document.head || document.documentElement).appendChild(style);
+      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 (!style.sheet)
+      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.
-    if (shadow)
+    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;
     }
 
     // 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 += SELECTOR_GROUP_SIZE)
+    for (var i = 0; i < selectors.length; i += this.selectorGroupSize)
     {
-      var selector = selectors.slice(i, i + SELECTOR_GROUP_SIZE).join(", ");
-      style.sheet.addRule(selector, "display: none !important;");
+      var selector = selectors.slice(i, i + this.selectorGroupSize).join(", ");
+      this.style.sheet.addRule(selector, "display: none !important;");
     }
-  };
+  },
 
-  var updateStylesheet = function()
+  apply: function()
   {
     var selectors = null;
-    var CSSPropertyFiltersLoaded = false;
+    var propertyFiltersLoaded = false;
 
     var checkLoaded = function()
     {
-      if (!selectors || !CSSPropertyFiltersLoaded)
+      if (!selectors || !propertyFiltersLoaded)
         return;
 
-      if (observer)
-        observer.disconnect();
-      observer = null;
+      if (this.tracer)
+        this.tracer.disconnect();
+      this.tracer = null;
 
-      if (tracer)
-        tracer.disconnect();
-      tracer = null;
+      if (this.style && this.style.parentElement)
+        this.style.parentElement.removeChild(this.style);
+      this.style = null;
 
-      if (style && style.parentElement)
-        style.parentElement.removeChild(style);
-      style = null;
-
-      addElemHideSelectors(selectors.selectors);
-      propertyFilters.apply();
+      this.addSelectors(selectors.selectors);
+      this.propertyFilters.apply();
 
       if (selectors.trace)
-        tracer = new ElementHidingTracer(document, selectors.selectors);
-    };
+        this.tracer = new ElementHidingTracer(selectors.selectors);
+    }.bind(this);
 
     ext.backgroundPage.sendMessage({type: "get-selectors"}, function(response)
     {
       selectors = response;
       checkLoaded();
     });
 
-    propertyFilters.load(function()
+    this.propertyFilters.load(function()
     {
-      CSSPropertyFiltersLoaded = true;
+      propertyFiltersLoaded = true;
       checkLoaded();
     });
-  };
+  }
+};
 
-  updateStylesheet();
+if (document instanceof HTMLDocument)
+{
+  checkSitekey();
+  wrapWebSocket();
+
+  var elemhide = new ElemHide();
+  elemhide.apply();
 
   document.addEventListener("error", function(event)
   {
     checkCollapse(event.target);
   }, true);
 
   document.addEventListener("load", function(event)
   {
     var element = event.target;
-
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
-
-    if (/\bChrome\//.test(navigator.userAgent))
-    {
-      var contentDocument = getContentDocument(element);
-      if (contentDocument)
-      {
-        var contentWindow = contentDocument.defaultView;
-        if (contentDocument instanceof contentWindow.HTMLDocument)
-        {
-          // Prior to Chrome 37, content scripts cannot run in
-          // dynamically created frames. Also on Chrome 37-40
-          // document_start content scripts (like this one) don't
-          // run either in those frames due to https://crbug.com/416907.
-          // So we have to apply element hiding from the parent frame.
-          if (!("init" in contentWindow))
-            init(contentDocument);
-        }
-      }
-    }
   }, true);
-
-  return updateStylesheet;
 }
-
-if (document instanceof HTMLDocument)
-{
-  checkSitekey();
-  window.updateStylesheet = init(document);
-}