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

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 335 matching lines @@
   this.tracer = null;
   this.inline = true;
   this.emulatedPatterns = null;
 
   this.elemHideEmulation = new ElemHideEmulation(
     this.addSelectors.bind(this),
     this.hideElements.bind(this)
   );
 }
 ElemHide.prototype = {
-  selectorGroupSize: 200,
+  selectorGroupSize: 1024,
 
   createShadowTree()
   {
     // Use Shadow DOM if available as to not mess with with web pages that
     // rely on the order of their own <style> tags (#309). However, creating
     // a shadow root breaks running CSS transitions. So we have to create
     // the shadow root before transistions might start (#452).
     if (!("createShadowRoot" in document.documentElement))
       return null;
 
@@ skipping 56 matching lines @@
         let subSelectors = splitSelector(selector);
         for (let subSelector of subSelectors)
           preparedSelectors.push("::content " + subSelector);
       }
     }
     else
     {
       preparedSelectors = selectors;
     }
 
-    // Chromium's Blink engine supports only up to 8,192 selectors; more

[Manish Jethani, 2018/01/25 17:15:02]

I've just updated this comment here because the previous one was outdated.

-    // 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
-    // 200 selectors each.
+    // 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 < preparedSelectors.length; i += this.selectorGroupSize)
     {
       let selector = preparedSelectors.slice(
         i, i + this.selectorGroupSize
       ).join(", ");
       this.style.sheet.insertRule(selector + "{display: none !important;}",
                                   this.style.sheet.cssRules.length);
     }
   },
@@ skipping 82 matching lines @@
     let element = event.target;
     if (/^i?frame$/.test(element.localName))
       checkCollapse(element);
   }, true);
 }
 
 window.checkCollapse = checkCollapse;
 window.elemhide = elemhide;
 window.typeMap = typeMap;
 window.getURLsFromElement = getURLsFromElement;