Draw marker events on Timeline flame chart

Source/devtools/front_end/components/TimelineGrid.js

Index: Source/devtools/front_end/components/TimelineGrid.js
diff --git a/Source/devtools/front_end/components/TimelineGrid.js b/Source/devtools/front_end/components/TimelineGrid.js
index 146ecc10495fbbc626d56de295dc4155552f1128..0daae14b8ddb3ff414f13978433d27f6476b7477 100644
--- a/Source/devtools/front_end/components/TimelineGrid.js
+++ b/Source/devtools/front_end/components/TimelineGrid.js
@@ -155,6 +155,33 @@ WebInspector.TimelineGrid.drawCanvasGrid = function(canvas, calculator, dividerO
     context.restore();
 },
 
+/**
+ * @param {!Object} canvas
+ * @param {!WebInspector.TimelineGrid.Calculator} calculator
+ * @param {?Array.<!WebInspector.FlameChartDataProvider.Marker>} markers
+ */
+WebInspector.TimelineGrid.drawTimelineMarkers = function(canvas, calculator, markers)
+{
+    var context = canvas.getContext("2d");
+    context.save();
+    var ratio = window.devicePixelRatio;
+    context.scale(ratio, ratio);
+    var height = WebInspector.FlameChart.DividersBarHeight - 1;
+    context.lineWidth = 2;

[alph, 2014/07/21 12:05:30]

it should depend on devicePixelRatio

[yurys, 2014/07/21 13:49:47]

There is already a call to context.scale above.

+    context.translate(0.5, 0.5);

[alph, 2014/07/21 12:05:30]

You need to translate by 0.5 iff lineWidth is odd.

[yurys, 2014/07/21 13:49:47]

Done.

+    for (var i = 0; i < markers.length; ++i) {
+        var marker = markers[i];
+        var position = calculator.computePosition(marker.timestamp);
+        context.strokeStyle = marker.color;
+        context.beginPath();
+        context.moveTo(position, 0);
+        context.lineTo(position, height);
+        context.stroke();
+    }
+    context.restore();
+},
+
+
 WebInspector.TimelineGrid.prototype = {
     get dividersElement()
     {