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 11 matching lines @@
 const {RegExpFilter} = require("filterClasses");
 const {ElemHide} = require("elemHide");
 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 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;
+}
 
 function addStyleSheet(tabId, frameId, styleSheet)
 {
   browser.tabs.insertCSS(tabId, {
     code: styleSheet,
     cssOrigin: "user",
     frameId,
     matchAboutBlank: true,
     runAt: "document_start"
   });
 }
 
 function removeStyleSheet(tabId, frameId, styleSheet)
 {
   browser.tabs.removeCSS(tabId, {
     code: styleSheet,
     cssOrigin: "user",
     frameId,
     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
   // if they're the same, but the old style sheet can be a leftover from a
   // previous instance of the frame. We must add the new style sheet
@@ skipping 45 matching lines @@
     response.selectors = selectors;
 
   return response;
 });
 
 port.on("elemhide.injectSelectors", (message, sender) =>
 {
   updateFrameStyles(sender.page.id, sender.frame.id, message.selectors,
                     message.groupName);
 });