sketch project search (firefox-devtools#3177)

initial working version

Author: jasonLaster

src/components/ProjectSearch/ProjectSearch.js

@@ -65,7 +65,7 @@ function projectSearchResults(sources, query) {
 
 class ProjectSearch extends Component {
   state: Object;
-  toggle: Function;
+  toggleProjectSearch: Function;
   onEscape: Function;
   close: Function;
 
@@ -76,7 +76,7 @@ class ProjectSearch extends Component {
       inputValue: ""
     };
 
-    this.toggle = this.toggle.bind(this);
+    this.toggleProjectSearch = this.toggleProjectSearch.bind(this);
     this.onEscape = this.onEscape.bind(this);
     this.close = this.close.bind(this);
   }
@@ -87,7 +87,7 @@ class ProjectSearch extends Component {
       L10N.getStr("sources.search.key2"),
       L10N.getStr("sources.search.key2")
     ];
-    searchKeys.forEach(key => shortcuts.off(key, this.toggle));
+    searchKeys.forEach(key => shortcuts.off(key, this.toggleProjectSearch));
     shortcuts.off("Escape", this.onEscape);
   }
 
@@ -97,11 +97,11 @@ class ProjectSearch extends Component {
       L10N.getStr("sources.search.key2"),
       L10N.getStr("sources.search.alt.key")
     ];
-    searchKeys.forEach(key => shortcuts.on(key, this.toggle));
+    searchKeys.forEach(key => shortcuts.on(key, this.toggleProjectSearch));
     shortcuts.on("Escape", this.onEscape);
   }
 
-  toggle(key, e) {
+  toggleProjectSearch(key, e) {
     e.preventDefault();
     this.props.toggleProjectSearch();
   }

src/components/ProjectSearch/TextSearch.css

@@ -1,3 +1,7 @@
+.project-text-search {
+  flex-grow: 1;
+}
+
 .project-text-search .result {
   display: flex;
   margin-left: 20px;
@@ -18,3 +22,9 @@
 .project-text-search .result .line-number {
   padding-right: 5px;
 }
+
+.project-text-search .search-field {
+  display: flex;
+  align-self: stretch;
+  flex-grow: 1;
+}

src/components/ProjectSearch/TextSearch.js

@@ -5,17 +5,50 @@ import Svg from "../shared/Svg";
 import _ManagedTree from "../shared/ManagedTree";
 const ManagedTree = createFactory(_ManagedTree);
 
+import _SearchInput from "../shared/SearchInput";
+const SearchInput = createFactory(_SearchInput);
+
+import { searchSource } from "../../utils/project-search";
+
 import "./TextSearch.css";
 
+function search(query, sources) {
+  const validSources = sources.valueSeq().filter(s => s.has("text")).toJS();
+  return validSources.map(source => ({
+    source,
+    filepath: source.url,
+    matches: searchSource(source, query)
+  }));
+}
+
 export default class TextSearch extends Component {
   constructor(props: Props) {
     super(props);
+    this.state = {
+      results: [],
+      inputValue: props.inputValue || "",
+      selectedIndex: 0,
+      focused: false
+    };
+  }
+
+  async inputOnChange(e) {
+    const { sources } = this.props;
+    const inputValue = e.target.value;
+    const results = await search(inputValue, sources);
+
+    this.setState({
+      results,
+      inputValue,
+      selectedIndex: 0
+    });
   }
 
   renderFile(file, expanded) {
     return dom.div(
       {
-        className: "file-result"
+        className: "file-result",
+        key: file.filepath
       },
       Svg("arrow", {
         className: classnames({
@@ -26,9 +59,9 @@ export default class TextSearch extends Component {
     );
   }
 
-  renderLine(match) {
+  renderMatch(match) {
     return dom.div(
-      { className: "result" },
+      { className: "result", key: `${match.line}/${match.column}` },
       dom.span(
         {
           className: "line-number"
@@ -40,7 +73,7 @@ export default class TextSearch extends Component {
   }
 
   renderResults() {
-    const { results } = this.props;
+    const { results } = this.state;
     return ManagedTree({
       getRoots: () => results,
       getChildren: file => {
@@ -52,7 +85,36 @@ export default class TextSearch extends Component {
       getParent: item => null,
       getKey: item => item.filepath || `${item.value}/${item.line}`,
       renderItem: (item, depth, focused, _, expanded) =>
-        item.filepath ? this.renderFile(item, expanded) : this.renderLine(item)
+        item.filepath ? this.renderFile(item, expanded) : this.renderMatch(item)
+    });
+  }
+
+  resultCount() {
+    const { results } = this.state;
+    return results.reduce(
+      (count, file) => count + (file.matches ? file.matches.length : 0),
+      0
+    );
+  }
+
+  renderInput() {
+    const resultCount = this.resultCount();
+    const summaryMsg = L10N.getFormatStr(
+      "sourceSearch.resultsSummary1",
+      resultCount
+    );
+
+    return SearchInput({
+      query: this.state.inputValue,
+      count: resultCount,
+      placeholder: "Search Project",
+      size: "big",
+      summaryMsg,
+      onChange: e => this.inputOnChange(e),
+      onFocus: () => this.setState({ focused: true }),
+      onBlur: () => this.setState({ focused: false }),
+      onKeyDown: this.onKeyDown,
+      handleClose: this.props.close
     });
   }
 
@@ -61,6 +123,7 @@ export default class TextSearch extends Component {
       {
         className: "project-text-search"
       },
+      this.renderInput(),
       this.renderResults()
     );
   }

src/utils/parser/tests/fixtures/var.js

@@ -1,4 +1,5 @@
 var foo = 1;
 let bar = 2;
 const baz = 3;
-const a = 4, b = 5;
+const a = 4,
+  b = 5;

src/utils/project-search.js

@@ -1,5 +1,5 @@
 export function searchSource(source, queryText) {
-  const { text, id, url, loading } = source;
+  const { text, loading } = source;
   if (loading || !text || queryText == "") {
     return [];
   }
@@ -17,9 +17,8 @@ export function searchSource(source, queryText) {
           line: line + 1,
           column: result.index,
           match: result[0],
-          text: result.input,
-          id,
-          url
+          value: _text,
+          text: result.input
         });
       }
       return indices;

src/utils/tests/__snapshots__/project-search.js.snap

@@ -4,19 +4,17 @@ exports[`project search simple 1`] = `
 Array [
   Object {
     "column": 11,
-    "id": "bar.js",
     "line": 2,
     "match": "foo",
     "text": "  function foo() {",
-    "url": "http://example.com/foo/bar.js",
+    "value": "  function foo() {",
   },
   Object {
     "column": 4,
-    "id": "bar.js",
     "line": 3,
     "match": "foo",
     "text": "    foo();",
-    "url": "http://example.com/foo/bar.js",
+    "value": "    foo();",
   },
 ]
 `;