chore: move trace viewer to the src/web (#5199)

.storybook/main.js

@@ -1,6 +1,7 @@
 module.exports = {
   "stories": [
-    "../src/cli/traceViewer/web/ui/*.stories.tsx",
+    "../src/web/traceViewer/ui/*.stories.tsx",
+    "../src/web/components/*.stories.tsx",
   ],
   "addons": [
     "@storybook/addon-links",

.storybook/preview.js

@@ -1,16 +1,14 @@
 import { addDecorator } from '@storybook/react';
-import { GlobalStyles } from '../src/cli/traceViewer/web/styles';
-import { applyTheme } from '../src/cli/traceViewer/web/theme';
+import '../src/web/common.css';
+import { applyTheme } from '../src/web/theme';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
 }
 
-
 addDecorator(storyFn => {
   applyTheme();
   return <div style={{backgroundColor: 'var(--background)'}}>
-    <GlobalStyles />
     {storyFn()}
   </div>
 });

src/cli/traceViewer/traceViewer.ts

@@ -81,13 +81,13 @@ class TraceViewer {
   async show() {
     const browser = await playwright.chromium.launch({ headless: false });
     const server = await SnapshotServer.create(
-        path.join(__dirname, 'web'),
+        path.join(__dirname, '..', '..', 'web'),
         this._document ? this._document.resourcesDir : undefined,
         this._document ? this._document.model : emptyModel,
         this._document ? new ScreenshotGenerator(this._document.resourcesDir, this._document.model) : undefined);
     const uiPage = await browser.newPage({ viewport: null });
     uiPage.on('close', () => process.exit(0));
-    await uiPage.goto(server.traceViewerUrl('index.html'));
+    await uiPage.goto(server.traceViewerUrl('traceViewer/index.html'));
   }
 }
 

src/cli/traceViewer/web/styles.tsx → src/web/common.css

@@ -14,9 +14,6 @@
   limitations under the License.
 */
 
-import * as React from 'react';
-
-export const GlobalStyles = () => <style>{`
 :root {
   --light-background: #f3f2f1;
   --background: #edebe9;
@@ -43,6 +40,7 @@ export const GlobalStyles = () => <style>{`
   --light-pink: #ff69b460;
   --network-content-bg: #dcdcdb;
   --box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
+  --monospace-font: "SF Mono", Monaco, Consolas, "Droid Sans Mono", Inconsolata, "Courier New",monospace;
 }
 
 html, body {
@@ -88,18 +86,6 @@ svg {
   fill: currentColor;
 }
 
-.platform-windows {
-  --monospace-font: Consolas, Inconsolata, "Courier New", monospace;
-}
-
-.platform-linux {
-  --monospace-font:"Droid Sans Mono", Inconsolata, "Courier New", monospace, "Droid Sans Fallback";
-}
-
-.platform-mac {
-  --monospace-font: "SF Mono",Monaco,Menlo,Inconsolata,"Courier New",monospace;
-}
-
 .vbox {
   display: flex;
   flex-direction: column;
@@ -126,4 +112,3 @@ svg {
 ::-webkit-scrollbar-corner {
   background-color: var(--background);
 }
-`}</style>;

src/web/components/source.css

@@ -0,0 +1,36 @@
+/*
+  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.
+*/
+
+.pw-source {
+  white-space: pre;
+  overflow: auto;
+  font-family: var(--monospace-font);
+  font-size: 11px;
+  line-height: 16px;
+  background: white;  
+}
+
+.pw-source-line {
+  display: flex;
+}
+
+.pw-source-line-number {
+  padding: 0 8px;
+  width: 30px;
+  text-align: right;
+  background: #edebe9;
+  user-select: none;
+}

src/web/components/source.stories.tsx

@@ -0,0 +1,100 @@
+/*
+  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 { Story, Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { Source, SourceProps } from './source';
+
+export default {
+  title: 'Components/Source',
+  component: Source,
+} as Meta;
+
+const Template: Story<SourceProps> = args => <Source {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  text: `const { chromium, devices } = require('.');
+
+(async () => {
+  const browser = await chromium.launch({
+    headless: false
+  });
+  const context = await browser.newContext({
+    // ...devices['iPhone 11']
+  });
+
+  // Open new page
+  const page = await context.newPage();
+
+  // Go to https://github.com/microsoft
+  await page.goto('https://github.com/microsoft');
+  await page._pause();
+
+  // Click input[aria-label="Find a repository…"]
+  await page.click('input[aria-label="Find a repository…"]');
+
+  // Fill input[aria-label="Find a repository…"]
+  await Promise.all([
+    page.waitForNavigation(/*{ url: 'https://github.com/microsoft?q=playwright&type=&language=' }*/),
+    page.fill('input[aria-label="Find a repository…"]', 'playwright')
+  ]);
+
+  // Click //a[normalize-space(.)='playwright']
+  await page.click('//a[normalize-space(.)=\'playwright\']');
+  // assert.equal(page.url(), 'https://github.com/microsoft/playwright');
+
+  // Click text="Issues"
+  await Promise.all([
+    page.waitForNavigation(/*{ url: 'https://github.com/microsoft/playwright/issues' }*/),
+    page.click('text="Issues"')
+  ]);
+
+  // Click text="triaging"
+  await Promise.all([
+    page.waitForNavigation(/*{ url: 'https://github.com/microsoft/playwright/issues?q=is:issue+is:open+label:triaging' }*/),
+    page.click('text="triaging"')
+  ]);
+
+  // Click text=/.*\[BUG\]\[Electron\] page\.waitForSe.*/
+  await Promise.all([
+    page.waitForNavigation(/*{ url: 'https://github.com/microsoft/playwright/issues/4961' }*/),
+    page.click('text=/.*\\\[BUG\\\]\\\[Electron\\\] page\.waitForSe.*/')
+  ]);
+  await page._pause();
+
+  // Click div[id="partial-users-participants"] img[alt="@pavelfeldman"]
+  await page.click('div[id="partial-users-participants"] img[alt="@pavelfeldman"]');
+  // assert.equal(page.url(), 'https://github.com/pavelfeldman');
+  await page._pause();
+
+  // Click text=/.*Repositories.*/
+  await Promise.all([
+    page.waitForNavigation(/*{ url: 'https://github.com/pavelfeldman?tab=repositories' }*/),
+    page.click('text=/.*Repositories.*/')
+  ]);
+  await page._pause();
+
+  // Click text=/.*playwright.*/
+  await page.click('text=/.*playwright.*/');
+  // assert.equal(page.url(), 'https://github.com/pavelfeldman/playwright');
+  await page._pause();
+
+  // ---------------------
+  await context.close();
+  await browser.close();
+})();`
+};

src/web/components/source.tsx

@@ -0,0 +1,46 @@
+/*
+  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 './source.css';
+import * as React from 'react';
+import highlightjs from '../../third_party/highlightjs/highlightjs';
+import '../../third_party/highlightjs/highlightjs/tomorrow.css';
+
+export interface SourceProps {
+  text: string,
+  targetLine: number
+}
+
+export const Source: React.FC<SourceProps> = ({
+  text = '',
+}) => {
+  const result = [];
+  let continuation: any;
+  for (const line of text.split('\n')) {
+    const highlighted = highlightjs.highlight('javascript', line, true, continuation);
+    continuation = highlighted.top;
+    result.push(highlighted.value);
+  }
+
+  return <div className='pw-source'>{
+      result.map((markup, index) => {
+        return <div key={index} className='pw-source-line'>
+          <div className='pw-source-line-number'>{index + 1}</div>
+          <div className='pw-source-code' dangerouslySetInnerHTML={{ __html: markup }}></div>
+        </div>;
+      })
+    }</div>
+};

src/web/components/toolbar.css

@@ -0,0 +1,23 @@
+/*
+  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.
+*/
+
+.pw-toolbar {
+  box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset;
+  background: rgb(255, 255, 255);
+  height: 40px;
+  align-items: center;
+  padding-right: 10px;
+}