[Devtools] Added "wiskers" to new network timeline for colored mode

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

Index: third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
index fce1d1c1643912a5dcd1611291242181334cbfc0..a3b6a5921c8184adf67a555932cb2d01c9cbb1f9 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
@@ -89,7 +89,7 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
         !WebInspector.moduleSetting('networkColorCodeResourceTypes').get() && !this._calculator.startAtZero;
     if (useTimingBars) {
       var range = WebInspector.RequestTimingView.calculateRequestTimeRanges(this._hoveredRequest, 0)
-                      .find(data => data.name === 'total');
+          .find(data => data.name === WebInspector.RequestTimeRangeNames.Total);
       var start = this._timeToPosition(range.start);
       var end = this._timeToPosition(range.end);
     } else {
@@ -185,7 +185,7 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
   /**
    * @param {number=} scrollTop
    * @param {!Map<string, !Array<number>>=} eventDividers
-   * @param {!{requests: !Array<!WebInspector.NetworkRequest>, navigationRequest: ?WebInspector.NetworkRequest}=} requestData
+   * @param {!WebInspector.NetworkTimelineColumn.RequestData=} requestData
    */
   update(scrollTop, eventDividers, requestData) {
     if (scrollTop !== undefined)
@@ -439,9 +439,35 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
     context.fill();
     context.stroke();
 
+    /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */
+    var labels = null;
     if (request === this._hoveredRequest) {
-      var labels = this._calculator.computeBarGraphLabels(request);
-      this._drawSimplifiedBarDetails(context, labels.left, labels.right, ranges.start, ranges.mid, ranges.mid + barWidth + borderOffset);
+      labels = this._calculator.computeBarGraphLabels(request);
+      this._drawSimplifiedBarDetails(
+          context, labels.left, labels.right, ranges.start, ranges.mid, ranges.mid + barWidth + borderOffset);
+    }
+
+    if (!this._calculator.startAtZero) {
+      var queueingRange = WebInspector.RequestTimingView.calculateRequestTimeRanges(request, 0)
+          .find(data => data.name === WebInspector.RequestTimeRangeNames.Total);
+      var leftLabelWidth = labels ? context.measureText(labels.left).width : 0;
+      var leftTextPlacedInBar = leftLabelWidth < ranges.mid - ranges.start;
+      const wiskerTextPadding = 13;
+      var textOffset = (labels && !leftTextPlacedInBar) ? leftLabelWidth + wiskerTextPadding : 0;
+      var queueingStart = this._timeToPosition(queueingRange.start);
+      if (ranges.start - textOffset > queueingStart) {
+        context.beginPath();
+        context.globalAlpha = 1;
+        context.strokeStyle = WebInspector.themeSupport.patchColor(
+            '#a5a5a5', WebInspector.ThemeSupport.ColorUsage.Foreground);
+        context.moveTo(queueingStart, Math.floor(height / 2));
+        context.lineTo(ranges.start - textOffset, Math.floor(height / 2));
+
+        const wiskerHeight = height / 2;
+        context.moveTo(queueingStart + borderOffset, wiskerHeight / 2);
+        context.lineTo(queueingStart + borderOffset, height - wiskerHeight / 2 - 1);
+        context.stroke();
+      }
     }
 
     context.restore();
@@ -463,8 +489,8 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
     var height = this._getBarHeight();
     var leftLabelWidth = context.measureText(leftText).width;
     var rightLabelWidth = context.measureText(rightText).width;
-    context.fillStyle = '#444';
-    context.strokeStyle = '#444';
+    context.fillStyle = WebInspector.themeSupport.patchColor('#444', WebInspector.ThemeSupport.ColorUsage.Foreground);
+    context.strokeStyle = WebInspector.themeSupport.patchColor('#444', WebInspector.ThemeSupport.ColorUsage.Foreground);
     if (leftLabelWidth < midX - startX) {
       var midBarX = startX + (midX - startX) / 2 - leftLabelWidth / 2;
       context.fillText(leftText, midBarX, this._fontSize);
@@ -578,6 +604,11 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
   }
 };
 
+/**
+ * @typedef {{requests: !Array<!WebInspector.NetworkRequest>, navigationRequest: ?WebInspector.NetworkRequest}}
+ */
+WebInspector.NetworkTimelineColumn.RequestData;
+
 WebInspector.NetworkTimelineColumn._colorsForResourceType = {
   document: 'hsl(215, 100%, 80%)',
   font: 'hsl(8, 100%, 80%)',