[Devtools] Added divider timing to network timeline expirement

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 1aad77dbabed7a796cf3ae89c9b9b330abf0ec7d..e69d5c2e9544ea18d2c837f4436653a3574149c3 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
@@ -249,6 +249,53 @@ WebInspector.NetworkTimelineColumn.prototype = {
             }
         }
         context.restore();
+        this._drawDividers(context);
+    },
+
+    _drawDividers: function(context)
+    {
+        context.save();
+        /** @const */
+        var minGridSlicePx = 64; // minimal distance between grid lines.
+        /** @const */
+        var fontSize = 10;
+
+        var drawableWidth = this._offsetWidth - this._leftPadding - this._rightPadding;
+        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 = 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._networkLogView.headerHeight() - fontSize / 2));
+        }
+        context.restore();
     },
 
     /**