[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 71 matching lines @@
    * @param {!Event} event
    * @return {!AnchorBox|undefined}
    */
   _getPopoverAnchor(element, event) {
     if (!this._hoveredRequest)
       return;
     var useTimingBars =
         !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 {
       var range = this._getSimplifiedBarRange(this._hoveredRequest, 0);
       var start = range.start;
       var end = range.end;
     }
 
     if (event.clientX < this._canvasPosition.left + start || event.clientX > this._canvasPosition.left + end)
       return;
@@ skipping 75 matching lines @@
 
   scheduleDraw() {
     if (this._updateRequestID)
       return;
     this._updateRequestID = this.element.window().requestAnimationFrame(() => this.update());
   }
 
   /**
    * @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)
       this._scrollTop = scrollTop;
     if (requestData) {
       this._requestData = requestData.requests;
       this._navigationRequest = requestData.navigationRequest;
       this._calculateCanvasSize();
     }
     if (eventDividers !== undefined)
@@ skipping 233 matching lines @@
     context.fill();
     context.stroke();
 
     var barWidth = Math.max(2, ranges.end - ranges.mid);
     context.beginPath();
     context.globalAlpha = 1;
     context.rect(ranges.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);
-      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();
   }
 
   /**
    * @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 93 matching lines @@
       }
       if (this._navigationRequest === request)
         return this._rowNavigationRequestColor;
       if (rowNumber % 2 === 1)
         return 'transparent';
       return this._rowStripeColor;
     }
   }
 };
 
+/**
+ * @typedef {{requests: !Array<!WebInspector.NetworkRequest>, navigationRequest: ?WebInspector.NetworkRequest}}
+ */
+WebInspector.NetworkTimelineColumn.RequestData;
+
 WebInspector.NetworkTimelineColumn._colorsForResourceType = {
   document: 'hsl(215, 100%, 80%)',
   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%)'
 };