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

This reverts commit 7956603.

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));
+      return ViewClipChain(view: createPlatformViewSlot(viewId) as DomElement);
     });
 
     final DomElement slot = clipChain.slot;

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

@@ -139,8 +139,6 @@ 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);
@@ -162,14 +160,6 @@ 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');
@@ -178,19 +168,10 @@ 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 DomHTMLBodyElement bodyElement = domDocument.body!;
+    final html.BodyElement bodyElement = html.document.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 DomElement glassPaneElement = domDocument.createElement(_glassPaneTagName);
-    _glassPaneElement = glassPaneElement as html.Element;
+    final html.Element glassPaneElement = html.document.createElement(_glassPaneTagName);
+    _glassPaneElement = glassPaneElement;
     glassPaneElement.style
       ..position = 'absolute'
       ..top = '0'
@@ -285,8 +285,7 @@ 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
-        as html.Element);
+    final HostNode glassPaneElementHostNode = _createHostNode(glassPaneElement);
     _glassPaneShadow = glassPaneElementHostNode;
 
     // Don't allow the scene to receive pointer events.
@@ -336,8 +335,8 @@ class FlutterViewEmbedder {
       _sceneHostElement!.style.opacity = '0.3';
     }
 
-    PointerBinding.initInstance(glassPaneElement as html.Element);
-    KeyboardBinding.initInstance(glassPaneElement as html.Element);
+    PointerBinding.initInstance(glassPaneElement);
+    KeyboardBinding.initInstance(glassPaneElement);
 
     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,7 +7,6 @@ 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';
@@ -26,9 +25,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 as html.Element?;
-  DomElement? _childContainer;
-  DomElement? _filterElement;
+  html.Element? get childContainer => _childContainer;
+  html.Element? _childContainer;
+  html.Element? _filterElement;
   ui.Rect? _activeClipBounds;
   // Cached inverted transform for [transform].
   late Matrix4 _invertedTransform;
@@ -44,10 +43,10 @@ class PersistedBackdropFilter extends PersistedContainerSurface
   }
 
   @override
-  DomElement createElement() {
-    final DomElement element = defaultCreateElement('flt-backdrop');
-    element.style.transformOrigin = '0 0 0';
-    _childContainer = createDomElement('flt-backdrop-interior');
+  html.Element createElement() {
+    final html.Element element = defaultCreateElement('flt-backdrop')
+      ..style.transformOrigin = '0 0 0';
+    _childContainer = html.Element.tag('flt-backdrop-interior');
     _childContainer!.style.position = 'absolute';
     if (debugExplainSurfaceStats) {
       // This creates an additional interior element. Count it too.
@@ -103,7 +102,7 @@ class PersistedBackdropFilter extends PersistedContainerSurface
       }
       parentSurface = parentSurface.parent;
     }
-    final DomCSSStyleDeclaration filterElementStyle = _filterElement!.style;
+    final html.CssStyleDeclaration filterElementStyle = _filterElement!.style;
     filterElementStyle
       ..position = 'absolute'
       ..left = '${left}px'

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

@@ -7,7 +7,6 @@ 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';
@@ -24,8 +23,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 as html.Element?;
-  DomElement? _childContainer;
+  html.Element? get childContainer => _childContainer;
+  html.Element? _childContainer;
 
   @override
   void adoptElements(_DomClip oldSurface) {
@@ -35,9 +34,9 @@ mixin _DomClip on PersistedContainerSurface {
   }
 
   @override
-  DomElement createElement() {
-    final DomElement element = defaultCreateElement('flt-clip');
-    _childContainer = createDomElement('flt-clip-interior');
+  html.Element createElement() {
+    final html.Element element = defaultCreateElement('flt-clip');
+    _childContainer = html.Element.tag('flt-clip-interior');
     if (debugExplainSurfaceStats) {
       // This creates an additional interior element. Count it too.
       surfaceStatsFor(this).allocatedDomNodeCount++;
@@ -97,7 +96,7 @@ class PersistedClipRect extends PersistedContainerSurface
   }
 
   @override
-  DomElement createElement() {
+  html.Element createElement() {
     return super.createElement()..setAttribute('clip-type', 'rect');
   }
 
@@ -154,7 +153,7 @@ class PersistedClipRRect extends PersistedContainerSurface
   }
 
   @override
-  DomElement createElement() {
+  html.Element createElement() {
     return super.createElement()..setAttribute('clip-type', 'rrect');
   }
 
@@ -239,7 +238,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
   }
 
   @override
-  DomElement createElement() {
+  html.Element createElement() {
     return super.createElement()..setAttribute('clip-type', 'physical-shape');
   }
 
@@ -468,7 +467,7 @@ class PersistedClipPath extends PersistedContainerSurface
   html.Element? _clipElement;
 
   @override
-  DomElement createElement() {
+  html.Element createElement() {
     return defaultCreateElement('flt-clippath');
   }
 

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

@@ -10,7 +10,6 @@ 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';
@@ -24,12 +23,12 @@ class PersistedColorFilter extends PersistedContainerSurface
       : super(oldLayer);
 
   @override
-  html.Element? get childContainer => _childContainer as html.Element?;
+  html.Element? get childContainer => _childContainer;
 
   /// 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.
-  DomElement? _childContainer;
+  html.Element? _childContainer;
 
   /// Color filter to apply to this surface.
   final ui.ColorFilter filter;
@@ -62,9 +61,9 @@ class PersistedColorFilter extends PersistedContainerSurface
   }
 
   @override
-  DomElement createElement() {
-    final DomElement element = defaultCreateElement('flt-color-filter');
-    final DomElement container = createDomElement('flt-filter-interior');
+  html.Element createElement() {
+    final html.Element element = defaultCreateElement('flt-color-filter');
+    final html.Element container = html.Element.tag('flt-filter-interior');
     container.style.position = 'absolute';
     _childContainer = container;
     element.append(_childContainer!);

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

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

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

@@ -2,9 +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 '../dom.dart';
 import '../util.dart';
 import '../vector_math.dart';
 import 'surface.dart';
@@ -39,8 +40,8 @@ class PersistedOffset extends PersistedContainerSurface
       _localTransformInverse ??= Matrix4.translationValues(-dx, -dy, 0);
 
   @override
-  DomElement createElement() {
-    final DomElement element = domDocument.createElement('flt-offset');
+  html.Element createElement() {
+    final html.Element element = html.document.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,9 +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 '../dom.dart';
 import '../util.dart';
 import '../vector_math.dart';
 import 'surface.dart';
@@ -41,16 +42,16 @@ class PersistedOpacity extends PersistedContainerSurface
       Matrix4.translationValues(-offset.dx, -offset.dy, 0);
 
   @override
-  DomElement createElement() {
-    final DomElement element = domDocument.createElement('flt-opacity');
+  html.Element createElement() {
+    final html.Element element = html.document.createElement('flt-opacity');
     setElementStyle(element, 'position', 'absolute');
     setElementStyle(element, 'transform-origin', '0 0 0');
     return element;
   }
 
   @override
   void apply() {
-    final DomElement element = rootElement! as DomElement;
+    final html.Element element = rootElement!;
     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,7 +8,6 @@ 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';
@@ -122,8 +121,8 @@ class PersistedPicture extends PersistedLeafSurface {
       CrossFrameCache<html.HtmlElement>();
 
   @override
-  DomElement createElement() {
-    final DomElement element = defaultCreateElement('flt-picture');
+  html.Element createElement() {
+    final html.Element 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

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

@@ -2,7 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../dom.dart';
+import 'dart:html' as html;
+
 import '../platform_views/slots.dart';
 import 'surface.dart';
 
@@ -17,7 +18,7 @@ class PersistedPlatformView extends PersistedLeafSurface {
   PersistedPlatformView(this.viewId, this.dx, this.dy, this.width, this.height);
 
   @override
-  DomElement createElement() {
+  html.Element createElement() {
     return createPlatformViewSlot(viewId);
   }
 

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

@@ -6,7 +6,6 @@ import 'dart:html' as html;
 
 import 'package:ui/ui.dart' as ui;
 
-import '../dom.dart';
 import '../vector_math.dart';
 import 'surface.dart';
 
@@ -60,7 +59,7 @@ class PersistedScene extends PersistedContainerSurface {
       _localTransformInverse ??= Matrix4.identity();
 
   @override
-  DomElement createElement() {
+  html.Element createElement() {
     return defaultCreateElement('flt-scene');
   }