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

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

@@ -261,15 +261,15 @@ class HtmlViewEmbedder {
     DomElement headClipView,
   ) {
     int indexInFlutterView = -1;
-    if (headClipView.parentElement != null) {
+    if (headClipView.parent != null) {
       indexInFlutterView = skiaSceneHost!.children.indexOf(headClipView);
       headClipView.remove();
     }
     DomElement head = platformView;
     int clipIndex = 0;
     // Re-use as much existing clip views as needed.
     while (head != headClipView && clipIndex < numClips) {
-      head = head.parentElement!;
+      head = head.parent!;
       clipIndex++;
     }
     // If there weren't enough existing clip views, add more.
@@ -329,7 +329,7 @@ class HtmlViewEmbedder {
         case MutatorType.clipRect:
         case MutatorType.clipRRect:
         case MutatorType.clipPath:
-          final DomElement clipView = head.parentElement!;
+          final DomElement clipView = head.parent!;
           clipView.style.clip = '';
           clipView.style.clipPath = '';
           headTransform = Matrix4.identity();

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

@@ -24,6 +24,7 @@ class DomWindow {}
 
 extension DomWindowExtension on DomWindow {
   external DomConsole get console;
+  external num get devicePixelRatio;
   external DomDocument get document;
   external int? get innerHeight;
   external int? get innerWidth;
@@ -134,8 +135,12 @@ extension DomProgressEventExtension on DomProgressEvent {
 class DomNode extends DomEventTarget {}
 
 extension DomNodeExtension on DomNode {
+  external DomNode? get firstChild;
+  external String get innerText;
+  external DomNode? get lastChild;
   external DomNode appendChild(DomNode node);
-  external DomElement? get parentElement;
+  DomElement? get parent => js_util.getProperty(this, 'parentElement');
+  String? get text => js_util.getProperty(this, 'textContent');
   external DomNode? get parentNode;
   external DomNode insertBefore(DomNode newNode, DomNode? referenceNode);
   void remove() {
@@ -218,6 +223,19 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
       setProperty('font-feature-settings', value, '');
   set fontVariationSettings(String value) =>
       setProperty('font-variation-settings', value, '');
+  set visibility(String value) => setProperty('visibility', value, '');
+  set overflow(String value) => setProperty('overflow', value, '');
+  set boxShadow(String value) => setProperty('box-shadow', value, '');
+  set borderTopLeftRadius(String value) =>
+      setProperty('border-top-left-radius', value, '');
+  set borderTopRightRadius(String value) =>
+      setProperty('border-top-right-radius', value, '');
+  set borderBottomLeftRadius(String value) =>
+      setProperty('border-bottom-left-radius', value, '');
+  set borderBottomRightRadius(String value) =>
+      setProperty('border-bottom-right-radius', value, '');
+  set borderRadius(String value) => setProperty('border-radius', value, '');
+  set perspective(String value) => setProperty('perspective', value, '');
   String get width => getPropertyValue('width');
   String get height => getPropertyValue('height');
   String get position => getPropertyValue('position');
@@ -249,6 +267,18 @@ extension DomCSSStyleDeclarationExtension on DomCSSStyleDeclaration {
   String get fontFeatureSettings => getPropertyValue('font-feature-settings');
   String get fontVariationSettings =>
       getPropertyValue('font-variation-settings');
+  String get visibility => getPropertyValue('visibility');
+  String get overflow => getPropertyValue('overflow');
+  String get boxShadow => getPropertyValue('box-shadow');
+  String get borderTopLeftRadius => getPropertyValue('border-top-left-radius');
+  String get borderTopRightRadius =>
+      getPropertyValue('border-top-right-radius');
+  String get borderBottomLeftRadius =>
+      getPropertyValue('border-bottom-left-radius');
+  String get borderBottomRightRadius =>
+      getPropertyValue('border-bottom-right-radius');
+  String get borderRadius => getPropertyValue('border-radius');
+  String get perspective => getPropertyValue('perspective');
 
   external String getPropertyValue(String property);
   void setProperty(String propertyName, String value, [String? priority]) {

lib/web_ui/lib/src/engine/engine_canvas.dart

@@ -23,7 +23,7 @@ import 'vector_math.dart';
 /// This can be used either as an interface or super-class.
 abstract class EngineCanvas {
   /// The element that is attached to the DOM.
-  html.Element get rootElement;
+  DomElement get rootElement;
 
   void dispose() {
     clear();
@@ -296,7 +296,7 @@ mixin SaveElementStackTracking on EngineCanvas {
   /// The element at the top of the element stack, or [rootElement] if the stack
   /// is empty.
   html.Element get currentElement =>
-      _elementStack.isEmpty ? rootElement : _elementStack.last;
+      _elementStack.isEmpty ? rootElement as html.Element : _elementStack.last;
 
   /// The stack that maintains the DOM elements used to express certain paint
   /// operations, such as clips.

lib/web_ui/lib/src/engine/html/backdrop_filter.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 '../browser_detection.dart';
@@ -26,7 +24,7 @@ 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 as html.Element?;
+  DomElement? get childContainer => _childContainer;
   DomElement? _childContainer;
   DomElement? _filterElement;
   ui.Rect? _activeClipBounds;

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

@@ -58,7 +58,7 @@ class BitmapCanvas extends EngineCanvas {
   static const int kPaddingPixels = 1;
 
   @override
-  final html.Element rootElement = html.Element.tag('flt-canvas');
+  final DomElement rootElement = createDomElement('flt-canvas');
 
   final CanvasPool _canvasPool;
 
@@ -239,7 +239,7 @@ class BitmapCanvas extends EngineCanvas {
     for (int i = 0; i < len; i++) {
       final html.Element child = _children[i];
       // Don't remove children that have been reused by CrossFrameCache.
-      if (child.parent == rootElement) {
+      if (child.parent == rootElement as html.Element) {
         child.remove();
       }
     }
@@ -458,11 +458,11 @@ class BitmapCanvas extends EngineCanvas {
           ui.Offset.zero,
           transformWithOffset(_canvasPool.currentTransform, offset));
       for (final html.Element clipElement in clipElements) {
-        rootElement.append(clipElement);
+        rootElement.append(clipElement as DomElement);
         _children.add(clipElement);
       }
     } else {
-      rootElement.append(element);
+      rootElement.append(element as DomElement);
       _children.add(element);
     }
     final ui.BlendMode? blendMode = paint.blendMode;
@@ -675,7 +675,7 @@ class BitmapCanvas extends EngineCanvas {
       final List<html.Element> clipElements = _clipContent(
           _canvasPool.clipStack!, imgElement, p, _canvasPool.currentTransform);
       for (final html.Element clipElement in clipElements) {
-        rootElement.append(clipElement);
+        rootElement.append(clipElement as DomElement);
         _children.add(clipElement);
       }
     } else {
@@ -687,7 +687,7 @@ class BitmapCanvas extends EngineCanvas {
         // Reset width/height since they may have been previously set.
         ..removeProperty('width')
         ..removeProperty('height');
-      rootElement.append(imgElement);
+      rootElement.append(imgElement as DomElement);
       _children.add(imgElement);
     }
     return imgElement;
@@ -851,7 +851,7 @@ class BitmapCanvas extends EngineCanvas {
       SurfacePaintData paint) {
     // For srcIn blendMode, we use an svg filter to apply to image element.
     final SvgFilter svgFilter = svgFilterFromBlendMode(filterColor, colorFilterBlendMode);
-    rootElement.append(svgFilter.element);
+    rootElement.append(svgFilter.element as DomElement);
     _children.add(svgFilter.element);
     final html.HtmlElement imgElement = _reuseOrCreateImage(image);
     imgElement.style.filter = 'url(#${svgFilter.id})';
@@ -866,7 +866,7 @@ class BitmapCanvas extends EngineCanvas {
       HtmlImage image, List<double> matrix, SurfacePaintData paint) {
     // For srcIn blendMode, we use an svg filter to apply to image element.
     final SvgFilter svgFilter = svgFilterFromColorMatrix(matrix);
-    rootElement.append(svgFilter.element);
+    rootElement.append(svgFilter.element as DomElement);
     _children.add(svgFilter.element);
     final html.HtmlElement imgElement = _reuseOrCreateImage(image);
     imgElement.style.filter = 'url(#${svgFilter.id})';
@@ -971,15 +971,15 @@ class BitmapCanvas extends EngineCanvas {
           offset,
           _canvasPool.currentTransform);
       for (final html.Element clipElement in clipElements) {
-        rootElement.append(clipElement);
+        rootElement.append(clipElement as DomElement);
         _children.add(clipElement);
       }
     } else {
       setElementTransform(
         paragraphElement,
         transformWithOffset(_canvasPool.currentTransform, offset).storage,
       );
-      rootElement.append(paragraphElement);
+      rootElement.append(paragraphElement as DomElement);
     }
     _children.add(paragraphElement);
     // If there is a prior sibling such as img prevent left/top shift.
@@ -1068,21 +1068,25 @@ class BitmapCanvas extends EngineCanvas {
   void endOfPaint() {
     _canvasPool.endOfPaint();
     _elementCache?.commitFrame();
-    // Wrap all elements in translate3d (workaround for webkit paint order bug).
     if (_contains3dTransform && browserEngine == BrowserEngine.webkit) {
-      for (final html.Element element in rootElement.children) {
-        final html.DivElement paintOrderElement = html.DivElement()
+      // Copy the children list to avoid concurrent modification.
+      final List<DomElement> children = rootElement.children.toList();
+      for (final DomElement element in children) {
+        final DomHTMLDivElement paintOrderElement = createDomHTMLDivElement()
           ..style.transform = 'translate3d(0,0,0)';
         paintOrderElement.append(element);
         rootElement.append(paintOrderElement);
-        _children.add(paintOrderElement);
+        _children.add(paintOrderElement as html.Element);
       }
     }
-    final html.Node? firstChild = rootElement.firstChild;
-    if (firstChild != null && firstChild is html.HtmlElement &&
-        firstChild.tagName.toLowerCase() ==
-            'canvas') {
-      firstChild.style.zIndex = '-1';
+    final DomNode? firstChild = rootElement.firstChild;
+    if (firstChild != null) {
+      if (domInstanceOfString(firstChild, 'HTMLElement')) {
+        final DomHTMLElement maybeCanvas = firstChild as DomHTMLElement;
+        if (maybeCanvas.tagName.toLowerCase() == 'canvas') {
+          maybeCanvas.style.zIndex = '-1';
+        }
+      }
     }
   }
 
@@ -1368,7 +1372,7 @@ List<html.Element> _clipContent(List<SaveClipEntry> clipStack,
     final SaveClipEntry entry = clipStack[clipIndex];
     final html.HtmlElement newElement = html.DivElement();
     newElement.style.position = 'absolute';
-    applyWebkitClipFix(newElement);
+    applyWebkitClipFix(newElement as DomElement);
     if (root == null) {
       root = newElement;
     } else {
@@ -1428,7 +1432,8 @@ List<html.Element> _clipContent(List<SaveClipEntry> clipStack,
           ..transform = matrix4ToCssTransform(newClipTransform)
           ..transformOrigin = '0 0 0';
         final html.Element clipElement =
-            createSvgClipDef(curElement as html.HtmlElement, entry.path!);
+            createSvgClipDef(curElement as DomElement, entry.path!) as
+            html.Element;
         clipDefs.add(clipElement);
       }
     }