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

Author: joshualitt

lib/web_ui/lib/src/engine/dom.dart

@@ -99,6 +99,9 @@ extension DomHTMLDocumentExtension on DomHTMLDocument {
   external DomHTMLHeadElement? get head;
   external DomHTMLBodyElement? get body;
   external set title(String? value);
+  List<DomNode> getElementsByTagName(String tag) =>
+      js_util.callMethod<List<Object?>>(
+          this, 'getElementsByTagName', <Object>[tag]).cast<DomNode>();
 }
 
 @JS('document')
@@ -124,6 +127,8 @@ extension DomEventTargetExtension on DomEventTarget {
           <Object>[type, listener, if (useCapture != null) useCapture]);
     }
   }
+
+  external bool dispatchEvent(DomEvent event);
 }
 
 typedef DomEventListener = void Function(DomEvent event);
@@ -223,12 +228,10 @@ extension DomElementExtension on DomElement {
   external set tabIndex(int? value);
   external int? get tabIndex;
   external void focus();
-  int get scrollTop =>
-      js_util.getProperty(this, 'scrollTop').round();
+  int get scrollTop => js_util.getProperty(this, 'scrollTop').round();
   set scrollTop(int value) =>
       js_util.setProperty<int>(this, 'scrollTop', value.round());
-  int get scrollLeft =>
-      js_util.getProperty(this, 'scrollLeft').round();
+  int get scrollLeft => js_util.getProperty(this, 'scrollLeft').round();
   set scrollLeft(int value) =>
       js_util.setProperty<int>(this, 'scrollLeft', value.round());
 }
@@ -933,11 +936,19 @@ class DomMouseEvent extends DomUIEvent {}
 extension DomMouseEventExtension on DomMouseEvent {
   external num get clientX;
   external num get clientY;
+  external num get offsetX;
+  external num get offsetY;
+  DomPoint get client => DomPoint(clientX, clientY);
+  DomPoint get offset => DomPoint(offsetX, offsetY);
   external int get button;
   external int? get buttons;
   external bool getModifierState(String keyArg);
 }
 
+DomMouseEvent createDomMouseEvent(String type, [Map<dynamic, dynamic>? init]) =>
+    js_util.callConstructor(domGetConstructor('MouseEvent')!,
+        <Object>[type, if (init != null) js_util.jsify(init)]);
+
 @JS()
 @staticInterop
 class DomPointerEvent extends DomMouseEvent {}
@@ -953,6 +964,11 @@ extension DomPointerEventExtension on DomPointerEvent {
           this, 'getCoalescedEvents', <Object>[]).cast<DomPointerEvent>();
 }
 
+DomPointerEvent createDomPointerEvent(String type,
+        [Map<dynamic, dynamic>? init]) =>
+    js_util.callConstructor(domGetConstructor('PointerEvent')!,
+        <Object>[type, if (init != null) js_util.jsify(init)]);
+
 @JS()
 @staticInterop
 class DomWheelEvent extends DomMouseEvent {}
@@ -979,10 +995,15 @@ class DomTouch {}
 
 extension DomTouchExtension on DomTouch {
   external int? get identifier;
-  external num? get clientX;
-  external num? get clientY;
+  external num get clientX;
+  external num get clientY;
+  DomPoint get client => DomPoint(clientX, clientY);
 }
 
+DomTouchEvent createDomTouchEvent(String type, [Map<dynamic, dynamic>? init]) =>
+    js_util.callConstructor(domGetConstructor('TouchEvent')!,
+        <Object>[type, if (init != null) js_util.jsify(init)]);
+
 @JS()
 @staticInterop
 class DomHTMLInputElement extends DomHTMLElement {}
@@ -1000,6 +1021,13 @@ extension DomHTMLInputElementExtension on DomHTMLInputElement {
 DomHTMLInputElement createDomHTMLInputElement() =>
     domDocument.createElement('input') as DomHTMLInputElement;
 
+class DomPoint {
+  final num x;
+  final num y;
+
+  DomPoint(this.x, this.y);
+}
+
 Object? domGetConstructor(String constructorName) =>
     js_util.getProperty(domWindow, constructorName);
 

lib/web_ui/lib/src/engine/embedder.dart

@@ -311,7 +311,7 @@ class FlutterViewEmbedder {
 
     final html.Element _accessibilityPlaceholder = EngineSemanticsOwner
         .instance.semanticsHelper
-        .prepareAccessibilityPlaceholder();
+        .prepareAccessibilityPlaceholder() as html.Element;
 
     glassPaneElementHostNode.nodes.addAll(<html.Node>[
       _accessibilityPlaceholder,

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

@@ -867,8 +867,8 @@ class _TouchAdapter extends _BaseAdapter {
       kind: ui.PointerDeviceKind.touch,
       signalKind: ui.PointerSignalKind.none,
       device: touch.identifier!,
-      physicalX: touch.clientX!.toDouble() * ui.window.devicePixelRatio,
-      physicalY: touch.clientY!.toDouble() * ui.window.devicePixelRatio,
+      physicalX: touch.clientX.toDouble() * ui.window.devicePixelRatio,
+      physicalY: touch.clientY.toDouble() * ui.window.devicePixelRatio,
       buttons: pressed ? _kPrimaryMouseButton : 0,
       pressure: 1.0,
       pressureMin: 0.0,

lib/web_ui/lib/src/engine/semantics/semantics.dart

@@ -1675,7 +1675,7 @@ class EngineSemanticsOwner {
       _temporarilyDisableBrowserGestureMode();
     }
 
-    return semanticsHelper.shouldEnableSemantics(event as html.Event);
+    return semanticsHelper.shouldEnableSemantics(event);
   }
 
   /// Callbacks called when the [GestureMode] changes.

lib/web_ui/lib/src/engine/semantics/semantics_helper.dart

@@ -3,11 +3,12 @@
 // found in the LICENSE file.
 
 import 'dart:async';
-import 'dart:html' as html;
 
 import 'package:meta/meta.dart';
 
 import '../browser_detection.dart';
+import '../dom.dart';
+import '../safe_browser_api.dart';
 import 'semantics.dart';
 
 /// The maximum [semanticsActivationAttempts] before we give up waiting for
@@ -50,11 +51,11 @@ class SemanticsHelper {
     _semanticsEnabler = semanticsEnabler;
   }
 
-  bool shouldEnableSemantics(html.Event event) {
+  bool shouldEnableSemantics(DomEvent event) {
     return _semanticsEnabler.shouldEnableSemantics(event);
   }
 
-  html.Element prepareAccessibilityPlaceholder() {
+  DomElement prepareAccessibilityPlaceholder() {
     return _semanticsEnabler.prepareAccessibilityPlaceholder();
   }
 
@@ -75,9 +76,9 @@ abstract class SemanticsEnabler {
   /// Semantics should be enabled if the web engine is no longer waiting for
   /// extra signals from the user events. See [isWaitingToEnableSemantics].
   ///
-  /// Or if the received [html.Event] is suitable/enough for enabling the
+  /// Or if the received [DomEvent] is suitable/enough for enabling the
   /// semantics. See [tryEnableSemantics].
-  bool shouldEnableSemantics(html.Event event) {
+  bool shouldEnableSemantics(DomEvent event) {
     if (!isWaitingToEnableSemantics) {
       // Forward to framework as normal.
       return true;
@@ -90,15 +91,15 @@ abstract class SemanticsEnabler {
   ///
   /// Returns true if the `event` is not related to semantics activation and
   /// should be forwarded to the framework.
-  bool tryEnableSemantics(html.Event event);
+  bool tryEnableSemantics(DomEvent event);
 
   /// Creates the placeholder for accessibility.
   ///
   /// Puts it inside the glasspane.
   ///
   /// On focus the element announces that accessibility can be enabled by
   /// tapping/clicking. (Announcement depends on the assistive technology)
-  html.Element prepareAccessibilityPlaceholder();
+  DomElement prepareAccessibilityPlaceholder();
 
   /// Whether platform is still considering enabling semantics.
   ///
@@ -123,14 +124,14 @@ abstract class SemanticsEnabler {
 @visibleForTesting
 class DesktopSemanticsEnabler extends SemanticsEnabler {
   /// A temporary placeholder used to capture a request to activate semantics.
-  html.Element? _semanticsPlaceholder;
+  DomElement? _semanticsPlaceholder;
 
   /// Whether we are waiting for the user to enable semantics.
   @override
   bool get isWaitingToEnableSemantics => _semanticsPlaceholder != null;
 
   @override
-  bool tryEnableSemantics(html.Event event) {
+  bool tryEnableSemantics(DomEvent event) {
     // Semantics may be enabled programmatically. If there's a race between that
     // and the DOM event, we may end up here while there's no longer a placeholder
     // to work with.
@@ -173,15 +174,15 @@ class DesktopSemanticsEnabler extends SemanticsEnabler {
   }
 
   @override
-  html.Element prepareAccessibilityPlaceholder() {
-    final html.Element placeholder =
-        _semanticsPlaceholder = html.Element.tag('flt-semantics-placeholder');
+  DomElement prepareAccessibilityPlaceholder() {
+    final DomElement placeholder =
+        _semanticsPlaceholder = createDomElement('flt-semantics-placeholder');
 
     // Only listen to "click" because other kinds of events are reported via
     // PointerBinding.
-    placeholder.addEventListener('click', (html.Event event) {
+    placeholder.addEventListener('click', allowInterop((DomEvent event) {
       tryEnableSemantics(event);
-    }, true);
+    }), true);
 
     // Adding roles to semantics placeholder. 'aria-live' will make sure that
     // the content is announced to the assistive technology user as soon as the
@@ -226,7 +227,7 @@ class MobileSemanticsEnabler extends SemanticsEnabler {
   Timer? semanticsActivationTimer;
 
   /// A temporary placeholder used to capture a request to activate semantics.
-  html.Element? _semanticsPlaceholder;
+  DomElement? _semanticsPlaceholder;
 
   /// The number of events we processed that could potentially activate
   /// semantics.
@@ -247,7 +248,7 @@ class MobileSemanticsEnabler extends SemanticsEnabler {
   bool get isWaitingToEnableSemantics => _semanticsPlaceholder != null;
 
   @override
-  bool tryEnableSemantics(html.Event event) {
+  bool tryEnableSemantics(DomEvent event) {
     // Semantics may be enabled programmatically. If there's a race between that
     // and the DOM event, we may end up here while there's no longer a placeholder
     // to work with.
@@ -320,29 +321,29 @@ class MobileSemanticsEnabler extends SemanticsEnabler {
     // semantics tree is designed to not interfere with Flutter's gesture
     // detection.
     bool enableConditionPassed = false;
-    html.Point<num> activationPoint;
+    late final DomPoint activationPoint;
 
     switch (event.type) {
       case 'click':
-        final html.MouseEvent click = event as html.MouseEvent;
+        final DomMouseEvent click = event as DomMouseEvent;
         activationPoint = click.offset;
         break;
       case 'touchstart':
       case 'touchend':
-        final html.TouchEvent touch = event as html.TouchEvent;
-        activationPoint = touch.changedTouches!.first.client;
+        final DomTouchEvent touchEvent = event as DomTouchEvent;
+        activationPoint = touchEvent.changedTouches!.first.client;
         break;
       case 'pointerdown':
       case 'pointerup':
-        final html.PointerEvent touch = event as html.PointerEvent;
-        activationPoint = html.Point<num>(touch.client.x, touch.client.y);
+        final DomPointerEvent touch = event as DomPointerEvent;
+        activationPoint = touch.client;
         break;
       default:
         // The event is not relevant, forward to framework as normal.
         return true;
     }
 
-    final html.Rectangle<num> activatingElementRect =
+    final DomRect activatingElementRect =
         _semanticsPlaceholder!.getBoundingClientRect();
     final double midX = (activatingElementRect.left +
             (activatingElementRect.right - activatingElementRect.left) / 2)
@@ -372,15 +373,15 @@ class MobileSemanticsEnabler extends SemanticsEnabler {
   }
 
   @override
-  html.Element prepareAccessibilityPlaceholder() {
-    final html.Element placeholder =
-        _semanticsPlaceholder = html.Element.tag('flt-semantics-placeholder');
+  DomElement prepareAccessibilityPlaceholder() {
+    final DomElement placeholder =
+        _semanticsPlaceholder = createDomElement('flt-semantics-placeholder');
 
     // Only listen to "click" because other kinds of events are reported via
     // PointerBinding.
-    placeholder.addEventListener('click', (html.Event event) {
+    placeholder.addEventListener('click', allowInterop((DomEvent event) {
       tryEnableSemantics(event);
-    }, true);
+    }), true);
 
     placeholder
       ..setAttribute('role', 'button')