[Devtools] Fixed dividers in new network canvas timeline

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
  */
@@ skipping 220 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._calculator.setDisplayWindow(this._offsetWidth);
         this._canvasPosition = this._canvas.getBoundingClientRect();
     },
 
     /**
      * @param {!WebInspector.RequestTimeRangeNames} type
      * @return {string}
      */
     _colorForType: function(type)
     {
         var types = WebInspector.RequestTimeRangeNames;
@@ skipping 35 matching lines @@
         return Math.floor(this._leftPadding + (time - this._startTime) * timeToPixel);
     },
 
     _draw: function()
     {
         var useTimingBars = !WebInspector.moduleSetting("networkColorCodeResourceTypes").get() && !this._calculator.startAtZero;
         var requests = this._requestData;
         var context = this._canvas.getContext("2d");
         context.save();
         context.scale(window.devicePixelRatio, window.devicePixelRatio);
-        context.save();
         context.translate(0, this._headerHeight);
         context.rect(0, 0, this._offsetWidth, this._offsetHeight);
         context.clip();
         var firstRequestIndex = Math.floor(this._scrollTop / this._rowHeight);
         var lastRequestIndex = Math.min(requests.length, firstRequestIndex + Math.ceil(this._offsetHeight / this._rowHeight));
         for (var i = firstRequestIndex; i < lastRequestIndex; i++) {
             var rowOffset = this._rowHeight * i;
             var request = requests[i];
             this._decorateRow(context, request, i, rowOffset - this._scrollTop);
             if (useTimingBars)
                 this._drawTimingBars(context, request, rowOffset - this._scrollTop);
             else
                 this._drawSimplifiedBars(context, request, rowOffset - this._scrollTop);
         }
         this._drawEventDividers(context);
         context.restore();
-        // This is outside of the save/restore above because it must draw in header.
-        this._drawDividers(context);
-        context.restore();
+
+        const freeZoneAtLeft = 75;
+        WebInspector.TimelineGrid.drawCanvasGrid(context, this._calculator, this._fontSize, freeZoneAtLeft);
     },
 
     /**
      * @param {!CanvasRenderingContext2D} context
      */
     _drawEventDividers: function(context)
     {
         context.save();
         context.lineWidth = 1;
         for (var color of this._eventDividers.keys()) {
             context.strokeStyle = color;
             for (var time of this._eventDividers.get(color)) {
                 context.beginPath();
                 var x = this._timeToPosition(time);
                 context.moveTo(x, 0);
                 context.lineTo(x, this._offsetHeight);
             }
             context.stroke();
         }
         context.restore();
     },
 
     /**
-     * @param {!CanvasRenderingContext2D} context
-     */
-    _drawDividers: function(context)
-    {
-        context.save();
-        /** @const */
-        var minGridSlicePx = 64; // minimal distance between grid lines.
-
-        var drawableWidth = this._offsetWidth - this._leftPadding;
-        var timelineDuration = this._timelineDuration();
-        var dividersCount = drawableWidth / minGridSlicePx;
-        var gridSliceTime = timelineDuration / dividersCount;
-        var pixelsPerTime = drawableWidth / timelineDuration;
-
-        // Align gridSliceTime to a nearest round value.
-        // We allow spans that fit into the formula: span = (1|2|5)x10^n,
-        // e.g.: ...  .1  .2  .5  1  2  5  10  20  50  ...
-        // After a span has been chosen make grid lines at multiples of the span.
-
-        var logGridSliceTime = Math.ceil(Math.log(gridSliceTime) / Math.LN10);
-        gridSliceTime = Math.pow(10, logGridSliceTime);
-        if (gridSliceTime * pixelsPerTime >= 5 * minGridSlicePx)
-            gridSliceTime = gridSliceTime / 5;
-        if (gridSliceTime * pixelsPerTime >= 2 * minGridSlicePx)
-            gridSliceTime = gridSliceTime / 2;
-
-        context.lineWidth = 1;
-        context.strokeStyle = "rgba(0, 0, 0, .1)";
-        context.font = this._fontSize + "px sans-serif";
-        context.fillStyle = "#444";
-        gridSliceTime = gridSliceTime;
-        for (var position = gridSliceTime * pixelsPerTime; position < drawableWidth; position += gridSliceTime * pixelsPerTime) {
-            // Added .5 because canvas drawing points are between pixels.
-            var drawPosition = Math.floor(position) + this._leftPadding + .5;
-            context.beginPath();
-            context.moveTo(drawPosition, 0);
-            context.lineTo(drawPosition, this._offsetHeight);
-            context.stroke();
-            if (position <= gridSliceTime * pixelsPerTime)
-                continue;
-            var textData = Number.secondsToString(position / pixelsPerTime);
-            context.fillText(textData, drawPosition - context.measureText(textData).width - 2, Math.floor(this._headerHeight - this._fontSize / 2));
-        }
-        context.restore();
-    },
-
-    /**
      * @return {number}
      */
     _timelineDuration: function()
     {
         return this._calculator.maximumBoundary() - this._calculator.minimumBoundary();
     },
 
     /**
      * @param {!WebInspector.RequestTimeRangeNames=} type
      * @return {number}
@@ skipping 217 matching lines @@
             color = this._rowNavigationRequestColor;
 
         context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, this._rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 };