Diff
Modified: trunk/Source/WebCore/ChangeLog (125878 => 125879)
--- trunk/Source/WebCore/ChangeLog 2012-08-17 10:46:46 UTC (rev 125878)
+++ trunk/Source/WebCore/ChangeLog 2012-08-17 10:54:57 UTC (rev 125879)
@@ -1,3 +1,42 @@
+2012-08-17 Pavel Chadnov <[email protected]>
+
+ Web Inspector: requests filtering in network tab
+ https://bugs.webkit.org/show_bug.cgi?id=93090
+
+ 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)):
+
2012-08-17 Anthony Berent <[email protected]>
View source doesn't interpret escape characters in hrefs.
Modified: trunk/Source/WebCore/inspector/front-end/NetworkPanel.js (125878 => 125879)
--- trunk/Source/WebCore/inspector/front-end/NetworkPanel.js 2012-08-17 10:46:46 UTC (rev 125878)
+++ trunk/Source/WebCore/inspector/front-end/NetworkPanel.js 2012-08-17 10:54:57 UTC (rev 125879)
@@ -48,6 +48,8 @@
this._mainRequestDOMContentTime = -1;
this._hiddenCategories = {};
this._matchedRequests = [];
+ this._filteredOutRequests = new Map();
+
this._matchedRequestsMap = {};
this._currentMatchedRequestIndex = -1;
@@ -384,7 +386,7 @@
var request = this._requests[i];
var requestTransferSize = (request.cached || !request.transferSize) ? 0 : request.transferSize;
transferSize += requestTransferSize;
- if (!this._hiddenCategories.all || !this._hiddenCategories[request.type.name()]) {
+ if ((!this._hiddenCategories.all || !this._hiddenCategories[request.type.name()]) && !this._filteredOutRequests.get(request)) {
selectedRequestsNumber++;
selectedTransferSize += requestTransferSize;
}
@@ -394,7 +396,7 @@
maxTime = request.endTime;
}
var text = "";
- if (this._hiddenCategories.all) {
+ if (selectedRequestsNumber !== requestsNumber) {
text += String.sprintf(WebInspector.UIString("%d / %d requests"), selectedRequestsNumber, requestsNumber);
text += " \u2758 " + String.sprintf(WebInspector.UIString("%s / %s transferred"), Number.bytesToString(selectedTransferSize), Number.bytesToString(transferSize));
} else {
@@ -1067,7 +1069,7 @@
{
this._matchedRequests = [];
this._matchedRequestsMap = {};
- this._highlightNthMatchedRequest(-1, false);
+ this._removeAllHighlights();
},
_updateSearchMatchedListAfterRequestIdChanged: function(oldRequestId, newRequestId)
@@ -1091,37 +1093,57 @@
if (this._currentMatchedRequestIndex !== -1 && this._currentMatchedRequestIndex !== matchedRequestIndex)
return;
- this._highlightNthMatchedRequest(matchedRequestIndex, false);
+ this._highlightNthMatchedRequestForSearch(matchedRequestIndex, false);
},
- _highlightNthMatchedRequest: function(matchedRequestIndex, reveal)
+ _removeAllHighlights: function()
{
if (this._highlightedSubstringChanges) {
- WebInspector.revertDomChanges(this._highlightedSubstringChanges);
+ for (var i = 0; i < this._highlightedSubstringChanges.length; ++i)
+ WebInspector.revertDomChanges(this._highlightedSubstringChanges[i]);
this._highlightedSubstringChanges = null;
}
-
- if (matchedRequestIndex === -1) {
- this._currentMatchedRequestIndex = matchedRequestIndex;
- return;
+ },
+
+ /**
+ * @param {Array.<WebInspector.NetworkRequest>} requests
+ * @param {boolean} reveal
+ * @param {RegExp=} regExp
+ */
+ _highlightMatchedRequests: function(requests, reveal, regExp)
+ {
+ this._highlightedSubstringChanges = [];
+ for (var i = 0; i < requests.length; ++i) {
+ var request = requests[i];
+ var node = this._requestGridNode(request);
+ if (node) {
+ var nameMatched = request.displayName && request.displayName.match(regExp);
+ var pathMatched = request.parsedURL.path && request.folder.match(regExp);
+ if (!nameMatched && pathMatched && !this._largerRequestsButton.toggled)
+ this._toggleLargerRequests();
+ var highlightedSubstringChanges = node._highlightMatchedSubstring(regExp);
+ this._highlightedSubstringChanges.push(highlightedSubstringChanges);
+ if (reveal)
+ node.reveal();
+ }
}
+ },
- var request = this._requestsById[this._matchedRequests[matchedRequestIndex]];
+ /**
+ * @param {number} matchedRequestIndex
+ * @param {boolean} reveal
+ */
+ _highlightNthMatchedRequestForSearch: function(matchedRequestIndex, reveal)
+ {
+ var request = this.requestById(this._matchedRequests[matchedRequestIndex]);
if (!request)
return;
-
- var nameMatched = request.displayName && request.displayName.match(this._searchRegExp);
- var pathMatched = request.parsedURL.path && request.folder.match(this._searchRegExp);
- if (!nameMatched && pathMatched && !this._largerRequestsButton.toggled)
- this._toggleLargerRequests();
-
+ this._removeAllHighlights();
+ this._highlightMatchedRequests([request], reveal, this._searchRegExp);
var node = this._requestGridNode(request);
- if (node) {
- this._highlightedSubstringChanges = node._highlightMatchedSubstring(this._searchRegExp);
- if (reveal)
- node.reveal();
+ if (node)
this._currentMatchedRequestIndex = matchedRequestIndex;
- }
+
this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.SearchIndexUpdated, this._currentMatchedRequestIndex);
},
@@ -1133,7 +1155,6 @@
currentMatchedRequestId = this._matchedRequests[this._currentMatchedRequestIndex];
this._searchRegExp = createPlainTextSearchRegex(searchQuery, "i");
-
this._clearSearchMatchedList();
var childNodes = this._dataGrid.dataTableBody.childNodes;
@@ -1143,27 +1164,51 @@
var dataGridNode = this._dataGrid.dataGridNodeFromNode(requestNodes[i]);
if (dataGridNode.isFilteredOut())
continue;
-
if (this._matchRequest(dataGridNode._request) !== -1 && dataGridNode._request.requestId === currentMatchedRequestId)
newMatchedRequestIndex = this._matchedRequests.length - 1;
}
this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.SearchCountUpdated, this._matchedRequests.length);
- this._highlightNthMatchedRequest(newMatchedRequestIndex, false);
+ this._highlightNthMatchedRequestForSearch(newMatchedRequestIndex, false);
},
+ /**
+ * @param {string} query
+ */
+ performFilter: function(query) {
+ this._filteredOutRequests.clear();
+ var filterRegExp = createPlainTextSearchRegex(query, "i");
+ var shownRequests = [];
+ for (var i = 0; i < this._dataGrid.rootNode().children.length; ++i) {
+ var node = this._dataGrid.rootNode().children[i];
+ node.element.removeStyleClass("filtered-out");
+ var nameMatched = node._request.displayName && node._request.displayName.match(filterRegExp);
+ var pathMatched = node._request.parsedURL.path && node._request.folder.match(filterRegExp);
+ if (!nameMatched && !pathMatched) {
+ node.element.addStyleClass("filtered-out");
+ this._filteredOutRequests.put(this._requests[i], true);
+ } else
+ shownRequests.push(node._request);
+ }
+ this._removeAllHighlights();
+ if (query)
+ this._highlightMatchedRequests(shownRequests, false, filterRegExp);
+ this._updateSummaryBar();
+ this._updateOffscreenRows();
+ },
+
jumpToPreviousSearchResult: function()
{
if (!this._matchedRequests.length)
return;
- this._highlightNthMatchedRequest((this._currentMatchedRequestIndex + this._matchedRequests.length - 1) % this._matchedRequests.length, true);
+ this._highlightNthMatchedRequestForSearch((this._currentMatchedRequestIndex + this._matchedRequests.length - 1) % this._matchedRequests.length, true);
},
jumpToNextSearchResult: function()
{
if (!this._matchedRequests.length)
return;
- this._highlightNthMatchedRequest((this._currentMatchedRequestIndex + 1) % this._matchedRequests.length, true);
+ this._highlightNthMatchedRequestForSearch((this._currentMatchedRequestIndex + 1) % this._matchedRequests.length, true);
},
searchCanceled: function()
@@ -1400,11 +1445,21 @@
this._networkLogView.switchToBriefView();
},
+ /**
+ * @param {string} searchQuery
+ */
performSearch: function(searchQuery)
{
this._networkLogView.performSearch(searchQuery);
},
-
+
+ /**
+ * @param {string} query
+ */
+ performFilter: function(query){
+ this._networkLogView.performFilter(query);
+ },
+
jumpToPreviousSearchResult: function()
{
this._networkLogView.jumpToPreviousSearchResult();
@@ -1717,6 +1772,8 @@
isFilteredOut: function()
{
+ if (this._parentView._filteredOutRequests.get(this._request))
+ return true;
if (!this._parentView._hiddenCategories.all)
return false;
return this._request.type.name() in this._parentView._hiddenCategories;
@@ -1731,8 +1788,9 @@
_highlightMatchedSubstring: function(regexp)
{
var domChanges = [];
- var matchInfo = this._nameCell.textContent.match(regexp);
- WebInspector.highlightSearchResult(this._nameCell, matchInfo.index, matchInfo[0].length, domChanges);
+ var matchInfo = this._element.textContent.match(regexp);
+ if (matchInfo)
+ WebInspector.highlightSearchResult(this._nameCell, matchInfo.index, matchInfo[0].length, domChanges);
return domChanges;
},
Modified: trunk/Source/WebCore/inspector/front-end/SearchController.js (125878 => 125879)
--- trunk/Source/WebCore/inspector/front-end/SearchController.js 2012-08-17 10:46:46 UTC (rev 125878)
+++ trunk/Source/WebCore/inspector/front-end/SearchController.js 2012-08-17 10:54:57 UTC (rev 125879)
@@ -42,11 +42,18 @@
this._secondRowElement = this._element.createChild("tr", "hidden");
// Column 1
- this._searchControlElement = this._firstRowElement.createChild("td").createChild("span", "toolbar-search-control");
+ var searchControlElementColumn = this._firstRowElement.createChild("td");
+ this._searchControlElement = searchControlElementColumn.createChild("span", "toolbar-search-control");
this._searchInputElement = this._searchControlElement.createChild("input", "search-replace");
this._searchInputElement.id = "search-input-field";
this._searchInputElement.placeholder = WebInspector.UIString("Find");
+ this._filterControlElement = searchControlElementColumn.createChild("span", "toolbar-search-control");
+ this._filterControlElement.addStyleClass("hidden");
+ this._filterInputElement = this._filterControlElement.createChild("input", "filter");
+ this._filterInputElement.id = "filter-input-field";
+ this._filterInputElement.placeholder = WebInspector.UIString("Filter");
+
this._matchesElement = this._searchControlElement.createChild("label", "search-results-matches");
this._matchesElement.setAttribute("for", "search-input-field");
@@ -62,7 +69,9 @@
this._searchInputElement.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected
this._searchInputElement.addEventListener("keydown", this._onKeyDown.bind(this), true);
- this._searchInputElement.addEventListener("input", this._onInput.bind(this), false);
+ this._filterInputElement.addEventListener("keydown", this._onKeyDown.bind(this), true);
+ this._filterInputElement.addEventListener("input", this._onFilterInput.bind(this), false);
+ this._searchInputElement.addEventListener("input", this._onSearchInput.bind(this), false);
this._replaceInputElement = this._secondRowElement.createChild("td").createChild("input", "search-replace toolbar-replace-control");
this._replaceInputElement.addEventListener("keydown", this._onKeyDown.bind(this), true);
@@ -104,6 +113,18 @@
this._replaceLabelElement.setAttribute("for", "search-replace-trigger");
// Column 5
+ this._filterCheckboxContainer = this._firstRowElement.createChild("td").createChild("span");
+
+ this._filterCheckboxElement = this._filterCheckboxContainer.createChild("input");
+ this._filterCheckboxElement.type = "checkbox";
+ this._filterCheckboxElement.id = "filter-trigger";
+ this._filterCheckboxElement.addEventListener("click", this._filterCheckboxClick.bind(this), false);
+
+ this._filterLabelElement = this._filterCheckboxContainer.createChild("label");
+ this._filterLabelElement.textContent = WebInspector.UIString("Filter");
+ this._filterLabelElement.setAttribute("for", "filter-trigger");
+
+ // Column 6
var cancelButtonElement = this._firstRowElement.createChild("td").createChild("button");
cancelButtonElement.textContent = WebInspector.UIString("Cancel");
cancelButtonElement.tabIndex = -1;
@@ -132,6 +153,10 @@
{
if (!this._searchIsVisible)
return;
+ if (this._filterCheckboxElement.checked) {
+ this._filterCheckboxElement.checked = false;
+ this._switchFilterToSearch();
+ }
delete this._searchIsVisible;
WebInspector.inspectorView.setFooterElement(null);
this.resetSearch();
@@ -223,11 +248,40 @@
{
WebInspector.inspectorView.setFooterElement(this._element);
this._updateReplaceVisibility();
+ this._updateFilterVisibility();
this._searchInputElement.focus();
this._searchInputElement.select();
this._searchIsVisible = true;
},
+ _switchFilterToSearch: function()
+ {
+ this._filterControlElement.addStyleClass("hidden");
+ this._searchControlElement.removeStyleClass("hidden");
+ this._searchInputElement.focus();
+ this._searchInputElement.select();
+ this._searchInputElement.value = this._filterInputElement.value;
+ this.resetFilter();
+ },
+
+ _switchSearchToFilter: function()
+ {
+ this._filterControlElement.removeStyleClass("hidden");
+ this._searchControlElement.addStyleClass("hidden");
+ this._filterInputElement.focus();
+ this._filterInputElement.select();
+ this._filterInputElement.value = this._searchInputElement.value;
+ this.resetSearch();
+ },
+
+ _updateFilterVisibility: function()
+ {
+ if (typeof WebInspector.inspectorView.currentPanel().performFilter === "function")
+ this._filterCheckboxContainer.removeStyleClass("hidden");
+ else
+ this._filterCheckboxContainer.addStyleClass("hidden");
+ },
+
_updateReplaceVisibility: function()
{
var panel = WebInspector.inspectorView.currentPanel();
@@ -265,11 +319,6 @@
}
},
- _onInput: function(event)
- {
- this._performSearch(event.target.value, false, false);
- },
-
_onNextButtonSearch: function(event)
{
// Simulate next search on search-navigation-button click.
@@ -364,6 +413,41 @@
{
var currentPanel = WebInspector.inspectorView.currentPanel();
currentPanel.replaceAllWith(this._searchInputElement.value, this._replaceInputElement.value);
+ },
+
+ _filterCheckboxClick: function()
+ {
+ if (this._filterCheckboxElement.checked) {
+ this._switchSearchToFilter();
+ this._performFilter(this._filterInputElement.value);
+ } else {
+ this._switchFilterToSearch();
+ this._performSearch(this._searchInputElement.value, false, false);
+ }
+ },
+
+ /**
+ * @param {string} query
+ */
+ _performFilter: function(query)
+ {
+ if (typeof WebInspector.inspectorView.currentPanel().performFilter === "function")
+ WebInspector.inspectorView.currentPanel().performFilter(query);
+ },
+
+ _onFilterInput: function(event)
+ {
+ this._performFilter(event.target.value);
+ },
+
+ _onSearchInput: function(event)
+ {
+ this._performSearch(event.target.value, false, false);
+ },
+
+ resetFilter: function()
+ {
+ this._performFilter("");
}
}
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (125878 => 125879)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2012-08-17 10:46:46 UTC (rev 125878)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2012-08-17 10:54:57 UTC (rev 125879)
@@ -275,6 +275,14 @@
width: 165px;
}
+.filter {
+ -webkit-appearance: none;
+ border: 0;
+ padding: 0 2px;
+ margin: 0;
+ width: 251px;
+}
+
.search-replace:focus {
outline: none;
}
Modified: trunk/Source/WebCore/inspector/front-end/networkLogView.css (125878 => 125879)
--- trunk/Source/WebCore/inspector/front-end/networkLogView.css 2012-08-17 10:46:46 UTC (rev 125878)
+++ trunk/Source/WebCore/inspector/front-end/networkLogView.css 2012-08-17 10:54:57 UTC (rev 125879)
@@ -470,15 +470,15 @@
display: none;
}
-.network-log-grid.data-grid.filter-all table.data tr.revealed.network-item,
-.network-log-grid.data-grid.filter-document table.data tr.revealed.network-type-document,
-.network-log-grid.data-grid.filter-stylesheet table.data tr.revealed.network-type-stylesheet,
-.network-log-grid.data-grid.filter-image table.data tr.revealed.network-type-image,
-.network-log-grid.data-grid.filter-script table.data tr.revealed.network-type-script,
-.network-log-grid.data-grid.filter-xhr table.data tr.revealed.network-type-xhr,
-.network-log-grid.data-grid.filter-font table.data tr.revealed.network-type-font,
-.network-log-grid.data-grid.filter-websocket table.data tr.revealed.network-type-websocket,
-.network-log-grid.data-grid.filter-other table.data tr.revealed.network-type-other {
+.network-log-grid.data-grid.filter-all table.data tr.revealed.network-item:not(.filtered-out),
+.network-log-grid.data-grid.filter-document table.data tr.revealed.network-type-document:not(.filtered-out),
+.network-log-grid.data-grid.filter-stylesheet table.data tr.revealed.network-type-stylesheet:not(.filtered-out),
+.network-log-grid.data-grid.filter-image table.data tr.revealed.network-type-image:not(.filtered-out),
+.network-log-grid.data-grid.filter-script table.data tr.revealed.network-type-script:not(.filtered-out),
+.network-log-grid.data-grid.filter-xhr table.data tr.revealed.network-type-xhr:not(.filtered-out),
+.network-log-grid.data-grid.filter-font table.data tr.revealed.network-type-font:not(.filtered-out),
+.network-log-grid.data-grid.filter-websocket table.data tr.revealed.network-type-websocket:not(.filtered-out),
+.network-log-grid.data-grid.filter-other table.data tr.revealed.network-type-other:not(.filtered-out) {
display: table-row;
}
