Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[web] Fall-back to a DOM node if Shadow DOM is unavailable. #26647

Merged
merged 10 commits into from
Jun 14, 2021
Merged

[web] Fall-back to a DOM node if Shadow DOM is unavailable. #26647

merged 10 commits into from
Jun 14, 2021

Conversation

ditman
Copy link
Member

@ditman ditman commented Jun 9, 2021 •
edited
Loading

If your browser doesn't have Shadow DOM, the flutter web app crashes upon startup of the DOM Renderer.

However, the Shadow DOM is only really needed to render Platform Views. If your web app doesn't use Platform Views, there's nothing preventing us from rendering a beautiful app into the regular DOM.

This PR adds a HostNode interface that clients can code against to perform the required DOM operations of the Shadow DOM/Regular DOM, and two implementations ShadowDomHostNode and ElementHostNode, that allow flutter apps to render regardless of ShadowDOM being available or not.

Testing

  • slow shard locally passed
  • added unit tests for the new HostNode classes

Pre-launch Checklist

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I read the Tree Hygiene wiki page, which explains my responsibilities.
  • I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
  • I listed at least one issue that this PR fixes in the description above.
  • I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test-exempt. See testing the engine for instructions on
    writing and running engine tests.
  • I updated/added relevant documentation (doc comments with ///).
  • I signed the CLA.
  • All existing and new tests are passing.
  • The reviewer has submitted any presubmit flakes in this PR using the engine presubmit flakes form before re-triggering the failure.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@ditman ditman requested a review from yjbanov June 9, 2021 01:12
@ditman ditman self-assigned this Jun 9, 2021
@flutter-dashboard

This comment has been minimized.

Sign in to view
@flutter-dashboard flutter-dashboard bot added the platform-web Code specifically for the web engine label Jun 9, 2021
@google-cla google-cla bot added the cla: yes label Jun 9, 2021
@ditman ditman marked this pull request as draft June 9, 2021 01:25
@ditman ditman changed the title [wip] [web] Fall-back to a DOM node if Shadow DOM is unavailable. [web] Fall-back to a DOM node if Shadow DOM is unavailable. Jun 10, 2021
@ditman ditman marked this pull request as ready for review June 10, 2021 20:57
@ditman ditman requested a review from yjbanov June 10, 2021 20:57
yjbanov
yjbanov reviewed Jun 10, 2021
View reviewed changes
lib/web_ui/lib/src/engine/dom_renderer.dart Outdated Show resolved Hide resolved
lib/web_ui/lib/src/engine/dom_renderer.dart Outdated Show resolved Hide resolved
lib/web_ui/lib/src/engine/dom_renderer.dart Outdated Show resolved Hide resolved
lib/web_ui/lib/src/engine/host_node.dart Outdated Show resolved Hide resolved
@ditman ditman requested a review from yjbanov June 11, 2021 18:03
@ditman
[web] Fall-back to a DOM node if Shadow DOM is not available.
f02c845
@ditman
Rename to HostNode, and split into two implementations.
e513d3c
@ditman
Add host_node_test.dart
9bc8b4a
@ditman
Remove intermediate NodeHostNode.
54cc316
@ditman
No.
382db18
@ditman
Remove abstraction leak from ShadowDomHostNode.
572a9cc 
Now the ShadowDomHostNode is able to attach its own stylesheet. This
required two changes:

1. The HostNode (and its parent) are attached to the DOM beforehand
(updated host_node_test.dart slightly)
2. The once-private to DomRenderer _applyCssRulesToSheet method has been
made public, and renamed to applyGlobalCssRulesToSheet, so it can also
be called from host_node.dart.

This commit also addresses some more PR comments:

* Use feature detection instead of exception handling to decide whether
ShadowDOM is available or not, when creating the HostNode instance of a
Flutter app.
* Update ShadowRoot references to HostNode (also in test code).
@ditman ditman requested a review from yjbanov June 12, 2021 00:23
ditman
ditman commented Jun 12, 2021
View reviewed changes
lib/web_ui/lib/src/engine/host_node.dart Outdated Show resolved Hide resolved
lib/web_ui/lib/src/engine/dom_renderer.dart Outdated Show resolved Hide resolved
lib/web_ui/lib/src/engine/host_node.dart Show resolved Hide resolved
yjbanov
yjbanov approved these changes Jun 14, 2021
View reviewed changes
Copy link
Contributor

@yjbanov yjbanov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@ditman ditman added the waiting for tree to go green This PR is approved and tested, but waiting for the tree to be green to land. label Jun 14, 2021
@fluttergithubbot fluttergithubbot merged commit 1f37916 into flutter:master Jun 14, 2021
@ditman ditman deleted the fallback-to-dom-rendering branch June 14, 2021 18:32
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jun 14, 2021
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 14, 2021
@engine-flutter-autoroll
1f37916 [web] Fall-back to a DOM node if Shadow DOM is unavailable. (f…
c27ee93 
…lutter/engine#26647)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jun 15, 2021
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 15, 2021
@engine-flutter-autoroll
1f37916 [web] Fall-back to a DOM node if Shadow DOM is unavailable. (f…
396bc0e 
…lutter/engine#26647)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Jun 15, 2021
Merged
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 15, 2021
@engine-flutter-autoroll
1f37916 [web] Fall-back to a DOM node if Shadow DOM is unavailable. (f…
90558bf 
…lutter/engine#26647)
@ditman ditman mentioned this pull request Jun 15, 2021
Merged
9 tasks
naudzghebre pushed a commit to naudzghebre/engine that referenced this pull request Sep 2, 2021
@ditman
[web] Fall-back to a DOM node if Shadow DOM is unavailable. (flutter#…
dd3bd96 
…26647)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@yjbanov yjbanov yjbanov approved these changes

Assignees

@ditman ditman

Labels
cla: yes platform-web Code specifically for the web engine waiting for tree to go green This PR is approved and tested, but waiting for the tree to be green to land.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[web] App crashes on startup when browser doesn't support ShadowDOM
3 participants
@ditman @yjbanov @fluttergithubbot