Changeset 90556 in webkit


Ignore:
Timestamp:
Jul 7, 2011 5:06:29 AM (13 years ago)
Author:
loislo@chromium.org
Message:

2011-07-07 Ilya Tikhonovsky <​loislo@chromium.org>

Web Inspector: Searching on the Network panel doesn't do anything?
​https://bugs.webkit.org/show_bug.cgi?id=55489

This is initial implementation of search in Network panel.
It is pretty simple search only for names and paths.

Reviewed by Pavel Feldman.

  • inspector/front-end/NetworkPanel.js: (WebInspector.NetworkPanel.prototype.refresh): (WebInspector.NetworkPanel.prototype._reset): (WebInspector.NetworkPanel.prototype._updateOffscreenRows): (WebInspector.NetworkPanel.prototype._matchResource): (WebInspector.NetworkPanel.prototype._clearSearchMatchedList): (WebInspector.NetworkPanel.prototype._highlightNthMatchedResource): (WebInspector.NetworkPanel.prototype.performSearch): (WebInspector.NetworkDataGridNode.prototype.createCells):
  • inspector/front-end/utilities.js: (String.prototype.escapeHTML): ():
Location:
trunk/Source/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r90555 r90556  
     12011-07-07  Ilya Tikhonovsky  <loislo@chromium.org>
     2
     3        Web Inspector: Searching on the Network panel doesn't do anything?
     4        https://bugs.webkit.org/show_bug.cgi?id=55489
     5
     6        This is initial implementation of search in Network panel.
     7        It is pretty simple search only for names and paths.
     8
     9        Reviewed by Pavel Feldman.
     10
     11        * inspector/front-end/NetworkPanel.js:
     12        (WebInspector.NetworkPanel.prototype.refresh):
     13        (WebInspector.NetworkPanel.prototype._reset):
     14        (WebInspector.NetworkPanel.prototype._updateOffscreenRows):
     15        (WebInspector.NetworkPanel.prototype._matchResource):
     16        (WebInspector.NetworkPanel.prototype._clearSearchMatchedList):
     17        (WebInspector.NetworkPanel.prototype._highlightNthMatchedResource):
     18        (WebInspector.NetworkPanel.prototype.performSearch):
     19        (WebInspector.NetworkDataGridNode.prototype.createCells):
     20        * inspector/front-end/utilities.js:
     21        (String.prototype.escapeHTML):
     22        ():
     23
    1242011-07-07  Vsevolod Vlasov  <vsevik@chromium.org>
    225

  • trunk/Source/WebCore/inspector/front-end/NetworkPanel.js

    r90553 r90556  
    5050    this._mainResourceDOMContentTime = -1;
    5151    this._hiddenCategories = {};
     52    this._matchedResources = [];
     53    this._matchedResourcesMap = {};
     54    this._currentMatchedResourceIndex = -1;
    5255
    5356    this._categories = WebInspector.resourceCategories;
    … …  
    292295        this._timelineSortSelector.selectedIndex = 0;
    293296        this._updateOffscreenRows();
     297
     298        this.performSearch(null, true);
    294299    },
    295300
    … …  
    417422
    418423        this._filter(e.target, selectMultiple);
     424        this.performSearch(null, true);
    419425    },
    420426
    … …  
    668674            if (this.calculator.updateBoundaries(resource))
    669675                boundariesChanged = true;
     676
     677            if (!node.isFilteredOut())
     678                this._updateHighlightIfMatched(resource);
    670679        }
    671680
    … …  
    698707        this._popoverHelper.hidePopup();
    699708        this._closeVisibleResource();
     709        this._clearSearchMatchedList();
    700710
    701711        this._toggleGridMode();
    … …  
    11011111            unfilteredRowIndex++;
    11021112        }
     1113    },
     1114
     1115    _matchResource: function(resource)
     1116    {
     1117        if (!this._searchRegExp)
     1118            return -1;
     1119
     1120        if ((!resource.displayName || !resource.displayName.match(this._searchRegExp)) && (!resource.path || !resource.path.match(this._searchRegExp)))
     1121            return -1;
     1122
     1123        if (resource.identifier in this._matchedResourcesMap)
     1124            return this._matchedResourcesMap[resource.identifier];
     1125
     1126        var matchedResourceIndex = this._matchedResources.length;
     1127        this._matchedResourcesMap[resource.identifier] = matchedResourceIndex;
     1128        this._matchedResources.push(resource.identifier);
     1129
     1130        return matchedResourceIndex;
     1131    },
     1132
     1133    _clearSearchMatchedList: function()
     1134    {
     1135        this._matchedResources = [];
     1136        this._matchedResourcesMap = {};
     1137        this._highlightNthMatchedResource(-1, false);
     1138    },
     1139
     1140    _updateHighlightIfMatched: function(resource)
     1141    {
     1142        var matchedResourceIndex = this._matchResource(resource);
     1143        if (matchedResourceIndex === -1)
     1144            return;
     1145
     1146        WebInspector.searchController.updateSearchMatchesCount(this._matchedResources.length, this);
     1147
     1148        if (this._currentMatchedResourceIndex !== -1 && this._currentMatchedResourceIndex !== matchedResourceIndex)
     1149            return;
     1150
     1151        this._highlightNthMatchedResource(matchedResourceIndex, false);
     1152    },
     1153
     1154    _highlightNthMatchedResource: function(matchedResourceIndex, reveal)
     1155    {
     1156        if (this._highlightedSubstringChanges) {
     1157            revertDomChanges(this._highlightedSubstringChanges);
     1158            this._highlightedSubstringChanges = null;
     1159        }
     1160
     1161        if (matchedResourceIndex === -1) {
     1162            this._currentMatchedResourceIndex = matchedResourceIndex;
     1163            return;
     1164        }
     1165
     1166        var resource = this._resourcesById[this._matchedResources[matchedResourceIndex]];
     1167        if (!resource)
     1168            return;
     1169
     1170        var nameMatched = resource.displayName && resource.displayName.match(this._searchRegExp);
     1171        var pathMatched = resource.path && resource.path.match(this._searchRegExp);
     1172        if (!nameMatched && pathMatched && !this._largerResourcesButton.toggled)
     1173            this._toggleLargerResources();
     1174
     1175        var node = this._resourceGridNode(resource);
     1176        if (node) {
     1177            this._highlightedSubstringChanges = node._highlightMatchedSubstring(this._searchRegExp);
     1178            if (reveal)
     1179                node.reveal();
     1180            this._currentMatchedResourceIndex = matchedResourceIndex;
     1181        }
     1182    },
     1183
     1184    performSearch: function(searchQuery, sortOrFilterApplied)
     1185    {
     1186        var newMatchedResourceIndex = 0;
     1187        var currentMatchedResourceId;
     1188        if (this._currentMatchedResourceIndex !== -1)
     1189            currentMatchedResourceId = this._matchedResources[this._currentMatchedResourceIndex];
     1190
     1191        if (!sortOrFilterApplied)
     1192            this._searchRegExp = createSearchRegex(searchQuery);
     1193
     1194        this._clearSearchMatchedList();
     1195
     1196        var childNodes = this._dataGrid.dataTableBody.childNodes;
     1197        var resourceNodes = Array.prototype.slice.call(childNodes, 0, childNodes.length - 1); // drop the filler row.
     1198
     1199        for (var i = 0; i < resourceNodes.length; ++i) {
     1200            var dataGridNode = this._dataGrid.dataGridNodeFromNode(resourceNodes[i]);
     1201            if (dataGridNode.isFilteredOut())
     1202                continue;
     1203
     1204            if (this._matchResource(dataGridNode._resource) !== -1 && dataGridNode._resource.identifier === currentMatchedResourceId)
     1205                newMatchedResourceIndex = this._matchedResources.length - 1;
     1206        }
     1207
     1208        this._highlightNthMatchedResource(newMatchedResourceIndex, !sortOrFilterApplied);
     1209
     1210        WebInspector.searchController.updateSearchMatchesCount(this._matchedResources.length, this);
     1211    },
     1212
     1213    jumpToPreviousSearchResult: function()
     1214    {
     1215        if (!this._matchedResources.length)
     1216            return;
     1217        this._highlightNthMatchedResource((this._currentMatchedResourceIndex + this._matchedResources.length - 1) % this._matchedResources.length, true);
     1218    },
     1219
     1220    jumpToNextSearchResult: function()
     1221    {
     1222        if (!this._matchedResources.length)
     1223            return;
     1224        this._highlightNthMatchedResource((this._currentMatchedResourceIndex + 1) % this._matchedResources.length, true);
     1225    },
     1226
     1227    searchCanceled: function()
     1228    {
     1229        this._clearSearchMatchedList();
     1230        WebInspector.searchController.updateSearchMatchesCount(0, this);
    11031231    }
    11041232}
    … …  
    14201548        this._panel._showResource(this._resource);
    14211549        WebInspector.DataGridNode.prototype.select.apply(this, arguments);
     1550    },
     1551
     1552    _highlightMatchedSubstring: function(regexp)
     1553    {
     1554        var domChanges = [];
     1555        var matchInfo = this._nameCell.textContent.match(regexp);
     1556        highlightSearchResult(this._nameCell, matchInfo.index, matchInfo[0].length, domChanges);
     1557        return domChanges;
    14221558    },
    14231559

  • trunk/Source/WebCore/inspector/front-end/utilities.js

    r89666 r90556  
    444444String.prototype.escapeHTML = function()
    445445{
    446     return this.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
     446    return this.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;"); //" doublequotes just for editor
    447447}
    448448
    … …  
    957957}
    958958
    959 function highlightSearchResult(element, offset, length)
    960 {
    961     var result = highlightSearchResults(element, [{offset: offset, length: length }]);
     959function highlightSearchResult(element, offset, length, domChanges)
     960{
     961    var result = highlightSearchResults(element, [{offset: offset, length: length }], domChanges);
    962962    return result.length ? result[0] : null;
    963963}
    … …  
    10501050}
    10511051
     1052function applyDomChanges(domChanges)
     1053{
     1054    for (var i = 0, size = domChanges.length; i < size; ++i) {
     1055        var entry = domChanges[i];
     1056        switch (entry.type) {
     1057        case "added":
     1058            entry.parent.insertBefore(entry.node, entry.nextSibling);
     1059            break;
     1060        case "changed":
     1061            entry.node.textContent = entry.newText;
     1062            break;
     1063        }
     1064    }
     1065}
     1066
     1067function revertDomChanges(domChanges)
     1068{
     1069    for (var i = 0, size = domChanges.length; i < size; ++i) {
     1070        var entry = domChanges[i];
     1071        switch (entry.type) {
     1072        case "added":
     1073            if (entry.node.parentElement)
     1074                entry.node.parentElement.removeChild(entry.node);
     1075            break;
     1076        case "changed":
     1077            entry.node.textContent = entry.oldText;
     1078            break;
     1079        }
     1080    }
     1081}
     1082
    10521083function createSearchRegex(query, extraFlags)
    10531084{
Note: See TracChangeset for help on using the changeset viewer.