[Devtools] Fixed new timeline simplified bars popover hover

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
    */
   constructor(rowHeight, calculator) {
     // TODO(allada) Make this a shadowDOM when the NetworkTimelineColumn gets moved into NetworkLogViewColumns.
     super(false);
     this.registerRequiredCSS('network/networkTimelineColumn.css');
 
     this._canvas = this.contentElement.createChild('canvas');
     this._canvas.tabIndex = 1;
     this.setDefaultFocusedElement(this._canvas);
     this._canvasPosition = this._canvas.getBoundingClientRect();
 
     /** @const */
     this._leftPadding = 5;
     /** @const */
     this._fontSize = 10;
+    /** @const */
+    this._borderOffset = .5;

[dgozman, 2016/11/03 21:52:43]

I'm not sure what the styleguide says, but I prefer 0.5 :-)

[allada, 2016/11/03 22:31:22]

Done.

 
     this._rightPadding = 0;
 
     this._rowHeight = rowHeight;
     this._headerHeight = 0;
     this._calculator = calculator;
 
     this._popoverHelper = new WebInspector.PopoverHelper(this.element);
     this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(300, 300);
@@ skipping 42 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');
-    var start = this._timeToPosition(range.start);
-    var end = this._timeToPosition(range.end);
+    var useTimingBars =
+        !WebInspector.moduleSetting('networkColorCodeResourceTypes').get() && !this._calculator.startAtZero;
+    if (useTimingBars) {
+      var range = WebInspector.RequestTimingView.calculateRequestTimeRanges(this._hoveredRequest, 0)
+                      .find(data => data.name === 'total');
+      var start = this._timeToPosition(range.start);
+      var end = this._timeToPosition(range.end);
+    } else {
+      var range = this._getSimplifiedBarRange(this._hoveredRequest);
+      var start = range.start;
+      var end = 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);
 
     if (event.clientY < this._canvasPosition.top + y || event.clientY > this._canvasPosition.top + y + barHeight)
       return;
@@ skipping 276 matching lines @@
     hsla[1] -= Math.min(hsla[1], 0.28);
     hsla[2] -= Math.min(hsla[2], 0.15);
     var gradient = context.createLinearGradient(0, 0, 0, this._getBarHeight());
     gradient.addColorStop(0, color);
     gradient.addColorStop(1, /** @type {string} */ (parsedColor.asString(null)));
     this._colorsForResourceTypeCache.set(color, gradient);
     return gradient;
   }
 
   /**
+   * @param {!WebInspector.NetworkRequest} request
+   * @return {!{start: number, mid: number, end: number}}
+   */
+  _getSimplifiedBarRange(request) {
+    var drawWidth = this._offsetWidth - this._leftPadding;
+    var percentages = this._calculator.computeBarGraphPercentages(request);
+    return {
+      start: this._leftPadding + Math.floor((percentages.start / 100) * drawWidth) + this._borderOffset,
+      mid: this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth) + this._borderOffset,
+      end: this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) + this._borderOffset
+    };
+  }
+
+  /**
    * @param {!CanvasRenderingContext2D} context
    * @param {!WebInspector.NetworkRequest} request
    * @param {number} y
    */
   _drawSimplifiedBars(context, request, y) {
-    /** @const */
-    var borderWidth = 1;
+    const borderWidth = 1;

[dgozman, 2016/11/03 21:52:43]

Should this be 2 * this._borderOffset?

[allada, 2016/11/03 22:31:22]

Done.

 
     context.save();
-    var percentages = this._calculator.computeBarGraphPercentages(request);
-    var drawWidth = this._offsetWidth - this._leftPadding;
-    var borderOffset = borderWidth % 2 === 0 ? 0 : .5;
-    var start = this._leftPadding + Math.floor((percentages.start / 100) * drawWidth) + borderOffset;
-    var mid = this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth) + borderOffset;
-    var end = this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) + borderOffset;
+    var ranges = this._getSimplifiedBarRange(request);
     var height = this._getBarHeight();
     y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidth / 2;
 
     context.translate(0, y);
     context.fillStyle = this._colorForResourceType(context, request);
     context.strokeStyle = this._borderColorForResourceType(request);
     context.lineWidth = borderWidth;
 
     context.beginPath();
     context.globalAlpha = .5;
-    context.rect(start, 0, mid - start, height - borderWidth);
+    context.rect(ranges.start, 0, ranges.mid - ranges.start, height - borderWidth);
     context.fill();
     context.stroke();
 
-    var barWidth = Math.max(2, end - mid);
+    var barWidth = Math.max(2, ranges.end - ranges.mid);
     context.beginPath();
     context.globalAlpha = 1;
-    context.rect(mid, 0, barWidth, height - borderWidth);
+    context.rect(ranges.mid, 0, barWidth, height - borderWidth);
     context.fill();
     context.stroke();
 
     if (request === this._hoveredRequest) {
       var labels = this._calculator.computeBarGraphLabels(request);
-      this._drawSimplifiedBarDetails(context, labels.left, labels.right, start, mid, mid + barWidth + borderOffset);
+      this._drawSimplifiedBarDetails(context, labels.left, labels.right, ranges.start, ranges.mid, ranges.mid + barWidth + this._borderOffset);
     }
 
     context.restore();
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {string} leftText
    * @param {string} rightText
    * @param {number} startX
@@ skipping 128 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%)'
 };