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.VBox} 34 * @param {!WebInspector.NetworkRequest} request 35 */ 36 WebInspector.RequestTimingView = function(request) 37 { 38 WebInspector.VBox.call(this); 39 this.element.classList.add("resource-timing-view"); 40 41 this._request = request; 42 } 43 44 WebInspector.RequestTimingView.prototype = { 45 wasShown: function() 46 { 47 this._request.addEventListener(WebInspector.NetworkRequest.Events.TimingChanged, this._refresh, this); 48 this._request.addEventListener(WebInspector.NetworkRequest.Events.FinishedLoading, this._refresh, this); 49 50 if (!this._request.timing) { 51 if (!this._emptyView) { 52 this._emptyView = new WebInspector.EmptyView(WebInspector.UIString("This request has no detailed timing info.")); 53 this._emptyView.show(this.element); 54 this.innerView = this._emptyView; 55 } 56 return; 57 } 58 59 if (this._emptyView) { 60 this._emptyView.detach(); 61 delete this._emptyView; 62 } 63 64 this._refresh(); 65 }, 66 67 willHide: function() 68 { 69 this._request.removeEventListener(WebInspector.NetworkRequest.Events.TimingChanged, this._refresh, this); 70 this._request.removeEventListener(WebInspector.NetworkRequest.Events.FinishedLoading, this._refresh, this); 71 }, 72 73 _refresh: function() 74 { 75 if (this._tableElement) 76 this._tableElement.remove(); 77 78 this._tableElement = WebInspector.RequestTimingView.createTimingTable(this._request); 79 this.element.appendChild(this._tableElement); 80 }, 81 82 __proto__: WebInspector.VBox.prototype 83 } 84 85 86 /** 87 * @param {!WebInspector.NetworkRequest} request 88 * @return {!Element} 89 */ 90 WebInspector.RequestTimingView.createTimingTable = function(request) 91 { 92 var tableElement = document.createElement("table"); 93 tableElement.className = "network-timing-table"; 94 var rows = []; 95 96 function addRow(title, className, start, end) 97 { 98 var row = {}; 99 row.title = title; 100 row.className = className; 101 row.start = start; 102 row.end = end; 103 rows.push(row); 104 } 105 106 function firstPositive(numbers) 107 { 108 for (var i = 0; i < numbers.length; ++i) { 109 if (numbers[i] > 0) 110 return numbers[i]; 111 } 112 return undefined; 113 } 114 115 var timing = request.timing; 116 var blocking = firstPositive([timing.dnsStart, timing.connectStart, timing.sendStart]); 117 var endTime = firstPositive([request.endTime, request.responseReceivedTime, timing.requestTime]); 118 var total = (endTime - timing.requestTime) * 1000; 119 120 if (blocking > 0) 121 addRow(WebInspector.UIString("Blocking"), "blocking", 0, blocking); 122 123 if (timing.proxyStart !== -1) 124 addRow(WebInspector.UIString("Proxy"), "proxy", timing.proxyStart, timing.proxyEnd); 125 126 if (timing.dnsStart !== -1) 127 addRow(WebInspector.UIString("DNS Lookup"), "dns", timing.dnsStart, timing.dnsEnd); 128 129 if (timing.connectStart !== -1) 130 addRow(WebInspector.UIString("Connecting"), "connecting", timing.connectStart, timing.connectEnd); 131 132 if (timing.sslStart !== -1) 133 addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd); 134 135 addRow(WebInspector.UIString("Sending"), "sending", timing.sendStart, timing.sendEnd); 136 addRow(WebInspector.UIString("Waiting"), "waiting", timing.sendEnd, timing.receiveHeadersEnd); 137 138 if (request.endTime !== -1) 139 addRow(WebInspector.UIString("Receiving"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total); 140 141 const chartWidth = 200; 142 var scale = chartWidth / total; 143 144 for (var i = 0; i < rows.length; ++i) { 145 var tr = document.createElement("tr"); 146 tableElement.appendChild(tr); 147 148 var td = document.createElement("td"); 149 td.textContent = rows[i].title; 150 tr.appendChild(td); 151 152 td = document.createElement("td"); 153 td.width = chartWidth + "px"; 154 155 var row = document.createElement("div"); 156 row.className = "network-timing-row"; 157 td.appendChild(row); 158 159 var bar = document.createElement("span"); 160 bar.className = "network-timing-bar " + rows[i].className; 161 bar.style.left = Math.floor(scale * rows[i].start) + "px"; 162 bar.style.right = Math.floor(scale * (total - rows[i].end)) + "px"; 163 bar.style.backgroundColor = rows[i].color; 164 bar.textContent = "\u200B"; // Important for 0-time items to have 0 width. 165 row.appendChild(bar); 166 167 var title = document.createElement("span"); 168 title.className = "network-timing-bar-title"; 169 if (total - rows[i].end < rows[i].start) 170 title.style.right = (scale * (total - rows[i].end) + 3) + "px"; 171 else 172 title.style.left = (scale * rows[i].start + 3) + "px"; 173 title.textContent = Number.secondsToString((rows[i].end - rows[i].start) / 1000, true); 174 row.appendChild(title); 175 176 tr.appendChild(td); 177 } 178 179 if (!request.finished) { 180 var cell = tableElement.createChild("tr").createChild("td", "caution"); 181 cell.colSpan = 2; 182 cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!")); 183 } 184 185 return tableElement; 186 } 187