diff options
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js new file mode 100644 index 0000000000..1267d23646 --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_visibility.js @@ -0,0 +1,114 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +"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); + + // No way to wait for scrolling to end (Bug 1172171) + // 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[checked]"); + 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"); +}); |