[web] Add dynamic view sizing (v2) #50271

ditman · 2024-02-02T04:47:18Z

Changes

Introduces a new viewConstraints JS configuration parameter to configure max/min width/height constraints for a view. Those can have the following values:
- An integer >= 0: max/min size in pixels
- Infinity (or Number.POSITIVE_INFINITY): (only for max values) -> unconstrained.
- When any value is not set, it defaults to "tight to the current size".
  - See Understanding constraints.
Computes the correct physicalConstraints of a view off of its physicalSize and its viewConstraints for the framework to use during layout.
- When no constraints are passed, the current behavior is preserved: the default constraints are "tight" to the physicalSize.
Resizes the current view DOM when requested by the framework and updates its internal physicalSize, then continues with the render procedure.

Example

This is how we can configure a view to "take as much vertical space as needed":

flutterApp.addView({
  viewConstraints: {
    minHeight: 0,
    maxHeight: Infinity,
  },
  hostElement: ...,
});

TODO

Needs actual unit tests

Issues

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 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.

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

ditman · 2024-02-02T04:48:47Z

Hey @harryterkelsen, @mdebbar, I came up with a much simpler solution to the previous one as I was updating this. PTAQL!

mdebbar · 2024-02-02T17:43:53Z

lib/web_ui/lib/src/engine/window.dart

  }

+  void resize(ui.Size newPhysicalSize) {
+    // The browser wants logical sizes!


We should really have separate PhysicalSize and LogicalSize classes so we don't confuse the two (with methods to convert from one to the other e.g. PhysicalSize.toLogicalSize(dpr) and LogicalSize.toPhysicalSize(dpr)). Maybe when extension type is a thing we can give this a try!

Yeah, Size is very generic, but valid most of the time. We really only care about this in the interfaces between systems:

Framework (logical, most of the time) <-> Engine (physical, most of the time) <-> Browser (logical, always?)

This sounds like an error waiting to happen (well, my earlier HTML renderer PR is an example of that exact error, I guess! :P)

It isn't the same as having two separate types, but I've started being very careful documenting the type of size required depending on where in the code we are: if values come from JS/CSS/the browser in general -> logical size; if we're passing things to the framework -> physical size. Also attempted to reflect that in the variable/parameter names.

lib/web_ui/lib/src/engine/window.dart

mdebbar

LGTM, ship it!

ditman · 2024-02-10T02:27:13Z

Added a bunch more tests and extended the comments in the Constraints calculation, to reason why things do what they do. PTAL @mdebbar, I think this is ready to land.

mdebbar

Still LGTM!

lib/web_ui/lib/src/engine/js_interop/js_app.dart

lib/web_ui/lib/src/engine/window.dart

(It's removed in dart:ui)

ditman · 2024-02-14T21:35:57Z

All right, I'll autosubmit this today, @harryterkelsen do ping me/create an issue or something if you see anything egregious!

ditman · 2024-02-14T22:23:26Z

01:45 +173: test/material/date_picker_test.dart: Semantics input mode
══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following TestFailure was thrown running a test:
Expected: has semantics with label: Enter Date with value: 01/15/2016 with actions: [tap,
moveCursorBackwardByCharacter, setSelection, copy, cut, paste, moveCursorBackwardByWord, setText]
without actions: [longPress, scrollLeft, scrollRight, scrollUp, scrollDown, increase, decrease,
showOnScreen, moveCursorForwardByCharacter, didGainAccessibilityFocus, didLoseAccessibilityFocus,
dismiss, moveCursorForwardByWord]  with flags: [isTextField, isFocused]  without flags:
[hasCheckedState, isChecked, isCheckStateMixed, isSelected, isButton, isSlider, isKeyboardKey,
isLink, isReadOnly, isFocusable, hasEnabledState, isEnabled, isInMutuallyExclusiveGroup, isHeader,
isObscured, isMultiline, namesRoute, scopesRoute, isHidden, isImage, isLiveRegion, hasToggledState,
isToggled, hasImplicitScrolling, hasExpandedState, isExpanded]
  Actual: SemanticsNode:<SemanticsNode#11(Rect.fromLTRB(176.0, 26.0, 472.0, 82.0), actions: [copy,
cut, moveCursorBackwardByCharacter, moveCursorBackwardByWord, paste, setSelection, setText, tap],
flags: [isTextField, isFocused, hasEnabledState, isEnabled], label: "Enter Date", value:
"01/15/2016", textDirection: ltr, text selection: [0, 10], currentValueLength: 10)>
   Which: missing flags: [] unexpected flags: [hasEnabledState, isEnabled]

Mmmmkay...

ditman · 2024-02-15T00:32:56Z

I ran the failing test locally, and it seems to pass:

dit@dit:/work/flutter/flutter/packages/flutter$ flutter test --local-web-sdk=wasm_release --platform=chrome --web-renderer=html test/material/date_picker_test.dart 
00:57 +86 ~2: All tests passed!

(Maybe related to this revert in the framework?)

I'll set autosubmit again.

### Changes * Introduces a new `viewConstraints` JS configuration parameter to configure max/min width/height constraints for a view. Those can have the following values: * An integer `>= 0`: max/min size in pixels * `Infinity` (or `Number.POSITIVE_INFINITY`): (only for max values) -> **unconstrained**. * When any value is not set, it defaults to "tight to the current size". * See [Understanding constraints](https://docs.flutter.dev/ui/layout/constraints). * Computes the correct `physicalConstraints` of a view off of its `physicalSize` and its `viewConstraints` for the framework to use during layout. * When no constraints are passed, the current behavior is preserved: the default constraints are "tight" to the `physicalSize`. * Resizes the current view DOM when requested by the framework and updates its internal physicalSize, then continues with the render procedure. ### Example This is how we can configure a view to "take as much vertical space as needed": ```js flutterApp.addView({ viewConstraints: { minHeight: 0, maxHeight: Infinity, }, hostElement: ..., }); ``` ### TODO * Needs actual unit tests ### Issues * Fixes flutter/flutter#137444 * Closes flutter#48541 [C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style

2024-02-15 [email protected] [Android] Minor refactor: Remove redundant methods. (flutter/engine#50647) 2024-02-15 [email protected] [Impeller] consolidate transforms in PositionUVWriter (flutter/engine#50635) 2024-02-15 [email protected] [web] Add dynamic view sizing (v2) (flutter/engine#50271) 2024-02-14 [email protected] Add useful default options to scenario_app/bin/android_integration_tests.dart (flutter/engine#50667) 2024-02-14 [email protected] Fix github md "Note" and "Tip" blocks in Android shell README (flutter/engine#50664) 2024-02-14 6844906[email protected] [Fuchsia] Run run_with_dart_aot test on fuchsia_profile_x64 (flutter/engine#50613) 2024-02-14 [email protected] Make all Android scenario_app activities full-screen, even on older Android versions. (flutter/engine#50666) 2024-02-14 [email protected] Roll Skia from eae42ea9f7bc to 2d5cf67614d0 (6 revisions) (flutter/engine#50660) 2024-02-14 [email protected] Add a comment explaining the lifecycle of tls_command_pool_map. (flutter/engine#50623) 2024-02-14 [email protected] [web] Increase tolerance for golden diffs on Safari (flutter/engine#50655)

This comment was marked as resolved.

Sign in to view

github-actions bot added the platform-web Code specifically for the web engine label Feb 2, 2024

ditman requested review from harryterkelsen and mdebbar February 2, 2024 04:48

ditman mentioned this pull request Feb 2, 2024

[web] Add dynamic view sizing for non-implicit views. #48541

Closed

10 tasks

mdebbar reviewed Feb 2, 2024

View reviewed changes

mdebbar approved these changes Feb 3, 2024

View reviewed changes

ditman force-pushed the web-dynamic-view-sizing-2 branch 3 times, most recently from 1f8fd7f to ae22b2c Compare February 9, 2024 19:53

ditman requested a review from mdebbar February 10, 2024 02:26

ditman force-pushed the web-dynamic-view-sizing-2 branch from b803605 to 9e7d3d6 Compare February 10, 2024 02:41

mdebbar approved these changes Feb 14, 2024

View reviewed changes

lib/web_ui/lib/src/engine/js_interop/js_app.dart Outdated Show resolved Hide resolved

lib/web_ui/lib/src/engine/window.dart Show resolved Hide resolved

lib/web_ui/lib/src/engine/window.dart Outdated Show resolved Hide resolved

ditman added 10 commits February 14, 2024 13:00

Remove render from PlatformDispatcher.

66e6f08

(It's removed in dart:ui)

Add viewConstraints to JsFlutterViewOptions

af7cc81

Allow view to resize its root node.

44cb9f7

Wire viewConstraints.

5ec00e4

Control resizing straight from the view itself.

3884605

Restore platform dispatcher render API

88b92f4

Use Infinity as unconstrained instead of -1

13dd848

Add test for view.resize method.

a015985

Add some more testing.

ad56900

Update docs.

e5cb79c

ditman force-pushed the web-dynamic-view-sizing-2 branch from 9e7d3d6 to e5cb79c Compare February 14, 2024 21:31

ditman added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 14, 2024

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Feb 14, 2024

This comment was marked as resolved.

Sign in to view

availableLogicalSize -> currentLogicalSize

e0d60f2

ditman added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 15, 2024

auto-submit bot merged commit 6a5f306 into flutter:main Feb 15, 2024

ditman deleted the web-dynamic-view-sizing-2 branch February 15, 2024 01:00

engine-flutter-autoroll mentioned this pull request Feb 16, 2024

Roll Flutter Engine from 15a358bbaf71 to 7de84271eb65 (56 revisions) flutter/flutter#143552

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Feb 16, 2024

6a5f3069d [web] Add dynamic view sizing (v2) (flutter/engine#50271)

8528163

jason-simmons mentioned this pull request Feb 16, 2024

Manual roll Flutter Engine from edb2745e9834 to bc4dd534a0fa flutter/flutter#143559

Merged

ditman mentioned this pull request Feb 21, 2024

Allow an embedded Flutter Web view to size itself flutter/flutter#134501

Closed

cbracken mentioned this pull request May 28, 2025

Enable support for dynamic view resizing flutter/flutter#169605

Closed

9 tasks

cbracken mentioned this pull request Jun 12, 2025

Enable support for dynamic view resizing flutter/flutter#170499

Closed

9 tasks

LouiseHsu mentioned this pull request Aug 12, 2025

Engine Support for Dynamic View Resizing flutter/flutter#173610

Merged

9 tasks

[web] Add dynamic view sizing (v2) #50271

[web] Add dynamic view sizing (v2) #50271

Uh oh!

Conversation

ditman commented Feb 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Example

TODO

Issues

Pre-launch Checklist

Uh oh!

This comment was marked as resolved.

ditman commented Feb 2, 2024

Uh oh!

mdebbar Feb 2, 2024

Choose a reason for hiding this comment

Uh oh!

ditman Feb 2, 2024

Choose a reason for hiding this comment

Uh oh!

ditman Feb 10, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mdebbar left a comment

Choose a reason for hiding this comment

Uh oh!

ditman commented Feb 10, 2024

Uh oh!

mdebbar left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ditman commented Feb 14, 2024

Uh oh!

This comment was marked as resolved.

ditman commented Feb 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ditman commented Feb 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ditman commented Feb 2, 2024 •

edited

Loading

ditman commented Feb 14, 2024 •

edited

Loading