Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

[web] DomRenderer becomes FlutterViewEmbedder #29994

Merged
merged 4 commits into from
Nov 30, 2021

Conversation

yjbanov
Copy link
Contributor

@yjbanov yjbanov commented Nov 29, 2021

Final step in turning DomRenderer from a kitchen sink of various DOM manipulation utilities and a manager of Flutter Web's top elements into a single-purpose class - to manage the placement of Flutter views (currently only one). This PR achieves this in two steps:

  • Move the remaining useful DOM utilities out of `DomRenderer) (c5ad34c)
  • Rename DomRenderer to FlutterViewEmbedder (9bdb6e3)

@yjbanov yjbanov requested a review from ditman November 29, 2021 22:09
@flutter-dashboard flutter-dashboard bot added the platform-web Code specifically for the web engine label Nov 29, 2021
@google-cla google-cla bot added the cla: yes label Nov 29, 2021
Copy link
Contributor

@mdebbar mdebbar left a comment

Choose a reason for hiding this comment

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

LGTM with some minor suggestions!

@@ -350,7 +350,7 @@ class PersistedPicture extends PersistedLeafSurface {
oldSurface._canvas = null;
}
if (rootElement != null) {
domRenderer.removeAllChildren(rootElement!);
flutterViewEmbedder.removeAllChildren(rootElement!);
Copy link
Contributor

Choose a reason for hiding this comment

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

removeAllChildren should also move to util.dart?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

Comment on lines +726 to +741
bool? _ellipseFeatureDetected;

/// Draws CanvasElement ellipse with fallback.
void drawEllipse(
html.CanvasRenderingContext2D context,
double centerX,
double centerY,
double radiusX,
double radiusY,
double rotation,
double startAngle,
double endAngle,
bool antiClockwise) {
// ignore: implicit_dynamic_function
_ellipseFeatureDetected ??= js_util.getProperty(context, 'ellipse') != null;
if (_ellipseFeatureDetected!) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can this be:

Suggested change
bool? _ellipseFeatureDetected;
/// Draws CanvasElement ellipse with fallback.
void drawEllipse(
html.CanvasRenderingContext2D context,
double centerX,
double centerY,
double radiusX,
double radiusY,
double rotation,
double startAngle,
double endAngle,
bool antiClockwise) {
// ignore: implicit_dynamic_function
_ellipseFeatureDetected ??= js_util.getProperty(context, 'ellipse') != null;
if (_ellipseFeatureDetected!) {
// ignore: implicit_dynamic_function
late final bool _ellipseFeatureDetected = js_util.getProperty(context, 'ellipse') != null;
/// Draws CanvasElement ellipse with fallback.
void drawEllipse(
html.CanvasRenderingContext2D context,
double centerX,
double centerY,
double radiusX,
double radiusY,
double rotation,
double startAngle,
double endAngle,
bool antiClockwise) {
if (_ellipseFeatureDetected) {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No, because context is an argument to drawEllipse.

@@ -17,41 +17,26 @@ void main() {

Copy link
Contributor

Choose a reason for hiding this comment

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

Should this file be renamed?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

Comment on lines 26 to 30
test('can set style properties on elements', () {
final DomRenderer renderer = DomRenderer();
final html.Element element = renderer.createElement('div');
DomRenderer.setElementStyle(element, 'color', 'red');
final html.Element element = html.document.createElement('div');
setElementStyle(element, 'color', 'red');
expect(element.style.color, 'red');
});
Copy link
Contributor

Choose a reason for hiding this comment

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

Some of these tests should probably move to util_test.dart now.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done.

Copy link
Member

@ditman ditman left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks for the cleanup!

await ui.webOnlyInitializeTestDomRenderer();
await ui.webOnlyInitializeTestFlutterViewEmbedder();
Copy link
Member

Choose a reason for hiding this comment

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

This is a potentially user-breaking change, but if all tests pass... no problem!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good catch! While it's not a breaking change, I realized that this method doesn't need to be in dart:ui and it doesn't need the webOnly prefix. It exists only for the engine's own tests. Framework-side tests use ui.debugEmulateFlutterTesterEnvironment = true;.

I moved it to the engine test_embedding.dart and deleted the dart:ui-side code.

Copy link
Contributor

@mdebbar mdebbar left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Member

@ditman ditman left a comment

Choose a reason for hiding this comment

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


LGTM


@yjbanov
Copy link
Contributor Author

yjbanov commented Nov 30, 2021

build_and_test_linux_unopt_debug failure seems to be a flake. It succeeded on the previous commit despite the only change being in licenses_flutter.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla: yes platform-web Code specifically for the web engine
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants