chore: throttle thumbnail workers, remove video processing (#5097)

src/cli/traceViewer/screenshotGenerator.ts

@@ -27,45 +27,43 @@ const fsWriteFileAsync = util.promisify(fs.writeFile.bind(fs));
 
 export class ScreenshotGenerator {
   private _traceStorageDir: string;
-  private _browserPromise: Promise<playwright.Browser> | undefined;
+  private _browserPromise: Promise<playwright.Browser>;
   private _traceModel: TraceModel;
   private _rendering = new Map<ActionEntry, Promise<Buffer | undefined>>();
+  private _lock = new Lock(3);
 
   constructor(traceStorageDir: string, traceModel: TraceModel) {
     this._traceStorageDir = traceStorageDir;
     this._traceModel = traceModel;
+    this._browserPromise = playwright.chromium.launch();
   }
 
-  async generateScreenshot(actionId: string): Promise<Buffer | undefined> {
+  generateScreenshot(actionId: string): Promise<Buffer | undefined> {
     const { context, action } = actionById(this._traceModel, actionId);
     if (!action.action.snapshot)
-      return;
-    const imageFileName = path.join(this._traceStorageDir, action.action.snapshot.sha1 + '-thumbnail.png');
+      return Promise.resolve(undefined);
+    if (!this._rendering.has(action)) {
+      this._rendering.set(action, this._render(context, action).then(body => {
+        this._rendering.delete(action);
+        return body;
+      }));
+    }
+    return this._rendering.get(action)!;
+  }
 
-    let body: Buffer | undefined;
+  private async _render(contextEntry: ContextEntry, actionEntry: ActionEntry): Promise<Buffer | undefined> {
+    const imageFileName = path.join(this._traceStorageDir, actionEntry.action.snapshot!.sha1 + '-screenshot.png');
     try {
-      body = await fsReadFileAsync(imageFileName);
+      return await fsReadFileAsync(imageFileName);
     } catch (e) {
-      if (!this._rendering.has(action)) {
-        this._rendering.set(action, this._render(context, action, imageFileName).then(body => {
-          this._rendering.delete(action);
-          return body;
-        }));
-      }
-      body = await this._rendering.get(action)!;
+      // fall through
     }
-    return body;
-  }
 
-  private _browser() {
-    if (!this._browserPromise)
-      this._browserPromise = playwright.chromium.launch();
-    return this._browserPromise;
-  }
-
-  private async _render(contextEntry: ContextEntry, actionEntry: ActionEntry, imageFileName: string): Promise<Buffer | undefined> {
     const { action } = actionEntry;
-    const browser = await this._browser();
+    const browser = await this._browserPromise;
+
+    await this._lock.obtain();
+
     const page = await browser.newPage({
       viewport: contextEntry.created.viewportSize,
       deviceScaleFactor: contextEntry.created.deviceScaleFactor
@@ -88,49 +86,44 @@ export class ScreenshotGenerator {
       console.log('Generating screenshot for ' + action.action, snapshotObject.frames[0].url); // eslint-disable-line no-console
       await page.goto(url);
 
-      let clip: any = undefined;
       const element = await page.$(action.selector || '*[__playwright_target__]');
       if (element) {
         await element.evaluate(e => {
           e.style.backgroundColor = '#ff69b460';
         });
-
-        clip = await element.boundingBox() || undefined;
-        if (clip) {
-          const thumbnailSize = {
-            width: 400,
-            height: 200
-          };
-          const insets = {
-            width: 60,
-            height: 30
-          };
-          clip.width = Math.min(thumbnailSize.width, clip.width);
-          clip.height = Math.min(thumbnailSize.height, clip.height);
-          if (clip.width < thumbnailSize.width) {
-            clip.x -= (thumbnailSize.width - clip.width) / 2;
-            clip.x = Math.max(0, clip.x);
-            clip.width = thumbnailSize.width;
-          } else {
-            clip.x = Math.max(0, clip.x - insets.width);
-          }
-          if (clip.height < thumbnailSize.height) {
-            clip.y -= (thumbnailSize.height - clip.height) / 2;
-            clip.y = Math.max(0, clip.y);
-            clip.height = thumbnailSize.height;
-          } else {
-            clip.y = Math.max(0, clip.y - insets.height);
-          }
-        }
       }
-
-      const imageData = await page.screenshot({ clip });
+      const imageData = await page.screenshot();
       await fsWriteFileAsync(imageFileName, imageData);
       return imageData;
     } catch (e) {
       console.log(e); // eslint-disable-line no-console
     } finally {
       await page.close();
+      this._lock.release();
     }
   }
 }
+
+class Lock {
+  private _maxWorkers: number;
+  private _callbacks: (() => void)[] = [];
+  private _workers = 0;
+
+  constructor(maxWorkers: number) {
+    this._maxWorkers = maxWorkers;
+  }
+
+  async obtain() {
+    while (this._workers === this._maxWorkers)
+      await new Promise(f => this._callbacks.push(f));
+    ++this._workers;
+  }
+
+  release() {
+    --this._workers;
+    const callbacks = this._callbacks;
+    this._callbacks = [];
+    for (const callback of callbacks)
+      callback();
+  }
+}

src/cli/traceViewer/traceViewer.ts

@@ -22,7 +22,6 @@ import { ScreenshotGenerator } from './screenshotGenerator';
 import { SnapshotRouter } from './snapshotRouter';
 import { readTraceFile, TraceModel } from './traceModel';
 import type { ActionTraceEvent, PageSnapshot, TraceEvent } from '../../trace/traceTypes';
-import { VideoTileGenerator } from './videoTileGenerator';
 
 const fsReadFileAsync = util.promisify(fs.readFile.bind(fs));
 
@@ -31,7 +30,6 @@ type TraceViewerDocument = {
   model: TraceModel;
   snapshotRouter: SnapshotRouter;
   screenshotGenerator: ScreenshotGenerator;
-  videoTileGenerator: VideoTileGenerator;
 };
 
 const emptyModel: TraceModel = {
@@ -75,7 +73,6 @@ class TraceViewer {
       resourcesDir,
       snapshotRouter: new SnapshotRouter(resourcesDir),
       screenshotGenerator: new ScreenshotGenerator(resourcesDir, model),
-      videoTileGenerator: new VideoTileGenerator(model)
     };
 
     for (const name of fs.readdirSync(traceDir)) {
@@ -119,7 +116,7 @@ class TraceViewer {
             console.error(e);
           return;
         }
-        const element = await snapshotFrame.$(action.selector || '*[__playwright_target__]');
+        const element = await snapshotFrame.$(action.selector || '*[__playwright_target__]').catch(e => undefined);
         if (element) {
           await element.evaluate(e => {
             e.style.backgroundColor = '#ff69b460';
@@ -130,9 +127,6 @@ class TraceViewer {
       }
     });
     await uiPage.exposeBinding('getTraceModel', () => this._document ? this._document.model : emptyModel);
-    await uiPage.exposeBinding('getVideoMetaInfo', async (_, videoId: string) => {
-      return this._document ? this._document.videoTileGenerator.render(videoId) : null;
-    });
     await uiPage.route('**/*', (route, request) => {
       if (request.frame().parentFrame() && this._document) {
         this._document.snapshotRouter.route(route);
@@ -151,13 +145,7 @@ class TraceViewer {
           });
           return;
         }
-        let filePath: string;
-        if (this._document && request.url().includes('video-tile')) {
-          const fullPath = url.pathname.substring('/video-tile/'.length);
-          filePath = this._document.videoTileGenerator.tilePath(fullPath);
-        } else {
-          filePath = path.join(__dirname, 'web', url.pathname.substring(1));
-        }
+        const filePath = path.join(__dirname, 'web', url.pathname.substring(1));
         const body = fs.readFileSync(filePath);
         route.fulfill({
           contentType: extensionToMime[path.extname(url.pathname).substring(1)] || 'text/plain',

src/cli/traceViewer/web/index.tsx

@@ -24,7 +24,6 @@ import { applyTheme } from './theme';
 declare global {
   interface Window {
     getTraceModel(): Promise<TraceModel>;
-    getVideoMetaInfo(videoId: string): Promise<VideoMetaInfo | undefined>;
     readFile(filePath: string): Promise<string>;
     renderSnapshot(action: trace.ActionTraceEvent): void;
   }