Bug 1701152 - Use a browser element for the pocket customizable widget panel. r=Gijs,thecount

Differential Revision: https://phabricator.services.mozilla.com/D113960

browser/base/content/test/keyboard/browser_toolbarButtonKeyPress.js

@@ -336,8 +336,9 @@ add_task(async function testDownloadsButtonPress() {
 });
 
 // Test activation of the Save to Pocket button from the keyboard.
-// This is a customizable widget button which shows an iframe.
-// The Pocket iframe should appear and focus should move inside it.
+// This is a customizable widget button which shows an popup panel
+// with a browser element to embed the pocket UI into it.
+// The Pocket panel should appear and focus should move inside it.
 add_task(async function testPocketButtonPress() {
   await BrowserTestUtils.withNewTab("https://example.com", async function(
     aBrowser
@@ -355,8 +356,8 @@ add_task(async function testPocketButtonPress() {
     await focused;
     is(
       document.activeElement.tagName,
-      "iframe",
-      "Focus inside Pocket iframe after Bookmark button pressed"
+      "browser",
+      "Focus inside Pocket panel after Bookmark button pressed"
     );
     let hidden = BrowserTestUtils.waitForEvent(panel, "popuphidden");
     EventUtils.synthesizeKey("KEY_Escape");

browser/components/pocket/content/SaveToPocket.jsm

@@ -51,22 +51,22 @@ var PocketCustomizableWidget = {
           ".PanelUI-savetopocket-container"
         );
         let doc = panelNode.ownerDocument;
-        let iframe = doc.createXULElement("iframe");
+        let frame = doc.createXULElement("browser");
 
-        iframe.setAttribute("type", "content");
-        panelNode.appendChild(iframe);
+        frame.setAttribute("type", "content");
+        panelNode.appendChild(frame);
 
-        SaveToPocket.onShownInToolbarPanel(panelNode, iframe);
+        SaveToPocket.onShownInToolbarPanel(panelNode, frame);
       },
       onViewHiding(aEvent) {
         let panelView = aEvent.target;
         let panelNode = panelView.querySelector(
           ".PanelUI-savetopocket-container"
         );
-        let iframe = panelNode.querySelector("iframe");
+        let frame = panelNode.querySelector("browser");
         let browser = panelNode.ownerGlobal.gBrowser.selectedBrowser;
 
-        if (iframe.getAttribute("itemAdded") == "true") {
+        if (frame.getAttribute("itemAdded") == "true") {
           SaveToPocket.innerWindowIDsByBrowser.set(
             browser,
             browser.innerWindowID
@@ -250,9 +250,9 @@ var SaveToPocket = {
   /**
    * Functions related to the Pocket panel UI.
    */
-  onShownInToolbarPanel(panel, iframe) {
+  onShownInToolbarPanel(panel, frame) {
     let window = panel.ownerGlobal;
-    window.pktUI.setToolbarPanelFrame(iframe);
+    window.pktUI.setToolbarPanelFrame(frame);
     Pocket._initPanelView(window);
   },
 

browser/components/pocket/content/pktUI.js

@@ -274,10 +274,10 @@ var pktUI = (function() {
     // We don't have to hide and show the panel again if it's already shown
     // as if the user tries to click again on the toolbar button the overlay
     // will close instead of the button will be clicked
-    var iframe = getPanelFrame();
+    var frame = getPanelFrame();
 
-    // Load the iframe
-    iframe.setAttribute("src", url);
+    // Load the frame
+    frame.setAttribute("src", url);
   }
 
   function onShowSignup() {
@@ -440,17 +440,17 @@ var pktUI = (function() {
    * }
    */
   function resizePanel(options = {}) {
-    var iframe = getPanelFrame();
+    var frame = getPanelFrame();
 
     // Set an explicit size, panel will adapt.
-    iframe.style.width = options.width + "px";
-    iframe.style.height = options.height + "px";
+    frame.style.width = options.width + "px";
+    frame.style.height = options.height + "px";
   }
 
   // -- Browser Navigation -- //
 
   /**
-   * Open a new tab with a given url and notify the iframe panel that it was opened
+   * Open a new tab with a given url and notify the frame panel that it was opened
    */
 
   function openTabWithUrl(url, aTriggeringPrincipal, aCsp) {
@@ -638,7 +638,7 @@ var pktUI = (function() {
 // -- Communication to Background -- //
 var pktUIMessaging = (function() {
   /**
-   * Send a message to the panel's iframe
+   * Send a message to the panel's frame
    */
   function sendMessageToPanel(messageId, panelId, payload) {
     if (!isPanelIdValid(panelId)) {
@@ -660,7 +660,7 @@ var pktUIMessaging = (function() {
 
   /**
    * Helper function to package an error object and send it to the panel
-   * iframe as a message response
+   * frame as a message response
    */
   function sendErrorMessageToPanel(messageId, panelId, error) {
     var errorResponse = { status: "error", error };

browser/components/pocket/test/browser_pocket_home_panel.js

@@ -24,10 +24,10 @@ add_task(async function() {
   await pocketPanelShowing;
 
   let pocketPanel = document.getElementById("customizationui-widget-panel");
-  let pocketIframe = pocketPanel.querySelector("iframe");
+  let pocketFrame = pocketPanel.querySelector("browser");
 
   await ContentTaskUtils.waitForCondition(
-    () => pocketIframe.src.split("?")[0] === "about:pocket-home",
+    () => pocketFrame.src.split("?")[0] === "about:pocket-home",
     "pocket home panel is showing"
   );
 

browser/components/pocket/test/browser_pocket_panel.js

@@ -24,6 +24,47 @@ add_task(async function() {
   let pocketPanel = document.getElementById("customizationui-widget-panel");
   is(pocketPanel.state, "showing", "pocket panel is showing");
 
+  info("Trigger context menu in a pocket panel element");
+  let contextMenu = document.getElementById("contentAreaContextMenu");
+  is(contextMenu.state, "closed", "context menu popup is closed");
+  let popupShown = BrowserTestUtils.waitForEvent(contextMenu, "popupshown");
+  let popupHidden = BrowserTestUtils.waitForEvent(contextMenu, "popuphidden");
+
+  let pocketFrame = pocketPanel.querySelector("browser");
+
+  // Avoid intermittency due to race between loading of the pocket panel
+  // and our call to BrowserTestUtils.browserLoaded.
+  const { readyState } = pocketFrame.contentDocument;
+  if (readyState !== "complete") {
+    info(
+      `Wait pocket frame to be fully loaded, current readyState ${readyState}`
+    );
+    await BrowserTestUtils.browserLoaded(pocketFrame);
+  }
+
+  // Avoid intermittency due to synthesizeMouse not always triggering the
+  // context menu as this test expects (see Bug 1519808).
+  pocketFrame.contentDocument.body.dispatchEvent(
+    new pocketFrame.contentWindow.MouseEvent("contextmenu", {
+      bubbles: true,
+      cancelable: true,
+      view: pocketFrame.contentWindow,
+    })
+  );
+
+  await popupShown;
+  is(contextMenu.state, "open", "context menu popup is open");
+  const emeLearnMoreContextItem = contextMenu.querySelector(
+    "#context-media-eme-learnmore"
+  );
+  ok(
+    BrowserTestUtils.is_hidden(emeLearnMoreContextItem),
+    "Unrelated context menu items should be hidden"
+  );
+
+  contextMenu.hidePopup();
+  await popupHidden;
+
   info("closing pocket panel");
   let pocketPanelHidden = BrowserTestUtils.waitForEvent(
     pocketPanel,