DevTools: Handle idle frames on timeline events overview.

Source/devtools/front_end/timeline/TimelineEventOverview.js

Index: Source/devtools/front_end/timeline/TimelineEventOverview.js
diff --git a/Source/devtools/front_end/timeline/TimelineEventOverview.js b/Source/devtools/front_end/timeline/TimelineEventOverview.js
index d797d751b6a0c2223af095b6a1c672d84c697ab9..c104c391a3d9276f0395b1e9f5d6e524d41388fe 100644
--- a/Source/devtools/front_end/timeline/TimelineEventOverview.js
+++ b/Source/devtools/front_end/timeline/TimelineEventOverview.js
@@ -273,13 +273,13 @@ WebInspector.TimelineEventOverview.prototype = {
         ctx.beginPath();
         ctx.lineWidth = 1 * window.devicePixelRatio;
         ctx.strokeStyle = "hsl(110, 50%, 60%)";
-        ctx.fillStyle = "hsl(110, 50%, 70%)";
+        ctx.fillStyle = "hsl(110, 50%, 80%)";
         ctx.moveTo(0, y);
         for (var i = 0; i < frames.length; ++i) {
             var frame = frames[i];
-            var x = 0.5 + Math.round((frame.startTime - timeOffset) * scale);
+            var x = Math.round((frame.startTime - timeOffset) * scale) + 0.5;
             ctx.lineTo(x, y);
-            y = 0.5 + Math.round(baseY - visualHeight * Math.min(baseFrameDurationMs / frame.duration, 1));
+            y = frame.idle ? baseY + 0.5 : Math.round(baseY - visualHeight * Math.min(baseFrameDurationMs / frame.duration, 1)) - 0.5;
             ctx.lineTo(x, y);
         }
         ctx.lineTo(this._canvas.width, y);