feat(ui): more recorder uis (#5208)

microsoft · Jan 28, 2021 · 79e00e4 · 79e00e4
1 parent f8fbfe2
commit 79e00e4
Show file tree

Hide file tree

Showing 16 changed files with 338 additions and 535 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,7 +1,6 @@
 module.exports = {
   "stories": [
-    "../src/web/traceViewer/ui/*.stories.tsx",
-    "../src/web/components/*.stories.tsx",
+    "../src/web/**/*.stories.tsx",
   ],
   "addons": [
     "@storybook/addon-links",

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -4,11 +4,30 @@ import { applyTheme } from '../src/web/theme';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  viewport: {
+    viewports: {
+      recorder: {
+        name: 'recorder',
+        styles: {
+          width: '800px',
+          height: '600px',
+        },
+      },
+      traceViewer: {
+        name: 'traceViewer',
+        styles: {
+          width: '1024px',
+          height: '768px',
+        },
+      },
+    },
+    defaultViewport: 'desktop'
+  }
 }
 
 addDecorator(storyFn => {
   applyTheme();
-  return <div style={{backgroundColor: 'var(--background)'}}>
+  return <div style={{backgroundColor: 'var(--background)', display: 'flex'}}>
     {storyFn()}
   </div>
 });
diff --git a/src/web/components/exampleText.ts b/src/web/components/exampleText.ts
@@ -0,0 +1,88 @@
+/*
+  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.
+*/
+
+export function exampleText() {
+  return `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();
+})();`;
+}
diff --git a/src/web/components/source.css b/src/web/components/source.css
@@ -14,23 +14,32 @@
   limitations under the License.
 */
 
-.pw-source {
+.source {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
   white-space: pre;
   overflow: auto;
   font-family: var(--monospace-font);
   font-size: 11px;
   line-height: 16px;
-  background: white;  
+  background: white;
 }
 
-.pw-source-line {
+.source-line {
   display: flex;
+  flex: none;
 }
 
-.pw-source-line-number {
+.source-line-number {
+  color: #555;
   padding: 0 8px;
   width: 30px;
   text-align: right;
   background: #edebe9;
   user-select: none;
 }
+
+.source-line-highlighted {
+  background-color: #ffc0cb7f;
+}
diff --git a/src/web/components/source.stories.tsx b/src/web/components/source.stories.tsx
@@ -17,84 +17,27 @@
 import { Story, Meta } from '@storybook/react/types-6-0';
 import React from 'react';
 import { Source, SourceProps } from './source';
+import { exampleText } from './exampleText';
 
 export default {
   title: 'Components/Source',
   component: Source,
+  parameters: {
+    viewport: {
+      defaultViewport: 'recorder'
+    }
+  }
 } 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();
+  text: exampleText()
+};
 
-  // ---------------------
-  await context.close();
-  await browser.close();
-})();`
+export const HighlightLine = Template.bind({});
+HighlightLine.args = {
+  text: exampleText(),
+  highlightedLine: 11
 };
diff --git a/src/web/components/source.tsx b/src/web/components/source.tsx
@@ -16,30 +16,43 @@
 
 import './source.css';
 import * as React from 'react';
-import highlightjs from '../../third_party/highlightjs/highlightjs';
+import * as highlightjs from '../../third_party/highlightjs/highlightjs';
 import '../../third_party/highlightjs/highlightjs/tomorrow.css';
 
 export interface SourceProps {
   text: string,
-  targetLine: number
+  highlightedLine?: number
 }
 
 export const Source: React.FC<SourceProps> = ({
   text = '',
+  highlightedLine = -1
 }) => {
-  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>
+  const lines = React.useMemo<string[]>(() => {
+    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 result;
+  }, [text]);
+
+
+  const highlightedLineRef = React.createRef<HTMLDivElement>();
+  React.useLayoutEffect(() => {
+    if (highlightedLine && highlightedLineRef.current)
+      highlightedLineRef.current.scrollIntoView({ block: 'center', inline: 'nearest' });
+  }, [highlightedLineRef]);
+
+  return <div className='source'>{
+      lines.map((markup, index) => {
+        const isHighlighted = index === highlightedLine;
+        const className = isHighlighted ? 'source-line source-line-highlighted' : 'source-line';
+        return <div key={index} className={className} ref={isHighlighted ? highlightedLineRef : null}>
+          <div className='source-line-number'>{index + 1}</div>
+          <div className='source-code' dangerouslySetInnerHTML={{ __html: markup }}></div>
         </div>;
       })
     }</div>

diff --git a/src/web/components/toolbar.css b/src/web/components/toolbar.css
@@ -14,10 +14,17 @@
   limitations under the License.
 */
 
-.pw-toolbar {
+.toolbar {
+  display: flex;
   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;
+  flex: none;
+}
+
+.toolbar-linewrap {
+  display: block;
+  flex: auto;
 }