Add Server-Timing support to devtools

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

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 260 matching lines @@
         cell.colSpan = 3;
         cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!"));
     }
 
     var footer = tableElement.createChild("tr", "network-timing-footer");
     var note = footer.createChild("td");
     note.colSpan = 2;
     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"));

[paulirish, 2016/03/20 20:16:27]

"Server Timing"

+    serverHeader.createChild("td").createTextChild("");
+    serverHeader.createChild("td").createTextChild(WebInspector.UIString("TIME"));
+    
+    /**
+     * @param {!WebInspector.ServerTiming} serverTiming
+     */
+    function addTiming(serverTiming)
+    {
+        var tr = tableElement.createChild("tr", serverTiming.metric == "total" ? "network-timing-footer" : "");
+        var metric = tr.createChild("td", "network-timing-metric");
+        metric.colSpan = 2;
+        metric.createTextChild(serverTiming.description || serverTiming.metric);

[paulirish, 2016/03/20 20:16:27]

Would you want to see both metric name and optional description?

[sroussey, 2016/04/22 00:55:08]

I don't think so. A lot of people will have a metric of "mysql" and a
description of "MySQL"

+
+        var label = tr.createChild("td").createChild("div", "network-timing-bar-title");
+        label.textContent = Number.secondsToString(serverTiming.value, true);
+    }
+    
+    serverTimings.filter(item => item.metric.toLowerCase() != "total").forEach(addTiming);
+    serverTimings.filter(item => item.metric.toLowerCase() == "total").forEach(addTiming);

[paulirish, 2016/03/20 20:16:27]

This does rely on convention that a metric with the name "total" is added, but
the spec seems to suggestion that. So, OK.

+
     return tableElement;
 }