Issue 1853 - Moved filter generation into background page

include.postload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 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 14 matching lines @@
 var lastRightClickEventValid = false;
 
 function highlightElement(element, shadowColor, backgroundColor)
 {
   unhighlightElement(element);
 
   var highlightWithOverlay = function()
   {
     var overlay = addElementOverlay(element);
 
+    // If the element isn't displayed no overlay will be added.
+    // Moreover, we don't need to highlight anything then.
+    if (!overlay)
+      return;
+
     highlightElement(overlay, shadowColor, backgroundColor);
     overlay.style.pointerEvents = "none";
 
     element._unhighlight = function()
     {
       overlay.parentNode.removeChild(overlay);
     };
   };
 
   var highlightWithStyleAttribute = function()
@@ skipping 159 matching lines @@
 
   // 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) {
   var zIndex = "auto";
   var position = "absolute";
 
   for (var e = elt; e; e = e.parentElement)
   {
     var style = getComputedStyle(e);
 
     // 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 (style.display == "none")
       return null;
 
     // If the element or one of its ancestors uses fixed postioning, the overlay
     // has to use fixed postioning too. Otherwise it might not match the element.
     if (style.position == "fixed")
       position = "fixed";
 
     // Determine the effective z-index, which is the highest z-index used
-    // by the element and its offset ancestors. When using a lower z-index
-    // the element would cover the overlay. When using a higher z-index the
-    // overlay might also cover other elements.
+    // by the element and its offset ancestors, and increase it by one.
+    // When using a lower z-index the element would cover the overlay.
+    // When using a higher z-index the overlay might also cover other elements.
     if (style.position != "static" && style.zIndex != "auto")
     {
-      if (zIndex == "auto")
-        zIndex = style.zIndex;
-      else
-        zIndex = Math.max(zIndex, style.zIndex);
+      var curZIndex = parseInt(style.zIndex, 10) + 1;
+
+      if (zIndex == "auto" || curZIndex > zIndex)
+        zIndex = curZIndex;
     }
   }
 
   var overlay = document.createElement('div');
   overlay.prisoner = elt;
   overlay.className = "__adblockplus__overlay";
   overlay.setAttribute('style', 'opacity:0.4; display:inline-box; overflow:hidden; box-sizing:border-box;');
-  var pos = getAbsolutePosition(elt);
-  overlay.style.width = elt.offsetWidth + "px";
-  overlay.style.height = elt.offsetHeight + "px";
-  overlay.style.left = pos[0] + "px";
-  overlay.style.top = pos[1] + "px";
+  var rect = elt.getBoundingClientRect();
+  overlay.style.width = rect.width + "px";
+  overlay.style.height = rect.height + "px";
+  overlay.style.left = (rect.left + window.scrollX) + "px";
+  overlay.style.top = (rect.top + window.scrollY) + "px";
   overlay.style.position = position;
   overlay.style.zIndex = zIndex;
 
   // elt.parentNode.appendChild(overlay, elt);
-  document.body.appendChild(overlay);
+  document.documentElement.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)
     clickHide_deactivate(true);
@@ skipping 16 matching lines @@
   {
     if (clickHideFiltersDialog)
       clickHideFiltersDialog.style.setProperty("opacity", "0.7");
   };
   clickHideFiltersDialog.onmouseover = function()
   {
     if (clickHideFiltersDialog)
       clickHideFiltersDialog.style.setProperty("opacity", "1.0");
   };
 
-  document.body.appendChild(clickHideFiltersDialog);
+  document.documentElement.appendChild(clickHideFiltersDialog);
 }
 
 // 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 blockable elements that don't emit mouse events that they can still be selected
-  var elts = document.querySelectorAll('object,embed,iframe');
+  // Add overlays for blockable elements that don't emit mouse events,
+  // so that they can still be selected.
+  var elts = document.querySelectorAll('object,embed,iframe,frame');
   for(var i=0; i<elts.length; i++)
   {
     var element = elts[i];
     if (isBlockable(element))
       addElementOverlay(element);
   }
 
   clickHide_activated = true;
+  document.addEventListener("mousedown", clickHide_stopPropagation, true);
+  document.addEventListener("mouseup", clickHide_stopPropagation, true);
+  document.addEventListener("mouseenter", clickHide_stopPropagation, true);
+  document.addEventListener("mouseleave", clickHide_stopPropagation, 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);
+
+  ext.onExtensionUnloaded.addListener(clickHide_deactivate);
 }
 
 // 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("mousedown", clickHide_stopPropagation, true);
+  document.removeEventListener("mouseup", clickHide_stopPropagation, true);
+  document.removeEventListener("mouseenter", clickHide_stopPropagation, true);
+  document.removeEventListener("mouseleave", clickHide_stopPropagation, true);
   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(keepOverlays)
 {
   if (clickHideFiltersDialog)
   {
-    document.body.removeChild(clickHideFiltersDialog);
+    document.documentElement.removeChild(clickHideFiltersDialog);
     clickHideFiltersDialog = null;
   }
 
   clickHide_activated = false;
   clickHide_filters = null;
   if(!document)
     return; // This can happen inside a nuked iframe...I think
+
+  document.removeEventListener("mousedown", clickHide_stopPropagation, true);
+  document.removeEventListener("mouseup", clickHide_stopPropagation, true);
+  document.removeEventListener("mouseenter", clickHide_stopPropagation, true);
+  document.removeEventListener("mouseleave", clickHide_stopPropagation, true);
   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 (keepOverlays !== true)
   {
     lastRightClickEvent = null;
 
     if (currentElement) {
       currentElement.removeEventListener("contextmenu",  clickHide_elementClickHandler, true);
       unhighlightElements();
       unhighlightElement(currentElement);
       currentElement = 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);
+
+    ext.onExtensionUnloaded.removeListener(clickHide_deactivate);
+  }
+}
+
+function clickHide_stopPropagation(e)
+{
+  e.stopPropagation();
+}
+
+function clickHide_elementClickHandler(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  clickHide_mouseClick(e);
+}
+
+function getBlockableElementOrAncestor(element)
+{
+  while (element && element != document.documentElement
+                 && element != document.body)
+  {
+    if (element instanceof HTMLElement && element.localName != "area")
+    {
+      // Handle <area> and their <map> elements specially,
+      // blocking the image they are associated with
+      if (element.localName == "map")
+      {
+        var images = document.querySelectorAll("img[usemap]");
+        for (var i = 0; i < images.length; i++)
+        {
+          var image = images[i];
+          var usemap = image.getAttribute("usemap");
+          var index = usemap.indexOf("#");
+
+          if (index != -1 && usemap.substr(index + 1) == element.name)
+            return getBlockableElementOrAncestor(image);
+        }
+
+        return null;
+      }
+
+      if (isBlockable(element))
+        return element;
+    }
+
+    element = element.parentElement;
+  }
+
+  return null;
 }
 
 // Hovering over an element so highlight it
 function clickHide_mouseOver(e)
 {
   if (clickHide_activated == false)
     return;
 
-  var target = e.target;
-  while (target.parentNode && !isBlockable(target))
-    target = target.parentNode;
-  if (target == document.documentElement || target == document.body)
-    target = null;
-
-  if (target && target instanceof HTMLElement)
+  var target = getBlockableElementOrAncestor(e.target);
+
+  if (target)
   {
     currentElement = target;
 
     highlightElement(target, "#d6d84b", "#f8fa47");
     target.addEventListener("contextmenu", clickHide_elementClickHandler, true);
   }
+  e.stopPropagation();
 }
 
 // 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, true);
+  e.stopPropagation();
 }
 
 // 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(
@@ skipping 47 matching lines @@
     {
       type: "forward",
       payload:
       {
         type: "clickhide-show-dialog",
         screenX: e.screenX,
         screenY: e.screenY,
         clickHideFilters: filters
       }
     });
 

[kzar, 2015/01/26 10:35:16]

Why remove the comments explaining that we're highlighting the elements yellow /
red? I found those useful when first trying to understand the code last time.

[Sebastian Noack, 2015/01/26 10:44:07]

A while ago we agreed to don't spam code with comments that explain what's
already obvious. Calling functions called highlightElement(s) should be clear
enough that those elements are highlighted here. And the color doesn't matter to
understand the logic. Also the color is given in the code below as well.

[kzar, 2015/01/26 10:49:55]

These comments were useful and directly helped me to understand the code when I
was doing the block elements in iFrames ticket.

[Sebastian Noack, 2015/01/26 11:08:14]

Those comments doesn't add any information that aren't already given in those
two lines of code.

[kzar, 2015/01/26 14:21:28]

Yes they do. These two lines do not explain that anything is being highlighted
yellow and they only explain something is being highlighted red if you go and
look up the hex code #fd1708.

Also I found they gave a useful clue / implied some context that currentElement
was the thing that the user had last clicked on - before you understand the code
"current element" could be the element you last hovered over or pretty much
anything.

But either way, why isn't the fact that I personally found these comments useful
- just the other day - enough? Having a couple of comments here costs us
nothing. What's the point of arguing about them?

[Sebastian Noack, 2015/01/26 15:11:34]

Actually nothing is highlighted yellow here. highlightElements() uses just
another shade of red. This comment is outdated, another reason to get rid of it.
And if you tell me that the comment helped you to understand the code, that
merely means that you didn't understand the code but were misguided by the
comment, since the code is doing something different.
It's quite obvious, since the red octet is significantly larger than the green
and blue. So if you understand the RGB format you don't have to lookup anything
to know that this color is almost pure red. But as I said the color shouldn't
matter to understand the logic. It's actually a hack to use hard-coded colors.
No, the line in clickHide_mouseOver() where currentElement is set to
event.target gives you the clue that currentElement is the element the user
clicked on. It's irrelevant for the code we have here.

     if (selectors.length > 0)
       highlightElements(selectors.join(","));
 
     highlightElement(currentElement, "#fd1708", "#f6a1b5");
   });
 
   // Make sure the browser doesn't handle this click
   e.preventDefault();
   e.stopPropagation();
 }
@@ skipping 124 matching lines @@
       case "clickhide-activate":
         clickHide_activate();
         break;
       case "clickhide-deactivate":
         clickHide_deactivate();
         break;
       case "clickhide-new-filter":
         if(lastRightClickEvent)
         {
           clickHide_activated = true;
-          currentElement = lastRightClickEvent.target;
+          currentElement = getBlockableElementOrAncestor(lastRightClickEvent.target);
           clickHide_mouseClick(lastRightClickEvent);
         }
         break;
       case "clickhide-init":
         if (clickHideFiltersDialog)
         {
           sendResponse({filters: clickHide_filters});
 
           clickHideFiltersDialog.style.width = msg.width + "px";
           clickHideFiltersDialog.style.height = msg.height + "px";
@@ skipping 28 matching lines @@
           lastRightClickEventValid = false;
         else
           lastRightClickEvent = null;
         break;
     }
   });
 
   if (window == window.top)
     ext.backgroundPage.sendMessage({type: "report-html-page"});
 }