feat(icon): add an icon for trace viewer (#7430)

src/server/chromium/crApp.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import fs from 'fs';
+import { Page } from '../page';
+import { CRPage } from './crPage';
+
+export async function installAppIcon(page: Page) {
+  const icon = await fs.promises.readFile(require.resolve('./appIcon.png'));
+  const crPage = page._delegate as CRPage;
+  await crPage._mainFrameSession._client.send('Browser.setDockTile', {
+    image: icon.toString('base64')
+  });
+}

src/server/supplements/recorder/recorderApp.ts

@@ -16,7 +16,6 @@
 
 import fs from 'fs';
 import path from 'path';
-import { CRPage } from '../../chromium/crPage';
 import { Page } from '../../page';
 import { ProgressController } from '../../progress';
 import { EventEmitter } from 'events';
@@ -24,6 +23,7 @@ import { internalCallMetadata } from '../../instrumentation';
 import type { CallLog, EventData, Mode, Source } from './recorderTypes';
 import { BrowserContext } from '../../browserContext';
 import { existsAsync, isUnderTest } from '../../../utils/utils';
+import { installAppIcon } from '../../chromium/crApp';
 
 declare global {
   interface Window {
@@ -53,11 +53,7 @@ export class RecorderApp extends EventEmitter {
   }
 
   private async _init() {
-    const icon = await fs.promises.readFile(require.resolve('../../../web/recorder/app_icon.png'));
-    const crPopup = this._page._delegate as CRPage;
-    await crPopup._mainFrameSession._client.send('Browser.setDockTile', {
-      image: icon.toString('base64')
-    });
+    await installAppIcon(this._page);
 
     await this._page._setServerRequestInterceptor(async route => {
       if (route.request().url().startsWith('https://playwright/')) {

src/server/trace/viewer/traceViewer.ts

@@ -31,6 +31,7 @@ import { ProgressController } from '../../progress';
 import { BrowserContext } from '../../browserContext';
 import { Registry } from '../../../utils/registry';
 import { findChromiumChannel } from '../../chromium/findChromiumChannel';
+import { installAppIcon } from '../../chromium/crApp';
 
 export class TraceViewer {
   private _server: HttpServer;
@@ -174,10 +175,15 @@ Please run 'npx playwright install' to install Playwright browsers
     });
     await context.extendInjectedScript('main', consoleApiSource.source);
     const [page] = context.pages();
+
+    if (traceViewerBrowser === 'chromium')
+      await installAppIcon(page);
+
     if (isUnderTest())
       page.on('close', () => context.close(internalCallMetadata()).catch(() => {}));
     else
       page.on('close', () => process.exit());
+
     await page.mainFrame().goto(internalCallMetadata(), urlPrefix + '/traceviewer/traceViewer/index.html');
     return context;
   }

utils/build/build.js

@@ -135,9 +135,9 @@ onChanges.push({
   script: 'utils/generate_types/index.js',
 });
 
-// The recorder has an app_icon.png that needs to be copied.
+// The recorder and trace viewer have an app_icon.png that needs to be copied.
 copyFiles.push({
-  files: 'src/web/recorder/*.png',
+  files: 'src/server/chromium/*.png',
   from: 'src',
   to: 'lib',
 });