Move html window.devicePixelRatio access to EngineWindow and fix WebOS issue (#15315)

Author: ferhatb

lib/web_ui/lib/src/engine/bitmap_canvas.dart

@@ -69,7 +69,7 @@ class BitmapCanvas extends EngineCanvas {
 
   /// Keeps track of what device pixel ratio was used when this [BitmapCanvas]
   /// was created.
-  final double _devicePixelRatio = html.window.devicePixelRatio;
+  final double _devicePixelRatio = EngineWindow.browserDevicePixelRatio;
 
   // Compensation for [_initializeViewport] snapping canvas position to 1 pixel.
   int _canvasPositionX, _canvasPositionY;
@@ -136,13 +136,13 @@ class BitmapCanvas extends EngineCanvas {
 
   static int _widthToPhysical(double width) {
     final double boundsWidth = width + 1;
-    return (boundsWidth * html.window.devicePixelRatio).ceil() +
+    return (boundsWidth * EngineWindow.browserDevicePixelRatio).ceil() +
         2 * kPaddingPixels;
   }
 
   static int _heightToPhysical(double height) {
     final double boundsHeight = height + 1;
-    return (boundsHeight * html.window.devicePixelRatio).ceil() +
+    return (boundsHeight * EngineWindow.browserDevicePixelRatio).ceil() +
         2 * kPaddingPixels;
   }
 
@@ -180,7 +180,7 @@ class BitmapCanvas extends EngineCanvas {
   /// * [PersistedStandardPicture._recycleCanvas] which also uses this method
   ///   for the same reason.
   bool isReusable() {
-    return _devicePixelRatio == html.window.devicePixelRatio;
+    return _devicePixelRatio == EngineWindow.browserDevicePixelRatio;
   }
 
   /// Returns a data URI containing a representation of the image in this

lib/web_ui/lib/src/engine/canvas_pool.dart

@@ -86,9 +86,9 @@ class _CanvasPool extends _SaveStackTracking {
       // * To make sure that when we scale the canvas by devicePixelRatio (see
       //   _initializeViewport below) the pixels line up.
       final double cssWidth =
-          _widthInBitmapPixels / html.window.devicePixelRatio;
+          _widthInBitmapPixels / EngineWindow.browserDevicePixelRatio;
       final double cssHeight =
-          _heightInBitmapPixels / html.window.devicePixelRatio;
+          _heightInBitmapPixels / EngineWindow.browserDevicePixelRatio;
       _canvas = html.CanvasElement(
         width: _widthInBitmapPixels,
         height: _heightInBitmapPixels,
@@ -227,7 +227,7 @@ class _CanvasPool extends _SaveStackTracking {
 
     // This scale makes sure that 1 CSS pixel is translated to the correct
     // number of bitmap pixels.
-    ctx.scale(html.window.devicePixelRatio, html.window.devicePixelRatio);
+    ctx.scale(EngineWindow.browserDevicePixelRatio, EngineWindow.browserDevicePixelRatio);
   }
 
   void resetTransform() {

lib/web_ui/lib/src/engine/compositor/embedded_views.dart

@@ -289,7 +289,7 @@ class HtmlViewEmbedder {
     //
     // HTML elements use logical (CSS) pixels, but we have been using physical
     // pixels, so scale down the head element to match the logical resolution.
-    final double scale = html.window.devicePixelRatio;
+    final double scale = EngineWindow.browserDevicePixelRatio;
     final double inverseScale = 1 / scale;
     final Matrix4 scaleMatrix =
         Matrix4.diagonal3Values(inverseScale, inverseScale, 1);

lib/web_ui/lib/src/engine/render_vertices.dart

@@ -617,8 +617,8 @@ class _OffscreenCanvas {
           height: heightInPixels,
         );
         _glCanvas.className = 'gl-canvas';
-        final double cssWidth = widthInPixels / html.window.devicePixelRatio;
-        final double cssHeight = heightInPixels / html.window.devicePixelRatio;
+        final double cssWidth = widthInPixels / EngineWindow.browserDevicePixelRatio;
+        final double cssHeight = heightInPixels / EngineWindow.browserDevicePixelRatio;
         _glCanvas.style
           ..position = 'absolute'
           ..width = '${cssWidth}px'

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

@@ -231,9 +231,9 @@ void _debugRepaintSurfaceStatsOverlay(PersistedScene scene) {
     ..fill();
 
   final double physicalScreenWidth =
-      html.window.innerWidth * html.window.devicePixelRatio;
+      html.window.innerWidth * EngineWindow.browserDevicePixelRatio;
   final double physicalScreenHeight =
-      html.window.innerHeight * html.window.devicePixelRatio;
+      html.window.innerHeight * EngineWindow.browserDevicePixelRatio;
   final double physicsScreenPixelCount =
       physicalScreenWidth * physicalScreenHeight;
 
@@ -402,9 +402,9 @@ void _debugPrintSurfaceStats(PersistedScene scene, int frameNumber) {
       return pixels;
     }).fold(0, (int total, int pixels) => total + pixels);
     final double physicalScreenWidth =
-        html.window.innerWidth * html.window.devicePixelRatio;
+        html.window.innerWidth * EngineWindow.browserDevicePixelRatio;
     final double physicalScreenHeight =
-        html.window.innerHeight * html.window.devicePixelRatio;
+        html.window.innerHeight * EngineWindow.browserDevicePixelRatio;
     final double physicsScreenPixelCount =
         physicalScreenWidth * physicalScreenHeight;
     final double screenPixelRatio = pixelCount / physicsScreenPixelCount;

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

@@ -20,12 +20,19 @@ class EngineWindow extends ui.Window {
     }
 
     if (experimentalUseSkia) {
-      return html.window.devicePixelRatio;
+      return browserDevicePixelRatio;
     } else {
       return 1.0;
     }
   }
 
+  /// Returns device pixel ratio returns by browser.
+  static double get browserDevicePixelRatio {
+    double ratio = html.window.devicePixelRatio;
+    // Guard against WebOS returning 0.
+    return (ratio == null || ratio == 0.0) ? 1.0 : ratio;
+  }
+
   /// Overrides the default device pixel ratio.
   ///
   /// This is useful in tests to emulate screens of different dimensions.