Issue 242 - Use user style sheets on Chromium

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 10 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 info = require("info");
 
-const cssOriginSupported = "extensionTypes" in chrome &&
-                           "CSSOrigin" in chrome.extensionTypes;
-const userStyleSheetsSupported = cssOriginSupported ||
-                                 (info.platform == "chromium" &&
-                                  parseInt(info.platformVersion, 10) >= 60);
+// Chromium's support for tabs.removeCSS is still a work in progress and the
+// API is likely to be different from Firefox's; for now we just don't use it
+// at all, even if it's available.
+// See https://crbug.com/608854
+const styleSheetRemovalSupported = info.platform == "gecko";
 
-function hideElements(tabId, frameId, selectors)
+const selectorGroupSize = 1024;
+
+let userStyleSheetsSupported = true;
+
+function* splitSelectors(selectors)
 {
-  let options = {
-    code: selectors.join(", ") + "{display: none !important;}",
-    frameId,
-    matchAboutBlank: true,
-    runAt: "document_start"
-  };
-
-  if (cssOriginSupported)
-    options.cssOrigin = "user";
-
-  chrome.tabs.insertCSS(tabId, options);
+  // 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);
 }
 
-port.on("elemhide.getSelectors", (msg, sender) =>
+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)
+{
+  try
+  {
+    browser.tabs.insertCSS(tabId, {
+      code: styleSheet,
+      cssOrigin: "user",
+      frameId,
+      matchAboutBlank: true,
+      runAt: "document_start"
+    });
+  }
+  catch (error)
+  {
+    userStyleSheetsSupported = false;
+  }
+
+  return userStyleSheetsSupported;
+}
+
+function removeStyleSheet(tabId, frameId, styleSheet)
+{
+  if (!styleSheetRemovalSupported)
+    return;
+
+  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 = 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
+  // regardless.
+
+  // Add the new style sheet first to keep previously hidden elements from
+  // reappearing momentarily.
+  if (styleSheet && !addStyleSheet(tabId, frameId, styleSheet))
+    return false;
+
+  // Sometimes the old and new style sheets can be exactly the same. In such a
+  // case, do not remove the "old" style sheet, because it is in fact the new
+  // style sheet now.
+  if (oldStyleSheet && oldStyleSheet != styleSheet)
+    removeStyleSheet(tabId, frameId, oldStyleSheet);
+
+  frame.injectedStyleSheets.set(groupName, styleSheet);
+  return true;
+}
+
+port.on("elemhide.getSelectors", (message, sender) =>
 {
   let selectors = [];
   let emulatedPatterns = [];
   let trace = devtools && devtools.hasPanel(sender.page);
-  let inject = !userStyleSheetsSupported;
+  let inline = !userStyleSheetsSupported;
 
   if (!checkWhitelisted(sender.page, sender.frame,
                         RegExpFilter.typeMap.DOCUMENT |
                         RegExpFilter.typeMap.ELEMHIDE))
   {
     let hostname = extractHostFromFrame(sender.frame);
     let specificOnly = checkWhitelisted(sender.page, sender.frame,
                                         RegExpFilter.typeMap.GENERICHIDE);
 
     selectors = ElemHide.getSelectorsForDomain(
       hostname,
       specificOnly ? ElemHide.SPECIFIC_ONLY : ElemHide.ALL_MATCHING
     );
 
     for (let filter of ElemHideEmulation.getRulesForDomain(hostname))
       emulatedPatterns.push({selector: filter.selector, text: filter.text});
   }
 
-  if (!inject && selectors.length > 0)
-    hideElements(sender.page.id, sender.frame.id, selectors);
+  if (!inline && !updateFrameStyles(sender.page.id, sender.frame.id,
+                                    selectors, "standard"))
+  {
+    inline = true;
+  }
 
-  let response = {trace, inject, emulatedPatterns};
-  if (trace || inject)
+  let response = {trace, inline, emulatedPatterns};
+  if (trace || inline)
     response.selectors = selectors;
+
+  // If we can't remove user style sheets using tabs.removeCSS, we'll only keep
+  // adding them, which could cause problems with emulation filters as
+  // described in issue #5864. Instead, we can just ask the content script to
+  // add styles for emulation filters inline.
+  if (!styleSheetRemovalSupported)
+    response.inlineEmulated = true;
 
   return response;
 });
 
-port.on("elemhide.injectSelectors", (msg, sender) =>
+port.on("elemhide.injectSelectors", (message, sender) =>
 {
-  hideElements(sender.page.id, sender.frame.id, msg.selectors);
+  updateFrameStyles(sender.page.id, sender.frame.id, message.selectors,
+                    message.groupName);
 });