Issue 1606 - Don't create overlays for hidden elements

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 172 matching lines @@
 function getAbsolutePosition(elt) {
   var l = 0;
   var t = 0;
   for(; elt; elt = elt.offsetParent) {
     l += elt.offsetLeft;
     t += elt.offsetTop;
   }
   return [l, t];
 }
 
-function isDisplayed(element)
-{
-  while (element)
-  {
-    if (getComputedStyle(element).display == "none")
-      return false;
-
-    element = element.parentElement;
-  }
-
-  return true;
-}
-
 // 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))
     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.

[Wladimir Palant, 2014/11/26 13:10:18]

Nit: "display"

-  if (!isDisplayed(elt))
+  if (!elt.offsetParent)

[Wladimir Palant, 2014/11/26 13:10:18]

What about elements that use visibility:hidden or height:0? I think it makes
more sense to test offsetWidth == 0 || offsetHeight == 0.

[Sebastian Noack, 2014/11/26 13:15:07]

We don't have to bother about those. In that case the overlay will be placed as
expected, covering the area (if any) of the element it was created for.

However if display is set to none, and an overlay would be created, it would
cover random other elements.

     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');
   var pos = getAbsolutePosition(elt);
   overlay.style.left = pos[0] + "px";
   overlay.style.top = pos[1] + "px";
@@ skipping 50 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()
 {
   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);
+  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);
 }
 
 function clickHide_elementClickHandler(ev) {
   ev.preventDefault();
@@ skipping 11 matching lines @@
   while (target.parentNode && !hasFilters(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(
@@ skipping 223 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 136 matching lines @@
         break;
       default:
         sendResponse({});
         break;
     }
   });
 
   if (window == window.top)
     ext.backgroundPage.sendMessage({type: "report-html-page"});
 }