1/* 2 * Copyright (C) 2010 Google Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions are 6 * met: 7 * 8 * * Redistributions of source code must retain the above copyright 9 * notice, this list of conditions and the following disclaimer. 10 * * Redistributions in binary form must reproduce the above 11 * copyright notice, this list of conditions and the following disclaimer 12 * in the documentation and/or other materials provided with the 13 * distribution. 14 * * Neither the name of Google Inc. nor the names of its 15 * contributors may be used to endorse or promote products derived from 16 * this software without specific prior written permission. 17 * 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 */ 30 31/** 32 * @constructor 33 * @extends {WebInspector.View} 34 * @param {WebInspector.NetworkRequest} request 35 */ 36WebInspector.RequestTimingView = function(request) 37{ 38 WebInspector.View.call(this); 39 this.element.addStyleClass("resource-timing-view"); 40 41 this._request = request; 42} 43 44WebInspector.RequestTimingView.prototype = { 45 wasShown: function() 46 { 47 this._request.addEventListener(WebInspector.NetworkRequest.Events.TimingChanged, this._refresh, this); 48 49 if (!this._request.timing) { 50 if (!this._emptyView) { 51 this._emptyView = new WebInspector.EmptyView(WebInspector.UIString("This request has no detailed timing info.")); 52 this._emptyView.show(this.element); 53 this.innerView = this._emptyView; 54 } 55 return; 56 } 57 58 if (this._emptyView) { 59 this._emptyView.detach(); 60 delete this._emptyView; 61 } 62 63 this._refresh(); 64 }, 65 66 willHide: function() 67 { 68 this._request.removeEventListener(WebInspector.NetworkRequest.Events.TimingChanged, this._refresh, this); 69 }, 70 71 _refresh: function() 72 { 73 if (this._tableElement) 74 this._tableElement.parentElement.removeChild(this._tableElement); 75 76 this._tableElement = WebInspector.RequestTimingView.createTimingTable(this._request); 77 this.element.appendChild(this._tableElement); 78 }, 79 80 __proto__: WebInspector.View.prototype 81} 82 83 84WebInspector.RequestTimingView.createTimingTable = function(request) 85{ 86 var tableElement = document.createElement("table"); 87 var rows = []; 88 89 function addRow(title, className, start, end) 90 { 91 var row = {}; 92 row.title = title; 93 row.className = className; 94 row.start = start; 95 row.end = end; 96 rows.push(row); 97 } 98 99 if (request.timing.proxyStart !== -1) 100 addRow(WebInspector.UIString("Proxy"), "proxy", request.timing.proxyStart, request.timing.proxyEnd); 101 102 if (request.timing.dnsStart !== -1) 103 addRow(WebInspector.UIString("DNS Lookup"), "dns", request.timing.dnsStart, request.timing.dnsEnd); 104 105 if (request.timing.connectStart !== -1) { 106 if (request.connectionReused) 107 addRow(WebInspector.UIString("Blocking"), "connecting", request.timing.connectStart, request.timing.connectEnd); 108 else { 109 var connectStart = request.timing.connectStart; 110 // Connection includes DNS, subtract it here. 111 if (request.timing.dnsStart !== -1) 112 connectStart += request.timing.dnsEnd - request.timing.dnsStart; 113 addRow(WebInspector.UIString("Connecting"), "connecting", connectStart, request.timing.connectEnd); 114 } 115 } 116 117 if (request.timing.sslStart !== -1) 118 addRow(WebInspector.UIString("SSL"), "ssl", request.timing.sslStart, request.timing.sslEnd); 119 120 var sendStart = request.timing.sendStart; 121 if (request.timing.sslStart !== -1) 122 sendStart += request.timing.sslEnd - request.timing.sslStart; 123 124 addRow(WebInspector.UIString("Sending"), "sending", request.timing.sendStart, request.timing.sendEnd); 125 addRow(WebInspector.UIString("Waiting"), "waiting", request.timing.sendEnd, request.timing.receiveHeadersEnd); 126 addRow(WebInspector.UIString("Receiving"), "receiving", (request.responseReceivedTime - request.timing.requestTime) * 1000, (request.endTime - request.timing.requestTime) * 1000); 127 128 const chartWidth = 200; 129 var total = (request.endTime - request.timing.requestTime) * 1000; 130 var scale = chartWidth / total; 131 132 for (var i = 0; i < rows.length; ++i) { 133 var tr = document.createElement("tr"); 134 tableElement.appendChild(tr); 135 136 var td = document.createElement("td"); 137 td.textContent = rows[i].title; 138 tr.appendChild(td); 139 140 td = document.createElement("td"); 141 td.width = chartWidth + "px"; 142 143 var row = document.createElement("div"); 144 row.className = "network-timing-row"; 145 td.appendChild(row); 146 147 var bar = document.createElement("span"); 148 bar.className = "network-timing-bar " + rows[i].className; 149 bar.style.left = scale * rows[i].start + "px"; 150 bar.style.right = scale * (total - rows[i].end) + "px"; 151 bar.style.backgroundColor = rows[i].color; 152 bar.textContent = "\u200B"; // Important for 0-time items to have 0 width. 153 row.appendChild(bar); 154 155 var title = document.createElement("span"); 156 title.className = "network-timing-bar-title"; 157 if (total - rows[i].end < rows[i].start) 158 title.style.right = (scale * (total - rows[i].end) + 3) + "px"; 159 else 160 title.style.left = (scale * rows[i].start + 3) + "px"; 161 title.textContent = Number.secondsToString((rows[i].end - rows[i].start) / 1000); 162 row.appendChild(title); 163 164 tr.appendChild(td); 165 } 166 return tableElement; 167} 168