Replace zee-worker.js with compression streams API (#5584)

Author: mstange

.prettierignore

@@ -3,7 +3,6 @@ src/types/libdef/npm
 docs-user/js
 docs-user/css
 src/test/fixtures/upgrades
-res/zee-worker.js
 dist
 coverage
 taskcluster/

res/zee-worker.js

@@ -2211,7 +2211,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the menu buttons and
           class="menuButtonsDownloadSize"
         >
           (
-          1.58 kB
+          1.56 kB
           )
         </span>
       </a>
@@ -2329,7 +2329,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
           class="menuButtonsDownloadSize"
         >
           (
-          1.56 kB
+          1.54 kB
           )
         </span>
       </a>
@@ -2442,7 +2442,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
           class="menuButtonsDownloadSize"
         >
           (
-          1.58 kB
+          1.56 kB
           )
         </span>
       </a>

src/test/components/__snapshots__/MenuButtons.test.tsx.snap

@@ -39,5 +39,7 @@ export default class CustomTestEnvironment extends TestEnvironment {
     this.global.Request = Request;
     this.global.Response = Response;
     this.global.ReadableStream = ReadableStream;
+    this.global.CompressionStream = CompressionStream;
+    this.global.DecompressionStream = DecompressionStream;
   }
 }

src/test/custom-environment.js

@@ -24,9 +24,6 @@ if (process.env.TZ !== 'UTC') {
 fetchMock.mockGlobal();
 (global as any).fetchMock = fetchMock;
 
-// Mock the effects of the file-loader which our Webpack config defines
-// for JS files under res: The "default export" is the path to the file.
-jest.mock('firefox-profiler-res/zee-worker.js', () => './res/zee-worker.js');
 // Install a Worker class which is similar to the DOM Worker class.
 (global as any).Worker = NodeWorker;
 

src/test/setup.ts

@@ -2,107 +2,80 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import zeeWorkerPath from 'firefox-profiler-res/zee-worker.js';
+async function readableStreamToBuffer(
+  stream: ReadableStream<Uint8Array<ArrayBuffer>>
+): Promise<Uint8Array<ArrayBuffer>> {
+  const reader = stream.getReader();
+  const chunks: Uint8Array[] = [];
 
-const zeeCallbacks: Array<{
-  success: (data: any) => void;
-  error: (error: any) => void;
-} | null> = [];
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      if (value) {
+        chunks.push(value);
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
 
-type ZeeWorkerData = {
-  callbackID: number;
-  type: 'success' | 'error';
-  data: any;
-};
+  // Calculate total length and combine chunks
+  const totalLength = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+  const result = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    result.set(chunk, offset);
+    offset += chunk.length;
+  }
 
-function workerOnMessage(zeeWorker: Worker) {
-  zeeWorker.onmessage = function (msg: MessageEvent) {
-    const data = msg.data as ZeeWorkerData;
-    const callbacks = zeeCallbacks[data.callbackID];
-    if (callbacks) {
-      callbacks[data.type](data.data);
-      zeeCallbacks[data.callbackID] = null;
-    }
-  };
+  return result;
 }
 
-// Neuters data's buffer, if data is a typed array.
-export async function compress(
-  data: string | Uint8Array,
-  compressionLevel?: number
-): Promise<Uint8Array<ArrayBuffer>> {
-  if (!(typeof window === 'object' && 'Worker' in window)) {
-    // Try to fall back to Node's zlib library.
-    const zlib = await import('zlib');
-    return new Promise((resolve, reject) => {
-      zlib.gzip(data, (errorOrNull, result) => {
-        if (errorOrNull) {
-          reject(errorOrNull);
-        } else {
-          resolve(new Uint8Array(result.buffer as ArrayBuffer));
-        }
-      });
-    });
+// The Streams API doesn't support SAB, and so we need to copy from these to
+// use these API's.
+function copyBufferIfShared(buffer: Uint8Array): Uint8Array<ArrayBuffer> {
+  // Check if the buffer is a view into a larger ArrayBuffer (shared)
+  if (buffer.buffer instanceof SharedArrayBuffer) {
+    // Create a new buffer with its own ArrayBuffer
+    return new Uint8Array(buffer);
   }
+  // Return the original buffer if it's not shared
+  return buffer as Uint8Array<ArrayBuffer>;
+}
 
-  const zeeWorker = new Worker(zeeWorkerPath);
-  workerOnMessage(zeeWorker);
-
+export async function compress(
+  data: string | Uint8Array
+): Promise<Uint8Array<ArrayBuffer>> {
+  // Encode the data if it's a string
   const arrayData =
     typeof data === 'string' ? new TextEncoder().encode(data) : data;
-  return new Promise(function (resolve, reject) {
-    zeeWorker.postMessage(
-      {
-        request: 'compress',
-        data: arrayData,
-        compressionLevel: compressionLevel,
-        callbackID: zeeCallbacks.length,
-      },
-      [arrayData.buffer]
-    );
-    zeeCallbacks.push({
-      success: resolve,
-      error: reject,
-    });
-  });
+
+  // Create a gzip compression stream
+  const compressionStream = new CompressionStream('gzip');
+
+  // Write the data to the compression stream
+  const writer = compressionStream.writable.getWriter();
+  writer.write(copyBufferIfShared(arrayData));
+  writer.close();
+
+  // Read the compressed data back into a buffer
+  return readableStreamToBuffer(compressionStream.readable);
 }
 
-// Neuters data's buffer, if data is a typed array.
-export async function decompress(data: Uint8Array): Promise<Uint8Array> {
-  if (!(typeof window === 'object' && 'Worker' in window)) {
-    // Handle the case where we're not running in the browser, e.g. when
-    // this code is used as part of a library in a Node project.
-    // We don't get here when running Firefox profiler tests, because our
-    // tests create a mock window with a mock Worker class.
-    // Try to fall back to Node's zlib library.
-    const zlib = await import('zlib');
-    return new Promise((resolve, reject) => {
-      zlib.gunzip(data, (errorOrNull, result) => {
-        if (errorOrNull) {
-          reject(errorOrNull);
-        } else {
-          resolve(new Uint8Array(result.buffer as ArrayBuffer));
-        }
-      });
-    });
-  }
+export async function decompress(
+  data: Uint8Array
+): Promise<Uint8Array<ArrayBuffer>> {
+  // Create a gzip compression stream
+  const decompressionStream = new DecompressionStream('gzip');
+
+  // Write the data to the compression stream
+  const writer = decompressionStream.writable.getWriter();
+  writer.write(copyBufferIfShared(data));
+  writer.close();
 
-  const zeeWorker = new Worker(zeeWorkerPath);
-  return new Promise(function (resolve, reject) {
-    workerOnMessage(zeeWorker);
-    zeeWorker.postMessage(
-      {
-        request: 'decompress',
-        data: data,
-        callbackID: zeeCallbacks.length,
-      },
-      [data.buffer]
-    );
-    zeeCallbacks.push({
-      success: resolve,
-      error: reject,
-    });
-  });
+  // Read the compressed data back into a buffer
+  return readableStreamToBuffer(decompressionStream.readable);
 }
 
 export function isGzip(data: Uint8Array): boolean {

src/utils/gz.ts

@@ -99,7 +99,6 @@ const config = {
       patterns: [
         'res/_headers',
         'res/_redirects',
-        'res/zee-worker.js',
         'res/contribute.json',
         'res/robots.txt',
         'res/service-worker-compat.js',