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

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /**
  * @unrestricted
  */
 WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
   /**
    * @param {number} rowHeight
    * @param {!WebInspector.NetworkTimeCalculator} calculator
@@ skipping 69 matching lines @@
   /**
    * @param {!Element} element
    * @param {!Event} event
    * @return {!AnchorBox|undefined}
    */
   _getPopoverAnchor(element, event) {
     if (!this._hoveredRequest)
       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);
 
     if (event.clientX < this._canvasPosition.left + start || event.clientX > this._canvasPosition.left + end)
       return;
 
     var rowIndex = this._requestData.findIndex(request => this._hoveredRequest === request);
     var barHeight = this._getBarHeight(range.name);
     var y = this._headerHeight + (this._rowHeight * rowIndex - this._scrollTop) + ((this._rowHeight - barHeight) / 2);
 
@@ skipping 314 matching lines @@
     context.fill();
     context.stroke();
 
     var barWidth = Math.max(2, end - mid);
     context.beginPath();
     context.globalAlpha = 1;
     context.rect(mid, 0, barWidth, height - borderWidth);
     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();
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {string} leftText
    * @param {string} rightText
    * @param {number} startX
    * @param {number} midX
    * @param {number} endX
    */
   _drawSimplifiedBarDetails(context, leftText, rightText, startX, midX, endX) {
     /** @const */
     var barDotLineLength = 10;
 
     context.save();
     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);
     } else if (barDotLineLength + leftLabelWidth + this._leftPadding < startX) {
       context.beginPath();
       context.arc(startX, Math.floor(height / 2), 2, 0, 2 * Math.PI);
       context.fill();
       context.fillText(leftText, startX - leftLabelWidth - barDotLineLength - 1, this._fontSize);
       context.beginPath();
       context.lineWidth = 1;
@@ skipping 105 matching lines @@
   font: 'hsl(8, 100%, 80%)',
   media: 'hsl(272, 64%, 80%)',
   image: 'hsl(272, 64%, 80%)',
   script: 'hsl(31, 100%, 80%)',
   stylesheet: 'hsl(90, 50%, 80%)',
   texttrack: 'hsl(8, 100%, 80%)',
   websocket: 'hsl(0, 0%, 95%)',
   xhr: 'hsl(53, 100%, 80%)',
   other: 'hsl(0, 0%, 95%)'
 };