Add Server-Timing support to devtools

third_party/WebKit/Source/devtools/front_end/sdk/ServerTimingParser.js

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @constructor
+ * @param {!WebInspector.Target} target
+ */
+WebInspector.ServerTimingParser = function(target)
+{
+    this._target = target;
+}
+
+WebInspector.ServerTimingParser.prototype = {
+    /**
+     * @param {!Array.<!WebInspector.NetworkRequest.NameValue>} headers
+     * @return {?Array.<!WebInspector.ServerTiming>}
+     */
+    parseHeaders: function(headers)
+    {
+        var rawServerTimingHeaders = headers.filter(item => item.name.toLowerCase() === 'server-timing');

[pfeldman, 2016/03/15 20:18:59]

"server-timing"

+        if (rawServerTimingHeaders.length === 0)
+            return null;
+        
+        var serverTimings = rawServerTimingHeaders.map(item => this._extractMetric(item.value), this);

[pfeldman, 2016/03/15 20:18:59]

Iterating over array here and inlining _extractMetric into the loop would allow
to save on another linear path below.

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

I can use reduce() with an array memo.

+1

+        serverTimings.filter(item => item); // removes items that could not be parsed
+        serverTimings.sort((a, b) => a.metric.toLowerCase().compareTo(b.metric.toLowerCase()));

[pfeldman, 2016/03/15 20:19:00]

I'd rather preserve the order of the timing sent by the server. That way it can
be mind-mapped into something readable and waterfall-ish.

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

I guess this is based on my particular experience where they are not always
coming out in the same order across different pages (and I can't reorder already
sent headers in PHP). Imagine if the other items in this view changed order
sometimes. Yikes.

Also, this data is _not_ waterfall-like. They say what % of the time was done
doing what. Nothing about the order thereof. They do not specify steps. Though
if you wanted that, you could name metics in order: Server-Timing:
step001-auth=30;"Authenticate"

+        return serverTimings;
+    },
+
+    /**
+     * @param {string} valueString
+     * @return {?WebInspector.ServerTiming}
+     */
+    _extractMetric: function(valueString)
+    {
+        if (valueString == '')

[pfeldman, 2016/03/15 20:18:59]

=== "" or even better:

if (!valueString)

+            return null;
+        var metricMatch = /\s*(\w+)\s*=\s*(\d+(?:\.\d+)?)\s*(?:;\s*(?:"(.*)"|(.*)))\s*/.exec(valueString);
+        if (!metricMatch) {
+            console.log("Failed parsing server-timing metric: ", valueString);

[pfeldman, 2016/03/15 20:18:59]

We don't console.log into inspector, silent return here.

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

OK, but we might want to remove the one I got the idea from...

+            return null;
+        }
+
+        var result = new WebInspector.ServerTiming(this._target, metricMatch[1], parseFloat(metricMatch[2]), metricMatch[3] || metricMatch[4]);
+        return result;
+    }
+};
+
+/**
+ * @param {!WebInspector.Target} target
+ * @param {!Array.<!WebInspector.NetworkRequest.NameValue>} headers
+ * @return {?Array.<!WebInspector.ServerTiming>}
+ */
+WebInspector.ServerTimingParser.parseHeaders = function(target, headers)
+{
+    return (new WebInspector.ServerTimingParser(target)).parseHeaders(headers);
+}
+
+/**
+ * @constructor
+ * @param {!WebInspector.Target} target
+ * @param {string} metric
+ * @param {number} value
+ * @param {string} description
+ */
+WebInspector.ServerTiming = function(target, metric, value, description)

[pfeldman, 2016/03/15 20:19:00]

Not sure you need WebInspector.ServerTimingParser - you could get away with just

WebInspector.ServerTiming class and 
WebInspector.ServerTiming.parse(target, headers) method (extractMetric would
just be inlined)

You'd need to rename file though.

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

Yeah, I like that better now.

+{
+    this._target = target;
+    this.metric = metric;
+    this.value = value;
+    this.description = description;
+}
+