Add enhanced filters to Network panel.

Source/devtools/front_end/NetworkPanel.js

Index: Source/devtools/front_end/NetworkPanel.js
diff --git a/Source/devtools/front_end/NetworkPanel.js b/Source/devtools/front_end/NetworkPanel.js
index 04b34dbd92edec77486c62d8cf98870c8295c8da..46363ab265ec2a31a23ccbe7367a00a7c3a1eb20 100644
--- a/Source/devtools/front_end/NetworkPanel.js
+++ b/Source/devtools/front_end/NetworkPanel.js
@@ -38,6 +38,7 @@ importScript("RequestPreviewView.js");
 importScript("RequestResponseView.js");
 importScript("RequestTimingView.js");
 importScript("ResourceWebSocketFrameView.js");
+importScript("SuggestionBuilder.js");
 
 /**
  * @constructor
@@ -52,6 +53,7 @@ WebInspector.NetworkLogView = function(filterBar, coulmnsVisibilitySetting)
     this.element.classList.add("vbox", "fill");
     this.registerRequiredCSS("networkLogView.css");
     this.registerRequiredCSS("filter.css");
+    this.registerRequiredCSS("textPrompt.css");
 
     this._filterBar = filterBar;
     this._coulmnsVisibilitySetting = coulmnsVisibilitySetting;
@@ -68,6 +70,9 @@ WebInspector.NetworkLogView = function(filterBar, coulmnsVisibilitySetting)
     this._highlightedSubstringChanges = [];
     this._filteredOutRequests = new Map();
 
+    /** @type {!Array.<!WebInspector.NetworkLogView.Filter>} */
+    this._filters = [];
+
     this._matchedRequestsMap = {};
     this._currentMatchedRequestIndex = -1;
 
@@ -85,6 +90,7 @@ WebInspector.NetworkLogView = function(filterBar, coulmnsVisibilitySetting)
     WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.DOMContentLoaded, this._domContentLoadedEventFired, this);
 
     this._addFilters();
+    this._resetSuggestionBuilder();
     this._initializeView();
     this._recordButton.toggled = true;
     WebInspector.networkLog.requests.forEach(this._appendRequest.bind(this));
@@ -119,10 +125,17 @@ WebInspector.NetworkLogView.prototype = {
         this._filterBar.addFilter(this._dataURLFilterUI);
     },
 
+    _resetSuggestionBuilder: function()
+    {
+        this._suggestionBuilder = new WebInspector.SuggestionBuilder(WebInspector.NetworkPanel._searchKeys);
+        this._textFilterUI.setSuggestionBuilder(this._suggestionBuilder);
+    },
+
     _filterChanged: function(event)
     {
         this._removeAllNodeHighlights();
         this.searchCanceled();
+        this._parseFilterQuery(this._textFilterUI.value());
         this._filterRequests();
     },
 
@@ -189,7 +202,7 @@ WebInspector.NetworkLogView.prototype = {
     {
         var columns = [];
         columns.push({
-            id: "name", 
+            id: "name",
             titleDOMFragment: this._makeHeaderFragment(WebInspector.UIString("Name"), WebInspector.UIString("Path")),
             title: WebInspector.UIString("Name"),
             sortable: true,
@@ -735,6 +748,7 @@ WebInspector.NetworkLogView.prototype = {
         this._requestsByURL = {};
         this._staleRequests = {};
         this._requestGridNodes = {};
+        this._resetSuggestionBuilder();
 
         if (this._dataGrid) {
             this._dataGrid.rootNode().removeChildren();
@@ -806,6 +820,10 @@ WebInspector.NetworkLogView.prototype = {
     {
         if (!this._requestsById[request.requestId])
             return;
+
+        this._suggestionBuilder.addItem(WebInspector.NetworkPanel.FilterType.DOMAIN, request.domain);
+        this._suggestionBuilder.addItem(WebInspector.NetworkPanel.FilterType.MIME_TYPE, request.mimeType);
+
         this._staleRequests[request.requestId] = request;
         this._scheduleRefresh();
     },
@@ -1267,20 +1285,12 @@ WebInspector.NetworkLogView.prototype = {
      */
     _applyFilter: function(node)
     {
-        var filter = this._textFilterUI.regex();
         var request = node._request;
-
-        var matches = true;
+        var matches = this._resourceTypeFilterUI.accept(request.type.name());
         if (this._dataURLFilterUI.checked() && request.parsedURL.isDataURL())
             matches = false;
-        if (matches && !this._resourceTypeFilterUI.accept(request.type.name()))
-            matches = false;
-
-        if (matches && filter) {
-            matches = filter.test(request.name()) || filter.test(request.path());
-            if (matches)
-                this._highlightMatchedRequest(request, false, filter);
-        }
+        for (var i = 0; matches && (i < this._filters.length); ++i)
+            matches = this._filters[i](request);
 
         node.element.enableStyleClass("filtered-out", !matches);
         if (matches)
@@ -1289,6 +1299,38 @@ WebInspector.NetworkLogView.prototype = {
             this._filteredOutRequests.put(request, true);
     },
 
+    /**
+     * @param {string} query
+     */
+    _parseFilterQuery: function(query)
+    {
+        this._filters = [];
+        var parsedQuery = this._suggestionBuilder.parseQuery(query);
+        if (parsedQuery.textual)
+            this._filters.push(WebInspector.NetworkLogView._requestNameOrPathFilter.bind(null, parsedQuery.textual));
+
+        for (var key in parsedQuery.specialized) {
+            var filterType = /** @type {!WebInspector.NetworkPanel.FilterType} */ (key);
+            this._filters.push(this._createFilter(filterType, parsedQuery.specialized[key]));
+        }
+    },
+
+    /**
+     * @param {!WebInspector.NetworkPanel.FilterType} type
+     * @param {string} value
+     * @return {!WebInspector.NetworkLogView.Filter}
+     */
+    _createFilter: function(type, value) {
+        switch (type) {
+        case WebInspector.NetworkPanel.FilterType.DOMAIN:
+            return WebInspector.NetworkLogView._requestPropertyFilter.bind(null, "domain", value);
+
+        case WebInspector.NetworkPanel.FilterType.MIME_TYPE:
+            return WebInspector.NetworkLogView._requestPropertyFilter.bind(null, "mimeType", value);
+        }
+        throw "Unknown filter type:" + type;
+    },
+
     _filterRequests: function()
     {
         this._removeAllHighlights();
@@ -1448,6 +1490,30 @@ WebInspector.NetworkLogView.prototype = {
     __proto__: WebInspector.View.prototype
 }
 
+/** @typedef {function(!WebInspector.NetworkRequest): boolean} */
+WebInspector.NetworkLogView.Filter;
+
+/**
+ * @param {!RegExp} regex
+ * @param {!WebInspector.NetworkRequest} request
+ * @return {boolean}
+ */
+WebInspector.NetworkLogView._requestNameOrPathFilter = function(regex, request)
+{
+    return regex.test(request.name()) || regex.test(request.path());
+}
+
+/**
+ * @param {string} field
+ * @param {string} value
+ * @param {!WebInspector.NetworkRequest} request
+ * @return {boolean}
+ */
+WebInspector.NetworkLogView._requestPropertyFilter = function(field, value, request)
+{
+    return request[field] === value;
+}
+
 /**
  * @param {!WebInspector.NetworkRequest} request
  * @return {boolean}
@@ -1535,6 +1601,15 @@ WebInspector.NetworkPanel = function()
     WebInspector.GoToLineDialog.install(this, viewGetter.bind(this));
 }
 
+/** @enum {string} */
+WebInspector.NetworkPanel.FilterType = {
+    DOMAIN: "domain",

[vsevik, 2014/02/20 07:36:38]

Domain

[eustas, 2014/02/21 15:27:45]

Done.

+    MIME_TYPE: "mime-type"

[vsevik, 2014/02/20 07:36:38]

MimeType

[eustas, 2014/02/21 15:27:45]

Done.

+};
+
+/** @type {!Array.<string>} */
+WebInspector.NetworkPanel._searchKeys = Object.values(WebInspector.NetworkPanel.FilterType);
+
 WebInspector.NetworkPanel.prototype = {
     _onFiltersToggled: function(event)
     {
@@ -1725,7 +1800,7 @@ WebInspector.NetworkPanel.prototype = {
         this._networkLogView.searchCanceled();
     },
 
-    /** 
+    /**
      * @param {!WebInspector.ContextMenu} contextMenu
      * @param {!Object} target
      * @this {WebInspector.NetworkPanel}