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 2651e26affad41a85f180e87ea0e2d9eb7bdef6c..4e317f1d86f647b4e213985629dfbb199433aace 100644
--- a/Source/devtools/front_end/NetworkPanel.js
+++ b/Source/devtools/front_end/NetworkPanel.js
@@ -28,6 +28,7 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+importScript("FilterSuggestionBuilder.js");
 importScript("RequestView.js");
 importScript("NetworkItemView.js");
 importScript("RequestCookiesView.js");
@@ -51,6 +52,7 @@ WebInspector.NetworkLogView = function(filterBar, coulmnsVisibilitySetting)
     WebInspector.View.call(this);
     this.registerRequiredCSS("networkLogView.css");
     this.registerRequiredCSS("filter.css");
+    this.registerRequiredCSS("textPrompt.css");
 
     this._filterBar = filterBar;
     this._coulmnsVisibilitySetting = coulmnsVisibilitySetting;
@@ -67,6 +69,9 @@ WebInspector.NetworkLogView = function(filterBar, coulmnsVisibilitySetting)
     this._highlightedSubstringChanges = [];
     this._filteredOutRequests = new Map();
 
+    /** @type {!Array.<!WebInspector.NetworkLogView.Filter>} */
+    this._filters = [];
+
     this._matchedRequestsMap = {};
     this._currentMatchedRequestIndex = -1;
 
@@ -84,6 +89,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));
@@ -118,10 +124,17 @@ WebInspector.NetworkLogView.prototype = {
         this._filterBar.addFilter(this._dataURLFilterUI);
     },
 
+    _resetSuggestionBuilder: function()
+    {
+        this._suggestionBuilder = new WebInspector.FilterSuggestionBuilder(WebInspector.NetworkPanel._searchKeys);
+        this._textFilterUI.setSuggestionBuilder(this._suggestionBuilder);
+    },
+
     _filterChanged: function(event)
     {
         this._removeAllNodeHighlights();
         this.searchCanceled();
+        this._parseFilterQuery(this._textFilterUI.value());
         this._filterRequests();
     },
 
@@ -743,6 +756,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.MimeType, request.mimeType);
+
         this._staleRequests[request.requestId] = request;
         this._scheduleRefresh();
     },
@@ -1291,20 +1309,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)
@@ -1313,6 +1323,45 @@ WebInspector.NetworkLogView.prototype = {
             this._filteredOutRequests.put(request, true);
     },
 
+    /**
+     * @param {string} query
+     */
+    _parseFilterQuery: function(query)
+    {
+        var parsedQuery = this._suggestionBuilder.parseQuery(query);
+        this._filters = parsedQuery.text.map(this._createTextFilter);
+        for (var key in parsedQuery.filters) {
+            var filterType = /** @type {!WebInspector.NetworkPanel.FilterType} */ (key);
+            this._filters.push(this._createFilter(filterType, parsedQuery.filters[key]));
+        }
+    },
+
+    /**
+     * @param {string} text
+     * @return {!WebInspector.NetworkLogView.Filter}
+     */
+    _createTextFilter: function(text)
+    {
+        var regexp = new RegExp(text.escapeForRegExp(), "i");
+        return WebInspector.NetworkLogView._requestNameOrPathFilter.bind(null, regexp);
+    },
+
+    /**
+     * @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.MimeType:
+            return WebInspector.NetworkLogView._requestPropertyFilter.bind(null, "mimeType", value);
+        }
+        throw "Unknown filter type:" + type;

[vsevik, 2014/02/25 06:58:53]

console.assert(false, "...") instead.

[eustas, 2014/02/28 09:16:53]

Unfortunately, we need to return something...

+    },
+
     _filterRequests: function()
     {
         this._removeAllHighlights();
@@ -1472,6 +1521,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;

[vsevik, 2014/02/25 06:58:53]

Let's create an explicit filter for both domain and mimeType

[eustas, 2014/02/28 09:16:53]

Done.

+}
+
 /**
  * @param {!WebInspector.NetworkRequest} request
  * @return {boolean}
@@ -1566,6 +1639,15 @@ WebInspector.NetworkPanel = function()
     WebInspector.GoToLineDialog.install(this, viewGetter.bind(this));
 }
 
+/** @enum {string} */
+WebInspector.NetworkPanel.FilterType = {
+    Domain: "Domain",
+    MimeType: "MimeType"
+};
+
+/** @type {!Array.<string>} */
+WebInspector.NetworkPanel._searchKeys = Object.values(WebInspector.NetworkPanel.FilterType);
+
 WebInspector.NetworkPanel.prototype = {
     _onFiltersToggled: function(event)
     {