This repository was archived by the owner on Feb 25, 2025. It is now read-only.
[web] Move all DOM creation to DomManager #48123
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,8 +4,11 @@ | |
|
|
||
| import 'package:ui/ui.dart' as ui; | ||
|
|
||
| import '../configuration.dart'; | ||
| import '../dom.dart'; | ||
| import '../safe_browser_api.dart'; | ||
| import '../semantics/semantics.dart'; | ||
| import 'style_manager.dart'; | ||
|
|
||
| /// Manages DOM elements and the DOM structure for a [ui.FlutterView]. | ||
| /// | ||
|
|
@@ -19,24 +22,111 @@ import '../embedder.dart'; | |
| /// | | | | ||
| /// | | +- <flt-semantics-placeholder> | ||
| /// | | | | ||
| /// | | +- [sceneHost] <flt-scene-host> | ||
| /// | | | | | ||
| /// | | | +- <flt-scene> | ||
| /// | | | | ||
| /// | | +- [announcementsHost] <flt-announcement-host> | ||
| /// | | | | ||
| /// | | +- <style> | ||
| /// | | | ||
| /// | +- ...platform views | ||
| /// | | ||
| /// +- [textEditingHost] <flt-text-editing-host> | ||
| /// | | | ||
| /// | +- ...text fields | ||
| /// | | ||
| /// +- [semanticsHost] <flt-semantics-host> | ||
| /// | | | ||
| /// | +- ...semantics nodes | ||
| /// | | ||
| /// +- <style> | ||
| /// | ||
| class DomManager { | ||
| factory DomManager({required double devicePixelRatio}) { | ||
| final DomElement rootElement = domDocument.createElement(DomManager.flutterViewTagName); | ||
| final DomElement platformViewsHost = domDocument.createElement(DomManager.glassPaneTagName); | ||
| final DomShadowRoot renderingHost = _attachShadowRoot(platformViewsHost); | ||
| final DomElement sceneHost = domDocument.createElement(DomManager.sceneHostTagName); | ||
| final DomElement textEditingHost = domDocument.createElement(DomManager.textEditingHostTagName); | ||
| final DomElement semanticsHost = domDocument.createElement(DomManager.semanticsHostTagName); | ||
| final DomElement announcementsHost = createDomElement(DomManager.announcementsHostTagName); | ||
|
|
||
| // Root element children. | ||
|
|
||
| rootElement.appendChild(platformViewsHost); | ||
| rootElement.appendChild(textEditingHost); | ||
| // The semantic host goes last because hit-test order-wise it must be | ||
| // first. If semantics goes under the scene host, platform views will | ||
| // obscure semantic elements. | ||
| // | ||
| // You may be wondering: wouldn't semantics obscure platform views and | ||
| // make then not accessible? At least with some careful planning, that | ||
| // should not be the case. The semantics tree makes all of its non-leaf | ||
| // 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. | ||
| rootElement.appendChild(semanticsHost); | ||
|
|
||
| // Rendering host (shadow root) children. | ||
|
|
||
| // TODO(yjbanov): In a multi-view world, we may want to have a separate | ||
| // semantics owner for each view. | ||
| // https://github.com/flutter/flutter/issues/137445 | ||
| final DomElement accessibilityPlaceholder = EngineSemanticsOwner | ||
| .instance.semanticsHelper | ||
| .prepareAccessibilityPlaceholder(); | ||
|
|
||
| renderingHost.append(accessibilityPlaceholder); | ||
| renderingHost.append(sceneHost); | ||
| renderingHost.append(announcementsHost); | ||
|
|
||
| // Styling. | ||
|
|
||
| StyleManager.attachGlobalStyles( | ||
| node: rootElement, | ||
| styleId: 'flt-text-editing-stylesheet', | ||
| styleNonce: configuration.nonce, | ||
| cssSelectorPrefix: DomManager.flutterViewTagName, | ||
| ); | ||
|
|
||
| StyleManager.attachGlobalStyles( | ||
| node: renderingHost, | ||
| styleId: 'flt-internals-stylesheet', | ||
| styleNonce: configuration.nonce, | ||
| cssSelectorPrefix: '', | ||
| ); | ||
|
|
||
| StyleManager.styleSceneHost( | ||
| sceneHost, | ||
| debugShowSemanticsNodes: configuration.debugShowSemanticsNodes, | ||
| ); | ||
|
|
||
| StyleManager.styleSemanticsHost( | ||
| semanticsHost, | ||
| devicePixelRatio, | ||
| ); | ||
|
|
||
| return DomManager._( | ||
| rootElement: rootElement, | ||
| platformViewsHost: platformViewsHost, | ||
| renderingHost: renderingHost, | ||
| sceneHost: sceneHost, | ||
| textEditingHost: textEditingHost, | ||
| semanticsHost: semanticsHost, | ||
| announcementsHost: announcementsHost, | ||
| ); | ||
| } | ||
|
|
||
| DomManager._({ | ||
| required this.rootElement, | ||
| required this.platformViewsHost, | ||
| required this.renderingHost, | ||
| required this.sceneHost, | ||
| required this.textEditingHost, | ||
| required this.semanticsHost, | ||
| required this.announcementsHost, | ||
| }); | ||
|
|
||
| /// The tag name for the Flutter View root element. | ||
| static const String flutterViewTagName = 'flutter-view'; | ||
|
|
@@ -47,38 +137,58 @@ class DomManager { | |
| /// The tag name for the scene host. | ||
| static const String sceneHostTagName = 'flt-scene-host'; | ||
|
|
||
| /// The tag name for the text editing host. | ||
| static const String textEditingHostTagName = 'flt-text-editing-host'; | ||
|
|
||
| /// The tag name for the semantics host. | ||
| static const String semanticsHostTagName = 'flt-semantics-host'; | ||
|
|
||
| /// The tag name for the accessibility announcements host. | ||
| static const String announcementsHostTagName = 'flt-announcement-host'; | ||
|
|
||
| /// The root DOM element for the entire Flutter View. | ||
| /// | ||
| /// This is where input events are captured, such as pointer events. | ||
| /// | ||
| /// If semantics is enabled, this element also contains the semantics DOM tree, | ||
| /// which captures semantics input events. | ||
| DomElement rootElement; | ||
|
|
||
| /// Hosts all platform view elements. | ||
| DomElement platformViewsHost; | ||
|
|
||
| /// Hosts all rendering elements and canvases. | ||
| DomShadowRoot renderingHost; | ||
|
|
||
| /// Hosts the <flt-scene> element. | ||
| /// | ||
| /// This element is created and inserted in the HTML DOM once. It is never | ||
| /// removed or moved. However the <flt-scene> inside of it may be replaced. | ||
| DomElement sceneHost; | ||
|
|
||
| /// Hosts all text editing elements. | ||
| DomElement textEditingHost; | ||
|
|
||
| /// Hosts the semantics tree. | ||
| /// | ||
| /// This element is in front of the [renderingHost] and [platformViewsHost]. | ||
| /// Otherwise, the phone will disable focusing by touch, only by tabbing | ||
| /// around the UI. | ||
| DomElement semanticsHost; | ||
|
|
||
| /// This is where accessibility announcements are inserted. | ||
| DomElement announcementsHost; | ||
|
Contributor
There was a problem hiding this comment. Can we make all DOM elements final? |
||
| } | ||
|
|
||
| DomShadowRoot _attachShadowRoot(DomElement element) { | ||
| if (getJsProperty<Object?>(element, 'attachShadow') == null) { | ||
|
Contributor
There was a problem hiding this comment. I think we can remove this check now. I believe @ditman removed the non-shadow DOM mode a long time ago.
Contributor
Author
There was a problem hiding this comment. It was me who removed it, and I kept this check so that we show a somewhat meaningful error to the user instead of an obscure null check error. I'm happy to remove it if we think there's no value in having this error message.
Contributor
There was a problem hiding this comment. There's probably some value, but also, this leaks into production code and increases code size, so there's also value in removing it.
Contributor
Author
There was a problem hiding this comment. Ok, let me put it behind an assert. |
||
| throw UnsupportedError('ShadowDOM is not supported in this browser.'); | ||
| } | ||
|
|
||
| return element.attachShadow(<String, dynamic>{ | ||
| 'mode': 'open', | ||
| // This needs to stay false to prevent issues like this: | ||
| // - https://github.com/flutter/flutter/issues/85759 | ||
| 'delegatesFocus': false, | ||
|
Contributor
There was a problem hiding this comment. I think we don't need this either, since @htoor3 moved all focusables (text input, semantics) outside the shadow root.
Contributor
Author
There was a problem hiding this comment. I would prefer to not make functional changes in this PR :) I'll file an issue though, so we make this change in the future.
Contributor
Author
There was a problem hiding this comment. |
||
| }); | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like
devicePixelRatiois only used here, and also it seems like a bug? How do we update the semantics host whendevicePixelRatiochanges?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure what you mean here. Yes, it's not used anywhere else in this method.
The code that listens for resize events (and updates the semantics host) is still in
FlutterViewEmbedderfor now:https://github.com/flutter/engine/blob/aae07e989b0a031c1b1fd2739cd10757e7cbd67f/lib/web_ui/lib/src/engine/embedder.dart#L220-L224
I do plan to move it out of there though. Stay tuned.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm just having a feeling that this is the wrong place for styling and scaling the semantics host. In fact, I'm thinking maybe the semantics host is the wrong element to style and scale. Should it be the responsibility of
EngineSemanticsOwner? Then we won't needDomManagerto be concerned aboutdevicePixelRatio.Having said that, I'm totally fine with not making this change in this PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I think it makes sense for the semantic owner to "own" the styling of the semantics tree.
I'll leave it as is for now, but feel free to move it to the semantics owner as part of your overhaul there.