summaryrefslogtreecommitdiffstats
path: root/devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_addons_popup_picker.js
blob: fc67bc7f7c9f482921159148fb00d29be6754e44 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";

/* import-globals-from helper-addons.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-addons.js", this);

// There are shutdown issues for which multiple rejections are left uncaught.
// See bug 1018184 for resolving these issues.
const { PromiseTestUtils } = ChromeUtils.importESModule(
  "resource://testing-common/PromiseTestUtils.sys.mjs"
);
PromiseTestUtils.allowMatchingRejectionsGlobally(/File closed/);

const ADDON_ID = "test-devtools-webextension@mozilla.org";
const ADDON_NAME = "test-devtools-webextension";

/**
 * Check that the node picker can be used when dynamically navigating to a
 * webextension popup.
 */
add_task(async function testNodePickerInExtensionPopup() {
  await enableExtensionDebugging();
  const { document, tab, window } = await openAboutDebugging();
  await selectThisFirefoxPage(document, window.AboutDebugging.store);

  // Note that this extension should not define a background script in order to
  // reproduce the issue. Otherwise opening the popup does not trigger an auto
  // navigation from DevTools and you have to use the "Disable Popup Auto Hide"
  // feature which works around the bug tested here.
  await installTemporaryExtensionFromXPI(
    {
      extraProperties: {
        browser_action: {
          default_title: "WebExtension with popup",
          default_popup: "popup.html",
        },
      },
      files: {
        "popup.html": `<!DOCTYPE html>
        <html>
          <body>
            <div id="pick-me"
                 style="width:100px; height: 60px; background-color: #f5e8fc">
              Pick me!
            </div>
          </body>
        </html>
      `,
      },
      id: ADDON_ID,
      name: ADDON_NAME,
    },
    document
  );

  const { devtoolsWindow } = await openAboutDevtoolsToolbox(
    document,
    tab,
    window,
    ADDON_NAME
  );
  const toolbox = getToolbox(devtoolsWindow);
  const inspector = await toolbox.getPanel("inspector");

  info("Start the node picker");
  await toolbox.nodePicker.start();

  info("Open the webextension popup");
  // Clicking on the addon popup will trigger a navigation between the DevTools
  // fallback document and the popup document.
  // Wait until the inspector was fully reloaded and for the node-picker to be
  // restarted.
  const nodePickerRestarted = toolbox.nodePicker.once(
    "node-picker-webextension-target-restarted"
  );
  const reloaded = inspector.once("reloaded");
  clickOnAddonWidget(ADDON_ID);
  await reloaded;
  await nodePickerRestarted;

  const popup = await waitFor(() =>
    gBrowser.ownerDocument.querySelector(".webextension-popup-browser")
  );

  info("Pick an element inside the webextension popup");
  const onNewNodeFront = inspector.selection.once("new-node-front");
  BrowserTestUtils.synthesizeMouseAtCenter(
    "#pick-me",
    {},
    popup.browsingContext
  );
  const nodeFront = await onNewNodeFront;
  is(nodeFront.id, "pick-me", "The expected node front was selected");

  await closeWebExtAboutDevtoolsToolbox(devtoolsWindow, window);
  await removeTemporaryExtension(ADDON_NAME, document);
  await removeTab(tab);
});