Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
const { TYPES: HIGHLIGHTER_TYPES } = ChromeUtils.importESModule(
"resource://devtools/shared/highlighters.mjs"
);
const TEST_URL = `data:text/html;charset=utf8,rulers highlighters restored`;
// Test that the ruler highlighters are properly restored after a reload.
add_task(async function test() {
await pushPref("devtools.command-button-rulers.enabled", true);
const tab = await addTab(TEST_URL);
const toolbox = await gDevTools.showToolboxForTab(tab, {
toolId: "inspector",
});
let inspectorFront = await toolbox.target.getFront("inspector");
info("Show the rulers");
await clickRulersButton(toolbox, true);
await waitForHighlighterState(inspectorFront, true);
ok(
(
await inspectorFront.getHighlighterByType(HIGHLIGHTER_TYPES.RULERS)
).isShown(),
"Rulers highlighter is shown"
);
ok(
(
await inspectorFront.getHighlighterByType(HIGHLIGHTER_TYPES.VIEWPORT_SIZE)
).isShown(),
"Viewport Size highlighter is shown"
);
info("Reload the page");
await reloadSelectedTab();
inspectorFront = await toolbox.target.getFront("inspector");
await waitForHighlighterState(inspectorFront, true);
ok(
(
await inspectorFront.getHighlighterByType(HIGHLIGHTER_TYPES.RULERS)
).isShown(),
"Rulers highlighter is shown"
);
ok(
(
await inspectorFront.getHighlighterByType(HIGHLIGHTER_TYPES.VIEWPORT_SIZE)
).isShown(),
"Viewport Size highlighter is shown"
);
info("Turn off the rulers");
await clickRulersButton(toolbox, false);
await waitForHighlighterState(inspectorFront, false);
ok(
!(
await inspectorFront.getHighlighterByType(HIGHLIGHTER_TYPES.RULERS)
).isShown(),
"Rulers highlighter is not shown anymore"
);
ok(
!(
await inspectorFront.getHighlighterByType(HIGHLIGHTER_TYPES.VIEWPORT_SIZE)
).isShown(),
"Viewport Size highlighter is not shown anymore"
);
await toolbox.destroy();
});
function getRulersButton(toolbox) {
return toolbox.doc.querySelector("#command-button-rulers");
}
async function clickRulersButton(toolbox, expectedState) {
const button = getRulersButton(toolbox);
button.click();
await waitFor(() => {
// The button DOM element is re-created by React on updates
// and needs to be updated on each check
const btn = getRulersButton(toolbox);
return btn && isButtonActive(btn) === expectedState;
});
}
function isButtonActive(button) {
return button.classList.contains("checked");
}
async function waitForHighlighterState(inspectorFront, shouldBeShown) {
await waitFor(async () => {
const rulersHighlighter = await inspectorFront.getHighlighterByType(
HIGHLIGHTER_TYPES.RULERS
);
const viewportSizeHighlighter = await inspectorFront.getHighlighterByType(
HIGHLIGHTER_TYPES.VIEWPORT_SIZE
);
const rulersHighlighterVisible = rulersHighlighter?.isShown();
const viewportSizeHighlighterVisible = viewportSizeHighlighter?.isShown();
return shouldBeShown
? rulersHighlighterVisible && viewportSizeHighlighterVisible
: !rulersHighlighterVisible && !viewportSizeHighlighterVisible;
});
}