Phase one of moving the function search into the editor search bar. A…

…dding the UI for toggling function search. (#2121)

src/components/Editor/SearchBar.css

@@ -65,6 +65,7 @@
   height: 40px;
   background-color: var(--theme-body-background);
   border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 0 13px;
 }
 
 .search-bottom-bar .search-modifiers {
@@ -101,3 +102,27 @@
 .search-bottom-bar .search-modifiers button.active svg {
   fill: white;
 }
+
+.search-bottom-bar .search-type-toggles {
+  display: flex;
+  align-items: center;
+}
+
+.search-bottom-bar .search-type-toggles h1 {
+  color: var(--theme-comment);
+  font-size: 12px;
+  margin: 0;
+}
+
+.search-bottom-bar .search-type-toggles .search-type-btn {
+  margin: 0 6px;
+  border: none;
+  background: transparent;
+  color: var(--theme-comment-alt);
+}
+
+.search-bottom-bar .search-type-toggles .search-type-btn.active {
+  color: var(--theme-selection-background);
+  font-weight: bold;
+}
+

src/components/Editor/SearchBar.js

@@ -264,6 +264,10 @@ const SearchBar = React.createClass({
   },
 
   renderSearchModifiers() {
+    if (!isEnabled("searchModifiers")) {
+      return;
+    }
+
     const {
       modifiers: { caseSensitive, wholeWord, regexMatch },
       toggleModifier } = this.props;
@@ -301,6 +305,21 @@ const SearchBar = React.createClass({
     );
   },
 
+  renderFunctionSearchToggle() {
+    if (!isEnabled("functionSearch")) {
+      return;
+    }
+
+    return dom.section(
+      { className: "search-type-toggles" },
+      dom.h1(
+        { className: "search-toggle-title" },
+        "Search for:"
+      ),
+      dom.button({ className: "search-type-btn" }, "functions")
+    );
+  },
+
   renderSearchField() {
     const { searchResults: { count }} = this.props;
     return dom.div(
@@ -331,6 +350,7 @@ const SearchBar = React.createClass({
 
     return dom.div(
       { className: "search-bottom-bar" },
+      this.renderFunctionSearchToggle(),
       this.renderSearchModifiers()
     );
   },