[web] Refactor renderers to use the same frontend code (flutter#174588)

Refactors the renderer code so both renderers (Skwasm and CanvasKit) use
the same SceneBuilder and platform view embedding code. This change is
discussed in a design doc here:
https://flutter.dev/go/web-renderer-unification

Fixes flutter#172311
Fixes flutter#172308
Fixes flutter#142072

## 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], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

**Note**: The Flutter team is currently trialing the use of [Gemini Code
Assist for
GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code).
Comments from the `gemini-code-assist` bot should not be taken as
authoritative feedback from the Flutter team. If you find its comments
useful you can update your code accordingly, but if you are unsure or
disagree with the feedback, please feel free to wait for a Flutter team
member's review for guidance on which automated comments should be
addressed.

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

Author: harryterkelsen

engine/src/flutter/lib/web_ui/lib/src/engine.dart

@@ -74,19 +74,18 @@ export 'engine/layer/layer_scene_builder.dart';
 export 'engine/layer/layer_tree.dart';
 export 'engine/layer/layer_visitor.dart';
 export 'engine/layer/n_way_canvas.dart';
-export 'engine/layers.dart';
 export 'engine/lazy_path.dart';
 export 'engine/mouse/context_menu.dart';
 export 'engine/mouse/cursor.dart';
 export 'engine/mouse/prevent_default.dart';
 export 'engine/navigation/history.dart';
 export 'engine/noto_font.dart';
 export 'engine/noto_font_encoding.dart';
+export 'engine/occlusion_map.dart';
 export 'engine/onscreen_logging.dart';
 export 'engine/platform_dispatcher.dart';
 export 'engine/platform_dispatcher/app_lifecycle_state.dart';
 export 'engine/platform_dispatcher/view_focus_binding.dart';
-export 'engine/platform_views.dart';
 export 'engine/platform_views/content_manager.dart';
 export 'engine/platform_views/embedder.dart';
 export 'engine/platform_views/message_handler.dart';
@@ -99,9 +98,6 @@ export 'engine/profiler.dart';
 export 'engine/raw_keyboard.dart';
 export 'engine/renderer.dart';
 export 'engine/safe_browser_api.dart';
-export 'engine/scene_builder.dart';
-export 'engine/scene_painting.dart';
-export 'engine/scene_view.dart';
 export 'engine/semantics/accessibility.dart';
 export 'engine/semantics/alert.dart';
 export 'engine/semantics/checkable.dart';

engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/image.dart

@@ -312,17 +312,6 @@ CkImage scaleImage(SkImage image, int? targetWidth, int? targetHeight) {
   return ckImage;
 }
 
-/// Thrown when the web engine fails to decode an image, either due to a
-/// network issue, corrupted image contents, or missing codec.
-class ImageCodecException implements Exception {
-  ImageCodecException(this._message);
-
-  final String _message;
-
-  @override
-  String toString() => 'ImageCodecException: $_message';
-}
-
 const String _kNetworkImageMessage = 'Failed to load network image.';
 
 /// Instantiates a [ui.Codec] backed by an `SkAnimatedImage` from Skia after

engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/picture_recorder.dart

@@ -7,7 +7,7 @@ import 'dart:typed_data';
 import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart' as ui;
 
-class CkPictureRecorder implements LayerPictureRecorder, ScenePictureRecorder {
+class CkPictureRecorder implements LayerPictureRecorder {
   SkPictureRecorder? _skRecorder;
   CkCanvas? _recordingCanvas;
 

engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/raster_cache.dart

@@ -428,71 +428,6 @@ class CanvasKitRenderer extends Renderer {
   ui.ParagraphBuilder createParagraphBuilder(ui.ParagraphStyle style) =>
       isExperimentalWebParagraph ? WebParagraphBuilder(style) : CkParagraphBuilder(style);
 
-  // TODO(harryterkelsen): Merge this logic with the async logic in
-  // [EngineScene], https://github.com/flutter/flutter/issues/142072.
-  @override
-  Future<void> renderScene(ui.Scene scene, EngineFlutterView view) async {
-    assert(
-      rasterizers.containsKey(view.viewId),
-      "Unable to render to a view which hasn't been registered",
-    );
-    final ViewRasterizer rasterizer = rasterizers[view.viewId]!;
-    final RenderQueue renderQueue = rasterizer.queue;
-    final FrameTimingRecorder? recorder = FrameTimingRecorder.frameTimingsEnabled
-        ? FrameTimingRecorder()
-        : null;
-    if (renderQueue.current != null) {
-      // If a scene is already queued up, drop it and queue this one up instead
-      // so that the scene view always displays the most recently requested scene.
-      renderQueue.next?.completer.complete();
-      final Completer<void> completer = Completer<void>();
-      renderQueue.next = (scene: scene, completer: completer, recorder: recorder);
-      return completer.future;
-    }
-    final Completer<void> completer = Completer<void>();
-    renderQueue.current = (scene: scene, completer: completer, recorder: recorder);
-    unawaited(_kickRenderLoop(rasterizer));
-    return completer.future;
-  }
-
-  Future<void> _kickRenderLoop(ViewRasterizer rasterizer) async {
-    final RenderQueue renderQueue = rasterizer.queue;
-    final RenderRequest current = renderQueue.current!;
-    try {
-      await _renderScene(current.scene, rasterizer, current.recorder);
-      current.completer.complete();
-    } catch (error, stackTrace) {
-      current.completer.completeError(error, stackTrace);
-    }
-    renderQueue.current = renderQueue.next;
-    renderQueue.next = null;
-    if (renderQueue.current == null) {
-      return;
-    } else {
-      return _kickRenderLoop(rasterizer);
-    }
-  }
-
-  Future<void> _renderScene(
-    ui.Scene scene,
-    ViewRasterizer rasterizer,
-    FrameTimingRecorder? recorder,
-  ) async {
-    // "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.
-    //
-    // CanvasKit works differently from the HTML renderer in that in HTML
-    // we update the DOM in SceneBuilder.build, which is these function calls
-    // here are CanvasKit-only.
-    recorder?.recordBuildFinish();
-    recorder?.recordRasterStart();
-
-    await rasterizer.draw((scene as LayerScene).layerTree, null);
-    recorder?.recordRasterFinish();
-    recorder?.submitTimings();
-  }
-
   @override
   void clearFragmentProgramCache() {
     _programs.clear();
@@ -535,5 +470,14 @@ class CanvasKitRenderer extends Renderer {
   );
 
   @override
-  void dumpDebugInfo() {}
+  void dumpDebugInfo() {
+    int i = 0;
+    for (final viewRasterizer in rasterizers.values) {
+      final Map<String, dynamic>? debugJson = viewRasterizer.dumpDebugInfo();
+      if (debugJson != null) {
+        downloadDebugInfo('flutter-scene$i', debugJson);
+        i++;
+      }
+    }
+  }
 }

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

@@ -162,9 +162,8 @@ class FrameService {
     // In Flutter terminology "building a frame" consists of "beginning
     // frame" and "drawing frame".
     //
-    // We do not call `recordBuildFinish` from here because
-    // part of the rasterization process, particularly in the HTML
-    // renderer, takes place in the `SceneBuilder.build()`.
+    // We do not call `recordBuildFinish` from here because part of the
+    // rasterization process takes place in `SceneBuilder.build()`.
     FrameTimingRecorder.recordCurrentFrameBuildStart();
 
     // We have to convert high-resolution time to `int` so we can construct

engine/src/flutter/lib/web_ui/lib/src/engine/frame_service.dart

@@ -267,3 +267,14 @@ ui.Image scaleImageIfNeeded(
   image.dispose();
   return finalImage;
 }
+
+/// Thrown when the web engine fails to decode an image, either due to a
+/// network issue, corrupted image contents, or missing codec.
+class ImageCodecException implements Exception {
+  ImageCodecException(this._message);
+
+  final String _message;
+
+  @override
+  String toString() => 'ImageCodecException: $_message';
+}