tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

browser_aboutdebugging_addons_popup_picker.js (4585B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 "use strict";
      4 
      5 /* import-globals-from helper-addons.js */
      6 Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-addons.js", this);
      7 
      8 // There are shutdown issues for which multiple rejections are left uncaught.
      9 // See bug 1018184 for resolving these issues.
     10 const { PromiseTestUtils } = ChromeUtils.importESModule(
     11  "resource://testing-common/PromiseTestUtils.sys.mjs"
     12 );
     13 PromiseTestUtils.allowMatchingRejectionsGlobally(/File closed/);
     14 
     15 const { AppTestDelegate } = ChromeUtils.importESModule(
     16  "resource://specialpowers/AppTestDelegate.sys.mjs"
     17 );
     18 
     19 const ADDON_ID = "test-devtools-webextension@mozilla.org";
     20 const ADDON_NAME = "test-devtools-webextension";
     21 
     22 /**
     23 * Check that the node picker can be used when dynamically navigating to a
     24 * webextension popup.
     25 */
     26 add_task(async function testNodePickerInExtensionPopup() {
     27  await enableExtensionDebugging();
     28  const { document, tab, window } = await openAboutDebugging();
     29  await selectThisFirefoxPage(document, window.AboutDebugging.store);
     30 
     31  // Note that this extension should not define a background script in order to
     32  // reproduce the issue. Otherwise opening the popup does not trigger an auto
     33  // navigation from DevTools and you have to use the "Disable Popup Auto Hide"
     34  // feature which works around the bug tested here.
     35  const { extension } = await installTemporaryExtensionFromXPI(
     36    {
     37      extraProperties: {
     38        browser_action: {
     39          default_title: "WebExtension with popup",
     40          default_popup: "popup.html",
     41          default_area: "navbar",
     42        },
     43      },
     44      files: {
     45        "popup.html": `<!DOCTYPE html>
     46        <html>
     47          <body>
     48            <div id="pick-me"
     49                 style="width:100px; height: 60px; background-color: #f5e8fc">
     50              Pick me!
     51            </div>
     52          </body>
     53        </html>
     54      `,
     55      },
     56      id: ADDON_ID,
     57      name: ADDON_NAME,
     58    },
     59    document
     60  );
     61 
     62  const { devtoolsWindow } = await openAboutDevtoolsToolbox(
     63    document,
     64    tab,
     65    window,
     66    ADDON_NAME
     67  );
     68  const toolbox = getToolbox(devtoolsWindow);
     69  const inspector = await toolbox.getPanel("inspector");
     70 
     71  info("Start the node picker");
     72  await toolbox.nodePicker.start();
     73 
     74  info("Open the webextension popup");
     75  const { promise: onNewTarget, resolve: resolveNewTarget } =
     76    Promise.withResolvers();
     77  const onAvailable = async ({ targetFront }) => {
     78    if (targetFront.url.endsWith("/popup.html")) {
     79      resolveNewTarget(targetFront);
     80    }
     81  };
     82  const { promise: onTargetSelected, resolve: resolveTargetSelected } =
     83    Promise.withResolvers();
     84  const { targetCommand } = toolbox.commands;
     85  const onSelected = async ({ targetFront }) => {
     86    resolveTargetSelected(targetFront);
     87  };
     88  await targetCommand.watchTargets({
     89    types: [targetCommand.TYPES.FRAME],
     90    onAvailable,
     91    onSelected,
     92  });
     93  const onPanelOpened = AppTestDelegate.awaitExtensionPanel(window, extension);
     94 
     95  const onReloaded = inspector.once("reloaded");
     96  clickOnAddonWidget(ADDON_ID);
     97  await onPanelOpened;
     98  info("Wait for the target front related to the popup");
     99  await onNewTarget;
    100  // The popup document will automatically be selected and the inspector reloaded
    101  info("Wait for the inspector to be reloaded against the popup's document");
    102  await onReloaded;
    103 
    104  const popup = gBrowser.ownerDocument.querySelector(
    105    ".webextension-popup-browser"
    106  );
    107 
    108  info("Pick an element inside the webextension popup");
    109  // First mouse over the element to simulate real world events
    110  BrowserTestUtils.synthesizeMouseAtCenter(
    111    "#pick-me",
    112    { type: "mousemove" },
    113    popup.browsingContext
    114  );
    115  info("Wait fot the popup's target to be selected");
    116  await onTargetSelected;
    117  targetCommand.unwatchTargets({
    118    types: [targetCommand.TYPES.FRAME],
    119    onAvailable,
    120  });
    121 
    122  // Only then, click on the element to pick it
    123  const onNewNodeFront = inspector.selection.once("new-node-front");
    124  BrowserTestUtils.synthesizeMouseAtCenter(
    125    "#pick-me",
    126    {},
    127    popup.browsingContext
    128  );
    129  // Picking the element in the popup will change the currently selected target and make the inspector load the popup document
    130  info("Wait for the popup's target to become the selected one");
    131 
    132  const nodeFront = await onNewNodeFront;
    133  is(nodeFront.id, "pick-me", "The expected node front was selected");
    134 
    135  await closeWebExtAboutDevtoolsToolbox(devtoolsWindow, window);
    136  await removeTemporaryExtension(ADDON_NAME, document);
    137  await removeTab(tab);
    138 });