Address comments.

lib/web_ui/lib/platform_dispatcher.dart

@@ -158,6 +158,106 @@ abstract class PlatformDispatcher {
   double scaleFontSize(double unscaledFontSize);
 }
 
+enum FramePhase {
+  vsyncStart,
+  buildStart,
+  buildFinish,
+  rasterStart,
+  rasterFinish,
+  rasterFinishWallTime,
+}
+
+enum _FrameTimingInfo {
+  layerCacheCount,
+  layerCacheBytes,
+  pictureCacheCount,
+  pictureCacheBytes,
+  frameNumber,
+}
+
+class FrameTiming {
+  factory FrameTiming({
+    required int vsyncStart,
+    required int buildStart,
+    required int buildFinish,
+    required int rasterStart,
+    required int rasterFinish,
+    required int rasterFinishWallTime,
+    int layerCacheCount = 0,
+    int layerCacheBytes = 0,
+    int pictureCacheCount = 0,
+    int pictureCacheBytes = 0,
+    int frameNumber = 1,
+  }) {
+    return FrameTiming._(<int>[
+      vsyncStart,
+      buildStart,
+      buildFinish,
+      rasterStart,
+      rasterFinish,
+      rasterFinishWallTime,
+      layerCacheCount,
+      layerCacheBytes,
+      pictureCacheCount,
+      pictureCacheBytes,
+      frameNumber,
+    ]);
+  }
+
+  FrameTiming._(this._data)
+      : assert(_data.length == _dataLength);
+
+  static final int _dataLength = FramePhase.values.length + _FrameTimingInfo.values.length;
+
+  int timestampInMicroseconds(FramePhase phase) => _data[phase.index];
+
+  Duration _rawDuration(FramePhase phase) => Duration(microseconds: _data[phase.index]);
+
+  int _rawInfo(_FrameTimingInfo info) => _data[FramePhase.values.length + info.index];
+
+  Duration get buildDuration =>
+      _rawDuration(FramePhase.buildFinish) - _rawDuration(FramePhase.buildStart);
+
+  Duration get rasterDuration =>
+      _rawDuration(FramePhase.rasterFinish) - _rawDuration(FramePhase.rasterStart);
+
+  Duration get vsyncOverhead => _rawDuration(FramePhase.buildStart) - _rawDuration(FramePhase.vsyncStart);
+
+  Duration get totalSpan =>
+      _rawDuration(FramePhase.rasterFinish) - _rawDuration(FramePhase.vsyncStart);
+
+  int get layerCacheCount => _rawInfo(_FrameTimingInfo.layerCacheCount);
+
+  int get layerCacheBytes => _rawInfo(_FrameTimingInfo.layerCacheBytes);
+
+  double get layerCacheMegabytes => layerCacheBytes / 1024.0 / 1024.0;
+
+  int get pictureCacheCount => _rawInfo(_FrameTimingInfo.pictureCacheCount);
+
+  int get pictureCacheBytes => _rawInfo(_FrameTimingInfo.pictureCacheBytes);
+
+  double get pictureCacheMegabytes => pictureCacheBytes / 1024.0 / 1024.0;
+
+  int get frameNumber => _data.last;
+
+  final List<int> _data;  // some elements in microseconds, some in bytes, some are counts
+
+  String _formatMS(Duration duration) => '${duration.inMicroseconds * 0.001}ms';
+
+  @override
+  String toString() {
+    return '$runtimeType(buildDuration: ${_formatMS(buildDuration)}, '
+        'rasterDuration: ${_formatMS(rasterDuration)}, '
+        'vsyncOverhead: ${_formatMS(vsyncOverhead)}, '
+        'totalSpan: ${_formatMS(totalSpan)}, '
+        'layerCacheCount: $layerCacheCount, '
+        'layerCacheBytes: $layerCacheBytes, '
+        'pictureCacheCount: $pictureCacheCount, '
+        'pictureCacheBytes: $pictureCacheBytes, '
+        'frameNumber: ${_data.last})';
+  }
+}
+
 enum AppLifecycleState {
   detached,
   resumed,

lib/web_ui/lib/src/engine/dom.dart

@@ -1487,7 +1487,7 @@ class DomCanvasRenderingContextBitmapRenderer {}
 
 extension DomCanvasRenderingContextBitmapRendererExtension
     on DomCanvasRenderingContextBitmapRenderer {
-  external void transferFromImageBitmap(DomImageBitmap bitmap);
+  external void transferFromImageBitmap(DomImageBitmap? bitmap);
 }
 
 @JS('ImageData')

lib/web_ui/lib/src/engine/skwasm/skwasm_impl/image.dart

@@ -64,7 +64,7 @@ class SkwasmImage extends SkwasmObjectWrapper<RawImage> implements ui.Image {
       final DomImageBitmap bitmap =
         (await (renderer as SkwasmRenderer).surface.renderPictures(
           <SkwasmPicture>[recorder.endRecording() as SkwasmPicture],
-        )).imageBitmaps.first;
+        )).imageBitmaps.single;
       final DomOffscreenCanvas offscreenCanvas =
         createDomOffscreenCanvas(bitmap.width.toDartInt, bitmap.height.toDartInt);
       final DomCanvasRenderingContextBitmapRenderer context =
@@ -75,8 +75,7 @@ class SkwasmImage extends SkwasmObjectWrapper<RawImage> implements ui.Image {
 
       // Zero out the contents of the canvas so that resources can be reclaimed
       // by the browser.
-      offscreenCanvas.width = 0;
-      offscreenCanvas.height = 0;
+      context.transferFromImageBitmap(null);
       return ByteData.view(arrayBuffer.toDart);
     } else {
       return (renderer as SkwasmRenderer).surface.rasterizeImage(this, format);

lib/web_ui/lib/src/engine/skwasm/skwasm_impl/surface.dart

@@ -18,8 +18,8 @@ import 'package:ui/ui.dart' as ui;
 class RasterResult {}
 
 extension RasterResultExtension on RasterResult {
-  external JSNumber get rasterStart;
-  external JSNumber get rasterEnd;
+  external JSNumber get rasterStartMilliseconds;
+  external JSNumber get rasterEndMilliseconds;
   external JSArray<JSAny> get imageBitmaps;
 }
 
@@ -100,8 +100,8 @@ class SkwasmSurface {
       final RasterResult rasterResult = (await SkwasmCallbackHandler.instance.registerCallback(callbackId)) as RasterResult;
       final RenderResult result = (
         imageBitmaps: rasterResult.imageBitmaps.toDart.cast<DomImageBitmap>(),
-        rasterStartMicros: (rasterResult.rasterStart.toDartDouble * 1000).toInt(),
-        rasterEndMicros: (rasterResult.rasterEnd.toDartDouble * 1000).toInt(),
+        rasterStartMicros: (rasterResult.rasterStartMilliseconds.toDartDouble * 1000).toInt(),
+        rasterEndMicros: (rasterResult.rasterEndMilliseconds.toDartDouble * 1000).toInt(),
       );
       return result;
     });

lib/web_ui/lib/ui.dart

@@ -20,7 +20,6 @@ part 'annotations.dart';
 part 'canvas.dart';
 part 'channel_buffers.dart';
 part 'compositing.dart';
-part 'frame_timings.dart';
 part 'geometry.dart';
 part 'hash_codes.dart';
 part 'initialization.dart';

lib/web_ui/skwasm/library_skwasm_support.js

@@ -35,8 +35,8 @@ mergeInto(LibraryManager.library, {
               data.surface,
               data.callbackId, {
                 "imageBitmaps": data.imageBitmaps,
-                "rasterStart": data.rasterStart,
-                "rasterEnd": data.rasterEnd,
+                "rasterStartMilliseconds": data.rasterStart,
+                "rasterEndMilliseconds": data.rasterEnd,
               },
             );
             return;

lib/web_ui/skwasm/surface.cpp

@@ -49,7 +49,7 @@ uint32_t Surface::renderPictures(SkPicture** pictures, int count) {
   }
 
   // Releasing picturePointers here and will recreate the unique_ptr on the
-  // other thread See skwasm_renderPicturesOnWorker
+  // other thread See surface_renderPicturesOnWorker
   skwasm_dispatchRenderPictures(_thread, this, picturePointers.release(), count,
                                 callbackId);
   return callbackId;