/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Check "Show tabbing order" works as expected
const TEST_URI = `https://example.com/document-builder.sjs?html=
`;
add_task(async () => {
const { doc, store, tab, toolbox } = await addTestTab(TEST_URI);
const topLevelFrameHighlighterTestFront = await toolbox.target.getFront(
"highlighterTest"
);
const frameTargets = toolbox.commands.targetCommand.getAllTargets([
toolbox.commands.targetCommand.TYPES.FRAME,
]);
const orgIframeTarget = frameTargets.find(t =>
t.url.startsWith("https://example.org")
);
const netIframeTarget = frameTargets.find(t =>
t.url.startsWith("https://example.net")
);
// The iframe only has a dedicated target when Fission or EFT is enabled
const orgIframeHighlighterTestFront = orgIframeTarget
? await orgIframeTarget.getFront("highlighterTest")
: null;
const netIframeHighlighterTestFront = netIframeTarget
? await netIframeTarget.getFront("highlighterTest")
: null;
let tabbingOrderHighlighterData =
await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData();
is(
tabbingOrderHighlighterData.length,
0,
"Tabbing order is not visible at first"
);
info(`Click on "Show Tabbing Order" checkbox`);
const tabbingOrderCheckbox = doc.getElementById(
"devtools-display-tabbing-order-checkbox"
);
tabbingOrderCheckbox.click();
await waitUntilState(store, state => state.ui.tabbingOrderDisplayed === true);
is(tabbingOrderCheckbox.checked, true, "Checkbox is checked");
tabbingOrderHighlighterData =
await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData();
if (isFissionEnabled()) {
// ⚠️ We don't get the highlighter for the node of the iframe when Fission is enabled.
// This should be fix as part of Bug 1740509.
is(
JSON.stringify(tabbingOrderHighlighterData),
JSON.stringify([`button#top-btn-1 : 1`, `button#top-btn-2 : 4`]),
"Tabbing order is visible for the top level target after clicking the checkbox"
);
const orgIframeTabingOrderHighlighterData =
await orgIframeHighlighterTestFront.getTabbingOrderHighlighterData();
is(
JSON.stringify(orgIframeTabingOrderHighlighterData),
JSON.stringify([
`button#iframe-org-btn-1 : 2`,
`button#iframe-org-btn-2 : 3`,
]),
"Tabbing order is visible for the org iframe after clicking the checkbox"
);
const netIframeTabingOrderHighlighterData =
await netIframeHighlighterTestFront.getTabbingOrderHighlighterData();
is(
JSON.stringify(netIframeTabingOrderHighlighterData),
JSON.stringify([`button#iframe-net-btn-1 : 5`]),
"Tabbing order is visible for the net iframe after clicking the checkbox"
);
} else {
is(
JSON.stringify(tabbingOrderHighlighterData),
JSON.stringify([
`button#top-btn-1 : 1`,
`html : 2`,
`button#iframe-org-btn-1 : 3`,
`button#iframe-org-btn-2 : 4`,
`button#top-btn-2 : 5`,
`html : 6`,
`button#iframe-net-btn-1 : 7`,
]),
"Tabbing order is visible for the top level target after clicking the checkbox"
);
}
info(`Clicking on the checkbox again hides the highlighter`);
tabbingOrderCheckbox.click();
await waitUntilState(
store,
state => state.ui.tabbingOrderDisplayed === false
);
is(tabbingOrderCheckbox.checked, false, "Checkbox is unchecked");
tabbingOrderHighlighterData =
await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData();
is(
tabbingOrderHighlighterData.length,
0,
"Tabbing order is not visible anymore after unchecking the checkbox"
);
if (isFissionEnabled()) {
const orgIframeTabingOrderHighlighterData =
await orgIframeHighlighterTestFront.getTabbingOrderHighlighterData();
is(
orgIframeTabingOrderHighlighterData.length,
0,
"Tabbing order is also hidden on the org iframe target"
);
const netIframeTabingOrderHighlighterData =
await netIframeHighlighterTestFront.getTabbingOrderHighlighterData();
is(
netIframeTabingOrderHighlighterData.length,
0,
"Tabbing order is also hidden on the net iframe target"
);
}
await closeTabToolboxAccessibility(tab);
});