🔨: Rework SourceSearch into SourcesModal (firefox-devtools#4398)

khal0988 · Oct 18, 2017 · 6ba9b0b · 6ba9b0b
1 parent 5fce567
commit 6ba9b0b
Show file tree

Hide file tree

Showing 17 changed files with 303 additions and 429 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -51,6 +51,8 @@ import SymbolModal from "./SymbolModal";
 
 import GotoLineModal from "./GotoLineModal";
 
+import SourcesModal from "./SourcesModal";
+
 type Props = {
   selectSource: Function,
   selectedSource: SourceRecord,
@@ -77,6 +79,7 @@ class App extends Component {
   renderVerticalLayout: Function;
   toggleSymbolModal: Function;
   toggleGoToLineModal: Function;
+  toggleSourcesModal: Function;
   onEscape: Function;
   onCommandSlash: Function;
 
@@ -92,6 +95,7 @@ class App extends Component {
     this.onLayoutChange = this.onLayoutChange.bind(this);
     this.toggleSymbolModal = this.toggleSymbolModal.bind(this);
     this.toggleGoToLineModal = this.toggleGoToLineModal.bind(this);
+    this.toggleSourcesModal = this.toggleSourcesModal.bind(this);
     this.renderEditorPane = this.renderEditorPane.bind(this);
     this.renderVerticalLayout = this.renderVerticalLayout.bind(this);
     this.onEscape = this.onEscape.bind(this);
@@ -110,6 +114,12 @@ class App extends Component {
       this.toggleSymbolModal
     );
 
+    const searchKeys = [
+      L10N.getStr("sources.search.key2"),
+      L10N.getStr("sources.search.alt.key")
+    ];
+    searchKeys.forEach(key => shortcuts.on(key, this.toggleSourcesModal));
+
     shortcuts.on(L10N.getStr("gotoLineModal.key"), this.toggleGoToLineModal);
 
     shortcuts.on("Escape", this.onEscape);
@@ -123,6 +133,12 @@ class App extends Component {
       this.toggleSymbolModal
     );
 
+    const searchKeys = [
+      L10N.getStr("sources.search.key2"),
+      L10N.getStr("sources.search.alt.key")
+    ];
+    searchKeys.forEach(key => shortcuts.off(key, this.toggleSourcesModal));
+
     shortcuts.off(L10N.getStr("gotoLineModal.key"), this.toggleGoToLineModal);
 
     shortcuts.off("Escape", this.onEscape);
@@ -189,6 +205,21 @@ class App extends Component {
     setActiveSearch("line");
   }
 
+  toggleSourcesModal(_, e: SyntheticEvent) {
+    const { activeSearch, closeActiveSearch, setActiveSearch } = this.props;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (activeSearch === "source") {
+      closeActiveSearch();
+      return;
+    }
+
+    setActiveSearch("source");
+    return;
+  }
+
   onLayoutChange() {
     if (isVisible()) {
       this.props.setOrientation(
@@ -353,6 +384,15 @@ class App extends Component {
     );
   }
 
+  renderSourcesModal() {
+    const { activeSearch } = this.props;
+    if (activeSearch !== "source") {
+      return;
+    }
+
+    return <SourcesModal />;
+  }
+
   render() {
     return (
       <div className="debugger">
@@ -361,6 +401,7 @@ class App extends Component {
           : this.renderVerticalLayout()}
         {this.renderSymbolModal()}
         {this.renderGotoLineModal()}
+        {this.renderSourcesModal()}
         {this.renderShortcutsModal()}
       </div>
     );

diff --git a/src/components/GotoLineModal.js b/src/components/GotoLineModal.js
@@ -17,8 +17,6 @@ type GotoLineModalState = {
   query: ?string
 };
 
-import "./SymbolModal.css";
-
 class GotoLineModal extends Component {
   state: GotoLineModalState;
 

diff --git a/src/components/ProjectSearch/ProjectSearch.css b/src/components/ProjectSearch/ProjectSearch.css
@@ -10,38 +10,3 @@
   background-color: var(--theme-body-background);
   overflow-y: hidden;
 }
-
-.searchinput-container {
-  display: flex;
-  border-bottom: 1px solid var(--theme-splitter-color);
-}
-
-.theme-dark .result-list li .subtitle {
-  color: var(--theme-comment-alt);
-}
-
-.toggle-search {
-  background-color: var(--theme-toolbar-background);
-  border-bottom: 1px solid var(--theme-splitter-color);
-  color: var(--theme-comment-alt);
-  display: flex;
-  flex-shrink: 0;
-  justify-content: flex-start;
-  line-height: 40px;
-  padding: 0 13px;
-  width: calc(100% - 1px);
-}
-
-.toggle-search .title {
-  font-weight: 500;
-  font-size: 120%;
-}
-
-.toggle-search .text {
-  margin-left: 1em;
-  cursor: default;
-}
-
-.toggle-search .active {
-  color: var(--theme-selection-background);
-}
diff --git a/src/components/ProjectSearch/SourceSearch.js b/src/components/ProjectSearch/SourceSearch.js
diff --git a/src/components/ProjectSearch/ToggleSearch.js b/src/components/ProjectSearch/ToggleSearch.js
diff --git a/src/components/ProjectSearch/index.js b/src/components/ProjectSearch/index.js
@@ -7,15 +7,12 @@ import { bindActionCreators } from "redux";
 import actions from "../../actions";
 
 import TextSearch from "./TextSearch";
-import SourceSearch from "./SourceSearch";
-import ToggleSearch from "./ToggleSearch";
 
 import {
   getSources,
   getActiveSearch,
   getTextSearchResults,
-  getTextSearchQuery,
-  getSourceSearchQuery
+  getTextSearchQuery
 } from "../../selectors";
 
 import "./ProjectSearch.css";
@@ -25,12 +22,9 @@ class ProjectSearch extends Component {
   onEscape: Function;
   close: Function;
   toggleProjectTextSearch: Function;
-  toggleSourceSearch: Function;
 
   constructor(props) {
     super(props);
-
-    this.toggleSourceSearch = this.toggleSourceSearch.bind(this);
     this.toggleProjectTextSearch = this.toggleProjectTextSearch.bind(this);
   }
 
@@ -41,12 +35,6 @@ class ProjectSearch extends Component {
       L10N.getStr("projectTextSearch.key"),
       this.toggleProjectTextSearch
     );
-
-    const searchKeys = [
-      L10N.getStr("sources.search.key2"),
-      L10N.getStr("sources.search.alt.key")
-    ];
-    searchKeys.forEach(key => shortcuts.on(key, this.toggleSourceSearch));
   }
 
   componentWillUnmount() {
@@ -55,12 +43,6 @@ class ProjectSearch extends Component {
       L10N.getStr("projectTextSearch.key"),
       this.toggleProjectTextSearch
     );
-
-    const searchKeys = [
-      L10N.getStr("sources.search.key2"),
-      L10N.getStr("sources.search.alt.key")
-    ];
-    searchKeys.forEach(key => shortcuts.off(key, this.toggleSourceSearch));
   }
 
   toggleProjectTextSearch(key, e) {
@@ -75,50 +57,10 @@ class ProjectSearch extends Component {
     return setActiveSearch("project");
   }
 
-  toggleSourceSearch(key, e) {
-    const { closeActiveSearch, setActiveSearch } = this.props;
-    if (e) {
-      e.preventDefault();
-    }
-
-    if (this.isSourceSearchEnabled()) {
-      return closeActiveSearch();
-    }
-    return setActiveSearch("source");
-  }
-
   isProjectSearchEnabled() {
     return this.props.activeSearch === "project";
   }
 
-  isSourceSearchEnabled() {
-    return this.props.activeSearch === "source";
-  }
-
-  renderSourceSearch() {
-    const {
-      sources,
-      selectSource,
-      closeActiveSearch,
-      sourceSearchQuery,
-      setSourceSearchQuery,
-      clearSourceSearchQuery
-    } = this.props;
-    return (
-      <SourceSearch
-        sources={sources}
-        selectSource={selectSource}
-        closeActiveSearch={closeActiveSearch}
-        searchBottomBar={
-          <ToggleSearch kind="sources" toggle={this.toggleProjectTextSearch} />
-        }
-        query={sourceSearchQuery}
-        setQuery={setSourceSearchQuery}
-        clearQuery={clearSourceSearchQuery}
-      />
-    );
-  }
-
   renderTextSearch() {
     const {
       sources,
@@ -137,25 +79,16 @@ class ProjectSearch extends Component {
         closeActiveSearch={closeActiveSearch}
         selectSource={selectSource}
         query={textSearchQuery}
-        searchBottomBar={
-          <ToggleSearch kind="project" toggle={this.toggleSourceSearch} />
-        }
       />
     );
   }
 
   render() {
-    if (!(this.isProjectSearchEnabled() || this.isSourceSearchEnabled())) {
+    if (!this.isProjectSearchEnabled()) {
       return null;
     }
 
-    return (
-      <div className="search-container">
-        {this.isProjectSearchEnabled()
-          ? this.renderTextSearch()
-          : this.renderSourceSearch()}
-      </div>
-    );
+    return <div className="search-container">{this.renderTextSearch()}</div>;
   }
 }
 
@@ -167,10 +100,7 @@ ProjectSearch.propTypes = {
   closeActiveSearch: PropTypes.func.isRequired,
   searchSources: PropTypes.func,
   activeSearch: PropTypes.string,
-  selectSource: PropTypes.func.isRequired,
-  sourceSearchQuery: PropTypes.string,
-  setSourceSearchQuery: PropTypes.func,
-  clearSourceSearchQuery: PropTypes.func
+  selectSource: PropTypes.func.isRequired
 };
 
 ProjectSearch.contextTypes = {
@@ -182,8 +112,7 @@ export default connect(
     sources: getSources(state),
     activeSearch: getActiveSearch(state),
     results: getTextSearchResults(state),
-    textSearchQuery: getTextSearchQuery(state),
-    sourceSearchQuery: getSourceSearchQuery(state)
+    textSearchQuery: getTextSearchQuery(state)
   }),
   dispatch => bindActionCreators(actions, dispatch)
 )(ProjectSearch);