Revert "[web] Migrate Flutter Web DOM usage to JS static interop - 37. (#33373)" This reverts commit e744b3a423ef13dfcf0ea937df58731a5bbfed9f.
diff --git a/lib/web_ui/lib/src/engine/dom.dart b/lib/web_ui/lib/src/engine/dom.dart index 88dcd3e..1870e9c 100644 --- a/lib/web_ui/lib/src/engine/dom.dart +++ b/lib/web_ui/lib/src/engine/dom.dart
@@ -46,7 +46,6 @@ elt, if (pseudoElt != null) pseudoElt ]) as DomCSSStyleDeclaration; - external DomScreen? get screen; } @JS() @@ -1096,14 +1095,6 @@ @JS() @staticInterop -class DomCompositionEvent {} - -extension DomCompositionEventExtension on DomCompositionEvent { - external String? get data; -} - -@JS() -@staticInterop class DomHTMLInputElement extends DomHTMLElement {} extension DomHTMLInputElementExtension on DomHTMLInputElement { @@ -1227,35 +1218,6 @@ @staticInterop class DomCSSStyleSheet extends DomStyleSheet {} -extension DomCSSStyleSheetExtension on DomCSSStyleSheet { - List<DomCSSRule> get cssRules => - js_util.getProperty<List<Object?>>(this, 'cssRules').cast<DomCSSRule>(); - int insertRule(String rule, [int? index]) => js_util - .callMethod(this, 'insertRule', <Object>[rule, if (index != null) index]); -} - -@JS() -@staticInterop -class DomCSSRule {} - -@JS() -@staticInterop -class DomScreen {} - -extension DomScreenExtension on DomScreen { - external DomScreenOrientation? get orientation; -} - -@JS() -@staticInterop -class DomScreenOrientation extends DomEventTarget {} - -extension DomScreenOrientationExtension on DomScreenOrientation { - Future<dynamic> lock(String orientation) => js_util - .promiseToFuture(js_util.callMethod(this, 'lock', <String>[orientation])); - external void unlock(); -} - // A helper class for managing a subscription. On construction it will add an // event listener of the requested type to the target. Calling [cancel] will // remove the listener. Caller is still responsible for calling [allowInterop]
diff --git a/lib/web_ui/lib/src/engine/embedder.dart b/lib/web_ui/lib/src/engine/embedder.dart index 0aa7f84..c93c6e1 100644 --- a/lib/web_ui/lib/src/engine/embedder.dart +++ b/lib/web_ui/lib/src/engine/embedder.dart
@@ -3,6 +3,7 @@ // found in the LICENSE file. import 'dart:async'; +import 'dart:html' as html; import 'package:ui/ui.dart' as ui; @@ -51,18 +52,22 @@ // The tag name for the root view of the flutter app (glass-pane) static const String _glassPaneTagName = 'flt-glass-pane'; - /// Listens to window resize events - DomSubscription? _resizeSubscription; + /// Fires when browser language preferences change. + static const html.EventStreamProvider<html.Event> languageChangeEvent = + html.EventStreamProvider<html.Event>('languagechange'); + + /// Listens to window resize events. + StreamSubscription<html.Event>? _resizeSubscription; /// Listens to window locale events. - DomSubscription? _localeSubscription; + StreamSubscription<html.Event>? _localeSubscription; /// Contains Flutter-specific CSS rules, such as default margins and /// paddings. - DomHTMLStyleElement? _styleElement; + html.StyleElement? _styleElement; /// Configures the screen, such as scaling. - DomHTMLMetaElement? _viewportMeta; + html.MetaElement? _viewportMeta; /// The element that contains the [sceneElement]. /// @@ -71,12 +76,12 @@ /// /// This element is inserted after the [semanticsHostElement] so that /// platform views take precedence in DOM event handling. - DomElement? get sceneHostElement => _sceneHostElement; - DomElement? _sceneHostElement; + html.Element? get sceneHostElement => _sceneHostElement; + html.Element? _sceneHostElement; /// A child element of body outside the shadowroot that hosts /// global resources such svg filters and clip paths when using webkit. - DomElement? _resourcesHost; + html.Element? _resourcesHost; /// The element that contains the semantics tree. /// @@ -91,18 +96,18 @@ /// /// This element is inserted before the [semanticsHostElement] so that /// platform views take precedence in DOM event handling. - DomElement? get semanticsHostElement => _semanticsHostElement; - DomElement? _semanticsHostElement; + html.Element? get semanticsHostElement => _semanticsHostElement; + html.Element? _semanticsHostElement; /// The last scene element rendered by the [render] method. - DomElement? get sceneElement => _sceneElement; - DomElement? _sceneElement; + html.Element? get sceneElement => _sceneElement; + html.Element? _sceneElement; /// This is state persistent across hot restarts that indicates what /// to clear. Delay removal of old visible state to make the /// transition appear smooth. static const String _staleHotRestartStore = '__flutter_state'; - List<DomElement?>? _staleHotRestartState; + List<html.Element?>? _staleHotRestartState; /// Creates a container for DOM elements that need to be cleaned up between /// hot restarts. @@ -110,11 +115,11 @@ /// If a contains already exists, reuses the existing one. void _setupHotRestart() { // This persists across hot restarts to clear stale DOM. - _staleHotRestartState = getJsProperty<List<DomElement?>?>(domWindow, _staleHotRestartStore); + _staleHotRestartState = getJsProperty<List<html.Element?>?>(html.window, _staleHotRestartStore); if (_staleHotRestartState == null) { - _staleHotRestartState = <DomElement?>[]; + _staleHotRestartState = <html.Element?>[]; setJsProperty( - domWindow, _staleHotRestartStore, _staleHotRestartState); + html.window, _staleHotRestartStore, _staleHotRestartState); } } @@ -125,7 +130,7 @@ registerHotRestartListener(() { _resizeSubscription?.cancel(); _localeSubscription?.cancel(); - _staleHotRestartState!.addAll(<DomElement?>[ + _staleHotRestartState!.addAll(<html.Element?>[ _glassPaneElement, _styleElement, _viewportMeta, @@ -135,7 +140,7 @@ void _clearOnHotRestart() { if (_staleHotRestartState!.isNotEmpty) { - for (final DomElement? element in _staleHotRestartState!) { + for (final html.Element? element in _staleHotRestartState!) { element?.remove(); } _staleHotRestartState!.clear(); @@ -146,7 +151,7 @@ /// already in the right place, skip DOM mutation. This is both faster and /// more correct, because moving DOM nodes loses internal state, such as /// text selection. - void addSceneToSceneHost(DomElement? sceneElement) { + void addSceneToSceneHost(html.Element? sceneElement) { if (sceneElement != _sceneElement) { _sceneElement?.remove(); _sceneElement = sceneElement; @@ -164,14 +169,14 @@ /// which captures semantics input events. The semantics DOM tree must be a /// child of the glass pane element so that events bubble up to the glass pane /// if they are not handled by semantics. - DomElement? get glassPaneElement => _glassPaneElement; - DomElement? _glassPaneElement; + html.Element? get glassPaneElement => _glassPaneElement; + html.Element? _glassPaneElement; /// The [HostNode] of the [glassPaneElement], which contains the whole Flutter app. HostNode? get glassPaneShadow => _glassPaneShadow; HostNode? _glassPaneShadow; - final DomElement rootElement = domDocument.body!; + final html.Element rootElement = html.document.body!; static const String defaultFontStyle = 'normal'; static const String defaultFontWeight = 'normal'; @@ -184,11 +189,11 @@ final bool isWebKit = browserEngine == BrowserEngine.webkit; _styleElement?.remove(); - _styleElement = createDomHTMLStyleElement(); + _styleElement = html.StyleElement(); _resourcesHost?.remove(); _resourcesHost = null; - domDocument.head!.append(_styleElement!); - final DomCSSStyleSheet sheet = _styleElement!.sheet! as DomCSSStyleSheet; + html.document.head!.append(_styleElement!); + final html.CssStyleSheet sheet = _styleElement!.sheet! as html.CssStyleSheet; applyGlobalCssRulesToSheet( sheet, browserEngine: browserEngine, @@ -233,8 +238,8 @@ // engine are complete. bodyElement.spellcheck = false; - for (final DomElement viewportMeta - in domDocument.head!.querySelectorAll('meta[name="viewport"]')) { + for (final html.Element viewportMeta + in html.document.head!.querySelectorAll('meta[name="viewport"]')) { if (assertionsEnabled) { // Filter out the meta tag that the engine placed on the page. This is // to avoid UI flicker during hot restart. Hot restart will clean up the @@ -255,18 +260,18 @@ // variables, so this will be null upon hot restart. Instead, this tag is // removed by _clearOnHotRestart. _viewportMeta?.remove(); - _viewportMeta = createDomHTMLMetaElement() + _viewportMeta = html.MetaElement() ..setAttribute('flt-viewport', '') ..name = 'viewport' ..content = 'width=device-width, initial-scale=1.0, ' 'maximum-scale=1.0, user-scalable=no'; - domDocument.head!.append(_viewportMeta!); + html.document.head!.append(_viewportMeta!); // 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; + _glassPaneElement = glassPaneElement as html.Element; glassPaneElement.style ..position = 'absolute' ..top = '0' @@ -280,11 +285,12 @@ // 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. - _sceneHostElement = domDocument.createElement('flt-scene-host') + _sceneHostElement = html.document.createElement('flt-scene-host') ..style.pointerEvents = 'none'; /// CanvasKit uses a static scene element that never gets replaced, so it's @@ -292,24 +298,24 @@ /// system is reset due to hot restart or in a test. if (useCanvasKit) { skiaSceneHost = createDomElement('flt-scene'); - addSceneToSceneHost(skiaSceneHost); + addSceneToSceneHost(skiaSceneHost as html.Element?); } - final DomElement semanticsHostElement = - domDocument.createElement('flt-semantics-host'); + final html.Element semanticsHostElement = + html.document.createElement('flt-semantics-host'); semanticsHostElement.style ..position = 'absolute' ..transformOrigin = '0 0 0'; _semanticsHostElement = semanticsHostElement; updateSemanticsScreenProperties(); - final DomElement _accessibilityPlaceholder = EngineSemanticsOwner + final html.Element _accessibilityPlaceholder = EngineSemanticsOwner .instance.semanticsHelper - .prepareAccessibilityPlaceholder(); + .prepareAccessibilityPlaceholder() as html.Element; glassPaneElementHostNode.appendAll(<DomNode>[ - _accessibilityPlaceholder, - _sceneHostElement!, + _accessibilityPlaceholder as DomNode, + _sceneHostElement! as DomNode, // The semantic host goes last because hit-test order-wise it must be // first. If semantics goes under the scene host, platform views will @@ -321,7 +327,7 @@ // elements transparent. This way, if a platform view appears among other // interactive Flutter widgets, as long as those widgets do not intersect // with the platform view, the platform view will be reachable. - semanticsHostElement, + semanticsHostElement as DomNode, ]); // When debugging semantics, make the scene semi-transparent so that the @@ -333,7 +339,7 @@ PointerBinding.initInstance(glassPaneElement); KeyboardBinding.initInstance(glassPaneElement); - if (domWindow.visualViewport == null && isWebKit) { + if (html.window.visualViewport == null && isWebKit) { // Older Safari versions sometimes give us bogus innerWidth/innerHeight // values when the page loads. When it changes the values to correct ones // it does not notify of the change via `onResize`. As a workaround, we @@ -347,13 +353,13 @@ // Firefox returns correct values for innerHeight, innerWidth. // Firefox also triggers html.window.onResize therefore this timer does // not need to be set up for Firefox. - final int initialInnerWidth = domWindow.innerWidth!; + final int initialInnerWidth = html.window.innerWidth!; // Counts how many times screen size was checked. It is checked up to 5 // times. int checkCount = 0; Timer.periodic(const Duration(milliseconds: 100), (Timer t) { checkCount += 1; - if (initialInnerWidth != domWindow.innerWidth) { + if (initialInnerWidth != html.window.innerWidth) { // Window size changed. Notify. t.cancel(); _metricsDidChange(null); @@ -364,25 +370,24 @@ }); } - if (domWindow.visualViewport != null) { - _resizeSubscription = DomSubscription(domWindow.visualViewport!, 'resize', - allowInterop(_metricsDidChange)); + if (html.window.visualViewport != null) { + _resizeSubscription = + html.window.visualViewport!.onResize.listen(_metricsDidChange); } else { - _resizeSubscription = DomSubscription(domWindow, 'resize', - allowInterop(_metricsDidChange)); + _resizeSubscription = html.window.onResize.listen(_metricsDidChange); } - _localeSubscription = DomSubscription(domWindow, 'languagechange', - allowInterop(_languageDidChange)); + _localeSubscription = + languageChangeEvent.forTarget(html.window).listen(_languageDidChange); EnginePlatformDispatcher.instance.updateLocales(); } - // Creates a [HostNode] into a `root` [DomElement]. - HostNode _createHostNode(DomElement root) { + // Creates a [HostNode] into a `root` [html.Element]. + HostNode _createHostNode(html.Element root) { if (getJsProperty<Object?>(root, 'attachShadow') != null) { - return ShadowDomHostNode(root); + return ShadowDomHostNode(root as DomElement); } else { // attachShadow not available, fall back to ElementHostNode. - return ElementHostNode(root); + return ElementHostNode(root as DomElement); } } @@ -390,8 +395,8 @@ /// logical pixels. To compensate, an inverse scale is injected at the root /// level. void updateSemanticsScreenProperties() { - _semanticsHostElement!.style.setProperty('transform', - 'scale(${1 / domWindow.devicePixelRatio})'); + _semanticsHostElement!.style.transform = + 'scale(${1 / html.window.devicePixelRatio})'; } /// Called immediately after browser window metrics change. @@ -403,7 +408,7 @@ /// /// Note: always check for rotations for a mobile device. Update the physical /// size if the change is caused by a rotation. - void _metricsDidChange(DomEvent? event) { + void _metricsDidChange(html.Event? event) { updateSemanticsScreenProperties(); if (isMobile && !window.isRotation() && textEditing.isEditing) { window.computeOnScreenKeyboardInsets(true); @@ -417,7 +422,7 @@ } /// Called immediately after browser window language change. - void _languageDidChange(DomEvent event) { + void _languageDidChange(html.Event event) { EnginePlatformDispatcher.instance.updateLocales(); if (ui.window.onLocaleChanged != null) { ui.window.onLocaleChanged!(); @@ -446,9 +451,9 @@ /// /// See w3c screen api: https://www.w3.org/TR/screen-orientation/ Future<bool> setPreferredOrientation(List<dynamic> orientations) { - final DomScreen screen = domWindow.screen!; + final html.Screen screen = html.window.screen!; if (!unsafeIsNull(screen)) { - final DomScreenOrientation? screenOrientation = screen.orientation; + final html.ScreenOrientation? screenOrientation = screen.orientation; if (!unsafeIsNull(screenOrientation)) { if (orientations.isEmpty) { screenOrientation!.unlock(); @@ -495,9 +500,9 @@ } /// The element corresponding to the only child of the root surface. - DomElement? get _rootApplicationElement { - final DomElement lastElement = rootElement.children.last; - for (final DomElement child in lastElement.children) { + html.Element? get _rootApplicationElement { + final html.Element lastElement = rootElement.children.last; + for (final html.Element child in lastElement.children) { if (child.tagName == 'FLT-SCENE') { return child; } @@ -511,37 +516,37 @@ /// place it as first element of body(webkit), or as a child of /// glass pane element for other browsers to make sure url resolution /// works correctly when content is inside a shadow root. - void addResource(DomElement element) { + void addResource(html.Element element) { final bool isWebKit = browserEngine == BrowserEngine.webkit; if (_resourcesHost == null) { - _resourcesHost = createDomHTMLDivElement() + _resourcesHost = html.DivElement() ..style.visibility = 'hidden'; if (isWebKit) { - final DomNode bodyNode = domDocument.body!; + final html.Node bodyNode = html.document.body!; bodyNode.insertBefore(_resourcesHost!, bodyNode.firstChild); } else { _glassPaneShadow!.node.insertBefore( - _resourcesHost!, _glassPaneShadow!.node.firstChild); + _resourcesHost! as DomNode, _glassPaneShadow!.node.firstChild); } } _resourcesHost!.append(element); } /// Removes a global resource element. - void removeResource(DomElement? element) { + void removeResource(html.Element? element) { if (element == null) { return; } - assert(element.parentNode == _resourcesHost); + assert(element.parent == _resourcesHost); element.remove(); } - String get currentHtml => _rootApplicationElement?.outerHTML ?? ''; + String get currentHtml => _rootApplicationElement?.outerHtml ?? ''; } // Applies the required global CSS to an incoming [html.CssStyleSheet] `sheet`. void applyGlobalCssRulesToSheet( - DomCSSStyleSheet sheet, { + html.CssStyleSheet sheet, { required BrowserEngine browserEngine, required bool hasAutofillOverlay, String glassPaneTagName = FlutterViewEmbedder._glassPaneTagName,
diff --git a/lib/web_ui/lib/src/engine/host_node.dart b/lib/web_ui/lib/src/engine/host_node.dart index dee8ffb..fe48e9d 100644 --- a/lib/web_ui/lib/src/engine/host_node.dart +++ b/lib/web_ui/lib/src/engine/host_node.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 'browser_detection.dart'; import 'dom.dart'; import 'embedder.dart'; @@ -109,7 +111,7 @@ // TODO(dit): Apply only rules for the shadow root applyGlobalCssRulesToSheet( - shadowRootStyleElement.sheet! as DomCSSStyleSheet, + shadowRootStyleElement.sheet! as html.CssStyleSheet, browserEngine: browserEngine, hasAutofillOverlay: browserHasAutofillOverlay(), );
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 0858956..71beada 100644 --- a/lib/web_ui/lib/src/engine/html/color_filter.dart +++ b/lib/web_ui/lib/src/engine/html/color_filter.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:ui/ui.dart' as ui; import '../browser_detection.dart'; @@ -52,7 +54,7 @@ @override void discard() { super.discard(); - flutterViewEmbedder.removeResource(_filterElement); + flutterViewEmbedder.removeResource(_filterElement as html.Element?); // Do not detach the child container from the root. It is permanently // attached. The elements are reused together and are detached from the DOM // together. @@ -71,7 +73,7 @@ @override void apply() { - flutterViewEmbedder.removeResource(_filterElement); + flutterViewEmbedder.removeResource(_filterElement as html.Element?); _filterElement = null; final EngineColorFilter? engineValue = filter as EngineColorFilter?; if (engineValue == null) { @@ -137,7 +139,7 @@ // Use SVG filter for blend mode. final SvgFilter svgFilter = svgFilterFromBlendMode(filterColor, colorFilterBlendMode); _filterElement = svgFilter.element; - flutterViewEmbedder.addResource(_filterElement!); + flutterViewEmbedder.addResource(_filterElement! as html.Element); style.filter = 'url(#${svgFilter.id})'; if (colorFilterBlendMode == ui.BlendMode.saturation || colorFilterBlendMode == ui.BlendMode.multiply || @@ -149,7 +151,7 @@ void _applyMatrixColorFilter(CkMatrixColorFilter colorFilter) { final SvgFilter svgFilter = svgFilterFromColorMatrix(colorFilter.matrix); _filterElement = svgFilter.element; - flutterViewEmbedder.addResource(_filterElement!); + flutterViewEmbedder.addResource(_filterElement! as html.Element); childContainer!.style.filter = 'url(#${svgFilter.id})'; }
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 d748bc1..526bf88 100644 --- a/lib/web_ui/lib/src/engine/html/shader_mask.dart +++ b/lib/web_ui/lib/src/engine/html/shader_mask.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:ui/ui.dart' as ui; import '../browser_detection.dart'; @@ -38,7 +40,7 @@ final ui.Rect maskRect; final ui.BlendMode blendMode; final ui.FilterQuality filterQuality; - DomElement? _shaderElement; + html.Element? _shaderElement; final bool isWebKit = browserEngine == BrowserEngine.webkit; @override @@ -160,7 +162,7 @@ final SvgFilter svgFilter = svgMaskFilterFromImageAndBlendMode( imageUrl, blendModeTemp, maskRect.width, maskRect.height); - _shaderElement = svgFilter.element; + _shaderElement = svgFilter.element as html.Element; if (isWebKit) { _childContainer!.style.filter = 'url(#${svgFilter.id})'; } else {
diff --git a/lib/web_ui/lib/src/engine/mouse_cursor.dart b/lib/web_ui/lib/src/engine/mouse_cursor.dart index 3e5979b..1d05a24 100644 --- a/lib/web_ui/lib/src/engine/mouse_cursor.dart +++ b/lib/web_ui/lib/src/engine/mouse_cursor.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 'embedder.dart'; import 'util.dart'; @@ -67,7 +68,7 @@ void activateSystemCursor(String? kind) { setElementStyle( - flutterViewEmbedder.glassPaneElement!, + flutterViewEmbedder.glassPaneElement! as DomElement, 'cursor', _mapKindToCssValue(kind), );
diff --git a/lib/web_ui/lib/src/engine/platform_dispatcher.dart b/lib/web_ui/lib/src/engine/platform_dispatcher.dart index f5c03c0..39da68a 100644 --- a/lib/web_ui/lib/src/engine/platform_dispatcher.dart +++ b/lib/web_ui/lib/src/engine/platform_dispatcher.dart
@@ -4,6 +4,7 @@ import 'dart:async'; import 'dart:convert'; +import 'dart:html' as html; import 'dart:typed_data'; import 'package:meta/meta.dart'; @@ -484,7 +485,7 @@ contentManager: platformViewManager, contentHandler: (DomElement content) { // Remove cast to [html.Element] after migration. - flutterViewEmbedder.glassPaneElement!.append(content); + flutterViewEmbedder.glassPaneElement!.append(content as html.Element); }, ); _platformViewMessageHandler!.handlePlatformViewCall(data, callback!); @@ -607,7 +608,7 @@ rasterizer!.draw(layerScene.layerTree); } else { final SurfaceScene surfaceScene = scene as SurfaceScene; - flutterViewEmbedder.addSceneToSceneHost(surfaceScene.webOnlyRootElement); + flutterViewEmbedder.addSceneToSceneHost(surfaceScene.webOnlyRootElement as html.Element?); } frameTimingsOnRasterFinish(); }
diff --git a/lib/web_ui/lib/src/engine/semantics/semantics.dart b/lib/web_ui/lib/src/engine/semantics/semantics.dart index 9745699..4ac038f 100644 --- a/lib/web_ui/lib/src/engine/semantics/semantics.dart +++ b/lib/web_ui/lib/src/engine/semantics/semantics.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 'dart:html' as html; import 'dart:math' as math; import 'dart:typed_data'; @@ -1786,7 +1787,7 @@ if (_rootSemanticsElement == null) { final SemanticsObject root = _semanticsTree[0]!; _rootSemanticsElement = root.element; - flutterViewEmbedder.semanticsHostElement!.append(root.element); + flutterViewEmbedder.semanticsHostElement!.append(root.element as html.Node); } _finalizeTree();
diff --git a/lib/web_ui/lib/src/engine/text_editing/composition_aware_mixin.dart b/lib/web_ui/lib/src/engine/text_editing/composition_aware_mixin.dart index 7ba45ad..fdab6ad 100644 --- a/lib/web_ui/lib/src/engine/text_editing/composition_aware_mixin.dart +++ b/lib/web_ui/lib/src/engine/text_editing/composition_aware_mixin.dart
@@ -2,8 +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 '../safe_browser_api.dart'; +import 'dart:html' as html; + import 'text_editing.dart'; /// Provides default functionality for listening to HTML composition events. @@ -29,12 +29,9 @@ /// The name of the browser composition event type that triggers on ending a composition. static const String _kCompositionEnd = 'compositionend'; - late final DomEventListener _compositionStartListener = - allowInterop(_handleCompositionStart); - late final DomEventListener _compositionUpdateListener = - allowInterop(_handleCompositionUpdate); - late final DomEventListener _compositionEndListener = - allowInterop(_handleCompositionEnd); + late final html.EventListener _compositionStartListener = _handleCompositionStart; + late final html.EventListener _compositionUpdateListener = _handleCompositionUpdate; + late final html.EventListener _compositionEndListener = _handleCompositionEnd; /// The currently composing text in the `domElement`. /// @@ -43,29 +40,29 @@ /// so it is safe to reference it to get the current composingText. String? composingText; - void addCompositionEventHandlers(DomHTMLElement domElement) { + void addCompositionEventHandlers(html.HtmlElement domElement) { domElement.addEventListener(_kCompositionStart, _compositionStartListener); domElement.addEventListener(_kCompositionUpdate, _compositionUpdateListener); domElement.addEventListener(_kCompositionEnd, _compositionEndListener); } - void removeCompositionEventHandlers(DomHTMLElement domElement) { + void removeCompositionEventHandlers(html.HtmlElement domElement) { domElement.removeEventListener(_kCompositionStart, _compositionStartListener); domElement.removeEventListener(_kCompositionUpdate, _compositionUpdateListener); domElement.removeEventListener(_kCompositionEnd, _compositionEndListener); } - void _handleCompositionStart(DomEvent event) { + void _handleCompositionStart(html.Event event) { composingText = null; } - void _handleCompositionUpdate(DomEvent event) { - if (domInstanceOfString(event, 'CompositionEvent')) { - composingText = (event as DomCompositionEvent).data; + void _handleCompositionUpdate(html.Event event) { + if (event is html.CompositionEvent) { + composingText = event.data; } } - void _handleCompositionEnd(DomEvent event) { + void _handleCompositionEnd(html.Event event) { composingText = null; }
diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart index 3e1a6e2..658c864 100644 --- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart +++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -3,6 +3,7 @@ // found in the LICENSE file. import 'dart:async'; +import 'dart:html' as html; import 'dart:math' as math; import 'dart:typed_data'; @@ -1217,7 +1218,7 @@ activeDomElement.addEventListener('beforeinput', allowInterop(handleBeforeInput)); - addCompositionEventHandlers(activeDomElement); + addCompositionEventHandlers(activeDomElement as html.HtmlElement); // Refocus on the activeDomElement after blur, so that user can keep editing the // text field. @@ -1257,7 +1258,7 @@ subscriptions[i].cancel(); } subscriptions.clear(); - removeCompositionEventHandlers(activeDomElement); + removeCompositionEventHandlers(activeDomElement as html.HtmlElement); // If focused element is a part of a form, it needs to stay on the DOM // until the autofill context of the form is finalized. @@ -1507,7 +1508,7 @@ activeDomElement.addEventListener('beforeinput', allowInterop(handleBeforeInput)); - addCompositionEventHandlers(activeDomElement); + addCompositionEventHandlers(activeDomElement as html.HtmlElement); // Position the DOM element after it is focused. subscriptions.add(DomSubscription(activeDomElement, 'focus', @@ -1660,7 +1661,7 @@ activeDomElement.addEventListener('beforeinput', allowInterop(handleBeforeInput)); - addCompositionEventHandlers(activeDomElement); + addCompositionEventHandlers(activeDomElement as html.HtmlElement); subscriptions.add( DomSubscription(activeDomElement, 'blur', @@ -1722,7 +1723,7 @@ activeDomElement.addEventListener('beforeinput', allowInterop(handleBeforeInput)); - addCompositionEventHandlers(activeDomElement); + addCompositionEventHandlers(activeDomElement as html.HtmlElement); // Detects changes in text selection. //
diff --git a/lib/web_ui/test/canvaskit/embedded_views_test.dart b/lib/web_ui/test/canvaskit/embedded_views_test.dart index 945a0d8..d9b2cf4 100644 --- a/lib/web_ui/test/canvaskit/embedded_views_test.dart +++ b/lib/web_ui/test/canvaskit/embedded_views_test.dart
@@ -42,11 +42,9 @@ // as a child of the glassPane, and the slot lives in the glassPane // shadow root. The slot is the one that has pointer events auto. final html.Element contents = - flutterViewEmbedder.glassPaneElement!.querySelector('#view-0')! as - html.Element; + flutterViewEmbedder.glassPaneElement!.querySelector('#view-0')!; final html.Element slot = - flutterViewEmbedder.sceneElement!.querySelector('slot')! as - html.Element; + flutterViewEmbedder.sceneElement!.querySelector('slot')!; final html.Element contentsHost = contents.parent!; final html.Element slotHost = slot.parent!; @@ -121,8 +119,7 @@ // Transformations happen on the slot element. final html.Element slotHost = - flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')! - as html.Element; + flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!; expect( slotHost.style.transform, @@ -147,8 +144,7 @@ dispatcher.rasterizer!.draw(sb.build().layerTree); final html.Element slotHost = - flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')! - as html.Element; + flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!; final html.CssStyleDeclaration style = slotHost.style; expect(style.transform, 'matrix(1, 0, 0, 1, 3, 4)'); @@ -193,8 +189,7 @@ // Transformations happen on the slot element. html.Element slotHost = - flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')! - as html.Element; + flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!; expect( getTransformChain(slotHost), @@ -215,8 +210,7 @@ // Transformations happen on the slot element. slotHost = - flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')! - as html.Element; + flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!; expect( getTransformChain(slotHost), @@ -247,8 +241,7 @@ // Transformations happen on the slot element. final html.Element slotHost = - flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')! - as html.Element; + flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!; expect( getTransformChain(slotHost), @@ -277,8 +270,7 @@ // Transformations happen on the slot element. final html.Element slotHost = - flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')! - as html.Element; + flutterViewEmbedder.sceneElement!.querySelector('flt-platform-view-slot')!; expect( getTransformChain(slotHost), @@ -569,8 +561,7 @@ } final html.Node skPathDefs = - flutterViewEmbedder.sceneElement!.querySelector('#sk_path_defs')! as - html.Node; + flutterViewEmbedder.sceneElement!.querySelector('#sk_path_defs')!; expect(skPathDefs.childNodes, hasLength(0));
diff --git a/lib/web_ui/test/canvaskit/h5vcc_test.dart b/lib/web_ui/test/canvaskit/h5vcc_test.dart index d18ee25..b5b4608 100644 --- a/lib/web_ui/test/canvaskit/h5vcc_test.dart +++ b/lib/web_ui/test/canvaskit/h5vcc_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:js/js.dart'; import 'package:js/js_util.dart' as js_util; import 'package:test/bootstrap/browser.dart'; @@ -57,7 +59,7 @@ // No <canvas> element should be created. expect( - flutterViewEmbedder.glassPaneElement!.querySelectorAll('canvas'), + flutterViewEmbedder.glassPaneElement!.querySelectorAll<html.Element>('canvas'), isEmpty, ); });
diff --git a/lib/web_ui/test/composition_test.dart b/lib/web_ui/test/composition_test.dart index ed4f463..54c543d 100644 --- a/lib/web_ui/test/composition_test.dart +++ b/lib/web_ui/test/composition_test.dart
@@ -9,7 +9,6 @@ import 'package:test/test.dart'; import 'package:ui/src/engine/browser_detection.dart'; -import 'package:ui/src/engine/dom.dart'; import 'package:ui/src/engine/initialization.dart'; import 'package:ui/src/engine/text_editing/composition_aware_mixin.dart'; import 'package:ui/src/engine/text_editing/input_type.dart'; @@ -69,8 +68,7 @@ final _MockWithCompositionAwareMixin mockWithCompositionAwareMixin = _MockWithCompositionAwareMixin(); mockWithCompositionAwareMixin.composingText = fakeComposingText; - mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement - as DomHTMLElement); + mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement); _inputElement.dispatchEvent(html.Event(_MockWithCompositionAwareMixin._kCompositionEnd)); @@ -83,8 +81,7 @@ final _MockWithCompositionAwareMixin mockWithCompositionAwareMixin = _MockWithCompositionAwareMixin(); mockWithCompositionAwareMixin.composingText = fakeComposingText; - mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement - as DomHTMLElement); + mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement); _inputElement.dispatchEvent(html.Event(_MockWithCompositionAwareMixin._kCompositionStart)); @@ -98,8 +95,7 @@ final _MockWithCompositionAwareMixin mockWithCompositionAwareMixin = _MockWithCompositionAwareMixin(); mockWithCompositionAwareMixin.composingText = fakeComposingText; - mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement - as DomHTMLElement); + mockWithCompositionAwareMixin.addCompositionEventHandlers(_inputElement); _inputElement.dispatchEvent(html.CompositionEvent( _MockWithCompositionAwareMixin._kCompositionUpdate,
diff --git a/lib/web_ui/test/embedder_test.dart b/lib/web_ui/test/embedder_test.dart index d227b0f..528b93f 100644 --- a/lib/web_ui/test/embedder_test.dart +++ b/lib/web_ui/test/embedder_test.dart
@@ -80,11 +80,11 @@ test('should add/remove global resource', () { final FlutterViewEmbedder embedder = FlutterViewEmbedder(); final html.DivElement resource = html.DivElement(); - embedder.addResource(resource as DomHTMLDivElement); + embedder.addResource(resource); final html.Element? resourceRoot = resource.parent; expect(resourceRoot, isNotNull); expect(resourceRoot!.childNodes.length, 1); - embedder.removeResource(resource as DomHTMLDivElement); + embedder.removeResource(resource); expect(resourceRoot.childNodes.length, 0); }); @@ -92,7 +92,7 @@ final FlutterViewEmbedder embedder = FlutterViewEmbedder(); final html.InputElement regularTextField = html.InputElement(); regularTextField.placeholder = 'Now you see me'; - embedder.addResource(regularTextField as DomHTMLInputElement); + embedder.addResource(regularTextField); regularTextField.focus(); html.CssStyleDeclaration? style = domWindow.getComputedStyle( @@ -104,7 +104,7 @@ final html.InputElement textField = html.InputElement(); textField.placeholder = 'Now you dont'; textField.classes.add('flt-text-editing'); - embedder.addResource(textField as DomHTMLInputElement); + embedder.addResource(textField); textField.focus(); style = domWindow.getComputedStyle(
diff --git a/lib/web_ui/test/engine/pointer_binding_test.dart b/lib/web_ui/test/engine/pointer_binding_test.dart index f2f4611..d5b6742 100644 --- a/lib/web_ui/test/engine/pointer_binding_test.dart +++ b/lib/web_ui/test/engine/pointer_binding_test.dart
@@ -46,8 +46,7 @@ void testMain() { ensureFlutterViewEmbedderInitialized(); - final html.Element glassPane = flutterViewEmbedder.glassPaneElement! as - html.Element; + final html.Element glassPane = flutterViewEmbedder.glassPaneElement!; double dpi = 1.0; setUp(() {
diff --git a/lib/web_ui/test/engine/semantics/semantics_test.dart b/lib/web_ui/test/engine/semantics/semantics_test.dart index 972d24e..701c157 100644 --- a/lib/web_ui/test/engine/semantics/semantics_test.dart +++ b/lib/web_ui/test/engine/semantics/semantics_test.dart
@@ -1888,9 +1888,7 @@ expect(child3Rect.right, 20); expect(child3Rect.bottom, 60); - final html.Element platformViewElement = - flutterViewEmbedder.glassPaneElement!.querySelector('#view-0')! as - html.Element; + final html.Element platformViewElement = flutterViewEmbedder.glassPaneElement!.querySelector('#view-0')!; final html.Rectangle<num> platformViewRect = platformViewElement.getBoundingClientRect(); expect(platformViewRect.left, 0); expect(platformViewRect.top, 15);
diff --git a/lib/web_ui/test/html/shaders/shader_mask_golden_test.dart b/lib/web_ui/test/html/shaders/shader_mask_golden_test.dart index 6b3567f..049611f 100644 --- a/lib/web_ui/test/html/shaders/shader_mask_golden_test.dart +++ b/lib/web_ui/test/html/shaders/shader_mask_golden_test.dart
@@ -39,7 +39,7 @@ setUp(() async { SurfaceSceneBuilder.debugForgetFrameScene(); for (final html.Node scene in - flutterViewEmbedder.sceneHostElement!.querySelectorAll('flt-scene').cast<html.Node>()) { + flutterViewEmbedder.sceneHostElement!.querySelectorAll('flt-scene')) { scene.remove(); } initWebGl(); @@ -163,7 +163,8 @@ builder.addPicture(Offset.zero, circles2); builder.pop(); - flutterViewEmbedder.sceneHostElement!.append(builder.build().webOnlyRootElement!); + flutterViewEmbedder.sceneHostElement!.append(builder.build().webOnlyRootElement! + as html.Element); } Picture _drawTestPictureWithText( @@ -219,5 +220,6 @@ builder.addPicture(Offset.zero, textPicture2); builder.pop(); - flutterViewEmbedder.sceneHostElement!.append(builder.build().webOnlyRootElement!); + flutterViewEmbedder.sceneHostElement!.append(builder.build().webOnlyRootElement! + as html.Element); }
diff --git a/lib/web_ui/test/matchers.dart b/lib/web_ui/test/matchers.dart index 4cf4622..be7310c 100644 --- a/lib/web_ui/test/matchers.dart +++ b/lib/web_ui/test/matchers.dart
@@ -461,7 +461,7 @@ /// Currently rendered HTML DOM as an HTML string. String get currentHtml { - return flutterViewEmbedder.sceneElement?.outerHTML ?? ''; + return flutterViewEmbedder.sceneElement?.outerHtml ?? ''; } class SceneTester {