[web] Migrate Flutter Web DOM usage to JS static interop - 4 (flutter#32938)

* [web] Migrate Flutter Web DOM usage to JS static interop - 3.

* [web] Migrate Flutter Web DOM usage to JS static interop - 4.

Author: joshualitt

lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart

@@ -13,13 +13,13 @@
 library canvaskit_api;
 
 import 'dart:async';
-import 'dart:html' as html;
 import 'dart:js' as js;
 import 'dart:typed_data';
 
 import 'package:js/js.dart';
 import 'package:ui/ui.dart' as ui;
 
+import '../dom.dart';
 import '../profiler.dart';
 
 /// Entrypoint into the CanvasKit API.
@@ -132,15 +132,15 @@ extension CanvasKitExtension on CanvasKit {
   external TypefaceFontProviderNamespace get TypefaceFontProvider;
   external SkTypefaceFactory get Typeface;
   external int GetWebGLContext(
-      html.CanvasElement canvas, SkWebGLContextOptions options);
+      DomCanvasElement canvas, SkWebGLContextOptions options);
   external SkGrContext MakeGrContext(int glContext);
   external SkSurface? MakeOnScreenGLSurface(
     SkGrContext grContext,
     int width,
     int height,
     ColorSpace colorSpace,
   );
-  external SkSurface MakeSWCanvasSurface(html.CanvasElement canvas);
+  external SkSurface MakeSWCanvasSurface(DomCanvasElement canvas);
 
   /// Creates an image from decoded pixels represented as a list of bytes.
   ///
@@ -2332,7 +2332,7 @@ class ProductionCollector implements Collector {
   /// emptied out to prevent memory leaks. This may happen, for example, when the
   /// same object is deleted more than once.
   void collectSkiaObjectsNow() {
-    html.window.performance.mark('SkObject collection-start');
+    domWindow.performance.mark('SkObject collection-start');
     final int length = _skiaObjectCollectionQueue.length;
     dynamic firstError;
     StackTrace? firstStackTrace;
@@ -2364,8 +2364,8 @@ class ProductionCollector implements Collector {
     }
     _skiaObjectCollectionQueue = <SkDeletable>[];
 
-    html.window.performance.mark('SkObject collection-end');
-    html.window.performance.measure('SkObject collection',
+    domWindow.performance.mark('SkObject collection-end');
+    domWindow.performance.measure('SkObject collection',
         'SkObject collection-start', 'SkObject collection-end');
 
     // It's safe to throw the error here, now that we've processed the queue.
@@ -2539,14 +2539,14 @@ extension SkPartialImageInfoExtension on SkPartialImageInfo {
 // TODO(hterkelsen): Rather than this monkey-patch hack, we should
 // build CanvasKit ourselves. See:
 // https://github.com/flutter/flutter/issues/52588
-void patchCanvasKitModule(html.ScriptElement canvasKitScript) {
+void patchCanvasKitModule(DomHTMLScriptElement canvasKitScript) {
   // First check if `exports` and `module` are already defined. If so, then
   // CommonJS is being used, and we shouldn't have any problems.
   final js.JsFunction objectConstructor = js.context['Object'] as js.JsFunction;
   if (js.context['exports'] == null) {
     final js.JsObject exportsAccessor = js.JsObject.jsify(<String, dynamic>{
       'get': allowInterop(() {
-        if (html.document.currentScript == canvasKitScript) {
+        if (domDocument.currentScript == canvasKitScript) {
           return js.JsObject(objectConstructor);
         } else {
           return js.context['_flutterWebCachedExports'];
@@ -2563,7 +2563,7 @@ void patchCanvasKitModule(html.ScriptElement canvasKitScript) {
   if (js.context['module'] == null) {
     final js.JsObject moduleAccessor = js.JsObject.jsify(<String, dynamic>{
       'get': allowInterop(() {
-        if (html.document.currentScript == canvasKitScript) {
+        if (domDocument.currentScript == canvasKitScript) {
           return js.JsObject(objectConstructor);
         } else {
           return js.context['_flutterWebCachedModule'];
@@ -2577,5 +2577,5 @@ void patchCanvasKitModule(html.ScriptElement canvasKitScript) {
     objectConstructor.callMethod(
         'defineProperty', <dynamic>[js.context, 'module', moduleAccessor]);
   }
-  html.document.head!.append(canvasKitScript);
+  domDocument.head!.appendChild(canvasKitScript);
 }

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

@@ -509,19 +509,20 @@ class HtmlViewEmbedder {
           final Surface? overlay = _overlays[viewId];
           if (overlay != null) {
             skiaSceneHost!
-                .insertBefore(overlay.htmlElement, elementToInsertBefore);
+                .insertBefore(overlay.htmlElement as html.Element, elementToInsertBefore);
           }
         } else {
           final html.Element platformViewRoot = _viewClipChains[viewId]!.root;
           skiaSceneHost!.append(platformViewRoot);
           final Surface? overlay = _overlays[viewId];
           if (overlay != null) {
-            skiaSceneHost!.append(overlay.htmlElement);
+            skiaSceneHost!.append(overlay.htmlElement as html.Element);
           }
         }
       }
       insertBeforeMap?.forEach((int viewId, int viewIdToInsertBefore) {
-        final html.Element overlay = _overlays[viewId]!.htmlElement;
+        final html.Element overlay = _overlays[viewId]!.htmlElement as
+            html.Element;
         if (viewIdToInsertBefore != -1) {
           final html.Element nextSibling =
               _viewClipChains[viewIdToInsertBefore]!.root;
@@ -532,7 +533,8 @@ class HtmlViewEmbedder {
       });
       if (_didPaintBackupSurface) {
         skiaSceneHost!
-            .append(SurfaceFactory.instance.backupSurface.htmlElement);
+            .append(SurfaceFactory.instance.backupSurface.htmlElement as
+                html.Element);
       }
     } else {
       SurfaceFactory.instance.removeSurfacesFromDom();
@@ -551,14 +553,15 @@ class HtmlViewEmbedder {
         final Surface? overlay = _overlays[viewId];
         skiaSceneHost!.append(platformViewRoot);
         if (overlay != null) {
-          skiaSceneHost!.append(overlay.htmlElement);
+          skiaSceneHost!.append(overlay.htmlElement as html.Element);
         }
         _activeCompositionOrder.add(viewId);
         unusedViews.remove(viewId);
       }
       if (_didPaintBackupSurface) {
         skiaSceneHost!
-            .append(SurfaceFactory.instance.backupSurface.htmlElement);
+            .append(SurfaceFactory.instance.backupSurface.htmlElement as
+                html.Element);
       }
     }
 

lib/web_ui/lib/src/engine/canvaskit/initialization.dart

@@ -9,6 +9,7 @@ import 'dart:html' as html;
 import '../../engine.dart' show kProfileMode;
 import '../browser_detection.dart';
 import '../configuration.dart';
+import '../dom.dart';
 import '../safe_browser_api.dart';
 import 'canvaskit_api.dart';
 import 'fonts.dart';
@@ -91,15 +92,17 @@ Future<void> _downloadCanvasKitJs({String? canvasKitBase}) {
       ? canvasKitBase + 'canvaskit.js'
       : canvasKitJavaScriptBindingsUrl;
 
-  final html.ScriptElement canvasKitScript = html.ScriptElement();
+  final DomHTMLScriptElement canvasKitScript = createDomHTMLScriptElement();
   canvasKitScript.src = canvasKitJavaScriptUrl;
 
   final Completer<void> canvasKitLoadCompleter = Completer<void>();
-  late StreamSubscription<html.Event> loadSubscription;
-  loadSubscription = canvasKitScript.onLoad.listen((_) {
-    loadSubscription.cancel();
+  late DomEventListener callback;
+  void loadEventHandler(DomEvent _) {
     canvasKitLoadCompleter.complete();
-  });
+    canvasKitScript.removeEventListener('load', callback);
+  }
+  callback = allowInterop(loadEventHandler);
+  canvasKitScript.addEventListener('load', callback);
 
   patchCanvasKitModule(canvasKitScript);
 

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

@@ -8,7 +8,9 @@ import 'package:ui/ui.dart' as ui;
 
 import '../browser_detection.dart';
 import '../configuration.dart';
+import '../dom.dart';
 import '../platform_dispatcher.dart';
+import '../safe_browser_api.dart';
 import '../util.dart';
 import '../window.dart';
 import 'canvas.dart';
@@ -70,15 +72,15 @@ class Surface {
   /// We must cache this function because each time we access the tear-off it
   /// creates a new object, meaning we won't be able to remove this listener
   /// later.
-  void Function(html.Event)? _cachedContextLostListener;
+  void Function(DomEvent)? _cachedContextLostListener;
 
   /// A cached copy of the most recently created `webglcontextrestored`
   /// listener.
   ///
   /// We must cache this function because each time we access the tear-off it
   /// creates a new object, meaning we won't be able to remove this listener
   /// later.
-  void Function(html.Event)? _cachedContextRestoredListener;
+  void Function(DomEvent)? _cachedContextRestoredListener;
 
   SkGrContext? _grContext;
   int? _glContext;
@@ -93,10 +95,10 @@ class Surface {
   /// Conversely, the canvas that lives inside this element can be swapped, for
   /// example, when the screen size changes, or when the WebGL context is lost
   /// due to the browser tab becoming dormant.
-  final html.Element htmlElement = html.Element.tag('flt-canvas-container');
+  final DomElement htmlElement = createDomElement('flt-canvas-container');
 
   /// The underlying `<canvas>` element used for this surface.
-  html.CanvasElement? htmlCanvas;
+  DomCanvasElement? htmlCanvas;
   int _pixelWidth = -1;
   int _pixelHeight = -1;
 
@@ -131,7 +133,7 @@ class Surface {
 
   void addToScene() {
     if (!_addedToScene) {
-      skiaSceneHost!.children.insert(0, htmlElement);
+      skiaSceneHost!.children.insert(0, htmlElement as html.Element);
     }
     _addedToScene = true;
   }
@@ -207,9 +209,9 @@ class Surface {
   void _updateLogicalHtmlCanvasSize() {
     final double logicalWidth = _pixelWidth / window.devicePixelRatio;
     final double logicalHeight = _pixelHeight / window.devicePixelRatio;
-    htmlCanvas!.style
-      ..width = '${logicalWidth}px'
-      ..height = '${logicalHeight}px';
+    final DomCSSStyleDeclaration style = htmlCanvas!.style;
+    style.setProperty('width', '${logicalWidth}px');
+    style.setProperty('height', '${logicalHeight}px');
   }
 
   /// Translate the canvas so the surface covers the visible portion of the
@@ -224,10 +226,10 @@ class Surface {
     final int surfaceHeight = _currentSurfaceSize!.height.ceil();
     final double offset =
         (_pixelHeight - surfaceHeight) / window.devicePixelRatio;
-    htmlCanvas!.style.transform = 'translate(0, -${offset}px)';
+    htmlCanvas!.style.setProperty('transform', 'translate(0, -${offset}px)');
   }
 
-  void _contextRestoredListener(html.Event event) {
+  void _contextRestoredListener(DomEvent event) {
     assert(
         _contextLost,
         'Received "webglcontextrestored" event but never received '
@@ -239,7 +241,7 @@ class Surface {
     event.preventDefault();
   }
 
-  void _contextLostListener(html.Event event) {
+  void _contextLostListener(DomEvent event) {
     assert(event.target == htmlCanvas,
         'Received a context lost event for a disposed canvas');
     final SurfaceFactory factory = SurfaceFactory.instance;
@@ -277,7 +279,7 @@ class Surface {
     // we ensure that the rendred picture covers the entire browser window.
     _pixelWidth = physicalSize.width.ceil();
     _pixelHeight = physicalSize.height.ceil();
-    final html.CanvasElement htmlCanvas = html.CanvasElement(
+    final DomCanvasElement htmlCanvas = createDomCanvasElement(
       width: _pixelWidth,
       height: _pixelHeight,
     );
@@ -294,7 +296,7 @@ class Surface {
     // accessible.
     htmlCanvas.setAttribute('aria-hidden', 'true');
 
-    htmlCanvas.style.position = 'absolute';
+    htmlCanvas.style.setProperty('position', 'absolute');
     _updateLogicalHtmlCanvasSize();
 
     // When the browser tab using WebGL goes dormant the browser and/or OS may
@@ -303,8 +305,8 @@ class Surface {
     // notification. When we receive this notification we force a new context.
     //
     // See also: https://www.khronos.org/webgl/wiki/HandlingContextLost
-    _cachedContextRestoredListener = _contextRestoredListener;
-    _cachedContextLostListener = _contextLostListener;
+    _cachedContextRestoredListener = allowInterop(_contextRestoredListener);
+    _cachedContextLostListener = allowInterop(_contextLostListener);
     htmlCanvas.addEventListener(
       'webglcontextlost',
       _cachedContextLostListener,
@@ -377,7 +379,7 @@ class Surface {
   static bool _didWarnAboutWebGlInitializationFailure = false;
 
   CkSurface _makeSoftwareCanvasSurface(
-      html.CanvasElement htmlCanvas, String reason) {
+      DomCanvasElement htmlCanvas, String reason) {
     if (!_didWarnAboutWebGlInitializationFailure) {
       printWarning('WARNING: Falling back to CPU-only rendering. $reason.');
       _didWarnAboutWebGlInitializationFailure = true;