Added workaround for ios safari iframe issue (flutter#32415)

RedQuark · May 17, 2022 · e312797 · e312797
1 parent ac3e6d4
commit e312797
Show file tree

Hide file tree

Showing 31 changed files with 73 additions and 74 deletions.
diff --git a/lib/web_ui/lib/src/engine/browser_detection.dart b/lib/web_ui/lib/src/engine/browser_detection.dart
@@ -236,6 +236,17 @@ bool get isIOS15 {
       domWindow.navigator.userAgent.contains('OS 15_');
 }
 
+/// Returns true if the browser is iOS Safari, false otherwise.
+bool get isIosSafari =>
+    browserEngine == BrowserEngine.webkit &&
+    operatingSystem == OperatingSystem.iOs;
+
+/// Whether the current browser is Safari.
+bool get isSafari => browserEngine == BrowserEngine.webkit;
+
+/// Whether the current browser is Firefox.
+bool get isFirefox => browserEngine == BrowserEngine.firefox;
+
 /// Use in tests to simulate the detection of iOS 15.
 bool? debugIsIOS15;
 

diff --git a/lib/web_ui/lib/src/engine/pointer_binding.dart b/lib/web_ui/lib/src/engine/pointer_binding.dart
@@ -62,27 +62,44 @@ int convertButtonToButtons(int button) {
   }
 }
 
+/// Wrapping the Safari iOS workaround that adds a dummy event listener
+/// More info about the issue and workaround: https://github.com/flutter/flutter/issues/70858
+class SafariPointerEventWorkaround {
+  static SafariPointerEventWorkaround instance = SafariPointerEventWorkaround();
+
+  void workAroundMissingPointerEvents() {
+    html.document.addEventListener('touchstart', (html.Event event) {});
+  }
+}
+
 class PointerBinding {
   /// The singleton instance of this object.
   static PointerBinding? get instance => _instance;
   static PointerBinding? _instance;
 
   static void initInstance(html.Element glassPaneElement) {
     if (_instance == null) {
-      _instance = PointerBinding._(glassPaneElement);
+      _instance = PointerBinding(glassPaneElement);
       assert(() {
-        registerHotRestartListener(() {
-          _instance!._adapter.clearListeners();
-          _instance!._pointerDataConverter.clearPointerState();
-        });
+        registerHotRestartListener(_instance!.dispose);
         return true;
       }());
     }
   }
 
-  PointerBinding._(this.glassPaneElement)
+  /// Performs necessary clean up for PointerBinding including removing event listeners
+  /// and clearing the existing pointer state
+  void dispose() {
+    _adapter.clearListeners();
+    _pointerDataConverter.clearPointerState();
+  }
+
+  PointerBinding(this.glassPaneElement)
     : _pointerDataConverter = PointerDataConverter(),
       _detector = const PointerSupportDetector() {
+    if (isIosSafari) {
+      SafariPointerEventWorkaround.instance.workAroundMissingPointerEvents();
+    }
     _adapter = _createAdapter();
   }
 
@@ -158,10 +175,10 @@ abstract class _BaseAdapter {
   }
 
   /// Listeners that are registered through dart to js api.
-  static final Map<String, html.EventListener> _listeners =
+  final Map<String, html.EventListener> _listeners =
     <String, html.EventListener>{};
   /// Listeners that are registered through native javascript api.
-  static final Map<String, html.EventListener> _nativeListeners =
+  final Map<String, html.EventListener> _nativeListeners =
     <String, html.EventListener>{};
   final html.Element glassPaneElement;
   _PointerDataCallback _callback;
@@ -290,7 +307,7 @@ mixin _WheelEventListenerMixin on _BaseAdapter {
       'passive': false,
     });
     final html.EventListener jsHandler = allowInterop((html.Event event) => handler(event));
-    _BaseAdapter._nativeListeners['wheel'] = jsHandler;
+    _nativeListeners['wheel'] = jsHandler;
     addJsEventListener(glassPaneElement, 'wheel', jsHandler, eventOptions);
   }
 

diff --git a/lib/web_ui/test/canvaskit/common.dart b/lib/web_ui/test/canvaskit/common.dart
@@ -10,8 +10,6 @@ import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart' as ui;
 import 'package:web_engine_tester/golden_tester.dart';
 
-export '../common.dart';
-
 /// Used in tests instead of [ProductionCollector] to control Skia object
 /// collection explicitly, and to prevent leaks across tests.
 ///

diff --git a/lib/web_ui/test/canvaskit/frame_timings_test.dart b/lib/web_ui/test/canvaskit/frame_timings_test.dart
@@ -4,6 +4,7 @@
 
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
+import 'package:ui/src/engine/browser_detection.dart';
 
 import '../frame_timings_common.dart';
 import 'common.dart';

diff --git a/lib/web_ui/test/canvaskit/hot_restart_test.dart b/lib/web_ui/test/canvaskit/hot_restart_test.dart
@@ -6,8 +6,6 @@ import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
 import 'package:ui/src/engine.dart';
 
-import 'common.dart';
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }

diff --git a/lib/web_ui/test/canvaskit/initialization_services_vs_ui_test.dart b/lib/web_ui/test/canvaskit/initialization_services_vs_ui_test.dart
@@ -6,8 +6,6 @@ import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
 import 'package:ui/src/engine.dart';
 
-import 'common.dart';
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }

diff --git a/lib/web_ui/test/canvaskit/scene_test.dart b/lib/web_ui/test/canvaskit/scene_test.dart
@@ -8,8 +8,6 @@ import 'package:test/test.dart';
 import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart' as ui;
 
-import 'common.dart';
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }

diff --git a/lib/web_ui/test/canvaskit/semantics_test.dart b/lib/web_ui/test/canvaskit/semantics_test.dart
@@ -8,6 +8,7 @@ import 'dart:async';
 
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
+import 'package:ui/src/engine/browser_detection.dart';
 
 import '../engine/semantics/semantics_test.dart';
 import 'common.dart';

diff --git a/lib/web_ui/test/canvaskit/skia_font_collection_test.dart b/lib/web_ui/test/canvaskit/skia_font_collection_test.dart
@@ -9,8 +9,6 @@ import 'package:test/test.dart';
 
 import 'package:ui/src/engine.dart';
 
-import 'common.dart';
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }

diff --git a/lib/web_ui/test/canvaskit/text_test.dart b/lib/web_ui/test/canvaskit/text_test.dart
@@ -4,6 +4,7 @@
 
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
+import 'package:ui/src/engine/browser_detection.dart';
 import 'package:ui/ui.dart' as ui;
 
 import 'common.dart';

diff --git a/lib/web_ui/test/common.dart b/lib/web_ui/test/common.dart
diff --git a/lib/web_ui/test/engine/pointer_binding_test.dart b/lib/web_ui/test/engine/pointer_binding_test.dart
@@ -38,8 +38,6 @@ void _testEach<T extends _BasicEventContext>(
 
 /// Some methods in this class are skipped for iOS-Safari.
 // TODO(mdebbar): https://github.com/flutter/flutter/issues/60033
-bool get isIosSafari => browserEngine == BrowserEngine.webkit &&
-    operatingSystem == OperatingSystem.iOs;
 
 void main() {
   internalBootstrapBrowserTest(() => testMain);
@@ -55,6 +53,15 @@ void testMain() {
     dpi = window.devicePixelRatio;
   });
 
+  test('ios workaround', () {
+    final MockSafariPointerEventWorkaround mockSafariPointer =
+        MockSafariPointerEventWorkaround();
+    SafariPointerEventWorkaround.instance = mockSafariPointer;
+    final PointerBinding instance = PointerBinding(html.DivElement());
+    expect(mockSafariPointer.workAroundInvoked, isIosSafari);
+    instance.dispose();
+  }, skip: !isIosSafari);
+
   test('_PointerEventContext generates expected events', () {
     if (!_PointerEventContext().isSupported) {
       return;
@@ -1226,7 +1233,7 @@ void testMain() {
       _PointerEventContext(),
     ],
     'correctly handles missing right mouse button up when followed by move',
-        (_ButtonedEventMixin context) {
+    (_ButtonedEventMixin context) {
       PointerBinding.instance!.debugOverrideDetector(context);
       // This can happen with the following gesture sequence:
       //
@@ -1787,8 +1794,7 @@ void testMain() {
       expect(packets, hasLength(1));
       expect(packets[0].data, hasLength(1));
       expect(packets[0].data[0].change, equals(ui.PointerChange.move));
-      expect(packets[0].data[0].physicalX,
-          equals(900.0  * dpi));
+      expect(packets[0].data[0].physicalX, equals(900.0 * dpi));
       expect(packets[0].data[0].physicalY, equals(1900.0 * dpi));
       packets.clear();
 
@@ -2241,6 +2247,15 @@ void testMain() {
   );
 }
 
+class MockSafariPointerEventWorkaround implements SafariPointerEventWorkaround {
+  bool workAroundInvoked = false;
+
+  @override
+  void workAroundMissingPointerEvents() {
+    workAroundInvoked = true;
+  }
+}
+
 abstract class _BasicEventContext implements PointerSupportDetector {
   String get name;
 
@@ -2275,10 +2290,14 @@ mixin _ButtonedEventMixin on _BasicEventContext {
   //
   // If there is no button change, assign `button` with _kNoButtonChange.
   html.Event mouseMove(
-      {double? clientX, double? clientY, required int button, required int buttons});
+      {double? clientX,
+      double? clientY,
+      required int button,
+      required int buttons});
 
   // Generate an event that releases all mouse buttons.
-  html.Event mouseUp({double? clientX, double? clientY, int? button, int? buttons});
+  html.Event mouseUp(
+      {double? clientX, double? clientY, int? button, int? buttons});
 
   html.Event hover({double? clientX, double? clientY}) {
     return mouseMove(
@@ -2325,7 +2344,8 @@ mixin _ButtonedEventMixin on _BasicEventContext {
     required double? deltaX,
     required double? deltaY,
   }) {
-    final Function jsWheelEvent = js_util.getProperty<Function>(html.window, 'WheelEvent');
+    final Function jsWheelEvent =
+        js_util.getProperty<Function>(html.window, 'WheelEvent');
     final List<dynamic> eventArgs = <dynamic>[
       'wheel',
       <String, dynamic>{
@@ -2396,8 +2416,7 @@ mixin _MultiPointerEventMixin on _BasicEventContext {
 class _TouchEventContext extends _BasicEventContext
     with _MultiPointerEventMixin
     implements PointerSupportDetector {
-  _TouchEventContext() :
-    _target = html.document.createElement('div');
+  _TouchEventContext() : _target = html.document.createElement('div');
 
   @override
   String get name => 'TouchAdapter';
@@ -2518,7 +2537,9 @@ class _MouseEventContext extends _BasicEventContext
         hasButtonChange && (buttons & convertButtonToButtons(button)) != 0;
     final String adjustedType = !hasButtonChange
         ? 'mousemove'
-        : changeIsButtonDown ? 'mousedown' : 'mouseup';
+        : changeIsButtonDown
+            ? 'mousedown'
+            : 'mouseup';
     final int adjustedButton = hasButtonChange ? button : 0;
     return _createMouseEvent(
       adjustedType,

diff --git a/lib/web_ui/test/engine/semantics/semantics_test.dart b/lib/web_ui/test/engine/semantics/semantics_test.dart
@@ -15,7 +15,6 @@ import 'package:test/test.dart';
 import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart' as ui;
 
-import '../../common.dart';
 import 'semantics_tester.dart';
 
 DateTime _testTime = DateTime(2018, 12, 17);

diff --git a/lib/web_ui/test/html/bitmap_canvas_golden_test.dart b/lib/web_ui/test/html/bitmap_canvas_golden_test.dart
@@ -11,7 +11,6 @@ import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart';
 
 import 'package:web_engine_tester/golden_tester.dart';
-import '../common.dart';
 import 'screenshot.dart';
 
 void main() {

diff --git a/lib/web_ui/test/html/canvas_context_golden_test.dart b/lib/web_ui/test/html/canvas_context_golden_test.dart
@@ -7,12 +7,11 @@ import 'dart:html' as html;
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
 import 'package:ui/src/engine.dart' as engine;
+import 'package:ui/src/engine/browser_detection.dart';
 import 'package:ui/ui.dart' hide TextStyle;
 
 import 'package:web_engine_tester/golden_tester.dart';
 
-import '../common.dart';
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }

diff --git a/lib/web_ui/test/html/canvas_reuse_golden_test.dart b/lib/web_ui/test/html/canvas_reuse_golden_test.dart
@@ -11,8 +11,6 @@ import 'package:ui/ui.dart' hide TextStyle;
 
 import 'package:web_engine_tester/golden_tester.dart';
 
-import '../common.dart';
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }

diff --git a/lib/web_ui/test/html/drawing/canvas_draw_image_golden_test.dart b/lib/web_ui/test/html/drawing/canvas_draw_image_golden_test.dart
@@ -13,7 +13,6 @@ import 'package:ui/ui.dart';
 
 import 'package:web_engine_tester/golden_tester.dart';
 
-import '../../common.dart';
 import '../screenshot.dart';
 
 void main() {

diff --git a/lib/web_ui/test/html/drawing/canvas_rrect_golden_test.dart b/lib/web_ui/test/html/drawing/canvas_rrect_golden_test.dart
@@ -11,8 +11,6 @@ import 'package:ui/ui.dart';
 
 import 'package:web_engine_tester/golden_tester.dart';
 
-import '../../common.dart';
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }

diff --git a/lib/web_ui/test/html/drawing/draw_vertices_golden_test.dart b/lib/web_ui/test/html/drawing/draw_vertices_golden_test.dart
@@ -14,8 +14,6 @@ import 'package:ui/ui.dart' hide TextStyle, ImageShader;
 
 import 'package:web_engine_tester/golden_tester.dart';
 
-import '../../common.dart';
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }

diff --git a/lib/web_ui/test/html/paragraph/helper.dart b/lib/web_ui/test/html/paragraph/helper.dart
@@ -8,8 +8,6 @@ import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart';
 import 'package:web_engine_tester/golden_tester.dart';
 
-import '../../common.dart';
-
 const Color white = Color(0xFFFFFFFF);
 const Color black = Color(0xFF000000);
 const Color red = Color(0xFFFF0000);

diff --git a/lib/web_ui/test/html/paragraph/text_scuba.dart b/lib/web_ui/test/html/paragraph/text_scuba.dart
@@ -11,8 +11,6 @@ import 'package:ui/ui.dart' as ui;
 
 import 'package:web_engine_tester/golden_tester.dart';
 
-import '../../common.dart';
-
 /// Class that controls some details of how screenshotting is made.
 ///
 /// (For Googlers: Not really related with internal Scuba anymore)

diff --git a/lib/web_ui/test/html/path_metrics_golden_test.dart b/lib/web_ui/test/html/path_metrics_golden_test.dart
@@ -10,7 +10,6 @@ import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart' hide TextStyle;
 import 'package:web_engine_tester/golden_tester.dart';
 
-import '../common.dart';
 import '../matchers.dart';
 
 void main() {

diff --git a/lib/web_ui/test/html/path_to_svg_golden_test.dart b/lib/web_ui/test/html/path_to_svg_golden_test.dart
@@ -12,8 +12,6 @@ import 'package:ui/ui.dart';
 
 import 'package:web_engine_tester/golden_tester.dart';
 
-import '../common.dart';
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }

diff --git a/lib/web_ui/test/html/path_transform_golden_test.dart b/lib/web_ui/test/html/path_transform_golden_test.dart
@@ -12,8 +12,6 @@ import 'package:ui/ui.dart' hide TextStyle;
 
 import 'package:web_engine_tester/golden_tester.dart';
 
-import '../common.dart';
-
 void main() {
   internalBootstrapBrowserTest(() => testMain);
 }