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 24 matching lines @@
   // 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,video,audio,picture');
   for(var i=0; i<elts.length; i++)
     addElementOverlay(elts[i]);
 
   clickHide_activated = true;
-  document.addEventListener("mouseover", clickHide_mouseOver, false);
-  document.addEventListener("mouseout", clickHide_mouseOut, false);
-  document.addEventListener("click", clickHide_mouseClick, false);
-  document.addEventListener("keydown", clickHide_keyDown, false);
+  document.addEventListener("mouseover", clickHide_mouseOver, true);
+  document.addEventListener("mouseout", clickHide_mouseOut, true);
+  document.addEventListener("click", clickHide_mouseClick, true);
+  document.addEventListener("keydown", clickHide_keyDown, true);
 }
 
 // Called when user has clicked on something and we are waiting for confirmation
 // on whether the user actually wants these filters
 function clickHide_rulesPending() {
   clickHide_activated = false;
-  document.removeEventListener("mouseover", clickHide_mouseOver, false);
-  document.removeEventListener("mouseout", clickHide_mouseOut, false);
-  document.removeEventListener("click", clickHide_mouseClick, false);
-  document.removeEventListener("keydown", clickHide_keyDown, 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, false);
-  document.removeEventListener("mouseout", clickHide_mouseOut, false);
-  document.removeEventListener("click", clickHide_mouseClick, false);
-  document.removeEventListener("keydown", clickHide_keyDown, false);
-
-  // 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);
+  document.removeEventListener("mouseover", clickHide_mouseOver, true);
+  document.removeEventListener("mouseout", clickHide_mouseOut, true);
+  document.removeEventListener("click", clickHide_mouseClick, true);
+  document.removeEventListener("keydown", clickHide_keyDown, true);
+
+  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, false);
+    target.addEventListener("contextmenu", clickHide_elementClickHandler, true);
   }
 }
 
 // No longer hovering over this element so unhighlight it
 function clickHide_mouseOut(e)
 {
   if (!clickHide_activated || !currentElement)
     return;
 
   unhighlightElement(currentElement);
-  currentElement.removeEventListener("contextmenu", clickHide_elementClickHandler, false);
+  currentElement.removeEventListener("contextmenu", clickHide_elementClickHandler, true);
 }
 
 // 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*/)
   {
     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;
   if (currentElement.classList.contains("__adblockplus__overlay"))
     elt = currentElement.prisoner;
 
   clickHideFilters = new Array();
   selectorList = new Array();
 
   var addSelector = function(selector)

[kzar, 2014/11/25 18:10:11]

Why we don't just do "function addSelector(selector)" instead?

[Sebastian Noack, 2014/11/25 19:01:15]

The only reason that comes to my mind would be that the function can not be
called before the two variables above have been defined. Note that normal
function definitions are automatically moved to the top of the scope. Not
necessarily reason enough to leave it that way. However, those lines didn't
change, and I rather don't want to put even more unrelated changes into this
patch.

   {
     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);
   }
 
-  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)

[kzar, 2014/11/25 18:10:11]

I found this line a little bit confusing to start with as you're checking if the
URL is HTTP or HTTPS but it looked like you intended to just match HTTP.

[Sebastian Noack, 2014/11/25 19:01:15]

What I actually want, is excluding URLs that can't be handled by request
blocking. So yes, both http:// and https:// are fine, however file://, data:,
javascript: about:blank other special URLs aren't.

I would consider isHTTPorHTTPS as variable name unnecessarily long. And since
HTTPS is just an abbreviation for HTTP+TLS/SSL, it's still HTTP, and therefore I
don't see any wrong implications here.

+
+    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);

[kzar, 2014/11/25 18:10:11]

Does removing an element from the array you're iterating over cause any problems
in Javascript?

[Sebastian Noack, 2014/11/25 19:01:15]

Not as long as you decrease the iteration counter (that i will have the same
value during next iteration) as done here. Not that this is problamatic in any
programming language, when iterating by index (as opposed to using iterators).

[Sebastian Noack, 2014/11/25 19:03:11]

s/is problamatic/isn't problamatic/

-  }
-
-  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));
-      }
-
-      break;
-
-    case "img":
-      urls = urls.concat(parseSrcSet(elt));
-  }
-
-  return urls;
-}
-
-function hasFilters(element)

[kzar, 2014/11/26 10:51:22]

Maybe a name like "isFilterable" would be better than "hasFilters"?

[kzar, 2014/11/26 10:51:22]

How come you don't put this function above where it's used? Wouldn't that be
clearer?

[Sebastian Noack, 2014/11/26 11:08:14]

As discussed on IRC, it's called "isBlockable" now.

[Sebastian Noack, 2014/11/26 11:08:14]

Since it relies on "getElementURLs()", I just put it below that function. I
moved both function above now.

-{
-  if (element.id)
-    return true;
-  if (element.classList.length > 0)
-    return true;
-  if (getElementURLs(element).length > 0)
-    return true;
-  if (/:.+:/.test(element.getAttribute("style")))

[kzar, 2014/11/26 10:51:22]

Maybe comment this line to explain what you told me? I don't think it's so
obvious at first glance.

[Sebastian Noack, 2014/11/26 11:08:14]

Well, this logic isn't new. But I guess I can add a comment though.

-    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 23 matching lines @@
 // exists before continuing to avoid "Uncaught ReferenceError: ext is not defined".
 // See https://crbug.com/416907
 if ("ext" in window && 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);
+  }, true);
 
   document.addEventListener("click", function(event)
   {
     // Ignore right-clicks
     if (event.button == 2)
       return;
 
     // Search the link associated with the click
     var link = event.target;
     while (link && !(link instanceof HTMLAnchorElement))
@@ skipping 119 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"});
 }