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

include.preload.js

Index: include.preload.js
===================================================================
--- a/include.preload.js
+++ b/include.preload.js
@@ -182,8 +182,12 @@
     {
       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] = "::content " + selectors[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.

     }
     else
     {