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

Author: joshualitt

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

@@ -220,6 +220,23 @@ extension DomElementExtension on DomElement {
   external void remove();
   external void setAttribute(String name, Object value);
   void appendText(String text) => append(createDomText(text));
+  external void removeAttribute(String name);
+  external set tabIndex(int? value);
+  external int? get tabIndex;
+  external void focus();
+
+  /// [scrollTop] and [scrollLeft] can both return non-integers when using
+  /// display scaling.
+  ///
+  /// The setters have a spurious round just in case the supplied [int] flowed
+  /// from the non-static interop JS API. When all of Flutter Web has been
+  /// migrated to static interop we can probably remove the rounds.
+  int get scrollTop => js_util.getProperty(this, 'scrollTop').round();
+  set scrollTop(int value) =>
+      js_util.setProperty<num>(this, 'scrollTop', value.round());
+  int get scrollLeft => js_util.getProperty(this, 'scrollLeft').round();
+  set scrollLeft(int value) =>
+      js_util.setProperty<num>(this, 'scrollLeft', value.round());
 }
 
 @JS()
@@ -287,6 +304,10 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
   set alignItems(String value) => setProperty('align-items', value);
   set margin(String value) => setProperty('margin', value);
   set background(String value) => setProperty('background', value);
+  set touchAction(String value) => setProperty('touch-action', value);
+  set overflowY(String value) => setProperty('overflow-y', value);
+  set overflowX(String value) => setProperty('overflow-x', value);
+  set outline(String value) => setProperty('outline', value);
   String get width => getPropertyValue('width');
   String get height => getPropertyValue('height');
   String get position => getPropertyValue('position');
@@ -342,6 +363,10 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
   String get alignItems => getPropertyValue('align-items');
   String get margin => getPropertyValue('margin');
   String get background => getPropertyValue('background');
+  String get touchAction => getPropertyValue('touch-action');
+  String get overflowY => getPropertyValue('overflow-y');
+  String get overflowX => getPropertyValue('overflow-x');
+  String get outline => getPropertyValue('outline');
 
   external String getPropertyValue(String property);
   void setProperty(String propertyName, String value, [String? priority]) {
@@ -359,7 +384,6 @@ class DomHTMLElement extends DomElement {}
 
 extension DomHTMLElementExtension on DomHTMLElement {
   int get offsetWidth => js_util.getProperty<num>(this, 'offsetWidth') as int;
-  external void focus();
 }
 
 @JS()
@@ -977,6 +1001,23 @@ extension DomTouchExtension on DomTouch {
   external num? get clientY;
 }
 
+@JS()
+@staticInterop
+class DomHTMLInputElement extends DomHTMLElement {}
+
+extension DomHTMLInputElementExtension on DomHTMLInputElement {
+  external set type(String? value);
+  external set max(String? value);
+  external set min(String value);
+  external set value(String? value);
+  external String? get value;
+  external bool? get disabled;
+  external set disabled(bool? value);
+}
+
+DomHTMLInputElement createDomHTMLInputElement() =>
+    domDocument.createElement('input') as DomHTMLInputElement;
+
 Object? domGetConstructor(String constructorName) =>
     js_util.getProperty(domWindow, constructorName);
 

lib/web_ui/lib/src/engine/keyboard_binding.dart

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:html' as html;
-
 import 'package:ui/ui.dart' as ui;
 
 import '../engine.dart'  show registerHotRestartListener;
@@ -117,7 +115,7 @@ class KeyboardBinding {
       if (_debugLogKeyEvents) {
         print(event.type);
       }
-      if (EngineSemanticsOwner.instance.receiveGlobalEvent(event as html.Event)) {
+      if (EngineSemanticsOwner.instance.receiveGlobalEvent(event)) {
         return handler(event);
       }
       return null;

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:html' as html;
 import 'dart:math' as math;
 
 import 'package:meta/meta.dart';
@@ -293,7 +292,7 @@ abstract class _BaseAdapter {
       // Report the event to semantics. This information is used to debounce
       // browser gestures. Semantics tells us whether it is safe to forward
       // the event to the framework.
-      if (EngineSemanticsOwner.instance.receiveGlobalEvent(event as html.Event)) {
+      if (EngineSemanticsOwner.instance.receiveGlobalEvent(event)) {
         handler(event);
       }
     }

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

@@ -11,10 +11,9 @@
 //                framework. Currently the framework does not report the
 //                grouping of radio buttons.
 
-import 'dart:html' as html;
-
 import 'package:ui/ui.dart' as ui;
 
+import '../dom.dart';
 import 'semantics.dart';
 
 /// The specific type of checkable control.
@@ -104,7 +103,7 @@ class Checkable extends RoleManager {
 
   void _updateDisabledAttribute() {
     if (semanticsObject.enabledState() == EnabledState.disabled) {
-      final html.Element element = semanticsObject.element;
+      final DomElement element = semanticsObject.element;
       element
         ..setAttribute('aria-disabled', 'true')
         ..setAttribute('disabled', 'true');
@@ -114,7 +113,7 @@ class Checkable extends RoleManager {
   }
 
   void _removeDisabledAttribute() {
-    final html.Element element = semanticsObject.element;
+    final DomElement element = semanticsObject.element;
     element..removeAttribute('aria-disabled')..removeAttribute('disabled');
   }
 }

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

@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:html' as html;
-
+import '../dom.dart';
 import 'semantics.dart';
 
 /// Represents semantic objects that deliver information in a visual manner.
@@ -18,13 +17,13 @@ class ImageRoleManager extends RoleManager {
   /// The element with role="img" and aria-label could block access to all
   /// children elements, therefore create an auxiliary element and  describe the
   /// image in that if the semantic object have child nodes.
-  html.Element? _auxiliaryImageElement;
+  DomElement? _auxiliaryImageElement;
 
   @override
   void update() {
     if (semanticsObject.isVisualOnly && semanticsObject.hasChildren) {
       if (_auxiliaryImageElement == null) {
-        _auxiliaryImageElement = html.Element.tag('flt-semantics-img');
+        _auxiliaryImageElement = domDocument.createElement('flt-semantics-img');
         // Absolute positioning and sizing of leaf text elements confuses
         // VoiceOver. So we let the browser size the value node. The node will
         // still have a bigger tap area. However, if the node is a parent to
@@ -54,7 +53,7 @@ class ImageRoleManager extends RoleManager {
     }
   }
 
-  void _setLabel(html.Element? element) {
+  void _setLabel(DomElement? element) {
     if (semanticsObject.hasLabel) {
       element!.setAttribute('aria-label', semanticsObject.label!);
     }
@@ -69,7 +68,7 @@ class ImageRoleManager extends RoleManager {
 
   void _cleanupElement() {
     semanticsObject.setAriaRole('img', false);
-    semanticsObject.element.attributes.remove('aria-label');
+    semanticsObject.element.removeAttribute('aria-label');
   }
 
   @override

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

@@ -2,11 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:html' as html;
-
 import 'package:ui/ui.dart' as ui;
 
+import '../dom.dart';
 import '../platform_dispatcher.dart';
+import '../safe_browser_api.dart';
 import 'semantics.dart';
 
 /// Adds increment/decrement event handling to a semantics object.
@@ -20,7 +20,7 @@ import 'semantics.dart';
 /// gestures must be interpreted by the Flutter framework.
 class Incrementable extends RoleManager {
   /// The HTML element used to render semantics to the browser.
-  final html.InputElement _element = html.InputElement();
+  final DomHTMLInputElement _element = createDomHTMLInputElement();
 
   /// The value used by the input element.
   ///
@@ -49,7 +49,7 @@ class Incrementable extends RoleManager {
     _element.type = 'range';
     _element.setAttribute('role', 'slider');
 
-    _element.addEventListener('change', (_) {
+    _element.addEventListener('change', allowInterop((_) {
       if (_element.disabled!) {
         return;
       }
@@ -64,7 +64,7 @@ class Incrementable extends RoleManager {
         EnginePlatformDispatcher.instance.invokeOnSemanticsAction(
             semanticsObject.id, ui.SemanticsAction.decrease, null);
       }
-    });
+    }));
 
     // Store the callback as a closure because Dart does not guarantee that
     // tear-offs produce the same function object.

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

@@ -2,11 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:html' as html;
-
 import 'package:ui/ui.dart' as ui;
 
 import '../configuration.dart';
+import '../dom.dart';
 import 'semantics.dart';
 
 /// Renders [_label] and [_value] to the semantics DOM.
@@ -47,7 +46,7 @@ class LabelAndValue extends RoleManager {
   ///   its label is not reachable via accessibility focus. This happens, for
   ///   example in popup dialogs, such as the alert dialog. The text of the
   ///   alert is supplied as a label on the parent node.
-  html.Element? _auxiliaryValueElement;
+  DomElement? _auxiliaryValueElement;
 
   @override
   void update() {
@@ -90,7 +89,7 @@ class LabelAndValue extends RoleManager {
     }
 
     if (_auxiliaryValueElement == null) {
-      _auxiliaryValueElement = html.Element.tag('flt-semantics-value');
+      _auxiliaryValueElement = domDocument.createElement('flt-semantics-value');
       // Absolute positioning and sizing of leaf text elements confuses
       // VoiceOver. So we let the browser size the value node. The node will
       // still have a bigger tap area. However, if the node is a parent to other
@@ -119,7 +118,7 @@ class LabelAndValue extends RoleManager {
       _auxiliaryValueElement!.remove();
       _auxiliaryValueElement = null;
     }
-    semanticsObject.element.attributes.remove('aria-label');
+    semanticsObject.element.removeAttribute('aria-label');
     semanticsObject.setAriaRole('heading', false);
   }
 

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../dom.dart';
 import 'semantics.dart';
 
 /// Manages semantics configurations that represent live regions.
@@ -31,7 +32,7 @@ class LiveRegion extends RoleManager {
   }
 
   void _cleanupDom() {
-    semanticsObject.element.attributes.remove('aria-live');
+    semanticsObject.element.removeAttribute('aria-live');
   }
 
   @override

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

@@ -2,11 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:html' as html;
-
 import 'package:ui/ui.dart' as ui;
 
+import '../dom.dart';
 import '../platform_dispatcher.dart';
+import '../safe_browser_api.dart';
 import 'semantics.dart';
 
 /// Implements vertical and horizontal scrolling functionality for semantics
@@ -37,7 +37,7 @@ class Scrollable extends RoleManager {
   ///
   /// This gesture is converted to [ui.SemanticsAction.scrollUp] or
   /// [ui.SemanticsAction.scrollDown], depending on the direction.
-  html.EventListener? _scrollListener;
+  DomEventListener? _scrollListener;
 
   /// The value of the "scrollTop" or "scrollLeft" property of this object's
   /// [element] that has zero offset relative to the [scrollPosition].
@@ -107,9 +107,9 @@ class Scrollable extends RoleManager {
       };
       semanticsObject.owner.addGestureModeListener(_gestureModeListener);
 
-      _scrollListener = (_) {
+      _scrollListener = allowInterop((_) {
         _recomputeScrollPosition();
-      };
+      });
       semanticsObject.element.addEventListener('scroll', _scrollListener);
     }
   }
@@ -138,7 +138,7 @@ class Scrollable extends RoleManager {
     // This value is arbitrary.
     const int _canonicalNeutralScrollPosition = 10;
 
-    final html.Element element = semanticsObject.element;
+    final DomElement element = semanticsObject.element;
     if (semanticsObject.isVerticalScrollContainer) {
       element.scrollTop = _canonicalNeutralScrollPosition;
       // Read back because the effective value depends on the amount of content.
@@ -159,7 +159,7 @@ class Scrollable extends RoleManager {
   }
 
   void _gestureModeDidChange() {
-    final html.Element element = semanticsObject.element;
+    final DomElement element = semanticsObject.element;
     switch (semanticsObject.owner.gestureMode) {
       case GestureMode.browserGestures:
         // overflow:scroll will cause the browser report "scroll" events when
@@ -190,7 +190,7 @@ class Scrollable extends RoleManager {
 
   @override
   void dispose() {
-    final html.CssStyleDeclaration style = semanticsObject.element.style;
+    final DomCSSStyleDeclaration style = semanticsObject.element.style;
     assert(_gestureModeListener != null);
     style.removeProperty('overflowY');
     style.removeProperty('overflowX');