chore: move trace viewer into server (#5597)

src/cli/cli.ts

@@ -23,7 +23,7 @@ import program from 'commander';
 import os from 'os';
 import fs from 'fs';
 import { runServer, printApiJson, installBrowsers } from './driver';
-import { showTraceViewer } from './traceViewer/traceViewer';
+import { showTraceViewer } from '../server/trace/viewer/traceViewer';
 import * as playwright from '../..';
 import { BrowserContext } from '../client/browserContext';
 import { Browser } from '../client/browser';

src/server/playwright.ts

@@ -15,7 +15,7 @@
  */
 
 import path from 'path';
-import { Tracer } from './trace/tracer';
+import { Tracer } from './trace/recorder/tracer';
 import { Android } from './android/android';
 import { AdbBackend } from './android/backendAdb';
 import { PlaywrightOptions } from './browser';

src/server/trace/common/traceEvents.ts

@@ -14,9 +14,19 @@
  * limitations under the License.
  */
 
-import { StackFrame } from '../../common/types';
+import { StackFrame } from '../../../common/types';
-import { NodeSnapshot } from './snapshotterInjected';
+
-export { NodeSnapshot } from './snapshotterInjected';
+export type NodeSnapshot =
+  // Text node.
+  string |
+  // Subtree reference, "x snapshots ago, node #y". Could point to a text node.
+  // Only nodes that are not references are counted, starting from zero, using post-order traversal.
+  [ [number, number] ] |
+  // Just node name.
+  [ string ] |
+  // Node name, attributes, child nodes.
+  // Unfortunately, we cannot make this type definition recursive, therefore "any".
+  [ string, { [attr: string]: string }, ...any ];
 
 export type ContextCreatedTraceEvent = {
   timestamp: number,

src/server/trace/recorder/snapshotter.ts

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { BrowserContext } from '../browserContext';
+import { BrowserContext } from '../../browserContext';
-import { Page } from '../page';
+import { Page } from '../../page';
-import * as network from '../network';
+import * as network from '../../network';
-import { helper, RegisteredListener } from '../helper';
+import { helper, RegisteredListener } from '../../helper';
-import { debugLogger } from '../../utils/debugLogger';
+import { debugLogger } from '../../../utils/debugLogger';
-import { Frame } from '../frames';
+import { Frame } from '../../frames';
 import { SnapshotData, frameSnapshotStreamer, kSnapshotBinding, kSnapshotStreamer } from './snapshotterInjected';
-import { calculateSha1 } from '../../utils/utils';
+import { calculateSha1 } from '../../../utils/utils';
-import { FrameSnapshot } from './traceTypes';
+import { FrameSnapshot } from '../common/traceEvents';
 
 export type SnapshotterResource = {
   pageId: string,

src/server/trace/recorder/snapshotterInjected.ts

@@ -14,17 +14,7 @@
  * limitations under the License.
  */
 
-export type NodeSnapshot =
+import type { NodeSnapshot } from '../common/traceEvents';
-  // Text node.
-  string |
-  // Subtree reference, "x snapshots ago, node #y". Could point to a text node.
-  // Only nodes that are not references are counted, starting from zero, using post-order traversal.
-  [ [number, number] ] |
-  // Just node name.
-  [ string ] |
-  // Node name, attributes, child nodes.
-  // Unfortunately, we cannot make this type definition recursive, therefore "any".
-  [ string, { [attr: string]: string }, ...any ];
 
 export type SnapshotData = {
   doctype?: string,

src/server/trace/recorder/tracer.ts

@@ -14,20 +14,20 @@
  * limitations under the License.
  */
 
-import { BrowserContext, Video } from '../browserContext';
+import { BrowserContext, Video } from '../../browserContext';
 import type { SnapshotterResource as SnapshotterResource, SnapshotterBlob, SnapshotterDelegate } from './snapshotter';
-import * as trace from './traceTypes';
+import * as trace from '../common/traceEvents';
 import path from 'path';
 import * as util from 'util';
 import fs from 'fs';
-import { createGuid, getFromENV, mkdirIfNeeded, monotonicTime } from '../../utils/utils';
+import { createGuid, getFromENV, mkdirIfNeeded, monotonicTime } from '../../../utils/utils';
-import { Page } from '../page';
+import { Page } from '../../page';
 import { Snapshotter } from './snapshotter';
-import { helper, RegisteredListener } from '../helper';
+import { helper, RegisteredListener } from '../../helper';
-import { Dialog } from '../dialog';
+import { Dialog } from '../../dialog';
-import { Frame, NavigationEvent } from '../frames';
+import { Frame, NavigationEvent } from '../../frames';
 import { snapshotScript } from './snapshotterInjected';
-import { CallMetadata, InstrumentationListener, SdkObject } from '../instrumentation';
+import { CallMetadata, InstrumentationListener, SdkObject } from '../../instrumentation';
 
 const fsWriteFileAsync = util.promisify(fs.writeFile.bind(fs));
 const fsAppendFileAsync = util.promisify(fs.appendFile.bind(fs));

src/server/trace/viewer/screenshotGenerator.ts

@@ -16,7 +16,7 @@
 
 import fs from 'fs';
 import path from 'path';
-import * as playwright from '../../..';
+import * as playwright from '../../../..';
 import * as util from 'util';
 import { actionById, ActionEntry, ContextEntry, TraceModel } from './traceModel';
 import { SnapshotServer } from './snapshotServer';

src/server/trace/viewer/snapshotServer.ts

@@ -19,7 +19,7 @@ import fs from 'fs';
 import path from 'path';
 import querystring from 'querystring';
 import type { TraceModel } from './traceModel';
-import * as trace from '../../server/trace/traceTypes';
+import * as trace from '../common/traceEvents';
 import { TraceServer } from './traceServer';
 
 export class SnapshotServer {

src/server/trace/viewer/traceModel.ts

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import * as trace from '../../server/trace/traceTypes';
+import * as trace from '../common/traceEvents';
-export * as trace from '../../server/trace/traceTypes';
+export * as trace from '../common/traceEvents';
 
 export type TraceModel = {
   contexts: ContextEntry[];

src/server/trace/viewer/traceViewer.ts

@@ -16,11 +16,11 @@
 
 import fs from 'fs';
 import path from 'path';
-import * as playwright from '../../..';
+import * as playwright from '../../../..';
 import * as util from 'util';
 import { ScreenshotGenerator } from './screenshotGenerator';
 import { readTraceFile, TraceModel } from './traceModel';
-import type { TraceEvent } from '../../server/trace/traceTypes';
+import type { TraceEvent } from '../common/traceEvents';
 import { SnapshotServer } from './snapshotServer';
 import { ServerRouteHandler, TraceServer } from './traceServer';
 
@@ -106,7 +106,7 @@ class TraceViewer {
 
     const traceViewerHandler: ServerRouteHandler = (request, response) => {
       const relativePath = request.url!.substring('/traceviewer/'.length);
-      const absolutePath = path.join(__dirname, '..', '..', 'web', ...relativePath.split('/'));
+      const absolutePath = path.join(__dirname, '..', '..', '..', 'web', ...relativePath.split('/'));
       return server.serveFile(response, absolutePath);
     };
     server.routePrefix('/traceviewer/', traceViewerHandler, true);

src/web/traceViewer/ui/actionList.tsx

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import { ActionEntry } from '../../../cli/traceViewer/traceModel';
+import { ActionEntry } from '../../../server/trace/viewer/traceModel';
 import './actionList.css';
 import * as React from 'react';
 

src/web/traceViewer/ui/contextSelector.tsx

@@ -15,7 +15,7 @@
 */
 
 import * as React from 'react';
-import { ContextEntry } from '../../../cli/traceViewer/traceModel';
+import { ContextEntry } from '../../../server/trace/viewer/traceModel';
 import './contextSelector.css';
 
 export const ContextSelector: React.FunctionComponent<{

src/web/traceViewer/ui/logsTab.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ActionEntry } from '../../../cli/traceViewer/traceModel';
+import { ActionEntry } from '../../../server/trace/viewer/traceModel';
 import * as React from 'react';
 import './logsTab.css';
 

src/web/traceViewer/ui/networkResourceDetails.tsx

@@ -17,7 +17,7 @@
 import './networkResourceDetails.css';
 import * as React from 'react';
 import { Expandable } from './helpers';
-import { NetworkResourceTraceEvent } from '../../../server/trace/traceTypes';
+import { NetworkResourceTraceEvent } from '../../../server/trace/common/traceEvents';
 
 const utf8Encoder = new TextDecoder('utf-8');
 

src/web/traceViewer/ui/networkTab.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ActionEntry } from '../../../cli/traceViewer/traceModel';
+import { ActionEntry } from '../../../server/trace/viewer/traceModel';
 import './networkTab.css';
 import * as React from 'react';
 import { NetworkResourceDetails } from './networkResourceDetails';

src/web/traceViewer/ui/snapshotTab.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ActionEntry } from '../../../cli/traceViewer/traceModel';
+import { ActionEntry } from '../../../server/trace/viewer/traceModel';
 import { Boundaries, Size } from '../geometry';
 import './snapshotTab.css';
 import * as React from 'react';

src/web/traceViewer/ui/sourceTab.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ActionEntry } from '../../../cli/traceViewer/traceModel';
+import { ActionEntry } from '../../../server/trace/viewer/traceModel';
 import * as React from 'react';
 import { useAsyncMemo } from './helpers';
 import './sourceTab.css';

src/web/traceViewer/ui/timeline.tsx

@@ -15,7 +15,7 @@
   limitations under the License.
 */
 
-import { ContextEntry, InterestingPageEvent, ActionEntry, trace } from '../../../cli/traceViewer/traceModel';
+import { ContextEntry, InterestingPageEvent, ActionEntry, trace } from '../../../server/trace/viewer/traceModel';
 import './timeline.css';
 import { Boundaries } from '../geometry';
 import * as React from 'react';

src/web/traceViewer/ui/workbench.tsx

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import { ActionEntry, TraceModel } from '../../../cli/traceViewer/traceModel';
+import { ActionEntry, TraceModel } from '../../../server/trace/viewer/traceModel';
 import { ActionList } from './actionList';
 import { TabbedPane } from './tabbedPane';
 import { Timeline } from './timeline';

test/trace.spec.ts

@@ -15,7 +15,7 @@
  */
 
 import { it, expect } from './fixtures';
-import type * as trace from '../src/server/trace/traceTypes';
+import type * as trace from '../src/server/trace/common/traceEvents';
 import path from 'path';
 import fs from 'fs';
 

utils/check_deps.js

@@ -140,13 +140,13 @@ DEPS['src/server/injected/'] = ['src/server/common/'];
 DEPS['src/server/android/'] = [...DEPS['src/server/'], 'src/server/chromium/', 'src/protocol/'];
 DEPS['src/server/electron/'] = [...DEPS['src/server/'], 'src/server/chromium/'];
 
-DEPS['src/server/playwright.ts'] = [...DEPS['src/server/'], 'src/server/trace/', 'src/server/chromium/', 'src/server/webkit/', 'src/server/firefox/', 'src/server/android/', 'src/server/electron/'];
+DEPS['src/server/playwright.ts'] = [...DEPS['src/server/'], 'src/server/trace/recorder/tracer.ts', 'src/server/chromium/', 'src/server/webkit/', 'src/server/firefox/', 'src/server/android/', 'src/server/electron/'];
 DEPS['src/cli/driver.ts'] = DEPS['src/inprocess.ts'] = DEPS['src/browserServerImpl.ts'] = ['src/**'];
 
 // Tracing is a client/server plugin, nothing should depend on it.
 DEPS['src/web/recorder/'] = ['src/common/', 'src/web/', 'src/web/components/', 'src/server/supplements/recorder/recorderTypes.ts'];
-DEPS['src/web/traceViewer/'] = ['src/common/', 'src/web/', 'src/cli/traceViewer/'];
+DEPS['src/web/traceViewer/'] = ['src/common/', 'src/web/'];
-DEPS['src/web/traceViewer/ui/'] = ['src/common/', 'src/web/traceViewer/', 'src/web/', 'src/cli/traceViewer/', 'src/server/trace/'];
+DEPS['src/web/traceViewer/ui/'] = ['src/common/', 'src/web/traceViewer/', 'src/web/', 'src/server/trace/viewer/', 'src/server/trace/', 'src/server/trace/common/'];
 // The service is a cross-cutting feature, and so it depends on a bunch of things.
 DEPS['src/remote/'] = ['src/client/', 'src/debug/', 'src/dispatchers/', 'src/server/', 'src/server/supplements/', 'src/server/electron/', 'src/server/trace/'];
 DEPS['src/service.ts'] = ['src/remote/'];
@@ -157,6 +157,10 @@ DEPS['src/cli/'] = ['src/cli/**', 'src/client/**', 'src/install/**', 'src/genera
 DEPS['src/server/supplements/recorder/recorderApp.ts'] = ['src/common/', 'src/utils/', 'src/server/', 'src/server/chromium/'];
 DEPS['src/utils/'] = ['src/common/'];
 
+// Trace viewer
+DEPS['src/server/trace/recorder/'] = ['src/server/trace/common/', ...DEPS['src/server/']];
+DEPS['src/server/trace/viewer/'] = ['src/server/trace/common/'];
+
 checkDeps().catch(e => {
   console.error(e && e.stack ? e.stack : e);
   process.exit(1);