Add Server-Timing support to devtools

third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js

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 comparing with "total" below, shouldn't we do it
here?

+        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 === "number" instead.

+            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;
 }