Bug 1811000 - [devtools] Move the project search to the side panel r=devtools-reviewers,nchevobbe,perftest-reviewers,sparky

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

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 { closeActiveSearch, updateActiveFileSearch } from "../ui";
+import { updateActiveFileSearch } from "../ui";
 import { togglePrettyPrint } from "./prettyPrint";
 import { addTab, closeTab } from "../tabs";
 import { loadSourceText } from "./loadSourceText";
@@ -28,7 +28,6 @@ import {
   getFirstSourceActorForGeneratedSource,
   getSourceByURL,
   getPrettySource,
-  getActiveSearch,
   getSelectedLocation,
   getSelectedSource,
   canPrettyPrintSource,
@@ -138,11 +137,6 @@ 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,6 +8,7 @@ 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";
@@ -40,7 +41,6 @@ import "./App.css";
 
 import "./shared/menu.css";
 
-import ProjectSearch from "./ProjectSearch";
 import PrimaryPanes from "./PrimaryPanes";
 import Editor from "./Editor";
 import SecondaryPanes from "./SecondaryPanes";
@@ -63,7 +63,6 @@ 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,
@@ -73,6 +72,7 @@ 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,16 +96,20 @@ 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);
   }
@@ -118,18 +122,28 @@ 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,
@@ -217,7 +231,6 @@ class App extends Component {
             />
           ) : null}
           <EditorFooter horizontal={horizontal} />
-          <ProjectSearch />
         </div>
       </div>
     );
@@ -335,8 +348,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,6 +54,7 @@ class Tab extends PureComponent {
       tabSources: PropTypes.array.isRequired,
       toggleBlackBox: PropTypes.func.isRequired,
       togglePrettyPrint: PropTypes.func.isRequired,
+      isBlackBoxed: PropTypes.bool.isRequired,
     };
   }
 
@@ -167,10 +168,6 @@ class Tab extends PureComponent {
     showMenu(e, buildMenu(items));
   }
 
-  isProjectSearchEnabled() {
-    return this.props.activeSearch === "project";
-  }
-
   isSourceSearchEnabled() {
     return this.props.activeSearch === "source";
   }
@@ -192,7 +189,6 @@ class Tab extends PureComponent {
     const active =
       selectedLocation &&
       sourceId == selectedLocation.sourceId &&
-      !this.isProjectSearchEnabled() &&
       !this.isSourceSearchEnabled();
     const isPrettyCode = isPretty(source);
 

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

@@ -11,7 +11,6 @@
   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/PrimaryPanes/ProjectSearch.js

@@ -4,27 +4,26 @@
 
 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");
 
@@ -50,9 +49,7 @@ 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,
@@ -74,20 +71,11 @@ 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);
   }
 
@@ -104,21 +92,6 @@ 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(
@@ -167,11 +140,8 @@ export class ProjectSearch extends Component {
   };
 
   onEnterPress = () => {
-    if (
+    // This is to select a match from the search result.
-      !this.isProjectSearchEnabled() ||
+    if (!this.state.focusedItem || this.state.inputFocused) {
-      !this.state.focusedItem ||
-      this.state.inputFocused
-    ) {
       return;
     }
     if (this.state.focusedItem.type === "MATCH") {
@@ -278,7 +248,7 @@ export class ProjectSearch extends Component {
   }
 
   renderInput() {
-    const { closeProjectSearch, status } = this.props;
+    const { status } = this.props;
 
     return (
       <SearchInput
@@ -294,7 +264,7 @@ export class ProjectSearch extends Component {
         onBlur={() => this.setState({ inputFocused: false })}
         onKeyDown={this.onKeyDown}
         onHistoryScroll={this.onHistoryScroll}
-        showClose={true}
+        showClose={false}
         showExcludePatterns={true}
         excludePatternsLabel={L10N.getStr(
           "projectTextSearch.excludePatterns.label"
@@ -302,7 +272,6 @@ export class ProjectSearch extends Component {
         excludePatternsPlaceholder={L10N.getStr(
           "projectTextSearch.excludePatterns.placeholder"
         )}
-        handleClose={closeProjectSearch}
         ref="searchInput"
         showSearchModifiers={true}
         searchKey={searchKeys.PROJECT_SEARCH}
@@ -312,10 +281,6 @@ export class ProjectSearch extends Component {
   }
 
   render() {
-    if (!this.isProjectSearchEnabled()) {
-      return null;
-    }
-
     return (
       <div className="search-container">
         <div className="project-text-search">
@@ -333,14 +298,12 @@ 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/PrimaryPanes/index.js

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

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

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

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

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

devtools/client/debugger/src/components/PrimaryPanes/tests/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/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={1}
+  activeIndex={0}
   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"
+      className="tab sources-tab active"
       key="sources-tab"
     >
       Sources
@@ -26,6 +26,13 @@ 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}
@@ -41,13 +48,14 @@ 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={1}
+  activeIndex={0}
   className="sources-panel"
   onActivateTab={[Function]}
 >
@@ -59,7 +67,7 @@ exports[`PrimaryPanes should render the directory root header if the directory r
   >
     <Tab
       active={false}
-      className="tab sources-tab"
+      className="tab sources-tab active"
       key="sources-tab"
     >
       Sources
@@ -71,6 +79,13 @@ 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}
@@ -108,6 +123,7 @@ 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/PrimaryPanes/tests/__snapshots__/ProjectSearch.spec.js.snap

@@ -14,7 +14,6 @@ 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]}
@@ -25,7 +24,7 @@ exports[`ProjectSearch found no search results 1`] = `
         placeholder="Find in files…"
         query="foo"
         searchKey="project-search"
-        showClose={true}
+        showClose={false}
         showErrorEmoji={true}
         showExcludePatterns={true}
         showSearchModifiers={true}
@@ -143,7 +142,6 @@ 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]}
@@ -154,7 +152,7 @@ exports[`ProjectSearch found search results 1`] = `
           placeholder="Find in files…"
           query="match"
           searchKey="project-search"
-          showClose={true}
+          showClose={false}
           showErrorEmoji={false}
           showExcludePatterns={true}
           showSearchModifiers={true}
@@ -166,7 +164,6 @@ 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]}
@@ -188,7 +185,7 @@ exports[`ProjectSearch found search results 1`] = `
             }
             selectedItemId=""
             setSearchOptions={[Function]}
-            showClose={true}
+            showClose={false}
             showErrorEmoji={false}
             showExcludePatterns={true}
             showSearchModifiers={true}
@@ -250,16 +247,11 @@ 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="Regex"
+                        title="Use Regular Expression"
                       >
                         <span
                           className="regex-match"
@@ -269,7 +261,7 @@ exports[`ProjectSearch found search results 1`] = `
                         className="case-sensitive-btn "
                         onKeyDown={[Function]}
                         onMouseDown={[Function]}
-                        title="Case sensitive"
+                        title="Match Case"
                       >
                         <span
                           className="case-match"
@@ -279,7 +271,7 @@ exports[`ProjectSearch found search results 1`] = `
                         className="whole-word-btn "
                         onKeyDown={[Function]}
                         onMouseDown={[Function]}
-                        title="Whole word"
+                        title="Match Whole Word"
                       >
                         <span
                           className="whole-word-match"
@@ -287,26 +279,6 @@ 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
@@ -908,7 +880,46 @@ 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
@@ -924,7 +935,6 @@ 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]}
@@ -935,7 +945,7 @@ exports[`ProjectSearch should display loading message while search is in progres
         placeholder="Find in files…"
         query="match"
         searchKey="project-search"
-        showClose={true}
+        showClose={false}
         showErrorEmoji={false}
         showExcludePatterns={true}
         showSearchModifiers={true}
@@ -966,7 +976,6 @@ 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]}
@@ -977,7 +986,7 @@ exports[`ProjectSearch showErrorEmoji false if not done & no results 1`] = `
         placeholder="Find in files…"
         query="foo"
         searchKey="project-search"
-        showClose={true}
+        showClose={false}
         showErrorEmoji={false}
         showExcludePatterns={true}
         showSearchModifiers={true}
@@ -1008,7 +1017,6 @@ 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]}
@@ -1019,7 +1027,7 @@ exports[`ProjectSearch showErrorEmoji false if not done & results 1`] = `
         placeholder="Find in files…"
         query="foo"
         searchKey="project-search"
-        showClose={true}
+        showClose={false}
         showErrorEmoji={false}
         showExcludePatterns={true}
         showSearchModifiers={true}
@@ -1058,7 +1066,6 @@ 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]}
@@ -1069,7 +1076,7 @@ exports[`ProjectSearch turns off shortcuts on unmount 1`] = `
         placeholder="Find in files…"
         query=""
         searchKey="project-search"
-        showClose={true}
+        showClose={false}
         showErrorEmoji={true}
         showExcludePatterns={true}
         showSearchModifiers={true}
@@ -1095,7 +1102,6 @@ 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]}
@@ -1106,7 +1112,7 @@ exports[`ProjectSearch where <Enter> has not been pressed 1`] = `
         placeholder="Find in files…"
         query=""
         searchKey="project-search"
-        showClose={true}
+        showClose={false}
         showErrorEmoji={true}
         showExcludePatterns={true}
         showSearchModifiers={true}

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

@@ -6,6 +6,7 @@ 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";
@@ -19,6 +20,7 @@ export class WelcomeBox extends Component {
       openQuickOpen: PropTypes.func.isRequired,
       setActiveSearch: PropTypes.func.isRequired,
       toggleShortcutsModal: PropTypes.func.isRequired,
+      setPrimaryPaneTab: PropTypes.func.isRequired,
     };
   }
 
@@ -38,7 +40,6 @@ 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">
@@ -48,7 +49,7 @@ export class WelcomeBox extends Component {
               className="welcomebox__searchSources"
               role="button"
               tabIndex="0"
-              onClick={() => openQuickOpen()}
+              onClick={() => this.props.openQuickOpen()}
             >
               <span className="shortcutKey">{searchSourcesShortcut}</span>
               <span className="shortcutLabel">{searchSourcesLabel}</span>
@@ -57,7 +58,10 @@ export class WelcomeBox extends Component {
               className="welcomebox__searchProject"
               role="button"
               tabIndex="0"
-              onClick={setActiveSearch.bind(null, "project")}
+              onClick={() => {
+                this.props.setActiveSearch(primaryPaneTabs.PROJECT_SEARCH);
+                this.props.setPrimaryPaneTab(primaryPaneTabs.PROJECT_SEARCH);
+              }}
             >
               <span className="shortcutKey">{searchProjectShortcut}</span>
               <span className="shortcutLabel">{searchProjectLabel}</span>
@@ -66,7 +70,7 @@ export class WelcomeBox extends Component {
               className="welcomebox__allShortcuts"
               role="button"
               tabIndex="0"
-              onClick={() => toggleShortcutsModal()}
+              onClick={() => this.props.toggleShortcutsModal()}
             >
               <span className="shortcutKey">{allShortcutsShortcut}</span>
               <span className="shortcutLabel">{allShortcutsLabel}</span>
@@ -86,4 +90,5 @@ 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,7 +13,6 @@ DIRS += [
 CompiledModules(
     "A11yIntention.js",
     "App.js",
-    "ProjectSearch.js",
     "QuickOpenModal.js",
     "ShortcutsModal.js",
     "WelcomeBox.js",

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

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

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

@@ -15,6 +15,7 @@ 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/constants.js

@@ -7,3 +7,9 @@ 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() {
+export function initialProjectTextSearchState(state) {
   return {
-    query: "",
+    query: state?.query || "",
     results: [],
     ongoingSearch: null,
     status: statusType.initial,
@@ -72,8 +72,9 @@ function update(state = initialProjectTextSearchState(), action) {
 
     case "CLEAR_SEARCH":
     case "CLOSE_PROJECT_SEARCH":
-    case "NAVIGATE":
       return initialProjectTextSearchState();
+    case "NAVIGATE":
+      return initialProjectTextSearchState(state);
   }
   return state;
 }

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

@@ -8,15 +8,6 @@
 
 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",
@@ -42,8 +33,6 @@ 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);
@@ -58,15 +47,8 @@ add_task(async function testSimpleProjectSearch() {
   );
 
   info("Select a result match to open the location in the source");
-  await selectResultMatch(dbg);
+  await clickElement(dbg, "fileMatch");
-  await waitForLoadedSource(dbg, "script-switching-01.js");
+  await waitForSelectedSource(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() {
@@ -90,7 +72,6 @@ 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.
@@ -113,6 +94,8 @@ 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",
@@ -212,7 +195,8 @@ add_task(async function testSearchExcludePatterns() {
     "The exclude pattern for node modules is persisted accross reloads"
   );
 
-  // Clear the  exclude patterns field so that it does not impact on the subsequent tests
+  // Clear the fields so that it does not impact on the subsequent tests
+  await clearElement(dbg, "projectSearchSearchInput");
   await clearElement(dbg, "excludePatternsInput");
   pressKey(dbg, "Enter");
 });
@@ -225,11 +209,10 @@ 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,
@@ -246,12 +229,5 @@ 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,6 +6,8 @@
 
 "use strict";
 
+requestLongerTimeout(3);
+
 // Tests for searching in dynamic (without urls) sources
 add_task(async function testSearchDynamicScripts() {
   const dbg = await initDebugger("doc-minified.html");
@@ -22,7 +24,6 @@ add_task(async function testSearchDynamicScripts() {
     "The search result was found in the eval script."
   );
 
-  await closeProjectSearch(dbg);
   await resume(dbg);
   await executeComplete;
 });
@@ -41,15 +42,12 @@ 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(
@@ -114,8 +112,6 @@ 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,6 +1667,7 @@ 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",
@@ -2486,6 +2487,7 @@ 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);
@@ -2510,18 +2512,6 @@ 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,7 +287,6 @@ 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)
@@ -319,6 +318,7 @@ 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,18 +36,14 @@ 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.modifiersLabel): A label
+# LOCALIZATION NOTE(searchModifier.regExpModifier): A search option
-# preceding the group of modifiers
-searchModifier.modifiersLabel=Modifiers:
-
-# LOCALIZATION NOTE(searchModifier.regex): A search option
 # when searching text in a file
-searchModifier.regex=Regex
+searchModifier.regExpModifier=Use Regular Expression
 
-# LOCALIZATION NOTE(searchModifier.caseSensitive): A search option
+# LOCALIZATION NOTE(searchModifier.caseSensitiveModifier): A search option
 # when searching text in a file
-searchModifier.caseSensitive=Case sensitive
+searchModifier.caseSensitiveModifier=Match Case
 
-# LOCALIZATION NOTE(searchModifier.wholeWord): A search option
+# LOCALIZATION NOTE(searchModifier.wholeWordModifier): A search option
 # when searching text in a file
-searchModifier.wholeWord=Whole word
+searchModifier.wholeWordModifier=Match Whole Word

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

@@ -766,6 +766,9 @@ 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.regex"),
+    tooltip: l10n.getStr("searchModifier.regExpModifier"),
   },
   {
     value: "caseSensitive",
     className: "case-sensitive-btn",
     svgName: "case-match",
-    tooltip: l10n.getStr("searchModifier.caseSensitive"),
+    tooltip: l10n.getStr("searchModifier.caseSensitiveModifier"),
   },
   {
     value: "wholeWord",
     className: "whole-word-btn",
     svgName: "whole-word-match",
-    tooltip: l10n.getStr("searchModifier.wholeWord"),
+    tooltip: l10n.getStr("searchModifier.wholeWordModifier"),
   },
 ];
 
@@ -76,10 +76,6 @@ 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))
     );
   }

testing/talos/talos/tests/devtools/addon/content/tests/debugger/custom.js

@@ -133,6 +133,7 @@ async function testProjectSearch(tab, toolbox) {
   const firstSearchResultTest = runTest(
     `custom.jsdebugger.project-search.first-search-result.DAMP`
   );
+  await dbg.actions.setPrimaryPaneTab("project");
   await dbg.actions.setActiveSearch("project");
   const complete = dbg.actions.searchSources(cx, "return");
   // Wait till the first search result match is rendered