Auto detect mode to determine which rendering backend to use. (#21852)

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

@@ -5,8 +5,40 @@
 // @dart = 2.10
 part of engine;
 
-/// EXPERIMENTAL: Enable the Skia-based rendering backend.
-const bool experimentalUseSkia =
+/// A JavaScript entrypoint that allows developer to set rendering backend
+/// at runtime before launching the application.
+@JS('window.flutterWebRenderer')
+external String? get requestedRendererType;
+
+/// Whether to use CanvasKit as the rendering backend.
+bool get useCanvasKit =>
+    _autoDetect ? _detectRenderer() : _useSkia;
+
+/// Returns true if CanvasKit is used.
+///
+/// Otherwise, returns false.
+bool _detectRenderer() {
+  if (requestedRendererType != null) {
+    return requestedRendererType! == 'canvaskit';
+  }
+  // If requestedRendererType is not specified, use CanvasKit for desktop and
+  // html for mobile.
+  return isDesktop;
+}
+
+/// Auto detect which rendering backend to use.
+///
+/// Using flutter tools option "--web-render=auto" would set the value to true.
+/// Otherwise, it would be false.
+const bool _autoDetect =
+    bool.fromEnvironment('FLUTTER_WEB_AUTO_DETECT', defaultValue: false);
+
+/// Enable the Skia-based rendering backend.
+///
+/// Using flutter tools option "--web-render=canvaskit" would set the value to
+/// true.
+/// Using flutter tools option "--web-render=html" would set the value to false.
+const bool _useSkia =
     bool.fromEnvironment('FLUTTER_WEB_USE_SKIA', defaultValue: false);
 
 // If set to true, forces CPU-only rendering (i.e. no WebGL).

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

@@ -81,7 +81,7 @@ class CkGradientLinear extends CkShader implements ui.Gradient {
 
   @override
   SkShader createDefault() {
-    assert(experimentalUseSkia);
+    assert(useCanvasKit);
 
     return canvasKit.SkShader.MakeLinearGradient(
       toSkPoint(from),
@@ -109,7 +109,7 @@ class CkGradientRadial extends CkShader implements ui.Gradient {
 
   @override
   SkShader createDefault() {
-    assert(experimentalUseSkia);
+    assert(useCanvasKit);
 
     return canvasKit.SkShader.MakeRadialGradient(
       toSkPoint(center),
@@ -141,7 +141,7 @@ class CkGradientConical extends CkShader implements ui.Gradient {
 
   @override
   SkShader createDefault() {
-    assert(experimentalUseSkia);
+    assert(useCanvasKit);
     return canvasKit.SkShader.MakeTwoPointConicalGradient(
       toSkPoint(focal),
       focalRadius,

lib/web_ui/lib/src/engine/dom_renderer.dart

@@ -45,7 +45,7 @@ class DomRenderer {
   html.MetaElement? _viewportMeta;
 
   /// The canvaskit script, downloaded from a CDN. Only created if
-  /// [experimentalUseSkia] is set to true.
+  /// [useCanvasKit] is set to true.
   html.ScriptElement? get canvasKitScript => _canvasKitScript;
   html.ScriptElement? _canvasKitScript;
 
@@ -451,7 +451,7 @@ flt-glass-pane * {
       });
     }
 
-    if (experimentalUseSkia) {
+    if (useCanvasKit) {
       _canvasKitScript?.remove();
       _canvasKitScript = html.ScriptElement();
       _canvasKitScript!.src = canvasKitBaseUrl + 'canvaskit.js';

lib/web_ui/lib/src/engine/html/shaders/shader.dart

@@ -216,7 +216,7 @@ class GradientRadial extends EngineGradient {
   @override
   Object createPaintStyle(html.CanvasRenderingContext2D? ctx,
       ui.Rect? shaderBounds) {
-    if (!experimentalUseSkia) {
+    if (!useCanvasKit) {
       if (tileMode != ui.TileMode.clamp) {
         throw UnimplementedError(
             'TileMode not supported in GradientRadial shader');

lib/web_ui/lib/src/engine/platform_dispatcher.dart

@@ -377,7 +377,7 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
         return;
 
       case 'flutter/platform_views':
-        if (experimentalUseSkia) {
+        if (useCanvasKit) {
           rasterizer!.surface.viewEmbedder
               .handlePlatformViewCall(data, callback);
         } else {
@@ -482,7 +482,7 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
   ///    painting.
   @override
   void render(ui.Scene scene, [ui.FlutterView? view]) {
-    if (experimentalUseSkia) {
+    if (useCanvasKit) {
       // "Build finish" and "raster start" happen back-to-back because we
       // render on the same thread, so there's no overhead from hopping to
       // another thread.
@@ -839,7 +839,7 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
 
   @visibleForTesting
   late Rasterizer? rasterizer =
-      experimentalUseSkia ? Rasterizer(Surface(HtmlViewEmbedder())) : null;
+      useCanvasKit ? Rasterizer(Surface(HtmlViewEmbedder())) : null;
 
   /// In Flutter, platform messages are exchanged between threads so the
   /// messages and responses have to be exchanged asynchronously. We simulate

lib/web_ui/lib/src/ui/canvas.dart

@@ -30,7 +30,7 @@ class Vertices {
     List<Color>? colors,
     List<int>? indices,
   }) {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkVertices(
         mode,
         positions,
@@ -53,7 +53,7 @@ class Vertices {
     Int32List? colors,
     Uint16List? indices,
   }) {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkVertices.raw(
         mode,
         positions,
@@ -73,7 +73,7 @@ class Vertices {
 
 abstract class PictureRecorder {
   factory PictureRecorder() {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkPictureRecorder();
     } else {
       return engine.EnginePictureRecorder();
@@ -85,7 +85,7 @@ abstract class PictureRecorder {
 
 abstract class Canvas {
   factory Canvas(PictureRecorder recorder, [Rect? cullRect]) {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CanvasKitCanvas(recorder, cullRect);
     } else {
       return engine.SurfaceCanvas(recorder as engine.EnginePictureRecorder, cullRect);

lib/web_ui/lib/src/ui/compositing.dart

@@ -34,7 +34,7 @@ abstract class PhysicalShapeEngineLayer implements EngineLayer {}
 
 abstract class SceneBuilder {
   factory SceneBuilder() {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.LayerSceneBuilder();
     } else {
       return engine.SurfaceSceneBuilder();

lib/web_ui/lib/src/ui/initialization.dart

@@ -25,13 +25,13 @@ Future<void> _initializePlatform({
 
   // This needs to be after `webOnlyInitializeEngine` because that is where the
   // canvaskit script is added to the page.
-  if (engine.experimentalUseSkia) {
+  if (engine.useCanvasKit) {
     await engine.initializeCanvasKit();
   }
 
   assetManager ??= const engine.AssetManager();
   await webOnlySetAssetManager(assetManager);
-  if (engine.experimentalUseSkia) {
+  if (engine.useCanvasKit) {
     await engine.skiaFontCollection.ensureFontsLoaded();
   } else {
     await _fontCollection!.ensureFontsLoaded();
@@ -54,7 +54,7 @@ Future<void> webOnlySetAssetManager(engine.AssetManager assetManager) async {
 
   _assetManager = assetManager;
 
-  if (engine.experimentalUseSkia) {
+  if (engine.useCanvasKit) {
     engine.ensureSkiaFontCollectionInitialized();
   } else {
     _fontCollection ??= engine.FontCollection();
@@ -62,14 +62,14 @@ Future<void> webOnlySetAssetManager(engine.AssetManager assetManager) async {
   }
 
   if (_assetManager != null) {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       await engine.skiaFontCollection.registerFonts(_assetManager!);
     } else {
       await _fontCollection!.registerFonts(_assetManager!);
     }
   }
 
-  if (debugEmulateFlutterTesterEnvironment && !engine.experimentalUseSkia) {
+  if (debugEmulateFlutterTesterEnvironment && !engine.useCanvasKit) {
     _fontCollection!.debugRegisterTestFonts();
   }
 }

lib/web_ui/lib/src/ui/painting.dart

@@ -230,7 +230,7 @@ enum Clip {
 }
 
 abstract class Paint {
-  factory Paint() => engine.experimentalUseSkia ? engine.CkPaint() : engine.SurfacePaint();
+  factory Paint() => engine.useCanvasKit ? engine.CkPaint() : engine.SurfacePaint();
   static bool enableDithering = false;
   BlendMode get blendMode;
   set blendMode(BlendMode value);
@@ -278,7 +278,7 @@ abstract class Gradient extends Shader {
     List<double>? colorStops,
     TileMode tileMode = TileMode.clamp,
     Float64List? matrix4,
-  ]) => engine.experimentalUseSkia
+  ]) => engine.useCanvasKit
     ? engine.CkGradientLinear(from, to, colors, colorStops, tileMode, matrix4)
     : engine.GradientLinear(from, to, colors, colorStops, tileMode, matrix4);
   factory Gradient.radial(
@@ -296,13 +296,13 @@ abstract class Gradient extends Shader {
     // If focal == center and the focal radius is 0.0, it's still a regular radial gradient
     final Float32List? matrix32 = matrix4 != null ? engine.toMatrix32(matrix4) : null;
     if (focal == null || (focal == center && focalRadius == 0.0)) {
-      return engine.experimentalUseSkia
+      return engine.useCanvasKit
           ? engine.CkGradientRadial(center, radius, colors, colorStops, tileMode, matrix32)
           : engine.GradientRadial(center, radius, colors, colorStops, tileMode, matrix32);
     } else {
       assert(center != Offset.zero ||
           focal != Offset.zero); // will result in exception(s) in Skia side
-      return engine.experimentalUseSkia
+      return engine.useCanvasKit
           ? engine.CkGradientConical(
               focal, focalRadius, center, radius, colors, colorStops, tileMode, matrix32)
           : engine.GradientConical(
@@ -317,7 +317,7 @@ abstract class Gradient extends Shader {
     double startAngle = 0.0,
     double endAngle = math.pi * 2,
     Float64List? matrix4,
-  ]) => engine.experimentalUseSkia
+  ]) => engine.useCanvasKit
     ? engine.CkGradientSweep(center, colors, colorStops, tileMode, startAngle,
           endAngle, matrix4 != null ? engine.toMatrix32(matrix4) : null)
     : engine.GradientSweep(center, colors, colorStops, tileMode, startAngle,
@@ -393,7 +393,7 @@ enum FilterQuality {
 
 class ImageFilter {
   factory ImageFilter.blur({double sigmaX = 0.0, double sigmaY = 0.0}) {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkImageFilter.blur(sigmaX: sigmaX, sigmaY: sigmaY);
     }
     return engine.EngineImageFilter.blur(sigmaX: sigmaX, sigmaY: sigmaY);
@@ -451,7 +451,7 @@ Future<Codec> instantiateImageCodec(
 }
 
 String? _instantiateImageCodec(Uint8List list, engine.Callback<Codec> callback) {
-  if (engine.experimentalUseSkia) {
+  if (engine.useCanvasKit) {
     engine.skiaInstantiateImageCodec(list, callback);
     return null;
   }
@@ -471,7 +471,7 @@ String? _instantiateImageCodecFromUrl(
   engine.WebOnlyImageCodecChunkCallback? chunkCallback,
   engine.Callback<Codec> callback,
 ) {
-  if (engine.experimentalUseSkia) {
+  if (engine.useCanvasKit) {
     engine.skiaInstantiateWebImageCodec(uri.toString(), callback, chunkCallback);
     return null;
   } else {
@@ -576,7 +576,7 @@ void decodeImageFromPixels(
   int? targetHeight,
   bool allowUpscaling = true,
 }) {
-  if (engine.experimentalUseSkia) {
+  if (engine.useCanvasKit) {
     engine.skiaInstantiateImageCodec(
       pixels,
       (Codec codec) {
@@ -695,7 +695,7 @@ class Shadow {
 
 class ImageShader extends Shader {
   factory ImageShader(Image image, TileMode tmx, TileMode tmy, Float64List matrix4) {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkImageShader(image, tmx, tmy, matrix4);
     }
     throw UnsupportedError('ImageShader not implemented for web platform.');

lib/web_ui/lib/src/ui/path.dart

@@ -7,14 +7,14 @@ part of ui;
 
 abstract class Path {
   factory Path() {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkPath();
     } else {
       return engine.SurfacePath();
     }
   }
   factory Path.from(Path source) {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkPath.from(source as engine.CkPath);
     } else {
       return engine.SurfacePath.from(source as engine.SurfacePath);
@@ -64,7 +64,7 @@ abstract class Path {
   static Path combine(PathOperation operation, Path path1, Path path2) {
     assert(path1 != null); // ignore: unnecessary_null_comparison
     assert(path2 != null); // ignore: unnecessary_null_comparison
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkPath.combine(operation, path1, path2);
     }
     throw UnimplementedError();

lib/web_ui/lib/src/ui/text.dart

@@ -254,7 +254,7 @@ abstract class TextStyle {
     List<Shadow>? shadows,
     List<FontFeature>? fontFeatures,
   }) {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkTextStyle(
         color: color,
         decoration: decoration,
@@ -318,7 +318,7 @@ abstract class ParagraphStyle {
     String? ellipsis,
     Locale? locale,
   }) {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkParagraphStyle(
         textAlign: textAlign,
         textDirection: textDirection,
@@ -585,7 +585,7 @@ abstract class Paragraph {
 
 abstract class ParagraphBuilder {
   factory ParagraphBuilder(ParagraphStyle style) {
-    if (engine.experimentalUseSkia) {
+    if (engine.useCanvasKit) {
       return engine.CkParagraphBuilder(style);
     } else {
       return engine.EngineParagraphBuilder(style as engine.EngineParagraphStyle);
@@ -608,7 +608,7 @@ abstract class ParagraphBuilder {
 }
 
 Future<void> loadFontFromList(Uint8List list, {String? fontFamily}) {
-  if (engine.experimentalUseSkia) {
+  if (engine.useCanvasKit) {
     return engine.skiaFontCollection.loadFontFromList(list, fontFamily: fontFamily).then(
       (_) => engine.sendFontChangeMessage()
     );

lib/web_ui/test/canvaskit/canvaskit_api_test.dart

@@ -25,7 +25,7 @@ void testMain() {
     });
 
     test('Using CanvasKit', () {
-      expect(experimentalUseSkia, true);
+      expect(useCanvasKit, true);
     });
 
     _blendModeTests();

lib/web_ui/test/canvaskit/frame_timings_test.dart

@@ -22,7 +22,7 @@ void testMain() {
     });
 
     test('Using CanvasKit', () {
-      expect(experimentalUseSkia, true);
+      expect(useCanvasKit, true);
     });
 
     test('collects frame timings', () async {

lib/web_ui/test/canvaskit/path_test.dart

@@ -22,7 +22,7 @@ void testMain() {
     });
 
     test('Using CanvasKit', () {
-      expect(experimentalUseSkia, true);
+      expect(useCanvasKit, true);
     });
 
     test(CkPathMetrics, () {

web_sdk/BUILD.gn

@@ -32,6 +32,8 @@ web_engine_sources += [ "//flutter/lib/web_ui/lib/src/engine.dart" ]
 
 group("web_sdk") {
   deps = [
+    ":flutter_dartdevc_canvaskit_html_kernel_sdk",
+    ":flutter_dartdevc_canvaskit_html_kernel_sdk_sound",
     ":flutter_dartdevc_canvaskit_kernel_sdk",
     ":flutter_dartdevc_canvaskit_kernel_sdk_sound",
     ":flutter_dartdevc_kernel_sdk",
@@ -244,6 +246,113 @@ prebuilt_dart_action("flutter_dartdevc_canvaskit_kernel_sdk") {
   ]
 }
 
+# Compiles the DDC CanvasKit and Html SDK's JS code.
+prebuilt_dart_action("flutter_dartdevc_canvaskit_html_kernel_sdk") {
+  deps = [
+    "//third_party/dart:create_sdk",
+    "//third_party/dart/pkg:pkg_files_stamp",
+    "//third_party/dart/utils/dartdevc:dartdevc_files_stamp",
+    "//third_party/dart/utils/dartdevc:dartdevc_sdk_patch_stamp",
+  ]
+
+  inputs = [ "sdk_rewriter.dart" ] + web_ui_sources + web_engine_sources
+
+  packages = dart_sdk_package_config
+
+  script = "//third_party/dart/pkg/dev_compiler/bin/dartdevc.dart"
+
+  outputs = [
+    "$root_out_dir/flutter_web_sdk/kernel/amd-canvaskit-html/dart_sdk.js",
+    "$root_out_dir/flutter_web_sdk/kernel/amd-canvaskit-html/dart_sdk.js.map",
+  ]
+
+  args = [
+    "--enable-experiment=non-nullable",
+    "--compile-sdk",
+    "dart:core",
+
+    # Additional Flutter web dart libraries
+    "dart:ui",
+    "dart:_engine",
+    "--no-summarize",
+    "--packages",
+    "file:///" + rebase_path(dart_sdk_package_config),
+    "--multi-root-scheme",
+    "org-dartlang-sdk",
+    "--multi-root",
+    "file:///" + rebase_path("$root_out_dir"),
+    "--multi-root-output-path",
+    rebase_path("$root_out_dir/"),
+    "--libraries-file",
+    "org-dartlang-sdk:///flutter_web_sdk/libraries.json",
+    "--inline-source-map",
+    "-DFLUTTER_WEB_AUTO_DETECT=true",
+    "--modules",
+    "amd",
+    "-o",
+    rebase_path(
+        "$root_out_dir/flutter_web_sdk/kernel/amd-canvaskit-html/dart_sdk.js"),
+    "--modules",
+    "legacy",
+    "-o",
+    rebase_path(
+        "$root_out_dir/flutter_web_sdk/kernel/legacy-canvaskit-html/dart_sdk.js"),
+  ]
+}
+
+# Compiles the DDC SDK's JS code for null safety.
+prebuilt_dart_action("flutter_dartdevc_kernel_sdk_sound") {
+  deps = [
+    "//third_party/dart:create_sdk",
+    "//third_party/dart/pkg:pkg_files_stamp",
+    "//third_party/dart/utils/dartdevc:dartdevc_files_stamp",
+    "//third_party/dart/utils/dartdevc:dartdevc_sdk_patch_stamp",
+  ]
+
+  inputs = [ "sdk_rewriter.dart" ] + web_ui_sources + web_engine_sources
+
+  packages = dart_sdk_package_config
+
+  script = "//third_party/dart/pkg/dev_compiler/bin/dartdevc.dart"
+
+  outputs = [
+    "$root_out_dir/flutter_web_sdk/kernel/amd-sound/dart_sdk.js",
+    "$root_out_dir/flutter_web_sdk/kernel/amd-sound/dart_sdk.js.map",
+  ]
+
+  args = [
+    "--enable-experiment=non-nullable",
+    "--sound-null-safety",
+    "--compile-sdk",
+    "dart:core",
+
+    # Additional Flutter web dart libraries
+    "dart:ui",
+    "dart:_engine",
+    "--no-summarize",
+    "--packages",
+    "file:///" + rebase_path(dart_sdk_package_config),
+    "--multi-root-scheme",
+    "org-dartlang-sdk",
+    "--multi-root",
+    "file:///" + rebase_path("$root_out_dir"),
+    "--multi-root-output-path",
+    rebase_path("$root_out_dir/"),
+    "--libraries-file",
+    "org-dartlang-sdk:///flutter_web_sdk/libraries.json",
+    "--inline-source-map",
+    "--modules",
+    "amd",
+    "-o",
+    rebase_path("$root_out_dir/flutter_web_sdk/kernel/amd-sound/dart_sdk.js"),
+    "--modules",
+    "legacy",
+    "-o",
+    rebase_path(
+        "$root_out_dir/flutter_web_sdk/kernel/legacy-sound/dart_sdk.js"),
+  ]
+}
+
 # Compiles the DDC CanvasKit SDK's JS code for null safety.
 prebuilt_dart_action("flutter_dartdevc_canvaskit_kernel_sdk_sound") {
   deps = [
@@ -299,8 +408,8 @@ prebuilt_dart_action("flutter_dartdevc_canvaskit_kernel_sdk_sound") {
   ]
 }
 
-# Compiles the DDC SDK's JS code for null safety.
-prebuilt_dart_action("flutter_dartdevc_kernel_sdk_sound") {
+# Compiles the DDC CanvasKit and Html SDK's JS code for null safety.
+prebuilt_dart_action("flutter_dartdevc_canvaskit_html_kernel_sdk_sound") {
   deps = [
     "//third_party/dart:create_sdk",
     "//third_party/dart/pkg:pkg_files_stamp",
@@ -315,8 +424,8 @@ prebuilt_dart_action("flutter_dartdevc_kernel_sdk_sound") {
   script = "//third_party/dart/pkg/dev_compiler/bin/dartdevc.dart"
 
   outputs = [
-    "$root_out_dir/flutter_web_sdk/kernel/amd-sound/dart_sdk.js",
-    "$root_out_dir/flutter_web_sdk/kernel/amd-sound/dart_sdk.js.map",
+    "$root_out_dir/flutter_web_sdk/kernel/amd-canvaskit-html-sound/dart_sdk.js",
+    "$root_out_dir/flutter_web_sdk/kernel/amd-canvaskit-html-sound/dart_sdk.js.map",
   ]
 
   args = [
@@ -340,15 +449,17 @@ prebuilt_dart_action("flutter_dartdevc_kernel_sdk_sound") {
     "--libraries-file",
     "org-dartlang-sdk:///flutter_web_sdk/libraries.json",
     "--inline-source-map",
+    "-DFLUTTER_WEB_AUTO_DETECT=true",
     "--modules",
     "amd",
     "-o",
-    rebase_path("$root_out_dir/flutter_web_sdk/kernel/amd-sound/dart_sdk.js"),
+    rebase_path(
+        "$root_out_dir/flutter_web_sdk/kernel/amd-canvaskit-html-sound/dart_sdk.js"),
     "--modules",
     "legacy",
     "-o",
     rebase_path(
-        "$root_out_dir/flutter_web_sdk/kernel/legacy-sound/dart_sdk.js"),
+        "$root_out_dir/flutter_web_sdk/kernel/legacy-canvaskit-html-sound/dart_sdk.js"),
   ]
 }