Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that the start and end buttons on the breadcrumb trail bring the right
// crumbs into the visible area, for both LTR and RTL
const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
const TEST_URI = URL_ROOT + "doc_inspector_breadcrumbs_visibility.html";
const NODE_ONE = "div#aVeryLongIdToExceedTheBreadcrumbTruncationLimit";
const NODE_TWO = "div#anotherVeryLongIdToExceedTheBreadcrumbTruncationLimit";
const NODE_THREE = "div#aThirdVeryLongIdToExceedTheTruncationLimit";
const NODE_FOUR = "div#aFourthOneToExceedTheTruncationLimit";
const NODE_FIVE = "div#aFifthOneToExceedTheTruncationLimit";
const NODE_SIX = "div#aSixthOneToExceedTheTruncationLimit";
const NODE_SEVEN = "div#aSeventhOneToExceedTheTruncationLimit";
const NODES = [
{ action: "start", title: NODE_SIX },
{ action: "start", title: NODE_FIVE },
{ action: "start", title: NODE_FOUR },
{ action: "start", title: NODE_THREE },
{ action: "start", title: NODE_TWO },
{ action: "start", title: NODE_ONE },
{ action: "end", title: NODE_TWO },
{ action: "end", title: NODE_THREE },
{ action: "end", title: NODE_FOUR },
{ action: "end", title: NODE_FIVE },
{ action: "end", title: NODE_SIX },
];
add_task(async function () {
const { inspector, toolbox } = await openInspectorForURL(TEST_URI);
// Rather than wait a max time; limit test to instant scroll behavior
inspector.breadcrumbs.arrowScrollBox.scrollBehavior = "instant";
await toolbox.switchHost(Toolbox.HostType.WINDOW);
const hostWindow = toolbox.win.parent;
const originalWidth = hostWindow.outerWidth;
const originalHeight = hostWindow.outerHeight;
const inspectorResized = inspector.once("inspector-resize");
hostWindow.resizeTo(640, 300);
await inspectorResized;
info("Testing transitions ltr");
await pushPref("intl.l10n.pseudo", "");
await testBreadcrumbTransitions(hostWindow, inspector);
info("Testing transitions rtl");
await pushPref("intl.l10n.pseudo", "bidi");
await testBreadcrumbTransitions(hostWindow, inspector);
hostWindow.resizeTo(originalWidth, originalHeight);
});
async function testBreadcrumbTransitions(hostWindow, inspector) {
const breadcrumbs = inspector.panelDoc.getElementById(
"inspector-breadcrumbs"
);
const startBtn = breadcrumbs.querySelector(".scrollbutton-up");
const endBtn = breadcrumbs.querySelector(".scrollbutton-down");
const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner");
const breadcrumbsUpdated = inspector.once("breadcrumbs-updated");
info("Selecting initial node");
await selectNode(NODE_SEVEN, inspector);
// So just need to wait for a duration
await breadcrumbsUpdated;
const initialCrumb = container.querySelector(`button[aria-pressed="true"]`);
is(
isElementInViewport(hostWindow, initialCrumb),
true,
"initial element was visible"
);
for (const node of NODES) {
info("Checking for visibility of crumb " + node.title);
if (node.action === "end") {
info("Simulating click of end button");
EventUtils.synthesizeMouseAtCenter(endBtn, {}, inspector.panelWin);
} else if (node.action === "start") {
info("Simulating click of start button");
EventUtils.synthesizeMouseAtCenter(startBtn, {}, inspector.panelWin);
}
await breadcrumbsUpdated;
const selector = 'button[title="' + node.title + '"]';
const relevantCrumb = container.querySelector(selector);
is(
isElementInViewport(hostWindow, relevantCrumb),
true,
node.title + " crumb is visible"
);
}
}
function isElementInViewport(window, el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= window.innerHeight &&
rect.right <= window.innerWidth
);
}
registerCleanupFunction(function () {
// Restore the host type for other tests.
Services.prefs.clearUserPref("devtools.toolbox.host");
});