[Devtools] Fixed scrollbar offset in new timeline experiment

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 {number} headerHeight
  * @param {!WebInspector.NetworkTransferTimeCalculator} calculator
@@ skipping 18 matching lines @@
     this._rowHeight = rowHeight;
     this._headerHeight = headerHeight;
     this._calculator = calculator;
 
     this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(300, 300);
 
     this._vScrollElement = this.contentElement.createChild("div", "network-timeline-v-scroll");
     this._vScrollElement.addEventListener("scroll", this._onScroll.bind(this), { passive: true });
     this._vScrollElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), { passive: true });
-    this._vScrollContent = this._vScrollElement.createChild("div");
+    this._vScrollContent = this._vScrollElement.createChild("div", "network-timeline-v-scroll-content");
 
     this.element.addEventListener("mousewheel", this._onMouseWheel.bind(this), { passive: true });
     this.element.addEventListener("mousemove", this._onMouseMove.bind(this), true);
     this.element.addEventListener("mouseleave", this.setHoveredRequest.bind(this, null), true);
 
     this._boundScrollContainer = scrollContainer;
     this._boundScrollContainer.addEventListener("mousewheel", event => {
         event.consume(true);
         this._onMouseWheel(event);
     }, true);
@@ skipping 120 matching lines @@
     {
         this._rowHeight = height;
     },
 
     /**
      * @param {number} height
      */
     setHeaderHeight: function(height)
     {
         this._headerHeight = height;
+        this._vScrollElement.style.marginTop = height + "px";
     },
 
     /**
      * @param {!WebInspector.NetworkTimeCalculator} calculator
      */
     setCalculator: function(calculator)
     {
         this._calculator = calculator;
     },
 
@@ skipping 47 matching lines @@
     },
 
     /**
      * @param {!{requests: !Array<!WebInspector.NetworkRequest>, navigationRequest: ?WebInspector.NetworkRequest}=} requestData
      */
     update: function(requestData)
     {
         if (requestData) {
             this._requestData = requestData.requests;
             this._navigationRequest = requestData.navigationRequest;
+            this._calculateCanvasSize();
         }
         this.element.window().cancelAnimationFrame(this._updateRequestID);
         this._updateRequestID = null;
 
         this._startTime = this._calculator.minimumBoundary();
         this._endTime = this._calculator.maximumBoundary();
         this._resetCanvas();
         this._draw();
     },
 
@@ skipping 13 matching lines @@
         this._canvas.style.width = this._offsetWidth + "px";
         this._canvas.style.height = this._offsetHeight + "px";
     },
 
     /**
      * @override
      */
     onResize: function()
     {
         WebInspector.VBox.prototype.onResize.call(this);
-        this._offsetWidth = this.contentElement.offsetWidth;
+        this._calculateCanvasSize();
+        this.scheduleDraw();
+    },
+
+    _calculateCanvasSize: function()
+    {
+        var scrollbarWidth = this._vScrollElement.offsetWidth;
+        // Offset by 1 px because css needs 1px to compute height and add scrollbar.
+        if (scrollbarWidth)
+            scrollbarWidth -= 1;
+        this._offsetWidth = this.contentElement.offsetWidth - scrollbarWidth;
         this._offsetHeight = this.contentElement.offsetHeight;
-        this.scheduleDraw();
     },
 
     /**
      * @param {!WebInspector.RequestTimeRangeNames} type
      * @return {string}
      */
     _colorForType: function(type)
     {
         var types = WebInspector.RequestTimeRangeNames;
         switch (type) {
@@ skipping 335 matching lines @@
             color = this._rowNavigationRequestColor;
 
         context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, this._rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 }