this._nodesByRequestId = new StringMap();
/** @type {!Object.<string, boolean>} */
this._staleRequestIds = {};
+ /** @type {number} */
this._mainRequestLoadTime = -1;
+ /** @type {number} */
this._mainRequestDOMContentLoadedTime = -1;
this._matchedRequestCount = 0;
this._highlightedSubstringChanges = [];
WebInspector.NetworkLogView.HTTPSchemas = {"http": true, "https": true, "ws": true, "wss": true};
WebInspector.NetworkLogView._responseHeaderColumns = ["Cache-Control", "Connection", "Content-Encoding", "Content-Length", "ETag", "Keep-Alive", "Last-Modified", "Server", "Vary"];
-WebInspector.NetworkLogView._defaultColumnsVisibility = {
- method: true, status: true, scheme: false, domain: false, remoteAddress: false, type: true, initiator: true, cookies: false, setCookies: false, size: true, time: true,
+WebInspector.NetworkLogView.defaultColumnsVisibility = {
+ method: true, status: true, scheme: false, domain: false, remoteAddress: false, type: true, initiator: true, cookies: false, setCookies: false, size: true, time: true, connectionId: false,
"Cache-Control": false, "Connection": false, "Content-Encoding": false, "Content-Length": false, "ETag": false, "Keep-Alive": false, "Last-Modified": false, "Server": false, "Vary": false
};
WebInspector.NetworkLogView._defaultRefreshDelay = 500;
+/** @enum {string} */
+WebInspector.NetworkLogView.FilterType = {
+ Domain: "Domain",
+ HasResponseHeader: "HasResponseHeader",
+ Method: "Method",
+ MimeType: "MimeType",
+ Scheme: "Scheme",
+ SetCookieDomain: "SetCookieDomain",
+ SetCookieName: "SetCookieName",
+ SetCookieValue: "SetCookieValue",
+ StatusCode: "StatusCode"
+};
+
+/** @type {!Array.<string>} */
+WebInspector.NetworkLogView._searchKeys = Object.values(WebInspector.NetworkLogView.FilterType);
+
/** @type {!Object.<string, string>} */
WebInspector.NetworkLogView._columnTitles = {
"name": WebInspector.UIString("Name"),
"setCookies": WebInspector.UIString("Set-Cookies"),
"size": WebInspector.UIString("Size"),
"time": WebInspector.UIString("Time"),
+ "connectionId": WebInspector.UIString("Connection Id"),
"timeline": WebInspector.UIString("Timeline"),
// Response header columns
{
},
+ /**
+ * @return {boolean}
+ */
+ allowRequestSelection: function()
+ {
+ return this._allowRequestSelection;
+ },
+
_addFilters: function()
{
this._textFilterUI = new WebInspector.TextFilterUI();
_resetSuggestionBuilder: function()
{
- this._suggestionBuilder = new WebInspector.FilterSuggestionBuilder(WebInspector.NetworkPanel._searchKeys);
+ this._suggestionBuilder = new WebInspector.FilterSuggestionBuilder(WebInspector.NetworkLogView._searchKeys);
this._textFilterUI.setSuggestionBuilder(this._suggestionBuilder);
},
this.element.id = "network-container";
this._createSortingFunctions();
+ this._createCalculators();
this._createTable();
this._createTimelineGrid();
this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
// Enable faster hint.
this._popoverHelper.setTimeout(100);
- this._setCalculator(new WebInspector.NetworkTransferTimeCalculator());
-
this.switchViewMode(true);
},
align: WebInspector.DataGrid.Align.Right
});
+ columns.push({
+ id: "connectionId",
+ title: WebInspector.NetworkLogView._columnTitles["connectionId"],
+ sortable: true,
+ weight: 6
+ });
+
var responseHeaderColumns = WebInspector.NetworkLogView._responseHeaderColumns;
for (var i = 0; i < responseHeaderColumns.length; ++i) {
var headerName = responseHeaderColumns[i];
this._sortingFunctions.setCookies = WebInspector.NetworkDataGridNode.ResponseCookiesCountComparator;
this._sortingFunctions.size = WebInspector.NetworkDataGridNode.SizeComparator;
this._sortingFunctions.time = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "duration", false);
+ this._sortingFunctions.connectionId = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "connectionId", false);
this._sortingFunctions.timeline = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "startTime", false);
this._sortingFunctions.startTime = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "startTime", false);
this._sortingFunctions.endTime = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "endTime", false);
this._sortingFunctions.responseTime = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "responseReceivedTime", false);
this._sortingFunctions.duration = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "duration", true);
this._sortingFunctions.latency = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "latency", true);
+ },
- var timeCalculator = new WebInspector.NetworkTransferTimeCalculator();
- var durationCalculator = new WebInspector.NetworkTransferDurationCalculator();
+ _createCalculators: function()
+ {
+ /** @type {!WebInspector.NetworkTransferTimeCalculator} */
+ this._timeCalculator = new WebInspector.NetworkTransferTimeCalculator();
+ /** @type {!WebInspector.NetworkTransferDurationCalculator} */
+ this._durationCalculator = new WebInspector.NetworkTransferDurationCalculator();
+ /** @type {!Object.<string, !WebInspector.NetworkTimeCalculator>} */
this._calculators = {};
- this._calculators.timeline = timeCalculator;
- this._calculators.startTime = timeCalculator;
- this._calculators.endTime = timeCalculator;
- this._calculators.responseTime = timeCalculator;
- this._calculators.duration = durationCalculator;
- this._calculators.latency = durationCalculator;
+ this._calculators.timeline = this._timeCalculator;
+ this._calculators.startTime = this._timeCalculator;
+ this._calculators.endTime = this._timeCalculator;
+ this._calculators.responseTime = this._timeCalculator;
+ this._calculators.duration = this._durationCalculator;
+ this._calculators.latency = this._durationCalculator;
+
+ this._calculator = this._timeCalculator;
},
_sortItems: function()
var selectedOption = this._timelineSortSelector[selectedIndex];
var value = selectedOption.value;
+ this._setCalculator(this._calculators[value]);
var sortingFunction = this._sortingFunctions[value];
this._dataGrid.sortNodes(sortingFunction);
this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
- var calculator = this._calculators[value];
- this._setCalculator(calculator);
- if (calculator.startAtZero)
- this._timelineGrid.hideEventDividers();
- else
- this._timelineGrid.showEventDividers();
this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending);
},
_updateSummaryBar: function()
{
- var requestsNumber = this._nodesByRequestId.size();
+ var requestsNumber = this._nodesByRequestId.size;
if (!requestsNumber) {
if (this._summaryBarElement._isDisplayingWarning)
this._summaryBarElement.removeChildren();
this._summaryBarElement.createChild("div", "warning-icon-small");
var text = WebInspector.UIString("No requests captured. Reload the page to see detailed information on the network activity.");
- this._summaryBarElement.appendChild(document.createTextNode(text));
+ this._summaryBarElement.createTextChild(text);
this._summaryBarElement.title = text;
return;
}
var maxTime = -1;
var nodes = this._nodesByRequestId.values();
for (var i = 0; i < nodes.length; ++i) {
- var request = nodes[i]._request;
+ var request = nodes[i].request();
var requestTransferSize = request.transferSize;
transferSize += requestTransferSize;
if (!nodes[i]._isFilteredOut) {
_updateDividersIfNeeded: function()
{
- if (!this._dataGrid)
- return;
var timelineOffset = this._dataGrid.columnOffset("timeline");
// Position timline grid location.
if (timelineOffset)
if (!proceed)
return;
- if (calculator.startAtZero || !calculator.computePercentageFromEventTime) {
+ if (calculator.startAtZero) {
// If our current sorting method starts at zero, that means it shows all
// requests starting at the same point, and so onLoad event and DOMContent
// event lines really wouldn't make much sense here, so don't render them.
- // Additionally, if the calculator doesn't have the computePercentageFromEventTime
- // function defined, we are probably sorting by size, and event times aren't relevant
- // in this case.
return;
}
},
/**
- * @return {!WebInspector.NetworkBaseCalculator}
+ * @return {!WebInspector.NetworkTimeCalculator}
*/
calculator: function()
{
},
/**
- * @param {!WebInspector.NetworkBaseCalculator} x
+ * @param {!WebInspector.NetworkTimeCalculator} x
*/
_setCalculator: function(x)
{
this._calculator = x;
this._calculator.reset();
+ if (this._calculator.startAtZero)
+ this._timelineGrid.hideEventDividers();
+ else
+ this._timelineGrid.showEventDividers();
+
this._invalidateAllItems();
this.refresh();
},
if (!this._recordButton.toggled)
return;
- this._mainRequestLoadTime = event.data || -1;
+ var data = /** @type {number} */ (event.data);
+ this._mainRequestLoadTime = data || -1;
// Schedule refresh to update boundaries and draw the new line.
this._scheduleRefresh();
},
{
if (!this._recordButton.toggled)
return;
- this._mainRequestDOMContentLoadedTime = event.data || -1;
+ var data = /** @type {number} */ (event.data);
+ this._mainRequestDOMContentLoadedTime = data || -1;
// Schedule refresh to update boundaries and draw the new line.
this._scheduleRefresh();
},
for (var i = 0; i < nodesToInsert.length; ++i) {
var node = nodesToInsert[i];
- var request = node._request;
+ var request = node.request();
node.refresh();
dataGrid.insertChild(node);
node._isMatchingSearchQuery = this._matchRequest(request);
this._updateDividersIfNeeded();
var nodes = this._nodesByRequestId.values();
for (var i = 0; i < nodes.length; ++i)
- nodes[i].refreshGraph(calculator);
+ nodes[i].refreshGraph();
}
this._staleRequestIds = {};
var nodes = this._nodesByRequestId.values();
for (var i = 0; i < nodes.length; ++i)
- nodes[i]._dispose();
+ nodes[i].dispose();
this._nodesByRequestId.clear();
this._staleRequestIds = {};
// request and we need to update _nodesByRequestId and search results.
var originalRequestNode = this._nodesByRequestId.get(request.requestId);
if (originalRequestNode)
- this._nodesByRequestId.put(originalRequestNode._request.requestId, originalRequestNode);
- this._nodesByRequestId.put(request.requestId, node);
+ this._nodesByRequestId.set(originalRequestNode.request().requestId, originalRequestNode);
+ this._nodesByRequestId.set(request.requestId, node);
// Pull all the redirects of the main request upon commit load.
if (request.redirects) {
if (!this._nodesByRequestId.get(request.requestId))
return;
- this._suggestionBuilder.addItem(WebInspector.NetworkPanel.FilterType.Domain, request.domain);
- this._suggestionBuilder.addItem(WebInspector.NetworkPanel.FilterType.Method, request.requestMethod);
- this._suggestionBuilder.addItem(WebInspector.NetworkPanel.FilterType.MimeType, request.mimeType);
- this._suggestionBuilder.addItem(WebInspector.NetworkPanel.FilterType.StatusCode, "" + request.statusCode);
+ this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.Domain, request.domain);
+ this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.Method, request.requestMethod);
+ this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.MimeType, request.mimeType);
+ this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.Scheme, "" + request.scheme);
+ this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.StatusCode, "" + request.statusCode);
var responseHeaders = request.responseHeaders;
for (var i = 0, l = responseHeaders.length; i < l; ++i)
- this._suggestionBuilder.addItem(WebInspector.NetworkPanel.FilterType.HasResponseHeader, responseHeaders[i].name);
+ this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.HasResponseHeader, responseHeaders[i].name);
var cookies = request.responseCookies;
for (var i = 0, l = cookies ? cookies.length : 0; i < l; ++i) {
var cookie = cookies[i];
- this._suggestionBuilder.addItem(WebInspector.NetworkPanel.FilterType.SetCookieDomain, cookie.domain());
- this._suggestionBuilder.addItem(WebInspector.NetworkPanel.FilterType.SetCookieName, cookie.name());
- this._suggestionBuilder.addItem(WebInspector.NetworkPanel.FilterType.SetCookieValue, cookie.value());
+ this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.SetCookieDomain, cookie.domain());
+ this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.SetCookieName, cookie.name());
+ this._suggestionBuilder.addItem(WebInspector.NetworkLogView.FilterType.SetCookieValue, cookie.value());
}
this._staleRequestIds[request.requestId] = true;
if (anchor && anchor.parentElement.request && anchor.parentElement.request.timing)
return anchor;
anchor = element.enclosingNodeOrSelfWithClass("network-script-initiated");
- if (anchor && anchor.request && anchor.request.initiator)
- return anchor;
+ if (anchor && anchor.request) {
+ var request = /** @type {!WebInspector.NetworkRequest} */ (anchor.request);
+ var initiator = anchor.request.initiator();
+ if (initiator && (initiator.stackTrace || initiator.asyncStackTrace))
+ return anchor;
+ }
},
/**
}
}
- appendStackTrace.call(this, request.initiator.stackTrace);
+ // Initiator is not null, checked in _getPopoverAnchor.
+ var initiator = /** @type {!NetworkAgent.Initiator} */ (request.initiator());
+ if (initiator.stackTrace)
+ appendStackTrace.call(this, initiator.stackTrace);
- var asyncStackTrace = request.initiator.asyncStackTrace;
+ var asyncStackTrace = initiator.asyncStackTrace;
while (asyncStackTrace) {
var callFrames = asyncStackTrace.callFrames;
if (!callFrames || !callFrames.length)
}
var gridNode = this._dataGrid.dataGridNodeFromNode(event.target);
- var request = gridNode && gridNode._request;
+ var request = gridNode && gridNode.request();
/**
* @param {string} url
_harRequests: function()
{
- var requests = this._nodesByRequestId.values().map(function(node) { return node._request; });
+ var requests = this._nodesByRequestId.values().map(function(node) { return node.request(); });
var httpRequests = requests.filter(WebInspector.NetworkLogView.HTTPRequestsFilter);
httpRequests = httpRequests.filter(WebInspector.NetworkLogView.FinishedRequestsFilter);
return httpRequests.filter(WebInspector.NetworkLogView.NonDevToolsRequestsFilter);
_exportAll: function()
{
- var filename = WebInspector.resourceTreeModel.inspectedPageDomain() + ".har";
+ var filename = WebInspector.targetManager.inspectedPageDomain() + ".har";
var stream = new WebInspector.FileOutputStream();
stream.open(filename, openCallback.bind(this));
return;
}
- var request = node._request;
+ var request = node.request();
var regExp = this._searchRegExp;
var nameMatched = request.name().match(regExp);
var pathMatched = request.path().match(regExp);
this._toggleLargerRequests();
if (reveal)
WebInspector.Revealer.reveal(request);
- var highlightedSubstringChanges = node._highlightMatchedSubstring(regExp);
+ var highlightedSubstringChanges = node.highlightMatchedSubstring(regExp);
this._highlightedSubstringChanges.push(highlightedSubstringChanges);
this._currentMatchedRequestNode = node;
/** @type {!Array.<!WebInspector.NetworkDataGridNode>} */
var nodes = this._dataGrid.rootNode().children;
for (var i = 0; i < nodes.length; ++i)
- nodes[i]._isMatchingSearchQuery = this._matchRequest(nodes[i]._request);
+ nodes[i]._isMatchingSearchQuery = this._matchRequest(nodes[i].request());
var newMatchedRequestIndex = this._updateMatchCountAndFindMatchIndex(currentMatchedRequestNode);
if (!newMatchedRequestIndex && jumpBackwards)
newMatchedRequestIndex = this._matchedRequestCount - 1;
*/
_applyFilter: function(node)
{
- var request = node._request;
+ var request = node.request();
if (!this._resourceTypeFilterUI.accept(request.type.name()))
return false;
if (this._dataURLFilterUI.checked() && request.parsedURL.isDataURL())
var parsedQuery = this._suggestionBuilder.parseQuery(query);
this._filters = parsedQuery.text.map(this._createTextFilter);
for (var key in parsedQuery.filters) {
- var filterType = /** @type {!WebInspector.NetworkPanel.FilterType} */ (key);
+ var filterType = /** @type {!WebInspector.NetworkLogView.FilterType} */ (key);
this._filters.push(this._createFilter(filterType, parsedQuery.filters[key]));
}
},
},
/**
- * @param {!WebInspector.NetworkPanel.FilterType} type
+ * @param {!WebInspector.NetworkLogView.FilterType} type
* @param {string} value
* @return {!WebInspector.NetworkLogView.Filter}
*/
_createFilter: function(type, value) {
switch (type) {
- case WebInspector.NetworkPanel.FilterType.Domain:
+ case WebInspector.NetworkLogView.FilterType.Domain:
return WebInspector.NetworkLogView._requestDomainFilter.bind(null, value);
- case WebInspector.NetworkPanel.FilterType.HasResponseHeader:
+ case WebInspector.NetworkLogView.FilterType.HasResponseHeader:
return WebInspector.NetworkLogView._requestResponseHeaderFilter.bind(null, value);
- case WebInspector.NetworkPanel.FilterType.Method:
+ case WebInspector.NetworkLogView.FilterType.Method:
return WebInspector.NetworkLogView._requestMethodFilter.bind(null, value);
- case WebInspector.NetworkPanel.FilterType.MimeType:
+ case WebInspector.NetworkLogView.FilterType.MimeType:
return WebInspector.NetworkLogView._requestMimeTypeFilter.bind(null, value);
- case WebInspector.NetworkPanel.FilterType.SetCookieDomain:
+ case WebInspector.NetworkLogView.FilterType.Scheme:
+ return WebInspector.NetworkLogView._requestSchemeFilter.bind(null, value);
+
+ case WebInspector.NetworkLogView.FilterType.SetCookieDomain:
return WebInspector.NetworkLogView._requestSetCookieDomainFilter.bind(null, value);
- case WebInspector.NetworkPanel.FilterType.SetCookieName:
+ case WebInspector.NetworkLogView.FilterType.SetCookieName:
return WebInspector.NetworkLogView._requestSetCookieNameFilter.bind(null, value);
- case WebInspector.NetworkPanel.FilterType.SetCookieValue:
+ case WebInspector.NetworkLogView.FilterType.SetCookieValue:
return WebInspector.NetworkLogView._requestSetCookieValueFilter.bind(null, value);
- case WebInspector.NetworkPanel.FilterType.StatusCode:
+ case WebInspector.NetworkLogView.FilterType.StatusCode:
return WebInspector.NetworkLogView._statusCodeFilter.bind(null, value);
}
return this._createTextFilter(type + ":" + value);
* @param {!WebInspector.NetworkRequest} request
* @return {boolean}
*/
+WebInspector.NetworkLogView._requestSchemeFilter = function(value, request)
+{
+ return request.scheme === value;
+}
+
+/**
+ * @param {string} value
+ * @param {!WebInspector.NetworkRequest} request
+ * @return {boolean}
+ */
WebInspector.NetworkLogView._requestSetCookieDomainFilter = function(value, request)
{
var cookies = request.responseCookies;
this._searchableView = new WebInspector.SearchableView(this);
this._searchableView.show(this.element);
- this._contentsElement = this._searchableView.element;
+ var contentsElement = this._searchableView.element;
this._splitView = new WebInspector.SplitView(true, false, "networkPanelSplitViewState");
- this._splitView.show(this._contentsElement);
+ this._splitView.show(contentsElement);
this._splitView.hideMain();
- var defaultColumnsVisibility = WebInspector.NetworkLogView._defaultColumnsVisibility;
+ var defaultColumnsVisibility = WebInspector.NetworkLogView.defaultColumnsVisibility;
var networkLogColumnsVisibilitySetting = WebInspector.settings.createSetting("networkLogColumnsVisibility", defaultColumnsVisibility);
var savedColumnsVisibility = networkLogColumnsVisibilitySetting.get();
var columnsVisibility = {};
columnsVisibility[columnId] = savedColumnsVisibility.hasOwnProperty(columnId) ? savedColumnsVisibility[columnId] : defaultColumnsVisibility[columnId];
networkLogColumnsVisibilitySetting.set(columnsVisibility);
+ /** @type {!WebInspector.NetworkLogView} */
this._networkLogView = new WebInspector.NetworkLogView(this._filterBar, networkLogColumnsVisibilitySetting);
this._networkLogView.show(this._splitView.sidebarElement());
WebInspector.GoToLineDialog.install(this, sourceFrameGetter.bind(this));
}
-/** @enum {string} */
-WebInspector.NetworkPanel.FilterType = {
- Domain: "Domain",
- HasResponseHeader: "HasResponseHeader",
- Method: "Method",
- MimeType: "MimeType",
- SetCookieDomain: "SetCookieDomain",
- SetCookieName: "SetCookieName",
- SetCookieValue: "SetCookieValue",
- StatusCode: "StatusCode"
-};
-
-/** @type {!Array.<string>} */
-WebInspector.NetworkPanel._searchKeys = Object.values(WebInspector.NetworkPanel.FilterType);
-
WebInspector.NetworkPanel.prototype = {
/**
* @param {!WebInspector.Event} event
return this._searchableView;
},
- // FIXME: only used by the layout tests, should not be exposed.
- _reset: function()
- {
- this._networkLogView._reset();
- },
-
/**
* @param {!KeyboardEvent} event
*/
* @constructor
* @implements {WebInspector.TimelineGrid.Calculator}
*/
-WebInspector.NetworkBaseCalculator = function()
+WebInspector.NetworkTimeCalculator = function(startAtZero)
{
+ this.startAtZero = startAtZero;
}
-WebInspector.NetworkBaseCalculator.prototype = {
+/** @type {!WebInspector.UIStringFormat} */
+WebInspector.NetworkTimeCalculator._latencyDownloadTotalFormat = new WebInspector.UIStringFormat("%s latency, %s download (%s total)");
+
+/** @type {!WebInspector.UIStringFormat} */
+WebInspector.NetworkTimeCalculator._latencyFormat = new WebInspector.UIStringFormat("%s latency");
+
+/** @type {!WebInspector.UIStringFormat} */
+WebInspector.NetworkTimeCalculator._downloadFormat = new WebInspector.UIStringFormat("%s download");
+
+/** @type {!WebInspector.UIStringFormat} */
+WebInspector.NetworkTimeCalculator._fromServiceWorkerFormat = new WebInspector.UIStringFormat("%s (from ServiceWorker)");
+
+/** @type {!WebInspector.UIStringFormat} */
+WebInspector.NetworkTimeCalculator._fromCacheFormat = new WebInspector.UIStringFormat("%s (from cache)");
+
+WebInspector.NetworkTimeCalculator.prototype = {
/**
- * @param {number} time
+ * @override
* @return {number}
*/
- computePosition: function(time)
+ paddingLeft: function()
{
- return (time - this._minimumBoundary) / this.boundarySpan() * this._workingArea;
+ return 0;
},
/**
- * @return {!{start: number, middle: number, end: number}}
+ * @override
+ * @param {number} time
+ * @return {number}
*/
- computeBarGraphPercentages: function(item)
+ computePosition: function(time)
{
- return {start: 0, middle: 0, end: (this._value(item) / this.boundarySpan()) * 100};
+ return (time - this._minimumBoundary) / this.boundarySpan() * this._workingArea;
},
/**
- * @return {!{left: string, right: string, tooltip: string}}
+ * @override
+ * @param {number} value
+ * @param {number=} precision
+ * @return {string}
*/
- computeBarGraphLabels: function(item)
+ formatTime: function(value, precision)
{
- const label = this.formatTime(this._value(item));
- return {left: label, right: label, tooltip: label};
+ return Number.secondsToString(value);
},
/**
+ * @override
* @return {number}
*/
- boundarySpan: function()
+ minimumBoundary: function()
{
- return this._maximumBoundary - this._minimumBoundary;
+ return this._minimumBoundary;
},
/**
- * @return {boolean}
+ * @override
+ * @return {number}
*/
- updateBoundaries: function(item)
- {
- this._minimumBoundary = 0;
-
- var value = this._value(item);
- if (typeof this._maximumBoundary === "undefined" || value > this._maximumBoundary) {
- this._maximumBoundary = value;
- return true;
- }
- return false;
- },
-
- reset: function()
+ zeroTime: function()
{
- delete this._minimumBoundary;
- delete this._maximumBoundary;
+ return this._minimumBoundary;
},
/**
+ * @override
* @return {number}
*/
maximumBoundary: function()
},
/**
+ * @override
* @return {number}
*/
- minimumBoundary: function()
+ boundarySpan: function()
{
- return this._minimumBoundary;
+ return this._maximumBoundary - this._minimumBoundary;
},
- /**
- * @return {number}
- */
- zeroTime: function()
+ reset: function()
{
- return this._minimumBoundary;
+ delete this._minimumBoundary;
+ delete this._maximumBoundary;
},
/**
},
/**
- * @param {number} value
- * @param {number=} precision
- * @return {string}
- */
- formatTime: function(value, precision)
- {
- return value.toString();
- },
-
- /**
* @param {number} clientWidth
*/
setDisplayWindow: function(clientWidth)
},
/**
- * @return {number}
- */
- paddingLeft: function()
- {
- return 0;
- }
-}
-
-/**
- * @constructor
- * @extends {WebInspector.NetworkBaseCalculator}
- */
-WebInspector.NetworkTimeCalculator = function(startAtZero)
-{
- WebInspector.NetworkBaseCalculator.call(this);
- this.startAtZero = startAtZero;
-}
-
-WebInspector.NetworkTimeCalculator.prototype = {
- /**
* @param {!WebInspector.NetworkRequest} request
* @return {!{start: number, middle: number, end: number}}
*/
},
/**
+ * @param {number} eventTime
* @return {number}
*/
computePercentageFromEventTime: function(eventTime)
},
/**
+ * @param {number} eventTime
* @return {boolean}
*/
updateBoundariesForEventTime: function(eventTime)
},
/**
+ * @param {!WebInspector.NetworkRequest} request
* @return {!{left: string, right: string, tooltip: (string|undefined)}}
*/
computeBarGraphLabels: function(request)
if (hasLatency && rightLabel) {
var total = Number.secondsToString(request.duration);
- var tooltip = WebInspector.UIString("%s latency, %s download (%s total)", leftLabel, rightLabel, total);
+ var tooltip = WebInspector.NetworkTimeCalculator._latencyDownloadTotalFormat.format(leftLabel, rightLabel, total);
} else if (hasLatency)
- var tooltip = WebInspector.UIString("%s latency", leftLabel);
+ var tooltip = WebInspector.NetworkTimeCalculator._latencyFormat.format(leftLabel);
else if (rightLabel)
- var tooltip = WebInspector.UIString("%s download", rightLabel);
+ var tooltip = WebInspector.NetworkTimeCalculator._downloadFormat.format(rightLabel);
- if (request.cached)
- tooltip = WebInspector.UIString("%s (from cache)", tooltip);
+ if (request.fetchedViaServiceWorker)
+ tooltip = WebInspector.NetworkTimeCalculator._fromServiceWorkerFormat.format(tooltip);
+ else if (request.cached)
+ tooltip = WebInspector.NetworkTimeCalculator._fromCacheFormat.format(tooltip);
return {left: leftLabel, right: rightLabel, tooltip: tooltip};
},
/**
+ * @param {!WebInspector.NetworkRequest} request
* @return {boolean}
*/
updateBoundaries: function(request)
},
/**
- * @return {string}
- */
- formatTime: function(value)
- {
- return Number.secondsToString(value);
- },
-
- /**
* @param {!WebInspector.NetworkRequest} request
+ * @return {number}
*/
_lowerBound: function(request)
{
/**
* @param {!WebInspector.NetworkRequest} request
+ * @return {number}
*/
_upperBound: function(request)
{
return 0;
- },
-
- __proto__: WebInspector.NetworkBaseCalculator.prototype
+ }
}
/**
WebInspector.NetworkTransferTimeCalculator.prototype = {
/**
+ * @override
* @param {number} value
+ * @param {number=} precision
* @return {string}
*/
- formatTime: function(value)
+ formatTime: function(value, precision)
{
return Number.secondsToString(value - this.zeroTime());
},
/**
+ * @override
* @param {!WebInspector.NetworkRequest} request
+ * @return {number}
*/
_lowerBound: function(request)
{
},
/**
+ * @override
* @param {!WebInspector.NetworkRequest} request
+ * @return {number}
*/
_upperBound: function(request)
{
WebInspector.NetworkTransferDurationCalculator.prototype = {
/**
+ * @override
* @param {number} value
+ * @param {number=} precision
* @return {string}
*/
- formatTime: function(value)
+ formatTime: function(value, precision)
{
return Number.secondsToString(value);
},
/**
+ * @override
* @param {!WebInspector.NetworkRequest} request
+ * @return {number}
*/
_upperBound: function(request)
{
this._linkifier = new WebInspector.Linkifier();
this._isFilteredOut = true;
this._isMatchingSearchQuery = false;
+ this._staleGraph = true;
}
WebInspector.NetworkDataGridNode.prototype = {
/**
+ * @return {!WebInspector.NetworkRequest}
+ */
+ request: function()
+ {
+ return this._request;
+ },
+
+ /**
* @override
* @return {number}
*/
this._element.classList.toggle("network-error-row", this._isFailed());
WebInspector.SortableDataGridNode.prototype.createCells.call(this);
- this.refreshGraph(this._parentView.calculator());
+ this._updateGraph();
},
/**
case "remoteAddress": cell.setTextAndTitle(this._request.remoteAddress()); break;
case "cookies": cell.setTextAndTitle(this._arrayLength(this._request.requestCookies)); break;
case "setCookies": cell.setTextAndTitle(this._arrayLength(this._request.responseCookies)); break;
- case "type": this._renderTypeCell(cell); break;
+ case "connectionId": cell.setTextAndTitle(this._request.connectionId); break;
+ case "type": cell.setTextAndTitle(this._request.mimeType || this._request.requestContentType() || ""); break;
case "initiator": this._renderInitiatorCell(cell); break;
case "size": this._renderSizeCell(cell); break;
case "time": this._renderTimeCell(cell); break;
return array ? "" + array.length : "";
},
+ /**
+ * @override
+ * @protected
+ */
+ willAttach: function()
+ {
+ if (this._staleGraph)
+ this._updateGraph();
+ },
+
wasDetached: function()
{
if (this._linkifiedInitiatorAnchor)
this._linkifiedInitiatorAnchor.remove();
},
- _dispose: function()
+ dispose: function()
{
this._linkifier.reset();
},
_onClick: function()
{
- if (!this._parentView._allowRequestSelection)
+ if (!this._parentView.allowRequestSelection())
this.select();
},
/**
* @param {!RegExp=} regexp
+ * @return {!Array.<!Object>}
*/
- _highlightMatchedSubstring: function(regexp)
+ highlightMatchedSubstring: function(regexp)
{
// Ensure element is created.
this.element();
get selectable()
{
- return this._parentView._allowRequestSelection;
+ return this._parentView.allowRequestSelection();
},
/**
*/
_isFailed: function()
{
- return !!this._request.failed || (this._request.statusCode >= 400);
+ return (this._request.failed && !this._request.statusCode) || (this._request.statusCode >= 400);
},
/**
iconElement.classList.add(this._request.type.name());
cell.appendChild(iconElement);
- cell.appendChild(document.createTextNode(this._request.name()));
+ cell.createTextChild(this._request.name());
this._appendSubtitle(cell, this._request.path());
cell.title = this._request.url;
},
if (this._request.failed && !this._request.canceled) {
var failText = WebInspector.UIString("(failed)");
if (this._request.localizedFailDescription) {
- cell.appendChild(document.createTextNode(failText));
+ cell.createTextChild(failText);
this._appendSubtitle(cell, this._request.localizedFailDescription);
cell.title = failText + " " + this._request.localizedFailDescription;
} else
cell.setTextAndTitle(failText);
} else if (this._request.statusCode) {
- cell.appendChild(document.createTextNode("" + this._request.statusCode));
+ cell.createTextChild("" + this._request.statusCode);
this._appendSubtitle(cell, this._request.statusText);
cell.title = this._request.statusCode + " " + this._request.statusText;
} else if (this._request.parsedURL.isDataURL()) {
cell.setTextAndTitle(WebInspector.UIString("(data)"));
- } else if (this._request.isPingRequest()) {
- cell.setTextAndTitle(WebInspector.UIString("(ping)"));
} else if (this._request.canceled) {
cell.setTextAndTitle(WebInspector.UIString("(canceled)"));
} else if (this._request.finished) {
/**
* @param {!Element} cell
*/
- _renderTypeCell: function(cell)
- {
- if (this._request.mimeType) {
- cell.setTextAndTitle(this._request.mimeType);
- } else {
- cell.classList.toggle("network-dim-cell", !this._request.isPingRequest());
- cell.setTextAndTitle(this._request.requestContentType() || "");
- }
- },
-
- /**
- * @param {!Element} cell
- */
_renderInitiatorCell: function(cell)
{
var request = this._request;
*/
_renderSizeCell: function(cell)
{
- if (this._request.cached) {
+ if (this._request.fetchedViaServiceWorker) {
+ cell.setTextAndTitle(WebInspector.UIString("(from ServiceWorker)"));
+ cell.classList.add("network-dim-cell");
+ } else if (this._request.cached) {
cell.setTextAndTitle(WebInspector.UIString("(from cache)"));
cell.classList.add("network-dim-cell");
} else {
cellElement.appendChild(subtitleElement);
},
- /**
- * @param {!WebInspector.NetworkBaseCalculator} calculator
- */
- refreshGraph: function(calculator)
+ refreshGraph: function()
{
if (!this._timelineCell)
return;
+ this._staleGraph = true;
+ if (this.attached())
+ this.dataGrid.scheduleUpdate();
+ },
+ _updateGraph: function()
+ {
+ this._staleGraph = false;
+ if (!this._timelineCell)
+ return;
+
+ var calculator = this._parentView.calculator();
var percentages = calculator.computeBarGraphPercentages(this._request);
this._percentages = percentages;
this._barAreaElement.classList.remove("hidden");
this._barLeftElement.style.setProperty("left", percentages.start + "%");
- this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
+ this._barLeftElement.style.setProperty("right", (100 - percentages.middle) + "%");
- this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
this._barRightElement.style.setProperty("left", percentages.middle + "%");
+ this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
var labels = calculator.computeBarGraphLabels(this._request);
this._labelLeftElement.textContent = labels.left;