| 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 13 matching lines...) Expand all Loading... |
| 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, | 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY | 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | 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. | 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 29 */ | 29 */ |
| 30 | 30 |
| 31 /** | 31 /** |
| 32 * @unrestricted | 32 * @unrestricted |
| 33 */ | 33 */ |
| 34 WebInspector.RequestTimingView = class extends WebInspector.VBox { | 34 Network.RequestTimingView = class extends UI.VBox { |
| 35 /** | 35 /** |
| 36 * @param {!WebInspector.NetworkRequest} request | 36 * @param {!SDK.NetworkRequest} request |
| 37 * @param {!WebInspector.NetworkTimeCalculator} calculator | 37 * @param {!Network.NetworkTimeCalculator} calculator |
| 38 */ | 38 */ |
| 39 constructor(request, calculator) { | 39 constructor(request, calculator) { |
| 40 super(); | 40 super(); |
| 41 this.element.classList.add('resource-timing-view'); | 41 this.element.classList.add('resource-timing-view'); |
| 42 | 42 |
| 43 this._request = request; | 43 this._request = request; |
| 44 this._calculator = calculator; | 44 this._calculator = calculator; |
| 45 } | 45 } |
| 46 | 46 |
| 47 /** | 47 /** |
| 48 * @param {!WebInspector.RequestTimeRangeNames} name | 48 * @param {!Network.RequestTimeRangeNames} name |
| 49 * @return {string} | 49 * @return {string} |
| 50 */ | 50 */ |
| 51 static _timeRangeTitle(name) { | 51 static _timeRangeTitle(name) { |
| 52 switch (name) { | 52 switch (name) { |
| 53 case WebInspector.RequestTimeRangeNames.Push: | 53 case Network.RequestTimeRangeNames.Push: |
| 54 return WebInspector.UIString('Receiving Push'); | 54 return Common.UIString('Receiving Push'); |
| 55 case WebInspector.RequestTimeRangeNames.Queueing: | 55 case Network.RequestTimeRangeNames.Queueing: |
| 56 return WebInspector.UIString('Queueing'); | 56 return Common.UIString('Queueing'); |
| 57 case WebInspector.RequestTimeRangeNames.Blocking: | 57 case Network.RequestTimeRangeNames.Blocking: |
| 58 return WebInspector.UIString('Stalled'); | 58 return Common.UIString('Stalled'); |
| 59 case WebInspector.RequestTimeRangeNames.Connecting: | 59 case Network.RequestTimeRangeNames.Connecting: |
| 60 return WebInspector.UIString('Initial connection'); | 60 return Common.UIString('Initial connection'); |
| 61 case WebInspector.RequestTimeRangeNames.DNS: | 61 case Network.RequestTimeRangeNames.DNS: |
| 62 return WebInspector.UIString('DNS Lookup'); | 62 return Common.UIString('DNS Lookup'); |
| 63 case WebInspector.RequestTimeRangeNames.Proxy: | 63 case Network.RequestTimeRangeNames.Proxy: |
| 64 return WebInspector.UIString('Proxy negotiation'); | 64 return Common.UIString('Proxy negotiation'); |
| 65 case WebInspector.RequestTimeRangeNames.ReceivingPush: | 65 case Network.RequestTimeRangeNames.ReceivingPush: |
| 66 return WebInspector.UIString('Reading Push'); | 66 return Common.UIString('Reading Push'); |
| 67 case WebInspector.RequestTimeRangeNames.Receiving: | 67 case Network.RequestTimeRangeNames.Receiving: |
| 68 return WebInspector.UIString('Content Download'); | 68 return Common.UIString('Content Download'); |
| 69 case WebInspector.RequestTimeRangeNames.Sending: | 69 case Network.RequestTimeRangeNames.Sending: |
| 70 return WebInspector.UIString('Request sent'); | 70 return Common.UIString('Request sent'); |
| 71 case WebInspector.RequestTimeRangeNames.ServiceWorker: | 71 case Network.RequestTimeRangeNames.ServiceWorker: |
| 72 return WebInspector.UIString('Request to ServiceWorker'); | 72 return Common.UIString('Request to ServiceWorker'); |
| 73 case WebInspector.RequestTimeRangeNames.ServiceWorkerPreparation: | 73 case Network.RequestTimeRangeNames.ServiceWorkerPreparation: |
| 74 return WebInspector.UIString('ServiceWorker Preparation'); | 74 return Common.UIString('ServiceWorker Preparation'); |
| 75 case WebInspector.RequestTimeRangeNames.SSL: | 75 case Network.RequestTimeRangeNames.SSL: |
| 76 return WebInspector.UIString('SSL'); | 76 return Common.UIString('SSL'); |
| 77 case WebInspector.RequestTimeRangeNames.Total: | 77 case Network.RequestTimeRangeNames.Total: |
| 78 return WebInspector.UIString('Total'); | 78 return Common.UIString('Total'); |
| 79 case WebInspector.RequestTimeRangeNames.Waiting: | 79 case Network.RequestTimeRangeNames.Waiting: |
| 80 return WebInspector.UIString('Waiting (TTFB)'); | 80 return Common.UIString('Waiting (TTFB)'); |
| 81 default: | 81 default: |
| 82 return WebInspector.UIString(name); | 82 return Common.UIString(name); |
| 83 } | 83 } |
| 84 } | 84 } |
| 85 | 85 |
| 86 /** | 86 /** |
| 87 * @param {!WebInspector.NetworkRequest} request | 87 * @param {!SDK.NetworkRequest} request |
| 88 * @param {number} navigationStart | 88 * @param {number} navigationStart |
| 89 * @return {!Array.<!WebInspector.RequestTimeRange>} | 89 * @return {!Array.<!Network.RequestTimeRange>} |
| 90 */ | 90 */ |
| 91 static calculateRequestTimeRanges(request, navigationStart) { | 91 static calculateRequestTimeRanges(request, navigationStart) { |
| 92 var result = []; | 92 var result = []; |
| 93 /** | 93 /** |
| 94 * @param {!WebInspector.RequestTimeRangeNames} name | 94 * @param {!Network.RequestTimeRangeNames} name |
| 95 * @param {number} start | 95 * @param {number} start |
| 96 * @param {number} end | 96 * @param {number} end |
| 97 */ | 97 */ |
| 98 function addRange(name, start, end) { | 98 function addRange(name, start, end) { |
| 99 if (start < Number.MAX_VALUE && start <= end) | 99 if (start < Number.MAX_VALUE && start <= end) |
| 100 result.push({name: name, start: start, end: end}); | 100 result.push({name: name, start: start, end: end}); |
| 101 } | 101 } |
| 102 | 102 |
| 103 /** | 103 /** |
| 104 * @param {!Array.<number>} numbers | 104 * @param {!Array.<number>} numbers |
| 105 * @return {number|undefined} | 105 * @return {number|undefined} |
| 106 */ | 106 */ |
| 107 function firstPositive(numbers) { | 107 function firstPositive(numbers) { |
| 108 for (var i = 0; i < numbers.length; ++i) { | 108 for (var i = 0; i < numbers.length; ++i) { |
| 109 if (numbers[i] > 0) | 109 if (numbers[i] > 0) |
| 110 return numbers[i]; | 110 return numbers[i]; |
| 111 } | 111 } |
| 112 return undefined; | 112 return undefined; |
| 113 } | 113 } |
| 114 | 114 |
| 115 /** | 115 /** |
| 116 * @param {!WebInspector.RequestTimeRangeNames} name | 116 * @param {!Network.RequestTimeRangeNames} name |
| 117 * @param {number} start | 117 * @param {number} start |
| 118 * @param {number} end | 118 * @param {number} end |
| 119 */ | 119 */ |
| 120 function addOffsetRange(name, start, end) { | 120 function addOffsetRange(name, start, end) { |
| 121 if (start >= 0 && end >= 0) | 121 if (start >= 0 && end >= 0) |
| 122 addRange(name, startTime + (start / 1000), startTime + (end / 1000)); | 122 addRange(name, startTime + (start / 1000), startTime + (end / 1000)); |
| 123 } | 123 } |
| 124 | 124 |
| 125 var timing = request.timing; | 125 var timing = request.timing; |
| 126 if (!timing) { | 126 if (!timing) { |
| 127 var start = request.issueTime() !== -1 ? request.issueTime() : request.sta
rtTime !== -1 ? request.startTime : 0; | 127 var start = request.issueTime() !== -1 ? request.issueTime() : request.sta
rtTime !== -1 ? request.startTime : 0; |
| 128 var middle = (request.responseReceivedTime === -1) ? Number.MAX_VALUE : re
quest.responseReceivedTime; | 128 var middle = (request.responseReceivedTime === -1) ? Number.MAX_VALUE : re
quest.responseReceivedTime; |
| 129 var end = (request.endTime === -1) ? Number.MAX_VALUE : request.endTime; | 129 var end = (request.endTime === -1) ? Number.MAX_VALUE : request.endTime; |
| 130 addRange(WebInspector.RequestTimeRangeNames.Total, start, end); | 130 addRange(Network.RequestTimeRangeNames.Total, start, end); |
| 131 addRange(WebInspector.RequestTimeRangeNames.Blocking, start, middle); | 131 addRange(Network.RequestTimeRangeNames.Blocking, start, middle); |
| 132 addRange(WebInspector.RequestTimeRangeNames.Receiving, middle, end); | 132 addRange(Network.RequestTimeRangeNames.Receiving, middle, end); |
| 133 return result; | 133 return result; |
| 134 } | 134 } |
| 135 | 135 |
| 136 var issueTime = request.issueTime(); | 136 var issueTime = request.issueTime(); |
| 137 var startTime = timing.requestTime; | 137 var startTime = timing.requestTime; |
| 138 var endTime = firstPositive([request.endTime, request.responseReceivedTime])
|| startTime; | 138 var endTime = firstPositive([request.endTime, request.responseReceivedTime])
|| startTime; |
| 139 | 139 |
| 140 addRange(WebInspector.RequestTimeRangeNames.Total, issueTime < startTime ? i
ssueTime : startTime, endTime); | 140 addRange(Network.RequestTimeRangeNames.Total, issueTime < startTime ? issueT
ime : startTime, endTime); |
| 141 if (timing.pushStart) { | 141 if (timing.pushStart) { |
| 142 var pushEnd = timing.pushEnd || endTime; | 142 var pushEnd = timing.pushEnd || endTime; |
| 143 // Only show the part of push that happened after the navigation/reload. | 143 // Only show the part of push that happened after the navigation/reload. |
| 144 // Pushes that happened on the same connection before we started main requ
est will not be shown. | 144 // Pushes that happened on the same connection before we started main requ
est will not be shown. |
| 145 if (pushEnd > navigationStart) | 145 if (pushEnd > navigationStart) |
| 146 addRange(WebInspector.RequestTimeRangeNames.Push, Math.max(timing.pushSt
art, navigationStart), pushEnd); | 146 addRange(Network.RequestTimeRangeNames.Push, Math.max(timing.pushStart,
navigationStart), pushEnd); |
| 147 } | 147 } |
| 148 if (issueTime < startTime) | 148 if (issueTime < startTime) |
| 149 addRange(WebInspector.RequestTimeRangeNames.Queueing, issueTime, startTime
); | 149 addRange(Network.RequestTimeRangeNames.Queueing, issueTime, startTime); |
| 150 | 150 |
| 151 if (request.fetchedViaServiceWorker) { | 151 if (request.fetchedViaServiceWorker) { |
| 152 addOffsetRange(WebInspector.RequestTimeRangeNames.Blocking, 0, timing.work
erStart); | 152 addOffsetRange(Network.RequestTimeRangeNames.Blocking, 0, timing.workerSta
rt); |
| 153 addOffsetRange( | 153 addOffsetRange( |
| 154 WebInspector.RequestTimeRangeNames.ServiceWorkerPreparation, timing.wo
rkerStart, timing.workerReady); | 154 Network.RequestTimeRangeNames.ServiceWorkerPreparation, timing.workerS
tart, timing.workerReady); |
| 155 addOffsetRange(WebInspector.RequestTimeRangeNames.ServiceWorker, timing.wo
rkerReady, timing.sendEnd); | 155 addOffsetRange(Network.RequestTimeRangeNames.ServiceWorker, timing.workerR
eady, timing.sendEnd); |
| 156 addOffsetRange(WebInspector.RequestTimeRangeNames.Waiting, timing.sendEnd,
timing.receiveHeadersEnd); | 156 addOffsetRange(Network.RequestTimeRangeNames.Waiting, timing.sendEnd, timi
ng.receiveHeadersEnd); |
| 157 } else if (!timing.pushStart) { | 157 } else if (!timing.pushStart) { |
| 158 var blocking = firstPositive([timing.dnsStart, timing.connectStart, timing
.sendStart]) || 0; | 158 var blocking = firstPositive([timing.dnsStart, timing.connectStart, timing
.sendStart]) || 0; |
| 159 addOffsetRange(WebInspector.RequestTimeRangeNames.Blocking, 0, blocking); | 159 addOffsetRange(Network.RequestTimeRangeNames.Blocking, 0, blocking); |
| 160 addOffsetRange(WebInspector.RequestTimeRangeNames.Proxy, timing.proxyStart
, timing.proxyEnd); | 160 addOffsetRange(Network.RequestTimeRangeNames.Proxy, timing.proxyStart, tim
ing.proxyEnd); |
| 161 addOffsetRange(WebInspector.RequestTimeRangeNames.DNS, timing.dnsStart, ti
ming.dnsEnd); | 161 addOffsetRange(Network.RequestTimeRangeNames.DNS, timing.dnsStart, timing.
dnsEnd); |
| 162 addOffsetRange(WebInspector.RequestTimeRangeNames.Connecting, timing.conne
ctStart, timing.connectEnd); | 162 addOffsetRange(Network.RequestTimeRangeNames.Connecting, timing.connectSta
rt, timing.connectEnd); |
| 163 addOffsetRange(WebInspector.RequestTimeRangeNames.SSL, timing.sslStart, ti
ming.sslEnd); | 163 addOffsetRange(Network.RequestTimeRangeNames.SSL, timing.sslStart, timing.
sslEnd); |
| 164 addOffsetRange(WebInspector.RequestTimeRangeNames.Sending, timing.sendStar
t, timing.sendEnd); | 164 addOffsetRange(Network.RequestTimeRangeNames.Sending, timing.sendStart, ti
ming.sendEnd); |
| 165 addOffsetRange(WebInspector.RequestTimeRangeNames.Waiting, timing.sendEnd,
timing.receiveHeadersEnd); | 165 addOffsetRange(Network.RequestTimeRangeNames.Waiting, timing.sendEnd, timi
ng.receiveHeadersEnd); |
| 166 } | 166 } |
| 167 | 167 |
| 168 if (request.endTime !== -1) | 168 if (request.endTime !== -1) |
| 169 addRange( | 169 addRange( |
| 170 timing.pushStart ? WebInspector.RequestTimeRangeNames.ReceivingPush : | 170 timing.pushStart ? Network.RequestTimeRangeNames.ReceivingPush : |
| 171 WebInspector.RequestTimeRangeNames.Receiving, | 171 Network.RequestTimeRangeNames.Receiving, |
| 172 request.responseReceivedTime, endTime); | 172 request.responseReceivedTime, endTime); |
| 173 | 173 |
| 174 return result; | 174 return result; |
| 175 } | 175 } |
| 176 | 176 |
| 177 /** | 177 /** |
| 178 * @param {!WebInspector.NetworkRequest} request | 178 * @param {!SDK.NetworkRequest} request |
| 179 * @param {number} navigationStart | 179 * @param {number} navigationStart |
| 180 * @return {!Element} | 180 * @return {!Element} |
| 181 */ | 181 */ |
| 182 static createTimingTable(request, navigationStart) { | 182 static createTimingTable(request, navigationStart) { |
| 183 var tableElement = createElementWithClass('table', 'network-timing-table'); | 183 var tableElement = createElementWithClass('table', 'network-timing-table'); |
| 184 var colgroup = tableElement.createChild('colgroup'); | 184 var colgroup = tableElement.createChild('colgroup'); |
| 185 colgroup.createChild('col', 'labels'); | 185 colgroup.createChild('col', 'labels'); |
| 186 colgroup.createChild('col', 'bars'); | 186 colgroup.createChild('col', 'bars'); |
| 187 colgroup.createChild('col', 'duration'); | 187 colgroup.createChild('col', 'duration'); |
| 188 | 188 |
| 189 var timeRanges = WebInspector.RequestTimingView.calculateRequestTimeRanges(r
equest, navigationStart); | 189 var timeRanges = Network.RequestTimingView.calculateRequestTimeRanges(reques
t, navigationStart); |
| 190 var startTime = timeRanges.map(r => r.start).reduce((a, b) => Math.min(a, b)
); | 190 var startTime = timeRanges.map(r => r.start).reduce((a, b) => Math.min(a, b)
); |
| 191 var endTime = timeRanges.map(r => r.end).reduce((a, b) => Math.max(a, b)); | 191 var endTime = timeRanges.map(r => r.end).reduce((a, b) => Math.max(a, b)); |
| 192 var scale = 100 / (endTime - startTime); | 192 var scale = 100 / (endTime - startTime); |
| 193 | 193 |
| 194 var connectionHeader; | 194 var connectionHeader; |
| 195 var dataHeader; | 195 var dataHeader; |
| 196 var totalDuration = 0; | 196 var totalDuration = 0; |
| 197 | 197 |
| 198 for (var i = 0; i < timeRanges.length; ++i) { | 198 for (var i = 0; i < timeRanges.length; ++i) { |
| 199 var range = timeRanges[i]; | 199 var range = timeRanges[i]; |
| 200 var rangeName = range.name; | 200 var rangeName = range.name; |
| 201 if (rangeName === WebInspector.RequestTimeRangeNames.Total) { | 201 if (rangeName === Network.RequestTimeRangeNames.Total) { |
| 202 totalDuration = range.end - range.start; | 202 totalDuration = range.end - range.start; |
| 203 continue; | 203 continue; |
| 204 } | 204 } |
| 205 if (rangeName === WebInspector.RequestTimeRangeNames.Push) { | 205 if (rangeName === Network.RequestTimeRangeNames.Push) { |
| 206 createHeader(WebInspector.UIString('Server Push')); | 206 createHeader(Common.UIString('Server Push')); |
| 207 } else if (WebInspector.RequestTimingView.ConnectionSetupRangeNames.has(ra
ngeName)) { | 207 } else if (Network.RequestTimingView.ConnectionSetupRangeNames.has(rangeNa
me)) { |
| 208 if (!connectionHeader) | 208 if (!connectionHeader) |
| 209 connectionHeader = createHeader(WebInspector.UIString('Connection Setu
p')); | 209 connectionHeader = createHeader(Common.UIString('Connection Setup')); |
| 210 } else { | 210 } else { |
| 211 if (!dataHeader) | 211 if (!dataHeader) |
| 212 dataHeader = createHeader(WebInspector.UIString('Request/Response')); | 212 dataHeader = createHeader(Common.UIString('Request/Response')); |
| 213 } | 213 } |
| 214 | 214 |
| 215 var left = (scale * (range.start - startTime)); | 215 var left = (scale * (range.start - startTime)); |
| 216 var right = (scale * (endTime - range.end)); | 216 var right = (scale * (endTime - range.end)); |
| 217 var duration = range.end - range.start; | 217 var duration = range.end - range.start; |
| 218 | 218 |
| 219 var tr = tableElement.createChild('tr'); | 219 var tr = tableElement.createChild('tr'); |
| 220 tr.createChild('td').createTextChild(WebInspector.RequestTimingView._timeR
angeTitle(rangeName)); | 220 tr.createChild('td').createTextChild(Network.RequestTimingView._timeRangeT
itle(rangeName)); |
| 221 | 221 |
| 222 var row = tr.createChild('td').createChild('div', 'network-timing-row'); | 222 var row = tr.createChild('td').createChild('div', 'network-timing-row'); |
| 223 var bar = row.createChild('span', 'network-timing-bar ' + rangeName); | 223 var bar = row.createChild('span', 'network-timing-bar ' + rangeName); |
| 224 bar.style.left = left + '%'; | 224 bar.style.left = left + '%'; |
| 225 bar.style.right = right + '%'; | 225 bar.style.right = right + '%'; |
| 226 bar.textContent = '\u200B'; // Important for 0-time items to have 0 width
. | 226 bar.textContent = '\u200B'; // Important for 0-time items to have 0 width
. |
| 227 var label = tr.createChild('td').createChild('div', 'network-timing-bar-ti
tle'); | 227 var label = tr.createChild('td').createChild('div', 'network-timing-bar-ti
tle'); |
| 228 label.textContent = Number.secondsToString(duration, true); | 228 label.textContent = Number.secondsToString(duration, true); |
| 229 } | 229 } |
| 230 | 230 |
| 231 if (!request.finished) { | 231 if (!request.finished) { |
| 232 var cell = tableElement.createChild('tr').createChild('td', 'caution'); | 232 var cell = tableElement.createChild('tr').createChild('td', 'caution'); |
| 233 cell.colSpan = 3; | 233 cell.colSpan = 3; |
| 234 cell.createTextChild(WebInspector.UIString('CAUTION: request is not finish
ed yet!')); | 234 cell.createTextChild(Common.UIString('CAUTION: request is not finished yet
!')); |
| 235 } | 235 } |
| 236 | 236 |
| 237 var footer = tableElement.createChild('tr', 'network-timing-footer'); | 237 var footer = tableElement.createChild('tr', 'network-timing-footer'); |
| 238 var note = footer.createChild('td'); | 238 var note = footer.createChild('td'); |
| 239 note.colSpan = 2; | 239 note.colSpan = 2; |
| 240 note.appendChild(WebInspector.linkifyDocumentationURLAsNode( | 240 note.appendChild(UI.linkifyDocumentationURLAsNode( |
| 241 'profile/network-performance/resource-loading#view-network-timing-detail
s-for-a-specific-resource', | 241 'profile/network-performance/resource-loading#view-network-timing-detail
s-for-a-specific-resource', |
| 242 WebInspector.UIString('Explanation'))); | 242 Common.UIString('Explanation'))); |
| 243 footer.createChild('td').createTextChild(Number.secondsToString(totalDuratio
n, true)); | 243 footer.createChild('td').createTextChild(Number.secondsToString(totalDuratio
n, true)); |
| 244 | 244 |
| 245 var serverTimings = request.serverTimings; | 245 var serverTimings = request.serverTimings; |
| 246 if (!serverTimings) | 246 if (!serverTimings) |
| 247 return tableElement; | 247 return tableElement; |
| 248 | 248 |
| 249 var lastTimingRightEdge = right === undefined ? 100 : right; | 249 var lastTimingRightEdge = right === undefined ? 100 : right; |
| 250 | 250 |
| 251 var breakElement = tableElement.createChild('tr', 'network-timing-table-head
er').createChild('td'); | 251 var breakElement = tableElement.createChild('tr', 'network-timing-table-head
er').createChild('td'); |
| 252 breakElement.colSpan = 3; | 252 breakElement.colSpan = 3; |
| 253 breakElement.createChild('hr', 'break'); | 253 breakElement.createChild('hr', 'break'); |
| 254 | 254 |
| 255 var serverHeader = tableElement.createChild('tr', 'network-timing-table-head
er'); | 255 var serverHeader = tableElement.createChild('tr', 'network-timing-table-head
er'); |
| 256 serverHeader.createChild('td').createTextChild(WebInspector.UIString('Server
Timing')); | 256 serverHeader.createChild('td').createTextChild(Common.UIString('Server Timin
g')); |
| 257 serverHeader.createChild('td'); | 257 serverHeader.createChild('td'); |
| 258 serverHeader.createChild('td').createTextChild(WebInspector.UIString('TIME')
); | 258 serverHeader.createChild('td').createTextChild(Common.UIString('TIME')); |
| 259 | 259 |
| 260 serverTimings.filter(item => item.metric.toLowerCase() !== 'total') | 260 serverTimings.filter(item => item.metric.toLowerCase() !== 'total') |
| 261 .forEach(item => addTiming(item, lastTimingRightEdge)); | 261 .forEach(item => addTiming(item, lastTimingRightEdge)); |
| 262 serverTimings.filter(item => item.metric.toLowerCase() === 'total') | 262 serverTimings.filter(item => item.metric.toLowerCase() === 'total') |
| 263 .forEach(item => addTiming(item, lastTimingRightEdge)); | 263 .forEach(item => addTiming(item, lastTimingRightEdge)); |
| 264 | 264 |
| 265 return tableElement; | 265 return tableElement; |
| 266 | 266 |
| 267 /** | 267 /** |
| 268 * @param {!WebInspector.ServerTiming} serverTiming | 268 * @param {!SDK.ServerTiming} serverTiming |
| 269 * @param {number} right | 269 * @param {number} right |
| 270 */ | 270 */ |
| 271 function addTiming(serverTiming, right) { | 271 function addTiming(serverTiming, right) { |
| 272 var colorGenerator = | 272 var colorGenerator = |
| 273 new WebInspector.FlameChart.ColorGenerator({min: 0, max: 360, count: 3
6}, {min: 50, max: 80}, 80); | 273 new UI.FlameChart.ColorGenerator({min: 0, max: 360, count: 36}, {min:
50, max: 80}, 80); |
| 274 var isTotal = serverTiming.metric.toLowerCase() === 'total'; | 274 var isTotal = serverTiming.metric.toLowerCase() === 'total'; |
| 275 var tr = tableElement.createChild('tr', isTotal ? 'network-timing-footer'
: ''); | 275 var tr = tableElement.createChild('tr', isTotal ? 'network-timing-footer'
: ''); |
| 276 var metric = tr.createChild('td', 'network-timing-metric'); | 276 var metric = tr.createChild('td', 'network-timing-metric'); |
| 277 metric.createTextChild(serverTiming.description || serverTiming.metric); | 277 metric.createTextChild(serverTiming.description || serverTiming.metric); |
| 278 var row = tr.createChild('td').createChild('div', 'network-timing-row'); | 278 var row = tr.createChild('td').createChild('div', 'network-timing-row'); |
| 279 var left = scale * (endTime - startTime - serverTiming.value); | 279 var left = scale * (endTime - startTime - serverTiming.value); |
| 280 if (serverTiming.value && left >= 0) { // don't chart values too big or t
oo small | 280 if (serverTiming.value && left >= 0) { // don't chart values too big or t
oo small |
| 281 var bar = row.createChild('span', 'network-timing-bar server-timing'); | 281 var bar = row.createChild('span', 'network-timing-bar server-timing'); |
| 282 bar.style.left = left + '%'; | 282 bar.style.left = left + '%'; |
| 283 bar.style.right = right + '%'; | 283 bar.style.right = right + '%'; |
| 284 bar.textContent = '\u200B'; // Important for 0-time items to have 0 wid
th. | 284 bar.textContent = '\u200B'; // Important for 0-time items to have 0 wid
th. |
| 285 if (!isTotal) | 285 if (!isTotal) |
| 286 bar.style.backgroundColor = colorGenerator.colorForID(serverTiming.met
ric); | 286 bar.style.backgroundColor = colorGenerator.colorForID(serverTiming.met
ric); |
| 287 } | 287 } |
| 288 var label = tr.createChild('td').createChild('div', 'network-timing-bar-ti
tle'); | 288 var label = tr.createChild('td').createChild('div', 'network-timing-bar-ti
tle'); |
| 289 if (typeof serverTiming.value === 'number') // a metric timing value is o
ptional | 289 if (typeof serverTiming.value === 'number') // a metric timing value is o
ptional |
| 290 label.textContent = Number.secondsToString(serverTiming.value, true); | 290 label.textContent = Number.secondsToString(serverTiming.value, true); |
| 291 } | 291 } |
| 292 | 292 |
| 293 /** | 293 /** |
| 294 * param {string} title | 294 * param {string} title |
| 295 */ | 295 */ |
| 296 function createHeader(title) { | 296 function createHeader(title) { |
| 297 var dataHeader = tableElement.createChild('tr', 'network-timing-table-head
er'); | 297 var dataHeader = tableElement.createChild('tr', 'network-timing-table-head
er'); |
| 298 dataHeader.createChild('td').createTextChild(title); | 298 dataHeader.createChild('td').createTextChild(title); |
| 299 dataHeader.createChild('td').createTextChild(''); | 299 dataHeader.createChild('td').createTextChild(''); |
| 300 dataHeader.createChild('td').createTextChild(WebInspector.UIString('TIME')
); | 300 dataHeader.createChild('td').createTextChild(Common.UIString('TIME')); |
| 301 return dataHeader; | 301 return dataHeader; |
| 302 } | 302 } |
| 303 } | 303 } |
| 304 | 304 |
| 305 /** | 305 /** |
| 306 * @override | 306 * @override |
| 307 */ | 307 */ |
| 308 wasShown() { | 308 wasShown() { |
| 309 this._request.addEventListener(WebInspector.NetworkRequest.Events.TimingChan
ged, this._refresh, this); | 309 this._request.addEventListener(SDK.NetworkRequest.Events.TimingChanged, this
._refresh, this); |
| 310 this._request.addEventListener(WebInspector.NetworkRequest.Events.FinishedLo
ading, this._refresh, this); | 310 this._request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, th
is._refresh, this); |
| 311 this._calculator.addEventListener(WebInspector.NetworkTimeCalculator.Events.
BoundariesChanged, this._refresh, this); | 311 this._calculator.addEventListener(Network.NetworkTimeCalculator.Events.Bound
ariesChanged, this._refresh, this); |
| 312 this._refresh(); | 312 this._refresh(); |
| 313 } | 313 } |
| 314 | 314 |
| 315 /** | 315 /** |
| 316 * @override | 316 * @override |
| 317 */ | 317 */ |
| 318 willHide() { | 318 willHide() { |
| 319 this._request.removeEventListener(WebInspector.NetworkRequest.Events.TimingC
hanged, this._refresh, this); | 319 this._request.removeEventListener(SDK.NetworkRequest.Events.TimingChanged, t
his._refresh, this); |
| 320 this._request.removeEventListener(WebInspector.NetworkRequest.Events.Finishe
dLoading, this._refresh, this); | 320 this._request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading,
this._refresh, this); |
| 321 this._calculator.removeEventListener( | 321 this._calculator.removeEventListener( |
| 322 WebInspector.NetworkTimeCalculator.Events.BoundariesChanged, this._refre
sh, this); | 322 Network.NetworkTimeCalculator.Events.BoundariesChanged, this._refresh, t
his); |
| 323 } | 323 } |
| 324 | 324 |
| 325 _refresh() { | 325 _refresh() { |
| 326 if (this._tableElement) | 326 if (this._tableElement) |
| 327 this._tableElement.remove(); | 327 this._tableElement.remove(); |
| 328 | 328 |
| 329 this._tableElement = | 329 this._tableElement = |
| 330 WebInspector.RequestTimingView.createTimingTable(this._request, this._ca
lculator.minimumBoundary()); | 330 Network.RequestTimingView.createTimingTable(this._request, this._calcula
tor.minimumBoundary()); |
| 331 this.element.appendChild(this._tableElement); | 331 this.element.appendChild(this._tableElement); |
| 332 } | 332 } |
| 333 }; | 333 }; |
| 334 | 334 |
| 335 /** @enum {string} */ | 335 /** @enum {string} */ |
| 336 WebInspector.RequestTimeRangeNames = { | 336 Network.RequestTimeRangeNames = { |
| 337 Push: 'push', | 337 Push: 'push', |
| 338 Queueing: 'queueing', | 338 Queueing: 'queueing', |
| 339 Blocking: 'blocking', | 339 Blocking: 'blocking', |
| 340 Connecting: 'connecting', | 340 Connecting: 'connecting', |
| 341 DNS: 'dns', | 341 DNS: 'dns', |
| 342 Proxy: 'proxy', | 342 Proxy: 'proxy', |
| 343 Receiving: 'receiving', | 343 Receiving: 'receiving', |
| 344 ReceivingPush: 'receiving-push', | 344 ReceivingPush: 'receiving-push', |
| 345 Sending: 'sending', | 345 Sending: 'sending', |
| 346 ServiceWorker: 'serviceworker', | 346 ServiceWorker: 'serviceworker', |
| 347 ServiceWorkerPreparation: 'serviceworker-preparation', | 347 ServiceWorkerPreparation: 'serviceworker-preparation', |
| 348 SSL: 'ssl', | 348 SSL: 'ssl', |
| 349 Total: 'total', | 349 Total: 'total', |
| 350 Waiting: 'waiting' | 350 Waiting: 'waiting' |
| 351 }; | 351 }; |
| 352 | 352 |
| 353 WebInspector.RequestTimingView.ConnectionSetupRangeNames = new Set([ | 353 Network.RequestTimingView.ConnectionSetupRangeNames = new Set([ |
| 354 WebInspector.RequestTimeRangeNames.Queueing, WebInspector.RequestTimeRangeName
s.Blocking, | 354 Network.RequestTimeRangeNames.Queueing, Network.RequestTimeRangeNames.Blocking
, |
| 355 WebInspector.RequestTimeRangeNames.Connecting, WebInspector.RequestTimeRangeNa
mes.DNS, | 355 Network.RequestTimeRangeNames.Connecting, Network.RequestTimeRangeNames.DNS, |
| 356 WebInspector.RequestTimeRangeNames.Proxy, WebInspector.RequestTimeRangeNames.S
SL | 356 Network.RequestTimeRangeNames.Proxy, Network.RequestTimeRangeNames.SSL |
| 357 ]); | 357 ]); |
| 358 | 358 |
| 359 /** @typedef {{name: !WebInspector.RequestTimeRangeNames, start: number, end: nu
mber}} */ | 359 /** @typedef {{name: !Network.RequestTimeRangeNames, start: number, end: number}
} */ |
| 360 WebInspector.RequestTimeRange; | 360 Network.RequestTimeRange; |
| OLD | NEW |