Add enhanced filters to Network panel.

Source/devtools/front_end/FilterBar.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 146 matching lines @@
     isActive: function() { },
 
     /**
      * @return {!Element}
      */
     element: function() { }
 }
 
 /**
  * @constructor
+ * @extends {WebInspector.Object}
  * @implements {WebInspector.FilterUI}
- * @extends {WebInspector.Object}
+ * @implements {WebInspector.SuggestBoxDelegate}
  * @param {boolean=} supportRegex
  */
 WebInspector.TextFilterUI = function(supportRegex)
 {
     this._supportRegex = !!supportRegex;
     this._regex = null;
 
     this._filterElement = document.createElement("div");
     this._filterElement.className = "filter-text-filter";
 
     this._filterInputElement = this._filterElement.createChild("input", "search-replace toolbar-replace-control");
     this._filterInputElement.placeholder = WebInspector.UIString("Filter");
     this._filterInputElement.id = "filter-input-field";
     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");
         this._regexCheckBox = this._filterElement.createChild("input");
         this._regexCheckBox.type = "checkbox";
         this._regexCheckBox.id = "text-filter-regex";
         this._regexCheckBox.addEventListener("change", this._onInput.bind(this), false);
 
         this._regexLabel = this._filterElement.createChild("label");
         this._regexLabel.htmlFor = "text-filter-regex";
@@ skipping 45 matching lines @@
 
     /**
      * @param {?Event} event
      */
     _onFilterFieldManualFocus: function(event)
     {
         WebInspector.setCurrentFocusElement(event.target);
     },
 
     /**
+     * @param {?Event} event
+     */
+    _onBlur: function(event)
+    {
+        this._suggestBox.hide();
+    },
+
+    /**
      * @param {!WebInspector.Event} event
      */
     _onInput: function(event)
     {
         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;
         this._filterInputElement.classList.remove("filter-text-invalid");
         if (filterQuery) {
             if (this._supportRegex && this._regexCheckBox.checked) {
                 try {
                     this._regex = new RegExp(filterQuery, "i");
                 } catch (e) {
                     this._filterInputElement.classList.add("filter-text-invalid");
                 }
             } else {
                 this._regex = createPlainTextSearchRegex(filterQuery, "i");
             }
         }
 
         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}
  */
 WebInspector.NamedBitSetFilterUI = function()
 {
     this._filtersElement = document.createElement("div");
     this._filtersElement.className = "filter-bitset-filter status-bar-item";
     this._filtersElement.title = WebInspector.UIString("Use %s Click to select multiple types.", WebInspector.KeyboardShortcut.shortcutToString("", WebInspector.KeyboardShortcut.Modifiers.CtrlOrMeta));
 
@@ skipping 285 matching lines @@
         var label = this._filterElement.createChild("label");
         var checkBorder = label.createChild("div", "checkbox-filter-checkbox");
         this._checkElement = checkBorder.createChild("div", "checkbox-filter-checkbox-check");
         this._filterElement.addEventListener("click", this._onClick.bind(this), false);
         var typeElement = label.createChild("span", "type");
         typeElement.textContent = title;
     },
 
     __proto__: WebInspector.Object.prototype
 }