Auto merge of #10239 - Turbo87:patch-1, r=ehuss

timings: Fix tick mark alignment

### Before

<img width="1030" alt="Bildschirmfoto 2021-12-31 um 11 58 53" src="https://user-images.githubusercontent.com/141300/147819686-ce35da70-59d3-4174-b3c9-05e926260a4f.png">

### After

<img width="1032" alt="Bildschirmfoto 2021-12-31 um 11 58 23" src="https://user-images.githubusercontent.com/141300/147819683-a12d4387-dc30-40bc-aedc-c10fdac7e4e6.png">

src/cargo/core/compiler/timings.js

@@ -55,7 +55,7 @@ function render_pipeline_graph() {
 
   // Draw Y tick marks.
   for (let n=1; n<units.length; n++) {
-    const y = graph_height - (n * Y_TICK_DIST);
+    const y = MARGIN + Y_TICK_DIST * n;
     ctx.beginPath();
     ctx.moveTo(X_LINE, y);
     ctx.lineTo(X_LINE-5, y);
@@ -64,8 +64,9 @@ function render_pipeline_graph() {
 
   // Draw Y labels.
   ctx.textAlign = 'end';
+  ctx.textBaseline = 'middle';
   for (let n=0; n<units.length; n++) {
-    let y = MARGIN + (Y_TICK_DIST * (n + 1)) - 13;
+    let y = MARGIN + Y_TICK_DIST * n + Y_TICK_DIST / 2;
     ctx.fillText(n+1, X_LINE-4, y);
   }
 
@@ -108,12 +109,12 @@ function render_pipeline_graph() {
     }
     ctx.fillStyle = "#000";
     ctx.textAlign = 'start';
-    ctx.textBaseline = 'hanging';
+    ctx.textBaseline = 'middle';
     ctx.font = '14px sans-serif';
     const label = `${unit.name}${unit.target} ${unit.duration}s`;
     const text_info = ctx.measureText(label);
     const label_x = Math.min(x + 5.0, canvas_width - text_info.width - X_LINE);
-    ctx.fillText(label, label_x, y + BOX_HEIGHT / 2 - 6);
+    ctx.fillText(label, label_x, y + BOX_HEIGHT / 2);
     draw_dep_lines(ctx, unit.i, false);
   }
   ctx.restore();