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)

[Sebastian Noack, 2018/09/28 15:33:41]

What is this code still good for if stylesheets are now generated by the
background page?

[Manish Jethani, 2018/09/28 16:04:44]

This is for element collapsing. If this.inline is set (no user style sheets) and
an element needs to be collapsed, it comes here.

We could do .one of two things here: (1) don't do element collapsing on
platforms that don't support user style sheets, or (2) send the selectors to the
background page anyway, but ask it to return the generated style sheet back so
we just inject it here.

[Sebastian Noack, 2018/09/28 16:09:06]

Please correct me if I'm wrong, but wouldn't it simplify the logic (on the
expense of a redundant round trip to the background page but that is fine if
it's just for platforms that don't support user stylesheets), if we send the
selector back to the background page (just like we do on platforms that support
user stylesheets), and then have the generated CSS sent back to the content
script (just like we do for element hiding)?

[Manish Jethani, 2018/09/28 16:12:51]

Yes, I agree. What's more is that it's going to be one selector, and the
returned style sheet will also have one selector. We can simply append it to the
existing style sheet, if any, in the content script.

[Sebastian Noack, 2018/09/28 16:32:50]

Sounds good. Mind implementing those changes?

[Manish Jethani, 2018/09/28 20:20:23]

I thought about this a little more. It's always going to be one selector that
needs to be injected at a time. We don't have to go to the background page this,
we can just generate a style sheet like so:

  selectors.join(", ") + " {display: none !important;}\n"

That's all.

Please see the latest patch.

-    {
-      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: "elemhide.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;