DevTools: [network] Show request Start time in timing table

third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js

 /*
  * Copyright (C) 2010 Google Inc. 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
@@ skipping 46 matching lines @@
         this._request.removeEventListener(WebInspector.NetworkRequest.Events.TimingChanged, this._refresh, this);
         this._request.removeEventListener(WebInspector.NetworkRequest.Events.FinishedLoading, this._refresh, this);
         this._calculator.removeEventListener(WebInspector.NetworkTimeCalculator.Events.BoundariesChanged, this._refresh, this);
     },
 
     _refresh: function()
     {
         if (this._tableElement)
             this._tableElement.remove();
 
-        this._tableElement = WebInspector.RequestTimingView.createTimingTable(this._request, this._calculator.minimumBoundary());
+        this._tableElement = WebInspector.RequestTimingView.createTimingTable(this._request, this._calculator);
         this.element.appendChild(this._tableElement);
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /** @enum {string} */
 WebInspector.RequestTimeRangeNames = {
     Queueing: "queueing",
     Blocking: "blocking",
@@ skipping 122 matching lines @@
     }
 
     if (request.endTime !== -1)
         addRange(WebInspector.RequestTimeRangeNames.Receiving, request.responseReceivedTime, endTime);
 
     return result;
 }
 
 /**
  * @param {!WebInspector.NetworkRequest} request
- * @param {number} navigationStart
+ * @param {!WebInspector.NetworkTimeCalculator} calculator
  * @return {!Element}
  */
-WebInspector.RequestTimingView.createTimingTable = function(request, navigationStart)
+WebInspector.RequestTimingView.createTimingTable = function(request, calculator)
 {
     var tableElement = createElementWithClass("table", "network-timing-table");
     var colgroup = tableElement.createChild("colgroup");
     colgroup.createChild("col", "labels");
     colgroup.createChild("col", "bars");
     colgroup.createChild("col", "duration");
 
     var timeRanges = WebInspector.RequestTimingView.calculateRequestTimeRanges(request);
     var startTime = timeRanges[0].start;
     var endTime = timeRanges[0].end;
     var scale = 100 / (endTime - startTime);
 
     var connectionHeader;
     var dataHeader;
+    var queueingHeader;
     var totalDuration = 0;
 
+    var startTimeHeader = tableElement.createChild("thead", "network-timing-start")
+    var queuedCell = startTimeHeader.createChild("tr").createChild("td");
+    var startedCell = startTimeHeader.createChild("tr").createChild("td");
+    queuedCell.colSpan = startedCell.colSpan = 2;
+    queuedCell.createTextChild(WebInspector.UIString("Queued at %s.", calculator.formatTime(request.issueTime(), 2)));
+    startedCell.createTextChild(WebInspector.UIString("Started at %s.", calculator.formatTime(request.startTime, 2)));
+
     for (var i = 0; i < timeRanges.length; ++i) {
         var range = timeRanges[i];
         var rangeName = range.name;
         if (rangeName === WebInspector.RequestTimeRangeNames.Total) {
             totalDuration = range.end - range.start;
             continue;
         }
-        if (WebInspector.RequestTimingView.ConnectionSetupRangeNames[rangeName]) {
+        if (rangeName === WebInspector.RequestTimeRangeNames.Queueing) {
+            queueingHeader = tableElement.createChild("tr", "network-timing-table-header");
+            queueingHeader.createChild("td").createTextChild("Resource Scheduling");
+            queueingHeader.createChild("td").createTextChild("");
+            queueingHeader.createChild("td").createTextChild("TIME");
+        } else if (WebInspector.RequestTimingView.ConnectionSetupRangeNames[rangeName]) {
             if (!connectionHeader) {
                 connectionHeader = tableElement.createChild("tr", "network-timing-table-header");
                 connectionHeader.createChild("td").createTextChild("Connection Setup");
                 connectionHeader.createChild("td").createTextChild("");
                 connectionHeader.createChild("td").createTextChild("TIME");
             }
         } else {
             if (!dataHeader) {
                 dataHeader = tableElement.createChild("tr", "network-timing-table-header");
                 dataHeader.createChild("td").createTextChild("Request/Response");
@@ skipping 19 matching lines @@
     }
 
     if (!request.finished) {
         var cell = tableElement.createChild("tr").createChild("td", "caution");
         cell.colSpan = 3;
         cell.createTextChild(WebInspector.UIString("CAUTION: request is not finished yet!"));
     }
 
     var footer = tableElement.createChild("tr", "network-timing-footer");
     var note = footer.createChild("td");
-    note.colSpan = 2;
+    note.colSpan = 1;
     note.appendChild(WebInspector.linkifyDocumentationURLAsNode("profile/network-performance/resource-loading#view-network-timing-details-for-a-specific-resource", WebInspector.UIString("Explanation")));
+    footer.createChild("td");
     footer.createChild("td").createTextChild(Number.secondsToString(totalDuration, true));
 
     return tableElement;
 }