Add Server-Timing support to devtools

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

+/*
+ * Copyright (C) 2016 Steven Roussey. All rights reserved.

[pfeldman, 2016/03/14 22:54:34]

Could you use a new 3 line header style?

Also, you need to be in the AUTHORS list to land your patch:
https://www.chromium.org/developers/contributing-code

+ * Copyright (C) 2016 The Chromium Authors. 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
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @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)
+    {
+        if (!this._initialize(headers))
+            return null;
+        
+        this._serverTimings = this._headers.map(item => this._extractMetric(item.value), this).filter(item => item);

[pfeldman, 2016/03/14 22:54:34]

This is hard to read - it might be easier to implement what you need in the
extractMetric (including initialization).

+        return this._serverTimings;
+    },
+
+    /**
+     * @param {!Array.<!WebInspector.NetworkRequest.NameValue>} headers
+     * @return {boolean}
+     */
+    _initialize: function(headers)
+    {
+        this._headers = headers.filter(item => item.name.toLowerCase() == 'server-timing');

[pfeldman, 2016/03/14 22:54:34]

== -> ===

+        if (this._headers.length == 0)
+            return false;
+
+        this._headers.sort((a, b) => a.value.toLowerCase().compareTo(b.value.toLowerCase()));

[pfeldman, 2016/03/14 22:54:35]

Why do you have to sort it?

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

Related to a my experience writing a Server-Timing extension
(https://chrome.google.com/webstore/detail/server-timing/lhebeopdclghecelfokfa...).
I sort the metrics as I recommend naming them with prefixes (like data-db-mysql
and data-kv-memcache, then this way, even though their names are different, all
the similar things get put together. In my extension, when complete, the donut
graphs will have sub-circles that help show the relative weight of data-* vs
network-*, as well as mysql vs memcache. 

My plan is to make a blog post at the same time this goes live, and also release
the related extension at the same time.

+        return true;
+    },
+
+    /**
+     * @param {string} valueString
+     * @return {?WebInspector.ServerTiming}
+     */
+    _extractMetric: function(valueString)
+    {
+        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);
+            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)
+{
+    this._target = target;
+    this.metric = metric;
+    this.value = value;
+    this.description = description;
+}
+