browser_inspector_breadcrumbs_visibility.js (3963B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 "use strict"; 4 5 // Test that the start and end buttons on the breadcrumb trail bring the right 6 // crumbs into the visible area, for both LTR and RTL 7 8 const { Toolbox } = require("resource://devtools/client/framework/toolbox.js"); 9 10 const TEST_URI = URL_ROOT + "doc_inspector_breadcrumbs_visibility.html"; 11 const NODE_ONE = "div#aVeryLongIdToExceedTheBreadcrumbTruncationLimit"; 12 const NODE_TWO = "div#anotherVeryLongIdToExceedTheBreadcrumbTruncationLimit"; 13 const NODE_THREE = "div#aThirdVeryLongIdToExceedTheTruncationLimit"; 14 const NODE_FOUR = "div#aFourthOneToExceedTheTruncationLimit"; 15 const NODE_FIVE = "div#aFifthOneToExceedTheTruncationLimit"; 16 const NODE_SIX = "div#aSixthOneToExceedTheTruncationLimit"; 17 const NODE_SEVEN = "div#aSeventhOneToExceedTheTruncationLimit"; 18 19 const NODES = [ 20 { action: "start", title: NODE_SIX }, 21 { action: "start", title: NODE_FIVE }, 22 { action: "start", title: NODE_FOUR }, 23 { action: "start", title: NODE_THREE }, 24 { action: "start", title: NODE_TWO }, 25 { action: "start", title: NODE_ONE }, 26 { action: "end", title: NODE_TWO }, 27 { action: "end", title: NODE_THREE }, 28 { action: "end", title: NODE_FOUR }, 29 { action: "end", title: NODE_FIVE }, 30 { action: "end", title: NODE_SIX }, 31 ]; 32 33 add_task(async function () { 34 const { inspector, toolbox } = await openInspectorForURL(TEST_URI); 35 36 // No way to wait for scrolling to end (Bug 1172171) 37 // Rather than wait a max time; limit test to instant scroll behavior 38 inspector.breadcrumbs.arrowScrollBox.scrollBehavior = "instant"; 39 40 await toolbox.switchHost(Toolbox.HostType.WINDOW); 41 const hostWindow = toolbox.win.parent; 42 const originalWidth = hostWindow.outerWidth; 43 const originalHeight = hostWindow.outerHeight; 44 const inspectorResized = inspector.once("inspector-resize"); 45 hostWindow.resizeTo(640, 300); 46 await inspectorResized; 47 48 info("Testing transitions ltr"); 49 await pushPref("intl.l10n.pseudo", ""); 50 await testBreadcrumbTransitions(hostWindow, inspector); 51 52 info("Testing transitions rtl"); 53 await pushPref("intl.l10n.pseudo", "bidi"); 54 await testBreadcrumbTransitions(hostWindow, inspector); 55 56 hostWindow.resizeTo(originalWidth, originalHeight); 57 }); 58 59 async function testBreadcrumbTransitions(hostWindow, inspector) { 60 const breadcrumbs = inspector.panelDoc.getElementById( 61 "inspector-breadcrumbs" 62 ); 63 const startBtn = breadcrumbs.querySelector(".scrollbutton-up"); 64 const endBtn = breadcrumbs.querySelector(".scrollbutton-down"); 65 const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner"); 66 const breadcrumbsUpdated = inspector.once("breadcrumbs-updated"); 67 68 info("Selecting initial node"); 69 await selectNode(NODE_SEVEN, inspector); 70 71 // So just need to wait for a duration 72 await breadcrumbsUpdated; 73 const initialCrumb = container.querySelector(`button[aria-pressed="true"]`); 74 is( 75 isElementInViewport(hostWindow, initialCrumb), 76 true, 77 "initial element was visible" 78 ); 79 80 for (const node of NODES) { 81 info("Checking for visibility of crumb " + node.title); 82 if (node.action === "end") { 83 info("Simulating click of end button"); 84 EventUtils.synthesizeMouseAtCenter(endBtn, {}, inspector.panelWin); 85 } else if (node.action === "start") { 86 info("Simulating click of start button"); 87 EventUtils.synthesizeMouseAtCenter(startBtn, {}, inspector.panelWin); 88 } 89 await breadcrumbsUpdated; 90 const selector = 'button[title="' + node.title + '"]'; 91 const relevantCrumb = container.querySelector(selector); 92 is( 93 isElementInViewport(hostWindow, relevantCrumb), 94 true, 95 node.title + " crumb is visible" 96 ); 97 } 98 } 99 100 function isElementInViewport(window, el) { 101 const rect = el.getBoundingClientRect(); 102 103 return ( 104 rect.top >= 0 && 105 rect.left >= 0 && 106 rect.bottom <= window.innerHeight && 107 rect.right <= window.innerWidth 108 ); 109 }