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 73 matching lines @@
   {
     document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
 function ElemHide()
 {
   this.shadow = this.createShadowTree();
-  this.style = null;
-  this.emulatedStyle = null;
+  this.styles = new Map();
   this.tracer = null;
   this.inline = true;
   this.emulatedPatterns = null;
-  this.injectedSelectors = [];
 
   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;
   },
 
-  injectSelectors(selectors)
-  {
-    if (selectors.length == 0 && this.injectedSelectors.length == 0)
-      return;
-
-    let message = {type: "elemhide.injectSelectors"};
-
-    if (selectors.length > 0)
-      message.selectors = selectors;
-
-    if (this.injectedSelectors.length > 0)
-      message.replaceSelectors = this.injectedSelectors;

[Manish Jethani, 2017/10/14 14:23:22]

Renamed for clarity.

-
-    chrome.runtime.sendMessage(message);
-    this.injectedSelectors = selectors;
-  },
-
-  addSelectorsInline(selectors, filters, emulated)
-  {
-    if (emulated && this.emulatedStyle)

[Manish Jethani, 2017/10/14 14:23:21]

So there's a separate style sheet for emulated selectors and we remove it first
before adding a new one in its place.

-    {
-      this.emulatedStyle.parentNode.removeChild(this.emulatedStyle);
-      this.emulatedStyle = null;
+  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)
       return;
-
-    let style = emulated ? this.emulatedStyle : this.style;
 
     if (!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");
       (this.shadow || document.head ||
                       document.documentElement).appendChild(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)
         return;
 
-      if (emulated)
-        this.emulatedStyle = style;
-      else
-        this.style = style;
+      this.styles.set(groupName, style);
     }
 
     // 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)
     {
       for (let selector of selectors)
       {
@@ skipping 10 matching lines @@
     // 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)
     {
       let selector = preparedSelectors.slice(
         i, i + this.selectorGroupSize
       ).join(", ");
-      style.sheet.insertRule(selector + "{display: none !important;}",
-                             style.sheet.cssRules.length);
-    }
-
-    if (this.tracer)
-      this.tracer.addSelectors(selectors, filters);
+      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, true);

[Manish Jethani, 2017/10/14 14:23:21]

addSelectors is now only called for emulated selectors. For the normal selectors
we call addSelectorsInline directly.

+      this.addSelectorsInline(selectors, "emulated");
     }
     else
     {
-      this.injectSelectors(selectors);
-
-      if (this.tracer && selectors.length > 0)
-        this.tracer.addSelectors(selectors, filters);
-    }
+      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 (this.style && this.style.parentNode)

[Manish Jethani, 2017/10/14 14:23:22]

This needs to be parentNode, not parentElement, because an element added to a
shadow root has no parent element.

[Manish Jethani, 2017/10/14 21:35:33]

Actually, why is this needed? The styles here will only be added once. This code
is not going to run again, unless I'm missing something.

Removed.

[Manish Jethani, 2017/10/15 21:29:12]

OK, this code is called from composer.postload.js as well. But now these lines
are in addSelectorsInline, where they belong, so that case should be covered as
well.

-        this.style.parentNode.removeChild(this.style);
-      this.style = null;
-
       if (response.trace)
         this.tracer = new ElementHidingTracer();
 
       this.inline = response.inline;
 
       if (this.inline)
-        this.addSelectorsInline(response.selectors);
-      else if (this.tracer)
+        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;