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..12024a2e912fdf7285225ed3449bc13fcf6d4fe5 100644
--- a/Source/devtools/front_end/network/RequestTimingView.js
+++ b/Source/devtools/front_end/network/RequestTimingView.js
@@ -137,33 +137,55 @@ WebInspector.RequestTimingView.createTimingTable = function(request)
     var total = (endTime - timing.requestTime) * 1000;
     const chartWidth = 200;
     var scale = chartWidth / total;
+    var createCommunicationTimingTable = function() {
+        if (blocking > 0)
+            addRow(WebInspector.UIString("Stalled"), "blocking", 0, blocking);
 
-    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.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.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 (timing.connectStart !== -1)
-        addRow(WebInspector.UIString("Initial connection"), "connecting", timing.connectStart, timing.connectEnd);
+        if (timing.sslStart !== -1)
+            addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd);
 
-    if (timing.sslStart !== -1)
-        addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd);
+        addRow(WebInspector.UIString("Request sent"), "sending", timing.sendStart, timing.sendEnd);
+        addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.sendEnd, 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);
 
-    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!"));
+        }
+    };
+    var createServiceWorkerTimingTable = function() {
+        addRow(WebInspector.UIString("Stalled"), "blocking", 0, timing.fetchStart);
 
-    if (!request.finished) {
-        var cell = tableElement.createChild("tr").createChild("td", "caution");
-        cell.colSpan = 2;
-        cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!"));
-    }
+        addRow(WebInspector.UIString("Request to ServiceWorker"), "connecting", timing.fetchStart, timing.fetchEnd);
+        addRow(WebInspector.UIString("Launching ServiceWorker"), "ssl", timing.fetchStart, timing.launchServiceWorker);
+        addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.fetchEnd, timing.receiveHeadersEnd);
+
+        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.fetchedViaServiceWorker)
+        createServiceWorkerTimingTable();

[eustas, 2014/08/28 06:23:30]

Please inline create###TimingTable()

[shimazu, 2014/08/28 07:11:19]

Sure, but I think this is more readable and extensible. Are there any rules?
On 2014/08/28 06:23:30, eustas wrote:

[eustas, 2014/08/28 07:32:01]

We have no strict rules, but ve do not use var-functions until is is absolutely
necessary.

Alternatively, you can extract those functions as member functions.
Let them return array of objects describing rows.

[pfeldman, 2014/08/28 07:35:04]

We do have a strict rule to not use anonymous functions (which implies that var
is prohibited).

[shimazu, 2014/08/29 02:00:46]

Done.

+    else
+        createCommunicationTimingTable();
 
     return tableElement;
 }