[web] Migrate Flutter Web DOM usage to JS static interop - 12. (#33241)

Author: joshualitt

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

@@ -212,7 +212,7 @@ class HtmlViewEmbedder {
   void _compositeWithParams(int viewId, EmbeddedViewParams params) {
     // If we haven't seen this viewId yet, cache it for clips/transforms.
     final ViewClipChain clipChain = _viewClipChains.putIfAbsent(viewId, () {
-      return ViewClipChain(view: createPlatformViewSlot(viewId) as DomElement);
+      return ViewClipChain(view: createPlatformViewSlot(viewId));
     });
 
     final DomElement slot = clipChain.slot;

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

@@ -139,6 +139,8 @@ extension DomElementExtension on DomElement {
   external /* List<DomElement> */ List<Object?> get children;
   external String get id;
   external set id(String id);
+  external set spellcheck(bool? value);
+  external String get tagName;
   external DomCSSStyleDeclaration get style;
   external void append(DomNode node);
   external String? getAttribute(String attributeName);
@@ -160,6 +162,14 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
   set transform(String value) => setProperty('transform', value);
   set transformOrigin(String value) => setProperty('transform-origin', value);
   set opacity(String value) => setProperty('opacity', value);
+  set color(String value) => setProperty('color', value);
+  set top(String value) => setProperty('top', value);
+  set left(String value) => setProperty('left', value);
+  set right(String value) => setProperty('right', value);
+  set bottom(String value) => setProperty('bottom', value);
+  set backgroundColor(String value) => setProperty('background-color', value);
+  set pointerEvents(String value) => setProperty('pointer-events', value);
+  set filter(String value) => setProperty('filter', value);
   String get width => getPropertyValue('width');
   String get height => getPropertyValue('height');
   String get position => getPropertyValue('position');
@@ -168,10 +178,19 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
   String get transform => getPropertyValue('transform');
   String get transformOrigin => getPropertyValue('transform-origin');
   String get opacity => getPropertyValue('opacity');
+  String get color => getPropertyValue('color');
+  String get top => getPropertyValue('top');
+  String get left => getPropertyValue('left');
+  String get right => getPropertyValue('right');
+  String get bottom => getPropertyValue('bottom');
+  String get backgroundColor => getPropertyValue('background-color');
+  String get pointerEvents => getPropertyValue('pointer-events');
+  String get filter => getPropertyValue('filter');
 
   external String getPropertyValue(String property);
   external void setProperty(String propertyName, String value,
       [String priority]);
+  external String removeProperty(String property);
 }
 
 @JS()

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

@@ -200,7 +200,7 @@ class FlutterViewEmbedder {
       hasAutofillOverlay: browserHasAutofillOverlay(),
     );
 
-    final html.BodyElement bodyElement = html.document.body!;
+    final DomHTMLBodyElement bodyElement = domDocument.body!;
 
     bodyElement.setAttribute(
       'flt-renderer',
@@ -270,8 +270,8 @@ class FlutterViewEmbedder {
     // IMPORTANT: the glass pane element must come after the scene element in the DOM node list so
     //            it can intercept input events.
     _glassPaneElement?.remove();
-    final html.Element glassPaneElement = html.document.createElement(_glassPaneTagName);
-    _glassPaneElement = glassPaneElement;
+    final DomElement glassPaneElement = domDocument.createElement(_glassPaneTagName);
+    _glassPaneElement = glassPaneElement as html.Element;
     glassPaneElement.style
       ..position = 'absolute'
       ..top = '0'
@@ -285,7 +285,8 @@ class FlutterViewEmbedder {
 
     // Create a [HostNode] under the glass pane element, and attach everything
     // there, instead of directly underneath the glass panel.
-    final HostNode glassPaneElementHostNode = _createHostNode(glassPaneElement);
+    final HostNode glassPaneElementHostNode = _createHostNode(glassPaneElement
+        as html.Element);
     _glassPaneShadow = glassPaneElementHostNode;
 
     // Don't allow the scene to receive pointer events.
@@ -335,8 +336,8 @@ class FlutterViewEmbedder {
       _sceneHostElement!.style.opacity = '0.3';
     }
 
-    PointerBinding.initInstance(glassPaneElement);
-    KeyboardBinding.initInstance(glassPaneElement);
+    PointerBinding.initInstance(glassPaneElement as html.Element);
+    KeyboardBinding.initInstance(glassPaneElement as html.Element);
 
     if (html.window.visualViewport == null && isWebKit) {
       // Older Safari versions sometimes give us bogus innerWidth/innerHeight

lib/web_ui/lib/src/engine/html/backdrop_filter.dart

@@ -7,6 +7,7 @@ import 'dart:html' as html;
 import 'package:ui/ui.dart' as ui;
 
 import '../browser_detection.dart';
+import '../dom.dart';
 import '../util.dart';
 import '../vector_math.dart';
 import 'shaders/shader.dart';
@@ -25,9 +26,9 @@ class PersistedBackdropFilter extends PersistedContainerSurface
   /// [rootElement] is used to host child in front of [filterElement] that
   /// is transformed to cover background.
   @override
-  html.Element? get childContainer => _childContainer;
-  html.Element? _childContainer;
-  html.Element? _filterElement;
+  html.Element? get childContainer => _childContainer as html.Element?;
+  DomElement? _childContainer;
+  DomElement? _filterElement;
   ui.Rect? _activeClipBounds;
   // Cached inverted transform for [transform].
   late Matrix4 _invertedTransform;
@@ -43,10 +44,10 @@ class PersistedBackdropFilter extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
-    final html.Element element = defaultCreateElement('flt-backdrop')
-      ..style.transformOrigin = '0 0 0';
-    _childContainer = html.Element.tag('flt-backdrop-interior');
+  DomElement createElement() {
+    final DomElement element = defaultCreateElement('flt-backdrop');
+    element.style.transformOrigin = '0 0 0';
+    _childContainer = createDomElement('flt-backdrop-interior');
     _childContainer!.style.position = 'absolute';
     if (debugExplainSurfaceStats) {
       // This creates an additional interior element. Count it too.
@@ -102,7 +103,7 @@ class PersistedBackdropFilter extends PersistedContainerSurface
       }
       parentSurface = parentSurface.parent;
     }
-    final html.CssStyleDeclaration filterElementStyle = _filterElement!.style;
+    final DomCSSStyleDeclaration filterElementStyle = _filterElement!.style;
     filterElementStyle
       ..position = 'absolute'
       ..left = '${left}px'

lib/web_ui/lib/src/engine/html/clip.dart

@@ -7,6 +7,7 @@ import 'dart:svg' as svg;
 
 import 'package:ui/ui.dart' as ui;
 
+import '../dom.dart';
 import '../shadow.dart';
 import '../util.dart';
 import 'dom_canvas.dart';
@@ -23,8 +24,8 @@ mixin _DomClip on PersistedContainerSurface {
   /// [rootElement] is used to compensate for the coordinate system shift
   /// introduced by the [rootElement] translation.
   @override
-  html.Element? get childContainer => _childContainer;
-  html.Element? _childContainer;
+  html.Element? get childContainer => _childContainer as html.Element?;
+  DomElement? _childContainer;
 
   @override
   void adoptElements(_DomClip oldSurface) {
@@ -34,9 +35,9 @@ mixin _DomClip on PersistedContainerSurface {
   }
 
   @override
-  html.Element createElement() {
-    final html.Element element = defaultCreateElement('flt-clip');
-    _childContainer = html.Element.tag('flt-clip-interior');
+  DomElement createElement() {
+    final DomElement element = defaultCreateElement('flt-clip');
+    _childContainer = createDomElement('flt-clip-interior');
     if (debugExplainSurfaceStats) {
       // This creates an additional interior element. Count it too.
       surfaceStatsFor(this).allocatedDomNodeCount++;
@@ -96,7 +97,7 @@ class PersistedClipRect extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return super.createElement()..setAttribute('clip-type', 'rect');
   }
 
@@ -153,7 +154,7 @@ class PersistedClipRRect extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return super.createElement()..setAttribute('clip-type', 'rrect');
   }
 
@@ -238,7 +239,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return super.createElement()..setAttribute('clip-type', 'physical-shape');
   }
 
@@ -467,7 +468,7 @@ class PersistedClipPath extends PersistedContainerSurface
   html.Element? _clipElement;
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return defaultCreateElement('flt-clippath');
   }
 

lib/web_ui/lib/src/engine/html/color_filter.dart

@@ -10,6 +10,7 @@ import 'package:ui/ui.dart' as ui;
 import '../browser_detection.dart';
 import '../canvaskit/color_filter.dart';
 import '../color_filter.dart';
+import '../dom.dart';
 import '../embedder.dart';
 import '../util.dart';
 import 'bitmap_canvas.dart';
@@ -23,12 +24,12 @@ class PersistedColorFilter extends PersistedContainerSurface
       : super(oldLayer);
 
   @override
-  html.Element? get childContainer => _childContainer;
+  html.Element? get childContainer => _childContainer as html.Element?;
 
   /// The dedicated child container element that's separate from the
   /// [rootElement] is used to compensate for the coordinate system shift
   /// introduced by the [rootElement] translation.
-  html.Element? _childContainer;
+  DomElement? _childContainer;
 
   /// Color filter to apply to this surface.
   final ui.ColorFilter filter;
@@ -61,9 +62,9 @@ class PersistedColorFilter extends PersistedContainerSurface
   }
 
   @override
-  html.Element createElement() {
-    final html.Element element = defaultCreateElement('flt-color-filter');
-    final html.Element container = html.Element.tag('flt-filter-interior');
+  DomElement createElement() {
+    final DomElement element = defaultCreateElement('flt-color-filter');
+    final DomElement container = createDomElement('flt-filter-interior');
     container.style.position = 'absolute';
     _childContainer = container;
     element.append(_childContainer!);

lib/web_ui/lib/src/engine/html/image_filter.dart

@@ -2,10 +2,9 @@
 // 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 'shaders/shader.dart';
 import 'surface.dart';
 
@@ -17,7 +16,7 @@ class PersistedImageFilter extends PersistedContainerSurface
   final ui.ImageFilter filter;
 
   @override
-  html.Element createElement() {
+  DomElement createElement() {
     return defaultCreateElement('flt-image-filter');
   }
 

lib/web_ui/lib/src/engine/html/offset.dart

@@ -2,10 +2,9 @@
 // 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 '../util.dart';
 import '../vector_math.dart';
 import 'surface.dart';
@@ -40,8 +39,8 @@ class PersistedOffset extends PersistedContainerSurface
       _localTransformInverse ??= Matrix4.translationValues(-dx, -dy, 0);
 
   @override
-  html.Element createElement() {
-    final html.Element element = html.document.createElement('flt-offset');
+  DomElement createElement() {
+    final DomElement element = domDocument.createElement('flt-offset');
     setElementStyle(element, 'position', 'absolute');
     setElementStyle(element, 'transform-origin', '0 0 0');
     return element;

lib/web_ui/lib/src/engine/html/opacity.dart

@@ -2,10 +2,9 @@
 // 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 '../util.dart';
 import '../vector_math.dart';
 import 'surface.dart';
@@ -42,16 +41,16 @@ class PersistedOpacity extends PersistedContainerSurface
       Matrix4.translationValues(-offset.dx, -offset.dy, 0);
 
   @override
-  html.Element createElement() {
-    final html.Element element = html.document.createElement('flt-opacity');
+  DomElement createElement() {
+    final DomElement element = domDocument.createElement('flt-opacity');
     setElementStyle(element, 'position', 'absolute');
     setElementStyle(element, 'transform-origin', '0 0 0');
     return element;
   }
 
   @override
   void apply() {
-    final html.Element element = rootElement!;
+    final DomElement element = rootElement! as DomElement;
     setElementStyle(element, 'opacity', '${alpha / 255}');
     element.style.transform = 'translate(${offset.dx}px, ${offset.dy}px)';
   }

lib/web_ui/lib/src/engine/html/picture.dart

@@ -8,6 +8,7 @@ import 'dart:typed_data';
 
 import 'package:ui/ui.dart' as ui;
 
+import '../dom.dart';
 import '../engine_canvas.dart';
 import '../frame_reference.dart';
 import '../picture.dart';
@@ -121,8 +122,8 @@ class PersistedPicture extends PersistedLeafSurface {
       CrossFrameCache<html.HtmlElement>();
 
   @override
-  html.Element createElement() {
-    final html.Element element = defaultCreateElement('flt-picture');
+  DomElement createElement() {
+    final DomElement element = defaultCreateElement('flt-picture');
 
     // The DOM elements used to render pictures are used purely to put pixels on
     // the screen. They have no semantic information. If an assistive technology