Issue 3584 - Work around WebKit uppercase ID matching bug

abp2blocklist.js

Index: abp2blocklist.js
diff --git a/abp2blocklist.js b/abp2blocklist.js
index 71d227f3e66f9a9f9c044409840967523982d923..08a0fff66a9e5b52a2057d28d4d03167fe478f8f 100644
--- a/abp2blocklist.js
+++ b/abp2blocklist.js
@@ -254,6 +254,56 @@ function hasNonASCI(obj)
   return false;
 }
 
+function convertIDSelectorsToAttributeSelectors(selector)
+{
+  // First we figure out where all the IDs are
+  let sep = "";
+  let start = null;
+  let positions = [];
+  for (let i = 0; i < selector.length; i++)
+  {
+    let chr = selector[i];
+
+    if (chr == "\\")        // ignore escaped characters
+      i++;
+    else if (chr == sep)    // don't split within quoted text

[Sebastian Noack, 2016/02/17 15:24:37]

Nit: This code has bee ncopied from cssProperties.js, however this comment isn't
accurrate in the context here. Perhaps "touch" instead of "split"?

[kzar, 2016/02/17 15:35:03]

Done.

+      sep = "";             // e.g. [attr=","]
+    else if (sep == "")
+    {
+      if (chr == '"' || chr == "'")
+        sep = chr;
+      else if (start == null)  // look for the start of an ID
+      {
+        if (chr == "#")
+          start = i;
+      }
+      else if (chr < "0" && chr != "-" ||
+               chr > "9" && chr < "A" ||
+               chr > "Z" && chr != "_" && chr < "a" ||
+               chr > "z" && chr < "\x80") // look for the end of the ID
+      {
+        positions.push({start: start, end: i});
+        start = null;
+      }
+    }
+  }
+  if (start != null)
+    positions.push({start: start, end: selector.length});
+
+  // Now replace them all with the [id="someID"] form
+  let newSelector = "";

[Sebastian Noack, 2016/02/17 15:24:37]

Concatenating strings in a loop is expensive. You usually would use an array and
join it afterwards.

[kzar, 2016/02/17 15:35:04]

Done.

+  let position = 0;
+  for (let ID of positions)

[Sebastian Noack, 2016/02/17 15:24:37]

Nit: The variable shouldn't start with uppercase. "position" or "pos" seems to
be a better name here anyway.

[kzar, 2016/02/17 15:35:04]

Done.

+  {
+    newSelector += selector.substring(position, ID.start);
+    newSelector += '[id=' + selector.substring(ID.start + 1, ID.end) + ']';
+    position = ID.end;
+  }
+  newSelector += selector.substring(position);
+
+  return newSelector;
+}
+
 function logRules()
 {
   let rules = [];
@@ -286,10 +336,16 @@ function logRules()
   {
     while (selectors.length)
     {
+      let selector = selectors.splice(0, selectorLimit).join(", ");
+
+      // As of Safari 9.0 element IDs are matched as lowercase. We work around
+      // this by converting to the attribute format [id="elementID"]
+      selector = convertIDSelectorsToAttributeSelectors(selector);
+
       addRule({
         trigger: {"url-filter": matchDomain},
         action: {type: "css-display-none",
-                 selector: selectors.splice(0, selectorLimit).join(", ")}
+                 selector: selector}
       });
     }
   });