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

lib/cssInjection.js

Index: lib/cssInjection.js
===================================================================
--- a/lib/cssInjection.js
+++ b/lib/cssInjection.js
@@ -24,16 +24,40 @@
 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 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)
+    yield selectors.slice(i, i + selectorGroupSize);
+}
+
+function* createRules(selectors)
+{
+  for (let selectorGroup of splitSelectors(selectors))
+    yield selectorGroup.join(", ") + " {display: none !important;}";
+}
+
+function createStyleSheet(selectors)
+{
+  return Array.from(createRules(selectors)).join("\n");
+}
 
 function addStyleSheet(tabId, frameId, styleSheet)
 {
   browser.tabs.insertCSS(tabId, {
     code: styleSheet,
     cssOrigin: "user",
     frameId,
     matchAboutBlank: true,
@@ -50,17 +74,17 @@
     matchAboutBlank: true
   });
 }
 
 function updateFrameStyles(tabId, frameId, selectors, groupName)
 {
   let styleSheet = null;
   if (selectors.length > 0)
-    styleSheet = selectors.join(", ") + "{display: none !important;}";
+    styleSheet = createStyleSheet(selectors);
 
   let frame = ext.getFrame(tabId, frameId);
   if (!frame.injectedStyleSheets)
     frame.injectedStyleSheets = new Map();
 
   let oldStyleSheet = frame.injectedStyleSheets.get(groupName);
 
   // Ideally we would compare the old and new style sheets and skip this code