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 266 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
277 cell.colSpan = 3; | 277 cell.colSpan = 3; |
278 cell.createTextChild(WebInspector.UIString("CAUTION: request is not fini
shed yet!")); | 278 cell.createTextChild(WebInspector.UIString("CAUTION: request is not fini
shed yet!")); |
279 } | 279 } |
280 | 280 |
281 var footer = tableElement.createChild("tr", "network-timing-footer"); | 281 var footer = tableElement.createChild("tr", "network-timing-footer"); |
282 var note = footer.createChild("td"); | 282 var note = footer.createChild("td"); |
283 note.colSpan = 2; | 283 note.colSpan = 2; |
284 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"))); |
285 footer.createChild("td").createTextChild(Number.secondsToString(totalDuratio
n, true)); | 285 footer.createChild("td").createTextChild(Number.secondsToString(totalDuratio
n, true)); |
286 | 286 |
| 287 var serverTimings = request.serverTimings; |
| 288 if (!serverTimings) |
| 289 return tableElement; |
| 290 |
| 291 var lastTimingRightEdge = right === undefined ? 100 : right; |
| 292 |
| 293 var breakElement = tableElement.createChild("tr", "network-timing-table-head
er").createChild("td"); |
| 294 breakElement.colSpan = 3; |
| 295 breakElement.createChild("hr", "break"); |
| 296 |
| 297 var serverHeader = tableElement.createChild("tr", "network-timing-table-head
er"); |
| 298 serverHeader.createChild("td").createTextChild(WebInspector.UIString("Server
Timing")); |
| 299 serverHeader.createChild("td"); |
| 300 serverHeader.createChild("td").createTextChild(WebInspector.UIString("TIME")
); |
| 301 |
| 302 serverTimings.filter(item => item.metric.toLowerCase() !== "total").forEach(
item => addTiming(item, lastTimingRightEdge)); |
| 303 serverTimings.filter(item => item.metric.toLowerCase() === "total").forEach(
item => addTiming(item, lastTimingRightEdge)); |
| 304 |
287 return tableElement; | 305 return tableElement; |
288 | 306 |
| 307 |
| 308 /** |
| 309 * @param {!WebInspector.ServerTiming} serverTiming |
| 310 * @param {number} right |
| 311 */ |
| 312 function addTiming(serverTiming, right) |
| 313 { |
| 314 var colorGenerator = new WebInspector.FlameChart.ColorGenerator( |
| 315 { min: 0, max: 360, count:36 }, |
| 316 { min: 50, max: 80 }, |
| 317 80 |
| 318 ); |
| 319 var isTotal = serverTiming.metric.toLowerCase() === "total"; |
| 320 var tr = tableElement.createChild("tr", isTotal ? "network-timing-footer
" : ""); |
| 321 var metric = tr.createChild("td", "network-timing-metric"); |
| 322 metric.createTextChild(serverTiming.description || serverTiming.metric); |
| 323 var row = tr.createChild("td").createChild("div", "network-timing-row"); |
| 324 var left = scale * (endTime - startTime - serverTiming.value); |
| 325 if (serverTiming.value && left >= 0) { // don't chart values too big or
too small |
| 326 var bar = row.createChild("span", "network-timing-bar server-timing"
); |
| 327 bar.style.left = left + "%"; |
| 328 bar.style.right = right + "%"; |
| 329 bar.textContent = "\u200B"; // Important for 0-time items to have 0
width. |
| 330 if (!isTotal) |
| 331 bar.style.backgroundColor = colorGenerator.colorForID(serverTimi
ng.metric); |
| 332 } |
| 333 var label = tr.createChild("td").createChild("div", "network-timing-bar-
title"); |
| 334 if (typeof serverTiming.value === "number") // a metric timing value is
optional |
| 335 label.textContent = Number.secondsToString(serverTiming.value, true)
; |
| 336 } |
| 337 |
289 /** | 338 /** |
290 * param {string} title | 339 * param {string} title |
291 */ | 340 */ |
292 function createHeader(title) | 341 function createHeader(title) |
293 { | 342 { |
294 var dataHeader = tableElement.createChild("tr", "network-timing-table-he
ader"); | 343 var dataHeader = tableElement.createChild("tr", "network-timing-table-he
ader"); |
295 dataHeader.createChild("td").createTextChild(title); | 344 dataHeader.createChild("td").createTextChild(title); |
296 dataHeader.createChild("td").createTextChild(""); | 345 dataHeader.createChild("td").createTextChild(""); |
297 dataHeader.createChild("td").createTextChild(WebInspector.UIString("TIME
")); | 346 dataHeader.createChild("td").createTextChild(WebInspector.UIString("TIME
")); |
298 return dataHeader; | 347 return dataHeader; |
299 } | 348 } |
300 } | 349 } |
OLD | NEW |