Issue 1325 - Use Shadow DOM if possible when highlighting page elements

include.postload.js

 /*
  * This file is part of Adblock Plus <http://adblockplus.org/>,
  * Copyright (C) 2006-2014 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 16 matching lines @@
 function supportsShadowRoot(element)
 {
   if (!("createShadowRoot" in element))
     return false;
 
   // There are some elements (e.g. <textarea>), which don't
   // support author created shadow roots and throw an exception.
   var clone = element.cloneNode(false);
   try
   {
-    var root = clone.createShadowRoot();
+    clone.createShadowRoot();
   }
   catch (e)
   {
     return false;
   }
 
-  // There are some elements (r.g. <input>), which support
-  // author created shadow roots, but no insertion points.
-  var child = document.createTextNode('');
+  // There are some elements (e.g. <input>), which support
+  // author created shadow roots, but ignore insertion points.
+  var child = document.createTextNode("");
   clone.appendChild(child);
 
-  var shadow = document.createElement('shadow');
-  root.appendChild(shadow);
+  var shadow = document.createElement("shadow");
+  clone.shadowRoot.appendChild(shadow);
 
   return shadow.getDistributedNodes()[0] == child;
 }
 
 function highlightElement(element, shadowColor, backgroundColor)
 {
   unhighlightElement(element);
 
   var originalBoxShadowPriority = element.style.getPropertyPriority("box-shadow");
   var originalBackgroundColorPriority = element.style.getPropertyPriority("background-color");
@@ skipping 36 matching lines @@
     var root = element.createShadowRoot();
     root.appendChild(document.createElement("shadow"));
     root.appendChild(style);
 
     element._unhighlight = function()
     {
       root.removeChild(style);
     };
   };
 
-  if (supportsShadowRoot(element) &&  // Use Shadow DOM if posibble to avoid
-                                      // side effects when the web page updates
-                                      // style while highlighted.
-
-      // However, if the element has important styles we have to replace
-      // the style attribute, and can't override them with shadow DOM.
-      originalBoxShadowPriority       != "important" &&
-      originalBackgroundColorPriority != "important")
+  // Use shadow DOM if posibble to avoid side effects when the
+  // web page updates style while highlighted. However, if the
+  // element has important styles we can't override them with shadow DOM.
+  if (supportsShadowRoot(element) && originalBoxShadowPriority       != "important" &&
+                                     originalBackgroundColorPriority != "important")
     highlightWithShadowDOM();
   else
     highlightWithStyleAttribute();
 }
 
 
 function unhighlightElement(element)
 {
   if ("_unhighlight" in element)
   {
@@ skipping 518 matching lines @@
 
           clickHide_deactivate();
         }
         break;
       default:
         sendResponse({});
         break;
     }
   });
 }