Changeset 125879 in webkit


Ignore:
Timestamp:
Aug 17, 2012 3:54:57 AM (12 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: requests filtering in network tab
https://bugs.webkit.org/show_bug.cgi?id=93090

Patch by Pavel Chadnov <chadnov@google.com> on 2012-08-17
Reviewed by Vsevolod Vlasov.

Added filtering support to search panel.
Implemented filtering for network panel.

  • inspector/front-end/NetworkPanel.js:

(WebInspector.NetworkLogView.prototype._clearSearchMatchedList):
(WebInspector.NetworkLogView.prototype._updateHighlightIfMatched):
(WebInspector.NetworkLogView.prototype._highlightMatchedRequests):
(WebInspector.NetworkLogView.prototype._highlightNthMatchedRequestForSearch):
(WebInspector.NetworkLogView.prototype.performSearch):
(WebInspector.NetworkLogView.prototype.performFilter):
(WebInspector.NetworkLogView.prototype.jumpToPreviousSearchResult):
(WebInspector.NetworkLogView.prototype.jumpToNextSearchResult):
(WebInspector.NetworkPanel.prototype.performFilter):
(WebInspector.NetworkDataGridNode.prototype._highlightMatchedSubstring):

  • inspector/front-end/SearchController.js:

(WebInspector.SearchController):
(WebInspector.SearchController.prototype.cancelSearch):
(WebInspector.SearchController.prototype.showSearchField):
(WebInspector.SearchController.prototype._switchFilterToSearch):
(WebInspector.SearchController.prototype._switchSearchToFilter):
(WebInspector.SearchController.prototype._updateFilterVisibility):
(WebInspector.SearchController.prototype._replaceAll):
(WebInspector.SearchController.prototype._filterCheckboxClick):
(WebInspector.SearchController.prototype._performFilter):
(WebInspector.SearchController.prototype._onFilterInput):
(WebInspector.SearchController.prototype._onSearchInput):
(WebInspector.SearchController.prototype.resetFilter):

  • inspector/front-end/inspector.css:

(.filter):

  • inspector/front-end/networkLogView.css:

(.network-log-grid.data-grid.filter-other table.data tr.revealed.network-type-other:not(.filtered-out)):

Location:
trunk/Source/WebCore
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebCore/ChangeLog

    r125878 r125879  
     12012-08-17  Pavel Chadnov  <chadnov@google.com>
     2
     3        Web Inspector: requests filtering in network tab
     4        https://bugs.webkit.org/show_bug.cgi?id=93090
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        Added filtering support to search panel.
     9        Implemented filtering for network panel.
     10       
     11        * inspector/front-end/NetworkPanel.js:
     12        (WebInspector.NetworkLogView.prototype._clearSearchMatchedList):
     13        (WebInspector.NetworkLogView.prototype._updateHighlightIfMatched):
     14        (WebInspector.NetworkLogView.prototype._highlightMatchedRequests):
     15        (WebInspector.NetworkLogView.prototype._highlightNthMatchedRequestForSearch):
     16        (WebInspector.NetworkLogView.prototype.performSearch):
     17        (WebInspector.NetworkLogView.prototype.performFilter):
     18        (WebInspector.NetworkLogView.prototype.jumpToPreviousSearchResult):
     19        (WebInspector.NetworkLogView.prototype.jumpToNextSearchResult):
     20        (WebInspector.NetworkPanel.prototype.performFilter):
     21        (WebInspector.NetworkDataGridNode.prototype._highlightMatchedSubstring):
     22        * inspector/front-end/SearchController.js:
     23        (WebInspector.SearchController):
     24        (WebInspector.SearchController.prototype.cancelSearch):
     25        (WebInspector.SearchController.prototype.showSearchField):
     26        (WebInspector.SearchController.prototype._switchFilterToSearch):
     27        (WebInspector.SearchController.prototype._switchSearchToFilter):
     28        (WebInspector.SearchController.prototype._updateFilterVisibility):
     29        (WebInspector.SearchController.prototype._replaceAll):
     30        (WebInspector.SearchController.prototype._filterCheckboxClick):
     31        (WebInspector.SearchController.prototype._performFilter):
     32        (WebInspector.SearchController.prototype._onFilterInput):
     33        (WebInspector.SearchController.prototype._onSearchInput):
     34        (WebInspector.SearchController.prototype.resetFilter):
     35        * inspector/front-end/inspector.css:
     36        (.filter):
     37        * inspector/front-end/networkLogView.css:
     38        (.network-log-grid.data-grid.filter-other table.data tr.revealed.network-type-other:not(.filtered-out)):
     39
    1402012-08-17  Anthony Berent  <aberent@chromium.org>
    241
  • trunk/Source/WebCore/inspector/front-end/NetworkPanel.js

    r125871 r125879  
    4949    this._hiddenCategories = {};
    5050    this._matchedRequests = [];
     51    this._filteredOutRequests = new Map();
     52   
    5153    this._matchedRequestsMap = {};
    5254    this._currentMatchedRequestIndex = -1;
     
    385387            var requestTransferSize = (request.cached || !request.transferSize) ? 0 : request.transferSize;
    386388            transferSize += requestTransferSize;
    387             if (!this._hiddenCategories.all || !this._hiddenCategories[request.type.name()]) {
     389            if ((!this._hiddenCategories.all || !this._hiddenCategories[request.type.name()]) && !this._filteredOutRequests.get(request)) {
    388390                selectedRequestsNumber++;
    389391                selectedTransferSize += requestTransferSize;
     
    395397        }
    396398        var text = "";
    397         if (this._hiddenCategories.all) {
     399        if (selectedRequestsNumber !== requestsNumber) {
    398400            text += String.sprintf(WebInspector.UIString("%d / %d requests"), selectedRequestsNumber, requestsNumber);
    399401            text += "  \u2758  " + String.sprintf(WebInspector.UIString("%s / %s transferred"), Number.bytesToString(selectedTransferSize), Number.bytesToString(transferSize));
     
    10681070        this._matchedRequests = [];
    10691071        this._matchedRequestsMap = {};
    1070         this._highlightNthMatchedRequest(-1, false);
     1072        this._removeAllHighlights();
    10711073    },
    10721074
     
    10921094            return;
    10931095
    1094         this._highlightNthMatchedRequest(matchedRequestIndex, false);
    1095     },
    1096 
    1097     _highlightNthMatchedRequest: function(matchedRequestIndex, reveal)
     1096        this._highlightNthMatchedRequestForSearch(matchedRequestIndex, false);
     1097    },
     1098
     1099    _removeAllHighlights: function()
    10981100    {
    10991101        if (this._highlightedSubstringChanges) {
    1100             WebInspector.revertDomChanges(this._highlightedSubstringChanges);
     1102            for (var i = 0; i < this._highlightedSubstringChanges.length; ++i)
     1103                WebInspector.revertDomChanges(this._highlightedSubstringChanges[i]);
    11011104            this._highlightedSubstringChanges = null;
    11021105        }
    1103 
    1104         if (matchedRequestIndex === -1) {
     1106    },
     1107   
     1108    /**
     1109     * @param {Array.<WebInspector.NetworkRequest>} requests
     1110     * @param {boolean} reveal
     1111     * @param {RegExp=} regExp
     1112     */
     1113    _highlightMatchedRequests: function(requests, reveal, regExp)
     1114    {
     1115        this._highlightedSubstringChanges = [];
     1116        for (var i = 0; i < requests.length; ++i) {
     1117            var request = requests[i];
     1118            var node = this._requestGridNode(request);
     1119            if (node) {
     1120                var nameMatched = request.displayName && request.displayName.match(regExp);
     1121                var pathMatched = request.parsedURL.path && request.folder.match(regExp);
     1122                if (!nameMatched && pathMatched && !this._largerRequestsButton.toggled)
     1123                    this._toggleLargerRequests();
     1124                var highlightedSubstringChanges = node._highlightMatchedSubstring(regExp);
     1125                this._highlightedSubstringChanges.push(highlightedSubstringChanges);
     1126                if (reveal)
     1127                    node.reveal();
     1128            }
     1129        }
     1130    },
     1131
     1132    /**
     1133     * @param {number} matchedRequestIndex
     1134     * @param {boolean} reveal
     1135     */
     1136    _highlightNthMatchedRequestForSearch: function(matchedRequestIndex, reveal)
     1137    {
     1138        var request = this.requestById(this._matchedRequests[matchedRequestIndex]);
     1139        if (!request)
     1140            return;
     1141        this._removeAllHighlights();
     1142        this._highlightMatchedRequests([request], reveal, this._searchRegExp);
     1143        var node = this._requestGridNode(request);
     1144        if (node)
    11051145            this._currentMatchedRequestIndex = matchedRequestIndex;
    1106             return;
    1107         }
    1108 
    1109         var request = this._requestsById[this._matchedRequests[matchedRequestIndex]];
    1110         if (!request)
    1111             return;
    1112 
    1113         var nameMatched = request.displayName && request.displayName.match(this._searchRegExp);
    1114         var pathMatched = request.parsedURL.path && request.folder.match(this._searchRegExp);
    1115         if (!nameMatched && pathMatched && !this._largerRequestsButton.toggled)
    1116             this._toggleLargerRequests();
    1117 
    1118         var node = this._requestGridNode(request);
    1119         if (node) {
    1120             this._highlightedSubstringChanges = node._highlightMatchedSubstring(this._searchRegExp);
    1121             if (reveal)
    1122                 node.reveal();
    1123             this._currentMatchedRequestIndex = matchedRequestIndex;
    1124         }
     1146
    11251147        this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.SearchIndexUpdated, this._currentMatchedRequestIndex);
    11261148    },
     
    11341156
    11351157        this._searchRegExp = createPlainTextSearchRegex(searchQuery, "i");
    1136 
    11371158        this._clearSearchMatchedList();
    11381159
     
    11441165            if (dataGridNode.isFilteredOut())
    11451166                continue;
    1146 
    11471167            if (this._matchRequest(dataGridNode._request) !== -1 && dataGridNode._request.requestId === currentMatchedRequestId)
    11481168                newMatchedRequestIndex = this._matchedRequests.length - 1;
     
    11501170
    11511171        this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.SearchCountUpdated, this._matchedRequests.length);
    1152         this._highlightNthMatchedRequest(newMatchedRequestIndex, false);
    1153     },
    1154 
     1172        this._highlightNthMatchedRequestForSearch(newMatchedRequestIndex, false);
     1173    },
     1174
     1175    /**
     1176     * @param {string} query
     1177     */
     1178    performFilter: function(query) {
     1179        this._filteredOutRequests.clear();
     1180        var filterRegExp = createPlainTextSearchRegex(query, "i");
     1181        var shownRequests = [];
     1182        for (var i = 0; i < this._dataGrid.rootNode().children.length; ++i) {
     1183            var node = this._dataGrid.rootNode().children[i];
     1184            node.element.removeStyleClass("filtered-out");
     1185            var nameMatched = node._request.displayName && node._request.displayName.match(filterRegExp);
     1186            var pathMatched = node._request.parsedURL.path && node._request.folder.match(filterRegExp);
     1187            if (!nameMatched && !pathMatched) {
     1188                node.element.addStyleClass("filtered-out");
     1189                this._filteredOutRequests.put(this._requests[i], true);
     1190            } else
     1191                shownRequests.push(node._request);
     1192        }
     1193        this._removeAllHighlights();
     1194        if (query)
     1195            this._highlightMatchedRequests(shownRequests, false, filterRegExp);
     1196        this._updateSummaryBar();
     1197        this._updateOffscreenRows();
     1198    },
     1199   
    11551200    jumpToPreviousSearchResult: function()
    11561201    {
    11571202        if (!this._matchedRequests.length)
    11581203            return;
    1159         this._highlightNthMatchedRequest((this._currentMatchedRequestIndex + this._matchedRequests.length - 1) % this._matchedRequests.length, true);
     1204        this._highlightNthMatchedRequestForSearch((this._currentMatchedRequestIndex + this._matchedRequests.length - 1) % this._matchedRequests.length, true);
    11601205    },
    11611206
     
    11641209        if (!this._matchedRequests.length)
    11651210            return;
    1166         this._highlightNthMatchedRequest((this._currentMatchedRequestIndex + 1) % this._matchedRequests.length, true);
     1211        this._highlightNthMatchedRequestForSearch((this._currentMatchedRequestIndex + 1) % this._matchedRequests.length, true);
    11671212    },
    11681213
     
    14011446    },
    14021447
     1448    /**
     1449     * @param {string} searchQuery
     1450     */   
    14031451    performSearch: function(searchQuery)
    14041452    {
    14051453        this._networkLogView.performSearch(searchQuery);
    14061454    },
    1407 
     1455   
     1456    /**
     1457     * @param {string} query
     1458     */   
     1459    performFilter: function(query){
     1460        this._networkLogView.performFilter(query);
     1461    },
     1462   
    14081463    jumpToPreviousSearchResult: function()
    14091464    {
     
    17181773    isFilteredOut: function()
    17191774    {
     1775        if (this._parentView._filteredOutRequests.get(this._request))
     1776            return true;
    17201777        if (!this._parentView._hiddenCategories.all)
    17211778            return false;
     
    17321789    {
    17331790        var domChanges = [];
    1734         var matchInfo = this._nameCell.textContent.match(regexp);
    1735         WebInspector.highlightSearchResult(this._nameCell, matchInfo.index, matchInfo[0].length, domChanges);
     1791        var matchInfo = this._element.textContent.match(regexp);
     1792        if (matchInfo)
     1793            WebInspector.highlightSearchResult(this._nameCell, matchInfo.index, matchInfo[0].length, domChanges);
    17361794        return domChanges;
    17371795    },
  • trunk/Source/WebCore/inspector/front-end/SearchController.js

    r122962 r125879  
    4343
    4444    // Column 1
    45     this._searchControlElement = this._firstRowElement.createChild("td").createChild("span", "toolbar-search-control");
     45    var searchControlElementColumn = this._firstRowElement.createChild("td");
     46    this._searchControlElement = searchControlElementColumn.createChild("span", "toolbar-search-control");
    4647    this._searchInputElement = this._searchControlElement.createChild("input", "search-replace");
    4748    this._searchInputElement.id = "search-input-field";
    4849    this._searchInputElement.placeholder = WebInspector.UIString("Find");
    4950
     51    this._filterControlElement = searchControlElementColumn.createChild("span", "toolbar-search-control");
     52    this._filterControlElement.addStyleClass("hidden");
     53    this._filterInputElement = this._filterControlElement.createChild("input", "filter");
     54    this._filterInputElement.id = "filter-input-field";
     55    this._filterInputElement.placeholder = WebInspector.UIString("Filter");
     56
    5057    this._matchesElement = this._searchControlElement.createChild("label", "search-results-matches");
    5158    this._matchesElement.setAttribute("for", "search-input-field");
     
    6370    this._searchInputElement.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected
    6471    this._searchInputElement.addEventListener("keydown", this._onKeyDown.bind(this), true);
    65     this._searchInputElement.addEventListener("input", this._onInput.bind(this), false);
     72    this._filterInputElement.addEventListener("keydown", this._onKeyDown.bind(this), true);
     73    this._filterInputElement.addEventListener("input", this._onFilterInput.bind(this), false);
     74    this._searchInputElement.addEventListener("input", this._onSearchInput.bind(this), false);
    6675
    6776    this._replaceInputElement = this._secondRowElement.createChild("td").createChild("input", "search-replace toolbar-replace-control");
     
    105114
    106115    // Column 5
     116    this._filterCheckboxContainer = this._firstRowElement.createChild("td").createChild("span");
     117
     118    this._filterCheckboxElement = this._filterCheckboxContainer.createChild("input");
     119    this._filterCheckboxElement.type = "checkbox";
     120    this._filterCheckboxElement.id = "filter-trigger";
     121    this._filterCheckboxElement.addEventListener("click", this._filterCheckboxClick.bind(this), false);
     122 
     123    this._filterLabelElement = this._filterCheckboxContainer.createChild("label");
     124    this._filterLabelElement.textContent = WebInspector.UIString("Filter");
     125    this._filterLabelElement.setAttribute("for", "filter-trigger");
     126
     127    // Column 6
    107128    var cancelButtonElement = this._firstRowElement.createChild("td").createChild("button");
    108129    cancelButtonElement.textContent = WebInspector.UIString("Cancel");
     
    133154        if (!this._searchIsVisible)
    134155            return;
     156        if (this._filterCheckboxElement.checked) {
     157            this._filterCheckboxElement.checked = false;
     158            this._switchFilterToSearch();
     159        }
    135160        delete this._searchIsVisible;
    136161        WebInspector.inspectorView.setFooterElement(null);
     
    224249        WebInspector.inspectorView.setFooterElement(this._element);
    225250        this._updateReplaceVisibility();
     251        this._updateFilterVisibility();
    226252        this._searchInputElement.focus();
    227253        this._searchInputElement.select();
     
    229255    },
    230256
     257    _switchFilterToSearch: function()
     258    {
     259        this._filterControlElement.addStyleClass("hidden");
     260        this._searchControlElement.removeStyleClass("hidden");
     261        this._searchInputElement.focus();
     262        this._searchInputElement.select();
     263        this._searchInputElement.value = this._filterInputElement.value;
     264        this.resetFilter();
     265    },
     266
     267    _switchSearchToFilter: function()
     268    {
     269        this._filterControlElement.removeStyleClass("hidden");
     270        this._searchControlElement.addStyleClass("hidden");
     271        this._filterInputElement.focus();
     272        this._filterInputElement.select();
     273        this._filterInputElement.value = this._searchInputElement.value;
     274        this.resetSearch();
     275    },
     276   
     277    _updateFilterVisibility: function()
     278    {
     279        if (typeof WebInspector.inspectorView.currentPanel().performFilter === "function")
     280            this._filterCheckboxContainer.removeStyleClass("hidden");
     281        else
     282            this._filterCheckboxContainer.addStyleClass("hidden");
     283    },
     284 
    231285    _updateReplaceVisibility: function()
    232286    {
     
    264318                this._replace();
    265319        }
    266     },
    267 
    268     _onInput: function(event)
    269     {
    270         this._performSearch(event.target.value, false, false);
    271320    },
    272321
     
    365414        var currentPanel = WebInspector.inspectorView.currentPanel();
    366415        currentPanel.replaceAllWith(this._searchInputElement.value, this._replaceInputElement.value);
     416    },
     417 
     418    _filterCheckboxClick: function()
     419    {
     420        if (this._filterCheckboxElement.checked) {
     421            this._switchSearchToFilter();
     422            this._performFilter(this._filterInputElement.value);
     423        } else {
     424            this._switchFilterToSearch();
     425            this._performSearch(this._searchInputElement.value, false, false);
     426        }
     427    },
     428   
     429    /**
     430     * @param {string} query
     431     */
     432    _performFilter: function(query)
     433    {
     434        if (typeof WebInspector.inspectorView.currentPanel().performFilter === "function")
     435            WebInspector.inspectorView.currentPanel().performFilter(query);
     436    },
     437 
     438    _onFilterInput: function(event)
     439    {
     440        this._performFilter(event.target.value);
     441    },
     442 
     443    _onSearchInput: function(event)
     444    {
     445        this._performSearch(event.target.value, false, false);
     446    },
     447   
     448    resetFilter: function()
     449    {
     450        this._performFilter("");
    367451    }
    368452}
  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r125871 r125879  
    276276}
    277277
     278.filter {
     279    -webkit-appearance: none;
     280    border: 0;
     281    padding: 0 2px;
     282    margin: 0;
     283    width: 251px;
     284}
     285
    278286.search-replace:focus {
    279287    outline: none;
  • trunk/Source/WebCore/inspector/front-end/networkLogView.css

    r122578 r125879  
    471471}
    472472
    473 .network-log-grid.data-grid.filter-all table.data tr.revealed.network-item,
    474 .network-log-grid.data-grid.filter-document table.data tr.revealed.network-type-document,
    475 .network-log-grid.data-grid.filter-stylesheet table.data tr.revealed.network-type-stylesheet,
    476 .network-log-grid.data-grid.filter-image table.data tr.revealed.network-type-image,
    477 .network-log-grid.data-grid.filter-script table.data tr.revealed.network-type-script,
    478 .network-log-grid.data-grid.filter-xhr table.data tr.revealed.network-type-xhr,
    479 .network-log-grid.data-grid.filter-font table.data tr.revealed.network-type-font,
    480 .network-log-grid.data-grid.filter-websocket table.data tr.revealed.network-type-websocket,
    481 .network-log-grid.data-grid.filter-other table.data tr.revealed.network-type-other {
     473.network-log-grid.data-grid.filter-all table.data tr.revealed.network-item:not(.filtered-out),
     474.network-log-grid.data-grid.filter-document table.data tr.revealed.network-type-document:not(.filtered-out),
     475.network-log-grid.data-grid.filter-stylesheet table.data tr.revealed.network-type-stylesheet:not(.filtered-out),
     476.network-log-grid.data-grid.filter-image table.data tr.revealed.network-type-image:not(.filtered-out),
     477.network-log-grid.data-grid.filter-script table.data tr.revealed.network-type-script:not(.filtered-out),
     478.network-log-grid.data-grid.filter-xhr table.data tr.revealed.network-type-xhr:not(.filtered-out),
     479.network-log-grid.data-grid.filter-font table.data tr.revealed.network-type-font:not(.filtered-out),
     480.network-log-grid.data-grid.filter-websocket table.data tr.revealed.network-type-websocket:not(.filtered-out),
     481.network-log-grid.data-grid.filter-other table.data tr.revealed.network-type-other:not(.filtered-out) {
    482482    display: table-row;
    483483}
Note: See TracChangeset for help on using the changeset viewer.