Add ServiceWorker timing information on the popup panel in DevTools's Network tab (1/2)

Source/devtools/front_end/network/RequestTimingView.js

Index: Source/devtools/front_end/network/RequestTimingView.js
diff --git a/Source/devtools/front_end/network/RequestTimingView.js b/Source/devtools/front_end/network/RequestTimingView.js
index 73c4e3195393fa3bf29b59921393cb5f89294728..eedeecab4e47b60607407070c5ef4dfda98a3087 100644
--- a/Source/devtools/front_end/network/RequestTimingView.js
+++ b/Source/devtools/front_end/network/RequestTimingView.js
@@ -131,39 +131,65 @@ WebInspector.RequestTimingView.createTimingTable = function(request)
         return undefined;
     }
 
-    var timing = request.timing;
-    var blocking = firstPositive([timing.dnsStart, timing.connectStart, timing.sendStart]);
-    var endTime = firstPositive([request.endTime, request.responseReceivedTime, timing.requestTime]);
-    var total = (endTime - timing.requestTime) * 1000;
-    const chartWidth = 200;
-    var scale = chartWidth / total;
+    function createCommunicationTimingTable()
+    {
+        if (blocking > 0)
+            addRow(WebInspector.UIString("Stalled"), "blocking", 0, blocking);
+
+        if (timing.proxyStart !== -1)
+            addRow(WebInspector.UIString("Proxy negotiation"), "proxy", timing.proxyStart, timing.proxyEnd);
+
+        if (timing.dnsStart !== -1)
+            addRow(WebInspector.UIString("DNS Lookup"), "dns", timing.dnsStart, timing.dnsEnd);
 
-    if (blocking > 0)
-        addRow(WebInspector.UIString("Stalled"), "blocking", 0, blocking);
+        if (timing.connectStart !== -1)
+            addRow(WebInspector.UIString("Initial connection"), "connecting", timing.connectStart, timing.connectEnd);
 
-    if (timing.proxyStart !== -1)
-        addRow(WebInspector.UIString("Proxy negotiation"), "proxy", timing.proxyStart, timing.proxyEnd);
+        if (timing.sslStart !== -1)
+            addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd);
 
-    if (timing.dnsStart !== -1)
-        addRow(WebInspector.UIString("DNS Lookup"), "dns", timing.dnsStart, timing.dnsEnd);
+        addRow(WebInspector.UIString("Request sent"), "sending", timing.sendStart, timing.sendEnd);
+        addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.sendEnd, timing.receiveHeadersEnd);
 
-    if (timing.connectStart !== -1)
-        addRow(WebInspector.UIString("Initial connection"), "connecting", timing.connectStart, timing.connectEnd);
+        if (request.endTime !== -1)
+            addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
+
+        if (!request.finished) {
+            var cell = tableElement.createChild("tr").createChild("td", "caution");
+            cell.colSpan = 2;
+            cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!"));
+        }
+    }
 
-    if (timing.sslStart !== -1)
-        addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd);
+    function createServiceWorkerTimingTable()
+    {
+        addRow(WebInspector.UIString("Stalled"), "blocking", 0, timing.serviceWorkerFetchStart);
 
-    addRow(WebInspector.UIString("Request sent"), "sending", timing.sendStart, timing.sendEnd);
-    addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.sendEnd, timing.receiveHeadersEnd);
+        addRow(WebInspector.UIString("Request to ServiceWorker"), "connecting", timing.serviceWorkerFetchStart, timing.serviceWorkerFetchEnd);
+        addRow(WebInspector.UIString("Launching ServiceWorker"), "ssl", timing.serviceWorkerFetchStart, timing.serviceWorkerFetchReady);

[horo, 2014/08/29 04:33:22]

- I think "Launching" is not appropriate. "Waiting for ServiceWorker" is better.
- Why "ssl"?

[shimazu, 2014/08/29 07:28:40]

Done.
I think "ServiceWorker Perparation" is much meaningful and changed so, and what
do you think?
On 2014/08/29 04:33:22, horo wrote:

[horo, 2014/08/29 08:09:56]

Sounds good.

+        addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.serviceWorkerFetchEnd, timing.receiveHeadersEnd);
 
-    if (request.endTime !== -1)
-        addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
+        if (request.endTime !== -1)
+            addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
 
-    if (!request.finished) {
-        var cell = tableElement.createChild("tr").createChild("td", "caution");
-        cell.colSpan = 2;
-        cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!"));
+        if (!request.finished) {
+            var cell = tableElement.createChild("tr").createChild("td", "caution");
+            cell.colSpan = 2;
+            cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!"));
+        }
     }
 
+    var timing = request.timing;
+    var blocking = firstPositive([timing.dnsStart, timing.connectStart, timing.sendStart]);
+    var endTime = firstPositive([request.endTime, request.responseReceivedTime, timing.requestTime]);
+    var total = (endTime - timing.requestTime) * 1000;
+    const chartWidth = 200;
+    var scale = chartWidth / total;
+
+    if (request.fetchedViaServiceWorker)
+        createServiceWorkerTimingTable();
+    else
+        createCommunicationTimingTable();
+
     return tableElement;
 }