Backed out changeset b93a5fd6ab2c (bug 1811000) for causing talos failures. CLOSED TREE

devtools/client/debugger/src/actions/sources/select.js

@@ -11,7 +11,7 @@ import { isOriginalId } from "devtools/client/shared/source-map-loader/index";
 
 import { setSymbols } from "./symbols";
 import { setInScopeLines } from "../ast";
-import { updateActiveFileSearch } from "../ui";
+import { closeActiveSearch, updateActiveFileSearch } from "../ui";
 import { togglePrettyPrint } from "./prettyPrint";
 import { addTab, closeTab } from "../tabs";
 import { loadSourceText } from "./loadSourceText";
@@ -28,6 +28,7 @@ import {
   getFirstSourceActorForGeneratedSource,
   getSourceByURL,
   getPrettySource,
+  getActiveSearch,
   getSelectedLocation,
   getSelectedSource,
   canPrettyPrintSource,
@@ -137,6 +138,11 @@ export function selectLocation(cx, location, { keepContext = true } = {}) {
       return;
     }
 
+    const activeSearch = getActiveSearch(getState());
+    if (activeSearch && activeSearch !== "file") {
+      dispatch(closeActiveSearch());
+    }
+
     // Preserve the current source map context (original / generated)
     // when navigating to a new location.
     // i.e. if keepContext isn't manually overriden to false,

devtools/client/debugger/src/components/App.js

@@ -8,7 +8,6 @@ import classnames from "classnames";
 
 import { connect } from "../utils/connect";
 import { prefs, features } from "../utils/prefs";
-import { primaryPaneTabs } from "../constants";
 import actions from "../actions";
 import A11yIntention from "./A11yIntention";
 import { ShortcutsModal } from "./ShortcutsModal";
@@ -41,6 +40,7 @@ import "./App.css";
 
 import "./shared/menu.css";
 
+import ProjectSearch from "./ProjectSearch";
 import PrimaryPanes from "./PrimaryPanes";
 import Editor from "./Editor";
 import SecondaryPanes from "./SecondaryPanes";
@@ -63,6 +63,7 @@ class App extends Component {
     return {
       activeSearch: PropTypes.oneOf(["file", "project"]),
       closeActiveSearch: PropTypes.func.isRequired,
+      closeProjectSearch: PropTypes.func.isRequired,
       closeQuickOpen: PropTypes.func.isRequired,
       endPanelCollapsed: PropTypes.bool.isRequired,
       fluentBundles: PropTypes.array.isRequired,
@@ -72,7 +73,6 @@ class App extends Component {
       selectedSource: PropTypes.object,
       setActiveSearch: PropTypes.func.isRequired,
       setOrientation: PropTypes.func.isRequired,
-      setPrimaryPaneTab: PropTypes.func.isRequired,
       startPanelCollapsed: PropTypes.bool.isRequired,
       toolboxDoc: PropTypes.object.isRequired,
     };
@@ -96,20 +96,16 @@ class App extends Component {
       this.toggleQuickOpenModal(e, "@")
     );
 
-    [
+    const searchKeys = [
       L10N.getStr("sources.search.key2"),
       L10N.getStr("sources.search.alt.key"),
-    ].forEach(key => shortcuts.on(key, this.toggleQuickOpenModal));
+    ];
+    searchKeys.forEach(key => shortcuts.on(key, this.toggleQuickOpenModal));
 
     shortcuts.on(L10N.getStr("gotoLineModal.key3"), e =>
       this.toggleQuickOpenModal(e, ":")
     );
 
-    shortcuts.on(
-      L10N.getStr("projectTextSearch.key"),
-      this.jumpToProjectSearch
-    );
-
     shortcuts.on("Escape", this.onEscape);
     shortcuts.on("CmdOrCtrl+/", this.onCommandSlash);
   }
@@ -122,28 +118,18 @@ class App extends Component {
       this.toggleQuickOpenModal
     );
 
-    [
+    const searchKeys = [
       L10N.getStr("sources.search.key2"),
       L10N.getStr("sources.search.alt.key"),
-    ].forEach(key => shortcuts.off(key, this.toggleQuickOpenModal));
+    ];
+    searchKeys.forEach(key => shortcuts.off(key, this.toggleQuickOpenModal));
 
     shortcuts.off(L10N.getStr("gotoLineModal.key3"), this.toggleQuickOpenModal);
 
-    shortcuts.off(
-      L10N.getStr("projectTextSearch.key"),
-      this.jumpToProjectSearch
-    );
-
     shortcuts.off("Escape", this.onEscape);
     shortcuts.off("CmdOrCtrl+/", this.onCommandSlash);
   }
 
-  jumpToProjectSearch = e => {
-    e.preventDefault();
-    this.props.setPrimaryPaneTab(primaryPaneTabs.PROJECT_SEARCH);
-    this.props.setActiveSearch(primaryPaneTabs.PROJECT_SEARCH);
-  };
-
   onEscape = e => {
     const {
       activeSearch,
@@ -231,6 +217,7 @@ class App extends Component {
             />
           ) : null}
           <EditorFooter horizontal={horizontal} />
+          <ProjectSearch />
         </div>
       </div>
     );
@@ -348,8 +335,8 @@ const mapStateToProps = state => ({
 export default connect(mapStateToProps, {
   setActiveSearch: actions.setActiveSearch,
   closeActiveSearch: actions.closeActiveSearch,
+  closeProjectSearch: actions.closeProjectSearch,
   openQuickOpen: actions.openQuickOpen,
   closeQuickOpen: actions.closeQuickOpen,
   setOrientation: actions.setOrientation,
-  setPrimaryPaneTab: actions.setPrimaryPaneTab,
 })(App);

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

@@ -54,7 +54,6 @@ class Tab extends PureComponent {
       tabSources: PropTypes.array.isRequired,
       toggleBlackBox: PropTypes.func.isRequired,
       togglePrettyPrint: PropTypes.func.isRequired,
-      isBlackBoxed: PropTypes.bool.isRequired,
     };
   }
 
@@ -168,6 +167,10 @@ class Tab extends PureComponent {
     showMenu(e, buildMenu(items));
   }
 
+  isProjectSearchEnabled() {
+    return this.props.activeSearch === "project";
+  }
+
   isSourceSearchEnabled() {
     return this.props.activeSearch === "source";
   }
@@ -189,6 +192,7 @@ class Tab extends PureComponent {
     const active =
       selectedLocation &&
       sourceId == selectedLocation.sourceId &&
+      !this.isProjectSearchEnabled() &&
       !this.isSourceSearchEnabled();
     const isPrettyCode = isPretty(source);
 

devtools/client/debugger/src/components/PrimaryPanes/index.js

@@ -15,22 +15,14 @@ import {
 } from "../../selectors";
 import { prefs } from "../../utils/prefs";
 import { connect } from "../../utils/connect";
-import { primaryPaneTabs } from "../../constants";
 import { formatKeyShortcut } from "../../utils/text";
 
 import Outline from "./Outline";
 import SourcesTree from "./SourcesTree";
-import ProjectSearch from "./ProjectSearch";
 import AccessibleImage from "../shared/AccessibleImage";
 
 import "./Sources.css";
 
-const tabs = [
-  primaryPaneTabs.SOURCES,
-  primaryPaneTabs.OUTLINE,
-  primaryPaneTabs.PROJECT_SEARCH,
-];
-
 class PrimaryPanes extends Component {
   constructor(props) {
     super(props);
@@ -45,13 +37,15 @@ class PrimaryPanes extends Component {
       clearProjectDirectoryRoot: PropTypes.func.isRequired,
       cx: PropTypes.object.isRequired,
       projectRootName: PropTypes.string.isRequired,
-      selectedTab: PropTypes.oneOf(tabs).isRequired,
+      selectedTab: PropTypes.oneOf(["sources", "outline"]).isRequired,
       setPrimaryPaneTab: PropTypes.func.isRequired,
-      setActiveSearch: PropTypes.func.isRequired,
-      closeActiveSearch: PropTypes.func.isRequired,
     };
   }
 
+  showPane = selectedPane => {
+    this.props.setPrimaryPaneTab(selectedPane);
+  };
+
   onAlphabetizeClick = () => {
     const alphabetizeOutline = !prefs.alphabetizeOutline;
     prefs.alphabetizeOutline = alphabetizeOutline;
@@ -59,40 +53,31 @@ class PrimaryPanes extends Component {
   };
 
   onActivateTab = index => {
-    const tab = tabs.at(index);
+    if (index === 0) {
-    this.props.setPrimaryPaneTab(tab);
+      this.showPane("sources");
-    if (tab == primaryPaneTabs.PROJECT_SEARCH) {
-      this.props.setActiveSearch(tab);
     } else {
-      this.props.closeActiveSearch();
+      this.showPane("outline");
     }
   };
 
-  renderTabList() {
+  renderOutlineTabs() {
+    const sources = formatKeyShortcut(L10N.getStr("sources.header"));
+    const outline = formatKeyShortcut(L10N.getStr("outline.header"));
+    const isSources = this.props.selectedTab === "sources";
+    const isOutline = this.props.selectedTab === "outline";
+
     return [
       <Tab
-        className={classnames("tab sources-tab", {
+        className={classnames("tab sources-tab", { active: isSources })}
-          active: this.props.selectedTab === primaryPaneTabs.SOURCES,
-        })}
         key="sources-tab"
       >
-        {formatKeyShortcut(L10N.getStr("sources.header"))}
+        {sources}
       </Tab>,
       <Tab
-        className={classnames("tab outline-tab", {
+        className={classnames("tab outline-tab", { active: isOutline })}
-          active: this.props.selectedTab === primaryPaneTabs.OUTLINE,
-        })}
         key="outline-tab"
       >
-        {formatKeyShortcut(L10N.getStr("outline.header"))}
+        {outline}
-      </Tab>,
-      <Tab
-        className={classnames("tab search-tab", {
-          active: this.props.selectedTab === primaryPaneTabs.PROJECT_SEARCH,
-        })}
-        key="search-tab"
-      >
-        {formatKeyShortcut(L10N.getStr("search.header"))}
       </Tab>,
     ];
   }
@@ -119,16 +104,22 @@ class PrimaryPanes extends Component {
     );
   }
 
+  renderThreadSources() {
+    return <SourcesTree />;
+  }
+
   render() {
     const { selectedTab, projectRootName } = this.props;
+    const activeIndex = selectedTab === "sources" ? 0 : 1;
+
     return (
       <Tabs
-        activeIndex={tabs.indexOf(selectedTab)}
+        activeIndex={activeIndex}
         className="sources-panel"
         onActivateTab={this.onActivateTab}
       >
         <TabList className="source-outline-tabs">
-          {this.renderTabList()}
+          {this.renderOutlineTabs()}
         </TabList>
         <TabPanels
           className={classnames("source-outline-panel", {
@@ -138,13 +129,12 @@ class PrimaryPanes extends Component {
         >
           <div className="threads-list">
             {this.renderProjectRootHeader()}
-            <SourcesTree />
+            {this.renderThreadSources()}
           </div>
           <Outline
             alphabetizeOutline={this.state.alphabetizeOutline}
             onAlphabetizeClick={this.onAlphabetizeClick}
           />
-          <ProjectSearch />
         </TabPanels>
       </Tabs>
     );

devtools/client/debugger/src/components/PrimaryPanes/moz.build

@@ -9,7 +9,6 @@ CompiledModules(
     "index.js",
     "Outline.js",
     "OutlineFilter.js",
-    "ProjectSearch.js",
     "SourcesTree.js",
     "SourcesTreeItem.js",
 )

devtools/client/debugger/src/components/PrimaryPanes/tests/PrimaryPanes.spec.js

@@ -38,8 +38,6 @@ function generateDefaults(overrides) {
     setActiveSearch: jest.fn(),
     closeActiveSearch: jest.fn(),
     clearProjectDirectoryRoot: jest.fn(),
-    selectedTab: "sources",
-    cx: {},
     threads: [],
     ...overrides,
   };

devtools/client/debugger/src/components/PrimaryPanes/tests/__snapshots__/PrimaryPanes.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`PrimaryPanes should not render the directory root header if the directory root has not been set. 1`] = `
 <Tabs
-  activeIndex={0}
+  activeIndex={1}
   className="sources-panel"
   onActivateTab={[Function]}
 >
@@ -14,7 +14,7 @@ exports[`PrimaryPanes should not render the directory root header if the directo
   >
     <Tab
       active={false}
-      className="tab sources-tab active"
+      className="tab sources-tab"
       key="sources-tab"
     >
       Sources
@@ -26,13 +26,6 @@ exports[`PrimaryPanes should not render the directory root header if the directo
     >
       Outline
     </Tab>
-    <Tab
-      active={false}
-      className="tab search-tab"
-      key="search-tab"
-    >
-      Search
-    </Tab>
   </TabList>
   <TabPanels
     activeIndex={0}
@@ -48,14 +41,13 @@ exports[`PrimaryPanes should not render the directory root header if the directo
       alphabetizeOutline={false}
       onAlphabetizeClick={[Function]}
     />
-    <Connect(ProjectSearch) />
   </TabPanels>
 </Tabs>
 `;
 
 exports[`PrimaryPanes should render the directory root header if the directory root has been set. 1`] = `
 <Tabs
-  activeIndex={0}
+  activeIndex={1}
   className="sources-panel"
   onActivateTab={[Function]}
 >
@@ -67,7 +59,7 @@ exports[`PrimaryPanes should render the directory root header if the directory r
   >
     <Tab
       active={false}
-      className="tab sources-tab active"
+      className="tab sources-tab"
       key="sources-tab"
     >
       Sources
@@ -79,13 +71,6 @@ exports[`PrimaryPanes should render the directory root header if the directory r
     >
       Outline
     </Tab>
-    <Tab
-      active={false}
-      className="tab search-tab"
-      key="search-tab"
-    >
-      Search
-    </Tab>
   </TabList>
   <TabPanels
     activeIndex={0}
@@ -123,7 +108,6 @@ exports[`PrimaryPanes should render the directory root header if the directory r
       alphabetizeOutline={false}
       onAlphabetizeClick={[Function]}
     />
-    <Connect(ProjectSearch) />
   </TabPanels>
 </Tabs>
 `;

devtools/client/debugger/src/components/ProjectSearch.css

@@ -11,6 +11,7 @@
   display: flex;
   flex-direction: column;
   z-index: 20;
+  background-color: var(--theme-body-background);
   overflow-y: hidden;
 
   /* Using the same colors as the Netmonitor's --table-selection-background-hover */

devtools/client/debugger/src/components/ProjectSearch.js

@@ -4,26 +4,27 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { connect } from "../../utils/connect";
+import { connect } from "../utils/connect";
 import classnames from "classnames";
-import actions from "../../actions";
+import actions from "../actions";
 
-import { getEditor } from "../../utils/editor";
+import { getEditor } from "../utils/editor";
-import { searchKeys } from "../../constants";
+import { searchKeys } from "../constants";
 
-import { statusType } from "../../reducers/project-text-search";
+import { statusType } from "../reducers/project-text-search";
-import { getRelativePath } from "../../utils/sources-tree/utils";
+import { getRelativePath } from "../utils/sources-tree/utils";
-import { getFormattedSourceId } from "../../utils/source";
+import { getFormattedSourceId } from "../utils/source";
 import {
+  getActiveSearch,
   getProjectSearchResults,
   getProjectSearchStatus,
   getProjectSearchQuery,
   getContext,
-} from "../../selectors";
+} from "../selectors";
 
-import ManagedTree from "../shared/ManagedTree";
+import ManagedTree from "./shared/ManagedTree";
-import SearchInput from "../shared/SearchInput";
+import SearchInput from "./shared/SearchInput";
-import AccessibleImage from "../shared/AccessibleImage";
+import AccessibleImage from "./shared/AccessibleImage";
 
 const { PluralForm } = require("devtools/shared/plural-form");
 
@@ -49,7 +50,9 @@ export class ProjectSearch extends Component {
 
   static get propTypes() {
     return {
+      activeSearch: PropTypes.string,
       clearSearch: PropTypes.func.isRequired,
+      closeProjectSearch: PropTypes.func.isRequired,
       cx: PropTypes.object.isRequired,
       doSearchForHighlight: PropTypes.func.isRequired,
       query: PropTypes.string.isRequired,
@@ -71,11 +74,20 @@ export class ProjectSearch extends Component {
 
   componentDidMount() {
     const { shortcuts } = this.context;
+
+    shortcuts.on(
+      L10N.getStr("projectTextSearch.key"),
+      this.toggleProjectTextSearch
+    );
     shortcuts.on("Enter", this.onEnterPress);
   }
 
   componentWillUnmount() {
     const { shortcuts } = this.context;
+    shortcuts.off(
+      L10N.getStr("projectTextSearch.key"),
+      this.toggleProjectTextSearch
+    );
     shortcuts.off("Enter", this.onEnterPress);
   }
 
@@ -92,6 +104,21 @@ export class ProjectSearch extends Component {
     }
   }
 
+  toggleProjectTextSearch = e => {
+    const { cx, closeProjectSearch, setActiveSearch } = this.props;
+    if (e) {
+      e.preventDefault();
+    }
+
+    if (this.isProjectSearchEnabled()) {
+      return closeProjectSearch(cx);
+    }
+
+    return setActiveSearch("project");
+  };
+
+  isProjectSearchEnabled = () => this.props.activeSearch === "project";
+
   selectMatchItem = matchItem => {
     this.props.selectSpecificLocation(this.props.cx, matchItem.location);
     this.props.doSearchForHighlight(
@@ -140,8 +167,11 @@ export class ProjectSearch extends Component {
   };
 
   onEnterPress = () => {
-    // This is to select a match from the search result.
+    if (
-    if (!this.state.focusedItem || this.state.inputFocused) {
+      !this.isProjectSearchEnabled() ||
+      !this.state.focusedItem ||
+      this.state.inputFocused
+    ) {
       return;
     }
     if (this.state.focusedItem.type === "MATCH") {
@@ -248,7 +278,7 @@ export class ProjectSearch extends Component {
   }
 
   renderInput() {
-    const { status } = this.props;
+    const { closeProjectSearch, status } = this.props;
 
     return (
       <SearchInput
@@ -264,7 +294,7 @@ export class ProjectSearch extends Component {
         onBlur={() => this.setState({ inputFocused: false })}
         onKeyDown={this.onKeyDown}
         onHistoryScroll={this.onHistoryScroll}
-        showClose={false}
+        showClose={true}
         showExcludePatterns={true}
         excludePatternsLabel={L10N.getStr(
           "projectTextSearch.excludePatterns.label"
@@ -272,6 +302,7 @@ export class ProjectSearch extends Component {
         excludePatternsPlaceholder={L10N.getStr(
           "projectTextSearch.excludePatterns.placeholder"
         )}
+        handleClose={closeProjectSearch}
         ref="searchInput"
         showSearchModifiers={true}
         searchKey={searchKeys.PROJECT_SEARCH}
@@ -281,6 +312,10 @@ export class ProjectSearch extends Component {
   }
 
   render() {
+    if (!this.isProjectSearchEnabled()) {
+      return null;
+    }
+
     return (
       <div className="search-container">
         <div className="project-text-search">
@@ -298,12 +333,14 @@ ProjectSearch.contextTypes = {
 
 const mapStateToProps = state => ({
   cx: getContext(state),
+  activeSearch: getActiveSearch(state),
   results: getProjectSearchResults(state),
   query: getProjectSearchQuery(state),
   status: getProjectSearchStatus(state),
 });
 
 export default connect(mapStateToProps, {
+  closeProjectSearch: actions.closeProjectSearch,
   searchSources: actions.searchSources,
   clearSearch: actions.clearSearch,
   selectSpecificLocation: actions.selectSpecificLocation,

devtools/client/debugger/src/components/WelcomeBox.js

@@ -6,7 +6,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import { connect } from "../utils/connect";
-import { primaryPaneTabs } from "../constants";
 
 import actions from "../actions";
 import { getPaneCollapse } from "../selectors";
@@ -20,7 +19,6 @@ export class WelcomeBox extends Component {
       openQuickOpen: PropTypes.func.isRequired,
       setActiveSearch: PropTypes.func.isRequired,
       toggleShortcutsModal: PropTypes.func.isRequired,
-      setPrimaryPaneTab: PropTypes.func.isRequired,
     };
   }
 
@@ -40,6 +38,7 @@ export class WelcomeBox extends Component {
     const allShortcutsLabel = L10N.getStr("welcome.allShortcuts");
     const searchSourcesLabel = L10N.getStr("welcome.search2").substring(2);
     const searchProjectLabel = L10N.getStr("welcome.findInFiles2").substring(2);
+    const { setActiveSearch, openQuickOpen, toggleShortcutsModal } = this.props;
 
     return (
       <div className="welcomebox">
@@ -49,7 +48,7 @@ export class WelcomeBox extends Component {
               className="welcomebox__searchSources"
               role="button"
               tabIndex="0"
-              onClick={() => this.props.openQuickOpen()}
+              onClick={() => openQuickOpen()}
             >
               <span className="shortcutKey">{searchSourcesShortcut}</span>
               <span className="shortcutLabel">{searchSourcesLabel}</span>
@@ -58,10 +57,7 @@ export class WelcomeBox extends Component {
               className="welcomebox__searchProject"
               role="button"
               tabIndex="0"
-              onClick={() => {
+              onClick={setActiveSearch.bind(null, "project")}
-                this.props.setActiveSearch(primaryPaneTabs.PROJECT_SEARCH);
-                this.props.setPrimaryPaneTab(primaryPaneTabs.PROJECT_SEARCH);
-              }}
             >
               <span className="shortcutKey">{searchProjectShortcut}</span>
               <span className="shortcutLabel">{searchProjectLabel}</span>
@@ -70,7 +66,7 @@ export class WelcomeBox extends Component {
               className="welcomebox__allShortcuts"
               role="button"
               tabIndex="0"
-              onClick={() => this.props.toggleShortcutsModal()}
+              onClick={() => toggleShortcutsModal()}
             >
               <span className="shortcutKey">{allShortcutsShortcut}</span>
               <span className="shortcutLabel">{allShortcutsLabel}</span>
@@ -90,5 +86,4 @@ export default connect(mapStateToProps, {
   togglePaneCollapse: actions.togglePaneCollapse,
   setActiveSearch: actions.setActiveSearch,
   openQuickOpen: actions.openQuickOpen,
-  setPrimaryPaneTab: actions.setPrimaryPaneTab,
 })(WelcomeBox);

devtools/client/debugger/src/components/moz.build

@@ -13,6 +13,7 @@ DIRS += [
 CompiledModules(
     "A11yIntention.js",
     "App.js",
+    "ProjectSearch.js",
     "QuickOpenModal.js",
     "ShortcutsModal.js",
     "WelcomeBox.js",

devtools/client/debugger/src/components/shared/SearchInput.js

@@ -42,6 +42,7 @@ export class SearchInput extends Component {
 
   constructor(props) {
     super(props);
+
     this.state = {
       history: [],
       excludePatterns: props.searchOptions.excludePatterns,

devtools/client/debugger/src/components/test/ProjectSearch.spec.js

@@ -9,9 +9,9 @@ import PropTypes from "prop-types";
 
 import { mount, shallow } from "enzyme";
 import { ProjectSearch } from "../ProjectSearch";
-import { statusType } from "../../../reducers/project-text-search";
+import { statusType } from "../../reducers/project-text-search";
-import { mockcx } from "../../../utils/test-mockup";
+import { mockcx } from "../../utils/test-mockup";
-import { searchKeys } from "../../../constants";
+import { searchKeys } from "../../constants";
 
 const hooks = { on: [], off: [] };
 const shortcuts = {

devtools/client/debugger/src/components/test/WelcomeBox.spec.js

@@ -15,7 +15,6 @@ function render(overrides = {}) {
     setActiveSearch: jest.fn(),
     openQuickOpen: jest.fn(),
     toggleShortcutsModal: jest.fn(),
-    setPrimaryPaneTab: jest.fn(),
     ...overrides,
   };
   const component = shallow(<WelcomeBox {...props} />);

devtools/client/debugger/src/components/test/__snapshots__/ProjectSearch.spec.js.snap

@@ -14,6 +14,7 @@ exports[`ProjectSearch found no search results 1`] = `
         count={0}
         excludePatternsLabel="files to exclude"
         excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
+        handleClose={[MockFunction]}
         isLoading={false}
         onBlur={[Function]}
         onChange={[Function]}
@@ -24,7 +25,7 @@ exports[`ProjectSearch found no search results 1`] = `
         placeholder="Find in files…"
         query="foo"
         searchKey="project-search"
-        showClose={false}
+        showClose={true}
         showErrorEmoji={true}
         showExcludePatterns={true}
         showSearchModifiers={true}
@@ -142,6 +143,7 @@ exports[`ProjectSearch found search results 1`] = `
           count={5}
           excludePatternsLabel="files to exclude"
           excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
+          handleClose={[MockFunction]}
           isLoading={false}
           onBlur={[Function]}
           onChange={[Function]}
@@ -152,7 +154,7 @@ exports[`ProjectSearch found search results 1`] = `
           placeholder="Find in files…"
           query="match"
           searchKey="project-search"
-          showClose={false}
+          showClose={true}
           showErrorEmoji={false}
           showExcludePatterns={true}
           showSearchModifiers={true}
@@ -164,6 +166,7 @@ exports[`ProjectSearch found search results 1`] = `
             excludePatternsLabel="files to exclude"
             excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
             expanded={false}
+            handleClose={[MockFunction]}
             hasPrefix={false}
             isLoading={false}
             onBlur={[Function]}
@@ -185,7 +188,7 @@ exports[`ProjectSearch found search results 1`] = `
             }
             selectedItemId=""
             setSearchOptions={[Function]}
-            showClose={false}
+            showClose={true}
             showErrorEmoji={false}
             showExcludePatterns={true}
             showSearchModifiers={true}
@@ -247,11 +250,16 @@ exports[`ProjectSearch found search results 1`] = `
                       <span
                         className="pipe-divider"
                       />
+                      <span
+                        className="search-type-name"
+                      >
+                        Modifiers:
+                      </span>
                       <button
                         className="regex-match-btn "
                         onKeyDown={[Function]}
                         onMouseDown={[Function]}
-                        title="Use Regular Expression"
+                        title="Regex"
                       >
                         <span
                           className="regex-match"
@@ -261,7 +269,7 @@ exports[`ProjectSearch found search results 1`] = `
                         className="case-sensitive-btn "
                         onKeyDown={[Function]}
                         onMouseDown={[Function]}
-                        title="Match Case"
+                        title="Case sensitive"
                       >
                         <span
                           className="case-match"
@@ -271,7 +279,7 @@ exports[`ProjectSearch found search results 1`] = `
                         className="whole-word-btn "
                         onKeyDown={[Function]}
                         onMouseDown={[Function]}
-                        title="Match Whole Word"
+                        title="Whole word"
                       >
                         <span
                           className="whole-word-match"
@@ -279,6 +287,26 @@ exports[`ProjectSearch found search results 1`] = `
                       </button>
                     </div>
                   </SearchModifiers>
+                  <span
+                    className="pipe-divider"
+                  />
+                  <CloseButton
+                    buttonClass="small"
+                    handleClick={[MockFunction]}
+                  >
+                    <button
+                      className="close-btn small"
+                      onClick={[MockFunction]}
+                    >
+                      <AccessibleImage
+                        className="close"
+                      >
+                        <span
+                          className="img close"
+                        />
+                      </AccessibleImage>
+                    </button>
+                  </CloseButton>
                 </div>
               </div>
               <div
@@ -880,46 +908,7 @@ exports[`ProjectSearch found search results 1`] = `
 </ProjectSearch>
 `;
 
-exports[`ProjectSearch renders nothing when disabled 1`] = `
+exports[`ProjectSearch renders nothing when disabled 1`] = `""`;
-<div
-  className="search-container"
->
-  <div
-    className="project-text-search"
-  >
-    <div
-      className="header"
-    >
-      <Connect(SearchInput)
-        count={0}
-        excludePatternsLabel="files to exclude"
-        excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
-        isLoading={false}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onHistoryScroll={[Function]}
-        onKeyDown={[Function]}
-        onToggleSearchModifier={[Function]}
-        placeholder="Find in files…"
-        query="foo"
-        searchKey="project-search"
-        showClose={false}
-        showErrorEmoji={true}
-        showExcludePatterns={true}
-        showSearchModifiers={true}
-        size="small"
-        summaryMsg="0 results"
-      />
-    </div>
-    <div
-      className="no-result-msg absolute-center"
-    >
-      No results found
-    </div>
-  </div>
-</div>
-`;
 
 exports[`ProjectSearch should display loading message while search is in progress 1`] = `
 <div
@@ -935,6 +924,7 @@ exports[`ProjectSearch should display loading message while search is in progres
         count={0}
         excludePatternsLabel="files to exclude"
         excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
+        handleClose={[MockFunction]}
         isLoading={true}
         onBlur={[Function]}
         onChange={[Function]}
@@ -945,7 +935,7 @@ exports[`ProjectSearch should display loading message while search is in progres
         placeholder="Find in files…"
         query="match"
         searchKey="project-search"
-        showClose={false}
+        showClose={true}
         showErrorEmoji={false}
         showExcludePatterns={true}
         showSearchModifiers={true}
@@ -976,6 +966,7 @@ exports[`ProjectSearch showErrorEmoji false if not done & no results 1`] = `
         count={0}
         excludePatternsLabel="files to exclude"
         excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
+        handleClose={[MockFunction]}
         isLoading={true}
         onBlur={[Function]}
         onChange={[Function]}
@@ -986,7 +977,7 @@ exports[`ProjectSearch showErrorEmoji false if not done & no results 1`] = `
         placeholder="Find in files…"
         query="foo"
         searchKey="project-search"
-        showClose={false}
+        showClose={true}
         showErrorEmoji={false}
         showExcludePatterns={true}
         showSearchModifiers={true}
@@ -1017,6 +1008,7 @@ exports[`ProjectSearch showErrorEmoji false if not done & results 1`] = `
         count={5}
         excludePatternsLabel="files to exclude"
         excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
+        handleClose={[MockFunction]}
         isLoading={true}
         onBlur={[Function]}
         onChange={[Function]}
@@ -1027,7 +1019,7 @@ exports[`ProjectSearch showErrorEmoji false if not done & results 1`] = `
         placeholder="Find in files…"
         query="foo"
         searchKey="project-search"
-        showClose={false}
+        showClose={true}
         showErrorEmoji={false}
         showExcludePatterns={true}
         showSearchModifiers={true}
@@ -1066,6 +1058,7 @@ exports[`ProjectSearch turns off shortcuts on unmount 1`] = `
         count={0}
         excludePatternsLabel="files to exclude"
         excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
+        handleClose={[MockFunction]}
         isLoading={false}
         onBlur={[Function]}
         onChange={[Function]}
@@ -1076,7 +1069,7 @@ exports[`ProjectSearch turns off shortcuts on unmount 1`] = `
         placeholder="Find in files…"
         query=""
         searchKey="project-search"
-        showClose={false}
+        showClose={true}
         showErrorEmoji={true}
         showExcludePatterns={true}
         showSearchModifiers={true}
@@ -1102,6 +1095,7 @@ exports[`ProjectSearch where <Enter> has not been pressed 1`] = `
         count={0}
         excludePatternsLabel="files to exclude"
         excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
+        handleClose={[MockFunction]}
         isLoading={false}
         onBlur={[Function]}
         onChange={[Function]}
@@ -1112,7 +1106,7 @@ exports[`ProjectSearch where <Enter> has not been pressed 1`] = `
         placeholder="Find in files…"
         query=""
         searchKey="project-search"
-        showClose={false}
+        showClose={true}
         showErrorEmoji={true}
         showExcludePatterns={true}
         showSearchModifiers={true}

devtools/client/debugger/src/constants.js

@@ -7,9 +7,3 @@ export const searchKeys = {
   FILE_SEARCH: "file-search",
   QUICKOPEN_SEARCH: "quickopen-search",
 };
-
-export const primaryPaneTabs = {
-  SOURCES: "sources",
-  OUTLINE: "outline",
-  PROJECT_SEARCH: "project",
-};

devtools/client/debugger/src/debugger.css

@@ -38,8 +38,8 @@
 @import url("chrome://devtools/content/debugger/src/components/Editor/Tabs.css");
 @import url("chrome://devtools/content/debugger/src/components/PrimaryPanes/Outline.css");
 @import url("chrome://devtools/content/debugger/src/components/PrimaryPanes/OutlineFilter.css");
-@import url("chrome://devtools/content/debugger/src/components/PrimaryPanes/ProjectSearch.css");
 @import url("chrome://devtools/content/debugger/src/components/PrimaryPanes/Sources.css");
+@import url("chrome://devtools/content/debugger/src/components/ProjectSearch.css");
 @import url("chrome://devtools/content/debugger/src/components/QuickOpenModal.css");
 @import url("chrome://devtools/content/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css");
 @import url("chrome://devtools/content/debugger/src/components/SecondaryPanes/CommandBar.css");

devtools/client/debugger/src/reducers/project-text-search.js

@@ -19,9 +19,9 @@ export const statusType = {
   error: "ERROR",
 };
 
-export function initialProjectTextSearchState(state) {
+export function initialProjectTextSearchState() {
   return {
-    query: state?.query || "",
+    query: "",
     results: [],
     ongoingSearch: null,
     status: statusType.initial,
@@ -72,9 +72,8 @@ function update(state = initialProjectTextSearchState(), action) {
 
     case "CLEAR_SEARCH":
     case "CLOSE_PROJECT_SEARCH":
-      return initialProjectTextSearchState();
     case "NAVIGATE":
-      return initialProjectTextSearchState(state);
+      return initialProjectTextSearchState();
   }
   return state;
 }

devtools/client/debugger/test/mochitest/browser_dbg-project-search.js

@@ -8,6 +8,15 @@
 
 requestLongerTimeout(3);
 
+add_task(async function testOpeningAndClosingEmptyProjectSearch() {
+  const dbg = await initDebugger(
+    "doc-script-switching.html",
+    "script-switching-01.js"
+  );
+  await openProjectSearch(dbg);
+  await closeProjectSearch(dbg);
+});
+
 add_task(async function testProjectSearchCloseOnNavigation() {
   const dbg = await initDebugger(
     "doc-script-switching.html",
@@ -33,6 +42,8 @@ add_task(async function testSimpleProjectSearch() {
     "script-switching-01.js"
   );
 
+  await selectSource(dbg, "script-switching-01.js");
+
   await openProjectSearch(dbg);
   const searchTerm = "first";
   await doProjectSearch(dbg, searchTerm);
@@ -47,8 +58,15 @@ add_task(async function testSimpleProjectSearch() {
   );
 
   info("Select a result match to open the location in the source");
-  await clickElement(dbg, "fileMatch");
+  await selectResultMatch(dbg);
-  await waitForSelectedSource(dbg, "script-switching-01.js");
+  await waitForLoadedSource(dbg, "script-switching-01.js");
+
+  is(dbg.selectors.getActiveSearch(), null);
+
+  ok(
+    dbg.selectors.getSelectedSource().url.includes("script-switching-01.js"),
+    "The correct source (script-switching-01.js) is selected"
+  );
 });
 
 add_task(async function testMatchesForRegexSearches() {
@@ -72,6 +90,7 @@ add_task(async function testMatchesForRegexSearches() {
 
   // Turn off the regex modifier so does not break tests below
   await clickElement(dbg, "projectSearchModifiersRegexMatch");
+  await closeProjectSearch(dbg);
 });
 
 // Test expanding search results to reveal the search matches.
@@ -94,8 +113,6 @@ add_task(async function testExpandSearchResultsToShowMatches() {
 add_task(async function testSearchModifiers() {
   const dbg = await initDebugger("doc-react.html", "App.js");
 
-  await openProjectSearch(dbg);
-
   await assertProjectSearchModifier(
     dbg,
     "projectSearchModifiersCaseSensitive",
@@ -195,8 +212,7 @@ add_task(async function testSearchExcludePatterns() {
     "The exclude pattern for node modules is persisted accross reloads"
   );
 
-  // Clear the fields so that it does not impact on the subsequent tests
+  // Clear the  exclude patterns field so that it does not impact on the subsequent tests
-  await clearElement(dbg, "projectSearchSearchInput");
   await clearElement(dbg, "excludePatternsInput");
   pressKey(dbg, "Enter");
 });
@@ -209,10 +225,11 @@ async function assertProjectSearchModifier(
   expected
 ) {
   info(`Assert ${title} search modifier`);
-
+  await openProjectSearch(dbg);
   type(dbg, searchTerm);
   info(`Turn on the ${title} search modifier option`);
   await clickElement(dbg, searchModifierBtn);
+
   let results = await waitForSearchResults(dbg, expected.resultWithModifierOn);
   is(
     results.length,
@@ -229,5 +246,12 @@ async function assertProjectSearchModifier(
     expected.resultWithModifierOff,
     `${results.length} results where found`
   );
-  await clearElement(dbg, "projectSearchSearchInput");
+
+  await closeProjectSearch(dbg);
+}
+
+async function selectResultMatch(dbg) {
+  const select = waitForState(dbg, () => !dbg.selectors.getActiveSearch());
+  await clickElement(dbg, "fileMatch");
+  return select;
 }

devtools/client/debugger/test/mochitest/browser_dbg-sources-project-search.js

@@ -6,8 +6,6 @@
 
 "use strict";
 
-requestLongerTimeout(3);
-
 // Tests for searching in dynamic (without urls) sources
 add_task(async function testSearchDynamicScripts() {
   const dbg = await initDebugger("doc-minified.html");
@@ -24,6 +22,7 @@ add_task(async function testSearchDynamicScripts() {
     "The search result was found in the eval script."
   );
 
+  await closeProjectSearch(dbg);
   await resume(dbg);
   await executeComplete;
 });
@@ -42,12 +41,15 @@ add_task(async function testIgnoreMinifiedSourceForPrettySource() {
     "The search result was found in the minified (pretty.js) source"
   );
 
+  await closeProjectSearch(dbg);
+
   await selectSource(dbg, "pretty.js");
   await waitForSelectedSource(dbg, "pretty.js");
 
   info("Pretty print the source");
   await prettyPrint(dbg);
 
+  await openProjectSearch(dbg);
   fileResults = await doProjectSearch(dbg, "stuff");
 
   is(
@@ -112,6 +114,8 @@ add_task(async function testBlackBoxedSources() {
 
   is(fileResults.length, 0, "No results were found as pretty.js is blackboxed");
 
+  await closeProjectSearch(dbg);
+
   info("Unblackbox pretty.js");
   await toggleBlackbox(dbg);
 

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

@@ -1667,7 +1667,6 @@ const selectors = {
   logPointInSecPane: ".breakpoint.is-log",
   searchField: ".search-field",
   blackbox: ".action.black-box",
-  projectSearchSearchInput: ".project-text-search .search-field input",
   projectSearchCollapsed: ".project-text-search .arrow:not(.expanded)",
   projectSearchExpandedResults: ".project-text-search .result",
   projectSearchFileResults: ".project-text-search .file-result",
@@ -2487,7 +2486,6 @@ function openProjectSearch(dbg) {
  * @return {Array} List of search results element nodes
  */
 async function doProjectSearch(dbg, searchTerm) {
-  await clearElement(dbg, "projectSearchSearchInput");
   type(dbg, searchTerm);
   pressKey(dbg, "Enter");
   return waitForSearchResults(dbg);
@@ -2512,6 +2510,18 @@ async function waitForSearchResults(dbg, expectedResults) {
   return findAllElements(dbg, "projectSearchFileResults");
 }
 
+/**
+ * Closes the project search panel
+ *
+ * @param {Object} dbg
+ * @return {Boolean} When the panel closes
+ */
+function closeProjectSearch(dbg) {
+  info("Closing the project search panel");
+  synthesizeKeyShortcut("CmdOrCtrl+Shift+F");
+  return waitForState(dbg, state => !dbg.selectors.getActiveSearch());
+}
+
 /**
  * Get the no of expanded search results
  *

devtools/client/jar.mn

@@ -287,6 +287,7 @@ devtools.jar:
     content/debugger/src/components/variables.css (debugger/src/components/variables.css)
     content/debugger/src/components/A11yIntention.css (debugger/src/components/A11yIntention.css)
     content/debugger/src/components/App.css (debugger/src/components/App.css)
+    content/debugger/src/components/ProjectSearch.css (debugger/src/components/ProjectSearch.css)
     content/debugger/src/components/QuickOpenModal.css (debugger/src/components/QuickOpenModal.css)
     content/debugger/src/components/ShortcutsModal.css (debugger/src/components/ShortcutsModal.css)
     content/debugger/src/components/WelcomeBox.css (debugger/src/components/WelcomeBox.css)
@@ -318,7 +319,6 @@ devtools.jar:
     content/debugger/src/components/Editor/Tabs.css (debugger/src/components/Editor/Tabs.css)
     content/debugger/src/components/PrimaryPanes/Outline.css (debugger/src/components/PrimaryPanes/Outline.css)
     content/debugger/src/components/PrimaryPanes/OutlineFilter.css (debugger/src/components/PrimaryPanes/OutlineFilter.css)
-    content/debugger/src/components/PrimaryPanes/ProjectSearch.css (debugger/src/components/PrimaryPanes/ProjectSearch.css)
     content/debugger/src/components/PrimaryPanes/Sources.css (debugger/src/components/PrimaryPanes/Sources.css)
     content/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css (debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css)
     content/debugger/src/components/SecondaryPanes/CommandBar.css (debugger/src/components/SecondaryPanes/CommandBar.css)

devtools/client/locales/en-US/components.properties

@@ -36,14 +36,18 @@ appErrorBoundary.fileBugButton=File Bug Report
 # after the panel errors to instruct the user to reload the panel.
 appErrorBoundary.reloadPanelInfo=Close and reopen the toolbox to clear this error.
 
-# LOCALIZATION NOTE(searchModifier.regExpModifier): A search option
+# LOCALIZATION NOTE(searchModifier.modifiersLabel): A label
-# when searching text in a file
+# preceding the group of modifiers
-searchModifier.regExpModifier=Use Regular Expression
+searchModifier.modifiersLabel=Modifiers:
 
-# LOCALIZATION NOTE(searchModifier.caseSensitiveModifier): A search option
+# LOCALIZATION NOTE(searchModifier.regex): A search option
 # when searching text in a file
-searchModifier.caseSensitiveModifier=Match Case
+searchModifier.regex=Regex
 
-# LOCALIZATION NOTE(searchModifier.wholeWordModifier): A search option
+# LOCALIZATION NOTE(searchModifier.caseSensitive): A search option
 # when searching text in a file
-searchModifier.wholeWordModifier=Match Whole Word
+searchModifier.caseSensitive=Case sensitive
+
+# LOCALIZATION NOTE(searchModifier.wholeWord): A search option
+# when searching text in a file
+searchModifier.wholeWord=Whole word

devtools/client/locales/en-US/debugger.properties

@@ -766,9 +766,6 @@ sources.header=Sources
 # LOCALIZATION NOTE (outline.header): Outline left sidebar header
 outline.header=Outline
 
-# LOCALIZATION NOTE (search.header): Search left sidebar header
-search.header=Search
-
 # LOCALIZATION NOTE (outline.placeholder): Placeholder text for the filter input
 # element
 outline.placeholder=Filter functions

devtools/client/shared/components/SearchModifiers.js

@@ -26,19 +26,19 @@ const modifierOptions = [
     value: "regexMatch",
     className: "regex-match-btn",
     svgName: "regex-match",
-    tooltip: l10n.getStr("searchModifier.regExpModifier"),
+    tooltip: l10n.getStr("searchModifier.regex"),
   },
   {
     value: "caseSensitive",
     className: "case-sensitive-btn",
     svgName: "case-match",
-    tooltip: l10n.getStr("searchModifier.caseSensitiveModifier"),
+    tooltip: l10n.getStr("searchModifier.caseSensitive"),
   },
   {
     value: "wholeWord",
     className: "whole-word-btn",
     svgName: "whole-word-match",
-    tooltip: l10n.getStr("searchModifier.wholeWordModifier"),
+    tooltip: l10n.getStr("searchModifier.wholeWord"),
   },
 ];
 
@@ -76,6 +76,10 @@ class SearchModifiers extends Component {
     return div(
       { className: "search-modifiers" },
       span({ className: "pipe-divider" }),
+      span(
+        { className: "search-type-name" },
+        l10n.getStr("searchModifier.modifiersLabel")
+      ),
       modifierOptions.map(options => this.#renderSearchModifier(options))
     );
   }