refactor(ext/web): port ImageData to Rust with CPPGC/objectwrap (#33777)

## Summary

- Moves the `ImageData` class from a JS IIFE
(`ext/web/16_image_data.js`) into a CPPGC-backed Rust struct in
`ext/web/image_data.rs`, registered via `op2`'s `objects = [...]`.
- Mirrors the established pattern from the geometry interfaces
(`DOMRect`/`DOMPoint`/etc.): WebIDL-derived enums and dictionary, manual
`trace` over `v8::TracedReference`, and an ESM (`image_data.js`) that
wires up the custom inspect proxy and `webidl.configureInterface`.
- `runtime/js/98_global_scope_shared.js` now lazy-loads `ImageData`
(consistent with how `DOMRect` and friends are exposed).
- `ext/image/01_image.js` switches off the private `_data` / `_width` /
`_height` symbols and uses the public `width` / `height` / `data`
getters instead.
- Registers a new `DOMExceptionIndexSizeError` error builder so the Rust
constructor can throw the same `IndexSizeError` cases the JS
implementation did.

The two `ImageData` constructor overloads (`(sw, sh [, settings])` and
`(data, sw [, sh [, settings]])`) and every existing error path are
preserved. `Uint8ClampedArray` and `Float16Array` data are kept by
reference (no copy) via `v8::TracedReference<v8::Object>`.

## Test plan

- [x] `cargo build --bin deno`
- [x] `tools/format.js --check`
- [x] `tools/lint.js`
- [x] Smoke test the WPT-style cases from
`tests/unit/image_data_test.ts`
  (both overloads, default `srgb` / `rgba-unorm8`, custom `display-p3` /
  `rgba-float16`, and every `DOMException` error path).
- [x] `createImageBitmap(imageData)` (basic + crop) round-trips through
the new
  public `image.data` accessor in `ext/image/01_image.js`.
- [x] `tests/testdata/workers/image_data_worker.ts` (ImageData inside a
Worker).

---------

Co-authored-by: Leo Kettmeir <crowlkats@toaxl.com>

Author: crowlbot

ext/image/01_image.js

@@ -23,12 +23,10 @@ const {
   RangeError,
   ArrayPrototypeJoin,
 } = primordials;
-const {
-  _data,
-  _height,
-  _width,
-  ImageDataPrototype,
-} = core.loadExtScript("ext:deno_web/16_image_data.js");
+let _imageDataMod;
+const loadImageData = () =>
+  _imageDataMod ??
+    (_imageDataMod = core.loadExtScript("ext:deno_web/16_image_data.js"));
 
 webidl.converters["ImageOrientation"] = webidl.createEnumConverter(
   "ImageOrientation",
@@ -200,6 +198,7 @@ function createImageBitmap(
 
   // 3.
   const isBlob = ObjectPrototypeIsPrototypeOf(BlobPrototype, image);
+  const { ImageDataPrototype } = loadImageData();
   const isImageData = ObjectPrototypeIsPrototypeOf(ImageDataPrototype, image);
   const isImageBitmap = ObjectPrototypeIsPrototypeOf(
     ImageBitmapPrototype,
@@ -257,10 +256,10 @@ docs: https://mimesniff.spec.whatwg.org/#image-type-pattern-matching-algorithm\n
         );
       }
     } else if (isImageData) {
-      width = image[_width];
-      height = image[_height];
+      width = image.width;
+      height = image.height;
       imageBitmapSource = 1;
-      let data = image[_data];
+      let data = image.data;
       switch (TypedArrayPrototypeGetSymbolToStringTag(data)) {
         case "Float16Array":
           data = float16ToUnorm8(data);

ext/web/16_image_data.js

@@ -2,267 +2,47 @@
 
 (function () {
 const { core, primordials } = __bootstrap;
-const webidl = core.loadExtScript("ext:deno_webidl/00_webidl.js");
-const { DOMException } = core.loadExtScript("ext:deno_web/01_dom_exception.js");
-const { createFilteredInspectProxy } = core.loadExtScript(
-  "ext:deno_web/01_console.js",
-);
+const { ImageData } = core.ops;
 const {
+  ObjectDefineProperty,
   ObjectPrototypeIsPrototypeOf,
-  Symbol,
   SymbolFor,
-  TypedArrayPrototypeGetLength,
-  TypedArrayPrototypeGetSymbolToStringTag,
-  Uint8ClampedArray,
 } = primordials;
 
-webidl.converters["PredefinedColorSpace"] = webidl.createEnumConverter(
-  "PredefinedColorSpace",
-  [
-    "srgb",
-    "display-p3",
-  ],
+const webidl = core.loadExtScript("ext:deno_webidl/00_webidl.js");
+const { createFilteredInspectProxy } = core.loadExtScript(
+  "ext:deno_web/01_console.js",
 );
 
-webidl.converters["ImageDataPixelFormat"] = webidl.createEnumConverter(
-  "ImageDataPixelFormat",
-  ["rgba-unorm8", "rgba-float16"],
-);
+const ImageDataPrototype = ImageData.prototype;
 
-webidl.converters["ImageDataSettings"] = webidl.createDictionaryConverter(
-  "ImageDataSettings",
-  [
-    { key: "colorSpace", converter: webidl.converters["PredefinedColorSpace"] },
-    {
-      key: "pixelFormat",
-      converter: webidl.converters["ImageDataPixelFormat"],
-      defaultValue: "rgba-unorm8",
+ObjectDefineProperty(
+  ImageDataPrototype,
+  SymbolFor("Deno.privateCustomInspect"),
+  {
+    __proto__: null,
+    value: function customInspect(inspect, inspectOptions) {
+      return inspect(
+        createFilteredInspectProxy({
+          object: this,
+          evaluate: ObjectPrototypeIsPrototypeOf(ImageDataPrototype, this),
+          keys: [
+            "data",
+            "width",
+            "height",
+            "pixelFormat",
+            "colorSpace",
+          ],
+        }),
+        inspectOptions,
+      );
     },
-  ],
+    enumerable: false,
+    writable: true,
+    configurable: true,
+  },
 );
+webidl.configureInterface(ImageData);
 
-const _data = Symbol("[[data]]");
-const _width = Symbol("[[width]]");
-const _height = Symbol("[[height]]");
-class ImageData {
-  /** @type {number} */
-  [_width];
-  /** @type {number} */
-  [_height];
-  /** @type {ImageDataArray} */
-  [_data];
-  /** @type {ImageDataPixelFormat} */
-  #pixelFormat;
-  /** @type {PredefinedColorSpace} */
-  #colorSpace;
-
-  constructor(arg0, arg1, arg2 = undefined, arg3 = undefined) {
-    webidl.requiredArguments(
-      arguments.length,
-      2,
-      'Failed to construct "ImageData"',
-    );
-    this[webidl.brand] = webidl.brand;
-
-    let sourceWidth;
-    let sourceHeight;
-    let data;
-    let settings;
-    const prefix = "Failed to construct 'ImageData'";
-    const tag = TypedArrayPrototypeGetSymbolToStringTag(arg0);
-
-    // Overload: new ImageData(data, sw [, sh [, settings ] ])
-    if (
-      arguments.length > 3 ||
-      tag === "Uint8ClampedArray" || tag === "Float16Array"
-    ) {
-      data = webidl.converters.ArrayBufferView(arg0, prefix, "Argument 1");
-      sourceWidth = webidl.converters["unsigned long"](
-        arg1,
-        prefix,
-        "Argument 2",
-      );
-      const dataLength = TypedArrayPrototypeGetLength(data);
-
-      if (arg2 !== undefined) {
-        sourceHeight = webidl.converters["unsigned long"](
-          arg2,
-          prefix,
-          "Argument 3",
-        );
-      }
-
-      settings = webidl.converters["ImageDataSettings"](
-        arg3,
-        prefix,
-        "Argument 4",
-      );
-
-      if (dataLength === 0) {
-        throw new DOMException(
-          "Failed to construct 'ImageData': the input data has zero elements",
-          "InvalidStateError",
-        );
-      }
-
-      if (dataLength % 4 !== 0) {
-        throw new DOMException(
-          `Failed to construct 'ImageData': the input data length is not a multiple of 4, received ${dataLength}`,
-          "InvalidStateError",
-        );
-      }
-
-      if (sourceWidth < 1) {
-        throw new DOMException(
-          "Failed to construct 'ImageData': the source width is zero or not a number",
-          "IndexSizeError",
-        );
-      }
-
-      if (sourceHeight !== undefined && sourceHeight < 1) {
-        throw new DOMException(
-          "Failed to construct 'ImageData': the source height is zero or not a number",
-          "IndexSizeError",
-        );
-      }
-
-      if (dataLength / 4 % sourceWidth !== 0) {
-        throw new DOMException(
-          "Failed to construct 'ImageData': the input data length is not a multiple of (4 * width)",
-          "IndexSizeError",
-        );
-      }
-
-      if (
-        sourceHeight !== undefined &&
-        dataLength / 4 / sourceWidth !== sourceHeight
-      ) {
-        throw new DOMException(
-          "Failed to construct 'ImageData': the input data length is not equal to (4 * width * height)",
-          "IndexSizeError",
-        );
-      }
-
-      switch (tag) {
-        case "Uint8ClampedArray":
-          if (settings.pixelFormat !== "rgba-unorm8") {
-            throw new DOMException(
-              "Failed to construct 'ImageData': Uint8ClampedArray must use rgba-unorm8 pixelFormat.",
-              "InvalidStateError",
-            );
-          }
-          break;
-        case "Float16Array":
-          if (settings.pixelFormat !== "rgba-float16") {
-            throw new DOMException(
-              "Failed to construct 'ImageData': Float16Array must use rgba-float16 pixelFormat.",
-              "InvalidStateError",
-            );
-          }
-          break;
-      }
-
-      this.#pixelFormat = settings.pixelFormat;
-      this.#colorSpace = settings.colorSpace ?? "srgb";
-      this[_width] = sourceWidth;
-      this[_height] = dataLength / 4 / sourceWidth;
-      this[_data] = data;
-      return;
-    }
-
-    // Overload: new ImageData(sw, sh [, settings])
-    sourceWidth = webidl.converters["unsigned long"](
-      arg0,
-      prefix,
-      "Argument 1",
-    );
-    sourceHeight = webidl.converters["unsigned long"](
-      arg1,
-      prefix,
-      "Argument 2",
-    );
-
-    settings = webidl.converters["ImageDataSettings"](
-      arg2,
-      prefix,
-      "Argument 3",
-    );
-
-    if (sourceWidth < 1) {
-      throw new DOMException(
-        "Failed to construct 'ImageData': the source width is zero or not a number",
-        "IndexSizeError",
-      );
-    }
-
-    if (sourceHeight < 1) {
-      throw new DOMException(
-        "Failed to construct 'ImageData': the source height is zero or not a number",
-        "IndexSizeError",
-      );
-    }
-
-    switch (settings.pixelFormat) {
-      case "rgba-unorm8":
-        data = new Uint8ClampedArray(sourceWidth * sourceHeight * 4);
-        break;
-      case "rgba-float16":
-        // TODO(0f-0b): add Float16Array to primordials
-        data = new Float16Array(sourceWidth * sourceHeight * 4);
-        break;
-    }
-
-    this.#pixelFormat = settings.pixelFormat;
-    this.#colorSpace = settings.colorSpace ?? "srgb";
-    this[_width] = sourceWidth;
-    this[_height] = sourceHeight;
-    this[_data] = data;
-  }
-
-  get width() {
-    webidl.assertBranded(this, ImageDataPrototype);
-    return this[_width];
-  }
-
-  get height() {
-    webidl.assertBranded(this, ImageDataPrototype);
-    return this[_height];
-  }
-
-  get data() {
-    webidl.assertBranded(this, ImageDataPrototype);
-    return this[_data];
-  }
-
-  get pixelFormat() {
-    webidl.assertBranded(this, ImageDataPrototype);
-    return this.#pixelFormat;
-  }
-
-  get colorSpace() {
-    webidl.assertBranded(this, ImageDataPrototype);
-    return this.#colorSpace;
-  }
-
-  [SymbolFor("Deno.privateCustomInspect")](inspect, inspectOptions) {
-    return inspect(
-      createFilteredInspectProxy({
-        object: this,
-        evaluate: ObjectPrototypeIsPrototypeOf(ImageDataPrototype, this),
-        keys: [
-          "data",
-          "width",
-          "height",
-          "pixelFormat",
-          "colorSpace",
-        ],
-      }),
-      inspectOptions,
-    );
-  }
-}
-
-const ImageDataPrototype = ImageData.prototype;
-
-return { _data, _height, _width, ImageData, ImageDataPrototype };
+return { ImageData, ImageDataPrototype };
 })();