[Devtools] Added divider timing to network timeline expirement

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 {!WebInspector.NetworkLogView} networkLogView
  * @param {!WebInspector.SortableDataGrid} dataGrid
  */
@@ skipping 231 matching lines @@
             var ranges = WebInspector.RequestTimingView.calculateRequestTimeRanges(request, 0);
             for (var range of ranges) {
                 if (range.name === WebInspector.RequestTimeRangeNames.Total ||
                     range.name === WebInspector.RequestTimeRangeNames.Sending ||
                     range.end - range.start === 0)
                     continue;
                 this._drawBar(context, range, rowOffset - scrollTop);
             }
         }
         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();
     },
 
     /**
      * @return {number}
      */
     _timelineDuration: function()
     {
         return this._networkLogView.calculator().maximumBoundary() - this._networkLogView.calculator().minimumBoundary();
     },
 
@@ skipping 69 matching lines @@
             color = this._rowHoverColor;
 
         context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 }