tweak searchbox options

lib/ace/ext/searchbox.css

@@ -35,6 +35,9 @@
     margin-bottom: 4px;
     overflow: hidden;
 }
+.ace_search_form.ace_nomatch {
+    outline: 1px solid red;
+}
 
 .ace_search_field {
     background-color: white;
@@ -112,3 +115,43 @@
 .ace_replacebtn.next {
     width: 27px
 }
+
+.ace_button {
+	margin-left: 2px;
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-o-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	overflow: hidden;
+	opacity: 0.7;
+	border: 1px solid rgba(100,100,100,0.23);
+	padding: 1px;
+	-moz-box-sizing: border-box;
+	box-sizing:	border-box;
+    color: black;
+}
+
+.ace_button:hover {
+	background-color: #eee;
+    opacity:1;
+}
+.ace_button:active {
+	background-color: #ddd;
+}
+
+.ace_button.checked {
+	border-color: #3399ff;
+    opacity:1;
+}
+
+.ace_search_options{
+    margin-bottom: 3px;
+    text-align: right;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-o-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}

lib/ace/ext/searchbox.js

@@ -53,9 +53,9 @@ var html = '<div class="ace_search right">\
         <button type="button" action="replaceAll" class="ace_replacebtn">All</button>\
     </div>\
     <div class="ace_search_options">\
-        <input id="regExp" type="checkbox"></input><label for="regExp">RegExp Search</label><br>\
+        <span action="toggleRegexpMode" class="ace_button" title="RegExp Search">.*</span>\
-        <input id="caseSensitive" type="checkbox"></input><label for="caseSensitive">caseSensitive Search</label><br>\
+        <span action="toggleCaseSensitive" class="ace_button" title="CaseSensitive Search">Aa</span>\
-        <input id="wholeWord" type="checkbox"></input><label for="wholeWord">wholeWord Search</label>\
+        <span action="toggleWholeWords" class="ace_button" title="Shole Word Search">\\b</span>\
     </div>\
 </div>'.replace(/>\s+/g, ">");
 
@@ -81,9 +81,9 @@ var SearchBox = function(editor, range, showReplaceForm) {
         this.searchBox = sb.querySelector(".ace_search_form");
         this.replaceBox = sb.querySelector(".ace_replace_form");
         this.searchOptions = sb.querySelector(".ace_search_options");
-        this.regExp_option = sb.querySelector(".ace_search_options #regExp");
+        this.regExpOption = sb.querySelector("[action=toggleRegexpMode]");
-        this.caseSensitive_option = sb.querySelector(".ace_search_options #caseSensitive");
+        this.caseSensitiveOption = sb.querySelector("[action=toggleCaseSensitive]");
-        this.wholeWord_option = sb.querySelector(".ace_search_options #wholeWord");
+        this.wholeWordOption = sb.querySelector("[action=toggleWholeWords]");
         this.searchInput = this.searchBox.querySelector(".ace_search_field");
         this.replaceInput = this.replaceBox.querySelector(".ace_search_field");
 
@@ -99,6 +99,8 @@ var SearchBox = function(editor, range, showReplaceForm) {
             var action = t.getAttribute("action");
             if (action && _this[action])
                 _this[action]();
+            else if (_this.$searchBarKb.commands[action])
+                _this.$searchBarKb.commands[action].exec(_this);
             event.stopPropagation(e);
         });
 
@@ -170,16 +172,45 @@ var SearchBox = function(editor, range, showReplaceForm) {
         }
     });
     
+    this.$searchBarKb.addCommands([{
+        name: "toggleRegexpMode",
+        bindKey: {win: "Alt-R|Alt-/", mac: "Ctrl-Alt-R|Ctrl-Alt-/"},
+        exec: function(sb) {
+            sb.regExpOption.checked = !sb.regExpOption.checked;
+            sb.$syncOptions();
+        }
+    }, {
+        name: "toggleCaseSensitive",
+        bindKey: {win: "Alt-C|Alt-I", mac: "Ctrl-Alt-R|Ctrl-Alt-I"},
+        exec: function(sb) {
+            sb.caseSensitiveOption.checked = !sb.caseSensitiveOption.checked;
+            sb.$syncOptions();
+        }
+    }, {
+        name: "toggleWholeWords",
+        bindKey: {win: "Alt-B|Alt-W", mac: "Ctrl-Alt-B|Ctrl-Alt-W"},
+        exec: function(sb) {
+            sb.wholeWordOption.checked = !sb.wholeWordOption.checked;
+            sb.$syncOptions();
+        }
+    }]);
+    
+    this.$syncOptions = function() {
+        dom.setCssClass(this.regExpOption, "checked", this.regExpOption.checked);
+        dom.setCssClass(this.wholeWordOption, "checked", this.wholeWordOption.checked);
+        dom.setCssClass(this.caseSensitiveOption, "checked", this.caseSensitiveOption.checked);
+    };
 
     this.find = function(skipCurrent, backwards) {
-        this.editor.find(this.searchInput.value, {
+        var range = this.editor.find(this.searchInput.value, {
             skipCurrent: skipCurrent,
             backwards: backwards,
             wrap: true,
-            regExp: this.regExp_option.checked,
+            regExp: this.regExpOption.checked,
-            caseSensitive: this.caseSensitive_option.checked,
+            caseSensitive: this.caseSensitiveOption.checked,
-            wholeWord: this.wholeWord_option.checked
+            wholeWord: this.wholeWordOption.checked
         });
+        dom.setCssClass(this.searchBox, "ace_nomatch", !range && this.searchInput.value);
         this.editor.session.highlight(this.editor.$search.$options.re);
     };
     this.findNext = function() {
@@ -190,7 +221,6 @@ var SearchBox = function(editor, range, showReplaceForm) {
     };
     this.replace = function() {
         this.editor.replace(this.replaceInput.value);
-        this.findNext();
     };
     this.replaceAll = function() {
         this.editor.replaceAll(this.replaceInput.value);