diff options
Diffstat (limited to 'chromium/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js')
-rw-r--r-- | chromium/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js | 186 |
1 files changed, 186 insertions, 0 deletions
diff --git a/chromium/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js b/chromium/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js new file mode 100644 index 00000000000..b2b491ed6f0 --- /dev/null +++ b/chromium/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js @@ -0,0 +1,186 @@ +/* + * Copyright (C) 2010 Google Inc. All rights reserved. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are + * met: + * + * * Redistributions of source code must retain the above copyright + * notice, this list of conditions and the following disclaimer. + * * Redistributions in binary form must reproduce the above + * copyright notice, this list of conditions and the following disclaimer + * in the documentation and/or other materials provided with the + * distribution. + * * Neither the name of Google Inc. nor the names of its + * contributors may be used to endorse or promote products derived from + * this software without specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS + * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT + * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR + * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT + * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, + * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT + * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, + * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY + * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT + * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE + * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + */ + +/** + * @constructor + * @extends {WebInspector.VBox} + * @param {!WebInspector.NetworkRequest} request + */ +WebInspector.RequestTimingView = function(request) +{ + WebInspector.VBox.call(this); + this.element.classList.add("resource-timing-view"); + + this._request = request; +} + +WebInspector.RequestTimingView.prototype = { + wasShown: function() + { + this._request.addEventListener(WebInspector.NetworkRequest.Events.TimingChanged, this._refresh, this); + this._request.addEventListener(WebInspector.NetworkRequest.Events.FinishedLoading, this._refresh, this); + + if (!this._request.timing) { + if (!this._emptyView) { + this._emptyView = new WebInspector.EmptyView(WebInspector.UIString("This request has no detailed timing info.")); + this._emptyView.show(this.element); + this.innerView = this._emptyView; + } + return; + } + + if (this._emptyView) { + this._emptyView.detach(); + delete this._emptyView; + } + + this._refresh(); + }, + + willHide: function() + { + this._request.removeEventListener(WebInspector.NetworkRequest.Events.TimingChanged, this._refresh, this); + this._request.removeEventListener(WebInspector.NetworkRequest.Events.FinishedLoading, this._refresh, this); + }, + + _refresh: function() + { + if (this._tableElement) + this._tableElement.remove(); + + this._tableElement = WebInspector.RequestTimingView.createTimingTable(this._request); + this.element.appendChild(this._tableElement); + }, + + __proto__: WebInspector.VBox.prototype +} + + +/** + * @param {!WebInspector.NetworkRequest} request + * @return {!Element} + */ +WebInspector.RequestTimingView.createTimingTable = function(request) +{ + var tableElement = document.createElement("table"); + tableElement.className = "network-timing-table"; + var rows = []; + + function addRow(title, className, start, end) + { + var row = {}; + row.title = title; + row.className = className; + row.start = start; + row.end = end; + rows.push(row); + } + + function firstPositive(numbers) + { + for (var i = 0; i < numbers.length; ++i) { + if (numbers[i] > 0) + return numbers[i]; + } + return undefined; + } + + var timing = request.timing; + var blocking = firstPositive([timing.dnsStart, timing.connectStart, timing.sendStart]); + var endTime = firstPositive([request.endTime, request.responseReceivedTime, timing.requestTime]); + var total = (endTime - timing.requestTime) * 1000; + + if (blocking > 0) + addRow(WebInspector.UIString("Blocking"), "blocking", 0, blocking); + + if (timing.proxyStart !== -1) + addRow(WebInspector.UIString("Proxy"), "proxy", timing.proxyStart, timing.proxyEnd); + + if (timing.dnsStart !== -1) + addRow(WebInspector.UIString("DNS Lookup"), "dns", timing.dnsStart, timing.dnsEnd); + + if (timing.connectStart !== -1) + addRow(WebInspector.UIString("Connecting"), "connecting", timing.connectStart, timing.connectEnd); + + if (timing.sslStart !== -1) + addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd); + + addRow(WebInspector.UIString("Sending"), "sending", timing.sendStart, timing.sendEnd); + addRow(WebInspector.UIString("Waiting"), "waiting", timing.sendEnd, timing.receiveHeadersEnd); + + if (request.endTime !== -1) + addRow(WebInspector.UIString("Receiving"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total); + + const chartWidth = 200; + var scale = chartWidth / total; + + for (var i = 0; i < rows.length; ++i) { + var tr = document.createElement("tr"); + tableElement.appendChild(tr); + + var td = document.createElement("td"); + td.textContent = rows[i].title; + tr.appendChild(td); + + td = document.createElement("td"); + td.width = chartWidth + "px"; + + var row = document.createElement("div"); + row.className = "network-timing-row"; + td.appendChild(row); + + var bar = document.createElement("span"); + bar.className = "network-timing-bar " + rows[i].className; + bar.style.left = Math.floor(scale * rows[i].start) + "px"; + bar.style.right = Math.floor(scale * (total - rows[i].end)) + "px"; + bar.style.backgroundColor = rows[i].color; + bar.textContent = "\u200B"; // Important for 0-time items to have 0 width. + row.appendChild(bar); + + var title = document.createElement("span"); + title.className = "network-timing-bar-title"; + if (total - rows[i].end < rows[i].start) + title.style.right = (scale * (total - rows[i].end) + 3) + "px"; + else + title.style.left = (scale * rows[i].start + 3) + "px"; + title.textContent = Number.secondsToString((rows[i].end - rows[i].start) / 1000, true); + row.appendChild(title); + + tr.appendChild(td); + } + + if (!request.finished) { + var cell = tableElement.createChild("tr").createChild("td", "caution"); + cell.colSpan = 2; + cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!")); + } + + return tableElement; +} |