[Devtools] Fixed dividers in new network canvas timeline

third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js

Index: third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
index 741c7d4dd20c41c1328436d21393b97615da0ff8..cfc681402b09601e64c446f3837fde9d5d129740 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
@@ -289,9 +289,9 @@ WebInspector.NetworkTimelineColumn.prototype = {
         var useTimingBars = !WebInspector.moduleSetting("networkColorCodeResourceTypes").get() && !this._calculator.startAtZero;
         var requests = this._requestData;
         var context = this._canvas.getContext("2d");
+        this._calculator.setDisplayWindow(this._offsetWidth);

[caseq, 2016/10/31 21:59:45]

This could probably go next to where we actually change this._offsetWidth,
perhaps to calculateCanvasSize().

[allada, 2016/10/31 23:35:25]

Done.

         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();
@@ -308,9 +308,8 @@ WebInspector.NetworkTimelineColumn.prototype = {
         }
         this._drawEventDividers(context);
         context.restore();
-        // This is outside of the save/restore above because it must draw in header.
-        this._drawDividers(context);
-        context.restore();
+
+        WebInspector.TimelineGrid.drawCanvasGrid(context, this._calculator, this._fontSize, 75);

[caseq, 2016/10/31 21:59:45]

Extract a constant for 75?

[allada, 2016/10/31 23:35:25]

Done.

     },
 
     /**
@@ -334,53 +333,6 @@ WebInspector.NetworkTimelineColumn.prototype = {
     },
 
     /**
-     * @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()