browser_net_pane-network-details.js (4821B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 /** 7 * Test the action of request details panel when filters are applied. 8 * If there are any visible requests, the first request from the 9 * list of visible requests should be displayed in the network 10 * details panel 11 * If there are no visible requests the panel should remain closed 12 */ 13 14 const REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS = [ 15 { 16 url: "sjs_content-type-test-server.sjs?fmt=html&res=undefined&text=Sample", 17 }, 18 { url: "sjs_content-type-test-server.sjs?fmt=css&text=sample" }, 19 { url: "sjs_content-type-test-server.sjs?fmt=js&text=sample" }, 20 { url: "sjs_content-type-test-server.sjs?fmt=font" }, 21 { url: "sjs_content-type-test-server.sjs?fmt=image" }, 22 { url: "sjs_content-type-test-server.sjs?fmt=audio" }, 23 { url: "sjs_content-type-test-server.sjs?fmt=video" }, 24 { url: "sjs_content-type-test-server.sjs?fmt=flash" }, 25 { url: "sjs_content-type-test-server.sjs?fmt=ws" }, 26 ]; 27 28 add_task(async function () { 29 const { monitor } = await initNetMonitor(FILTERING_URL, { requestCount: 1 }); 30 const { document, store, windowRequire } = monitor.panelWin; 31 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index"); 32 const { getSelectedRequest, getSortedRequests } = windowRequire( 33 "devtools/client/netmonitor/src/selectors/index" 34 ); 35 36 store.dispatch(Actions.batchEnable(false)); 37 38 function setFreetextFilter(value) { 39 store.dispatch(Actions.setRequestFilterText(value)); 40 } 41 42 info("Starting test... "); 43 44 const wait = waitForNetworkEvents(monitor, 9); 45 await performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS); 46 await wait; 47 48 info("Test with the first request in the list visible"); 49 EventUtils.sendMouseEvent( 50 { type: "click" }, 51 document.querySelector(".requests-list-filter-all-button") 52 ); 53 testDetailsPanel(true, 0); 54 55 info("Test with first request in the list not visible"); 56 EventUtils.sendMouseEvent( 57 { type: "click" }, 58 document.querySelector(".requests-list-filter-all-button") 59 ); 60 EventUtils.sendMouseEvent( 61 { type: "click" }, 62 document.querySelector(".requests-list-filter-js-button") 63 ); 64 testFilterButtons(monitor, "js"); 65 testDetailsPanel(true, 2); 66 67 info( 68 "Test with no request in the list visible i.e. no request match the filters" 69 ); 70 EventUtils.sendMouseEvent( 71 { type: "click" }, 72 document.querySelector(".requests-list-filter-all-button") 73 ); 74 setFreetextFilter("foobar"); 75 // The network details panel should not open as there are no available requests visible 76 testDetailsPanel(false); 77 78 await teardown(monitor); 79 80 function getSelectedIndex(state) { 81 if (!state.requests.selectedId) { 82 return -1; 83 } 84 return getSortedRequests(state).findIndex( 85 r => r.id === state.requests.selectedId 86 ); 87 } 88 89 function testDetailsPanel(shouldPanelOpen, selectedItemIndex = 0) { 90 // Expected default state should be panel closed 91 ok( 92 !document.querySelector(".sidebar-toggle"), 93 "The pane toggle button should not be visible." 94 ); 95 is( 96 !!document.querySelector(".network-details-bar"), 97 false, 98 "The details pane should still be hidden." 99 ); 100 is( 101 getSelectedRequest(store.getState()), 102 undefined, 103 "There should still be no selected item in the requests menu." 104 ); 105 106 // Trigger the details panel toggle action 107 store.dispatch(Actions.toggleNetworkDetails()); 108 109 const toggleButton = document.querySelector(".sidebar-toggle"); 110 111 if (shouldPanelOpen) { 112 is( 113 toggleButton.classList.contains("pane-collapsed"), 114 false, 115 "The pane toggle button should now indicate that the details pane is " + 116 "not collapsed anymore after being pressed." 117 ); 118 is( 119 !!document.querySelector(".network-details-bar"), 120 true, 121 "The details pane should not be hidden after toggle button was pressed." 122 ); 123 isnot( 124 getSelectedRequest(store.getState()), 125 undefined, 126 "There should be a selected item in the requests menu." 127 ); 128 is( 129 getSelectedIndex(store.getState()), 130 selectedItemIndex, 131 `The item index ${selectedItemIndex} should be selected in the requests menu.` 132 ); 133 // Close the panel 134 EventUtils.sendMouseEvent({ type: "click" }, toggleButton); 135 } else { 136 ok(!toggleButton, "The pane toggle button should be not visible."); 137 is( 138 !!document.querySelector(".network-details-bar"), 139 false, 140 "The details pane should still be hidden." 141 ); 142 is( 143 getSelectedRequest(store.getState()), 144 undefined, 145 "There should still be no selected item in the requests menu." 146 ); 147 } 148 } 149 });