Issue 1601 - Generate blocking filters for all URLs associated with the selected 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
@@ skipping 58 matching lines @@
   // 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 getOriginalStyle(element)
+{
+  if ("_originalStyle" in element)
+    return element._originalStyle;
+
+  return element.getAttribute("style");
+}
+
 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()
@@ skipping 11 matching lines @@
     element._unhighlight = function()
     {
       root.removeChild(style);
     };
   };
 
   var highlightWithStyleAttribute = function()
   {
     var originalBoxShadow = element.style.getPropertyValue("box-shadow");
     var originalBackgroundColor = element.style.getPropertyValue("background-color");
+
+    element._originalStyle = getOriginalStyle(element);
 
     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,
@@ skipping 48 matching lines @@
   {
     Array.prototype.forEach.call(
       document.querySelectorAll(highlightedElementsSelector),
       unhighlightElement
     );
 
     highlightedElementsSelector = null;
   }
 }
 
-function getElementURLs(element) {
+function getURLsFromObjectElement(element)
+{
+  var url = element.getAttribute("data");
+  if (url)
+    return [resolveURL(url)];
+
+  for (var i = 0; i < element.children.length; i++)
+  {
+    var child = element.children[i];
+    if (child.localName != "param")
+      continue;
+
+    var name = child.getAttribute("name");
+    if (name != "movie"  && // Adobe Flash
+        name != "source" && // Silverlight
+        name != "src"    && // Real Media + Quicktime
+        name != "FileName") // Windows Media
+      continue;
+
+    var value = child.getAttribute("value");
+    if (!value)
+      continue;
+
+    return [resolveURL(value)];
+  }
+
+  return [];
+}
+
+function getURLsFromAttributes(element)
+{
   var urls = [];
 
   if (element.src)
     urls.push(element.src);
 
+  if (element.srcset)
+  {
+    var candidates = element.srcset.split(",");
+    for (var i = 0; i < candidates.length; i++)
+    {
+      var url = candidates[i].trim().replace(/\s+\S+$/, "");
+      if (url)
+        urls.push(resolveURL(url));
+    }
+  }
+
+  return urls;
+}
+
+function getURLsFromMediaElement(element)
+{
+  var urls = getURLsFromAttributes(element);
+
+  for (var i = 0; i < element.children.length; i++)
+  {
+    var child = element.children[i];
+    if (child.localName == "source" || child.localName == "track")
+      urls.push.apply(urls, getURLsFromAttributes(child));
+  }
+
+  if (element.poster)
+    urls.push(element.poster);
+
+  return urls;
+}
+
+function getURLsFromElement(element) {
   switch (element.localName)
   {
     case "object":
-      var url = element.getAttribute("data");

[Wladimir Palant, 2014/12/08 11:43:00]

For reference: <object> also has archive and codebase attributes. The handling
is inconsistent and depends largely on the plugin used. I guess we'll just keep
ignoring this...

[Sebastian Noack, 2014/12/08 16:45:04]

I agree, also note they are obsolete since HTML5, neither have I seen them being
used in the past 10 years. So lets keep ignoring them for now.

However, I added detection for Silverlight and Windows Media sources.

[Wladimir Palant, 2014/12/08 20:31:09]

Oh, you didn't have to deal with Java? :) 

[Sebastian Noack, 2014/12/08 21:12:49]

I see, that stuff is for Java. I prefer to ignore it though, not only because
Java in the browser is dead, but also because resolving the "archive" attribute
relative to the "codebase" attribute is non-trivial.

Currently we just create an <a> element assign a URL to its "href" attribute,
and then retrieve the URL from its "href" attribute, normalized and resolved
(relative to the document's URL), in 3 lines. An approach that wouldn't work
with arbitrary base URLs. :(

-      if (url)
-        return [resolveURL(url)];
-
-      for (var i = 0; i < element.children.length; i++)
-      {
-        var child = element.children[i];
-        if (child.localName != "param")
-          continue;
-
-        var name = child.getAttribute("name");
-        if (name != "movie" && name != "src")
-          continue;
-
-        var value = child.getAttribute("value");
-        if (!value)
-          continue;
-
-        return [resolveURL(value)];
-      }
-
-      return [];
+      return getURLsFromObjectElement(element);
 
     case "video":
     case "audio":
     case "picture":
-      for (var i = 0; i < element.children.length; i++)
-      {
-        var child = element.children[i];
-
-        if (child.localName != "source")
-          continue;

[Wladimir Palant, 2014/12/08 11:43:00]

It seems that we need to handle <track> elements as well.

[Sebastian Noack, 2014/12/08 16:45:04]

Done.

-
-        if (child.src)
-          urls.push(child.src);
-
-        urls = urls.concat(parseSrcSet(child));

[Wladimir Palant, 2014/12/08 11:43:00]

Rather than generate a new array, I'd prefer:

urls.push.apply(urls, parseSrcSet(child));

[Sebastian Noack, 2014/12/08 16:45:04]

Right, I forgot that push() can add multiple items to the array.

-      }
-
-      if (element.poster)
-        urls.push(element.poster);
-
-      break;
-
-    case "img":
-      urls = urls.concat(parseSrcSet(element));
-  }
-
-  return urls;
+      return getURLsFromMediaElement(element);
+  }
+
+  return getURLsFromAttributes(element);
 }
 
 function isBlockable(element)
 {
   if (element.id)
     return true;
   if (element.classList.length > 0)
     return true;
-  if (getElementURLs(element).length > 0)
+  if (getURLsFromElement(element).length > 0)
     return true;
 
   // We only generate filters based on the "style" attribute,
   // if this is the only way we can generate a filter, and
   // only if there are at least two CSS properties defined.
-  if (/:.+:/.test(element.getAttribute("style")))
+  if (/:.+:/.test(getOriginalStyle(element)))
     return true;
 
   return false;
 }
 
 // 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.
@@ skipping 12 matching lines @@
   // If this element is enclosed in an object tag, we prefer to block that instead
   if(!elt)
     return null;
 
   // If element doesn't have at least one of class name, ID or URL, give up
   // because we don't know how to construct a filter rule for it
   if(!isBlockable(elt))
     return;
 
   // If the element isn't rendered (since its or one of its ancestor's
-  // "diplay" property is "none"), the overlay wouldn't match the element.
+  // "display" property is "none"), the overlay wouldn't match the element.
   if (!elt.offsetParent)
     return;
 
   var thisStyle = getComputedStyle(elt, null);
   var overlay = document.createElement('div');
   overlay.prisoner = elt;
   overlay.className = "__adblockplus__overlay";
   overlay.setAttribute('style', 'opacity:0.4; background-color:#ffffff; display:inline-box; ' + 'width:' + thisStyle.width + '; height:' + thisStyle.height + '; position:absolute; overflow:hidden; -webkit-box-sizing:border-box;');
   var pos = getAbsolutePosition(elt);
   overlay.style.left = pos[0] + "px";
   overlay.style.top = pos[1] + "px";
 
   if (thisStyle.position != "static")
     overlay.style.zIndex = thisStyle.zIndex;
   else
     overlay.style.zIndex = getComputedStyle(elt.offsetParent).zIndex;
 
   // elt.parentNode.appendChild(overlay, elt);
   document.body.appendChild(overlay);
   return overlay;
 }
 
 // Show dialog asking user whether she wants to add the proposed filters derived
 // from selected page element
 function clickHide_showDialog(left, top, filters)
 {
   // If we are already selecting, abort now
   if (clickHide_activated || clickHideFiltersDialog)
-  {
-    var savedElement = (currentElement.prisoner ? currentElement.prisoner : currentElement);
-    clickHide_deactivate();
-    currentElement = savedElement;
-  }
+    clickHide_deactivate(true);
 
   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 = 0x7FFFFFFF;
 
   // Position in upper-left all the time
@@ skipping 41 matching lines @@
 // on whether the user actually wants these filters
 function clickHide_rulesPending() {
   clickHide_activated = false;
   document.removeEventListener("mouseover", clickHide_mouseOver, true);
   document.removeEventListener("mouseout", clickHide_mouseOut, true);
   document.removeEventListener("click", clickHide_mouseClick, true);
   document.removeEventListener("keydown", clickHide_keyDown, true);
 }
 
 // Turn off click-to-hide
-function clickHide_deactivate()
+function clickHide_deactivate(keepOverlays)
 {
   if (clickHideFiltersDialog)
   {
     document.body.removeChild(clickHideFiltersDialog);
     clickHideFiltersDialog = null;
   }
-
-  if(currentElement) {
-    currentElement.removeEventListener("contextmenu", clickHide_elementClickHandler, true);
-    unhighlightElements();
-    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, true);
   document.removeEventListener("mouseout", clickHide_mouseOut, true);
   document.removeEventListener("click", clickHide_mouseClick, true);
   document.removeEventListener("keydown", clickHide_keyDown, true);
 
-  // Remove overlays
-  // For some reason iterating over the array returend by getElementsByClassName() doesn't work
-  var elt;
-  while(elt = document.querySelector('.__adblockplus__overlay'))
-    elt.parentNode.removeChild(elt);
+  if (!keepOverlays)
+  {
+    if (currentElement) {
+      currentElement.removeEventListener("contextmenu",  clickHide_elementClickHandler, true);
+      unhighlightElements();
+      unhighlightElement(currentElement);
+      currentElement = null;
+      clickHideFilters = null;
+    }
+    unhighlightElements();
+
+    var overlays = document.getElementsByClassName("__adblockplus__overlay");
+    while (overlays.length > 0)
+      overlays[0].parentNode.removeChild(overlays[0]);
+  }
 }
 
 function clickHide_elementClickHandler(ev) {
   ev.preventDefault();
   ev.stopPropagation();
   clickHide_mouseClick(ev);
 }
 
 // Hovering over an element so highlight it
 function clickHide_mouseOver(e)
@@ skipping 76 matching lines @@
   if (elt.classList.length > 0)
   {
     var selector = "";
 
     for (var i = 0; i < elt.classList.length; i++)
       selector += "." + escapeCSS(elt.classList[i]);
 
     addSelector(selector);
   }
 
-  var urls = getElementURLs(elt);
+  var urls = getURLsFromElement(elt);
   for (var i = 0; i < urls.length; i++)
   {
     var url = urls[i];
 

[Sebastian Noack, 2014/11/26 14:01:22]

A fair amount of complexity here, only came from generating CSS selectors also
for blocking filters in order to highlight the matching elements. However, the
current element is highlighted anyway, and the generated selector doesn't
necessarily match any other elements. So I simplified that code.

Other changes are just due to rebase.

     if (/^https?:/i.test(url))
     {
       var filter = url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||");
 
       if (clickHideFilters.indexOf(filter) == -1)
         clickHideFilters.push(filter);
 
       continue;
     }
 
     if (url == elt.src)
       addSelector(escapeCSS(elt.localName) + '[src=' + quote(elt.getAttribute("src")) + ']');
   }
 
-  // restore the original style, before generating the fallback filter that
-  // will include the style, and to prevent highlightElements from saving those
-  unhighlightElement(currentElement);
-
   // as last resort, create a filter based on inline styles
   if (clickHideFilters.length == 0)
   {
-    var style = elt.getAttribute("style");
+    var style = getOriginalStyle(elt);
     if (style)
       addSelector(escapeCSS(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(","));
+  if (selectorList.length > 0)
+    highlightElements(selectorList.join(","));
   // Now, actually highlight the element the user clicked on in red
   highlightElement(currentElement, "#fd1708", "#f6a1b5");
 
   // Make sure the browser doesn't handle this click
   e.preventDefault();
   e.stopPropagation();
-}
-
-function parseSrcSet(element)
-{
-  if (!element.srcset)
-    return [];
-
-  var urls = element.srcset.split(",");
-  for (var i = 0; i < urls.length; i++)
-  {
-    var url = urls[i].replace(/^\s+/, "").replace(/(\s+\S+)?\s*$/, "");

[Wladimir Palant, 2014/12/08 11:43:00]

Use urls[i].trim()? According to
http://kangax.github.io/compat-table/es5/#String.prototype.trim it is supported
by at least Chrome 23.

[Sebastian Noack, 2014/12/08 16:45:04]

Done.

-    if (url)
-      urls[i] = resolveURL(url);

[Wladimir Palant, 2014/12/08 11:43:00]

What about descriptions? See
http://html5hub.com/srcset-attribute-solving-responsive-image-dilemma/ for
example - there is an optional description following the URL here.

[Sebastian Noack, 2014/12/08 16:45:04]

Those are stripped by the regex above. 

-    else
-      urls.splice(i--, 1);
-  }
-
-  return urls;
 }
 
 // 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 !== '') {
       if (u === '.' || u === '..') {
         u = '';
@@ skipping 163 matching lines @@
         }
         break;
       case "clickhide-move":
         if (clickHideFiltersDialog)
         {
           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)
+        if (clickHideFiltersDialog && msg.remove)
         {
           // Explicitly get rid of currentElement
-          if (msg.remove && currentElement && currentElement.parentNode)
-            currentElement.parentNode.removeChild(currentElement);
+          var element = currentElement.prisoner || currentElement;
+          if (element && element.parentNode)
+            element.parentNode.removeChild(element);
         }
         clickHide_deactivate();
         break;
       default:
         sendResponse({});
         break;
     }
   });
 
   if (window == window.top)
     ext.backgroundPage.sendMessage({type: "report-html-page"});
 }