mozilla-central/devtools/client/webconsole/test/browser/browser_jsterm_evaluation_context_selector_targets_update.js (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Errors

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const FILE_FOLDER = `browser/devtools/client/webconsole/test/browser`;
const TEST_URI = `https://example.com/${FILE_FOLDER}/test-console-evaluation-context-selector.html`;
const IFRAME_PATH = `${FILE_FOLDER}/test-console-evaluation-context-selector-child.html`;
// Test that when a target is destroyed, it does not appear in the list anymore (and
// the context is set to the top one if the destroyed target was selected).
add_task(async function () {
await pushPref("devtools.popups.debug", true);
await pushPref("devtools.webconsole.input.context", true);
const hud = await openNewTabWithIframesAndConsole(TEST_URI, [
`https://example.net/${IFRAME_PATH}?id=iframe-1`,
]);
const evaluationContextSelectorButton = hud.ui.outputNode.querySelector(
".webconsole-evaluation-selector-button"
);
if (!isFissionEnabled() && !isEveryFrameTargetEnabled()) {
is(
evaluationContextSelectorButton,
null,
"context selector is only displayed when Fission or EFT is enabled"
);
return;
}
is(
evaluationContextSelectorButton.innerText,
"Top",
"The button has the expected 'Top' text"
);
setInputValue(hud, "document.location.host");
await waitForEagerEvaluationResult(hud, `"example.com"`);
info("Check the context selector menu");
const expectedTopItem = {
label: "Top",
tooltip: TEST_URI,
};
const expectedSeparatorItem = { separator: true };
const expectedFirstIframeItem = {
label: "iframe-1|example.net",
tooltip: `https://example.net/${IFRAME_PATH}?id=iframe-1`,
};
await checkContextSelectorMenu(hud, [
{
...expectedTopItem,
checked: true,
},
expectedSeparatorItem,
{
...expectedFirstIframeItem,
checked: false,
},
]);
info("Add another iframe");
ContentTask.spawn(gBrowser.selectedBrowser, [IFRAME_PATH], function (path) {
const iframe = content.document.createElement("iframe");
iframe.src = `https://test1.example.org/${path}?id=iframe-2`;
content.document.body.append(iframe);
});
// Wait until the new iframe is rendered in the context selector.
await waitFor(() => {
const items = getContextSelectorItems(hud);
return (
items.length === 4 &&
items.some(el =>
el
.querySelector(".label")
?.textContent.includes("iframe-2|test1.example.org")
)
);
});
const expectedSecondIframeItem = {
label: `iframe-2|test1.example.org`,
tooltip: `https://test1.example.org/${IFRAME_PATH}?id=iframe-2`,
};
await checkContextSelectorMenu(hud, [
{
...expectedTopItem,
checked: true,
},
expectedSeparatorItem,
{
...expectedFirstIframeItem,
checked: false,
},
{
...expectedSecondIframeItem,
checked: false,
},
]);
info("Select the first iframe");
selectTargetInContextSelector(hud, expectedFirstIframeItem.label);
await waitFor(() =>
evaluationContextSelectorButton.innerText.includes("example.net")
);
await waitForEagerEvaluationResult(hud, `"example.net"`);
ok(true, "The context was set to the selected iframe document");
info("Remove the first iframe from the content document");
ContentTask.spawn(gBrowser.selectedBrowser, [], function () {
content.document.querySelector("iframe").remove();
});
await waitFor(() =>
evaluationContextSelectorButton.innerText.includes("Top")
);
ok(
true,
"The context was set to Top frame after the selected iframe was removed"
);
await waitForEagerEvaluationResult(hud, `"example.com"`);
ok(true, "Instant evaluation is done against the top frame context");
await checkContextSelectorMenu(hud, [
{
...expectedTopItem,
checked: true,
},
expectedSeparatorItem,
{
...expectedSecondIframeItem,
checked: false,
},
]);
info("Select the remaining iframe");
selectTargetInContextSelector(hud, expectedSecondIframeItem.label);
await waitFor(() =>
evaluationContextSelectorButton.innerText.includes("test1.example.org")
);
await waitForEagerEvaluationResult(hud, `"test1.example.org"`);
ok(true, "The context was set to the selected iframe document");
info("Remove the second iframe from the content document");
ContentTask.spawn(gBrowser.selectedBrowser, [], function () {
content.document.querySelector("iframe").remove();
});
await waitFor(
() =>
!hud.ui.outputNode.querySelector(".webconsole-evaluation-selector-button")
);
ok(
true,
"The evaluation context selector is hidden after last iframe was removed"
);
await waitForEagerEvaluationResult(hud, `"example.com"`);
ok(true, "Instant evaluation is done against the top frame context");
info("Open a popup");
const originalTab = gBrowser.selectedTab;
let onSwitchedHost = hud.toolbox.once("host-changed");
await ContentTask.spawn(
gBrowser.selectedBrowser,
[IFRAME_PATH],
function (path) {
content.open(`https://test2.example.org/${path}?id=popup`);
}
);
await onSwitchedHost;
// Wait until the popup is rendered in the context selector
// and that it is automatically switched to (aria-checked==true).
await waitFor(() => {
try {
const items = getContextSelectorItems(hud);
return (
items.length === 3 &&
items.some(
el =>
el
.querySelector(".label")
?.textContent.includes("popup|test2.example.org") &&
el.getAttribute("aria-checked") === "true"
)
);
} catch (e) {
// The context list may be wiped while updating and getContextSelectorItems will throw
}
return false;
});
const expectedPopupItem = {
label: `popup|test2.example.org`,
tooltip: `https://test2.example.org/${IFRAME_PATH}?id=popup`,
};
await checkContextSelectorMenu(hud, [
{
...expectedTopItem,
checked: false,
},
expectedSeparatorItem,
{
...expectedPopupItem,
checked: true,
},
]);
await waitForEagerEvaluationResult(hud, `"test2.example.org"`);
ok(true, "The context was set to the popup document");
info("Open a second popup and reload the original tab");
onSwitchedHost = hud.toolbox.once("host-changed");
await ContentTask.spawn(
originalTab.linkedBrowser,
[IFRAME_PATH],
function (path) {
content.open(`https://test2.example.org/${path}?id=popup2`);
}
);
await onSwitchedHost;
// Reloading the tab while having two popups opened used to
// generate exception in the context selector component
await BrowserTestUtils.reloadTab(originalTab);
ok(
!hud.ui.document.querySelector(".app-error-panel"),
"The web console did not crash"
);
});