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-2017 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/>.
  */
 
-/* globals checkCollapse, elemhide, getURLsFromElement, typeMap */
-
 "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.get(element.localName),
     baseURL: document.location.href
   },
@@ skipping 330 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}
       });
 
       // 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}
         });
       }
     });
 
     if (selectors.length > 0)
       highlightElements(selectors.join(","));
 
     highlightElement(currentElement, "#fd1708", "#f6a1b5");
@@ skipping 25 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")

[kzar, 2017/08/09 15:29:24]

Note: This check `typeof chrome != "undefined"` is wrong, we should be using the
info module to check if the platform is edge. Unfortunately we can't do that
until the content scripts start using the module system however.

[kzar, 2017/10/18 14:57:26]

Done.

+        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);
+}