Issue 6298 - Split injected CSS hiding rule into groups of 1,024 selectors

lib/cssInjection.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 13 matching lines @@
 const {ElemHideEmulation} = require("elemHideEmulation");
 const {checkWhitelisted} = require("whitelisting");
 const {extractHostFromFrame} = require("url");
 const {port} = require("messaging");
 const devtools = require("devtools");
 
 const userStyleSheetsSupported = "extensionTypes" in browser &&
                                  "CSSOrigin" in browser.extensionTypes;
 const selectorGroupSize = 1024;
 
+function* splitSelectors(selectors)
+{
+  // 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 += selectorGroupSize)
+    yield selectors.slice(i, i + selectorGroupSize);
+}
+
+function* createRules(selectors)
+{
+  for (let selectorGroup of splitSelectors(selectors))
+    yield selectorGroup.join(", ") + " {display: none !important;}";
+}
+
 function createStyleSheet(selectors)
 {
-  let styleSheet = "";
-
-  // Chromium's Blink engine supports only up to 8,192 selectors; more
-  // specifically, it ignores any selectors that start at index 8192 or beyond
-  // in the list of plain selectors. In order to avoid spilling outside of this
-  // range, we simply add multiple rules in groups of up to 1,024 selectors
-  // each.
-  // See issue #6298 and https://crbug.com/804179
-  for (let i = 0; i < selectors.length; i += selectorGroupSize)
-  {
-    styleSheet += selectors.slice(i, i + selectorGroupSize).join(", ") +
-                  " {display: none !important;}\n";
-  }
-
-  return styleSheet;
+  return Array.from(createRules(selectors)).join("\n");
 }
 
 function addStyleSheet(tabId, frameId, styleSheet)
 {
   browser.tabs.insertCSS(tabId, {
     code: styleSheet,
     cssOrigin: "user",
     frameId,
     matchAboutBlank: true,
     runAt: "document_start"
@@ skipping 73 matching lines @@
     response.selectors = selectors;
 
   return response;
 });
 
 port.on("elemhide.injectSelectors", (message, sender) =>
 {
   updateFrameStyles(sender.page.id, sender.frame.id, message.selectors,
                     message.groupName);
 });