Issue 1868 - Handle <area> element properly when selected with "Block element"

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 316 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 blockable elements that don't emit mouse events that they
-  // can still be selected. While images generally emit mouse events we have
-  // also to add overlays for them, in case <area> elments are used (#1868).
-  var elts = document.querySelectorAll('object,embed,iframe,frame,img');
+  // Add overlays for blockable elements that don't emit mouse events that they can still be selected

[kzar, 2015/02/09 17:24:41]

Nitpick: Should read "...so that they can still be selected"

[Sebastian Noack, 2015/02/10 10:19:27]

Done.

+  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("mouseover", clickHide_mouseOver, true);
   document.addEventListener("mouseout", clickHide_mouseOut, true);
@@ skipping 50 matching lines @@
     ext.onExtensionUnloaded.removeListener(clickHide_deactivate);
   }
 }
 
 function clickHide_elementClickHandler(ev) {
   ev.preventDefault();
   ev.stopPropagation();
   clickHide_mouseClick(ev);
 }
 
+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");

[kzar, 2015/02/09 17:24:41]

Don't we need to check that usemap isn't null before we try to use its indexOf
and substr methods?

[Sebastian Noack, 2015/02/10 10:19:27]

Mind the CSS selector above, excluding elements without "usemap" attribute.

[kzar, 2015/02/10 11:03:01]

Ah OK

+          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 && !(target instanceof HTMLElement && isBlockable(target)))
-    target = target.parentNode;
-  if (target == document.documentElement || target == document.body)
-    target = null;
+  var target = getBlockableElementOrAncestor(e.target);
 
   if (target)
   {
     currentElement = target;
 
     highlightElement(target, "#d6d84b", "#f8fa47");
     target.addEventListener("contextmenu", clickHide_elementClickHandler, true);
   }
 }
 
@@ skipping 244 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"});
 }