Skip to content

Commit e1985ed

Browse files
ferhatbchaselatta
ferhatb
authored and
chaselatta
committed
[web] Fix scroll wheel line delta on Firefox. (flutter#21928)
1 parent 5311660 commit e1985ed

File tree

4 files changed

+225
-2
lines changed

4 files changed

+225
-2
lines changed

‎e2etests/web/regular_integration_tests/lib/scroll_wheel_main.dart

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
// Copyright 2013 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
import 'dart:html' as html;
5+
import 'dart:js_util' as js_util;
6+
7+
import 'package:flutter/material.dart';
8+
9+
void main() => runApp(MyApp());
10+
11+
class MyApp extends StatelessWidget {
12+
// This widget is the root of your application.
13+
@override
14+
Widget build(BuildContext context) {
15+
return MaterialApp(
16+
title: 'Flutter Scroll Wheel Test',
17+
theme: ThemeData(
18+
// This is the theme of your application.
19+
//
20+
// Try running your application with "flutter run". You'll see the
21+
// application has a blue toolbar. Then, without quitting the app, try
22+
// changing the primarySwatch below to Colors.green and then invoke
23+
// "hot reload" (press "r" in the console where you ran "flutter run",
24+
// or simply save your changes to "hot reload" in a Flutter IDE).
25+
// Notice that the counter didn't reset back to zero; the application
26+
// is not restarted.
27+
primarySwatch: Colors.blue,
28+
fontFamily: 'RobotoMono',
29+
// This makes the visual density adapt to the platform that you run
30+
// the app on. For desktop platforms, the controls will be smaller and
31+
// closer together (more dense) than on mobile platforms.
32+
visualDensity: VisualDensity.adaptivePlatformDensity,
33+
),
34+
home: MyHomePage(title: 'Flutter Scroll Wheel Test'),
35+
);
36+
}
37+
}
38+
39+
class MyHomePage extends StatefulWidget {
40+
MyHomePage({Key key, this.title}) : super(key: key);
41+
42+
// This widget is the home page of your application. It is stateful, meaning
43+
// that it has a State object (defined below) that contains fields that affect
44+
// how it looks.
45+
46+
// This class is the configuration for the state. It holds the values (in this
47+
// case the title) provided by the parent (in this case the App widget) and
48+
// used by the build method of the State. Fields in a Widget subclass are
49+
// always marked "final".
50+
51+
final String title;
52+
53+
@override
54+
_MyHomePageState createState() => _MyHomePageState();
55+
}
56+
57+
class _MyHomePageState extends State<MyHomePage> {
58+
int _counter = 0;
59+
60+
void _incrementCounter() {
61+
setState(() {
62+
// This call to setState tells the Flutter framework that something has
63+
// changed in this State, which causes it to rerun the build method below
64+
// so that the display can reflect the updated values. If we changed
65+
// _counter without calling setState(), then the build method would not be
66+
// called again, and so nothing would appear to happen.
67+
_counter++;
68+
});
69+
}
70+
71+
@override
72+
Widget build(BuildContext context) {
73+
// This method is rerun every time setState is called, for instance as done
74+
// by the _incrementCounter method above.
75+
//
76+
// The Flutter framework has been optimized to make rerunning build methods
77+
// fast, so that you can just rebuild anything that needs updating rather
78+
// than having to individually change instances of widgets.
79+
return Scaffold(
80+
appBar: AppBar(
81+
// Here we take the value from the MyHomePage object that was created by
82+
// the App.build method, and use it to set our appbar title.
83+
title: Text(widget.title),
84+
),
85+
body: ListView.builder(
86+
itemCount: 1000,
87+
itemBuilder: (context, index) => Padding(
88+
padding: EdgeInsets.all(20),
89+
child: Container(
90+
height: 100,
91+
color: Colors.lightBlue,
92+
child: Center(
93+
child: Text("Item $index"),
94+
),
95+
),
96+
),
97+
),
98+
floatingActionButton:
99+
FloatingActionButton.extended(
100+
key: const Key('scroll-button'),
101+
onPressed: () {
102+
final int centerX = 100; //html.window.innerWidth ~/ 2;
103+
final int centerY = 100; //html.window.innerHeight ~/ 2;
104+
dispatchMouseWheelEvent(centerX, centerY, DeltaMode.kLine, 0, 1);
105+
dispatchMouseWheelEvent(centerX, centerY, DeltaMode.kLine, 0, 1);
106+
dispatchMouseWheelEvent(centerX, centerY, DeltaMode.kLine, 0, 1);
107+
dispatchMouseWheelEvent(centerX, centerY, DeltaMode.kLine, 0, 1);
108+
dispatchMouseWheelEvent(centerX, centerY, DeltaMode.kLine, 0, 1);
109+
},
110+
label: Text('Scroll'),
111+
icon: Icon(Icons.thumb_up),
112+
),
113+
);
114+
}
115+
}
116+
117+
118+
abstract class DeltaMode {
119+
static const int kPixel = 0x00;
120+
static const int kLine = 0x01;
121+
static const int kPage = 0x02;
122+
}
123+
124+
html.WheelEvent dispatchMouseWheelEvent(int mouseX, int mouseY,
125+
int deltaMode, double deltaX, double deltaY,
126+
{bool shiftKeyPressed = false}) {
127+
html.EventTarget target = html.document.elementFromPoint(mouseX, mouseY);
128+
129+
target.dispatchEvent(html.MouseEvent("mouseover",
130+
screenX: mouseX,
131+
screenY: mouseY,
132+
clientX: mouseX,
133+
clientY: mouseY,
134+
));
135+
136+
target.dispatchEvent(html.MouseEvent("mousemove",
137+
screenX: mouseX,
138+
screenY: mouseY,
139+
clientX: mouseX,
140+
clientY: mouseY,
141+
));
142+
143+
html.WheelEvent event = html.WheelEvent('wheel',
144+
screenX: mouseX,
145+
screenY: mouseY,
146+
clientX: mouseX,
147+
clientY: mouseY,
148+
deltaMode: deltaMode,
149+
deltaX : deltaX,
150+
deltaY : deltaY,
151+
shiftKey: shiftKeyPressed,
152+
);
153+
target.dispatchEvent(event);
154+
return event;
155+
}

‎e2etests/web/regular_integration_tests/test_driver/scroll_wheel_integration.dart

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Copyright 2013 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'dart:html' as html;
6+
import 'dart:js_util' as js_util;
7+
import 'package:flutter/material.dart';
8+
import 'package:flutter_test/flutter_test.dart';
9+
import 'package:regular_integration_tests/scroll_wheel_main.dart' as app;
10+
11+
import 'package:integration_test/integration_test.dart';
12+
13+
void main() {
14+
final IntegrationTestWidgetsFlutterBinding binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized() as IntegrationTestWidgetsFlutterBinding;
15+
16+
testWidgets('Test mousewheel scroll by line',
17+
(WidgetTester tester) async {
18+
app.main();
19+
await tester.pumpAndSettle();
20+
21+
final Finder finder = find.byKey(const Key('scroll-button'));
22+
expect(finder, findsOneWidget);
23+
await tester.tap(find.byKey(const Key('scroll-button')));
24+
await tester.pumpAndSettle();
25+
await tester.tap(find.byKey(const Key('scroll-button')));
26+
await tester.pumpAndSettle();
27+
28+
// TODO: enable screenshot when
29+
// https://github.com/flutter/flutter/issues/68502 is resolved.
30+
await binding.takeScreenshot('wheel_scroll_by_line');
31+
});
32+
}

‎e2etests/web/regular_integration_tests/test_driver/scroll_wheel_integration_test.dart

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Copyright 2013 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:regular_integration_tests/screenshot_support.dart' as test;
6+
7+
Future<void> main() async {
8+
// TODO: switch to screenshot when
9+
// https://github.com/flutter/flutter/issues/68502 is resolved.
10+
// await test.runTestWithScreenshots();
11+
}

‎lib/web_ui/lib/src/engine/pointer_binding.dart

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,8 @@ abstract class _BaseAdapter {
227227
}
228228

229229
mixin _WheelEventListenerMixin on _BaseAdapter {
230+
static double? _defaultScrollLineHeight;
231+
230232
List<ui.PointerData> _convertWheelEventToPointerData(
231233
html.WheelEvent event
232234
) {
@@ -240,8 +242,9 @@ mixin _WheelEventListenerMixin on _BaseAdapter {
240242
double deltaY = event.deltaY as double;
241243
switch (event.deltaMode) {
242244
case domDeltaLine:
243-
deltaX *= 32.0;
244-
deltaY *= 32.0;
245+
_defaultScrollLineHeight ??= _computeDefaultScrollLineHeight();
246+
deltaX *= _defaultScrollLineHeight!;
247+
deltaY *= _defaultScrollLineHeight!;
245248
break;
246249
case domDeltaPage:
247250
deltaX *= ui.window.physicalSize.width;
@@ -251,6 +254,7 @@ mixin _WheelEventListenerMixin on _BaseAdapter {
251254
default:
252255
break;
253256
}
257+
254258
final List<ui.PointerData> data = <ui.PointerData>[];
255259
_pointerDataConverter.convert(
256260
data,
@@ -285,6 +289,27 @@ mixin _WheelEventListenerMixin on _BaseAdapter {
285289
]
286290
);
287291
}
292+
293+
/// For browsers that report delta line instead of pixels such as FireFox
294+
/// compute line height using the default font size.
295+
///
296+
/// Use Firefox to test this code path.
297+
double _computeDefaultScrollLineHeight() {
298+
const double kFallbackFontHeight = 16.0;
299+
final html.DivElement probe = html.DivElement();
300+
probe.style
301+
..fontSize = 'initial'
302+
..display = 'none';
303+
html.document.body!.append(probe);
304+
String fontSize = probe.getComputedStyle().fontSize;
305+
double? res;
306+
if (fontSize.contains('px')) {
307+
fontSize = fontSize.replaceAll('px', '');
308+
res = double.tryParse(fontSize);
309+
}
310+
probe.remove();
311+
return res == null ? kFallbackFontHeight : res / 4.0;
312+
}
288313
}
289314

290315
@immutable

0 commit comments

Comments
 (0)