Issue 1802 - Fix element hiding filters with multiple CSS selectors when using shadow DOM

include.preload.js

 /*
- * This file is part of Adblock Plus <http://adblockplus.org/>,
- * Copyright (C) 2006-2014 Eyeo GmbH
+ * This file is part of Adblock Plus <https://adblockplus.org/>,
+ * Copyright (C) 2006-2015 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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
@@ skipping 131 matching lines @@
           // because we don't know how many rules are already in there
           stylesheet.addRule(selector, "display: none !important;");
         }
       }
     );
   });
 
   observer.observe(style.parentNode, {childList: true});
 }
 
+function convertSelectorsForShadowDOM(selectors)
+{
+  var result = [];
+  var prefix = "::content ";
+
+  for (var i = 0; i < selectors.length; i++)
+  {
+    var selector = selectors[i];
+    var start = 0;
+    var sep = "";
+
+    for (var j = 0; j < selector.length; j++)
+    {
+      var chr = selector[j];
+      if (chr == "\\")
+        j++;
+      else if (chr == sep)
+        sep = "";
+      else if (chr == '"' || chr == "'")
+        sep = chr;
+      else if (chr == "," && sep == "")
+      {
+        result.push(prefix + selector.substring(start, j));
+        start = j + 1;
+      }
+    }
+
+    result.push(prefix + selector.substring(start));
+  }
+
+  return result;
+}
+
 function init(document)
 {
   // Use Shadow DOM if available to don't mess 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).
   //
   // Also, we can't use shadow DOM on Google Docs, since it breaks printing
   // there (#1770).
   var shadow = null;
   if ("createShadowRoot" in document.documentElement && document.domain != "docs.google.com")
   {
     shadow = document.documentElement.createShadowRoot();
     shadow.appendChild(document.createElement("shadow"));
   }
 
   // Sets the currently used CSS rules for elemhide filters
   var setElemhideCSSRules = function(selectors)
   {
     if (selectors.length == 0)
       return;
 
     var style = document.createElement("style");
     style.setAttribute("type", "text/css");
 
     if (shadow)
     {
       shadow.appendChild(style);
-
-      // Add ::content pseudo-selector (to break out of the shadow DOM)
-      // before every selector, also considering element hiding filters
-      // that specify multiple CSS selectors seperated by comma, while
-      // ignoring commas inside quotes.
-      for (var i = 0; i < selectors.length; i++)
-        selectors[i] = selectors[i].replace(/(\s*)((?:[^,"']|"(?:\\"|[^"])*"|'(?:\\'|[^'])*')+)/g, "$1::content $2");

[Wladimir Palant, 2015/01/19 20:49:17]

Trying to parse CSS selectors via regular expressions seems to be a lost cause
to me, in the best scenario we will merely end up with code that is
unmaintainable. In addition to being barely readable, this particular regular
expression has at least the following issues:

* It treats backslashes in strings incorrectly (e.g. foo['as\\'], bar['']).
* It doesn't consider escaping outside of strings (e.g. "foo[bar\\,bas]").

People have written huge CSS selector parsers, CSS really isn't simple. Granted,
for our use case this complexity might not be required. In fact, we don't even
need to recognize CSS escaping properly - it's enough to consider the next
character to be escaped. I have a strong suspicion that a state machine would be
more readable and maintainable here. We wouldn't need too many states: looks
like SELECTOR and STRING would be sufficient (the latter either with ' or " as
end character). A backslash should simply make the state machine skip the next
character.

Note that http://dev.w3.org/csswg/css-syntax-3/ specifies a state machine. The
hard part is figuring out which parts of it we need.

[Wladimir Palant, 2015/01/19 20:58:15]

Just my quick attempt at writing that state machine:

function getSelectors(str)
{
  var result = [];
  var start = 0;
  var separator = "";
  for (var i = 0; i < str.length; i++)
  {
    var char = str[i];
    if (char == "\\")
      i++;              // Escaped char
    else if (char == separator)
      separator = "";   // String ended
    else if (char == "'" || char == '"')
      separator = char; // String started
    else if (separator == "" && char == ",")
    {                   // Selector ended
      result.push(str.substring(start, i));
      start = i + 1;
    }
  }
  if (start < str.length)
    result.push(str.substring(start, str.length));
  return result;
}

[Sebastian Noack, 2015/01/22 07:37:12]

Unfortunately it seems we in fact need a state machine here. There you go.

+      selectors = convertSelectorsForShadowDOM(selectors);
     }
     else
     {
       // Try to insert the style into the <head> tag, inserting directly under the
       // document root breaks dev tools functionality:
       // http://code.google.com/p/chromium/issues/detail?id=178109
       (document.head || document.documentElement).appendChild(style);
     }
 
     var setRules = function()
@@ skipping 45 matching lines @@
   }, true);
 
   ext.backgroundPage.sendMessage({type: "get-selectors"}, setElemhideCSSRules);
 }
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   init(document);
 }