Issue 6999 - Generate style sheets in background page

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 207 matching lines @@
     },
     collapse =>
     {
       if (collapse)
       {
         if (selector)
         {
           if (!collapsingSelectors.has(selector))
           {
             collapsingSelectors.add(selector);
-            contentFiltering.addSelectors([selector], null, "collapsing", true);
+            contentFiltering.addSelectors([selector], "collapsing", true);
           }
         }
         else
         {
           hideElement(element);
         }
       }
     }
   );
 }
@@ skipping 12 matching lines @@
   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);
   else
     this.trace();
 }
 ElementHidingTracer.prototype = {
-  addSelectors(selectors, filters)
-  {
-    let pairs = selectors.map((sel, i) => [sel, filters && filters[i]]);
-
+  addSelectors(selectors)
+  {
     if (document.readyState != "loading")
-      this.checkNodes([document], pairs);
-
-    this.selectors.push(...pairs);
-  },
-
-  checkNodes(nodes, pairs)
-  {
-    let selectors = [];
-    let filters = [];
-
-    for (let [selector, filter] of pairs)
+      this.checkNodes([document], selectors);
+
+    this.selectors.push(...selectors);
+  },
+
+  checkNodes(nodes, selectors)
+  {
+    let effectiveSelectors = [];
+
+    for (let selector of selectors)
     {
       nodes: for (let node of nodes)
       {
         for (let element of node.querySelectorAll(selector))
         {
           // 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")
           {
-            // For regular element hiding, we don't know the exact filter,
-            // but the background page can find it with the given selector.
-            // In case of element hiding emulation, the generated selector
-            // we got here is different from the selector part of the filter,
-            // but in this case we can send the whole filter text instead.
-            if (filter)
-              filters.push(filter);
-            else
-              selectors.push(selector);
-
+            effectiveSelectors.push(selector);
             break nodes;
           }
         }
       }
     }
 
-    if (selectors.length > 0 || filters.length > 0)
+    if (effectiveSelectors.length > 0)
     {
       browser.runtime.sendMessage({
         type: "hitLogger.traceElemHide",
-        selectors, filters
+        selectors: effectiveSelectors,
+        filters: []
       });
     }
   },
 
   onTimeout()
   {
     this.checkNodes(this.changedNodes, this.selectors);
     this.changedNodes = [];
     this.timeout = null;
   },
@@ skipping 70 matching lines @@
   disconnect()
   {
     document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
 function ContentFiltering()
 {
+  this.styles = new Map();
   this.tracer = null;
 
-  this.elemHideEmulation = new ElemHideEmulation(
-    this.addSelectors.bind(this),
-    this.hideElements.bind(this)
-  );
+  this.elemHideEmulation = new ElemHideEmulation(this.hideElements.bind(this));
 }
 ContentFiltering.prototype = {
-  addSelectors(selectors, filters, groupName = "emulated", appendOnly = false)
+  addRulesInline(rules, groupName = "standard", appendOnly = false)
+  {
+    let style = this.styles.get(groupName);
+
+    if (style && !appendOnly)
+    {
+      while (style.sheet.cssRules.length > 0)
+        style.sheet.deleteRule(0);
+    }
+
+    if (rules.length == 0)
+      return;
+
+    if (!style)
+    {
+      // Create <style> element lazily, only if we add styles. Add it 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");
+      (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 may stay null, after adding the
+      // <style> element.
+      if (!style.sheet)
+        return;
+
+      this.styles.set(groupName, style);
+    }
+
+    for (let rule of rules)
+      style.sheet.insertRule(rule, style.sheet.cssRules.length);
+  },
+
+  addSelectors(selectors, groupName = "standard", appendOnly = false)
   {
     browser.runtime.sendMessage({
-      type: "elemhide.injectSelectors",
+      type: "content.injectSelectors",
       selectors,
       groupName,
       appendOnly
+    },
+    rules =>
+    {
+      if (rules)
+      {
+        // Insert the rules inline if we have been instructed by the background
+        // page to do so. This is rarely the case, except on platforms that do
+        // not support user stylesheets via the browser.tabs.insertCSS API
+        // (Firefox <53, Chrome <66, and Edge).
+        // 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.addRulesInline(rules, groupName, appendOnly);
+      }
     });
-
-    // Only trace selectors that are based directly on hiding filters
-    // (i.e. leave out collapsing selectors).
-    if (this.tracer && groupName != "collapsing")
-      this.tracer.addSelectors(selectors, filters);
   },
 
   hideElements(elements, filters)
   {
     for (let element of elements)
       hideElement(element);
 
     if (this.tracer)
     {
       browser.runtime.sendMessage({
@@ skipping 12 matching lines @@
     },
     response =>
     {
       if (this.tracer)
         this.tracer.disconnect();
       this.tracer = null;
 
       if (response.trace)
         this.tracer = new ElementHidingTracer();
 
+      if (response.inline)
+        this.addRulesInline(response.rules);
+
       if (this.tracer)
         this.tracer.addSelectors(response.selectors);
 
       this.elemHideEmulation.apply(response.emulatedPatterns);
     });
   }
 };
 
 if (document instanceof HTMLDocument)
 {
@@ skipping 12 matching lines @@
     let element = event.target;
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
   }, true);
 }
 
 window.checkCollapse = checkCollapse;
 window.contentFiltering = contentFiltering;
 window.typeMap = typeMap;
 window.getURLsFromElement = getURLsFromElement;