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 46 matching lines @@
 function unhighlightElements() {
   if (highlightedElementsSelector)
   {
     Array.prototype.forEach.call(
       document.querySelectorAll(highlightedElementsSelector),
       unhighlightElement
     );
 
     highlightedElementsSelector = null;
   }
+}
+
+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":
+      return getURLsFromObjectElement(element);
+
+    case "video":
+    case "audio":
+    case "picture":
+      return getURLsFromMediaElement(element);
+  }
+
+  return getURLsFromAttributes(element);
+}
+
+function isBlockable(element)
+{
+  if (element.id)
+    return true;
+  if (element.classList.length > 0)
+    return true;
+  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(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.
 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
-  if(!hasFilters(elt))
+  if(!isBlockable(elt))
     return;
+
+  // If the element isn't rendered (since its or one of its ancestor's
+  // "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; z-index: 99999');
+  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, false);
-    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);

[kzar, 2014/11/26 11:36:17]

I think the capturing / bubbling changes from the other review got included here
accidentally?

[Sebastian Noack, 2014/11/26 11:42:48]

They are not part of this patch. However, they show up when you view the diff
between the intial patch and this patch, since I had to rebase in between.

 
-  // 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)
 {
   if (clickHide_activated == false)
     return;
 
   var target = e.target;
-  while (target.parentNode && !hasFilters(target))
+  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 60 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];
-    var isHTTP = /^https?:/i.test(url);
-
-    if (isHTTP)
+
+    if (/^https?:/i.test(url))
     {
       var filter = url.replace(/^[\w\-]+:\/+(?:www\.)?/, "||");
 
-      if (clickHideFilters.indexOf(filter) != -1)
-        continue;
-
-      clickHideFilters.push(filter);
+      if (clickHideFilters.indexOf(filter) == -1)
+        clickHideFilters.push(filter);
+
+      continue;
     }
 
     if (url == elt.src)
-    {
-      var selector = escapeCSS(elt.localName) + '[src=' + quote(elt.getAttribute("src")) + ']';
-
-      if (isHTTP)
-        selectorList.push(selector);
-      else
-        addSelector(selector);
-    }
-  }
-
-  // restore the original style, before generating the fallback filter that
-  // will include the style, and to prevent highlightElements from saving those
-  unhighlightElement(currentElement);
+      addSelector(escapeCSS(elt.localName) + '[src=' + quote(elt.getAttribute("src")) + ']');
+  }
 
   // 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*$/, "");
-    if (url)
-      urls[i] = resolveURL(url);
-    else
-      urls.splice(i--, 1);
-  }
-
-  return urls;
-}
-
-function getElementURLs(elt) {
-  var urls = [];
-
-  if (elt.src)
-    urls.push(elt.src);
-
-  switch (elt.localName)
-  {
-    case "object":
-      var url = elt.getAttribute("data");
-      if (url)
-        return [resolveURL(url)];
-
-      for (var i = 0; i < elt.children.length; i++)
-      {
-        var child = elt.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 < elt.children.length; i++)
-      {
-        var child = elt.children[i];
-
-        if (child.localName != "source")
-          continue;
-
-        if (child.src)
-          urls.push(child.src);
-
-        urls = urls.concat(parseSrcSet(child));
-      }
-
-      if (elt.poster)
-        urls.push(elt.poster);
-
-      break;
-
-    case "img":
-      urls = urls.concat(parseSrcSet(elt));
-  }
-
-  return urls;
-}
-
-function hasFilters(element)
-{
-  if (element.id)
-    return true;
-  if (element.classList.length > 0)
-    return true;
-  if (getElementURLs(element).length > 0)
-    return true;
-  if (/:.+:/.test(element.getAttribute("style")))
-    return true;
-
-  return false;
 }
 
 // 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"});
 }