DevTools - network - implement the secureConnectionStart property for the PerformanceTiming

https://github.com/MoonchildProductions/moebius/pull/116
("/testing" and "/toolkit" in in the previous commit)

devtools/client/locales/en-US/netmonitor.properties

@@ -581,6 +581,11 @@ netmonitor.timings.blocked=Blocked:
 # in a "dns" state.
 netmonitor.timings.dns=DNS resolution:
 
+# LOCALIZATION NOTE (netmonitor.timings.ssl): This is the label displayed
+# in the network details timings tab identifying the amount of time spent
+# in a "tls" handshake state.
+netmonitor.timings.ssl=TLS setup:
+
 # LOCALIZATION NOTE (netmonitor.timings.connect): This is the label displayed
 # in the network details timings tab identifying the amount of time spent
 # in a "connect" state.

devtools/client/netmonitor/netmonitor-view.js

@@ -963,7 +963,7 @@ NetworkDetailsView.prototype = {
     if (!response) {
       return;
     }
-    let { blocked, dns, connect, send, wait, receive } = response.timings;
+    let { blocked, dns, connect, ssl, send, wait, receive } = response.timings;
 
     let tabboxWidth = $("#details-pane").getAttribute("width");
 
@@ -988,6 +988,11 @@ NetworkDetailsView.prototype = {
     $("#timings-summary-connect .requests-menu-timings-total")
       .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", connect));
 
+    $("#timings-summary-ssl .requests-menu-timings-box")
+      .setAttribute("width", ssl * scale);
+    $("#timings-summary-ssl .requests-menu-timings-total")
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", ssl));
+
     $("#timings-summary-send .requests-menu-timings-box")
       .setAttribute("width", send * scale);
     $("#timings-summary-send .requests-menu-timings-total")
@@ -1007,6 +1012,8 @@ NetworkDetailsView.prototype = {
       .style.transform = "translateX(" + (scale * blocked) + "px)";
     $("#timings-summary-connect .requests-menu-timings-box")
       .style.transform = "translateX(" + (scale * (blocked + dns)) + "px)";
+    $("#timings-summary-ssl .requests-menu-timings-box")
+      .style.transform = "translateX(" + (scale * blocked) + "px)";
     $("#timings-summary-send .requests-menu-timings-box")
       .style.transform =
         "translateX(" + (scale * (blocked + dns + connect)) + "px)";
@@ -1022,6 +1029,8 @@ NetworkDetailsView.prototype = {
       .style.transform = "translateX(" + (scale * blocked) + "px)";
     $("#timings-summary-connect .requests-menu-timings-total")
       .style.transform = "translateX(" + (scale * (blocked + dns)) + "px)";
+    $("#timings-summary-ssl .requests-menu-timings-total")
+      .style.transform = "translateX(" + (scale * blocked) + "px)";
     $("#timings-summary-send .requests-menu-timings-total")
       .style.transform =
         "translateX(" + (scale * (blocked + dns + connect)) + "px)";

devtools/client/netmonitor/netmonitor.xul

@@ -478,6 +478,14 @@
                     <hbox class="requests-menu-timings-box connect"/>
                     <label class="plain requests-menu-timings-total"/>
                   </hbox>
+                  <hbox id="timings-summary-ssl"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.timings.ssl"/>
+                    <hbox class="requests-menu-timings-box ssl"/>
+                    <label class="plain requests-menu-timings-total"/>
+                  </hbox>
                   <hbox id="timings-summary-send"
                         class="tabpanel-summary-container"
                         align="center">

devtools/client/netmonitor/requests-menu-view.js

@@ -1099,7 +1099,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
    */
   _createWaterfallView: function (item, timings, fromCache) {
     let { target } = item;
-    let sections = ["blocked", "dns", "connect", "send", "wait", "receive"];
+    let sections = ["blocked", "dns", "connect", "ssl", "send", "wait", "receive"];
     // Skipping "blocked" because it doesn't work yet.
 
     let timingsNode = $(".requests-menu-timings", target);

devtools/client/netmonitor/test/browser_net_simple-request-data.js

@@ -226,6 +226,8 @@ function test() {
         "The eventTimings attachment has an incorrect |timings.blocked| property.");
       is(typeof requestItem.attachment.eventTimings.timings.dns, "number",
         "The eventTimings attachment has an incorrect |timings.dns| property.");
+      is(typeof requestItem.attachment.eventTimings.timings.ssl, "number",
+        "The eventTimings attachment has an incorrect |timings.ssl| property.");
       is(typeof requestItem.attachment.eventTimings.timings.connect, "number",
         "The eventTimings attachment has an incorrect |timings.connect| property.");
       is(typeof requestItem.attachment.eventTimings.timings.send, "number",

devtools/client/themes/netmonitor.css

@@ -59,6 +59,7 @@
 
   --timing-blocked-color: rgba(235, 83, 104, 0.8);
   --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+  --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
   --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
@@ -74,6 +75,7 @@
 
   --timing-blocked-color: rgba(235, 83, 104, 0.8);
   --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+  --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */
   --timing-wait-color: rgba(95, 136, 176, 0.8); /* blue grey */
@@ -505,6 +507,10 @@
   background-color: var(--timing-connect-color);
 }
 
+.requests-menu-timings-box.ssl {
+  background-color: var(--timing-ssl-color);
+}
+
 .requests-menu-timings-box.send {
   background-color: var(--timing-send-color);
 }

devtools/shared/webconsole/network-monitor.js

@@ -732,7 +732,9 @@ NetworkMonitor.prototype = {
     0x804b0004: "STATUS_CONNECTED_TO",
     0x804b0005: "STATUS_SENDING_TO",
     0x804b000a: "STATUS_WAITING_FOR",
-    0x804b0006: "STATUS_RECEIVING_FROM"
+    0x804b0006: "STATUS_RECEIVING_FROM",
+    0x804b000c: "STATUS_TLS_STARTING",
+    0x804b000d: "STATUS_TLS_ENDING"
   },
 
   httpDownloadActivities: [
@@ -1406,6 +1408,7 @@ NetworkMonitor.prototype = {
         timings: {
           blocked: 0,
           dns: 0,
+          ssl: 0,
           connect: 0,
           send: 0,
           wait: 0,
@@ -1440,6 +1443,36 @@ NetworkMonitor.prototype = {
       harTimings.connect = -1;
     }
 
+    if (timings.STATUS_TLS_STARTING && timings.STATUS_TLS_ENDING) {
+      harTimings.ssl = timings.STATUS_TLS_ENDING.last -
+                           timings.STATUS_TLS_STARTING.first;
+    } else {
+      harTimings.ssl = -1;
+    }
+
+    // sometimes the connection information events are attached to a speculative
+    // channel instead of this one, but necko might glue them back together in the
+    // nsITimedChannel interface used by Resource and Navigation Timing
+    let timedChannel = httpActivity.channel.QueryInterface(Ci.nsITimedChannel);
+
+    if ((harTimings.connect <= 0) && timedChannel) {
+      if (timedChannel.secureConnectionStartTime > timedChannel.connectStartTime) {
+        harTimings.connect =
+          timedChannel.secureConnectionStartTime - timedChannel.connectStartTime;
+        harTimings.ssl =
+          timedChannel.connectEndTime - timedChannel.secureConnectionStartTime;
+      } else {
+        harTimings.connect =
+          timedChannel.connectEndTime - timedChannel.connectStartTime;
+        harTimings.ssl = -1;
+      }
+    }
+
+    if ((harTimings.dns <= 0) && timedChannel) {
+      harTimings.dns =
+        timedChannel.domainLookupEndTime - timedChannel.domainLookupStartTime;
+    }
+
     if (timings.STATUS_SENDING_TO) {
       harTimings.send = timings.STATUS_SENDING_TO.last - timings.STATUS_SENDING_TO.first;
     } else if (timings.REQUEST_HEADER && timings.REQUEST_BODY_SENT) {