[Devtools] Fixed scrollers for new timeline canvas on mac

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.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {number} rowHeight
  * @param {!WebInspector.NetworkTimeCalculator} calculator
  */
 WebInspector.NetworkTimelineColumn = function(rowHeight, calculator)
 {
     // TODO(allada) Make this a shadowDOM when the NetworkTimelineColumn gets moved into NetworkLogViewColumns.
     WebInspector.VBox.call(this, 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;
 
     this._rightPadding = 0;
 
     this._rowHeight = rowHeight;
     this._headerHeight = 0;
@@ skipping 63 matching lines @@
      */
     _getPopoverAnchor: function(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);
 
-        if (event.offsetX < start || event.offsetX > 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.offsetY < y || event.offsetY > y + barHeight)
+        if (event.clientY < this._canvasPosition.top + y || event.clientY > this._canvasPosition.top + y + barHeight)
             return;
 
         var anchorBox = this.element.boxInWindow();
         anchorBox.x += start;
         anchorBox.y += y;
         anchorBox.width = end - start;
         anchorBox.height = barHeight;
         return anchorBox;
     },
 
@@ skipping 109 matching lines @@
     {
         WebInspector.VBox.prototype.onResize.call(this);
         this._calculateCanvasSize();
         this.scheduleDraw();
     },
 
     _calculateCanvasSize: function()
     {
         this._offsetWidth = this.contentElement.offsetWidth - this._rightPadding;
         this._offsetHeight = this.contentElement.offsetHeight;
+        this._canvasPosition = this._canvas.getBoundingClientRect();
     },
 
     /**
      * @param {!WebInspector.RequestTimeRangeNames} type
      * @return {string}
      */
     _colorForType: function(type)
     {
         var types = WebInspector.RequestTimeRangeNames;
         switch (type) {
@@ skipping 361 matching lines @@
             color = this._rowNavigationRequestColor;
 
         context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, this._rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 };