From 07c75da51e683079c96675a16f8355f5081e237a Mon Sep 17 00:00:00 2001 From: joshualitt Date: Fri, 13 May 2022 10:20:05 -0700 Subject: [PATCH] Revert "[web] Migrate Flutter Web DOM usage to JS static interop - 12. (#33241)" This reverts commit 7956603cc51a71d729589593d92aa9745c9a37cb. --- .../src/engine/canvaskit/embedded_views.dart | 2 +- lib/web_ui/lib/src/engine/dom.dart | 19 ------------------- lib/web_ui/lib/src/engine/embedder.dart | 13 ++++++------- .../lib/src/engine/html/backdrop_filter.dart | 17 ++++++++--------- lib/web_ui/lib/src/engine/html/clip.dart | 19 +++++++++---------- .../lib/src/engine/html/color_filter.dart | 11 +++++------ .../lib/src/engine/html/image_filter.dart | 5 +++-- lib/web_ui/lib/src/engine/html/offset.dart | 7 ++++--- lib/web_ui/lib/src/engine/html/opacity.dart | 9 +++++---- lib/web_ui/lib/src/engine/html/picture.dart | 5 ++--- .../lib/src/engine/html/platform_view.dart | 5 +++-- lib/web_ui/lib/src/engine/html/scene.dart | 3 +-- .../lib/src/engine/html/shader_mask.dart | 11 +++++------ lib/web_ui/lib/src/engine/html/surface.dart | 9 ++++----- lib/web_ui/lib/src/engine/html/transform.dart | 6 +++--- lib/web_ui/lib/src/engine/mouse_cursor.dart | 3 +-- .../lib/src/engine/platform_views/slots.dart | 8 ++++---- lib/web_ui/lib/src/engine/text/paragraph.dart | 3 +-- lib/web_ui/lib/src/engine/util.dart | 2 +- .../platform_views/content_manager_test.dart | 4 ++-- .../engine/platform_views/slots_test.dart | 8 +++++--- .../engine/surface/platform_view_test.dart | 2 +- .../test/engine/surface/surface_test.dart | 4 ++-- lib/web_ui/test/engine/util_test.dart | 5 +++-- 24 files changed, 79 insertions(+), 101 deletions(-) diff --git a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart b/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart index 4055e39f83d91..192cba2e3e34e 100644 --- a/lib/web_ui/lib/src/engine/canvaskit/embedded_views.dart +++ b/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; diff --git a/lib/web_ui/lib/src/engine/dom.dart b/lib/web_ui/lib/src/engine/dom.dart index a203f0fd97244..b7d94b507cd91 100644 --- a/lib/web_ui/lib/src/engine/dom.dart +++ b/lib/web_ui/lib/src/engine/dom.dart @@ -139,8 +139,6 @@ extension DomElementExtension on DomElement { external /* List */ List 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() diff --git a/lib/web_ui/lib/src/engine/embedder.dart b/lib/web_ui/lib/src/engine/embedder.dart index 0116e1a668569..9c30eb6d38dc9 100644 --- a/lib/web_ui/lib/src/engine/embedder.dart +++ b/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 diff --git a/lib/web_ui/lib/src/engine/html/backdrop_filter.dart b/lib/web_ui/lib/src/engine/html/backdrop_filter.dart index 4afad8a4c59f1..73e7d71ef1095 100644 --- a/lib/web_ui/lib/src/engine/html/backdrop_filter.dart +++ b/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' diff --git a/lib/web_ui/lib/src/engine/html/clip.dart b/lib/web_ui/lib/src/engine/html/clip.dart index 13f43378704a4..bd63ab4d0376e 100644 --- a/lib/web_ui/lib/src/engine/html/clip.dart +++ b/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'); } diff --git a/lib/web_ui/lib/src/engine/html/color_filter.dart b/lib/web_ui/lib/src/engine/html/color_filter.dart index fb846a74dc1c0..d64c108072ff3 100644 --- a/lib/web_ui/lib/src/engine/html/color_filter.dart +++ b/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!); diff --git a/lib/web_ui/lib/src/engine/html/image_filter.dart b/lib/web_ui/lib/src/engine/html/image_filter.dart index 0738d6e6bcfe9..4183703b1ecb0 100644 --- a/lib/web_ui/lib/src/engine/html/image_filter.dart +++ b/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'); } diff --git a/lib/web_ui/lib/src/engine/html/offset.dart b/lib/web_ui/lib/src/engine/html/offset.dart index 3aa3cbedf4a3d..a23b5124a9914 100644 --- a/lib/web_ui/lib/src/engine/html/offset.dart +++ b/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; diff --git a/lib/web_ui/lib/src/engine/html/opacity.dart b/lib/web_ui/lib/src/engine/html/opacity.dart index 38a047470ae95..4348fc33a49dc 100644 --- a/lib/web_ui/lib/src/engine/html/opacity.dart +++ b/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,8 +42,8 @@ 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; @@ -50,7 +51,7 @@ class PersistedOpacity extends PersistedContainerSurface @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)'; } diff --git a/lib/web_ui/lib/src/engine/html/picture.dart b/lib/web_ui/lib/src/engine/html/picture.dart index 6afbf6020ff30..0cecee819b768 100644 --- a/lib/web_ui/lib/src/engine/html/picture.dart +++ b/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(); @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 diff --git a/lib/web_ui/lib/src/engine/html/platform_view.dart b/lib/web_ui/lib/src/engine/html/platform_view.dart index 108ac19435b05..af0f82db4b51e 100644 --- a/lib/web_ui/lib/src/engine/html/platform_view.dart +++ b/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); } diff --git a/lib/web_ui/lib/src/engine/html/scene.dart b/lib/web_ui/lib/src/engine/html/scene.dart index f5e139e2b1311..48d1c5c7e72f2 100644 --- a/lib/web_ui/lib/src/engine/html/scene.dart +++ b/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'); } diff --git a/lib/web_ui/lib/src/engine/html/shader_mask.dart b/lib/web_ui/lib/src/engine/html/shader_mask.dart index 1048e061342a8..977f0f9c70bd4 100644 --- a/lib/web_ui/lib/src/engine/html/shader_mask.dart +++ b/lib/web_ui/lib/src/engine/html/shader_mask.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 '../embedder.dart'; import 'bitmap_canvas.dart'; import 'color_filter.dart'; @@ -35,7 +34,7 @@ class PersistedShaderMask extends PersistedContainerSurface this.filterQuality, ) : super(oldLayer); - DomElement? _childContainer; + html.Element? _childContainer; final ui.Shader shader; final ui.Rect maskRect; final ui.BlendMode blendMode; @@ -53,7 +52,7 @@ class PersistedShaderMask extends PersistedContainerSurface } @override - html.Element? get childContainer => _childContainer as html.Element?; + html.Element? get childContainer => _childContainer; @override void discard() { @@ -73,9 +72,9 @@ class PersistedShaderMask extends PersistedContainerSurface } @override - DomElement createElement() { - final DomElement element = defaultCreateElement('flt-shader-mask'); - final DomElement container = createDomElement('flt-mask-interior'); + html.Element createElement() { + final html.Element element = defaultCreateElement('flt-shader-mask'); + final html.Element container = html.Element.tag('flt-mask-interior'); container.style.position = 'absolute'; _childContainer = container; element.append(_childContainer!); diff --git a/lib/web_ui/lib/src/engine/html/surface.dart b/lib/web_ui/lib/src/engine/html/surface.dart index 97f82f4991de5..ca2104adf3ab1 100644 --- a/lib/web_ui/lib/src/engine/html/surface.dart +++ b/lib/web_ui/lib/src/engine/html/surface.dart @@ -7,7 +7,6 @@ import 'dart:html' as html; import 'package:meta/meta.dart'; import 'package:ui/ui.dart' as ui; -import '../dom.dart'; import '../frame_reference.dart'; import '../onscreen_logging.dart'; import '../semantics.dart'; @@ -370,7 +369,7 @@ abstract class PersistedSurface implements ui.EngineLayer { } } assert(debugAssertSurfaceState(this, PersistedSurfaceState.created)); - rootElement = createElement() as html.Element; + rootElement = createElement(); assert(rootElement != null); applyWebkitClipFix(rootElement); if (debugExplainSurfaceStats) { @@ -500,12 +499,12 @@ abstract class PersistedSurface implements ui.EngineLayer { } /// Creates a DOM element for this surface. - DomElement createElement(); + html.Element createElement(); /// Creates a DOM element for this surface preconfigured with common /// attributes, such as absolute positioning and debug information. - DomElement defaultCreateElement(String tagName) { - final DomElement element = createDomElement(tagName); + html.Element defaultCreateElement(String tagName) { + final html.Element element = html.Element.tag(tagName); element.style.position = 'absolute'; if (assertionsEnabled) { element.setAttribute('flt-layer-state', 'new'); diff --git a/lib/web_ui/lib/src/engine/html/transform.dart b/lib/web_ui/lib/src/engine/html/transform.dart index 2a61118b760a7..d3e1f8f53a2be 100644 --- a/lib/web_ui/lib/src/engine/html/transform.dart +++ b/lib/web_ui/lib/src/engine/html/transform.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 'dart:typed_data'; import 'package:ui/ui.dart' as ui; -import '../dom.dart'; import '../util.dart'; import '../vector_math.dart'; import 'surface.dart'; @@ -41,8 +41,8 @@ class PersistedTransform extends PersistedContainerSurface } @override - DomElement createElement() { - final DomElement element = domDocument.createElement('flt-transform'); + html.Element createElement() { + final html.Element element = html.document.createElement('flt-transform'); setElementStyle(element, 'position', 'absolute'); setElementStyle(element, 'transform-origin', '0 0 0'); return element; diff --git a/lib/web_ui/lib/src/engine/mouse_cursor.dart b/lib/web_ui/lib/src/engine/mouse_cursor.dart index 1d05a24723c1a..3e5979bdedd86 100644 --- a/lib/web_ui/lib/src/engine/mouse_cursor.dart +++ b/lib/web_ui/lib/src/engine/mouse_cursor.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 'dom.dart'; import 'embedder.dart'; import 'util.dart'; @@ -68,7 +67,7 @@ class MouseCursor { void activateSystemCursor(String? kind) { setElementStyle( - flutterViewEmbedder.glassPaneElement! as DomElement, + flutterViewEmbedder.glassPaneElement!, 'cursor', _mapKindToCssValue(kind), ); diff --git a/lib/web_ui/lib/src/engine/platform_views/slots.dart b/lib/web_ui/lib/src/engine/platform_views/slots.dart index 509ebcbf8ab96..3b1a08b47b79f 100644 --- a/lib/web_ui/lib/src/engine/platform_views/slots.dart +++ b/lib/web_ui/lib/src/engine/platform_views/slots.dart @@ -2,7 +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 'dart:html' as html; /// Returns the name of a slot from its `viewId`. /// @@ -32,14 +32,14 @@ String getPlatformViewSlotName(int viewId) { /// /// (When the framework accesses a `slot`, it's really accessing its wrapper /// `flt-platform-view-slot` tag) -DomElement createPlatformViewSlot(int viewId) { +html.Element createPlatformViewSlot(int viewId) { final String slotName = getPlatformViewSlotName(viewId); - final DomElement wrapper = domDocument + final html.Element wrapper = html.document .createElement('flt-platform-view-slot') ..style.pointerEvents = 'auto'; - final DomElement slot = domDocument.createElement('slot') + final html.Element slot = html.document.createElement('slot') ..setAttribute('name', slotName); return wrapper..append(slot); diff --git a/lib/web_ui/lib/src/engine/text/paragraph.dart b/lib/web_ui/lib/src/engine/text/paragraph.dart index 3316d8cfdde27..b76328b9127aa 100644 --- a/lib/web_ui/lib/src/engine/text/paragraph.dart +++ b/lib/web_ui/lib/src/engine/text/paragraph.dart @@ -8,7 +8,6 @@ import 'dart:math' as math; import 'package:ui/ui.dart' as ui; import '../browser_detection.dart'; -import '../dom.dart'; import '../embedder.dart'; import '../util.dart'; import 'layout_service.dart'; @@ -744,7 +743,7 @@ void applyTextStyleToElement({ if (textDecoration != null) { if (browserEngine == BrowserEngine.webkit) { setElementStyle( - element as DomElement, '-webkit-text-decoration', textDecoration); + element, '-webkit-text-decoration', textDecoration); } else { cssStyle.textDecoration = textDecoration; } diff --git a/lib/web_ui/lib/src/engine/util.dart b/lib/web_ui/lib/src/engine/util.dart index eb46f404ade60..d2fe1c5fcdda2 100644 --- a/lib/web_ui/lib/src/engine/util.dart +++ b/lib/web_ui/lib/src/engine/util.dart @@ -656,7 +656,7 @@ String bytesToHexString(List data) { /// [name] is the name of the property. [value] is the value of the property. /// If [value] is null, removes the style property. void setElementStyle( - DomElement element, String name, String? value) { + html.Element element, String name, String? value) { if (value == null) { element.style.removeProperty(name); } else { diff --git a/lib/web_ui/test/engine/platform_views/content_manager_test.dart b/lib/web_ui/test/engine/platform_views/content_manager_test.dart index d9da6cac7ce0e..7ec055045cc08 100644 --- a/lib/web_ui/test/engine/platform_views/content_manager_test.dart +++ b/lib/web_ui/test/engine/platform_views/content_manager_test.dart @@ -121,8 +121,8 @@ void testMain() { test('slot property has the same value as createPlatformViewSlot', () async { final html.Element content = contentManager.renderContent(viewType, viewId, null); - final DomElement slot = createPlatformViewSlot(viewId); - final DomElement innerSlot = slot.querySelector('slot')!; + final html.Element slot = createPlatformViewSlot(viewId); + final html.Element innerSlot = slot.querySelector('slot')!; expect(content.getAttribute('slot'), innerSlot.getAttribute('name'), reason: diff --git a/lib/web_ui/test/engine/platform_views/slots_test.dart b/lib/web_ui/test/engine/platform_views/slots_test.dart index e694a74072eaa..f799e063c337b 100644 --- a/lib/web_ui/test/engine/platform_views/slots_test.dart +++ b/lib/web_ui/test/engine/platform_views/slots_test.dart @@ -2,6 +2,8 @@ // 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:test/bootstrap/browser.dart'; import 'package:test/test.dart'; import 'package:ui/src/engine.dart'; @@ -18,17 +20,17 @@ void testMain() { test( 'can render slot, even for views that might have never been rendered before', () async { - final DomElement slot = createPlatformViewSlot(viewId); + final html.Element slot = createPlatformViewSlot(viewId); expect(slot, isNotNull); expect(slot.querySelector('slot'), isNotNull); }); test('rendered markup contains required attributes', () async { - final DomElement slot = createPlatformViewSlot(viewId); + final html.Element slot = createPlatformViewSlot(viewId); expect(slot.style.pointerEvents, 'auto', reason: 'Should re-enable pointer events for the contents of the view.'); - final DomElement innerSlot = slot.querySelector('slot')!; + final html.Element innerSlot = slot.querySelector('slot')!; expect(innerSlot.getAttribute('name'), contains('$viewId'), reason: 'The name attribute of the inner SLOT tag must refer to the viewId.'); diff --git a/lib/web_ui/test/engine/surface/platform_view_test.dart b/lib/web_ui/test/engine/surface/platform_view_test.dart index 9c763a4fb698c..d8ff0567a0ca0 100644 --- a/lib/web_ui/test/engine/surface/platform_view_test.dart +++ b/lib/web_ui/test/engine/surface/platform_view_test.dart @@ -70,7 +70,7 @@ Future testMain() async { group('createElement', () { test('creates slot element that can receive pointer events', () { - final DomElement element = view.createElement(); + final html.Element element = view.createElement(); expect(element.tagName, equalsIgnoringCase('flt-platform-view-slot')); expect(element.style.pointerEvents, 'auto'); diff --git a/lib/web_ui/test/engine/surface/surface_test.dart b/lib/web_ui/test/engine/surface/surface_test.dart index 7afb183bedfd2..90911fdb23109 100644 --- a/lib/web_ui/test/engine/surface/surface_test.dart +++ b/lib/web_ui/test/engine/surface/surface_test.dart @@ -396,9 +396,9 @@ class _LoggingTestSurface extends PersistedContainerSurface { } @override - DomElement createElement() { + html.Element createElement() { log.add('createElement'); - return createDomElement('flt-test-layer'); + return html.Element.tag('flt-test-layer'); } @override diff --git a/lib/web_ui/test/engine/util_test.dart b/lib/web_ui/test/engine/util_test.dart index 57b2ac53c0f35..55099191d36cf 100644 --- a/lib/web_ui/test/engine/util_test.dart +++ b/lib/web_ui/test/engine/util_test.dart @@ -3,6 +3,7 @@ // found in the LICENSE file. import 'dart:async'; +import 'dart:html' as html; import 'dart:typed_data'; import 'package:test/bootstrap/browser.dart'; @@ -106,13 +107,13 @@ void testMain() { }); test('can set style properties on elements', () { - final DomElement element = domDocument.createElement('div'); + final html.Element element = html.document.createElement('div'); setElementStyle(element, 'color', 'red'); expect(element.style.color, 'red'); }); test('can remove style properties from elements', () { - final DomElement element = domDocument.createElement('div'); + final html.Element element = html.document.createElement('div'); setElementStyle(element, 'color', 'blue'); expect(element.style.color, 'blue'); setElementStyle(element, 'color', null);