Instrument Image and Picture for leak tracking. (#35274)

Author: polina-c

lib/ui/painting.dart

@@ -1625,6 +1625,9 @@ enum PixelFormat {
   bgra8888,
 }
 
+/// Signature for [Image] lifecycle events.
+typedef ImageEventCallback = void Function(Image image);
+
 /// Opaque handle to raw decoded image data (pixels).
 ///
 /// To obtain an [Image] object, use the [ImageDescriptor] API.
@@ -1656,12 +1659,27 @@ class Image {
       return true;
     }());
     _image._handles.add(this);
+    onCreate?.call(this);
   }
 
   // C++ unit tests access this.
   @pragma('vm:entry-point')
   final _Image _image;
 
+  /// A callback that is invoked to report an image creation.
+  ///
+  /// It's preferred to use [MemoryAllocations] in flutter/foundation.dart
+  /// than to use [onCreate] directly because [MemoryAllocations]
+  /// allows multiple callbacks.
+  static ImageEventCallback? onCreate;
+
+  /// A callback that is invoked to report the image disposal.
+  ///
+  /// It's preferred to use [MemoryAllocations] in flutter/foundation.dart
+  /// than to use [onDispose] directly because [MemoryAllocations]
+  /// allows multiple callbacks.
+  static ImageEventCallback? onDispose;
+
   StackTrace? _debugStack;
 
   /// The number of image pixels along the image's horizontal axis.
@@ -1682,6 +1700,7 @@ class Image {
   /// useful when trying to determine what parts of the program are keeping an
   /// image resident in memory.
   void dispose() {
+    onDispose?.call(this);
     assert(!_disposed && !_image._disposed);
     assert(_image._handles.contains(this));
     _disposed = true;
@@ -5745,6 +5764,9 @@ class Canvas extends NativeFieldWrapperClass1 {
   external void _drawShadow(Path path, int color, double elevation, bool transparentOccluder);
 }
 
+/// Signature for [Picture] lifecycle events.
+typedef PictureEventCallback = void Function(Picture picture);
+
 /// An object representing a sequence of recorded graphical operations.
 ///
 /// To create a [Picture], use a [PictureRecorder].
@@ -5761,6 +5783,20 @@ class Picture extends NativeFieldWrapperClass1 {
   @pragma('vm:entry-point')
   Picture._();
 
+  /// A callback that is invoked to report a picture creation.
+  ///
+  /// It's preferred to use [MemoryAllocations] in flutter/foundation.dart
+  /// than to use [onCreate] directly because [MemoryAllocations]
+  /// allows multiple callbacks.
+  static PictureEventCallback? onCreate;
+
+  /// A callback that is invoked to report the picture disposal.
+  ///
+  /// It's preferred to use [MemoryAllocations] in flutter/foundation.dart
+  /// than to use [onDispose] directly because [MemoryAllocations]
+  /// allows multiple callbacks.
+  static PictureEventCallback? onDispose;
+
   /// Creates an image from this picture.
   ///
   /// The returned image will be `width` pixels wide and `height` pixels high.
@@ -5824,6 +5860,7 @@ class Picture extends NativeFieldWrapperClass1 {
       _disposed = true;
       return true;
     }());
+    onDispose?.call(this);
     _dispose();
   }
 
@@ -5890,6 +5927,9 @@ class PictureRecorder extends NativeFieldWrapperClass1 {
     _endRecording(picture);
     _canvas!._recorder = null;
     _canvas = null;
+    // We invoke the handler here, not in the Picture constructor, because we want
+    // [picture.approximateBytesUsed] to be available for the handler.
+    Picture.onCreate?.call(picture);
     return picture;
   }
 

lib/web_ui/lib/canvas.dart

@@ -125,7 +125,11 @@ abstract class Canvas {
   );
 }
 
+typedef PictureEventCallback = void Function(Picture picture);
+
 abstract class Picture {
+  static PictureEventCallback? onCreate;
+  static PictureEventCallback? onDispose;
   Future<Image> toImage(int width, int height);
   Image toImageSync(int width, int height);
   void dispose();

lib/web_ui/lib/painting.dart

@@ -337,7 +337,12 @@ abstract class Gradient extends Shader {
     matrix4 != null ? engine.toMatrix32(matrix4) : null);
 }
 
+typedef ImageEventCallback = void Function(Image image);
+
 abstract class Image {
+  static ImageEventCallback? onCreate;
+  static ImageEventCallback? onDispose;
+
   int get width;
   int get height;
   Future<ByteData?> toByteData({ImageByteFormat format = ImageByteFormat.rawRgba});

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

@@ -149,9 +149,7 @@ Future<Uint8List> fetchImage(
 /// A [ui.Image] backed by an `SkImage` from Skia.
 class CkImage implements ui.Image, StackTraceDebugger {
   CkImage(SkImage skImage, { this.videoFrame }) {
-    if (assertionsEnabled) {
-      _debugStackTrace = StackTrace.current;
-    }
+    _init();
     if (browserSupportsFinalizationRegistry) {
       box = SkiaObjectBox<CkImage, SkImage>(this, skImage);
     } else {
@@ -200,10 +198,15 @@ class CkImage implements ui.Image, StackTraceDebugger {
   }
 
   CkImage.cloneOf(this.box) {
+    _init();
+    box.ref(this);
+  }
+
+  void _init() {
     if (assertionsEnabled) {
       _debugStackTrace = StackTrace.current;
     }
-    box.ref(this);
+    ui.Image.onCreate?.call(this);
   }
 
   @override
@@ -241,6 +244,7 @@ class CkImage implements ui.Image, StackTraceDebugger {
       !_disposed,
       'Cannot dispose an image that has already been disposed.',
     );
+    ui.Image.onDispose?.call(this);
     _disposed = true;
     box.unref(this);
   }

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

@@ -81,6 +81,7 @@ class CkPicture extends ManagedSkiaObject<SkPicture> implements ui.Picture {
       _debugDisposalStackTrace = StackTrace.current;
       return true;
     }());
+    ui.Picture.onDispose?.call(this);
     if (Instrumentation.enabled) {
       Instrumentation.instance.incrementCounter('Picture disposed');
     }

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

@@ -38,7 +38,12 @@ class CkPictureRecorder implements ui.PictureRecorder {
     final SkPicture skPicture = recorder.finishRecordingAsPicture();
     recorder.delete();
     _skRecorder = null;
-    return CkPicture(skPicture, _cullRect, _recordingCanvas!.pictureSnapshot);
+    final CkPicture result =
+      CkPicture(skPicture, _cullRect, _recordingCanvas!.pictureSnapshot);
+    // We invoke the handler here, not in the picture constructor, because we want
+    // [result.approximateBytesUsed] to be available for the handler.
+    ui.Picture.onCreate?.call(result);
+    return result;
   }
 
   @override

lib/web_ui/lib/src/engine/embedder.dart

@@ -412,9 +412,7 @@ class FlutterViewEmbedder {
   /// Called immediately after browser window language change.
   void _languageDidChange(DomEvent event) {
     EnginePlatformDispatcher.instance.updateLocales();
-    if (ui.window.onLocaleChanged != null) {
-      ui.window.onLocaleChanged!();
-    }
+    ui.window.onLocaleChanged?.call();
   }
 
   static const String orientationLockTypeAny = 'any';

lib/web_ui/lib/src/engine/html_image_codec.dart

@@ -138,14 +138,17 @@ class SingleFrameInfo implements ui.FrameInfo {
 }
 
 class HtmlImage implements ui.Image {
-  HtmlImage(this.imgElement, this.width, this.height);
+  HtmlImage(this.imgElement, this.width, this.height) {
+    ui.Image.onCreate?.call(this);
+  }
 
   final DomHTMLImageElement imgElement;
   bool _requiresClone = false;
 
   bool _disposed = false;
   @override
   void dispose() {
+    ui.Image.onDispose?.call(this);
     // Do nothing. The codec that owns this image should take care of
     // releasing the object url.
     if (assertionsEnabled) {

lib/web_ui/lib/src/engine/picture.dart

@@ -40,7 +40,11 @@ class EnginePictureRecorder implements ui.PictureRecorder {
     }
     _isRecording = false;
     _canvas!.endRecording();
-    return EnginePicture(_canvas, cullRect);
+    final EnginePicture result = EnginePicture(_canvas, cullRect);
+    // We invoke the handler here, not in the Picture constructor, because we want
+    // [result.approximateBytesUsed] to be available for the handler.
+    ui.Picture.onCreate?.call(result);
+    return result;
   }
 }
 
@@ -97,6 +101,7 @@ class EnginePicture implements ui.Picture {
 
   @override
   void dispose() {
+    ui.Picture.onDispose?.call(this);
     _disposed = true;
   }
 

lib/web_ui/test/canvaskit/image_test.dart

@@ -24,6 +24,50 @@ void testMain() {
     image.dispose();
   // TODO(hterkelsen): https://github.com/flutter/flutter/issues/109265
   }, skip: isFirefox);
+
+  test('Image constructor invokes onCreate once', () async {
+    int onCreateInvokedCount = 0;
+    ui.Image? createdImage;
+    ui.Image.onCreate = (ui.Image image) {
+      onCreateInvokedCount++;
+      createdImage = image;
+    };
+
+    final ui.Image  image1 = await _createImage();
+
+    expect(onCreateInvokedCount, 1);
+    expect(createdImage, image1);
+
+    final ui.Image image2 = await _createImage();
+
+    expect(onCreateInvokedCount, 2);
+    expect(createdImage, image2);
+
+    ui.Image.onCreate = null;
+  // TODO(hterkelsen): https://github.com/flutter/flutter/issues/109265
+  }, skip: isFirefox);
+
+  test('dispose() invokes onDispose once', () async {
+    int onDisposeInvokedCount = 0;
+    ui.Image? disposedImage;
+    ui.Image.onDispose = (ui.Image image) {
+      onDisposeInvokedCount++;
+      disposedImage = image;
+    };
+
+    final ui.Image image1 = await _createImage()..dispose();
+
+    expect(onDisposeInvokedCount, 1);
+    expect(disposedImage, image1);
+
+    final ui.Image image2 = await _createImage()..dispose();
+
+    expect(onDisposeInvokedCount, 2);
+    expect(disposedImage, image2);
+
+    ui.Image.onDispose = null;
+  // TODO(hterkelsen): https://github.com/flutter/flutter/issues/109265
+  }, skip: isFirefox);
 }
 
 Future<ui.Image> _createImage() => _createPicture().toImage(10, 10);