Issue 704 - Generate protocol-agnostic request blocking filters with "Block element"

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 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 105 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 14 matching lines @@
   clickHide_mouseClick(ev);
 }
 
 // Hovering over an element so highlight it
 function clickHide_mouseOver(e)
 {
   if (clickHide_activated == false)
     return;
 
   var target = e.target;
-  while (target.parentNode && !(target.id || target.className || target.src || /:.+:/.test(target.getAttribute("style"))))
+  while (target.parentNode && !(target.id || target.className || target.src))
     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*/)
   {
@@ skipping 24 matching lines @@
   // 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)
-  {
+  if (elementId)
+  {
+    clickHideFilters.push(document.domain + "###" + elementId);
+    selectorList.push("#" + elementId);
+  }
+  if (elementClasses && elementClasses.length > 0)
+  {
+    var selector = elementClasses.map(function(elClass)
+    {
+      return "." + elClass.replace(/([^\w-])/, "\\$1");
+    }).join("");
+
     clickHideFilters.push(document.domain + "##" + selector);
     selectorList.push(selector);
-  };
-
-  if (elementId)
-    addSelector("#" + elementId);
-
-  if (elt.classList.length > 0)
-  {
-    var selector = "";
-
-    for (var i = 0; i < elt.classList.length; i++)
-      selector += "." + elt.classList[i].replace(/([^\w-])/g, "\\$1");
-
-    addSelector(selector);
-  }
-
+  }
   if (url)
   {
-    url = relativeToAbsoluteUrl(url);
-
-    clickHideFilters.push(normalizeURL(url));

[Wladimir Palant, 2014/06/27 07:30:53]

I wonder what will happen to src="about:blank" or src="data:..."

[Sebastian Noack, 2014/06/28 09:42:50]

See http://codereview.adblockplus.org/5945877571043328/

-    selectorList.push(elt.localName + '[src="' + url + '"]');

[Wladimir Palant, 2014/06/27 07:30:53]

Just noticed - this one won't work correctly, it needs the original value of the
attribute rather than the absolute URL. Not that this filter makes sense -
blocking via webRequest makes a lot more sense than hiding by src attribute.
Remove that line?

[Sebastian Noack, 2014/06/28 09:42:50]

Done.

-  }
-
-  // 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;
-
-  // as last resort, create a filter based on inline styles
-  if (clickHideFilters.length == 0 && elt.hasAttribute("style"))
-    addSelector(elt.localName + '[style="' + elt.getAttribute("style").replace(/"/g, '\\"') + '"]');
+    clickHideFilters.push(url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||"));
+    selectorList.push('[src="' + elt.getAttribute("src") + '"]');
+  }
 
   // Show popup
   clickHide_showDialog(e.clientX, e.clientY, clickHideFilters);
 
+  // Highlight the unlucky elements
+  // Restore currentElement's box-shadow and bgcolor so that highlightElements won't save those
+  unhighlightElement(currentElement);
   // 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(/(.+:\/\/)(.+?)\/(.*)/);

[Wladimir Palant, 2014/06/27 07:30:53]

We should really start using the URI class from basedomain.js in the content
scripts :-(

Maybe extract that class into a separate file and load it as a content script?
Not really something you need to do here but maybe later.

[Sebastian Noack, 2014/06/28 09:42:50]

Any reasons why we "normalize" the URL in the first place?

[Sebastian Noack, 2014/09/25 08:36:25]

As discussed in
http://codereview.adblockplus.org/4567408790470656/diff/5634387206995968/incl...
this code will be gone by https://issues.adblockplus.org/ticket/1441 and a
temporary <a> element will be used to resolve URLs with its href attribute.

I have uploaded a new patch set that just replaces the leading protocol scheme
with "||" in the already normalized URL.

-  if(!components)
-    return url;
-  var newPath = removeDotSegments(components[3]);
-  if(newPath != '' && newPath[0] != '/')

[Wladimir Palant, 2014/06/27 07:30:53]

It should actually be: newPath == "" || newPath[0] != "/" (yes, this isn't what
the original code did). There should always be a slash after the host name.

Style nit: please use double quotation marks in JavaScript.

[Sebastian Noack, 2014/06/28 09:42:50]

Then you can just check for newPath[0] != "/" with the same result.
Done.

-    newPath = '/' + newPath;
-  return '||' + components[2] + 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);
         break;
       case "clickhide-init":
         if (clickHideFiltersDialog)
         {
           sendResponse({filters: clickHide_filters});
@@ skipping 18 matching lines @@
             currentElement.parentNode.removeChild(currentElement);
 
           clickHide_deactivate();
         }
         break;
       default:
         sendResponse({});
         break;
     }
   });
-}
+
+  if (window == window.top)
+    ext.backgroundPage.sendMessage({type: "report-html-page"});
+}