Add scroll lock when using trackpad on web

[IchordeDionysos]

Related PR: https://github.com/flutter/flutter/pull/143658 (Depending on where it should be fixed this or the other PR is obsolete)

--

This is an attempt to fix weird scrolling behavior with trackpads on Flutter web. It's done by looking at the last scroll events and locking the axis to the major axis of the first scroll axis within a series. The lock resets automatically if no scroll event is received within x amount of time (e.g. 10ms).

One thing I'm unsure about is if this breaks any use case where 2D scrolling is expected... An alternative that I've considered is to add it to this class: https://github.com/flutter/engine/blob/a9a3fa616a72628e64194b66db81fe6aab490a1b/lib/web_ui/lib/src/engine/semantics/scrollable.dart There the axis would be exposes, however it seems like this code is not used?! (for the example in the issue no flt-semantics-scroll-overflow DOM element was created)

Attempts to fix https://github.com/flutter/flutter/issues/143276

Pre-launch Checklist

• [x] I read the Contributor Guide and followed the process outlined there for submitting PRs.
• [x] I read the Tree Hygiene wiki page, which explains my responsibilities.
• [x] I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
• [x] 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 ///).
• [x] 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.

[flutter-dashboard[bot]]

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact "@test-exemption-reviewer" in the #hackers channel in Chat (don't just cc them here, they won't see it! Use Discord!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

[IchordeDionysos]

✅ Okay was related to not using the latest master version.

~I fail to understand how to run a Flutter application using the local engine.~ ~I was able to build the engine using: felt build~

~When run the applications using the command:~ ~flutter --local-web-sdk=wasm_release run -d chrome --local-engine-src-path ../path/to/flutter_engine/src~

~I get the following output:~

Errors output

[...]

../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxr_hit_test.dart:81:48: Error: The type 'JSObject' can't be used as supertype.
class XRTransientInputHitTestResult implements JSObject {}
                                               ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxr_hit_test.dart:92:37: Error: The type 'JSObject' can't be used as supertype.
class XRRayDirectionInit implements JSObject {
                                    ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxr_hit_test.dart:114:24: Error: The type 'JSObject' can't be used as supertype.
class XRRay implements JSObject {
                       ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxr_lighting_estimation.dart:26:34: Error: The type 'JSObject' can't be used as supertype.
class XRLightEstimate implements JSObject {}
                                 ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxr_lighting_estimation.dart:37:35: Error: The type 'JSObject' can't be used as supertype.
class XRLightProbeInit implements JSObject {
                                  ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxrlayers.dart:126:29: Error: The type 'JSObject' can't be used as supertype.
class XRSubImage implements JSObject {}
                            ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxrlayers.dart:152:40: Error: The type 'JSObject' can't be used as supertype.
class XRProjectionLayerInit implements JSObject {
                                       ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxrlayers.dart:178:30: Error: The type 'JSObject' can't be used as supertype.
class XRLayerInit implements JSObject {
                             ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxrlayers.dart:305:33: Error: The type 'JSObject' can't be used as supertype.
class XRWebGLBinding implements JSObject {
                                ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxrlayers.dart:338:35: Error: The type 'JSObject' can't be used as supertype.
class XRMediaLayerInit implements JSObject {
                                  ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/webxrlayers.dart:426:33: Error: The type 'JSObject' can't be used as supertype.
class XRMediaBinding implements JSObject {
                                ^
../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/xhr.dart:92:27: Error: The type 'JSObject' can't be used as supertype.
class FormData implements JSObject {
                          ^
../bin/flutter/packages/flutter/lib/src/semantics/semantics.dart:2712:23: Error: Required named parameter 'identifier' must be provided.
    builder.updateNode(
                      ^
../bin/flutter/packages/flutter/lib/src/widgets/_platform_selectable_region_context_menu_web.dart:118:33: Error: The argument type 'HTMLStyleElement' can't be assigned to the
parameter type 'JSAny?'.
 - 'HTMLStyleElement' is from 'package:web/src/dom/html.dart' ('../../.pub-cache/hosted/pub.dev/web-0.3.0/lib/src/dom/html.dart').
      web.document.head!.append(styleElement);
                                ^

[IchordeDionysos]

I've compared the current implementation to the new implementation of this PR:

https://github.com/flutter/engine/assets/10195482/a6e10daf-2470-4d53-9ba9-35e1c737510e

This would already be an improvement for the classic 2D-scrolling use case! The heuristic can definitely be improved, especially for my typical scroll style.

It works well when the two fingers are positioned perpendicular to the scroll axis. (two fingers next to each other) It does not work so well (my scroll style) when the two fingers are in line with the scroll axis. (two fingers behind each other)

Also as noted in the original description, I'm unsure how to deal with/detect cases where you'd want to scroll in all directions.

[flutter-dashboard[bot]]

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.

[goderbauer]

(triage): I am going to close this for the same reason given on the framework PR in https://github.com/flutter/flutter/pull/143658#issuecomment-2073568402.