tor-browser

browser_net_search-results.js (19688B)

---

/* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

/**
* Test search match functionality.
* Search panel is visible and clicking matches shows them in the request details.
*/

const { PluralForm } = require("resource://devtools/shared/plural-form.js");

add_task(async function () {
 const { tab, monitor } = await initNetMonitor(HTTPS_CUSTOM_GET_URL, {
   requestCount: 1,
 });
 info("Starting test... ");

 const { document, store, windowRequire } = monitor.panelWin;

 // Action should be processed synchronously in tests.
 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
 store.dispatch(Actions.batchEnable(false));

 const SEARCH_STRING = "test";
 // Execute two XHRs and wait until they are finished.
 const URLS = [
   HTTPS_SEARCH_SJS + "?value=test1",
   HTTPS_SEARCH_SJS + "?value=test2",
 ];

 const wait = waitForNetworkEvents(monitor, 2);
 await SpecialPowers.spawn(tab.linkedBrowser, [URLS], makeRequests);
 await wait;

 // Open the Search panel
 await store.dispatch(Actions.openSearch());

 // Fill Filter input with text and check displayed messages.
 // The filter should be focused automatically.
 typeInNetmonitor(SEARCH_STRING, monitor);
 EventUtils.synthesizeKey("KEY_Enter");

 // Wait until there are two resources rendered in the results
 await waitForDOMIfNeeded(
   document,
   ".search-panel-content .treeRow.resourceRow",
   2
 );

 const searchMatchContents = document.querySelectorAll(
   ".search-panel-content .treeRow .treeIcon"
 );

 for (let i = searchMatchContents.length - 1; i >= 0; i--) {
   clickElement(searchMatchContents[i], monitor);
 }

 // Wait until there are two resources rendered in the results
 await waitForDOMIfNeeded(
   document,
   ".search-panel-content .treeRow.resultRow",
   12
 );

 // Check the matches
 const matches = document.querySelectorAll(
   ".search-panel-content .treeRow.resultRow"
 );

 await checkSearchResult(
   monitor,
   matches[0],
   "#headers-panel",
   ".url-preview .properties-view",
   ".treeRow",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[1],
   "#headers-panel",
   "#responseHeaders .properties-view",
   ".treeRow.selected",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[2],
   "#headers-panel",
   "#requestHeaders .properties-view",
   ".treeRow.selected",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[3],
   "#cookies-panel",
   "#responseCookies .properties-view",
   ".treeRow.selected",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[4],
   "#response-panel",
   ".cm-content",
   ".cm-line",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[5],
   "#headers-panel",
   ".url-preview .properties-view",
   ".treeRow",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[6],
   "#headers-panel",
   "#responseHeaders .properties-view",
   ".treeRow.selected",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[7],
   "#headers-panel",
   "#requestHeaders .properties-view",
   ".treeRow.selected",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[8],
   "#headers-panel",
   "#requestHeaders .properties-view",
   ".treeRow.selected",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[9],
   "#cookies-panel",
   "#responseCookies .properties-view",
   ".treeRow.selected",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[10],
   "#cookies-panel",
   "#requestCookies .properties-view",
   ".treeRow.selected",
   [SEARCH_STRING]
 );
 await checkSearchResult(
   monitor,
   matches[11],
   "#response-panel",
   ".cm-content",
   ".cm-line",
   [SEARCH_STRING]
 );

 await teardown(monitor);
});

/**
* Test the context menu feature inside the search match functionality.
* Search panel is visible and right-clicking matches shows the appropriate context-menu's.
*/

add_task(async function () {
 const { tab, monitor } = await initNetMonitor(HTTPS_CUSTOM_GET_URL, {
   requestCount: 1,
 });
 info("Starting test... ");

 const { document, store, windowRequire } = monitor.panelWin;

 // Action should be processed synchronously in tests.
 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
 store.dispatch(Actions.batchEnable(false));

 const SEARCH_STRING = "matchingResult";
 const matchingUrls = [
   HTTPS_SEARCH_SJS + "?value=matchingResult1",
   HTTPS_SEARCH_SJS + "?value=matchingResult2",
 ];
 const nonMatchingUrls = [HTTPS_SEARCH_SJS + "?value=somethingDifferent"];

 const wait = waitForNetworkEvents(
   monitor,
   matchingUrls.length + nonMatchingUrls.length
 );
 await SpecialPowers.spawn(tab.linkedBrowser, [matchingUrls], makeRequests);
 await SpecialPowers.spawn(tab.linkedBrowser, [nonMatchingUrls], makeRequests);
 await wait;

 // Open the Search panel
 await store.dispatch(Actions.openSearch());

 // Fill Filter input with text and check displayed messages.
 // The filter should be focused automatically.
 typeInNetmonitor(SEARCH_STRING, monitor);
 EventUtils.synthesizeKey("KEY_Enter");

 // Wait for all the updates to complete
 await waitForAllNetworkUpdateEvents();

 // Wait until there are two resources rendered in the results
 await waitForDOMIfNeeded(
   document,
   ".search-panel-content .treeRow.resourceRow",
   2
 );

 const resourceMatches = document.querySelectorAll(
   ".search-panel-content .treeRow .treeIcon"
 );

 // open content matches for first resource:
 const firstResourceMatch = resourceMatches[0];
 clickElement(firstResourceMatch, monitor);

 // Wait until the expanded resource is rendered in the results
 await waitForDOMIfNeeded(
   document,
   ".search-panel-content .treeRow.resultRow",
   1
 );

 // Check the content matches
 const contentMatches = document.querySelectorAll(
   ".search-panel-content .treeRow.resultRow"
 );

 // test context menu entries for contained content:
 const firstContentMatch = contentMatches[0];
 ok(
   document.querySelector(".treeRow.selected.opened"),
   "The previous line, which is the selected line, is expanded to show the result row"
 );
 await checkContentMenuCopy(firstContentMatch, matchingUrls[0], monitor);

 // test the context menu entries for resources
 const secondResourceMatch = resourceMatches[1];
 await checkResourceMenuCopyUrl(secondResourceMatch, matchingUrls[1], monitor);

 // checkResourceMenuResend will trigger a new request, which will be added to the search results
 await checkResourceMenuResend(secondResourceMatch, monitor);

 // Assert that the previously expanded search result is kept expanded when a new request is added
 ok(
   document.querySelector(".treeRow.selected.opened"),
   "The previous line is still expanded after having added a new request is the result list"
 );

 await checkResourceMenuBlockUnblock(
   secondResourceMatch,
   matchingUrls[1],
   monitor
 );
 await checkSaveAllAsHARWithContextMenu(
   secondResourceMatch,
   matchingUrls,
   monitor
 );

 // reload tab
 const waitForEvents = waitForNetworkEvents(monitor, 1);
 tab.linkedBrowser.reload();
 await waitForEvents;

 // test that the context menu entries are not available anymore:
 await checkResourceMenuNotAvailbale(secondResourceMatch, monitor);

 await teardown(monitor);
});

add_task(async function searchWithRequestOnUnload() {
 const { tab, monitor } = await initNetMonitor(HTTPS_CUSTOM_GET_URL, {
   requestCount: 1,
 });
 info("Starting test... ");

 const { document, store, windowRequire } = monitor.panelWin;

 // Action should be processed synchronously in tests.
 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
 store.dispatch(Actions.batchEnable(false));

 await SpecialPowers.spawn(
   tab.linkedBrowser,
   [HTTPS_SEARCH_SJS + "?value=test1"],
   function (url) {
     content.addEventListener("unload", () => {
       content.wrappedJSObject.get(url);
     });
   }
 );

 const SEARCH_STRING = "html_custom-get-page.html";

 // reload tab, expect the html page and the unload request
 const waitForEvents = waitForNetworkEvents(monitor, 2);
 tab.linkedBrowser.reload();
 await waitForEvents;

 // Open the Search panel
 await store.dispatch(Actions.openSearch());

 // Fill Filter input with text and check displayed messages.
 // The filter should be focused automatically.
 typeInNetmonitor(SEARCH_STRING, monitor);
 EventUtils.synthesizeKey("KEY_Enter");

 // Wait until there are two resources rendered in the results
 await waitForDOMIfNeeded(
   document,
   ".search-panel-content .treeRow.resourceRow",
   1
 );

 // Wait until there are two resources rendered in the results
 await waitForDOMIfNeeded(document, ".search-panel .status-bar-label");
 const statusBar = document.querySelector(".search-panel .status-bar-label");
 const matchingLines = PluralForm.get(
   1,
   L10N.getStr("netmonitor.search.status.labels.matchingLines")
 ).replace("#1", 1);
 const matchingFiles = PluralForm.get(
   1,
   L10N.getStr("netmonitor.search.status.labels.fileCount")
 ).replace("#1", 1);
 is(
   statusBar.textContent,
   L10N.getFormatStr(
     "netmonitor.search.status.labels.done",
     matchingLines,
     matchingFiles
   ),
   "Search completed"
 );

 await teardown(monitor);
});

// Asserts that the content is scrolled to show the correct matched content
// on the line when a match is selected from the network search list.
add_task(async function testContentIsScrolledWhenMatchIsSelected() {
 const httpServer = createTestHTTPServer();
 httpServer.registerPathHandler(`/`, function (request, response) {
   response.setStatusLine(request.httpVersion, 200, "OK");
   response.write(`<html><meta charset=utf8>
     <script type="text/javascript" src="/script.js"></script>
     <h1>Test matches in scrolled content</h1>
     </html>`);
 });

 // The "data" path takes a size query parameter and will return a body of the
 // requested size.
 httpServer.registerPathHandler("/script.js", function (request, response) {
   response.setHeader("Content-Type", "text/javascript");
   response.setStatusLine(request.httpVersion, 200, "OK");
   response.write(
     `${Array.from({ length: 40 }, (_, i) => `// line ${++i}x`).join("\n")}`
   );
 });

 const TEST_URI = `http://localhost:${httpServer.identity.primaryPort}/`;

 const { tab, monitor } = await initNetMonitor(TEST_URI, {
   requestCount: 1,
 });
 info("Starting test... ");
 const { document, store, windowRequire } = monitor.panelWin;

 // Action should be processed synchronously in tests.
 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
 store.dispatch(Actions.batchEnable(false));

 // reload tab, expect the html page and the script request
 const waitForEvents = waitForNetworkEvents(monitor, 2);
 tab.linkedBrowser.reload();
 await waitForEvents;

 // Open the Search panel
 await store.dispatch(Actions.openSearch());

 // Fill search input with text and check displayed messages.
 const waitForResult = waitFor(() =>
   document.querySelector(".search-panel-content .treeRow.resourceRow")
 );
 typeInNetmonitor("line 3x", monitor);
 EventUtils.synthesizeKey("KEY_Enter");
 await waitForResult;

 const result = document.querySelector(
   ".search-panel-content .treeRow.resourceRow"
 );
 // Click the matches to
 const waitForMatches = waitFor(
   () =>
     document.querySelectorAll(".search-panel-content .treeRow.resultRow")
       ?.length == 1
 );
 clickElement(result, monitor);
 await waitForMatches;

 const matches = document.querySelectorAll(
   ".search-panel-content .treeRow.resultRow"
 );
 // Click the first result match
 const waitForResponsePanelContent = waitFor(() =>
   document.querySelector(`#response-panel .cm-content`)
 );
 clickElement(matches[0], monitor);
 await waitForResponsePanelContent;

 const editor = getCMEditor(monitor);
 is(
   editor.getSelectionCursor().from.line,
   3,
   "The content on line 3 is highlighted"
 );
 is(
   editor.getText(editor.getSelectionCursor().from.line),
   "// line 3x",
   "The content on the line with cursor (line 3) is correct"
 );

 // Set the cursor to the bottom of the document
 let onScrolled = waitForEditorScrolling(monitor);
 await editor.setCursorAt(40, 0);
 await onScrolled;

 is(
   editor.getSelectionCursor().from.line,
   40,
   "The content on line 40 is highlighted"
 );
 is(
   editor.getText(editor.getSelectionCursor().from.line),
   "// line 40x",
   "The content on the line with cursor (line 40) is correct"
 );

 // Click the first result match again
 onScrolled = waitForEditorScrolling(monitor);
 clickElement(matches[0], monitor);
 await onScrolled;

 // The editor should scroll back up and the matched content on line 3 should be highlighted

 is(
   editor.getSelectionCursor().from.line,
   3,
   "The content on line 3 is highlighted"
 );
 is(
   editor.getText(editor.getSelectionCursor().from.line),
   "// line 3x",
   "The content on the line with cursor (line 3) is correct"
 );
});

async function makeRequests(urls) {
 await content.wrappedJSObject.get(urls[0]);
 await content.wrappedJSObject.get(urls[1]);
 info("XHR Requests executed");
}

async function checkContentMenuCopy(
 contentMatch,
 expectedClipboardValue,
 monitor
) {
 EventUtils.sendMouseEvent({ type: "contextmenu" }, contentMatch);

 // execute the copy command:
 await waitForClipboardPromise(async function setup() {
   await selectContextMenuItem(
     monitor,
     "properties-view-context-menu-copyvalue"
   );
 }, expectedClipboardValue);
}

async function checkResourceMenuCopyUrl(
 resourceMatch,
 expectedClipboardValue,
 monitor
) {
 // trigger context menu:
 EventUtils.sendMouseEvent({ type: "contextmenu" }, resourceMatch);

 // select the context menu entry 'copy-url':
 await waitForClipboardPromise(async function setup() {
   await selectContextMenuItem(monitor, "request-list-context-copy-url");
 }, expectedClipboardValue);
}

async function checkResourceMenuResend(resourceMatch, monitor) {
 const { store, windowRequire } = monitor.panelWin;

 const { getSelectedRequest, getDisplayedRequests } = windowRequire(
   "devtools/client/netmonitor/src/selectors/index"
 );

 // expect the appearing of a new request in the list:
 const displayedRequests = getDisplayedRequests(store.getState());
 const originalResourceIds = displayedRequests.map(r => r.id);
 const expectedNrOfRequestsAfterResend = displayedRequests.length + 1;

 // define wait functionality, that waits until a new entry appears with different ID:
 const waitForNewRequest = waitUntil(() => {
   const newResourceId = getSelectedRequest(store.getState())?.id;
   return (
     getDisplayedRequests(store.getState()).length ==
       expectedNrOfRequestsAfterResend &&
     !originalResourceIds.includes(newResourceId)
   );
 });

 // click the context menu 'resend'
 EventUtils.sendMouseEvent({ type: "contextmenu" }, resourceMatch);
 await selectContextMenuItem(monitor, "request-list-context-resend-only");
 await waitForNewRequest;
}

async function checkResourceMenuBlockUnblock(resourceMatch, blockUrl, monitor) {
 const { store, windowRequire } = monitor.panelWin;

 // block resource:
 await toggleBlockedUrl(resourceMatch, monitor, store);

 // assert that there is now 1 blocked URL:
 is(
   store.getState().requestBlocking.blockedUrls.length,
   1,
   "There should be 1 blocked URL"
 );
 is(
   store.getState().requestBlocking.blockedUrls[0].url,
   blockUrl,
   `The blocked URL should be '${blockUrl}'`
 );

 // Open the Search panel again
 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
 await store.dispatch(Actions.openSearch());

 // block resource:
 await toggleBlockedUrl(resourceMatch, monitor, store, "unblock");

 // assert that there is no blocked URL anymore:
 is(
   store.getState().requestBlocking.blockedUrls.length,
   0,
   "There should be no blocked URL"
 );
}

async function checkSaveAllAsHARWithContextMenu(
 resourceMatch,
 expectedUrls,
 monitor
) {
 const { HarMenuUtils } = monitor.panelWin.windowRequire(
   "devtools/client/netmonitor/src/har/har-menu-utils"
 );

 EventUtils.sendMouseEvent({ type: "mousedown" }, resourceMatch);
 EventUtils.sendMouseEvent({ type: "contextmenu" }, resourceMatch);

 info("Trigger Copy All As HAR from the context menu");
 const onHarCopyDone = HarMenuUtils.once("copy-all-as-har-done");
 await selectContextMenuItem(monitor, "request-list-context-copy-all-as-har");
 const jsonString = await onHarCopyDone;
 info("exported JSON:\n" + jsonString);
 const parsedJson = JSON.parse(jsonString);

 is(
   parsedJson?.log?.entries?.length,
   expectedUrls.length,
   "Expected length of " + expectedUrls.length
 );
 for (let i = 0; i < expectedUrls.length; i++) {
   is(
     parsedJson.log.entries[i].request?.url,
     expectedUrls[i],
     "Expected url was '" + expectedUrls[i] + "'"
   );
 }
}

async function checkResourceMenuNotAvailbale(resourceMatch, monitor) {
 // trigger context menu:
 EventUtils.sendMouseEvent({ type: "contextmenu" }, resourceMatch);

 is(
   !!getContextMenuItem(
     monitor,
     "simple-view-context-menu-request-not-available-anymore"
   ),
   true,
   "context menu item 'not-available' should be present"
 );
 is(
   !!getContextMenuItem(monitor, "request-list-context-resend-only"),
   false,
   "context menu item 'resend' should not be present"
 );
 is(
   !!getContextMenuItem(monitor, "request-list-context-copy-all-as-har"),
   false,
   "context menu item 'copy all as HAR' should not be present"
 );
 is(
   !!getContextMenuItem(monitor, "netmonitor.context.blockURL"),
   false,
   "context menu item 'block URL' should not be present"
 );
}

/**
* Check whether the search result is correctly linked with the related information
*/
async function checkSearchResult(
 monitor,
 match,
 panelSelector,
 panelContentSelector,
 panelDetailSelector,
 expected
) {
 const { document } = monitor.panelWin;

 // Scroll the match into view so that it's clickable
 match.scrollIntoView();

 // Click on the match to show it
 clickElement(match, monitor);

 console.log(`${panelSelector} ${panelContentSelector}`);
 await waitFor(() =>
   document.querySelector(`${panelSelector} ${panelContentSelector}`)
 );

 const tabpanel = document.querySelector(panelSelector);
 const content = tabpanel.querySelectorAll(
   `${panelContentSelector} ${panelDetailSelector}`
 );

 is(
   content.length,
   expected.length,
   `There should be ${expected.length} item${
     expected.length === 1 ? "" : "s"
   } displayed in this tabpanel`
 );

 // Make sure only 1 item is selected
 if (panelDetailSelector === ".treeRow.selected") {
   const selectedElements = tabpanel.querySelectorAll(panelDetailSelector);
   is(
     selectedElements.length,
     1,
     `There should be only 1 item selected, found ${selectedElements.length} items selected`
   );
 }

 if (content.length === expected.length) {
   for (let i = 0; i < expected.length; i++) {
     is(
       content[i].textContent.includes(expected[i]),
       true,
       `Content must include ${expected[i]}`
     );
   }
 }
}