[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 8c9eef01db510da926dc2b7df77b7b0fe393a5a0..1c9ad5427a4f14e178fc5acf1d533e7419e22aaf 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
@@ -87,7 +87,7 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
       return;
 
     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);
 
@@ -422,11 +422,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);
+      labels = this._calculator.computeBarGraphLabels(request);
       this._drawSimplifiedBarDetails(context, labels.left, labels.right, start, mid, mid + barWidth + borderOffset);
     }
 
+    if (!this._calculator.startAtZero) {
+      var queueingRange = WebInspector.RequestTimingView.calculateRequestTimeRanges(request, 0)
+                  .find(data => data.name === WebInspector.RequestTimeRangeNames.Total);

[dgozman, 2016/11/04 16:41:00]

formatting is off

[allada, 2016/11/04 18:17:59]

Done.

+      var leftLabelWidth = labels ? context.measureText(labels.left).width : 0;
+      var leftTextPlacedInBar = leftLabelWidth < mid - start;
+      const wiskerTextPadding = 13;
+      var textOffset = (labels && !leftTextPlacedInBar) ? leftLabelWidth + wiskerTextPadding : 0;
+      var queueingStart = this._timeToPosition(queueingRange.start);
+      if (start - textOffset > queueingStart) {
+        context.beginPath();
+        context.globalAlpha = 1;
+        context.strokeStyle = WebInspector.themeSupport.patchColor('#a5a5a5', WebInspector.ThemeSupport.ColorUsage.Foreground);

[dgozman, 2016/11/04 16:41:01]

120 characters :-D

[allada, 2016/11/04 18:17:59]

Done.

+        context.moveTo(queueingStart, Math.floor(height / 2));
+        context.lineTo(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();
   }
 
@@ -446,8 +470,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);