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 72 matching lines @@
     document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
 function ContentFiltering()
 {
   this.styles = new Map();
   this.tracer = null;
-  this.inline = true;
-
-  this.elemHideEmulation = new ElemHideEmulation(
-    () => {},
-    this.hideElements.bind(this)
-  );
+
+  this.elemHideEmulation = new ElemHideEmulation(this.hideElements.bind(this));
 }
 ContentFiltering.prototype = {
-  selectorGroupSize: 1024,
-
-  getStyleElement(groupName)
+  addRulesInline(rules, groupName = "standard", appendOnly = false)
   {
     let style = this.styles.get(groupName);
-    if (style)
-      return 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.
-    let 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 null;
-
-    this.styles.set(groupName, style);
-
-    return style;
-  },
-
-  addStyleSheetInline(styleSheet, groupName = "standard")
-  {
-    let style = this.getStyleElement(groupName);
-    if (style)
-      style.textContent = styleSheet;
-  },
-
-  addSelectorsInline(selectors, groupName, appendOnly = false)
-  {
-    let style = this.getStyleElement(groupName);
-    if (!style)
-      return;
-
-    if (!appendOnly)
+
+    if (style && !appendOnly)
     {
       while (style.sheet.cssRules.length > 0)
         style.sheet.deleteRule(0);
     }
 
-    // Chromium's Blink engine supports only up to 8,192 simple selectors, and
-    // even fewer compound selectors, in a rule. The exact number of selectors
-    // that would work depends on their sizes (e.g. "#foo .bar" has a
-    // size of 2). Since we don't know the sizes of the selectors here, we
-    // simply split them into groups of 1,024, based on the reasonable
-    // assumption that the average selector won't have a size greater than 8.
-    // The alternative would be to calculate the sizes of the selectors and
-    // divide them up accordingly, but this approach is more efficient and has
-    // worked well in practice. In theory this could still lead to some
-    // selectors not working on Chromium, but it is highly unlikely.
-    // See issue #6298 and https://crbug.com/804179
-    for (let i = 0; i < selectors.length; i += this.selectorGroupSize)
-    {
-      let selector = selectors.slice(i, i + this.selectorGroupSize).join(", ");
-      style.sheet.insertRule(selector + "{display: none !important;}",
-                             style.sheet.cssRules.length);
-    }
-  },
-
-  addSelectors(selectors, filters, groupName = "emulated", appendOnly = false)
-  {
-    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 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, groupName, appendOnly);
-    }
-    else
-    {
-      browser.runtime.sendMessage({
-        type: "content.injectSelectors",
-        selectors,
-        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);
+    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: "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);
+      }
+    });
   },
 
   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();
 
-      this.inline = response.inline;
-
-      if (this.inline)
-        this.addStyleSheetInline(response.styleSheet);
+      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 13 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;