Merge branch 'main' into fix-some-issues-vk

Author: iskakaushik

lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart

@@ -21,6 +21,7 @@ import 'package:ui/ui.dart' as ui;
 import '../configuration.dart';
 import '../dom.dart';
 import '../profiler.dart';
+import 'renderer.dart';
 
 /// Entrypoint into the CanvasKit API.
 late CanvasKit canvasKit;
@@ -2678,45 +2679,90 @@ void patchCanvasKitModule(DomHTMLScriptElement canvasKitScript) {
     js_util.callMethod(objectConstructor,
         'defineProperty', <dynamic>[domWindow, 'module', moduleAccessor]);
   }
-  domDocument.head!.appendChild(canvasKitScript);
 }
 
-String get canvasKitBuildUrl => configuration.canvasKitBaseUrl;
-String get canvasKitJavaScriptBindingsUrl =>
-    '${canvasKitBuildUrl}canvaskit.js';
-String canvasKitWasmModuleUrl(String canvasKitBase, String file) =>
+const String _kFullCanvasKitJsFileName = 'canvaskit.js';
+const String _kChromiumCanvasKitJsFileName = 'chromium/canvaskit.js';
+
+String get _canvasKitBaseUrl => configuration.canvasKitBaseUrl;
+List<String> get _canvasKitJsFileNames {
+  switch (configuration.canvasKitVariant) {
+    case CanvasKitVariant.auto:
+      return <String>[
+        if (browserSupportsCanvaskitChromium) _kChromiumCanvasKitJsFileName,
+        _kFullCanvasKitJsFileName,
+      ];
+    case CanvasKitVariant.full:
+      return <String>[_kFullCanvasKitJsFileName];
+    case CanvasKitVariant.chromium:
+      return <String>[_kChromiumCanvasKitJsFileName];
+  }
+}
+Iterable<String> get _canvasKitJsUrls {
+  return _canvasKitJsFileNames.map((String filename) => '$_canvasKitBaseUrl$filename');
+}
+String canvasKitWasmModuleUrl(String file, String canvasKitBase) =>
     canvasKitBase + file;
 
 /// Download and initialize the CanvasKit module.
 ///
 /// Downloads the CanvasKit JavaScript, then calls `CanvasKitInit` to download
 /// and intialize the CanvasKit wasm.
 Future<CanvasKit> downloadCanvasKit() async {
-  await _downloadCanvasKitJs();
+  await _downloadOneOf(_canvasKitJsUrls);
 
   return CanvasKitInit(CanvasKitInitOptions(
-    locateFile: allowInterop((String file, String unusedBase) =>
-        canvasKitWasmModuleUrl(canvasKitBuildUrl, file)),
+    locateFile: allowInterop(canvasKitWasmModuleUrl),
   ));
 }
 
-/// Downloads the CanvasKit JavaScript file at [canvasKitBase].
-Future<void> _downloadCanvasKitJs() {
-  final String canvasKitJavaScriptUrl = canvasKitJavaScriptBindingsUrl;
+/// Finds the first URL in [urls] that can be downloaded successfully, and
+/// downloads it.
+///
+/// If none of the URLs can be downloaded, throws an [Exception].
+Future<void> _downloadOneOf(Iterable<String> urls) async {
+  for (final String url in urls) {
+    if (await _downloadCanvasKitJs(url)) {
+      return;
+    }
+  }
 
+  // Reaching this point means that all URLs failed to download.
+  throw Exception(
+    'Failed to download any of the following CanvasKit URLs: $urls',
+  );
+}
+
+/// Downloads the CanvasKit JavaScript file at [url].
+///
+/// Returns a [Future] that completes with `true` if the CanvasKit JavaScript
+/// file was successfully downloaded, or `false` if it failed.
+Future<bool> _downloadCanvasKitJs(String url) {
   final DomHTMLScriptElement canvasKitScript = createDomHTMLScriptElement();
-  canvasKitScript.src = createTrustedScriptUrl(canvasKitJavaScriptUrl);
+  canvasKitScript.src = createTrustedScriptUrl(url);
+
+  final Completer<bool> canvasKitLoadCompleter = Completer<bool>();
+
+  late final DomEventListener loadCallback;
+  late final DomEventListener errorCallback;
 
-  final Completer<void> canvasKitLoadCompleter = Completer<void>();
-  late DomEventListener callback;
   void loadEventHandler(DomEvent _) {
-    canvasKitLoadCompleter.complete();
-    canvasKitScript.removeEventListener('load', callback);
+    canvasKitScript.remove();
+    canvasKitLoadCompleter.complete(true);
   }
-  callback = allowInterop(loadEventHandler);
-  canvasKitScript.addEventListener('load', callback);
+  void errorEventHandler(DomEvent errorEvent) {
+    canvasKitScript.remove();
+    canvasKitLoadCompleter.complete(false);
+  }
+
+  loadCallback = allowInterop(loadEventHandler);
+  errorCallback = allowInterop(errorEventHandler);
+
+  canvasKitScript.addEventListener('load', loadCallback);
+  canvasKitScript.addEventListener('error', errorCallback);
 
   patchCanvasKitModule(canvasKitScript);
+  domDocument.head!.appendChild(canvasKitScript);
 
   return canvasKitLoadCompleter.future;
 }

lib/web_ui/lib/src/engine/canvaskit/renderer.dart

@@ -35,6 +35,22 @@ const bool browserSupportsCanvaskitChromium = false;
 //  CanvasKit to download.
 // final bool browserSupportsCanvaskitChromium = domIntl.v8BreakIterator != null;
 
+enum CanvasKitVariant {
+  /// The appropriate variant is chosen based on the browser.
+  ///
+  /// This is the default variant.
+  auto,
+
+  /// The full variant that can be used in any browser.
+  full,
+
+  /// The variant that is optimized for Chromium browsers.
+  ///
+  /// WARNING: In most cases, you should use [auto] instead of this variant. Using
+  /// this variant in a non-Chromium browser will result in a broken app.
+  chromium,
+}
+
 class CanvasKitRenderer implements Renderer {
   static CanvasKitRenderer get instance => _instance;
   static late CanvasKitRenderer _instance;

lib/web_ui/lib/src/engine/configuration.dart

@@ -46,6 +46,7 @@ library configuration;
 
 import 'package:js/js.dart';
 import 'package:meta/meta.dart';
+import 'canvaskit/renderer.dart';
 import 'dom.dart';
 
 /// The version of CanvasKit used by the web engine by default.
@@ -156,7 +157,8 @@ class FlutterConfiguration {
   // runtime. Runtime-supplied values take precedence over environment
   // variables.
 
-  /// The URL to use when downloading the CanvasKit script and associated wasm.
+  /// The base URL to use when downloading the CanvasKit script and associated
+  /// wasm.
   ///
   /// The expected directory structure nested under this URL is as follows:
   ///
@@ -183,6 +185,22 @@ class FlutterConfiguration {
     defaultValue: 'https://unpkg.com/canvaskit-wasm@$_canvaskitVersion/bin/',
   );
 
+  /// The variant of CanvasKit to download.
+  ///
+  /// Available values are:
+  ///
+  /// * `auto` - the default value. The engine will automatically detect the
+  /// best variant to use based on the browser.
+  ///
+  /// * `full` - the full variant of CanvasKit that can be used in any browser.
+  ///
+  /// * `chromium` - the lite variant of CanvasKit that can be used in
+  /// Chromium-based browsers.
+  CanvasKitVariant get canvasKitVariant {
+    final String variant = _configuration?.canvasKitVariant ?? 'auto';
+    return CanvasKitVariant.values.byName(variant);
+  }
+
   /// If set to true, forces CPU-only rendering in CanvasKit (i.e. the engine
   /// won't use WebGL).
   ///
@@ -249,6 +267,7 @@ class JsFlutterConfiguration {}
 
 extension JsFlutterConfigurationExtension on JsFlutterConfiguration {
   external String? get canvasKitBaseUrl;
+  external String? get canvasKitVariant;
   external bool? get canvasKitForceCpuOnly;
   external double? get canvasKitMaximumSurfaces;
   external bool? get debugShowSemanticsNodes;

lib/web_ui/test/canvaskit/canvaskit_api_test.dart

@@ -1826,4 +1826,19 @@ void _paragraphTests() {
 
     expect(surface, isNotNull);
   }, skip: isFirefox); // Intended: Headless firefox has no webgl support https://github.com/flutter/flutter/issues/109265
+
+  test('respects actual location of canvaskit files', () {
+    expect(
+      canvasKitWasmModuleUrl('canvaskit.wasm', 'https://example.com/'),
+      'https://example.com/canvaskit.wasm',
+    );
+    expect(
+      canvasKitWasmModuleUrl('canvaskit.wasm', 'http://localhost:1234/'),
+      'http://localhost:1234/canvaskit.wasm',
+    );
+    expect(
+      canvasKitWasmModuleUrl('canvaskit.wasm', 'http://localhost:1234/foo/'),
+      'http://localhost:1234/foo/canvaskit.wasm',
+    );
+  });
 }

lib/web_ui/test/engine/configuration_test.dart

@@ -60,4 +60,46 @@ void testMain() {
       expect(config.canvasKitMaximumSurfaces, 16);
     });
   });
+
+  group('CanvasKit config', () {
+    test('default canvasKitVariant', () {
+      final FlutterConfiguration config = FlutterConfiguration();
+
+      expect(config.canvasKitVariant, CanvasKitVariant.auto);
+    });
+
+    test('default canvasKitVariant when it is undefined', () {
+      final FlutterConfiguration config = FlutterConfiguration();
+      config.setUserConfiguration(
+        // With an empty map, the canvasKitVariant is undefined in JS.
+        js_util.jsify(<String, Object?>{}) as JsFlutterConfiguration,
+      );
+
+      expect(config.canvasKitVariant, CanvasKitVariant.auto);
+    });
+
+    test('validates canvasKitVariant', () {
+      final FlutterConfiguration config = FlutterConfiguration();
+
+      config.setUserConfiguration(
+        js_util.jsify(<String, Object?>{'canvasKitVariant': 'foo'}) as JsFlutterConfiguration,
+      );
+      expect(() => config.canvasKitVariant, throwsArgumentError);
+
+      config.setUserConfiguration(
+        js_util.jsify(<String, Object?>{'canvasKitVariant': 'auto'}) as JsFlutterConfiguration,
+      );
+      expect(config.canvasKitVariant, CanvasKitVariant.auto);
+
+      config.setUserConfiguration(
+        js_util.jsify(<String, Object?>{'canvasKitVariant': 'full'}) as JsFlutterConfiguration,
+      );
+      expect(config.canvasKitVariant, CanvasKitVariant.full);
+
+      config.setUserConfiguration(
+        js_util.jsify(<String, Object?>{'canvasKitVariant': 'chromium'}) as JsFlutterConfiguration,
+      );
+      expect(config.canvasKitVariant, CanvasKitVariant.chromium);
+    });
+  });
 }