merged branch henrikbjorn/time-collector-canvas (PR symfony#7065)

This PR was merged into the master branch.

Commits
-------

439b8bc [WebProfilerBundle] Draw retina canvas if devicePixelRatio is bigger than 1

Discussion
----------

[2.3] [WebProfilerBundle] Draw retina canvas elements

When using a MacBook Pro Retina the default canvas is fuzzy and ugly, this scales the elements for a higher DPI so they will look sharp and crisp.

Resources/views/Collector/time.html.twig

@@ -194,7 +194,10 @@
                     h = space,
                     x = request.left * ratio + space, // position
                     canvas = cache.get(elementId) || cache.set(elementId, document.getElementById(elementId)),
-                    ctx    = canvas.getContext("2d");
+                    ctx    = canvas.getContext("2d"),
+                    backingStoreRatio,
+                    scaleRatio,
+                    devicePixelRatio;
 
                 // Filter events whose total time is below the threshold.
                 drawableEvents = request.events.filter(function(event) {
@@ -203,8 +206,20 @@
 
                 canvasHeight += gapPerEvent * drawableEvents.length;
 
-                canvas.width  = width;
-                canvas.height = canvasHeight;
+                // For retina displays so text and boxes will be crisp
+                devicePixelRatio  = window.devicePixelRatio          == "undefined" ? 1 : window.devicePixelRatio;
+                backingStoreRatio = ctx.webkitBackingStorePixelRatio == "undefined" ? 1 : ctx.webkitBackingStorePixelRatio;
+                scaleRatio        = devicePixelRatio / 1;
+
+                canvasHeight += gapPerEvent * drawableEvents.length;
+
+                canvas.width  = width * scaleRatio;
+                canvas.height = canvasHeight * scaleRatio;
+
+                canvas.style.width = width + 'px';
+                canvas.style.height = canvasHeight + 'px';
+
+                ctx.scale(scaleRatio, scaleRatio);
 
                 ctx.textBaseline = "middle";
                 ctx.lineWidth = 0;