Issue 2080 - Removed duplicated code from clickHide_deactivate

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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 // Click-to-hide stuff
 var clickHide_activated = false;
 var clickHide_filters = null;
 var currentElement = null;
 var highlightedElementsSelector = null;
 var clickHideFiltersDialog = null;
 var lastRightClickEvent = null;
 var lastRightClickEventValid = false;
+var lastMouseOverEvent = null;
 
 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.
@@ skipping 153 matching lines @@
     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(element.getAttribute("style")))
-    return true;
-
-  return false;
 }
 
 // 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);
@@ skipping 36 matching lines @@
   // elt.parentNode.appendChild(overlay, elt);
   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)
+  if (clickHide_activated)
     clickHide_rulesPending();

[kzar, 2015/03/04 10:20:21]

Nit: Seems like weird mix of camel case with snake case.

[Sebastian Noack, 2015/03/04 10:47:09]

Yes, function names should be properly camelcase'd. However, this pattern is
currently consistently used in this file, and that particular function isn't
new. Changing the naming of all functions would clearly be out ouf scope of this
issue.

 
   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 20 matching lines @@
 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,
   // 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);
-  }
+  [].forEach.call(
+    document.querySelectorAll('object,embed,iframe,frame'),
+    function(element)
+    {
+      getFiltersForElement(element, function(filters)
+      {
+        if (filters.length > 0)
+          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

[kzar, 2015/03/04 10:20:21]

I don't think this comment really adds anything.

[Sebastian Noack, 2015/03/04 10:47:09]

Also not really matter of this change, but fair enough.

 function clickHide_deactivate()
 {
   clickHide_rulesPending();
 
   if (clickHideFiltersDialog)
   {
     document.documentElement.removeChild(clickHideFiltersDialog);
     clickHideFiltersDialog = null;
   }
 
   clickHide_filters = null;
   lastRightClickEvent = null;
 
-  if (currentElement) {
+  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]);
 
   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)
-{
+function getBlockableElementOrAncestor(element, callback)
+{
+  // We assume that the user doesn't want to block the whole page.
+  // So we never consider the <html> or <body> 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")
+    // We can't handle non-HTML (like SVG) elements, as well as
+    // <area> elements (see below). So fall back to the parent element.
+    if (!(element instanceof HTMLElement) || element.localName == "area")
+      element = element.parentElement;
+
+    // If image maps are used mouse events occur for the <area> element.
+    // But we have to block the image associated with the <map> element.
+    else if (element.localName == "map")
+    {
+      var images = document.querySelectorAll("img[usemap]");
+      var image = null;
+
+      for (var i = 0; i < images.length; i++)
       {
-        var images = document.querySelectorAll("img[usemap]");
-        for (var i = 0; i < images.length; i++)
+        var usemap = image.getAttribute("usemap");
+        var index = usemap.indexOf("#");
+
+        if (index != -1 && usemap.substr(index + 1) == element.name)
         {
-          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);
+          image = images[i];
+          break;
         }
-
-        return null;
       }
 
-      if (isBlockable(element))
-        return element;
-    }
-
-    element = element.parentElement;
-  }
-
-  return null;
+      element = image;
+    }
+
+    // Finally, if none of the above is true, check whether we can generate
+    // any filters for this element. Otherwise fall back to its parent element.
+    else
+    {
+      getFiltersForElement(element, function(filters)
+      {
+        if (filters.length > 0)
+          callback(element);
+        else
+          getBlockableElementOrAncestor(element.parentElement, callback);
+      });
+
+      return;
+    }
+  }
+
+  // We reached the document root without finding a blockable element.
+  callback(null);
 }
 
 // Hovering over an element so highlight it
 function clickHide_mouseOver(e)
 {
-  if (clickHide_activated == false)
-    return;
-
-  var target = getBlockableElementOrAncestor(e.target);
-
-  if (target)
-  {
-    currentElement = target;
-
-    highlightElement(target, "#d6d84b", "#f8fa47");
-    target.addEventListener("contextmenu", clickHide_elementClickHandler, true);
-  }
+  lastMouseOverEvent = e;
+
+  getBlockableElementOrAncestor(e.target, function(element)
+  {
+    if (e == lastMouseOverEvent)
+    {
+      lastMouseOverEvent = null;
+
+      if (clickHide_activated)
+      {
+        if (currentElement)
+          unhighlightElement(currentElement);
+
+        if (element)
+        {
+          highlightElement(element, "#d6d84b", "#f8fa47");
+          element.addEventListener("contextmenu", clickHide_elementClickHandler, true);
+        }
+
+        currentElement = element;
+      }
+    }
+  });
+
   e.stopPropagation();
 }
 
 // No longer hovering over this element so unhighlight it
 function clickHide_mouseOut(e)
 {
-  if (!clickHide_activated || !currentElement)
+  if (!clickHide_activated || currentElement != e.target)
     return;
 
   unhighlightElement(currentElement);
   currentElement.removeEventListener("contextmenu", clickHide_elementClickHandler, true);
   e.stopPropagation();
 }
 
 // Selects the currently hovered-over filter or cancels selection
 function clickHide_keyDown(e)
 {
@@ skipping 18 matching lines @@
 {
   ext.backgroundPage.sendMessage(
     {
       type: "compose-filters",
       tagName: element.localName,
       id: element.id,
       src: element.getAttribute("src"),
       style: element.getAttribute("style"),
       classes: [].slice.call(element.classList),
       urls: getURLsFromElement(element),
+      mediatype: typeMap[element.localName],
       baseURL: document.location.href
     },
     function(response)
     {
       callback(response.filters, response.selectors);
     }
   );
 }
 
 // When the user clicks, the currentElement is the one we want.
@@ skipping 158 matching lines @@
         break;
       case "clickhide-activate":
         clickHide_activate();
         break;
       case "clickhide-deactivate":
         clickHide_deactivate();
         break;
       case "clickhide-new-filter":
         if(lastRightClickEvent)
         {
-          clickHide_activated = true;
-          currentElement = getBlockableElementOrAncestor(lastRightClickEvent.target);
-          clickHide_mouseClick(lastRightClickEvent);
+          getBlockableElementOrAncestor(lastRightClickEvent.target, function(element)
+          {
+            clickHide_activated = true;
+            currentElement = element;
+            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";
           clickHideFiltersDialog.style.visibility = "visible";
@@ skipping 27 matching lines @@
           lastRightClickEventValid = false;
         else
           lastRightClickEvent = null;
         break;
     }
   });
 
   if (window == window.top)
     ext.backgroundPage.sendMessage({type: "report-html-page"});
 }