Added Search History UI similar to Quick Open

Author: saurabh95

src/search/FindBar.js

@@ -39,6 +39,8 @@ define(function (require, exports, module) {
         Strings            = require("strings"),
         ViewUtils          = require("utils/ViewUtils"),
         FindUtils          = require("search/FindUtils"),
+        QuickSearchField   = require("search/QuickSearchField").QuickSearchField,
+        StringUtils        = require("utils/StringUtils"),
         HealthLogger       = require("utils/HealthLogger");
 
     /**
@@ -226,12 +228,55 @@ define(function (require, exports, module) {
             $elem.attr("title", oldTitle + "(" + KeyBindingManager.formatKeyDescriptor(replaceShortcut.displayKey) + ")");
         }
     };
+    
+    function highlightMatch(item, matchClass, rangeFilter) {
+        var label = item.label || item;
+        matchClass = matchClass || "quicksearch-namematch";
+
+        var stringRanges = item.stringRanges;
+        if (!stringRanges) {
+            // If result didn't come from stringMatch(), highlight nothing
+            stringRanges = [{
+                text: label,
+                matched: false,
+                includesLastSegment: true
+            }];
+        }
+
+        var displayName = "";
+        if (item.scoreDebug) {
+            var sd = item.scoreDebug;
+            displayName += '<span title="sp:' + sd.special + ', m:' + sd.match +
+                ', ls:' + sd.lastSegment + ', b:' + sd.beginning +
+                ', ld:' + sd.lengthDeduction + ', c:' + sd.consecutive + ', nsos: ' +
+                sd.notStartingOnSpecial + ', upper: ' + sd.upper + '">(' + item.matchGoodness + ') </span>';
+        }
+
+        // Put the path pieces together, highlighting the matched parts
+        stringRanges.forEach(function (range) {
+            if (range.matched) {
+                displayName += "<span class='" + matchClass + "'>";
+            }
+
+            var rangeText = rangeFilter ? rangeFilter(range.includesLastSegment, range.text) : range.text;
+            displayName += StringUtils.breakableUrl(rangeText);
+
+            if (range.matched) {
+                displayName += "</span>";
+            }
+        });
+        return displayName;
+    }
 
     /**
      * Opens the Find bar, closing any other existing Find bars.
      */
     FindBar.prototype.open = function () {
         var self = this;
+        
+        //var searchBarHTML = "<div align='right'><input type='text' autocomplete='off' id='' placeholder='" + Strings.CMD_FIND + "\u2026' style='width: 30em'><span class=''></span></div>";
+        //this.modalBar = new ModalBar(searchBarHTML, true);
+        var searchHistory = PreferencesManager.getViewState("searchHistory");
 
         // Normally, creating a new Find bar will simply cause the old one to close
         // automatically. This can cause timing issues because the focus change might
@@ -262,6 +307,7 @@ define(function (require, exports, module) {
             FindBar._removeFindBar(self);
             MainViewManager.focusActivePane();
             self.trigger("close");
+            self.searchField.destroy();
         });
 
         FindBar._addFindBar(this);
@@ -311,7 +357,7 @@ define(function (require, exports, module) {
                 if (intervalId === 0) {
                     intervalId = window.setInterval(executeSearchIfNeeded, 50);
                 }
-                var searchHistory = PreferencesManager.getViewState("searchHistory");
+                
                 var maxCount = PreferencesManager.get("maxSearchHistory");
                 if (e.keyCode === KeyEvent.DOM_VK_RETURN) {
                     e.preventDefault();
@@ -324,7 +370,9 @@ define(function (require, exports, module) {
                             searchHistory.pop();
                         }
                     }
-                    searchHistory.unshift($('#find-what').val());
+                    if ($('#find-what').val()) {
+                        searchHistory.unshift($('#find-what').val());
+                    }
                     PreferencesManager.setViewState("searchHistory", searchHistory);
                     lastQueriedText = self.getQueryInfo().query;
                     if (self._options.multifile) {
@@ -347,15 +395,15 @@ define(function (require, exports, module) {
                         self.trigger("doFind", e.shiftKey);
                     }
                     historyIndex = 0;
-                } else if (e.keyCode === KeyEvent.DOM_VK_DOWN || e.keyCode === KeyEvent.DOM_VK_UP) {
+                }/* else if (e.keyCode === KeyEvent.DOM_VK_DOWN || e.keyCode === KeyEvent.DOM_VK_UP) {
                     if (e.keyCode === KeyEvent.DOM_VK_DOWN) {
                         historyIndex = (historyIndex - 1 + searchHistory.length) % searchHistory.length;
                     } else {
                         historyIndex = (historyIndex + 1 + searchHistory.length) % searchHistory.length;
                     }
                     $("#find-what").val(searchHistory[historyIndex]);
                     self.trigger("queryChange");
-                }
+                }*/
             });
 
         if (!this._options.multifile) {
@@ -401,11 +449,54 @@ define(function (require, exports, module) {
             this.showIndexingSpinner();
         }
 
+        //this.$searchField.focus();
+
         // Set up the initial UI state.
         this._updateSearchBarFromPrefs();
         this.focusQuery();
+        //setTimeout(function() {
+            self.showSearchHints(searchHistory);
+        //},0);
     };
 
+    FindBar.prototype.showSearchHints = function (searchHistory) {
+        var self = this;
+        this.$searchField = $("input#find-what");
+        this.searchField = new QuickSearchField(this.$searchField, {
+            verticalAdjust: this.$searchField.offset().top > 0 ? 0 : this._modalBar.getRoot().outerHeight(),
+            maxResults: 20,
+            resultProvider: function (query) {
+                var asyncResult = new $.Deferred();
+                var filteredResults = _.filter(searchHistory,
+                    function(s) { return s.indexOf(query) !== -1; }
+                );
+                asyncResult.resolve(filteredResults);
+                return asyncResult.promise(); 
+            },  //this._filterCallback,
+            formatter: function (item, query) {
+                //query = query.slice(query.indexOf("@") + 1, query.length);
+
+                var displayName = highlightMatch(item);
+                return "<li>" + displayName + "</li>";
+            },  //this._resultsFormatterCallback,
+            onCommit: function (selectedItem, query) {
+                console.log(selectedItem);
+                console.log(query);
+                if (selectedItem) {
+                    $("#find-what").val(selectedItem);
+                    self.trigger("queryChange");
+                } else if (query.length) {
+                    self.searchField.setText(query);
+                }
+                //self.trigger("queryChange");
+                self.searchField.destroy();
+            },
+            onHighlight: function (selectedItem, query, explicit) {}
+            //verticalAdjust: 44
+        });
+        this.searchField.setText($("#find-what").val());
+    }
+
     /**
      * Closes this Find bar. If already closed, does nothing.
      * @param {boolean} suppressAnimation If true, don't do the standard closing animation. Default false.
@@ -414,6 +505,7 @@ define(function (require, exports, module) {
         if (this._modalBar) {
             // 1st arg = restore scroll pos; 2nd arg = no animation, since getting replaced immediately
             this._modalBar.close(true, !suppressAnimation);
+            //this.searchField.destroy();
         }
     };
 

src/search/QuickSearchField.js

@@ -171,9 +171,8 @@ define(function (require, exports, module) {
     /** Call onCommit() immediately */
     QuickSearchField.prototype._doCommit = function (index) {
         var item;
-        if (this._displayedResults && this._displayedResults.length) {
-            var committedIndex = index !== undefined ? index : (this._highlightIndex || 0);
-            item = this._displayedResults[committedIndex];
+        if (this._displayedResults && this._displayedResults.length && this._highlightIndex>=0) {
+            item = this._displayedResults[this._highlightIndex];
         }
         this.options.onCommit(item, this._displayedQuery);
     };
@@ -264,7 +263,7 @@ define(function (require, exports, module) {
     QuickSearchField.prototype._render = function (results, query) {
         this._displayedQuery = query;
         this._displayedResults = results;
-        this._highlightIndex = 0;
+        this._highlightIndex = null;
         // TODO: fixup to match prev value's item if possible?
 
         if (results.error || results.length === 0) {