chore: support typed arrays in indexeddb #34949

pavelfeldman · 2025-02-28T15:45:52Z

Sounds like we need a bunch of page.evaluate tests for this.

The tests in page-evaluate.spec.ts all go through the protocol serializer, which also doesn't yet have support. Do we test the server-side of page.evaluate in isolation?

I was planning to add support to the protocol serializer in a follow-up, happy to add page.evaluate tests in there.

Landing this w/o coverage does not feel right, probably supporting the protocol serializer and testing e2e is the right approach.

I've added support to the protocol serializer and a bunch of page.evaluate tests.

dgozman · 2025-02-28T10:22:24Z

Perhaps instead of Array.from() use a for loop? This should be supported everywhere.

Tried that, but doesn't work. It looks like any kind of iteration is forbidden:

https://searchfox.org/mozilla-central/source/js/xpconnect/wrappers/XrayWrapper.cpp#576

What exactly does this mean? You should be able to iterate arrays and use Array.from on them?

But not inside the utility world, apparently 🤷

pavelfeldman · 2025-02-28T15:42:43Z

I'd start with looking up constructor.name in a set instead of iterating

that won't work on Firefox, see impl of isTypedArray

It does work for me, are you saying this is also due to utility worlds? Something is fishy here. Do we have a bug in the way we initialize utility context? It needs to be proper JS context.

as discussed in the meeting, firefox is just off here. let's not fix in this PR.

-Original file line number
+Diff line change
@@ Expand Up @@
     Set to `true` to include [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) in the storage state snapshot.
     If your application uses IndexedDB to store authentication tokens, like Firebase Authentication, enable this.
-    :::note
-    IndexedDBs with typed arrays are currently not supported.
-    :::
     ## property: BrowserContext.tracing
     * since: v1.12
     - type: <[Tracing]>
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -9274,9 +9274,6 @@ export interface BrowserContext { @@
          * Set to `true` to include [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) in the storage
          * state snapshot. If your application uses IndexedDB to store authentication tokens, like Firebase Authentication,
          * enable this.
-         *
-         * **NOTE** IndexedDBs with typed arrays are currently not supported.
-         *
          */
         indexedDB?: boolean;
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
       }
       if (value.r !== undefined)
         return new RegExp(value.r.p, value.r.f);
+      if (value.ta !== undefined) {
+        const ctor = typedArrayKindToConstructor[value.ta.k] as any;
+        return new ctor(value.ta.b.buffer, value.ta.b.byteOffset, value.ta.b.length);
+      }
       if (value.a !== undefined) {
         const result: any[] = [];
@@ Expand Down Expand Up @@
       if (isRegExp(value))
         return { r: { p: value.source, f: value.flags } };
+      const typedArrayKind = constructorToTypedArrayKind.get(value.constructor);
+      if (typedArrayKind)
+        return { ta: { b: Buffer.from(value.buffer, value.byteOffset, value.length), k: typedArrayKind } };
       const id = visitorInfo.visited.get(value);
       if (id)
         return { ref: id };
@@ Expand Down Expand Up / @@ -178,3 +186,20 @@ function isError(obj: any): obj is Error { @@
       const proto = obj ? Object.getPrototypeOf(obj) : null;
       return obj instanceof Error || proto?.name === 'Error' || (proto && isError(proto));
     }
+    type TypedArrayKind = NonNullable<SerializedValue['ta']>['k'];
+    const typedArrayKindToConstructor: Record<TypedArrayKind, Function> = {
+      i8: Int8Array,
+      ui8: Uint8Array,
+      ui8c: Uint8ClampedArray,
+      i16: Int16Array,
+      ui16: Uint16Array,
+      i32: Int32Array,
+      ui32: Uint32Array,
+      f32: Float32Array,
+      f64: Float64Array,
+      bi64: BigInt64Array,
+      bui64: BigUint64Array,
+    };
+    const constructorToTypedArrayKind: Map<Function, TypedArrayKind> = new Map(Object.entries(typedArrayKindToConstructor).map(([k, v]) => [v, k as TypedArrayKind]));

-Original file line number
+Diff line change
@@ Expand Up / @@ -58,6 +58,10 @@ scheme.SerializedValue = tObject({ @@
       d: tOptional(tString),
       u: tOptional(tString),
       bi: tOptional(tString),
+      ta: tOptional(tObject({
+        b: tBinary,
+        k: tEnum(['i8', 'ui8', 'ui8c', 'i16', 'ui16', 'i32', 'ui32', 'f32', 'f64', 'bi64', 'bui64']),
+      })),
       e: tOptional(tObject({
         m: tString,
         n: tString,
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,8 @@ @@
     import type { Builtins } from './builtins';
+    type TypedArrayKind = 'i8' | 'ui8' | 'ui8c' | 'i16' | 'ui16' | 'i32' | 'ui32' | 'f32' | 'f64' | 'bi64' | 'bui64';
     export type SerializedValue =
         undefined | boolean | number | string |
         { v: 'null' | 'undefined' | 'NaN' | 'Infinity' | '-Infinity' | '-0' } |
@@ Expand All / @@ -27,7 +29,8 @@ export type SerializedValue = @@
         { a: SerializedValue[], id: number } |
         { o: { k: string, v: SerializedValue }[], id: number } |
         { ref: number } |
-        { h: number };
+        { h: number } |
+        { ta: { b: string, k: TypedArrayKind } };
     type HandleOrValue = { h: number } | { fallThrough: any };
@@ Expand Down Expand Up / @@ -70,6 +73,48 @@ export function source(builtins: Builtins) { @@
         }
       }
+      function isTypedArray(obj: any, constructor: Function): boolean {
+        try {
+          return obj instanceof constructor || Object.prototype.toString.call(obj) === `[object ${constructor.name}]`;
+        } catch (error) {
+          return false;
+        }
+      }
+      const typedArrayConstructors: Record<TypedArrayKind, Function> = {
+        i8: Int8Array,
+        ui8: Uint8Array,
+        ui8c: Uint8ClampedArray,
+        i16: Int16Array,
+        ui16: Uint16Array,
+        i32: Int32Array,
+        ui32: Uint32Array,
+        // TODO: add Float16Array once it's in baseline
+        f32: Float32Array,
+        f64: Float64Array,
+        bi64: BigInt64Array,
+        bui64: BigUint64Array,
+      };
+      function typedArrayToBase64(array: any) {
+        /**
+         * Firefox does not support iterating over typed arrays, so we use `.toBase64`.
+         * Error: 'Accessing TypedArray data over Xrays is slow, and forbidden in order to encourage performant code. To copy TypedArrays across origin boundaries, consider using Components.utils.cloneInto().'
+         */
+        if ('toBase64' in array)
+          return array.toBase64();
+        const binary = Array.from(new Uint8Array(array.buffer, array.byteOffset, array.byteLength)).map(b => String.fromCharCode(b)).join('');
+        return btoa(binary);
+      }
+      function base64ToTypedArray(base64: string, TypedArrayConstructor: any) {
+        const binary = atob(base64);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++)
+          bytes[i] = binary.charCodeAt(i);
+        return new TypedArrayConstructor(bytes.buffer);
+      }
       function parseEvaluationResultValue(value: SerializedValue, handles: any[] = [], refs: Builtins.Map<number, object> = new builtins.Map()): any {
         if (Object.is(value, undefined))
           return undefined;
@@ Expand Down Expand Up / @@ -121,6 +166,8 @@ export function source(builtins: Builtins) { @@
           }
           if ('h' in value)
             return handles[value.h];
+          if ('ta' in value)
+            return base64ToTypedArray(value.ta.b, typedArrayConstructors[value.ta.k]);
         }
         return value;
       }
@@ Expand Down Expand Up / @@ -191,6 +238,10 @@ export function source(builtins: Builtins) { @@
           return { u: value.toJSON() };
         if (isRegExp(value))
           return { r: { p: value.source, f: value.flags } };
+        for (const [k, ctor] of Object.entries(typedArrayConstructors) as [TypedArrayKind, Function][]) {
+          if (isTypedArray(value, ctor))
+            return { ta: { b: typedArrayToBase64(value), k } };
+        }
         const id = visitorInfo.visited.get(value);
         if (id)
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: support typed arrays in indexeddb #34949

Uh oh!

Diff view

Diff view

There are no files selected for viewing

pavelfeldman Feb 28, 2025

Uh oh!

Skn0tt Mar 3, 2025

Uh oh!

pavelfeldman Mar 25, 2025

Uh oh!

Skn0tt Mar 26, 2025

Uh oh!

dgozman Feb 28, 2025

Uh oh!

Skn0tt Feb 28, 2025

Uh oh!

pavelfeldman Feb 28, 2025

Uh oh!

Skn0tt Mar 3, 2025

Uh oh!

pavelfeldman Feb 28, 2025

Uh oh!

Skn0tt Mar 3, 2025

Uh oh!

pavelfeldman Mar 4, 2025

Uh oh!

Skn0tt Mar 21, 2025

Uh oh!

-Original file line number
+Diff line change
@@ Expand Up / @@ -180,6 +180,10 @@ export type SerializedValue = { @@
       d?: string,
       u?: string,
       bi?: string,
+      ta?: {
+        b: Binary,
+        k: 'i8' | 'ui8' | 'ui8c' | 'i16' | 'ui16' | 'i32' | 'ui32' | 'f32' | 'f64' | 'bi64' | 'bui64',
+      },
       e?: {
         m: string,
         n: string,
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -82,6 +82,25 @@ SerializedValue: @@
         u: string?
         # String representation of BigInt.
         bi: string?
+        # Typed array.
+        ta:
+          type: object?
+          properties:
+            b: binary
+            k:
+              type: enum
+              literals:
+              - i8
+              - ui8
+              - ui8c
+              - i16
+              - ui16
+              - i32
+              - ui32
+              - f32
+              - f64
+              - bi64
+              - bui64
         # Serialized Error object.
         e:
           type: object?
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
                 .put({ name: 'foo', date: new Date(0), null: null });
             transaction
                 .objectStore('store2')
-                .put('bar', 'foo');
+                .put(new TextEncoder().encode('bar'), 'foo');
             transaction.addEventListener('complete', resolve);
             transaction.addEventListener('error', reject);
           };
@@ Expand All @@
       expect(cookie).toEqual('username=John Doe');
       const idbValues = await page2.evaluate(() => new Promise((resolve, reject) => {
         const openRequest = indexedDB.open('db', 42);
-        openRequest.addEventListener('success', () => {
+        openRequest.addEventListener('success', async () => {
           const db = openRequest.result;
           const transaction = db.transaction(['store', 'store2'], 'readonly');
           const request1 = transaction.objectStore('store').get('foo');
           const request2 = transaction.objectStore('store2').get('foo');
-          Promise.all([request1, request2].map(request => new Promise((resolve, reject) => {
+          const [result1, result2] = await Promise.all([request1, request2].map(request => new Promise((resolve, reject) => {
             request.addEventListener('success', () => resolve(request.result));
             request.addEventListener('error', () => reject(request.error));
-          }))).then(resolve, reject);
+          })));
+          resolve([result1, new TextDecoder().decode(result2 as any)]);
         });
         openRequest.addEventListener('error', () => reject(openRequest.error));
       }));
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
       expect(result).toBe(true);
     });
+    it('should transfer typed arrays', async ({ page }) => {
+      const testCases = [
+        new Int8Array([1, 2, 3]),
+        new Uint8Array([1, 2, 3]),
+        new Uint8ClampedArray([1, 2, 3]),
+        new Int16Array([1, 2, 3]),
+        new Uint16Array([1, 2, 3]),
+        new Int32Array([1, 2, 3]),
+        new Uint32Array([1, 2, 3]),
+        new Float32Array([1.1, 2.2, 3.3]),
+        new Float64Array([1.1, 2.2, 3.3]),
+        new BigInt64Array([1n, 2n, 3n]),
+        new BigUint64Array([1n, 2n, 3n])
+      ];
+      for (const typedArray of testCases) {
+        const result = await page.evaluate(a => a, typedArray);
+        expect(result).toEqual(typedArray);
+      }
+    });
     it('should transfer bigint', async ({ page }) => {
       expect(await page.evaluate(() => 42n)).toBe(42n);
       expect(await page.evaluate(a => a, 17n)).toBe(17n);
@@ Expand Down @@

chore: support typed arrays in indexeddb #34949

Uh oh!

chore: support typed arrays in indexeddb #34949

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!