Add enhanced filters to Network panel.

Source/devtools/front_end/FilterBar.js

Index: Source/devtools/front_end/FilterBar.js
diff --git a/Source/devtools/front_end/FilterBar.js b/Source/devtools/front_end/FilterBar.js
index 7a661766642d382d6f72b47c210e8da923ebc9aa..b35aef87718e5b63e6ade2c184dfab0a5db23d0f 100644
--- a/Source/devtools/front_end/FilterBar.js
+++ b/Source/devtools/front_end/FilterBar.js
@@ -164,8 +164,9 @@ WebInspector.FilterUI.prototype = {
 
 /**
  * @constructor
- * @implements {WebInspector.FilterUI}
  * @extends {WebInspector.Object}
+ * @implements {WebInspector.FilterUI}
+ * @implements {WebInspector.SuggestBoxDelegate}
  * @param {boolean=} supportRegex
  */
 WebInspector.TextFilterUI = function(supportRegex)
@@ -182,6 +183,13 @@ WebInspector.TextFilterUI = function(supportRegex)
     this._filterInputElement.addEventListener("mousedown", this._onFilterFieldManualFocus.bind(this), false); // when the search field is manually selected
     this._filterInputElement.addEventListener("input", this._onInput.bind(this), false);
     this._filterInputElement.addEventListener("change", this._onInput.bind(this), false);
+    this._filterInputElement.addEventListener("keydown", this._onInputKeyDown.bind(this), true);
+    this._filterInputElement.addEventListener("blur", this._onBlur.bind(this), true);
+
+    /** @type {?WebInspector.TextFilterUI.SuggestionBuilder} */
+    this._suggestionBuilder = null;
+
+    this._suggestBox = new WebInspector.SuggestBox(this, this._filterElement);
 
     if (this._supportRegex) {
         this._filterElement.classList.add("supports-regex");
@@ -247,6 +255,14 @@ WebInspector.TextFilterUI.prototype = {
     },
 
     /**
+     * @param {?Event} event
+     */
+    _onBlur: function(event)
+    {
+        this._suggestBox.hide();
+    },
+
+    /**
      * @param {!WebInspector.Event} event
      */
     _onInput: function(event)
@@ -254,7 +270,32 @@ WebInspector.TextFilterUI.prototype = {
         this._valueChanged();
     },
 
-    _valueChanged: function() {
+    /**
+     * @param {?WebInspector.TextFilterUI.SuggestionBuilder} suggestionBuilder
+     */
+    setSuggestionBuilder: function(suggestionBuilder)
+    {
+        this._suggestionBuilder = suggestionBuilder;
+        if (document.activeElement === this._filterInputElement)
+            this._updateSuggestions();
+    },
+
+    _updateSuggestions: function()
+    {
+        if (!this._suggestionBuilder) {
+            this._suggestBox.hide();
+            return;
+        }
+        var suggestions = this._suggestionBuilder.buildSuggestions(this._filterInputElement);
+        if (suggestions && suggestions.length)
+            this._suggestBox.updateSuggestions(null, suggestions, 0, true, "");
+        else
+            this._suggestBox.hide();
+    },
+
+    _valueChanged: function()
+    {
+        this._updateSuggestions();
         var filterQuery = this.value();
 
         this._regex = null;
@@ -274,10 +315,68 @@ WebInspector.TextFilterUI.prototype = {
         this.dispatchEventToListeners(WebInspector.FilterUI.Events.FilterChanged, null);
     },
 
+    /**
+     * @param {!KeyboardEvent} event
+     * @return {boolean}
+     */
+    _onInputKeyDown: function(event)
+    {
+        var handled = false;
+        if (this._suggestBox.visible()) {
+            if (event.keyIdentifier === "U+0009") // Tab
+                handled = this._suggestBox.enterKeyPressed();
+            else
+                handled = this._suggestBox.keyPressed(event);
+        }
+        if (handled)
+            event.consume(true);
+        return handled;
+    },
+
+    /**
+     * @override
+     * @param {string} suggestion
+     * @param {boolean=} isIntermediateSuggestion
+     */
+    applySuggestion: function(suggestion, isIntermediateSuggestion)
+    {
+        if (!this._suggestionBuilder || isIntermediateSuggestion)
+            return;
+        this._suggestionBuilder.applySuggestion(this._filterInputElement, suggestion);
+    },
+
+    /** @override */
+    acceptSuggestion: function()
+    {
+        this._filterInputElement.scrollLeft = this._filterInputElement.scrollWidth;
+        this._valueChanged();
+    },
+
     __proto__: WebInspector.Object.prototype
 }
 
 /**
+ * @interface
+ */
+WebInspector.TextFilterUI.SuggestionBuilder = function()
+{
+}
+
+WebInspector.TextFilterUI.SuggestionBuilder.prototype = {
+    /**
+     * @param {!HTMLInputElement} input
+     * @return {?Array.<string>}
+     */
+    buildSuggestions: function(input) { },
+
+    /**
+     * @param {!HTMLInputElement} input
+     * @param {string} suggestion
+     */
+    applySuggestion: function(input, suggestion) { }
+}
+
+/**
  * @constructor
  * @implements {WebInspector.FilterUI}
  * @extends {WebInspector.Object}