Issue 6999 - Generate style sheets in background page

lib/contentFiltering.js

Index: lib/contentFiltering.js
===================================================================
--- a/lib/contentFiltering.js
+++ b/lib/contentFiltering.js
@@ -15,17 +15,18 @@
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 /** @module contentFiltering */
 
 "use strict";
 
 const {RegExpFilter} = require("../adblockpluscore/lib/filterClasses");
-const {ElemHide, createStyleSheet} = require("../adblockpluscore/lib/elemHide");
+const {ElemHide, createStyleSheet,
+       rulesFromStyleSheet} = require("../adblockpluscore/lib/elemHide");
 const {ElemHideEmulation} = require("../adblockpluscore/lib/elemHideEmulation");
 const {filterNotifier} = require("../adblockpluscore/lib/filterNotifier");
 const {Snippets, compileScript} = require("../adblockpluscore/lib/snippets");
 const {checkWhitelisted} = require("./whitelisting");
 const {extractHostFromFrame} = require("./url");
 const {port} = require("./messaging");
 const {HitLogger, logRequest} = require("./hitLogger");
 const info = require("info");
@@ -92,22 +93,19 @@
   browser.tabs.removeCSS(tabId, {
     code: styleSheet,
     cssOrigin: "user",
     frameId,
     matchAboutBlank: true
   });
 }
 
-function updateFrameStyles(tabId, frameId, selectors, groupName, appendOnly)
+function updateFrameStyles(tabId, frameId, styleSheet, groupName = "standard",
+                           appendOnly = false)
 {
-  let styleSheet = "";
-  if (selectors.length > 0)
-    styleSheet = createStyleSheet(selectors);
-
   let frame = ext.getFrame(tabId, frameId);
   if (!frame)
     return false;
 
   if (!frame.injectedStyleSheets)
     frame.injectedStyleSheets = new Map();
 
   let oldStyleSheet = frame.injectedStyleSheets.get(groupName);
@@ -189,17 +187,17 @@
     // tabs.insertCSS for why we catch any error here and simply
     // return a rejected promise.
     return Promise.reject(error);
   }
 }
 
 port.on("content.applyFilters", (message, sender) =>
 {
-  let selectors = [];
+  let styleSheet = {code: "", selectors: []};
   let emulatedPatterns = [];
   let trace = HitLogger.hasListener(sender.page.id);
   let inline = !userStyleSheetsSupported;
 
   let {elemhide, snippets} = message.filterTypes ||
                              {elemhide: true, snippets: true};
 
   if (!checkWhitelisted(sender.page, sender.frame, null,
@@ -226,40 +224,49 @@
       }
     }
 
     if (elemhide && !checkWhitelisted(sender.page, sender.frame, null,
                                       RegExpFilter.typeMap.ELEMHIDE))
     {
       let specificOnly = checkWhitelisted(sender.page, sender.frame, null,
                                           RegExpFilter.typeMap.GENERICHIDE);
-      selectors = ElemHide.getSelectorsForDomain(docDomain, specificOnly);
+      styleSheet = ElemHide.generateStyleSheetForDomain(docDomain, specificOnly,
+                                                        trace);
 
       for (let filter of ElemHideEmulation.getRulesForDomain(docDomain))
         emulatedPatterns.push({selector: filter.selector, text: filter.text});
     }
   }
 
   if (!inline && !updateFrameStyles(sender.page.id, sender.frame.id,
-                                    selectors, "standard"))
+                                    styleSheet.code))
   {
     inline = true;
   }
 
   let response = {trace, inline, emulatedPatterns};
-  if (trace || inline)
-    response.selectors = selectors;
+
+  if (inline)
+    response.rules = [...rulesFromStyleSheet(styleSheet.code)];

[Sebastian Noack, 2018/10/02 17:14:02]

Why do we have to copy this array?

[Sebastian Noack, 2018/10/02 17:15:38]

Ah, just figured it's a generator. I think I personally, might rather use
Array.from(), or does the rest-operator perform better?

[Manish Jethani, 2018/10/02 17:23:24]

Yes, the spread operator is significantly faster (actually it's much, much
faster) [1]

There's also a difference: the spread operator simply iterates over the
"iterable" (defined as an object that has a Symbol.iterator method), whereas
Array.from also additionally supports "array-like" objects (objects with a
length property and so on).

[1]: https://jsperf.com/set-iterator-vs-foreach/4

[Sebastian Noack, 2018/10/02 17:28:21]

I'd take that benchmark with a grain of salt, since it's testing against a Set
object (which it the spread operator might be optimized for), not a generic
generator. But for the case here, I guess, it doesn't matter too much.

+  else if (trace)

[Sebastian Noack, 2018/10/02 17:14:02]

Doesn't the content scripts needs the original selectors (in order for the hit
logger to find the respective filters) if tracing is active, regardless of the
"inline" flag?

[Manish Jethani, 2018/10/02 19:07:46]

Ah, you're right.

Done.

+    response.selectors = styleSheet.selectors;
 
   return response;
 });
 
 port.on("content.injectSelectors", (message, sender) =>
 {
-  updateFrameStyles(sender.page.id, sender.frame.id, message.selectors,
-                    message.groupName, message.appendOnly);
+  let styleSheet = createStyleSheet(message.selectors);
+  if (!userStyleSheetsSupported ||
+      !updateFrameStyles(sender.page.id, sender.frame.id, styleSheet,
+                         message.groupName, message.appendOnly))
+  {
+    return [...rulesFromStyleSheet(styleSheet)];
+  }
 });
 
 fetch(browser.extension.getURL("/snippets.js"), {cache: "no-cache"})
 .then(response => response.ok ? response.text() : "")
 .then(text =>
 {
   snippetsLibrarySource = text;
 });