Bug 1971094 - [devtools] Update search results when the selected source changes r=devtools-reviewers,nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D253015

Author: bomsy

devtools/client/debugger/src/components/Editor/SearchInFileBar.js

@@ -13,7 +13,6 @@ import {
   getIsCurrentThreadPaused,
   getSelectedSourceTextContent,
   getSearchOptions,
-  getSelectedFrame,
 } from "../../selectors/index";
 
 import { searchKeys } from "../../constants";
@@ -60,7 +59,6 @@ class SearchInFileBar extends Component {
       searchInFileEnabled: PropTypes.bool.isRequired,
       selectedSourceTextContent: PropTypes.object,
       selectedSource: PropTypes.object.isRequired,
-      selectedFrame: PropTypes.object.isRequired,
       setActiveSearch: PropTypes.func.isRequired,
       querySearchWorker: PropTypes.func.isRequired,
       selectLocation: PropTypes.func.isRequired,
@@ -80,17 +78,20 @@ class SearchInFileBar extends Component {
   // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
   UNSAFE_componentWillReceiveProps(nextProps) {
     const { query } = this.state;
-
+    // Trigger a search to update the search results ...
     if (
-      query &&
-      this.props.selectedSource &&
-      this.props.searchInFileEnabled &&
-      nextProps.selectedFrame &&
-      // If a new source is selected update the file search results
-      nextProps.selectedFrame.location.source.id !== nextProps.selectedSource.id
+      // if there is a search query and ...
+      (query &&
+        // the file search bar is toggled open or ...
+        ((!this.props.searchInFileEnabled && nextProps.searchInFileEnabled) ||
+          // a new source is selected.
+          this.props.selectedSource.id !== nextProps.selectedSource.id)) ||
+      // the source content changes
+      this.props.selectedSourceTextContent !==
+        nextProps.selectedSourceTextContent
     ) {
-      // Do not scroll to the search location, if we just switched a new source
-      // and debugger is already paused on a selelcted line.
+      // Do not scroll to the search location, if we just switched to a new source
+      // and debugger is already paused on a selected line.
       this.doSearch(query, !nextProps.isPaused);
     }
   }
@@ -400,7 +401,6 @@ const mapStateToProps = state => {
     selectedSource: getSelectedSource(state),
     isPaused: getIsCurrentThreadPaused(state),
     selectedSourceTextContent: getSelectedSourceTextContent(state),
-    selectedFrame: getSelectedFrame(state),
     modifiers: getSearchOptions(state, "file-search"),
   };
 };

devtools/client/debugger/test/mochitest/browser_dbg-search-file-retains-query.js

@@ -2,11 +2,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-// Tests the search bar retains previous query on re-opening.
-
 "use strict";
 
-add_task(async function () {
+// Tests the search bar retains previous query on re-opening.
+add_task(async function testSearchRetainsPreviousQuery() {
   const dbg = await initDebugger("doc-scripts.html", "simple1.js");
   const {
     selectors: { getActiveSearch },
@@ -36,3 +35,54 @@ add_task(async function () {
   // Test for the retained query
   is(findElement(dbg, "fileSearchInput").value, "con");
 });
+
+// Tests that the search results are updated when switching between sources
+add_task(async function testSearchUpdatesResultsOnSourceChanges() {
+  const dbg = await initDebugger("doc-scripts.html", "simple1.js", "long.js");
+  const {
+    selectors: { getActiveSearch },
+  } = dbg;
+
+  await selectSource(dbg, "simple1.js");
+
+  // Open search bar
+  pressKey(dbg, "fileSearch");
+  await waitFor(() => getActiveSearch() === "file");
+  is(getActiveSearch(), "file");
+
+  // Type a search query
+  const searchQuery = "this";
+  type(dbg, searchQuery);
+  await waitForSearchState(dbg);
+
+  await waitUntil(
+    () => findElement(dbg, "fileSearchSummary").innerText !== "No results found"
+  );
+
+  is(
+    findElement(dbg, "fileSearchSummary").innerText,
+    "1 of 3 results",
+    `There are 3 results found for search query "${searchQuery}" in simple1.js`
+  );
+  is(
+    findElement(dbg, "fileSearchInput").value,
+    searchQuery,
+    `The search input value matches the search query "${searchQuery}"`
+  );
+
+  info("Switch to long.js");
+  await selectSource(dbg, "long.js");
+
+  await waitUntil(
+    () => findElement(dbg, "fileSearchSummary")?.innerText == "1 of 23 results"
+  );
+  ok(
+    true,
+    `There are 23 results found for search query "${searchQuery}" in long.js`
+  );
+  is(
+    findElement(dbg, "fileSearchInput").value,
+    searchQuery,
+    `The search input value still matches the search query "${searchQuery}"`
+  );
+});

devtools/client/debugger/test/mochitest/shared-head.js

@@ -1940,6 +1940,7 @@ const selectors = {
   sourceTreeFolderNode: ".sources-panel .node .folder",
   excludePatternsInput: ".project-text-search .exclude-patterns-field input",
   fileSearchInput: ".search-bar input",
+  fileSearchSummary: ".search-bar .search-field-summary",
   watchExpressionsHeader: ".watch-expressions-pane ._header .header-label",
   watchExpressionsAddButton: ".watch-expressions-pane ._header .plus",
   editorNotificationFooter: ".editor-notification-footer",