Issue 3138 - Improve how context menu "block element" handles iframes

composer.postload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
- * Copyright (C) 2006-2016 Eyeo GmbH
+ * Copyright (C) 2006-present 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/>.
  */
 
 "use strict";
 
+const {checkCollapse, elemhide,
+       getURLsFromElement, typeMap} = require("./include.preload");
+
 // The page ID for the popup filter selection dialog (top frame only).
 let blockelementPopupId = null;
 
 // Element picking state (top frame only).
 let currentlyPickingElement = false;
 let lastMouseOverEvent = null;
 
 // During element picking this is the currently highlighted element. When
 // element has been picked this is the element that is due to be blocked.
 let currentElement = null;
 
 // Highlighting state, used by the top frame during element picking and all
 // frames when the chosen element is highlighted red.
 let highlightedElementsSelector = null;
 let highlightedElementsInterval = null;
 
 // Last right click state stored for element blocking via the context menu.
 let lastRightClickEvent = null;
 let lastRightClickEventIsMostRecent = false;
 
+let perFrameMessagingSupported = false;
+browser.runtime.sendMessage(
+  {type: "app.get", what: "application"},
+  application => { perFrameMessagingSupported = application != "edge"; }
+);
 
 /* Utilities */
 
 function getFiltersForElement(element, callback)
 {
   let src = element.getAttribute("src");
-  ext.backgroundPage.sendMessage(
-  {
+  browser.runtime.sendMessage({
     type: "composer.getFilters",
     tagName: element.localName,
     id: element.id,
     src: src && src.length <= 1000 ? src : null,
     style: element.getAttribute("style"),
     classes: Array.prototype.slice.call(element.classList),
     urls: getURLsFromElement(element),
-    mediatype: typeMap[element.localName],
+    mediatype: typeMap.get(element.localName),
     baseURL: document.location.href
   },
   response =>
   {
     callback(response.filters, response.selectors);
   });
 }
 
 function getBlockableElementOrAncestor(element, callback)
 {
@@ skipping 12 matching lines @@
     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")
     {
       let images = document.querySelectorAll("img[usemap]");
       let image = null;
 
-      for (let i = 0; i < images.length; i++)
-      {
-        let usemap = images[i].getAttribute("usemap");
+      for (let currentImage of images)
+      {
+        let usemap = currentImage.getAttribute("usemap");
         let index = usemap.indexOf("#");
 
         if (index != -1 && usemap.substr(index + 1) == element.name)
         {
-          image = images[i];
+          image = currentImage;
           break;
         }
       }
 
       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
@@ skipping 59 matching lines @@
   overlay.style.zIndex = 0x7FFFFFFE;
 
   document.documentElement.appendChild(overlay);
   return overlay;
 }
 
 function highlightElement(element, shadowColor, backgroundColor)
 {
   unhighlightElement(element);
 
-  let highlightWithOverlay = function()
+  let highlightWithOverlay = () =>
   {
     let 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 = () =>
     {
       overlay.parentNode.removeChild(overlay);
     };
   };
 
-  let highlightWithStyleAttribute = function()
+  let highlightWithStyleAttribute = () =>
   {
     let originalBoxShadow = element.style.getPropertyValue("box-shadow");
     let originalBoxShadowPriority =
       element.style.getPropertyPriority("box-shadow");
     let originalBackgroundColor =
       element.style.getPropertyValue("background-color");
     let originalBackgroundColorPriority =
       element.style.getPropertyPriority("background-color");
 
     element.style.setProperty("box-shadow", "inset 0px 0px 5px " + shadowColor,
@@ skipping 184 matching lines @@
 {
   if (!currentElement)
     return;
 
   let element = currentElement.prisoner || currentElement;
   getFiltersForElement(element, (filters, selectors) =>
   {
     if (currentlyPickingElement)
       stopPickingElement();
 
-    ext.backgroundPage.sendMessage(
-    {
+    browser.runtime.sendMessage({
       type: "composer.openDialog"
     },
     popupId =>
     {
-      ext.backgroundPage.sendMessage(
-      {
+      browser.runtime.sendMessage({
         type: "forward",
         targetPageId: popupId,
-        payload:
-        {
-          type: "composer.dialog.init",
-          filters: filters
-        }
+        payload: {type: "composer.dialog.init", filters}
       });
 
       // Only the top frame keeps a record of the popup window's ID,
       // so if this isn't the top frame we need to pass the ID on.
       if (window == window.top)
       {
         blockelementPopupId = popupId;
       }
       else
       {
-        ext.backgroundPage.sendMessage(
-        {
+        browser.runtime.sendMessage({
           type: "forward",
-          payload:
-          {
-            type: "composer.content.dialogOpened",
-            popupId: popupId
-          }
+          payload: {type: "composer.content.dialogOpened", popupId}
         });
       }
     });
 
     if (selectors.length > 0)
       highlightElements(selectors.join(","));
 
     highlightElement(currentElement, "#fd1708", "#f6a1b5");
   });
 
   if (event)

[Sebastian Noack, 2017/01/11 18:15:11]

How is it possible that there is no event here?

[kzar, 2017/01/12 07:24:04]

If the composer.content.contextMenuClicked handler calls this function using the
new logic there is no right click event we can use here. (That's the whole
problem, our right click event handler got trashed so we don't get those
events.)

   {
     event.preventDefault();
     event.stopPropagation();
   }
 }
 
 function stopPickingElement()
 {
   currentlyPickingElement = false;
 
@@ skipping 12 matching lines @@
 /* Core logic */
 
 // We're done with the block element feature for now, tidy everything up.
 function deactivateBlockElement()
 {
   if (currentlyPickingElement)
     stopPickingElement();
 
   if (blockelementPopupId != null)
   {
-    ext.backgroundPage.sendMessage(
-    {
+    browser.runtime.sendMessage({
       type: "forward",
       targetPageId: blockelementPopupId,
       payload:
       {
         type: "composer.dialog.close"
       }
     });
 
     blockelementPopupId = null;
   }
 
   lastRightClickEvent = null;
 
   if (currentElement)
   {
     unhighlightElement(currentElement);
     currentElement = null;
   }
   unhighlightElements();
 
   let overlays = document.getElementsByClassName("__adblockplus__overlay");
   while (overlays.length > 0)
     overlays[0].parentNode.removeChild(overlays[0]);
 
   ext.onExtensionUnloaded.removeListener(deactivateBlockElement);
 }
 
-if (document instanceof HTMLDocument)
-{
+function initializeComposer()
+{
+  if (typeof ext == "undefined")
+    return false;
+
   // 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.
   //   We also need to make sure that the previous right click event,
   // if there is one, is removed. We don't know which frame it is in so we must
   // send a message to the other frames to clear their old right click events.
   document.addEventListener("contextmenu", event =>
   {
     lastRightClickEvent = event;
     lastRightClickEventIsMostRecent = true;
 
-    ext.backgroundPage.sendMessage(
-    {
+    browser.runtime.sendMessage({
       type: "forward",
       payload:
       {
         type: "composer.content.clearPreviousRightClickEvent"
       }
     });
   }, true);
 
-  ext.onMessage.addListener((msg, sender, sendResponse) =>
-  {
-    switch (msg.type)
+  ext.onMessage.addListener((message, sender, sendResponse) =>
+  {
+    switch (message.type)
     {
       case "composer.content.getState":
         if (window == window.top)
+        {
           sendResponse({
             active: currentlyPickingElement || blockelementPopupId != null
           });
+        }
         break;
       case "composer.content.startPickingElement":
         if (window == window.top)
           startPickingElement();
         break;
       case "composer.content.contextMenuClicked":
         let event = lastRightClickEvent;
         let target = event && event.target;
 
         // When the user attempts to block an element inside an iframe for which
         // our right click event listener was trashed the best we can do is to
-        // offer to block the entire iframe. This of course only works if the
-        // parent frame is considered to be of the same origin.
-        if (!target && window.frameElement)
+        // offer to block the entire iframe. This doesn't work for cross origin
+        // frames, neither on Edge where per-frame messaging isn't supported
+        // yet[1], but it's the best we can do.
+        // [1] - https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/api-support/supported-apis/
+        if (!target && window.frameElement && perFrameMessagingSupported)
           target = addElementOverlay(window.frameElement);
 
         deactivateBlockElement();
         if (target)
         {
           getBlockableElementOrAncestor(target, element =>
           {
             if (element)
             {
               currentElement = element;
               elementPicked(event);
             }
           });
         }
         break;
       case "composer.content.finished":
-        if (currentElement && msg.remove)
+        if (currentElement && message.remove)
         {
           // Hide the selected element itself if an added blocking
           // filter is causing it to collapse. Note that this
           // behavior is incomplete, but the best we can do here,
           // e.g. if an added blocking filter matches other elements,
           // the effect won't be visible until the page is is reloaded.
           checkCollapse(currentElement.prisoner || currentElement);
 
           // Apply added element hiding filters.
           elemhide.apply();
         }
         deactivateBlockElement();
         break;
       case "composer.content.clearPreviousRightClickEvent":
         if (!lastRightClickEventIsMostRecent)
           lastRightClickEvent = null;
         lastRightClickEventIsMostRecent = false;
         break;
       case "composer.content.dialogOpened":
         if (window == window.top)
-          blockelementPopupId = msg.popupId;
+          blockelementPopupId = message.popupId;
         break;
       case "composer.content.dialogClosed":
         // The onRemoved hook for the popup can create a race condition, so we
         // to be careful here. (This is not perfect, but best we can do.)
-        if (window == window.top && blockelementPopupId == msg.popupId)
+        if (window == window.top && blockelementPopupId == message.popupId)
         {
-          ext.backgroundPage.sendMessage(
-          {
+          browser.runtime.sendMessage({
             type: "forward",
             payload:
             {
               type: "composer.content.finished"
             }
           });
         }
         break;
     }
   });
 
   if (window == window.top)
-    ext.backgroundPage.sendMessage({type: "composer.ready"});
-}
+    browser.runtime.sendMessage({type: "composer.ready"});
+
+  return true;
+}
+
+if (document instanceof HTMLDocument)
+{
+  // There's a bug in Firefox that causes document_end content scripts to run
+  // before document_start content scripts on extension startup. In this case
+  // the ext object is undefined, we fail to initialize, and initializeComposer
+  // returns false. As a workaround, try again after a timeout.
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1395287
+  if (!initializeComposer())
+    setTimeout(initializeComposer, 2000);
+}