DevTools: fix network grid scroll to bottom, render group node frame icon.

third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.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.
 Network.NetworkWaterfallColumn = class extends UI.VBox {
   /**
-   * @param {number} rowHeight
    * @param {!Network.NetworkTimeCalculator} calculator
    */
-  constructor(rowHeight, calculator) {
+  constructor(calculator) {
     // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets moved into NetworkLogViewColumns.
     super(false);
     this.registerRequiredCSS('network/networkWaterfallColumn.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._scrollTop = 0;
 
-    this._rowHeight = rowHeight;
     this._headerHeight = 0;
     this._calculator = calculator;
 
+    // this._rawRowHeight captures model height (41 or 21px),
+    // this._rowHeight is computed height of the row in CSS pixels, can be 20.8 for zoomed-in content.
+    this._rawRowHeight = 0;
+    this._rowHeight = 0;
+
     this._offsetWidth = 0;
     this._offsetHeight = 0;
     this._startTime = this._calculator.minimumBoundary();
     this._endTime = this._calculator.maximumBoundary();
 
     this._popoverHelper = new UI.PopoverHelper(this.element, this._getPopoverRequest.bind(this));
     this._popoverHelper.setHasPadding(true);
     this._popoverHelper.setTimeout(300, 300);
 
     /** @type {!Array<!Network.NetworkNode>} */
@@ skipping 200 matching lines @@
       this._hoveredNode.setHovered(false, false);
     this._hoveredNode = node;
     if (this._hoveredNode)
       this._hoveredNode.setHovered(true, highlightInitiatorChain);
   }
 
   /**
    * @param {number} height
    */
   setRowHeight(height) {
-    this._rowHeight = height;
+    this._rawRowHeight = height;
+    this._updateRowHeight();
+  }
+
+  _updateRowHeight() {
+    this._rowHeight = Math.floor(this._rawRowHeight * window.devicePixelRatio) / window.devicePixelRatio;
   }
 
   /**
    * @param {number} height
    */
   setHeaderHeight(height) {
     this._headerHeight = height;
   }
 
   /**
@@ skipping 61 matching lines @@
     this._canvas.height = this._offsetHeight * ratio;
     this._canvas.style.width = this._offsetWidth + 'px';
     this._canvas.style.height = this._offsetHeight + 'px';
   }
 
   /**
    * @override
    */
   onResize() {
     super.onResize();
+    this._updateRowHeight();
     this._calculateCanvasSize();
     this.scheduleDraw();
   }
 
   _calculateCanvasSize() {
     this._offsetWidth = this.contentElement.offsetWidth - this._rightPadding;
     this._offsetHeight = this.contentElement.offsetHeight;
     this._calculator.setDisplayWidth(this._offsetWidth);
     this._canvasPosition = this._canvas.getBoundingClientRect();
   }
@@ skipping 249 matching lines @@
     context.fill();
     context.restore();
   }
 };
 
 /** @typedef {!{fillStyle: (string|undefined), lineWidth: (number|undefined), borderColor: (string|undefined)}} */
 Network.NetworkWaterfallColumn._LayerStyle;
 
 /** @typedef {!{x: number, y: number, text: string}} */
 Network.NetworkWaterfallColumn._TextLayer;