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 */ 36 WebInspector.RequestTimingView = function(request) 37 { 38 WebInspector.View.call(this); 39 this.element.addStyleClass("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 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.remove(); 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 84 WebInspector.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 var label = request.connectionReused ? WebInspector.UIString("Blocking") : WebInspector.UIString("Connecting"); 107 addRow(label, "connecting", request.timing.connectStart, request.timing.connectEnd); 108 } 109 110 if (request.timing.sslStart !== -1) 111 addRow(WebInspector.UIString("SSL"), "ssl", request.timing.sslStart, request.timing.sslEnd); 112 113 addRow(WebInspector.UIString("Sending"), "sending", request.timing.sendStart, request.timing.sendEnd); 114 addRow(WebInspector.UIString("Waiting"), "waiting", request.timing.sendEnd, request.timing.receiveHeadersEnd); 115 addRow(WebInspector.UIString("Receiving"), "receiving", (request.responseReceivedTime - request.timing.requestTime) * 1000, (request.endTime - request.timing.requestTime) * 1000); 116 117 const chartWidth = 200; 118 var total = (request.endTime - request.timing.requestTime) * 1000; 119 var scale = chartWidth / total; 120 121 for (var i = 0; i < rows.length; ++i) { 122 var tr = document.createElement("tr"); 123 tableElement.appendChild(tr); 124 125 var td = document.createElement("td"); 126 td.textContent = rows[i].title; 127 tr.appendChild(td); 128 129 td = document.createElement("td"); 130 td.width = chartWidth + "px"; 131 132 var row = document.createElement("div"); 133 row.className = "network-timing-row"; 134 td.appendChild(row); 135 136 var bar = document.createElement("span"); 137 bar.className = "network-timing-bar " + rows[i].className; 138 bar.style.left = scale * rows[i].start + "px"; 139 bar.style.right = scale * (total - rows[i].end) + "px"; 140 bar.style.backgroundColor = rows[i].color; 141 bar.textContent = "\u200B"; // Important for 0-time items to have 0 width. 142 row.appendChild(bar); 143 144 var title = document.createElement("span"); 145 title.className = "network-timing-bar-title"; 146 if (total - rows[i].end < rows[i].start) 147 title.style.right = (scale * (total - rows[i].end) + 3) + "px"; 148 else 149 title.style.left = (scale * rows[i].start + 3) + "px"; 150 title.textContent = Number.secondsToString((rows[i].end - rows[i].start) / 1000); 151 row.appendChild(title); 152 153 tr.appendChild(td); 154 } 155 return tableElement; 156 } 157
