Calculate mouse coordinates using correct char dimensions

Previously the Mouse class was using raw CSS pixels, we need CSS pixels based
on the amount of space the cells take up on the canvas

See Microsoft/vscode#35114

src/renderer/Interfaces.ts

@@ -92,4 +92,6 @@ export interface IRenderDimensions {
   scaledCanvasHeight: number;
   canvasWidth: number;
   canvasHeight: number;
+  actualCellWidth: number;
+  actualCellHeight: number;
 }

src/renderer/Renderer.ts

@@ -45,7 +45,9 @@ export class Renderer extends EventEmitter implements IRenderer {
       scaledCanvasWidth: null,
       scaledCanvasHeight: null,
       canvasWidth: null,
-      canvasHeight: null
+      canvasHeight: null,
+      actualCellWidth: null,
+      actualCellHeight: null
     };
     this._devicePixelRatio = window.devicePixelRatio;
   }
@@ -112,6 +114,15 @@ export class Renderer extends EventEmitter implements IRenderer {
     this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / window.devicePixelRatio);
     this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / window.devicePixelRatio);
 
+    // Get the _actual_ dimensions of an individual cell. This needs to be
+    // derived from the canvasWidth/Height calculated above which takes into
+    // account window.devicePixelRatio. CharMeasure.width/height by itself is
+    // insufficient when the page is not at 100% zoom level as CharMeasure is
+    // measured in CSS pixels, but the actual char size on the canvas can
+    // differ.
+    this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._terminal.rows;
+    this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._terminal.cols;
+
     // Resize all render layers
     this._renderLayers.forEach(l => l.resize(this._terminal, this.dimensions, didCharSizeChange));