[Devtools] Fixed dividers in new network canvas timeline

third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineGrid.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2009 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 34 matching lines @@
     this.element.appendChild(this._gridHeaderElement);
 };
 
 /**
  * @param {!WebInspector.TimelineGrid.Calculator} calculator
  * @param {number=} freeZoneAtLeft
  * @return {!{offsets: !Array.<number>, precision: number}}
  */
 WebInspector.TimelineGrid.calculateDividerOffsets = function(calculator, freeZoneAtLeft)
 {
-    // TODO(allada) Remove this code out when timeline canvas experiment is over.
     /** @const */ var minGridSlicePx = 64; // minimal distance between grid lines.
 
     var clientWidth = calculator.computePosition(calculator.maximumBoundary());
     var dividersCount = clientWidth / minGridSlicePx;
     var gridSliceTime = calculator.boundarySpan() / dividersCount;
     var pixelsPerTime = clientWidth / calculator.boundarySpan();
 
     // 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  ...
@@ skipping 22 matching lines @@
         var time = firstDividerTime + gridSliceTime * i;
         if (calculator.computePosition(time) < freeZoneAtLeft)
             continue;
         offsets.push(time);
     }
 
     return {offsets: offsets, precision: Math.max(0, -Math.floor(Math.log(gridSliceTime * 1.01) / Math.LN10))};
 };
 
 /**
- * @param {!HTMLCanvasElement} canvas
+ * @param {!CanvasRenderingContext2D} context
  * @param {!WebInspector.TimelineGrid.Calculator} calculator
+ * @param {number} paddingTop
+ * @param {number=} freeZoneAtLeft
  */
-WebInspector.TimelineGrid.drawCanvasGrid = function(canvas, calculator)
+WebInspector.TimelineGrid.drawCanvasGrid = function(context, calculator, paddingTop, freeZoneAtLeft)
 {
-    var context = canvas.getContext("2d");
     context.save();
     var ratio = window.devicePixelRatio;
     context.scale(ratio, ratio);
-    var width = canvas.width / window.devicePixelRatio;
-    var height = canvas.height / window.devicePixelRatio;
+    var width = context.canvas.width / window.devicePixelRatio;
+    var height = context.canvas.height / window.devicePixelRatio;
     var dividersData = WebInspector.TimelineGrid.calculateDividerOffsets(calculator);
     var dividerOffsets = dividersData.offsets;
     var precision = dividersData.precision;
 
     context.fillStyle = "rgba(255, 255, 255, 0.5)";
     context.fillRect(0, 0, width, 15);
 
     context.fillStyle = "#333";
     context.strokeStyle = "rgba(0, 0, 0, 0.1)";
     context.textBaseline = "hanging";
     context.font = "11px " + WebInspector.fontFamily();
     context.lineWidth = 1;
 
     context.translate(0.5, 0.5);
     const paddingRight = 4;
-    const paddingTop = 3;
+    freeZoneAtLeft = freeZoneAtLeft || 0;
     for (var i = 0; i < dividerOffsets.length; ++i) {
         var time = dividerOffsets[i];
         var position = calculator.computePosition(time);
         var text = calculator.formatValue(time, precision);
         var textWidth = context.measureText(text).width;
         var textPosition = position - textWidth - paddingRight;
-        context.fillText(text, textPosition, paddingTop);
+        if (freeZoneAtLeft < textPosition)
+            context.fillText(text, textPosition, paddingTop);
         context.moveTo(position, 0);
         context.lineTo(position, height);
     }
     context.stroke();
     context.restore();
 };
 
 WebInspector.TimelineGrid.prototype = {
     get dividersElement()
     {
@@ skipping 152 matching lines @@
 
     /** @return {number} */
     zeroTime: function() { },
 
     /** @return {number} */
     maximumBoundary: function() { },
 
     /** @return {number} */
     boundarySpan: function() { }
 };