summaryrefslogtreecommitdiffstats
path: root/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_unavailable_children.js
blob: 5029c623060b268469c80c87f0ff2f0cfabc608a (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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

// 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/);

Services.scriptloader.loadSubScript(
  "chrome://mochitests/content/browser/devtools/client/inspector/test/shared-head.js",
  this
);

// On debug test machine, it takes about 50s to run the test.
requestLongerTimeout(4);

// This test is used to test a badge displayed in the markup view under content
// browser elements when switching from Multi Process mode to Parent Process
// mode.

add_task(async function () {
  // Forces the Browser Toolbox to open on the inspector by default
  await pushPref("devtools.browsertoolbox.panel", "inspector");
  await pushPref("devtools.browsertoolbox.scope", "everything");

  const tab = await addTab(
    "https://example.com/document-builder.sjs?html=<div id=pick-me>Pickme"
  );
  tab.linkedBrowser.setAttribute("test-tab", "true");

  const ToolboxTask = await initBrowserToolboxTask();

  await ToolboxTask.importFunctions({
    waitUntil,
    getNodeFront,
    selectNode,
  });

  const tabProcessID =
    tab.linkedBrowser.browsingContext.currentWindowGlobal.osPid;

  const decodedTabURI = decodeURI(tab.linkedBrowser.currentURI.spec);

  await ToolboxTask.spawn(
    [tabProcessID, isFissionEnabled(), decodedTabURI],
    async (processID, _isFissionEnabled, tabURI) => {
      /* global gToolbox */
      const inspector = gToolbox.getPanel("inspector");

      info("Select the test browser element.");
      await selectNode('browser[remote="true"][test-tab]', inspector);

      info("Retrieve the node front for selected node.");
      const browserNodeFront = inspector.selection.nodeFront;
      ok(!!browserNodeFront, "Retrieved a node front for the browser");
      is(browserNodeFront.displayName, "browser");

      // Small helper to expand containers and return the child container
      // matching the provided display name.
      async function expandContainer(container, expectedChildName) {
        info(`Expand the node expected to contain a ${expectedChildName}`);
        await inspector.markup.expandNode(container.node);
        await waitUntil(() => !!container.getChildContainers().length);

        const children = container
          .getChildContainers()
          .filter(child => child.node.displayName === expectedChildName);
        is(children.length, 1);
        return children[0];
      }

      info("Check that the corresponding markup view container has children");
      const browserContainer = inspector.markup.getContainer(browserNodeFront);
      ok(browserContainer.hasChildren);
      ok(
        !browserContainer.node.childrenUnavailable,
        "childrenUnavailable un-set"
      );
      ok(
        !browserContainer.elt.querySelector(".unavailable-children"),
        "The unavailable badge is not displayed"
      );

      // Store the asserts as a helper to reuse it later in the test.
      async function assertMarkupView() {
        info("Check that the children are #document > html > body > div");
        let container = await expandContainer(browserContainer, "#document");
        container = await expandContainer(container, "html");
        container = await expandContainer(container, "body");
        container = await expandContainer(container, "div");

        info("Select the #pick-me div");
        await selectNode(container.node, inspector);
        is(inspector.selection.nodeFront.id, "pick-me");
      }
      await assertMarkupView();

      const parentProcessScope = gToolbox.doc.querySelector(
        'input[name="chrome-debug-mode"][value="parent-process"]'
      );

      info("Switch to parent process only scope");
      const onInspectorUpdated = inspector.once("inspector-updated");
      parentProcessScope.click();
      await onInspectorUpdated;

      // Note: `getChildContainers` returns null when the container has no
      // children, instead of an empty array.
      await waitUntil(() => browserContainer.getChildContainers() === null);

      ok(!browserContainer.hasChildren, "browser container has no children");
      ok(browserContainer.node.childrenUnavailable, "childrenUnavailable set");
      ok(
        !!browserContainer.elt.querySelector(".unavailable-children"),
        "The unavailable badge is displayed"
      );

      const everythingScope = gToolbox.doc.querySelector(
        'input[name="chrome-debug-mode"][value="everything"]'
      );

      info("Switch to multi process scope");
      everythingScope.click();

      info("Wait until browserContainer has children");
      await waitUntil(() => browserContainer.hasChildren);
      ok(browserContainer.hasChildren, "browser container has children");
      ok(
        !browserContainer.node.childrenUnavailable,
        "childrenUnavailable un-set"
      );
      ok(
        !browserContainer.elt.querySelector(".unavailable-children"),
        "The unavailable badge is no longer displayed"
      );

      await assertMarkupView();
    }
  );

  await ToolboxTask.destroy();
});