Issue 5864 - Remove previous style sheet before adding one

include.preload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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
@@ skipping 147 matching lines @@
 function checkCollapse(element)
 {
   let mediatype = typeMap.get(element.localName);
   if (!mediatype)
     return;
 
   let urls = getURLsFromElement(element);
   if (urls.length == 0)
     return;
 
-  chrome.runtime.sendMessage(
+  browser.runtime.sendMessage(
     {
       type: "filters.collapse",
       urls,
       mediatype,
       baseURL: document.location.href
     },
 
     collapse =>
     {
       if (collapse)
       {
         hideElement(element);
       }
     }
   );
 }
 
 function checkSitekey()
 {
   let attr = document.documentElement.getAttribute("data-adblockkey");
   if (attr)
-    chrome.runtime.sendMessage({type: "filters.addKey", token: attr});
+    browser.runtime.sendMessage({type: "filters.addKey", token: attr});
 }
 
 function ElementHidingTracer()
 {
   this.selectors = [];
   this.changedNodes = [];
   this.timeout = null;
   this.observer = new MutationObserver(this.observe.bind(this));
   this.trace = this.trace.bind(this);
 
@@ skipping 40 matching lines @@
               selectors.push(selector);
 
             break nodes;
           }
         }
       }
     }
 
     if (selectors.length > 0 || filters.length > 0)
     {
-      chrome.runtime.sendMessage({
+      browser.runtime.sendMessage({
         type: "devtools.traceElemHide",
         selectors, filters
       });
     }
   },
 
   onTimeout()
   {
     this.checkNodes(this.changedNodes, this.selectors);
     this.changedNodes = [];
@@ skipping 77 matching lines @@
   }
 };
 
 function ElemHide()
 {
   this.shadow = this.createShadowTree();
   this.styles = new Map();
   this.tracer = null;
   this.inline = true;
   this.emulatedPatterns = null;
-  this.injectedStyleSheet = null;
 
   this.elemHideEmulation = new ElemHideEmulation(
     this.addSelectors.bind(this),
     this.hideElements.bind(this)
   );
 }
 ElemHide.prototype = {
   selectorGroupSize: 200,
 
   createShadowTree()
@@ skipping 13 matching lines @@
     // 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.
     let shadow = document.documentElement.shadowRoot ||
                  document.documentElement.createShadowRoot();
     shadow.appendChild(document.createElement("shadow"));
 
     return shadow;
   },
 
-  createRule(selectors)
-  {
-    if (selectors.length == 0)
-      return null;

[Sebastian Noack, 2017/10/17 22:00:38]

.sheet.insertRule() fails if we return null here.

[Manish Jethani, 2017/10/17 22:14:27]

Yes, but we have the following code earlier in addSelectorsInline:

  if (selectors.length == 0)
    return;

So it never gets to that part if the list is empty.

[Sebastian Noack, 2017/10/18 00:53:06]

So this check is redundant here. It seems in the other case where createRule()
is called selectors wouldn't be empty either, and if so returning null would
explode there as well, or do I miss something?

[Manish Jethani, 2017/10/18 01:48:37]

We still need that check for this line of code in addSelectors:

  this.injectStyleSheet(this.createRule(selectors));

If there are no selectors, injectStyleSheet will get null, which is also the
initial value of this.injectStyleSheet. Basically it can be either null or a
non-empty array.

[Manish Jethani, 2017/10/18 01:49:56]

I mean the initial value of "this.injectedStyleSheet"

-
-    return selectors.join(", ") + "{display: none !important;}";
-  },
-
-  injectStyleSheet(styleSheet)
-  {
-    if (styleSheet == this.injectedStyleSheet)
-      return;
-
-    chrome.runtime.sendMessage({
-      type: "elemhide.injectStyleSheet",
-      styleSheet,
-      oldStyleSheet: this.injectedStyleSheet
-    });
-
-    this.injectedStyleSheet = styleSheet;
-  },
-
-  addSelectorsInline(selectors, filters, groupName)
+  addSelectorsInline(selectors, groupName)
   {
     let style = this.styles.get(groupName);
 
     if (style)
     {
       while (style.sheet.cssRules.length > 0)
         style.sheet.deleteRule(0);
     }
 
     if (selectors.length == 0)
@@ skipping 37 matching lines @@
       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 < preparedSelectors.length; i += this.selectorGroupSize)
     {
-      style.sheet.insertRule(
-        this.createRule(preparedSelectors.slice(i, i + this.selectorGroupSize)),
-        style.sheet.cssRules.length
-      );
+      let selector = preparedSelectors.slice(
+        i, i + this.selectorGroupSize
+      ).join(", ");
+      this.style.sheet.insertRule(selector + "{display: none !important;}",
+                                  this.style.sheet.cssRules.length);
     }
   },
 
   addSelectors(selectors, filters)
   {
     if (this.inline)
     {
       // Insert the style rules inline if we have been instructed by the
       // background page to do so. This is usually the case, except on platforms
-      // that do support user stylesheets via the chrome.tabs.insertCSS API
+      // that do support user stylesheets via the browser.tabs.insertCSS API
       // (Firefox 53 onwards for now and possibly Chrome in the near future).
       // Once all supported platforms have implemented this API, we can remove
       // the code below. See issue #5090.
       // Related Chrome and Firefox issues:
       // https://bugs.chromium.org/p/chromium/issues/detail?id=632009
       // https://bugzilla.mozilla.org/show_bug.cgi?id=1310026
-      this.addSelectorsInline(selectors, filters, "emulated");
+      this.addSelectorsInline(selectors, "emulated");
     }
     else
     {
-      this.injectStyleSheet(this.createRule(selectors));
+      browser.runtime.sendMessage({
+        type: "elemhide.injectSelectors",
+        selectors,
+        groupName: "emulated"
+      });
     }
 
     if (this.tracer)
       this.tracer.addSelectors(selectors, filters);
   },
 
   hideElements(elements, filters)
   {
     for (let element of elements)
       hideElement(element);
 
     if (this.tracer)
     {
-      chrome.runtime.sendMessage({
+      browser.runtime.sendMessage({
         type: "devtools.traceElemHide",
         selectors: [],
         filters
       });
     }
   },
 
   apply()
   {
-    chrome.runtime.sendMessage({type: "elemhide.getSelectors"}, response =>
+    browser.runtime.sendMessage({type: "elemhide.getSelectors"}, response =>
     {
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;
 
       if (response.trace)
         this.tracer = new ElementHidingTracer();
 
       this.inline = response.inline;
 
       if (this.inline)
-        this.addSelectorsInline(response.selectors);
+        this.addSelectorsInline(response.selectors, "standard");
 
       if (this.tracer)
         this.tracer.addSelectors(response.selectors);
 
       this.elemHideEmulation.apply(response.emulatedPatterns);
     });
   }
 };
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
 
   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);
 }
+
+window.checkCollapse = checkCollapse;
+window.elemhide = elemhide;
+window.typeMap = typeMap;
+window.getURLsFromElement = getURLsFromElement;