Changeset 125879 in webkit
- Timestamp:
- Aug 17, 2012 3:54:57 AM (12 years ago)
- Location:
- trunk/Source/WebCore
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r125878 r125879 1 2012-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 1 40 2012-08-17 Anthony Berent <aberent@chromium.org> 2 41 -
trunk/Source/WebCore/inspector/front-end/NetworkPanel.js
r125871 r125879 49 49 this._hiddenCategories = {}; 50 50 this._matchedRequests = []; 51 this._filteredOutRequests = new Map(); 52 51 53 this._matchedRequestsMap = {}; 52 54 this._currentMatchedRequestIndex = -1; … … 385 387 var requestTransferSize = (request.cached || !request.transferSize) ? 0 : request.transferSize; 386 388 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)) { 388 390 selectedRequestsNumber++; 389 391 selectedTransferSize += requestTransferSize; … … 395 397 } 396 398 var text = ""; 397 if ( this._hiddenCategories.all) {399 if (selectedRequestsNumber !== requestsNumber) { 398 400 text += String.sprintf(WebInspector.UIString("%d / %d requests"), selectedRequestsNumber, requestsNumber); 399 401 text += " \u2758 " + String.sprintf(WebInspector.UIString("%s / %s transferred"), Number.bytesToString(selectedTransferSize), Number.bytesToString(transferSize)); … … 1068 1070 this._matchedRequests = []; 1069 1071 this._matchedRequestsMap = {}; 1070 this._ highlightNthMatchedRequest(-1, false);1072 this._removeAllHighlights(); 1071 1073 }, 1072 1074 … … 1092 1094 return; 1093 1095 1094 this._highlightNthMatchedRequest (matchedRequestIndex, false);1095 }, 1096 1097 _ highlightNthMatchedRequest: function(matchedRequestIndex, reveal)1096 this._highlightNthMatchedRequestForSearch(matchedRequestIndex, false); 1097 }, 1098 1099 _removeAllHighlights: function() 1098 1100 { 1099 1101 if (this._highlightedSubstringChanges) { 1100 WebInspector.revertDomChanges(this._highlightedSubstringChanges); 1102 for (var i = 0; i < this._highlightedSubstringChanges.length; ++i) 1103 WebInspector.revertDomChanges(this._highlightedSubstringChanges[i]); 1101 1104 this._highlightedSubstringChanges = null; 1102 1105 } 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) 1105 1145 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 1125 1147 this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.SearchIndexUpdated, this._currentMatchedRequestIndex); 1126 1148 }, … … 1134 1156 1135 1157 this._searchRegExp = createPlainTextSearchRegex(searchQuery, "i"); 1136 1137 1158 this._clearSearchMatchedList(); 1138 1159 … … 1144 1165 if (dataGridNode.isFilteredOut()) 1145 1166 continue; 1146 1147 1167 if (this._matchRequest(dataGridNode._request) !== -1 && dataGridNode._request.requestId === currentMatchedRequestId) 1148 1168 newMatchedRequestIndex = this._matchedRequests.length - 1; … … 1150 1170 1151 1171 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 1155 1200 jumpToPreviousSearchResult: function() 1156 1201 { 1157 1202 if (!this._matchedRequests.length) 1158 1203 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); 1160 1205 }, 1161 1206 … … 1164 1209 if (!this._matchedRequests.length) 1165 1210 return; 1166 this._highlightNthMatchedRequest ((this._currentMatchedRequestIndex + 1) % this._matchedRequests.length, true);1211 this._highlightNthMatchedRequestForSearch((this._currentMatchedRequestIndex + 1) % this._matchedRequests.length, true); 1167 1212 }, 1168 1213 … … 1401 1446 }, 1402 1447 1448 /** 1449 * @param {string} searchQuery 1450 */ 1403 1451 performSearch: function(searchQuery) 1404 1452 { 1405 1453 this._networkLogView.performSearch(searchQuery); 1406 1454 }, 1407 1455 1456 /** 1457 * @param {string} query 1458 */ 1459 performFilter: function(query){ 1460 this._networkLogView.performFilter(query); 1461 }, 1462 1408 1463 jumpToPreviousSearchResult: function() 1409 1464 { … … 1718 1773 isFilteredOut: function() 1719 1774 { 1775 if (this._parentView._filteredOutRequests.get(this._request)) 1776 return true; 1720 1777 if (!this._parentView._hiddenCategories.all) 1721 1778 return false; … … 1732 1789 { 1733 1790 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); 1736 1794 return domChanges; 1737 1795 }, -
trunk/Source/WebCore/inspector/front-end/SearchController.js
r122962 r125879 43 43 44 44 // 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"); 46 47 this._searchInputElement = this._searchControlElement.createChild("input", "search-replace"); 47 48 this._searchInputElement.id = "search-input-field"; 48 49 this._searchInputElement.placeholder = WebInspector.UIString("Find"); 49 50 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 50 57 this._matchesElement = this._searchControlElement.createChild("label", "search-results-matches"); 51 58 this._matchesElement.setAttribute("for", "search-input-field"); … … 63 70 this._searchInputElement.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected 64 71 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); 66 75 67 76 this._replaceInputElement = this._secondRowElement.createChild("td").createChild("input", "search-replace toolbar-replace-control"); … … 105 114 106 115 // 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 107 128 var cancelButtonElement = this._firstRowElement.createChild("td").createChild("button"); 108 129 cancelButtonElement.textContent = WebInspector.UIString("Cancel"); … … 133 154 if (!this._searchIsVisible) 134 155 return; 156 if (this._filterCheckboxElement.checked) { 157 this._filterCheckboxElement.checked = false; 158 this._switchFilterToSearch(); 159 } 135 160 delete this._searchIsVisible; 136 161 WebInspector.inspectorView.setFooterElement(null); … … 224 249 WebInspector.inspectorView.setFooterElement(this._element); 225 250 this._updateReplaceVisibility(); 251 this._updateFilterVisibility(); 226 252 this._searchInputElement.focus(); 227 253 this._searchInputElement.select(); … … 229 255 }, 230 256 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 231 285 _updateReplaceVisibility: function() 232 286 { … … 264 318 this._replace(); 265 319 } 266 },267 268 _onInput: function(event)269 {270 this._performSearch(event.target.value, false, false);271 320 }, 272 321 … … 365 414 var currentPanel = WebInspector.inspectorView.currentPanel(); 366 415 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(""); 367 451 } 368 452 } -
trunk/Source/WebCore/inspector/front-end/inspector.css
r125871 r125879 276 276 } 277 277 278 .filter { 279 -webkit-appearance: none; 280 border: 0; 281 padding: 0 2px; 282 margin: 0; 283 width: 251px; 284 } 285 278 286 .search-replace:focus { 279 287 outline: none; -
trunk/Source/WebCore/inspector/front-end/networkLogView.css
r122578 r125879 471 471 } 472 472 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) { 482 482 display: table-row; 483 483 }
Note: See TracChangeset
for help on using the changeset viewer.