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");
   });
 
@@ skipping 23 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.
-        //   Note: Since Edge doesn't yet support per-frame messaging[1] we
-        // can't use this workaround there yet. (The contextMenuClicked message
-        // will be sent to all of the page's frames.)
+        // 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 && typeof chrome != "undefined")
+        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);
+}