browser_net_image-tooltip.js (3797B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 const IMAGE_TOOLTIP_URL = EXAMPLE_URL + "html_image-tooltip-test-page.html"; 7 const IMAGE_TOOLTIP_REQUESTS = 1; 8 9 /** 10 * Tests if image responses show a popup in the requests menu when hovered. 11 */ 12 add_task(async function test() { 13 const { tab, monitor } = await initNetMonitor(IMAGE_TOOLTIP_URL, { 14 requestCount: 1, 15 }); 16 info("Starting test... "); 17 18 const { document, store, windowRequire, connector } = monitor.panelWin; 19 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index"); 20 const { triggerActivity } = connector; 21 const { ACTIVITY_TYPE } = windowRequire( 22 "devtools/client/netmonitor/src/constants" 23 ); 24 const toolboxDoc = monitor.panelWin.parent.document; 25 26 store.dispatch(Actions.batchEnable(false)); 27 28 // Execute requests. 29 await performRequests(monitor, tab, IMAGE_TOOLTIP_REQUESTS); 30 31 info("Checking the image thumbnail after a few requests were made..."); 32 await showTooltipAndVerify( 33 document.querySelectorAll(".request-list-item")[0] 34 ); 35 36 // Hide tooltip before next test, to avoid the situation that tooltip covers 37 // the icon for the request of the next test. 38 info("Checking the image thumbnail gets hidden..."); 39 await hideTooltipAndVerify( 40 document.querySelectorAll(".request-list-item")[0] 41 ); 42 43 // +1 extra document reload 44 const onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS + 1); 45 46 info("Reloading the debuggee and performing all requests again..."); 47 await triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED); 48 await SpecialPowers.spawn(tab.linkedBrowser, [], async function () { 49 content.wrappedJSObject.performRequests(); 50 }); 51 await onEvents; 52 53 info("Checking the image thumbnail after a reload."); 54 await showTooltipAndVerify( 55 document.querySelectorAll(".request-list-item")[1] 56 ); 57 58 info( 59 "Checking if the image thumbnail is hidden when mouse leaves the menu widget" 60 ); 61 const requestsListContents = document.querySelector( 62 ".requests-list-row-group" 63 ); 64 EventUtils.synthesizeMouse( 65 requestsListContents, 66 0, 67 0, 68 { type: "mousemove" }, 69 monitor.panelWin 70 ); 71 await waitUntil( 72 () => !toolboxDoc.querySelector(".tooltip-container.tooltip-visible") 73 ); 74 75 await teardown(monitor); 76 77 /** 78 * Show a tooltip on the {target} and verify that it was displayed 79 * with the expected content. 80 */ 81 async function showTooltipAndVerify(target) { 82 const anchor = target.querySelector(".requests-list-file"); 83 await showTooltipOn(anchor); 84 85 info("Tooltip was successfully opened for the image request."); 86 is( 87 toolboxDoc.querySelector(".tooltip-panel img").src, 88 TEST_IMAGE_DATA_URI, 89 "The tooltip's image content is displayed correctly." 90 ); 91 } 92 93 /** 94 * Trigger a tooltip over an element by sending mousemove event. 95 * 96 * @return a promise that resolves when the tooltip is shown 97 */ 98 async function showTooltipOn(element) { 99 const win = element.ownerDocument.defaultView; 100 EventUtils.synthesizeMouseAtCenter(element, { type: "mousemove" }, win); 101 await waitUntil(() => toolboxDoc.querySelector(".tooltip-panel img")); 102 } 103 104 /** 105 * Hide a tooltip on the {target} and verify that it was closed. 106 */ 107 async function hideTooltipAndVerify(target) { 108 // Hovering over the "method" column hides the tooltip. 109 const anchor = target.querySelector(".requests-list-method"); 110 const win = anchor.ownerDocument.defaultView; 111 EventUtils.synthesizeMouseAtCenter(anchor, { type: "mousemove" }, win); 112 113 await waitUntil( 114 () => !toolboxDoc.querySelector(".tooltip-container.tooltip-visible") 115 ); 116 info("Tooltip was successfully closed."); 117 } 118 });