DevTools: Tune frame rate bar on events overview for hidpi

Source/devtools/front_end/timeline/TimelineEventOverview.js

 /*
  * Copyright (C) 2013 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 358 matching lines @@
         var ctx = this._context;
         var y = baseY + 10;
         if (!frames.length)
             return height;
 
         ctx.save();
         ctx.translate(0, position * window.devicePixelRatio);
         ctx.beginPath();
         ctx.rect(0, 0, this._canvas.width, height * window.devicePixelRatio);
         ctx.clip();
-        ctx.lineWidth = window.devicePixelRatio;
 
         this._drawHorizontalGuide(baseY - visualHeight - 0.5, WebInspector.UIString("60\u2009fps"));
 
+        var lineWidth = window.devicePixelRatio;
+        var offset = lineWidth & 1 ? 0.5 : 0;
+        var tickDepth = 1.5 * window.devicePixelRatio;
         ctx.beginPath();
         ctx.moveTo(0, y);
         for (var i = 0; i < frames.length; ++i) {
             var frame = frames[i];
-            var x = Math.round((frame.startTime - timeOffset) * scale) + 0.5;
+            var x = Math.round((frame.startTime - timeOffset) * scale) + offset;
             ctx.lineTo(x, y);
-            ctx.lineTo(x, y + 1.5);
-            y = frame.idle ? baseY + 0.5 : Math.round(baseY - visualHeight * Math.min(baseFrameDurationMs / frame.duration, 1)) - 0.5;
-            ctx.lineTo(x, y + 1.5);
+            ctx.lineTo(x, y + tickDepth);
+            y = frame.idle ? baseY + 1 : Math.round(baseY - visualHeight * Math.min(baseFrameDurationMs / frame.duration, 1)) - offset;
+            ctx.lineTo(x, y + tickDepth);
             ctx.lineTo(x, y);
         }
         if (frames.length) {
             var lastFrame = frames.peekLast();
-            var x = Math.round((lastFrame.startTime + lastFrame.duration - timeOffset) * scale) + 0.5;
+            var x = Math.round((lastFrame.startTime + lastFrame.duration - timeOffset) * scale) + offset;
             ctx.lineTo(x, y);
         }
         ctx.lineTo(x, baseY + 10);
         ctx.fillStyle = "hsl(110, 50%, 88%)";
         ctx.strokeStyle = "hsl(110, 50%, 60%)";
+        ctx.lineWidth = lineWidth;
         ctx.fill();
         ctx.stroke();
         ctx.restore();
         return height;
     },
 
     /**
      * @param {number} y
      * @param {string} label
      */
     _drawHorizontalGuide: function(y, label)
     {
         var ctx = this._context;
         ctx.save();
+        ctx.translate(0, y);
+        ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
         ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(this._canvas.width, y);
+        ctx.moveTo(0, 0);
+        ctx.lineTo(this._canvas.width, 0);
         ctx.strokeStyle = "hsl(0, 0%, 85%)";
         ctx.setLineDash([3]);
+        ctx.lineWidth = 1;
         ctx.stroke();
-        ctx.fillStyle = "hsl(0, 0%, 65%)";
+        ctx.fillStyle = "hsl(0, 0%, 70%)";
         ctx.font = "9px " + WebInspector.fontFamily();
-        ctx.fillText(label, 4, y + 8);
+        ctx.fillText(label, 4, 9);
         ctx.restore();
     },
 
     _onCategoryVisibilityChanged: function()
     {
         this.update();
     },
 
     /**
      * @param {number} begin
@@ skipping 162 matching lines @@
             counters[group] = this._quantDuration;
             this._callback(counters);
             interval -= this._quantDuration;
         }
         this._counters = [];
         this._counters[group] = interval;
         this._lastTime = time;
         this._remainder = this._quantDuration - interval;
     }
 }