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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 // Click-to-hide stuff
 var clickHide_activated = false;
 var clickHide_filters = null;
 var currentElement = null;
 var clickHideFilters = null;
 var highlightedElementsSelector = null;
 var clickHideFiltersDialog = null;
 var lastRightClickEvent = null;
 
-function createShadowRootIfPossible(element)
+function supportsShadowRoot(element)
 {
   if (!("createShadowRoot" in element))
-    return null;
-
-  // Those elements ignore insertion points.
-  if (element.localName == "applet"  || element.localName == 'input' ||
-      element.localName == "object"  || element.localName == 'embed' ||
-      element.localName == "details" || element.localName == "summary")
-    return null;

[Wladimir Palant, 2014/09/10 21:16:33]

Where does this list come from? This seems to be hardcoding some outdated state
of the Chrome implementation. For reference:
https://code.google.com/p/chromium/issues/detail?id=234020. The way I read it,
applet, input and embed have been fixed already - img and select are still
problematic however. See also: https://bugs.webkit.org/show_bug.cgi?id=102864

Given that these issues are being detected by W3C tests - can't we detect them
as well instead of hardcoding this?

[Sebastian Noack, 2014/09/22 11:55:42]

I finally found a way to test insertion points.

-
-  // There are some other elements (e.g. <textarea>), which don't even
+    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
   {
-    return element.createShadowRoot();
+    clone.createShadowRoot();
   }
   catch (e)
   {
-    return null;
-  }
+    return false;
+  }
+
+  // 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");
+  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");
   var boxShadow = "inset 0px 0px 5px " + shadowColor;
 
@@ skipping 19 matching lines @@
         "background-color",
         originalBackgroundColor,
         originalBackgroundColorPriority
       );
     };
   };
 
   var highlightWithShadowDOM = function()
   {
     var style = document.createElement("style");
-
+    style.textContent = ":host {" +
+      "box-shadow:" + boxShadow + " !important;" +
+      "background-color:" + backgroundColor + " !important;" +
+    "}";
+
+    var root = element.createShadowRoot();
     root.appendChild(document.createElement("shadow"));
     root.appendChild(style);
-
-    style.sheet.insertRule(":host { box-shadow: " + boxShadow + " !important; background-color: " + backgroundColor + " !important; }", 0);

[Wladimir Palant, 2014/09/10 21:16:33]

Use style.textContent = ... here for simplicity? Note that you can do it before
adding the style to the document then.

Also, please break that string into multiple lines to make it easier to read,
e.g.:

  ":host {\
    box-shadow: " + boxShadow + " !important;\
    background-color: " + backgroundColor + " !important;\
  }"

 
     element._unhighlight = function()
     {
       root.removeChild(style);
     };
   };
 
-  // If the element has important styles we have to replace the
-  // style attribute, and can't override them with shadow DOM.
-  if (originalBoxShadowPriority       == "important" ||
-      originalBackgroundColorPriority == "important")
-  {
-    highlightWithStyleAttribute();
-    return;
-  }
-
-  // Otherwise we use Shadow DOM if possbile to avoid side effects
-  // when the web page updates style while highlighted.
-  var root = createShadowRootIfPossible(element);
-  if (root)
+  // 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;
     }
   });
 }