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 157 matching lines @@
   {
     Array.prototype.forEach.call(
       document.querySelectorAll(highlightedElementsSelector),
       unhighlightElement
     );
 
     highlightedElementsSelector = null;
   }
 }
 
+function getElementURLs(element) {
+  var urls = [];
+
+  if (element.src)
+    urls.push(element.src);
+
+  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 [];
+
+    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;
+}
+
+function isBlockable(element)
+{
+  if (element.id)
+    return true;
+  if (element.classList.length > 0)
+    return true;
+  if (getElementURLs(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")))
+    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.
 function getAbsolutePosition(elt) {
   var l = 0;
   var t = 0;
   for(; elt; elt = elt.offsetParent) {
     l += elt.offsetLeft;
     t += elt.offsetTop;
   }
   return [l, t];
 }
 
 // Adds an overlay to an element, which is probably a Flash object
 function addElementOverlay(elt) {
   // 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
-  var url = getElementURL(elt);
-  if(!elt.className && !elt.id && !url)
+  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.
   if (!elt.offsetParent)
     return;
 
   var thisStyle = getComputedStyle(elt, null);
   var overlay = document.createElement('div');
   overlay.prisoner = elt;
-  overlay.prisonerURL = url;
   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;
@@ skipping 46 matching lines @@
 // Turn on the choose element to create filter thing
 function clickHide_activate() {
   if(document == null)
     return;
 
   // If we are already selecting, abort now
   if (clickHide_activated || clickHideFiltersDialog)
     clickHide_deactivate();
 
   // Add overlays for elements with URLs so user can easily click them
-  var elts = document.querySelectorAll('object,embed,img,iframe');
+  var elts = document.querySelectorAll('object,embed,img,iframe,video,audio,picture');
   for(var i=0; i<elts.length; i++)
     addElementOverlay(elts[i]);
 
   clickHide_activated = true;
   document.addEventListener("mouseover", clickHide_mouseOver, true);
   document.addEventListener("mouseout", clickHide_mouseOut, true);
   document.addEventListener("click", clickHide_mouseClick, true);
   document.addEventListener("keydown", clickHide_keyDown, true);
 }
 
@@ skipping 47 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 && !isBlockable(target))
     target = target.parentNode;
   if (target == document.documentElement || target == document.body)
     target = null;
 
   if (target && target instanceof HTMLElement)
   {
     currentElement = target;
 
     highlightElement(target, "#d6d84b", "#f8fa47");
     target.addEventListener("contextmenu", clickHide_elementClickHandler, true);
@@ skipping 32 matching lines @@
 
 // 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.classList.contains("__adblockplus__overlay"))
-  {
     elt = currentElement.prisoner;
-    url = currentElement.prisonerURL;
-  }
-  else if (elt.src)
-    url = elt.src;
 
   clickHideFilters = new Array();
   selectorList = new Array();
 
   var addSelector = function(selector)
   {
+    if (selectorList.indexOf(selector) != -1)
+      return;
+
     clickHideFilters.push(document.domain + "##" + selector);
     selectorList.push(selector);
   };
 
   if (elt.id)
     addSelector("#" + escapeCSS(elt.id));
 
   if (elt.classList.length > 0)
   {
     var selector = "";
 
     for (var i = 0; i < elt.classList.length; i++)
       selector += "." + escapeCSS(elt.classList[i]);
 
     addSelector(selector);
   }
 
-  if (url)
+  var urls = getElementURLs(elt);
+  for (var i = 0; i < urls.length; i++)
   {
-    var src = elt.getAttribute("src");
-    var selector = src && escapeCSS(elt.localName) + '[src=' + quote(src) + ']';
+    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))
     {
-      clickHideFilters.push(url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||"));
+      var filter = url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||");
 
-      if (selector)
-        selectorList.push(selector);
+      if (clickHideFilters.indexOf(filter) == -1)
+        clickHideFilters.push(filter);
+
+      continue;
     }
-    else if (selector)
-      addSelector(selector);
+
+    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");
     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(","));
   // 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();
 }
 
-// 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");
-    }
+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)
-      url = resolveURL(url);
-  } else if(!url) {
-    url = elt.src || elt.href;
+      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 url;
+
+  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 180 matching lines @@
         break;
       default:
         sendResponse({});
         break;
     }
   });
 
   if (window == window.top)
     ext.backgroundPage.sendMessage({type: "report-html-page"});
 }