Issue 700 - Generate filters based on the style attribute as last resort

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 currentElement_boxShadow = null;
-var currentElement_backgroundColor;
 var clickHideFilters = null;
 var highlightedElementsSelector = null;
-var highlightedElementsBoxShadows = null;
-var highlightedElementsBGColors = null;
 var clickHideFiltersDialog = null;
 var lastRightClickEvent = null;
+
+function quote(value)
+{
+  return '"' + value.replace(/(["\\])/g, "\\$1") + '"';
+}
+
+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
+  {
+    clone.createShadowRoot();
+  }
+  catch (e)
+  {
+    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;
+
+  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);
+
+    element._unhighlight = function()
+    {
+      root.removeChild(style);
+    };
+  };
+
+  var highlightWithStyleAttribute = function()
+  {
+    var originalBoxShadow = element.style.getPropertyValue("box-shadow");
+    var originalBackgroundColor = element.style.getPropertyValue("background-color");
+
+    element.style.setProperty("box-shadow", boxShadow, "important");
+    element.style.setProperty("background-color", backgroundColor, "important");
+
+    element._unhighlight = function()
+    {
+      this.style.removeProperty("box-shadow");
+      this.style.setProperty(
+        "box-shadow",
+        originalBoxShadow,
+        originalBoxShadowPriority
+      );
+
+      this.style.removeProperty("background-color");
+      this.style.setProperty(
+        "background-color",
+        originalBackgroundColor,
+        originalBackgroundColorPriority
+      );
+    };
+  };
+
+  // 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)
+  {
+    element._unhighlight();
+    delete element._unhighlight;
+  }
+}
 
 // Highlight elements according to selector string. This would include
 // all elements that would be affected by proposed filters.
 function highlightElements(selectorString) {
-  if(highlightedElementsSelector)
-    unhighlightElements();
+  unhighlightElements();
 
   var highlightedElements = document.querySelectorAll(selectorString);
   highlightedElementsSelector = selectorString;
-  highlightedElementsBoxShadows = new Array();
-  highlightedElementsBGColors = new Array();
-
-  for(var i = 0; i < highlightedElements.length; i++) {
-    highlightedElementsBoxShadows[i] = highlightedElements[i].style.getPropertyValue("-webkit-box-shadow");
-    highlightedElementsBGColors[i] = highlightedElements[i].style.backgroundColor;
-    highlightedElements[i].style.setProperty("-webkit-box-shadow", "inset 0px 0px 5px #fd6738");
-    highlightedElements[i].style.backgroundColor = "#f6e1e5";
-  }
+
+  for(var i = 0; i < highlightedElements.length; i++)
+    highlightElement(highlightedElements[i], "#fd6738", "#f6e1e5");
 }
 
 // Unhighlight all elements, including those that would be affected by
 // the proposed filters
 function unhighlightElements() {
-  if(highlightedElementsSelector == null)
-    return;
-  var highlightedElements = document.querySelectorAll(highlightedElementsSelector);
-  for(var i = 0; i < highlightedElements.length; i++) {
-    highlightedElements[i].style.setProperty("-webkit-box-shadow", highlightedElementsBoxShadows[i]);
-    highlightedElements[i].style.backgroundColor = highlightedElementsBGColors[i];
-  }
-  highlightedElementsSelector = null;
+  if (highlightedElementsSelector)
+  {
+    Array.prototype.forEach.call(
+      document.querySelectorAll(highlightedElementsSelector),
+      unhighlightElement
+    );
+
+    highlightedElementsSelector = null;
+  }
 }
 
 // Gets the absolute position of an element by walking up the DOM tree,
 // adding up offsets.
 // I hope there's a better way because it just seems absolutely stupid
 // that the DOM wouldn't have a direct way to get this, given that it
 // has hundreds and hundreds of other methods that do random junk.
 function getAbsolutePosition(elt) {
   var l = 0;
   var t = 0;
@@ skipping 40 matching lines @@
     clickHide_deactivate();
     currentElement = savedElement;
   }
 
   clickHide_filters = filters;
 
   clickHideFiltersDialog = document.createElement("iframe");
   clickHideFiltersDialog.src = ext.getURL("block.html");
   clickHideFiltersDialog.setAttribute("style", "position: fixed !important; visibility: hidden; display: block !important; border: 0px !important;");
   clickHideFiltersDialog.style.WebkitBoxShadow = "5px 5px 20px rgba(0,0,0,0.5)";
-  clickHideFiltersDialog.style.zIndex = 99999;
+  clickHideFiltersDialog.style.zIndex = 0x7FFFFFFF;
 
   // Position in upper-left all the time
   clickHideFiltersDialog.style.left = "50px";
   clickHideFiltersDialog.style.top = "50px";
 
   // Make dialog partly transparent when mouse isn't over it so user has a better
   // view of what's going to be blocked
   clickHideFiltersDialog.onmouseout = function()
   {
     if (clickHideFiltersDialog)
@@ skipping 44 matching lines @@
 {
   if (clickHideFiltersDialog)
   {
     document.body.removeChild(clickHideFiltersDialog);
     clickHideFiltersDialog = null;
   }
 
   if(currentElement) {
     currentElement.removeEventListener("contextmenu", clickHide_elementClickHandler, false);
     unhighlightElements();
-    currentElement.style.setProperty("-webkit-box-shadow", currentElement_boxShadow);
-    currentElement.style.backgroundColor = currentElement_backgroundColor;
+    unhighlightElement(currentElement);
     currentElement = null;
     clickHideFilters = null;
   }
   unhighlightElements();
 
   clickHide_activated = false;
   clickHide_filters = null;
   if(!document)
     return; // This can happen inside a nuked iframe...I think
   document.removeEventListener("mouseover", clickHide_mouseOver, false);
@@ skipping 22 matching lines @@
 
   var target = e.target;
   while (target.parentNode && !(target.id || target.className || target.src || /:.+:/.test(target.getAttribute("style"))))
     target = target.parentNode;
   if (target == document.documentElement || target == document.body)
     target = null;
 
   if (target && target instanceof HTMLElement)
   {
     currentElement = target;
-    currentElement_boxShadow = target.style.getPropertyValue("-webkit-box-shadow");
-    currentElement_backgroundColor = target.style.backgroundColor;
-    target.style.setProperty("-webkit-box-shadow", "inset 0px 0px 5px #d6d84b");
-    target.style.backgroundColor = "#f8fa47";
-
+
+    highlightElement(target, "#d6d84b", "#f8fa47");
     target.addEventListener("contextmenu", clickHide_elementClickHandler, false);
   }
 }
 
 // No longer hovering over this element so unhighlight it
 function clickHide_mouseOut(e)
 {
   if (!clickHide_activated || !currentElement)
     return;
 
-  currentElement.style.setProperty("-webkit-box-shadow", currentElement_boxShadow);
-  currentElement.style.backgroundColor = currentElement_backgroundColor;
-
+  unhighlightElement(currentElement);
   currentElement.removeEventListener("contextmenu", clickHide_elementClickHandler, false);
 }
 
 // Selects the currently hovered-over filter or cancels selection
 function clickHide_keyDown(e)
 {
   if (!e.ctrlKey && !e.altKey && !e.shiftKey && e.keyCode == 13 /*DOM_VK_RETURN*/)
      clickHide_mouseClick(e);
   else if (!e.ctrlKey && !e.altKey && !e.shiftKey && e.keyCode == 27 /*DOM_VK_ESCAPE*/)
   {
-    clickHide_deactivate();
+    ext.backgroundPage.sendMessage(
+    {
+      type: "forward",
+      payload:
+      {
+        type: "clickhide-deactivate"
+      }
+    });
     e.preventDefault();
     e.stopPropagation();
   }
 }
 
 // When the user clicks, the currentElement is the one we want.
 // We should have ABP rules ready for when the
 // popup asks for them.
 function clickHide_mouseClick(e)
 {
   if (!currentElement || !clickHide_activated)
     return;
 
   var elt = currentElement;
   var url = null;
   if (currentElement.className && currentElement.className == "__adblockplus__overlay")
   {
     elt = currentElement.prisoner;
     url = currentElement.prisonerURL;
   }
   else if (elt.src)
     url = elt.src;
-
-  // Only normalize when the element contains a URL (issue 328.)
-  // The URL is not always normalized, so do it here
-  if (url)
-    url = normalizeURL(relativeToAbsoluteUrl(url));
 
   // Construct filters. The popup will retrieve these.
   // Only one ID
   var elementId = elt.id ? elt.id.split(' ').join('') : null;
   // Can have multiple classes, and there might be extraneous whitespace
   var elementClasses = null;
   if (elt.className)
     elementClasses = elt.className.replace(/\s+/g, ' ').replace(/^\s+|\s+$/g, '').split(' ');
 
   clickHideFilters = new Array();
   selectorList = new Array();
 
   var addSelector = function(selector)
   {
     clickHideFilters.push(document.domain + "##" + selector);
     selectorList.push(selector);
   };
 
   if (elementId)
     addSelector("#" + elementId);
 
-  if (elt.classList.length > 0)
+  if (elementClasses && elementClasses.length > 0)
   {
     var selector = "";
 
     for (var i = 0; i < elt.classList.length; i++)

[Thomas Greiner, 2014/11/04 09:53:21]

It's certainly not wrong to use elt.classList here but it's inconsistent since
we've been using elementClasses in all of the lines above.

[Sebastian Noack, 2014/11/04 14:51:07]

The patch has already been merged, but I might file a separate issue. However,
I'm in the favor of getting rid of elementClasses (which is initialized by
splitting elt.className with two regexes) and using .classList everywhere
instead. Does anybody know why the original code did it that way in the first
place?

[Thomas Greiner, 2014/11/04 15:15:53]

That's totally fine with me. Looks like the origin of this code can be traced
back to AdThwart when there was no support for classList yet.

[Sebastian Noack, 2014/11/04 15:44:54]

For reference, https://issues.adblockplus.org/ticket/1522

       selector += "." + elt.classList[i].replace(/([^\w-])/, "\\$1");

[Wladimir Palant, 2014/11/03 18:11:33]

Somehow I feel that changing Array.map() into a loop here was a change for
change's sake...

 
     addSelector(selector);
   }
 
   if (url)
   {
-    clickHideFilters.push(relativeToAbsoluteUrl(url));
-    selectorList.push(elt.localName + '[src="' + url + '"]');
+    clickHideFilters.push(url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||"));
+
+    var src = elt.getAttribute("src");
+    if (src)
+      selectorList.push('[src=' + quote(src) + ']');
   }
 
   // restore the original style, before generating the fallback filter that
   // will include the style, and to prevent highlightElements from saving those
-  currentElement.style.setProperty("-webkit-box-shadow", currentElement_boxShadow);
-  currentElement.style.backgroundColor = currentElement_backgroundColor;
+  unhighlightElement(currentElement);
 
   // as last resort, create a filter based on inline styles
-  if (clickHideFilters.length == 0 && elt.hasAttribute("style"))
-    addSelector(elt.localName + '[style="' + elt.getAttribute("style") + '"]');
+  if (clickHideFilters.length == 0)
+  {
+    var style = elt.getAttribute("style");
+    if (style)
+      addSelector(elt.localName + '[style=' + quote(style) + ']');
+  }
 
   // Show popup
   clickHide_showDialog(e.clientX, e.clientY, clickHideFilters);
 
   // Highlight the elements specified by selector in yellow
   highlightElements(selectorList.join(","));
   // Now, actually highlight the element the user clicked on in red
-  currentElement.style.setProperty("-webkit-box-shadow", "inset 0px 0px 5px #fd1708");
-  currentElement.style.backgroundColor = "#f6a1b5";
+  highlightElement(currentElement, "#fd1708", "#f6a1b5");
 
   // Make sure the browser doesn't handle this click
   e.preventDefault();
   e.stopPropagation();
 }
 
 // Extracts source URL from an IMG, OBJECT, EMBED, or IFRAME
 function getElementURL(elt) {
   // Check children of object nodes for "param" nodes with name="movie" that specify a URL
   // in value attribute
   var url;
   if(elt.localName.toUpperCase() == "OBJECT" && !(url = elt.getAttribute("data"))) {
     // No data attribute, look in PARAM child tags for a URL for the swf file
     var params = elt.querySelectorAll("param[name=\"movie\"]");
     // This OBJECT could contain an EMBED we already nuked, in which case there's no URL
     if(params[0])
       url = params[0].getAttribute("value");
     else {
       params = elt.querySelectorAll("param[name=\"src\"]");
       if(params[0])
         url = params[0].getAttribute("value");
     }
+
+    if (url)
+      url = resolveURL(url);
   } else if(!url) {
-    url = elt.getAttribute("src") || elt.getAttribute("href");
+    url = elt.src || elt.href;
   }
   return url;
 }
 
 // This function Copyright (c) 2008 Jeni Tennison, from jquery.uri.js
 // and licensed under the MIT license. See jquery-*.min.js for details.
 function removeDotSegments(u) {
   var r = '', m = [];
   if (/\./.test(u)) {
     while (u !== undefined && u !== '') {
@@ skipping 13 matching lines @@
         u = m[2];
         r = r + m[1];
       }
     }
     return r;
   } else {
     return u;
   }
 }
 
-// Does some degree of URL normalization
-function normalizeURL(url)
-{
-  var components = url.match(/(.+:\/\/.+?)\/(.*)/);
-  if(!components)
-    return url;
-  var newPath = removeDotSegments(components[2]);
-  if(newPath.length == 0)
-    return components[1];
-  if(newPath[0] != '/')
-    newPath = '/' + newPath;
-  return components[1] + newPath;
-}
-
-// Content scripts are apparently invoked on non-HTML documents, so we have to
-// check for that before doing stuff. |document instanceof HTMLDocument| check
-// will fail on some sites like planet.mozilla.org because WebKit creates
-// Document instances for XHTML documents, have to test the root element.
-if (document.documentElement instanceof HTMLElement)
+if (document instanceof HTMLDocument)
 {
   // Use a contextmenu handler to save the last element the user right-clicked on.
   // To make things easier, we actually save the DOM event.
   // We have to do this because the contextMenu API only provides a URL, not the actual
   // DOM element.
   document.addEventListener('contextmenu', function(e) {
     lastRightClickEvent = e;
   }, false);
 
   document.addEventListener("click", function(event)
@@ skipping 103 matching lines @@
         if(msg.filter === url)
         {
           // This request would have come from the chrome.contextMenu handler, so we
           // simulate the user having chosen the element to get rid of via the usual means.
           clickHide_activated = true;
           // FIXME: clickHideFilters is erased in clickHide_mouseClick anyway, so why set it?
           clickHideFilters = [msg.filter];
           // Coerce red highlighted overlay on top of element to remove.
           // TODO: Wow, the design of the clickHide stuff is really dumb - gotta fix it sometime
           currentElement = addElementOverlay(target);
-          currentElement_backgroundColor = target.style.backgroundColor;
           // clickHide_mouseOver(lastRightClickEvent);
           clickHide_mouseClick(lastRightClickEvent);
         }
         else
-          console.log("clickhide-new-filter: URLs don't match. Couldn't find that element.", request.filter, url, lastRightClickEvent.target.src);
+          console.log("clickhide-new-filter: URLs don't match. Couldn't find that element.", msg.filter, url, lastRightClickEvent.target.src);
         break;
       case "clickhide-init":
         if (clickHideFiltersDialog)
         {
           sendResponse({filters: clickHide_filters});
 
           clickHideFiltersDialog.style.width = msg.width + "px";
           clickHideFiltersDialog.style.height = msg.height + "px";
           clickHideFiltersDialog.style.visibility = "visible";
         }
         break;
       case "clickhide-move":
         if (clickHideFiltersDialog)
         {
-          clickHideFiltersDialog.style.left = (parseInt(clickHideFiltersDialog.style.left, 10) + request.x) + "px";
-          clickHideFiltersDialog.style.top = (parseInt(clickHideFiltersDialog.style.top, 10) + request.y) + "px";
+          clickHideFiltersDialog.style.left = (parseInt(clickHideFiltersDialog.style.left, 10) + msg.x) + "px";
+          clickHideFiltersDialog.style.top = (parseInt(clickHideFiltersDialog.style.top, 10) + msg.y) + "px";
         }
         break;
       case "clickhide-close":
         if (clickHideFiltersDialog)
         {
           // Explicitly get rid of currentElement
           if (msg.remove && currentElement && currentElement.parentNode)
             currentElement.parentNode.removeChild(currentElement);
-
-          clickHide_deactivate();
         }
+        clickHide_deactivate();
         break;
       default:
         sendResponse({});
         break;
     }
   });
-}
+
+  if (window == window.top)
+    ext.backgroundPage.sendMessage({type: "report-html-page"});
+}