Index: chrome_linux64/resources/inspector/NetworkPanel.js |
=================================================================== |
--- chrome_linux64/resources/inspector/NetworkPanel.js (revision 197568) |
+++ chrome_linux64/resources/inspector/NetworkPanel.js (working copy) |
@@ -578,22 +578,21 @@ |
statusCodeElement.hidden = !this._request.statusCode; |
if (this._request.statusCode) { |
-var statusImageSource = ""; |
+var statusCodeFragment = document.createDocumentFragment(); |
+statusCodeFragment.createChild("div", "header-name").textContent = WebInspector.UIString("Status Code") + ":"; |
+ |
+var statusCodeImage = statusCodeFragment.createChild("div", "resource-status-image"); |
+statusCodeImage.title = this._request.statusCode + " " + this._request.statusText; |
+ |
if (this._request.statusCode < 300 || this._request.statusCode === 304) |
-statusImageSource = "Images/successGreenDot.png"; |
+statusCodeImage.addStyleClass("green-ball"); |
else if (this._request.statusCode < 400) |
-statusImageSource = "Images/warningOrangeDot.png"; |
+statusCodeImage.addStyleClass("orange-ball"); |
else |
-statusImageSource = "Images/errorRedDot.png"; |
+statusCodeImage.addStyleClass("red-ball"); |
requestMethodElement.title = this._formatHeader(WebInspector.UIString("Request Method"), this._request.requestMethod); |
-var statusCodeFragment = document.createDocumentFragment(); |
-statusCodeFragment.createChild("div", "header-name").textContent = WebInspector.UIString("Status Code") + ":"; |
- |
-var statusCodeImage = statusCodeFragment.createChild("img", "resource-status-image"); |
-statusCodeImage.src = statusImageSource; |
-statusCodeImage.title = this._request.statusCode + " " + this._request.statusText; |
var value = statusCodeFragment.createChild("div", "header-value source-code"); |
value.textContent = this._request.statusCode + " " + this._request.statusText; |
if (this._request.cached) |
@@ -885,11 +884,13 @@ |
WebInspector.RequestContentView.call(this, request); |
} |
+WebInspector.RequestResponseView._maxFormattedResourceSize = 100000; |
+ |
WebInspector.RequestResponseView.prototype = { |
get sourceView() |
{ |
if (!this._sourceView && WebInspector.RequestView.hasTextContent(this.request)) |
-this._sourceView = new WebInspector.ResourceSourceFrame(this.request); |
+this._sourceView = this.request.resourceSize < WebInspector.RequestResponseView._maxFormattedResourceSize ? new WebInspector.ResourceSourceFrame(this.request) : new WebInspector.ResourceSourceFrameFallback(this.request); |
return this._sourceView; |
}, |
@@ -1150,7 +1151,8 @@ |
this._lastRequestGridNodeId = 0; |
this._mainRequestLoadTime = -1; |
this._mainRequestDOMContentTime = -1; |
-this._hiddenCategories = {}; |
+this._typeFilterElements = {}; |
+this._typeFilter = WebInspector.NetworkLogView._trivialTypeFilter; |
this._matchedRequests = []; |
this._highlightedSubstringChanges = []; |
this._filteredOutRequests = new Map(); |
@@ -1177,6 +1179,8 @@ |
WebInspector.NetworkLogView.HTTPSchemas = {"http": true, "https": true, "ws": true, "wss": true}; |
WebInspector.NetworkLogView._defaultColumnsVisivility = {method: true, status: true, domain: false, type: true, initiator: true, cookies: false, setCookies: false, size: true, time: true}; |
+WebInspector.NetworkLogView._defaultRefreshDelay = 500; |
+WebInspector.NetworkLogView.ALL_TYPES = "all"; |
WebInspector.NetworkLogView.prototype = { |
_initializeView: function() |
@@ -1197,7 +1201,7 @@ |
this._popoverHelper.setTimeout(100); |
this.calculator = new WebInspector.NetworkTransferTimeCalculator(); |
-this._filter(this._filterAllElement, false); |
+this._toggleTypeFilter(WebInspector.NetworkLogView.ALL_TYPES, false); |
this.switchToDetailedView(); |
}, |
@@ -1470,33 +1474,31 @@ |
this._updateOffscreenRows(); |
}, |
+ |
+_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; |
- |
-function createFilterElement(typeName, label) |
-{ |
-var categoryElement = document.createElement("li"); |
-categoryElement.typeName = typeName; |
-categoryElement.className = typeName; |
-categoryElement.createTextChild(label); |
-categoryElement.addEventListener("click", this._updateFilter.bind(this), false); |
-filterBarElement.appendChild(categoryElement); |
- |
-return categoryElement; |
-} |
- |
-this._filterAllElement = createFilterElement.call(this, "all", WebInspector.UIString("All")); |
+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]; |
-createFilterElement.call(this, type.name(), type.categoryTitle()); |
+this._addTypeFilter(type.name(), type.categoryTitle()); |
} |
-this._filterBarElement = filterBarElement; |
+ |
this._progressBarContainer = document.createElement("div"); |
this._progressBarContainer.className = "status-bar-item"; |
}, |
@@ -1521,10 +1523,7 @@ |
return; |
this._summaryBarElement._isDisplayingWarning = true; |
-var img = document.createElement("img"); |
-img.src = "Images/warningIcon.png"; |
-this._summaryBarElement.removeChildren(); |
-this._summaryBarElement.appendChild(img); |
+this._summaryBarElement.createChild("div", "warning-icon-small"); |
this._summaryBarElement.appendChild(document.createTextNode( |
WebInspector.UIString("No requests captured. Reload the page to see detailed information on the network activity."))); |
return; |
@@ -1540,7 +1539,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()]) && !this._filteredOutRequests.get(request)) { |
+if (!this._filteredOutRequests.get(request)) { |
selectedRequestsNumber++; |
selectedTransferSize += requestTransferSize; |
} |
@@ -1566,90 +1565,47 @@ |
this._summaryBarElement.textContent = text; |
}, |
-_showCategory: function(typeName) |
-{ |
-this._dataGrid.element.addStyleClass("filter-" + typeName); |
-delete this._hiddenCategories[typeName]; |
-}, |
-_hideCategory: function(typeName) |
+_onTypeFilterClicked: function(e) |
{ |
-this._dataGrid.element.removeStyleClass("filter-" + typeName); |
-this._hiddenCategories[typeName] = true; |
-}, |
+var toggle; |
+if (WebInspector.isMac()) |
+toggle = e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey; |
+else |
+toggle = e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey; |
-_updateFilter: function(e) |
-{ |
-this._removeAllNodeHighlights(); |
-var isMac = WebInspector.isMac(); |
-var selectMultiple = false; |
-if (isMac && e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) |
-selectMultiple = true; |
-if (!isMac && e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey) |
-selectMultiple = true; |
+this._toggleTypeFilter(e.target.typeName, toggle); |
-this._filter(e.target, selectMultiple); |
+this._removeAllNodeHighlights(); |
this.searchCanceled(); |
-this._updateSummaryBar(); |
+this._filterRequests(); |
}, |
-_filter: function(target, selectMultiple) |
-{ |
-function unselectAll() |
-{ |
-for (var i = 0; i < this._filterBarElement.childNodes.length; ++i) { |
-var child = this._filterBarElement.childNodes[i]; |
-if (!child.typeName) |
-continue; |
-child.removeStyleClass("selected"); |
-this._hideCategory(child.typeName); |
+_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"); |
} |
-} |
-if (target === this._filterAllElement) { |
-if (target.hasStyleClass("selected")) { |
+var filterElement = this._typeFilterElements[typeName]; |
+filterElement.enableStyleClass("selected", !filterElement.hasStyleClass("selected")); |
-return; |
+var allowedTypes = {}; |
+for (var key in this._typeFilterElements) { |
+if (this._typeFilterElements[key].hasStyleClass("selected")) |
+allowedTypes[key] = true; |
} |
- |
-unselectAll.call(this); |
-} else { |
- |
-if (this._filterAllElement.hasStyleClass("selected")) { |
-this._filterAllElement.removeStyleClass("selected"); |
-this._hideCategory("all"); |
-} |
-} |
- |
-if (!selectMultiple) { |
- |
- |
-unselectAll.call(this); |
- |
-target.addStyleClass("selected"); |
-this._showCategory(target.typeName); |
-this._updateOffscreenRows(); |
-return; |
-} |
- |
-if (target.hasStyleClass("selected")) { |
- |
- |
-target.removeStyleClass("selected"); |
-this._hideCategory(target.typeName); |
-} else { |
- |
- |
-target.addStyleClass("selected"); |
-this._showCategory(target.typeName); |
-} |
-this._updateOffscreenRows(); |
+if (typeName === WebInspector.NetworkLogView.ALL_TYPES) |
+this._typeFilter = WebInspector.NetworkLogView._trivialTypeFilter; |
+else |
+this._typeFilter = WebInspector.NetworkLogView._typeFilter.bind(null, allowedTypes); |
}, |
-_defaultRefreshDelay: 500, |
- |
_scheduleRefresh: function() |
{ |
if (this._needsRefresh) |
@@ -1658,7 +1614,7 @@ |
this._needsRefresh = true; |
if (this.isShowing() && !this._refreshTimeout) |
-this._refreshTimeout = setTimeout(this.refresh.bind(this), this._defaultRefreshDelay); |
+this._refreshTimeout = setTimeout(this.refresh.bind(this), WebInspector.NetworkLogView._defaultRefreshDelay); |
}, |
_updateDividersIfNeeded: function() |
@@ -2360,33 +2316,38 @@ |
}, |
-_applyFilter: function(node) { |
+_applyFilter: function(node) |
+{ |
var filter = this._filterRegExp; |
var request = node._request; |
-if (!filter) |
-return; |
-if (filter.test(request.name()) || filter.test(request.path())) |
+var matches = false; |
+if (this._typeFilter(request)) { |
+matches = !filter || filter.test(request.name()) || filter.test(request.path()); |
+if (filter && matches) |
this._highlightMatchedRequest(request, false, filter); |
-else { |
-node.element.addStyleClass("filtered-out"); |
-this._filteredOutRequests.put(request, true); |
} |
+node.element.enableStyleClass("filtered-out", !matches); |
+if (!matches) |
+this._filteredOutRequests.put(request, true); |
}, |
performFilter: function(query) |
{ |
-this._removeAllHighlights(); |
-this._filteredOutRequests.clear(); |
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) { |
-nodes[i].element.removeStyleClass("filtered-out"); |
+for (var i = 0; i < nodes.length; ++i) |
this._applyFilter(nodes[i]); |
-} |
this._updateSummaryBar(); |
this._updateOffscreenRows(); |
}, |
@@ -2446,19 +2407,23 @@ |
function escapeCharacter(x) |
{ |
var code = x.charCodeAt(0); |
+if (code < 256) { |
return code < 16 ? "\\x0" + code.toString(16) : "\\x" + code.toString(16); |
} |
+code = code.toString(16); |
+return "\\u" + ("0000" + code).substr(code.length, 4); |
+} |
function escape(str) |
{ |
-if (/[\0-\x1f\']/.test(str)) { |
+if (/[^\x20-\x7E]|\'/.test(str)) { |
return "$\'" + str.replace(/\\/g, "\\\\") |
.replace(/\'/g, "\\\'") |
.replace(/\n/g, "\\n") |
.replace(/\r/g, "\\r") |
-.replace(/[\0-\x1f]/g, escapeCharacter) + "'"; |
+.replace(/[^\x20-\x7E]/g, escapeCharacter) + "'"; |
} else { |
return "'" + str + "'"; |
@@ -2496,7 +2461,7 @@ |
command = command.concat(data); |
command.push("--compressed"); |
return command.join(" "); |
-}, |
+}, |
__proto__: WebInspector.View.prototype |
} |
@@ -2549,7 +2514,7 @@ |
this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.SearchCountUpdated, this._onSearchCountUpdated, this); |
this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventTypes.SearchIndexUpdated, this._onSearchIndexUpdated, this); |
-this._closeButtonElement = document.createElement("button"); |
+this._closeButtonElement = this._viewsContainerElement.createChild("div", "close-button"); |
this._closeButtonElement.id = "network-close-button"; |
this._closeButtonElement.addEventListener("click", this._toggleGridMode.bind(this), false); |
this._viewsContainerElement.appendChild(this._closeButtonElement); |
@@ -2773,14 +2738,6 @@ |
rules.push(hideSelectors.join(", ") + "{border-right: 0 none transparent;}"); |
rules.push(bgSelectors.join(", ") + "{background-color: rgba(0, 0, 0, 0.07);}"); |
-var filterSelectors = []; |
-for (var typeId in WebInspector.resourceTypes) { |
-var typeName = WebInspector.resourceTypes[typeId].name(); |
-filterSelectors.push(".network-log-grid.data-grid.filter-" + typeName + " table.data tr.revealed.network-type-" + typeName + ":not(.filtered-out)"); |
-} |
-filterSelectors.push(".network-log-grid.data-grid.filter-all table.data tr.revealed.network-item:not(.filtered-out)"); |
-rules.push(filterSelectors.join(", ") + "{display: table-row;}"); |
- |
style.textContent = rules.join("\n"); |
document.head.appendChild(style); |
}, |
@@ -3047,6 +3004,7 @@ |
} |
WebInspector.NetworkDataGridNode.prototype = { |
+ |
createCells: function() |
{ |
@@ -3061,7 +3019,8 @@ |
this._setCookiesCell = this._createDivInTD("setCookies"); |
this._sizeCell = this._createDivInTD("size"); |
this._timeCell = this._createDivInTD("time"); |
-this._createTimelineCell(); |
+this._timelineCell = this._createDivInTD("timeline"); |
+this._createTimelineBar(this._timelineCell); |
this._nameCell.addEventListener("click", this._onClick.bind(this), false); |
this._nameCell.addEventListener("dblclick", this._openInNewTab.bind(this), false); |
}, |
@@ -3075,9 +3034,7 @@ |
{ |
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; |
+return !this._parentView._typeFilter(this._request); |
}, |
_onClick: function() |
@@ -3124,16 +3081,16 @@ |
return div; |
}, |
-_createTimelineCell: function() |
+ |
+_createTimelineBar: function(cell) |
{ |
-this._graphElement = document.createElement("div"); |
-this._graphElement.className = "network-graph-side"; |
+cell.className = "network-graph-side"; |
this._barAreaElement = document.createElement("div"); |
this._barAreaElement.className = "network-graph-bar-area"; |
this._barAreaElement.request = this._request; |
-this._graphElement.appendChild(this._barAreaElement); |
+cell.appendChild(this._barAreaElement); |
this._barLeftElement = document.createElement("div"); |
this._barLeftElement.className = "network-graph-bar waiting"; |
@@ -3152,20 +3109,13 @@ |
this._labelRightElement.className = "network-graph-label"; |
this._barAreaElement.appendChild(this._labelRightElement); |
-this._graphElement.addEventListener("mouseover", this._refreshLabelPositions.bind(this), false); |
- |
-this._timelineCell = document.createElement("td"); |
-this._timelineCell.className = "timeline-column"; |
-this._element.appendChild(this._timelineCell); |
-this._timelineCell.appendChild(this._graphElement); |
+cell.addEventListener("mouseover", this._refreshLabelPositions.bind(this), false); |
}, |
refreshRequest: function() |
{ |
this._refreshNameCell(); |
- |
-this._methodCell.setTextAndTitle(this._request.requestMethod); |
- |
+this._refreshMethodCell(); |
this._refreshStatusCell(); |
this._refreshDomainCell(); |
this._refreshTypeCell(); |
@@ -3176,9 +3126,10 @@ |
this._refreshTimeCell(); |
if (this._request.cached) |
-this._graphElement.addStyleClass("resource-cached"); |
+this._timelineCell.addStyleClass("resource-cached"); |
this._element.addStyleClass("network-item"); |
+this._element.enableStyleClass("network-error-row", this._request.failed || (this._request.statusCode >= 400)); |
this._updateElementStyleClasses(this._element); |
}, |
@@ -3214,6 +3165,11 @@ |
this._nameCell.title = this._request.url; |
}, |
+_refreshMethodCell: function() |
+{ |
+this._methodCell.setTextAndTitle(this._request.requestMethod); |
+}, |
+ |
_refreshStatusCell: function() |
{ |
this._statusCell.removeChildren(); |
@@ -3224,23 +3180,18 @@ |
this._statusCell.appendChild(document.createTextNode(failText)); |
this._appendSubtitle(this._statusCell, this._request.localizedFailDescription); |
this._statusCell.title = failText + " " + this._request.localizedFailDescription; |
-} else { |
+} else |
this._statusCell.setTextAndTitle(failText); |
-} |
this._statusCell.addStyleClass("network-dim-cell"); |
-this.element.addStyleClass("network-error-row"); |
return; |
} |
this._statusCell.removeStyleClass("network-dim-cell"); |
-this.element.removeStyleClass("network-error-row"); |
if (this._request.statusCode) { |
this._statusCell.appendChild(document.createTextNode("" + this._request.statusCode)); |
this._appendSubtitle(this._statusCell, this._request.statusText); |
this._statusCell.title = this._request.statusCode + " " + this._request.statusText; |
-if (this._request.statusCode >= 400) |
-this.element.addStyleClass("network-error-row"); |
if (this._request.cached) |
this._statusCell.addStyleClass("network-dim-cell"); |
} else { |
@@ -3268,7 +3219,7 @@ |
this._typeCell.setTextAndTitle(this._request.mimeType); |
} else if (this._request.isPingRequest()) { |
this._typeCell.removeStyleClass("network-dim-cell"); |
-this._typeCell.setTextAndTitle(this._request.requestContentType()); |
+this._typeCell.setTextAndTitle(this._request.requestContentType() || ""); |
} else { |
this._typeCell.addStyleClass("network-dim-cell"); |
this._typeCell.setTextAndTitle(WebInspector.UIString("Pending")); |
@@ -3366,7 +3317,7 @@ |
this._percentages = percentages; |
this._barAreaElement.removeStyleClass("hidden"); |
-this._updateElementStyleClasses(this._graphElement); |
+this._updateElementStyleClasses(this._timelineCell); |
this._barLeftElement.style.setProperty("left", percentages.start + "%"); |
this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%"); |
@@ -3416,7 +3367,7 @@ |
const labelBefore = (labelLeftElementOffsetWidth > leftBarWidth); |
const labelAfter = (labelRightElementOffsetWidth > rightBarWidth); |
-const graphElementOffsetWidth = this._graphElement.offsetWidth; |
+const graphElementOffsetWidth = this._timelineCell.offsetWidth; |
if (labelBefore && (graphElementOffsetWidth * (this._percentages.start / 100)) < (labelLeftElementOffsetWidth + 10)) |
var leftHidden = true; |
@@ -3457,6 +3408,18 @@ |
} |
+WebInspector.NetworkLogView._trivialTypeFilter = function(request) |
+{ |
+return true; |
+} |
+ |
+ |
+WebInspector.NetworkLogView._typeFilter = function(allowedTypes, request) |
+{ |
+return request.type.name() in allowedTypes; |
+} |
+ |
+ |
WebInspector.NetworkDataGridNode.NameComparator = function(a, b) |
{ |
var aFileName = a._request.name(); |