[web] Add dynamic view sizing (v2)

[ditman]

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

• Fixes [web:multi-view] define an MVP for FlutterViews participation in host page layout flutter#137444
• Closes [web] Add dynamic view sizing for non-implicit views. #48541

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]

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

[mdebbar]

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!

[ditman]

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)

[ditman]

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.

[mdebbar]

LGTM, ship it!

[ditman]

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!

[ditman]

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

[ditman]

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]

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.