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..48d39837cc466496b53dfde58a6f9d0940d59ff3 100644
--- a/Source/devtools/front_end/network/RequestTimingView.js
+++ b/Source/devtools/front_end/network/RequestTimingView.js
@@ -131,33 +131,53 @@ 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 (timing.connectStart !== -1)
+            addRow(WebInspector.UIString("Initial connection"), "connecting", timing.connectStart, timing.connectEnd);
 
-    if (blocking > 0)
-        addRow(WebInspector.UIString("Stalled"), "blocking", 0, blocking);
+        if (timing.sslStart !== -1)
+            addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd);
 
-    if (timing.proxyStart !== -1)
-        addRow(WebInspector.UIString("Proxy negotiation"), "proxy", timing.proxyStart, timing.proxyEnd);
+        addRow(WebInspector.UIString("Request sent"), "sending", timing.sendStart, timing.sendEnd);
+        addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.sendEnd, timing.receiveHeadersEnd);
 
-    if (timing.dnsStart !== -1)
-        addRow(WebInspector.UIString("DNS Lookup"), "dns", timing.dnsStart, timing.dnsEnd);
+        if (request.endTime !== -1)
+            addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
+    }
 
-    if (timing.connectStart !== -1)
-        addRow(WebInspector.UIString("Initial connection"), "connecting", timing.connectStart, timing.connectEnd);
+    function createServiceWorkerTimingTable()
+    {
+        addRow(WebInspector.UIString("Stalled"), "blocking", 0, timing.serviceWorkerFetchStart);
 
-    if (timing.sslStart !== -1)
-        addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd);
+        addRow(WebInspector.UIString("Request to ServiceWorker"), "serviceworker", timing.serviceWorkerFetchStart, timing.serviceWorkerFetchEnd);
+        addRow(WebInspector.UIString("ServiceWorker Preparation"), "serviceworker", timing.serviceWorkerFetchStart, timing.serviceWorkerFetchReady);
+        addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.serviceWorkerFetchEnd, timing.receiveHeadersEnd);
 
-    addRow(WebInspector.UIString("Request sent"), "sending", timing.sendStart, timing.sendEnd);
-    addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.sendEnd, timing.receiveHeadersEnd);
+        if (request.endTime !== -1)
+            addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
+    }
+
+    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.endTime !== -1)
-        addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
+    if (request.fetchedViaServiceWorker)
+        createServiceWorkerTimingTable();
+    else
+        createCommunicationTimingTable();
 
     if (!request.finished) {
         var cell = tableElement.createChild("tr").createChild("td", "caution");