OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2010 Google Inc. All rights reserved. | 2 * Copyright (C) 2010 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
66 | 66 |
67 this._tableElement = WebInspector.RequestTimingView.createTimingTable(th
is._request, this._calculator.minimumBoundary()); | 67 this._tableElement = WebInspector.RequestTimingView.createTimingTable(th
is._request, this._calculator.minimumBoundary()); |
68 this.element.appendChild(this._tableElement); | 68 this.element.appendChild(this._tableElement); |
69 }, | 69 }, |
70 | 70 |
71 __proto__: WebInspector.VBox.prototype | 71 __proto__: WebInspector.VBox.prototype |
72 } | 72 } |
73 | 73 |
74 /** @enum {string} */ | 74 /** @enum {string} */ |
75 WebInspector.RequestTimeRangeNames = { | 75 WebInspector.RequestTimeRangeNames = { |
| 76 Push: "push", |
76 Queueing: "queueing", | 77 Queueing: "queueing", |
77 Blocking: "blocking", | 78 Blocking: "blocking", |
78 Connecting: "connecting", | 79 Connecting: "connecting", |
79 DNS: "dns", | 80 DNS: "dns", |
80 Proxy: "proxy", | 81 Proxy: "proxy", |
81 Receiving: "receiving", | 82 Receiving: "receiving", |
| 83 ReceivingPush: "receiving-push", |
82 Sending: "sending", | 84 Sending: "sending", |
83 ServiceWorker: "serviceworker", | 85 ServiceWorker: "serviceworker", |
84 ServiceWorkerPreparation: "serviceworker-preparation", | 86 ServiceWorkerPreparation: "serviceworker-preparation", |
85 SSL: "ssl", | 87 SSL: "ssl", |
86 Total: "total", | 88 Total: "total", |
87 Waiting: "waiting" | 89 Waiting: "waiting" |
88 }; | 90 }; |
89 | 91 |
90 WebInspector.RequestTimingView.ConnectionSetupRangeNames = [ | 92 WebInspector.RequestTimingView.ConnectionSetupRangeNames = [ |
91 WebInspector.RequestTimeRangeNames.Queueing, | 93 WebInspector.RequestTimeRangeNames.Queueing, |
92 WebInspector.RequestTimeRangeNames.Blocking, | 94 WebInspector.RequestTimeRangeNames.Blocking, |
93 WebInspector.RequestTimeRangeNames.Connecting, | 95 WebInspector.RequestTimeRangeNames.Connecting, |
94 WebInspector.RequestTimeRangeNames.DNS, | 96 WebInspector.RequestTimeRangeNames.DNS, |
95 WebInspector.RequestTimeRangeNames.Proxy, | 97 WebInspector.RequestTimeRangeNames.Proxy, |
96 WebInspector.RequestTimeRangeNames.SSL | 98 WebInspector.RequestTimeRangeNames.SSL |
97 ].keySet(); | 99 ].keySet(); |
98 | 100 |
99 /** @typedef {{name: !WebInspector.RequestTimeRangeNames, start: number, end: nu
mber}} */ | 101 /** @typedef {{name: !WebInspector.RequestTimeRangeNames, start: number, end: nu
mber}} */ |
100 WebInspector.RequestTimeRange; | 102 WebInspector.RequestTimeRange; |
101 | 103 |
102 /** | 104 /** |
103 * @param {!WebInspector.RequestTimeRangeNames} name | 105 * @param {!WebInspector.RequestTimeRangeNames} name |
104 * @return {string} | 106 * @return {string} |
105 */ | 107 */ |
106 WebInspector.RequestTimingView._timeRangeTitle = function(name) | 108 WebInspector.RequestTimingView._timeRangeTitle = function(name) |
107 { | 109 { |
108 switch (name) { | 110 switch (name) { |
| 111 case WebInspector.RequestTimeRangeNames.Push: return WebInspector.UIString("
Receiving Push"); |
109 case WebInspector.RequestTimeRangeNames.Queueing: return WebInspector.UIStri
ng("Queueing"); | 112 case WebInspector.RequestTimeRangeNames.Queueing: return WebInspector.UIStri
ng("Queueing"); |
110 case WebInspector.RequestTimeRangeNames.Blocking: return WebInspector.UIStri
ng("Stalled"); | 113 case WebInspector.RequestTimeRangeNames.Blocking: return WebInspector.UIStri
ng("Stalled"); |
111 case WebInspector.RequestTimeRangeNames.Connecting: return WebInspector.UISt
ring("Initial connection"); | 114 case WebInspector.RequestTimeRangeNames.Connecting: return WebInspector.UISt
ring("Initial connection"); |
112 case WebInspector.RequestTimeRangeNames.DNS: return WebInspector.UIString("D
NS Lookup"); | 115 case WebInspector.RequestTimeRangeNames.DNS: return WebInspector.UIString("D
NS Lookup"); |
113 case WebInspector.RequestTimeRangeNames.Proxy: return WebInspector.UIString(
"Proxy negotiation"); | 116 case WebInspector.RequestTimeRangeNames.Proxy: return WebInspector.UIString(
"Proxy negotiation"); |
| 117 case WebInspector.RequestTimeRangeNames.ReceivingPush: return WebInspector.U
IString("Reading Push"); |
114 case WebInspector.RequestTimeRangeNames.Receiving: return WebInspector.UIStr
ing("Content Download"); | 118 case WebInspector.RequestTimeRangeNames.Receiving: return WebInspector.UIStr
ing("Content Download"); |
115 case WebInspector.RequestTimeRangeNames.Sending: return WebInspector.UIStrin
g("Request sent"); | 119 case WebInspector.RequestTimeRangeNames.Sending: return WebInspector.UIStrin
g("Request sent"); |
116 case WebInspector.RequestTimeRangeNames.ServiceWorker: return WebInspector.U
IString("Request to ServiceWorker"); | 120 case WebInspector.RequestTimeRangeNames.ServiceWorker: return WebInspector.U
IString("Request to ServiceWorker"); |
117 case WebInspector.RequestTimeRangeNames.ServiceWorkerPreparation: return Web
Inspector.UIString("ServiceWorker Preparation"); | 121 case WebInspector.RequestTimeRangeNames.ServiceWorkerPreparation: return Web
Inspector.UIString("ServiceWorker Preparation"); |
118 case WebInspector.RequestTimeRangeNames.SSL: return WebInspector.UIString("S
SL"); | 122 case WebInspector.RequestTimeRangeNames.SSL: return WebInspector.UIString("S
SL"); |
119 case WebInspector.RequestTimeRangeNames.Total: return WebInspector.UIString(
"Total"); | 123 case WebInspector.RequestTimeRangeNames.Total: return WebInspector.UIString(
"Total"); |
120 case WebInspector.RequestTimeRangeNames.Waiting: return WebInspector.UIStrin
g("Waiting (TTFB)"); | 124 case WebInspector.RequestTimeRangeNames.Waiting: return WebInspector.UIStrin
g("Waiting (TTFB)"); |
121 default: return WebInspector.UIString(name); | 125 default: return WebInspector.UIString(name); |
122 } | 126 } |
123 } | 127 } |
124 | 128 |
125 /** | 129 /** |
126 * @param {!WebInspector.NetworkRequest} request | 130 * @param {!WebInspector.NetworkRequest} request |
| 131 * @param {number} navigationStart |
127 * @return {!Array.<!WebInspector.RequestTimeRange>} | 132 * @return {!Array.<!WebInspector.RequestTimeRange>} |
128 */ | 133 */ |
129 WebInspector.RequestTimingView.calculateRequestTimeRanges = function(request) | 134 WebInspector.RequestTimingView.calculateRequestTimeRanges = function(request, na
vigationStart) |
130 { | 135 { |
131 var result = []; | 136 var result = []; |
132 /** | 137 /** |
133 * @param {!WebInspector.RequestTimeRangeNames} name | 138 * @param {!WebInspector.RequestTimeRangeNames} name |
134 * @param {number} start | 139 * @param {number} start |
135 * @param {number} end | 140 * @param {number} end |
136 */ | 141 */ |
137 function addRange(name, start, end) | 142 function addRange(name, start, end) |
138 { | 143 { |
139 if (start < Number.MAX_VALUE && start <= end) | 144 if (start < Number.MAX_VALUE && start <= end) |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
173 addRange(WebInspector.RequestTimeRangeNames.Blocking, start, middle); | 178 addRange(WebInspector.RequestTimeRangeNames.Blocking, start, middle); |
174 addRange(WebInspector.RequestTimeRangeNames.Receiving, middle, end); | 179 addRange(WebInspector.RequestTimeRangeNames.Receiving, middle, end); |
175 return result; | 180 return result; |
176 } | 181 } |
177 | 182 |
178 var issueTime = request.issueTime(); | 183 var issueTime = request.issueTime(); |
179 var startTime = timing.requestTime; | 184 var startTime = timing.requestTime; |
180 var endTime = firstPositive([request.endTime, request.responseReceivedTime])
|| startTime; | 185 var endTime = firstPositive([request.endTime, request.responseReceivedTime])
|| startTime; |
181 | 186 |
182 addRange(WebInspector.RequestTimeRangeNames.Total, issueTime < startTime ? i
ssueTime : startTime, endTime); | 187 addRange(WebInspector.RequestTimeRangeNames.Total, issueTime < startTime ? i
ssueTime : startTime, endTime); |
| 188 if (timing.pushStart) { |
| 189 var pushEnd = timing.pushEnd || endTime; |
| 190 // Only show the part of push that happened after the navigation/reload. |
| 191 // Pushes that happened on the same connection before we started main re
quest will not be shown. |
| 192 if (pushEnd > navigationStart) |
| 193 addRange(WebInspector.RequestTimeRangeNames.Push, Math.max(timing.pu
shStart, navigationStart), pushEnd); |
| 194 } |
183 if (issueTime < startTime) | 195 if (issueTime < startTime) |
184 addRange(WebInspector.RequestTimeRangeNames.Queueing, issueTime, startTi
me); | 196 addRange(WebInspector.RequestTimeRangeNames.Queueing, issueTime, startTi
me); |
185 | 197 |
186 if (request.fetchedViaServiceWorker) { | 198 if (request.fetchedViaServiceWorker) { |
187 addOffsetRange(WebInspector.RequestTimeRangeNames.Blocking, 0, timing.wo
rkerStart); | 199 addOffsetRange(WebInspector.RequestTimeRangeNames.Blocking, 0, timing.wo
rkerStart); |
188 addOffsetRange(WebInspector.RequestTimeRangeNames.ServiceWorkerPreparati
on, timing.workerStart, timing.workerReady); | 200 addOffsetRange(WebInspector.RequestTimeRangeNames.ServiceWorkerPreparati
on, timing.workerStart, timing.workerReady); |
189 addOffsetRange(WebInspector.RequestTimeRangeNames.ServiceWorker, timing.
workerReady, timing.sendEnd); | 201 addOffsetRange(WebInspector.RequestTimeRangeNames.ServiceWorker, timing.
workerReady, timing.sendEnd); |
190 addOffsetRange(WebInspector.RequestTimeRangeNames.Waiting, timing.sendEn
d, timing.receiveHeadersEnd); | 202 addOffsetRange(WebInspector.RequestTimeRangeNames.Waiting, timing.sendEn
d, timing.receiveHeadersEnd); |
191 } else { | 203 } else if (!timing.pushStart) { |
192 var blocking = firstPositive([timing.dnsStart, timing.connectStart, timi
ng.sendStart]) || 0; | 204 var blocking = firstPositive([timing.dnsStart, timing.connectStart, timi
ng.sendStart]) || 0; |
193 addOffsetRange(WebInspector.RequestTimeRangeNames.Blocking, 0, blocking)
; | 205 addOffsetRange(WebInspector.RequestTimeRangeNames.Blocking, 0, blocking)
; |
194 addOffsetRange(WebInspector.RequestTimeRangeNames.Proxy, timing.proxySta
rt, timing.proxyEnd); | 206 addOffsetRange(WebInspector.RequestTimeRangeNames.Proxy, timing.proxySta
rt, timing.proxyEnd); |
195 addOffsetRange(WebInspector.RequestTimeRangeNames.DNS, timing.dnsStart,
timing.dnsEnd); | 207 addOffsetRange(WebInspector.RequestTimeRangeNames.DNS, timing.dnsStart,
timing.dnsEnd); |
196 addOffsetRange(WebInspector.RequestTimeRangeNames.Connecting, timing.con
nectStart, timing.connectEnd); | 208 addOffsetRange(WebInspector.RequestTimeRangeNames.Connecting, timing.con
nectStart, timing.connectEnd); |
197 addOffsetRange(WebInspector.RequestTimeRangeNames.SSL, timing.sslStart,
timing.sslEnd); | 209 addOffsetRange(WebInspector.RequestTimeRangeNames.SSL, timing.sslStart,
timing.sslEnd); |
198 addOffsetRange(WebInspector.RequestTimeRangeNames.Sending, timing.sendSt
art, timing.sendEnd); | 210 addOffsetRange(WebInspector.RequestTimeRangeNames.Sending, timing.sendSt
art, timing.sendEnd); |
199 addOffsetRange(WebInspector.RequestTimeRangeNames.Waiting, timing.sendEn
d, timing.receiveHeadersEnd); | 211 addOffsetRange(WebInspector.RequestTimeRangeNames.Waiting, timing.sendEn
d, timing.receiveHeadersEnd); |
200 } | 212 } |
201 | 213 |
202 if (request.endTime !== -1) | 214 if (request.endTime !== -1) |
203 addRange(WebInspector.RequestTimeRangeNames.Receiving, request.responseR
eceivedTime, endTime); | 215 addRange(timing.pushStart ? WebInspector.RequestTimeRangeNames.Receiving
Push : WebInspector.RequestTimeRangeNames.Receiving, request.responseReceivedTim
e, endTime); |
204 | 216 |
205 return result; | 217 return result; |
206 } | 218 } |
207 | 219 |
208 /** | 220 /** |
209 * @param {!WebInspector.NetworkRequest} request | 221 * @param {!WebInspector.NetworkRequest} request |
210 * @param {number} navigationStart | 222 * @param {number} navigationStart |
211 * @return {!Element} | 223 * @return {!Element} |
212 */ | 224 */ |
213 WebInspector.RequestTimingView.createTimingTable = function(request, navigationS
tart) | 225 WebInspector.RequestTimingView.createTimingTable = function(request, navigationS
tart) |
214 { | 226 { |
215 var tableElement = createElementWithClass("table", "network-timing-table"); | 227 var tableElement = createElementWithClass("table", "network-timing-table"); |
216 var colgroup = tableElement.createChild("colgroup"); | 228 var colgroup = tableElement.createChild("colgroup"); |
217 colgroup.createChild("col", "labels"); | 229 colgroup.createChild("col", "labels"); |
218 colgroup.createChild("col", "bars"); | 230 colgroup.createChild("col", "bars"); |
219 colgroup.createChild("col", "duration"); | 231 colgroup.createChild("col", "duration"); |
220 | 232 |
221 var timeRanges = WebInspector.RequestTimingView.calculateRequestTimeRanges(r
equest); | 233 var timeRanges = WebInspector.RequestTimingView.calculateRequestTimeRanges(r
equest, navigationStart); |
222 var startTime = timeRanges[0].start; | 234 var startTime = timeRanges.map(r => r.start).reduce((a, b) => Math.min(a, b)
); |
223 var endTime = timeRanges[0].end; | 235 var endTime = timeRanges.map(r => r.end).reduce((a, b) => Math.max(a, b)); |
224 var scale = 100 / (endTime - startTime); | 236 var scale = 100 / (endTime - startTime); |
225 | 237 |
226 var connectionHeader; | 238 var connectionHeader; |
227 var dataHeader; | 239 var dataHeader; |
228 var totalDuration = 0; | 240 var totalDuration = 0; |
229 | 241 |
230 for (var i = 0; i < timeRanges.length; ++i) { | 242 for (var i = 0; i < timeRanges.length; ++i) { |
231 var range = timeRanges[i]; | 243 var range = timeRanges[i]; |
232 var rangeName = range.name; | 244 var rangeName = range.name; |
233 if (rangeName === WebInspector.RequestTimeRangeNames.Total) { | 245 if (rangeName === WebInspector.RequestTimeRangeNames.Total) { |
234 totalDuration = range.end - range.start; | 246 totalDuration = range.end - range.start; |
235 continue; | 247 continue; |
236 } | 248 } |
237 if (WebInspector.RequestTimingView.ConnectionSetupRangeNames[rangeName])
{ | 249 if (rangeName === WebInspector.RequestTimeRangeNames.Push) { |
238 if (!connectionHeader) { | 250 createHeader(WebInspector.UIString("Server Push")); |
239 connectionHeader = tableElement.createChild("tr", "network-timin
g-table-header"); | 251 } else if (WebInspector.RequestTimingView.ConnectionSetupRangeNames[rang
eName]) { |
240 connectionHeader.createChild("td").createTextChild(WebInspector.
UIString("Connection Setup")); | 252 if (!connectionHeader) |
241 connectionHeader.createChild("td").createTextChild(""); | 253 connectionHeader = createHeader(WebInspector.UIString("Connectio
n Setup")); |
242 connectionHeader.createChild("td").createTextChild(WebInspector.
UIString("TIME")); | |
243 } | |
244 } else { | 254 } else { |
245 if (!dataHeader) { | 255 if (!dataHeader) |
246 dataHeader = tableElement.createChild("tr", "network-timing-tabl
e-header"); | 256 dataHeader = createHeader(WebInspector.UIString("Request/Respons
e")); |
247 dataHeader.createChild("td").createTextChild(WebInspector.UIStri
ng("Request/Response")); | |
248 dataHeader.createChild("td").createTextChild(""); | |
249 dataHeader.createChild("td").createTextChild(WebInspector.UIStri
ng("TIME")); | |
250 } | |
251 } | 257 } |
252 | 258 |
253 var left = (scale * (range.start - startTime)); | 259 var left = (scale * (range.start - startTime)); |
254 var right = (scale * (endTime - range.end)); | 260 var right = (scale * (endTime - range.end)); |
255 var duration = range.end - range.start; | 261 var duration = range.end - range.start; |
256 | 262 |
257 var tr = tableElement.createChild("tr"); | 263 var tr = tableElement.createChild("tr"); |
258 tr.createChild("td").createTextChild(WebInspector.RequestTimingView._tim
eRangeTitle(rangeName)); | 264 tr.createChild("td").createTextChild(WebInspector.RequestTimingView._tim
eRangeTitle(rangeName)); |
259 | 265 |
260 var row = tr.createChild("td").createChild("div", "network-timing-row"); | 266 var row = tr.createChild("td").createChild("div", "network-timing-row"); |
(...skipping 11 matching lines...) Expand all Loading... |
272 cell.createTextChild(WebInspector.UIString("CAUTION: request is not fini
shed yet!")); | 278 cell.createTextChild(WebInspector.UIString("CAUTION: request is not fini
shed yet!")); |
273 } | 279 } |
274 | 280 |
275 var footer = tableElement.createChild("tr", "network-timing-footer"); | 281 var footer = tableElement.createChild("tr", "network-timing-footer"); |
276 var note = footer.createChild("td"); | 282 var note = footer.createChild("td"); |
277 note.colSpan = 2; | 283 note.colSpan = 2; |
278 note.appendChild(WebInspector.linkifyDocumentationURLAsNode("profile/network
-performance/resource-loading#view-network-timing-details-for-a-specific-resourc
e", WebInspector.UIString("Explanation"))); | 284 note.appendChild(WebInspector.linkifyDocumentationURLAsNode("profile/network
-performance/resource-loading#view-network-timing-details-for-a-specific-resourc
e", WebInspector.UIString("Explanation"))); |
279 footer.createChild("td").createTextChild(Number.secondsToString(totalDuratio
n, true)); | 285 footer.createChild("td").createTextChild(Number.secondsToString(totalDuratio
n, true)); |
280 | 286 |
281 return tableElement; | 287 return tableElement; |
| 288 |
| 289 /** |
| 290 * param {string} title |
| 291 */ |
| 292 function createHeader(title) |
| 293 { |
| 294 var dataHeader = tableElement.createChild("tr", "network-timing-table-he
ader"); |
| 295 dataHeader.createChild("td").createTextChild(title); |
| 296 dataHeader.createChild("td").createTextChild(""); |
| 297 dataHeader.createChild("td").createTextChild(WebInspector.UIString("TIME
")); |
| 298 return dataHeader; |
| 299 } |
282 } | 300 } |
OLD | NEW |