Use window.devicePixelRatio in the CanvasKit backend (flutter/engine#13192)

* Use the actual devicePixelRatio in the Skia backend

* Get the coordinates of mouse events in physical pixels

* disable canvaskit by default

engine/src/flutter/lib/web_ui/lib/src/engine/compositor/surface.dart

@@ -31,6 +31,8 @@ class Surface {
   Surface(this.submitFunction);
 
   /// Acquire a frame of the given [size] containing a drawable canvas.
+  ///
+  /// The given [size] is in physical pixels.
   SurfaceFrame acquireFrame(ui.Size size) {
     final SkCanvas canvas = canvasCache.acquireCanvas(size);
     return SurfaceFrame(submitFunction, canvas);
@@ -47,9 +49,14 @@ class _CanvasCache {
     if (size == _canvas?.size) {
       return _canvas;
     }
+    final ui.Size logicalSize = size / ui.window.devicePixelRatio;
     final html.CanvasElement htmlCanvas =
         html.CanvasElement(width: size.width.ceil(), height: size.height.ceil())
           ..id = 'flt-sk-canvas';
+    htmlCanvas.style
+      ..position = 'absolute'
+      ..width = '${logicalSize.width.ceil()}px'
+      ..height = '${logicalSize.height.ceil()}px';
     domRenderer.renderScene(htmlCanvas);
     final js.JsObject surface =
         canvasKit.callMethod('MakeCanvasSurface', <String>['flt-sk-canvas']);

engine/src/flutter/lib/web_ui/lib/src/engine/pointer_binding.dart

@@ -294,8 +294,8 @@ class PointerAdapter extends BaseAdapter {
         timeStamp: _eventTimeStampToDuration(event.timeStamp),
         kind: _pointerTypeToDeviceKind(event.pointerType),
         device: event.pointerId,
-        physicalX: event.client.x,
-        physicalY: event.client.y,
+        physicalX: event.client.x * ui.window.devicePixelRatio,
+        physicalY: event.client.y * ui.window.devicePixelRatio,
         buttons: event.buttons,
         pressure: event.pressure,
         pressureMin: 0.0,
@@ -391,8 +391,8 @@ class TouchAdapter extends BaseAdapter {
         kind: ui.PointerDeviceKind.touch,
         signalKind: ui.PointerSignalKind.none,
         device: touch.identifier,
-        physicalX: touch.client.x,
-        physicalY: touch.client.y,
+        physicalX: touch.client.x * ui.window.devicePixelRatio,
+        physicalY: touch.client.y * ui.window.devicePixelRatio,
         pressure: 1.0,
         pressureMin: 0.0,
         pressureMax: 1.0,
@@ -470,8 +470,8 @@ class MouseAdapter extends BaseAdapter {
       kind: ui.PointerDeviceKind.mouse,
       signalKind: ui.PointerSignalKind.none,
       device: _mouseDeviceId,
-      physicalX: event.client.x,
-      physicalY: event.client.y,
+      physicalX: event.client.x * ui.window.devicePixelRatio,
+      physicalY: event.client.y * ui.window.devicePixelRatio,
       buttons: event.buttons,
       pressure: 1.0,
       pressureMin: 0.0,
@@ -507,8 +507,8 @@ void _ensureMouseDeviceAdded(List<ui.PointerData> data, double clientX,
         // signal to none.
         signalKind: ui.PointerSignalKind.none,
         device: deviceId,
-        physicalX: clientX,
-        physicalY: clientY,
+        physicalX: clientX * ui.window.devicePixelRatio,
+        physicalY: clientY * ui.window.devicePixelRatio,
         buttons: buttons,
         pressure: 1.0,
         pressureMin: 0.0,
@@ -552,8 +552,8 @@ List<ui.PointerData> _convertWheelEventToPointerData(
     kind: ui.PointerDeviceKind.mouse,
     signalKind: ui.PointerSignalKind.scroll,
     device: _mouseDeviceId,
-    physicalX: event.client.x,
-    physicalY: event.client.y,
+    physicalX: event.client.x * ui.window.devicePixelRatio,
+    physicalY: event.client.y * ui.window.devicePixelRatio,
     buttons: event.buttons,
     pressure: 1.0,
     pressureMin: 0.0,

engine/src/flutter/lib/web_ui/lib/src/engine/window.dart

@@ -9,25 +9,34 @@ const bool _debugPrintPlatformMessages = false;
 
 /// The Web implementation of [ui.Window].
 class EngineWindow extends ui.Window {
-
   EngineWindow() {
     _addBrightnessMediaQueryListener();
   }
 
   @override
-  double get devicePixelRatio => _devicePixelRatio;
+  double get devicePixelRatio {
+    if (_debugDevicePixelRatio != null) {
+      return _debugDevicePixelRatio;
+    }
+
+    if (experimentalUseSkia) {
+      return html.window.devicePixelRatio;
+    } else {
+      return 1.0;
+    }
+  }
 
   /// Overrides the default device pixel ratio.
   ///
   /// This is useful in tests to emulate screens of different dimensions.
   void debugOverrideDevicePixelRatio(double value) {
     assert(() {
-      _devicePixelRatio = value;
+      _debugDevicePixelRatio = value;
       return true;
     }());
   }
 
-  double _devicePixelRatio = 1.0;
+  double _debugDevicePixelRatio;
 
   @override
   ui.Size get physicalSize {
@@ -42,15 +51,16 @@ class EngineWindow extends ui.Window {
     }());
 
     if (!override) {
-      final int windowInnerWidth = html.window.innerWidth;
-      final int windowInnerHeight = html.window.innerHeight;
+      final double windowInnerWidth = html.window.innerWidth * devicePixelRatio;
+      final double windowInnerHeight =
+          html.window.innerHeight * devicePixelRatio;
       if (windowInnerWidth != _lastKnownWindowInnerWidth ||
           windowInnerHeight != _lastKnownWindowInnerHeight) {
         _lastKnownWindowInnerWidth = windowInnerWidth;
         _lastKnownWindowInnerHeight = windowInnerHeight;
         _physicalSize = ui.Size(
-          windowInnerWidth.toDouble(),
-          windowInnerHeight.toDouble(),
+          windowInnerWidth,
+          windowInnerHeight,
         );
       }
     }
@@ -59,8 +69,8 @@ class EngineWindow extends ui.Window {
   }
 
   ui.Size _physicalSize = ui.Size.zero;
-  int _lastKnownWindowInnerWidth = -1;
-  int _lastKnownWindowInnerHeight = -1;
+  double _lastKnownWindowInnerWidth = -1;
+  double _lastKnownWindowInnerHeight = -1;
 
   /// Overrides the value of [physicalSize] in tests.
   ui.Size webOnlyDebugPhysicalSizeOverride;
@@ -216,12 +226,12 @@ class EngineWindow extends ui.Window {
     _platformBrightness = newPlatformBrightness;
 
     if (previousPlatformBrightness != _platformBrightness &&
-        onPlatformBrightnessChanged != null)
-      onPlatformBrightnessChanged();
+        onPlatformBrightnessChanged != null) onPlatformBrightnessChanged();
   }
 
   /// Reference to css media query that indicates the user theme preference on the web.
-  final html.MediaQueryList _brightnessMediaQuery = html.window.matchMedia('(prefers-color-scheme: dark)');
+  final html.MediaQueryList _brightnessMediaQuery =
+      html.window.matchMedia('(prefers-color-scheme: dark)');
 
   /// A callback that is invoked whenever [_brightnessMediaQuery] changes value.
   ///
@@ -230,11 +240,14 @@ class EngineWindow extends ui.Window {
 
   /// Set the callback function for listening changes in [_brightnessMediaQuery] value.
   void _addBrightnessMediaQueryListener() {
-    _updatePlatformBrightness(_brightnessMediaQuery.matches ? ui.Brightness.dark : ui.Brightness.light);
+    _updatePlatformBrightness(_brightnessMediaQuery.matches
+        ? ui.Brightness.dark
+        : ui.Brightness.light);
 
     _brightnessMediaQueryListener = (html.Event event) {
       final html.MediaQueryListEvent mqEvent = event;
-      _updatePlatformBrightness(mqEvent.matches ? ui.Brightness.dark : ui.Brightness.light);
+      _updatePlatformBrightness(
+          mqEvent.matches ? ui.Brightness.dark : ui.Brightness.light);
     };
     _brightnessMediaQuery.addListener(_brightnessMediaQueryListener);
     registerHotRestartListener(() {