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

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

Index: third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js b/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js
index 9c7a27733854dd4a36ae3e837357bf695995deeb..c7783e8773b02b1621cc709cd608dd2da100a5b4 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js
@@ -175,25 +175,33 @@ Network.RequestTimingView = class extends UI.VBox {
 
   /**
    * @param {!SDK.NetworkRequest} request
-   * @param {number} navigationStart
+   * @param {!Network.NetworkTimeCalculator} calculator
    * @return {!Element}
    */
-  static createTimingTable(request, navigationStart) {
+  static createTimingTable(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 = Network.RequestTimingView.calculateRequestTimeRanges(request, navigationStart);
+    var timeRanges = Network.RequestTimingView.calculateRequestTimeRanges(request, calculator.minimumBoundary());
     var startTime = timeRanges.map(r => r.start).reduce((a, b) => Math.min(a, b));
     var endTime = timeRanges.map(r => r.end).reduce((a, b) => Math.max(a, b));
     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(Common.UIString('Queued at %s', calculator.formatValue(request.issueTime(), 2)));
+    startedCell.createTextChild(Common.UIString('Started at %s', calculator.formatValue(request.startTime, 2)));
+
     for (var i = 0; i < timeRanges.length; ++i) {
       var range = timeRanges[i];
       var rangeName = range.name;
@@ -203,9 +211,14 @@ Network.RequestTimingView = class extends UI.VBox {
       }
       if (rangeName === Network.RequestTimeRangeNames.Push) {
         createHeader(Common.UIString('Server Push'));
+      } else if (rangeName === Network.RequestTimeRangeNames.Queueing) {
+          queueingHeader = tableElement.createChild('tr', 'network-timing-table-header');
+          queueingHeader.createChild('td').createTextChild(Common.UIString('Resource Scheduling'));
+          queueingHeader.createChild('td').createTextChild('');
+          queueingHeader.createChild('td').createTextChild(Common.UIString('TIME'));
       } else if (Network.RequestTimingView.ConnectionSetupRangeNames.has(rangeName)) {
         if (!connectionHeader)
-          connectionHeader = createHeader(Common.UIString('Connection Setup'));
+          connectionHeader = createHeader(Common.UIString('Connection Start'));
       } else {
         if (!dataHeader)
           dataHeader = createHeader(Common.UIString('Request/Response'));
@@ -235,9 +248,10 @@ Network.RequestTimingView = class extends UI.VBox {
 
     var footer = tableElement.createChild('tr', 'network-timing-footer');
     var note = footer.createChild('td');
-    note.colSpan = 2;
+    note.colSpan = 1;
     note.appendChild(
         UI.createDocumentationLink('network-performance/reference#timing', Common.UIString('Explanation')));
+    footer.createChild('td');
     footer.createChild('td').createTextChild(Number.secondsToString(totalDuration, true));
 
     var serverTimings = request.serverTimings;
@@ -322,7 +336,7 @@ Network.RequestTimingView = class extends UI.VBox {
     if (this._tableElement)
       this._tableElement.remove();
 
-    this._tableElement = Network.RequestTimingView.createTimingTable(this._request, this._calculator.minimumBoundary());
+    this._tableElement = Network.RequestTimingView.createTimingTable(this._request, this._calculator);
     this.element.appendChild(this._tableElement);
   }
 };