Index: third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js |
diff --git a/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js b/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js |
index c074f32939bb4f7e4369d31a953e49b8c5817b48..41e52369d24f48dbc85ac69beb97937b955352ed 100644 |
--- a/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js |
+++ b/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js |
@@ -278,5 +278,50 @@ WebInspector.RequestTimingView.createTimingTable = function(request, navigationS |
note.appendChild(WebInspector.linkifyDocumentationURLAsNode("profile/network-performance/resource-loading#view-network-timing-details-for-a-specific-resource", WebInspector.UIString("Explanation"))); |
footer.createChild("td").createTextChild(Number.secondsToString(totalDuration, true)); |
+ var serverTimings = request.serverTimings; |
+ if (!serverTimings) |
+ return tableElement; |
+ |
+ var breakEl = tableElement.createChild("tr", "network-timing-table-header").createChild("td"); |
+ breakEl.colSpan = 3; |
+ breakEl.createChild("hr", "break"); |
+ var serverHeader = tableElement.createChild("tr", "network-timing-table-header"); |
+ serverHeader.createChild("td").createTextChild(WebInspector.UIString("Server Timing")); |
+ serverHeader.createChild("td").createTextChild(""); |
caseq
2016/04/05 17:18:42
nuke createTextChild() here?
|
+ serverHeader.createChild("td").createTextChild(WebInspector.UIString("TIME")); |
+ |
+ var colorGenerator = new WebInspector.FlameChart.ColorGenerator( |
+ { min: 0, max: 360, count:36 }, |
+ { min: 50, max: 80 }, |
+ 80 |
+ ); |
+ |
+ /** |
+ * @param {!WebInspector.ServerTiming} serverTiming |
+ */ |
+ function addTiming(serverTiming) |
+ { |
+ var isTotal = serverTiming.metric == "total"; |
caseq
2016/04/05 17:18:41
s/==/===/
Also, we use toLowerCase() when compari
|
+ var tr = tableElement.createChild("tr", isTotal ? "network-timing-footer" : ""); |
+ var metric = tr.createChild("td", "network-timing-metric"); |
+ metric.createTextChild(serverTiming.description || serverTiming.metric); |
+ row = tr.createChild("td").createChild("div", "network-timing-row"); |
caseq
2016/04/05 17:18:42
var row
|
+ left = scale * (endTime - startTime - serverTiming.value); |
caseq
2016/04/05 17:18:42
var left
|
+ if (serverTiming.value && left >= 0) { // don't chart values too big or too small |
+ bar = row.createChild("span", "network-timing-bar server-timing"); |
caseq
2016/04/05 17:18:41
var bar
|
+ bar.style.left = left + "%"; |
+ bar.style.right = right + "%"; |
caseq
2016/04/05 17:18:41
What's the value of right here?
sroussey
2016/04/22 00:55:08
The right from the closure.
|
+ bar.textContent = "\u200B"; // Important for 0-time items to have 0 width. |
+ if (!isTotal) |
+ bar.style.backgroundColor = colorGenerator.colorForID(serverTiming.metric); |
+ } |
+ var label = tr.createChild("td").createChild("div", "network-timing-bar-title"); |
+ if (serverTiming.value !== null) // a metric timing value is optional |
caseq
2016/04/05 17:18:42
nit: check for typeof serverTiming.value === "numb
|
+ label.textContent = Number.secondsToString(serverTiming.value, true); |
+ } |
+ |
+ serverTimings.filter(item => item.metric.toLowerCase() != "total").forEach(addTiming); |
caseq
2016/04/05 17:18:41
style: !==
|
+ serverTimings.filter(item => item.metric.toLowerCase() == "total").forEach(addTiming); |
caseq
2016/04/05 17:18:41
style: ===
|
+ |
return tableElement; |
} |