DevTools: Unify filtering UI

Source/devtools/front_end/NetworkPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 24 matching lines @@
 importScript("RequestHTMLView.js");
 importScript("RequestJSONView.js");
 importScript("RequestPreviewView.js");
 importScript("RequestResponseView.js");
 importScript("RequestTimingView.js");
 importScript("ResourceWebSocketFrameView.js");
 
 /**
  * @constructor
  * @extends {WebInspector.View}
+ * @param {WebInspector.FilterBar} filterBar
  * @param {WebInspector.Setting} coulmnsVisibilitySetting
  */
-WebInspector.NetworkLogView = function(coulmnsVisibilitySetting)
+WebInspector.NetworkLogView = function(filterBar, coulmnsVisibilitySetting)
 {
     WebInspector.View.call(this);
     this.element.classList.add("vbox", "fill");
     this.registerRequiredCSS("networkLogView.css");
+    this.registerRequiredCSS("filter.css");
 
+    this._filterBar = filterBar;
     this._coulmnsVisibilitySetting = coulmnsVisibilitySetting;
     this._allowRequestSelection = false;
     this._requests = [];
     this._requestsById = {};
     this._requestsByURL = {};
     this._staleRequests = {};
     this._requestGridNodes = {};
     this._lastRequestGridNodeId = 0;
     this._mainRequestLoadTime = -1;
     this._mainRequestDOMContentLoadedTime = -1;
-    this._typeFilterElements = {};
-    this._typeFilter = WebInspector.NetworkLogView._trivialTypeFilter;
     this._matchedRequests = [];
     this._highlightedSubstringChanges = [];
     this._filteredOutRequests = new Map();
 
     this._matchedRequestsMap = {};
     this._currentMatchedRequestIndex = -1;
 
     this._createStatusbarButtons();
     this._createStatusBarItems();
     this._linkifier = new WebInspector.Linkifier();
 
     WebInspector.networkManager.addEventListener(WebInspector.NetworkManager.EventTypes.RequestStarted, this._onRequestStarted, this);
     WebInspector.networkManager.addEventListener(WebInspector.NetworkManager.EventTypes.RequestUpdated, this._onRequestUpdated, this);
     WebInspector.networkManager.addEventListener(WebInspector.NetworkManager.EventTypes.RequestFinished, this._onRequestUpdated, this);
 
     WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNavigated, this);
     WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.Load, this._loadEventFired, this);
     WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.DOMContentLoaded, this._domContentLoadedEventFired, this);
 
+    this._addFilters();
     this._initializeView();
 
     WebInspector.networkLog.requests.forEach(this._appendRequest.bind(this));
 }
 
 WebInspector.NetworkLogView.HTTPSchemas = {"http": true, "https": true, "ws": true, "wss": true};
 WebInspector.NetworkLogView._responseHeaderColumns = ["Cache-Control", "Connection", "Content-Encoding", "Content-Length", "ETag", "Keep-Alive", "Last-Modified", "Server", "Vary"];
 WebInspector.NetworkLogView._defaultColumnsVisibility = {
     method: true, status: true, scheme: false, domain: false, type: true, initiator: true, cookies: false, setCookies: false, size: true, time: true,
     "Cache-Control": false, "Connection": false, "Content-Encoding": false, "Content-Length": false, "ETag": false, "Keep-Alive": false, "Last-Modified": false, "Server": false, "Vary": false
 };
 WebInspector.NetworkLogView._defaultRefreshDelay = 500;
 WebInspector.NetworkLogView.ALL_TYPES = "all";
 
 WebInspector.NetworkLogView.prototype = {
+    _addFilters: function()
+    {
+        this._textFilterUI = new WebInspector.TextFilterUI();
+        this._textFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._filterChanged, this);
+        this._filterBar.addFilter(this._textFilterUI);
+
+        this._resourceTypeFilterUI = new WebInspector.NamedBitSetFilterUI();
+        for (var typeId in WebInspector.resourceTypes) {
+            var resourceType = WebInspector.resourceTypes[typeId];
+            this._resourceTypeFilterUI.addBit(resourceType.name(), resourceType.categoryTitle());
+        }
+        this._resourceTypeFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._filterChanged.bind(this), this);
+        this._filterBar.addFilter(this._resourceTypeFilterUI);
+    },
+
+    _filterChanged: function(event)
+    {
+        this._removeAllNodeHighlights();
+        this.searchCanceled();
+        this._filterRequests();
+    },
+
     _initializeView: function()
     {
         this.element.id = "network-container";
 
         this._createSortingFunctions();
         this._createTable();
         this._createTimelineGrid();
         this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
 
         if (!this.useLargeRows)
             this._setLargerRequests(this.useLargeRows);
 
         this._allowPopover = true;
         this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this));
         // Enable faster hint.
         this._popoverHelper.setTimeout(100);
 
         this.calculator = new WebInspector.NetworkTransferTimeCalculator();
-        this._toggleTypeFilter(WebInspector.NetworkLogView.ALL_TYPES, false);
 
         this.switchToDetailedView();
     },
 
     get statusBarItems()
     {
-        return [this._preserveLogToggle.element, this._clearButton.element, this._filterBarElement, this._largerRequestsButton.element, this._progressBarContainer];
+        return [this._preserveLogToggle.element, this._filterBar.filterButton(), this._clearButton.element, this._largerRequestsButton.element, this._progressBarContainer];
     },
 
     get useLargeRows()
     {
         return WebInspector.settings.resourcesLargeRows.get();
     },
 
     set allowPopover(flag)
     {
         this._allowPopover = flag;
@@ skipping 266 matching lines @@
         this._dataGrid.sortNodes(sortingFunction);
         this.calculator = this._calculators[value];
         if (this.calculator.startAtZero)
             this._timelineGrid.hideEventDividers();
         else
             this._timelineGrid.showEventDividers();
         this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending);
         this._updateOffscreenRows();
     },
 
-    /**
-     * @param {string} typeName
-     * @param {string} label
-     */
-    _addTypeFilter: function(typeName, label)
-    {
-        var typeFilterElement = this._filterBarElement.createChild("li", typeName);
-        typeFilterElement.typeName = typeName;
-        typeFilterElement.createTextChild(label);
-        typeFilterElement.addEventListener("click", this._onTypeFilterClicked.bind(this), false);
-        this._typeFilterElements[typeName] = typeFilterElement;
-    },
-
     _createStatusBarItems: function()
     {
-        var filterBarElement = document.createElement("div");
-        filterBarElement.className = "scope-bar status-bar-item";
-        filterBarElement.title = WebInspector.UIString("Use %s Click to select multiple types.", WebInspector.KeyboardShortcut.shortcutToString("", WebInspector.KeyboardShortcut.Modifiers.CtrlOrMeta));
-        this._filterBarElement = filterBarElement;
-
-        this._addTypeFilter(WebInspector.NetworkLogView.ALL_TYPES, WebInspector.UIString("All"));
-        filterBarElement.createChild("div", "scope-bar-divider");
-
-        for (var typeId in WebInspector.resourceTypes) {
-            var type = WebInspector.resourceTypes[typeId];
-            this._addTypeFilter(type.name(), type.categoryTitle());
-        }
-
         this._progressBarContainer = document.createElement("div");
         this._progressBarContainer.className = "status-bar-item";
     },
 
     _updateSummaryBar: function()
     {
         var requestsNumber = this._requests.length;
 
         if (!requestsNumber) {
             if (this._summaryBarElement._isDisplayingWarning)
@@ skipping 37 matching lines @@
         if (baseTime !== -1 && this._mainRequestLoadTime !== -1 && this._mainRequestDOMContentLoadedTime !== -1 && this._mainRequestDOMContentLoadedTime > baseTime) {
             text += "  \u2758  " + String.sprintf(WebInspector.UIString("%s (load: %s, DOMContentLoaded: %s)"),
                         Number.secondsToString(maxTime - baseTime),
                         Number.secondsToString(this._mainRequestLoadTime - baseTime),
                         Number.secondsToString(this._mainRequestDOMContentLoadedTime - baseTime));
         }
         this._summaryBarElement.textContent = text;
         this._summaryBarElement.title = text;
     },
 
-    /**
-     * @param {!Event} e
-     */
-    _onTypeFilterClicked: function(e)
-    {
-        var toggle;
-        if (WebInspector.isMac())
-            toggle = e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;
-        else
-            toggle = e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
-
-        this._toggleTypeFilter(e.target.typeName, toggle);
-
-        this._removeAllNodeHighlights();
-        this.searchCanceled();
-        this._filterRequests();
-    },
-
-    /**
-     * @param {string} typeName
-     * @param {boolean} allowMultiSelect
-     */
-    _toggleTypeFilter: function(typeName, allowMultiSelect)
-    {
-        if (allowMultiSelect && typeName !== WebInspector.NetworkLogView.ALL_TYPES)
-            this._typeFilterElements[WebInspector.NetworkLogView.ALL_TYPES].removeStyleClass("selected");
-        else {
-            for (var key in this._typeFilterElements)
-                this._typeFilterElements[key].removeStyleClass("selected");
-        }
-
-        var filterElement = this._typeFilterElements[typeName];
-        filterElement.enableStyleClass("selected", !filterElement.hasStyleClass("selected"));
-
-        var allowedTypes = {};
-        for (var key in this._typeFilterElements) {
-            if (this._typeFilterElements[key].hasStyleClass("selected"))
-                allowedTypes[key] = true;
-        }
-
-        if (typeName === WebInspector.NetworkLogView.ALL_TYPES)
-            this._typeFilter = WebInspector.NetworkLogView._trivialTypeFilter;
-        else
-            this._typeFilter = WebInspector.NetworkLogView._typeFilter.bind(null, allowedTypes);
-    },
-
     _scheduleRefresh: function()
     {
         if (this._needsRefresh)
             return;
 
         this._needsRefresh = true;
 
         if (this.isShowing() && !this._refreshTimeout)
             this._refreshTimeout = setTimeout(this.refresh.bind(this), WebInspector.NetworkLogView._defaultRefreshDelay);
     },
@@ skipping 723 matching lines @@
         this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.SearchCountUpdated, this._matchedRequests.length);
         if (shouldJump)
             this._highlightNthMatchedRequestForSearch(newMatchedRequestIndex, true);
     },
 
     /**
      * @param {!WebInspector.NetworkDataGridNode} node
      */
     _applyFilter: function(node)
     {
-        var filter = this._filterRegExp;
+        var filter = this._textFilterUI.regex();
         var request = node._request;
         var matches = false;
-        if (this._typeFilter(request)) {
+        if (this._resourceTypeFilterUI.accept(request.type.name())) {
             matches = !filter || filter.test(request.name()) || filter.test(request.path());
             if (filter && matches)
                 this._highlightMatchedRequest(request, false, filter);
         }
         node.element.enableStyleClass("filtered-out", !matches);
         if (matches)
             this._filteredOutRequests.remove(request);
         else
             this._filteredOutRequests.put(request, true);
     },
 
-    /**
-     * @param {string} query
-     */
-    performFilter: function(query)
-    {
-        delete this._filterRegExp;
-        if (query)
-            this._filterRegExp = createPlainTextSearchRegex(query, "i");
-        this._filterRequests();
-    },
-
     _filterRequests: function()
     {
         this._removeAllHighlights();
         this._filteredOutRequests.clear();
 
         var nodes = this._dataGrid.rootNode().children;
         for (var i = 0; i < nodes.length; ++i)
             this._applyFilter(nodes[i]);
         this._updateSummaryBar();
         this._updateOffscreenRows();
@@ skipping 165 matching lines @@
  * @constructor
  * @extends {WebInspector.Panel}
  * @implements {WebInspector.ContextMenu.Provider}
  */
 WebInspector.NetworkPanel = function()
 {
     WebInspector.Panel.call(this, "network");
     this.registerRequiredCSS("networkPanel.css");
     this._injectStyles();
 
+    this._filterBar = new WebInspector.FilterBar();
+    this._filtersContainer = this.element.createChild("div", "network-filters-header hidden");
+    this._filtersContainer.appendChild(this._filterBar.filtersElement());
+    this._filterBar.addEventListener(WebInspector.FilterBar.Events.FiltersToggled, this._onFiltersToggled, this);
+
+    this.element.addStyleClass("vbox");
     this.createSidebarView();
+    this.splitView.element.removeStyleClass("fill");
     this.splitView.hideMainElement();
 
     var defaultColumnsVisibility = WebInspector.NetworkLogView._defaultColumnsVisibility;
     var networkLogColumnsVisibilitySetting = WebInspector.settings.createSetting("networkLogColumnsVisibility", defaultColumnsVisibility);
     var savedColumnsVisibility = networkLogColumnsVisibilitySetting.get();
     var columnsVisibility = {};
     for (var columnId in defaultColumnsVisibility)
         columnsVisibility[columnId] = savedColumnsVisibility.hasOwnProperty(columnId) ? savedColumnsVisibility[columnId] : defaultColumnsVisibility[columnId];
     networkLogColumnsVisibilitySetting.set(columnsVisibility);
 
-    this._networkLogView = new WebInspector.NetworkLogView(networkLogColumnsVisibilitySetting);
+    this._networkLogView = new WebInspector.NetworkLogView(this._filterBar, networkLogColumnsVisibilitySetting);
     this._networkLogView.show(this.sidebarElement);
 
     this._viewsContainerElement = this.splitView.mainElement;
     this._viewsContainerElement.id = "network-views";
     this._viewsContainerElement.addStyleClass("hidden");
     if (!this._networkLogView.useLargeRows)
         this._viewsContainerElement.addStyleClass("small");
 
     this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.ViewCleared, this._onViewCleared, this);
     this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.RowSizeChanged, this._onRowSizeChanged, this);
@@ skipping 12 matching lines @@
     }
     WebInspector.GoToLineDialog.install(this, viewGetter.bind(this));
 }
 
 WebInspector.NetworkPanel.prototype = {
     get statusBarItems()
     {
         return this._networkLogView.statusBarItems;
     },
 
+    _onFiltersToggled: function(event)
+    {
+        var toggled = /** @type {boolean} */ (event.data);
+        this._filtersContainer.enableStyleClass("hidden", !toggled);
+        this.element.enableStyleClass("filters-toggled", toggled);
+    },
+
     elementsToRestoreScrollPositionsFor: function()
     {
         return this._networkLogView.elementsToRestoreScrollPositionsFor();
     },
 
     // FIXME: only used by the layout tests, should not be exposed.
     _reset: function()
     {
         this._networkLogView._reset();
     },
@@ skipping 130 matching lines @@
 
     /**
      * @param {string} query
      * @param {boolean} shouldJump
      */
     performSearch: function(query, shouldJump)
     {
         this._networkLogView.performSearch(query, shouldJump);
     },
 
-    /**
-     * @return {boolean}
-     */
-    canFilter: function()
-    {
-        return true;
-    },
-
-    /**
-     * @param {string} query
-     */
-    performFilter: function(query)
-    {
-        this._networkLogView.performFilter(query);
-    },
-
     jumpToPreviousSearchResult: function()
     {
         this._networkLogView.jumpToPreviousSearchResult();
     },
 
     jumpToNextSearchResult: function()
     {
         this._networkLogView.jumpToNextSearchResult();
     },
 
@@ skipping 370 matching lines @@
         this._nameCell.addEventListener("dblclick", this._openInNewTab.bind(this), false);
     },
 
     wasDetached: function()
     {
         this._linkifier.reset();
     },
 
     isFilteredOut: function()
     {
-        if (this._parentView._filteredOutRequests.get(this._request))
-            return true;
-        return !this._parentView._typeFilter(this._request);
+        return !!this._parentView._filteredOutRequests.get(this._request);
     },
 
     _onClick: function()
     {
         if (!this._parentView._allowRequestSelection)
             this.select();
     },
 
     select: function()
     {
@@ skipping 368 matching lines @@
             this._labelRightElement.addStyleClass("after");
         } else {
             this._labelRightElement.style.setProperty("left", this._percentages.middle + "%");
             this._labelRightElement.style.setProperty("right", (100 - this._percentages.end) + "%");
         }
     },
 
     __proto__: WebInspector.DataGridNode.prototype
 }
 
-/**
- * @param {WebInspector.NetworkRequest} request
- * @return {boolean}
- */
-WebInspector.NetworkLogView._trivialTypeFilter = function(request)
-{
-    return true;
-}
-
-/**
- * @param {!Object.<string, boolean>} allowedTypes
- * @param {WebInspector.NetworkRequest} request
- * @return {boolean}
- */
-WebInspector.NetworkLogView._typeFilter = function(allowedTypes, request)
-{
-    return request.type.name() in allowedTypes;
-}
-
-
 WebInspector.NetworkDataGridNode.NameComparator = function(a, b)
 {
     var aFileName = a._request.name();
     var bFileName = b._request.name();
     if (aFileName > bFileName)
         return 1;
     if (bFileName > aFileName)
         return -1;
     return 0;
 }
@@ skipping 53 matching lines @@
 WebInspector.NetworkDataGridNode.RequestPropertyComparator = function(propertyName, revert, a, b)
 {
     var aValue = a._request[propertyName];
     var bValue = b._request[propertyName];
     if (aValue > bValue)
         return revert ? -1 : 1;
     if (bValue > aValue)
         return revert ? 1 : -1;
     return 0;
 }