microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-05 19:04:43 +03:00
Code Issues Projects Releases Wiki Activity

chore: remove storybook (#6549)

Browse Source
This commit is contained in:
Pavel Feldman 2021-05-12 19:55:49 -07:00 committed by GitHub
parent d02472a9e0
commit cc43b0d23f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 872 additions and 10539 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.storybook/main.js
View File

@ -1,11 +0,0 @@
module.exports = {
"stories": [
"../src/web/**/*.stories.tsx",
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
],
"typescript": {
}
}

33
.storybook/preview.js
View File

@ -1,33 +0,0 @@
import { addDecorator } from '@storybook/react';
import '../src/web/common.css';
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)', display: 'flex', flex: 'auto'}}>
{storyFn()}
</div>
});

10776
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -27,9 +27,7 @@
"test-types": "node utils/generate_types/ && npx -p typescript@3.7.5 tsc -p utils/generate_types/test/tsconfig.json && tsc -p ./tests/",
"roll": "node utils/roll_browser.js",
"check-deps": "node utils/check_deps.js",
"build-android-driver": "./utils/build_android_driver.sh",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
"build-android-driver": "./utils/build_android_driver.sh"
},
"author": {
"name": "Microsoft Corporation"
@ -55,11 +53,6 @@
"yazl": "^2.5.1"
},
"devDependencies": {
"@storybook/addon-actions": "^6.1.20",
"@storybook/addon-essentials": "^6.1.20",
"@storybook/addon-links": "^6.1.20",
"@storybook/node-logger": "^6.1.20",
"@storybook/react": "^6.1.20",
"@types/debug": "^4.1.5",
"@types/extract-zip": "^1.6.2",
"@types/mime": "^2.0.3",

6
src/client/cdpSession.ts
View File

@ -24,12 +24,6 @@ export class CDPSession extends ChannelOwner<channels.CDPSessionChannel, channel
return (cdpSession as any)._object;
}
on: <T extends keyof Protocol.Events | symbol>(event: T, listener: (payload: T extends symbol ? any : Protocol.Events[T extends keyof Protocol.Events ? T : never]) => void) => this;
addListener: <T extends keyof Protocol.Events | symbol>(event: T, listener: (payload: T extends symbol ? any : Protocol.Events[T extends keyof Protocol.Events ? T : never]) => void) => this;
off: <T extends keyof Protocol.Events | symbol>(event: T, listener: (payload: T extends symbol ? any : Protocol.Events[T extends keyof Protocol.Events ? T : never]) => void) => this;
removeListener: <T extends keyof Protocol.Events | symbol>(event: T, listener: (payload: T extends symbol ? any : Protocol.Events[T extends keyof Protocol.Events ? T : never]) => void) => this;
once: <T extends keyof Protocol.Events | symbol>(event: T, listener: (payload: T extends symbol ? any : Protocol.Events[T extends keyof Protocol.Events ? T : never]) => void) => this;
constructor(parent: ChannelOwner, type: string, guid: string, initializer: channels.CDPSessionInitializer) {
super(parent, type, guid, initializer);

2
src/server/webkit/wkInterceptableRequest.ts
View File

@ -61,7 +61,7 @@ export class WKInterceptableRequest implements network.RouteDelegate {
postDataBuffer = Buffer.from(event.request.postData, 'base64');
this.request = new network.Request(allowInterception ? this : null, frame, redirectedFrom, documentId, event.request.url,
resourceType, event.request.method, postDataBuffer, headersObjectToArray(event.request.headers));
this._interceptedPromise = new Promise(f => this._interceptedCallback = f);
this._interceptedPromise = new Promise<void>(f => this._interceptedCallback = f);
}
async abort(errorCode: string) {

88
src/web/components/source.example.ts
View File

@ -1,88 +0,0 @@
/*
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();
})();`;
}

65
src/web/components/source.stories.tsx
View File

@ -1,65 +0,0 @@
/*
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';
import { exampleText } from './source.example';
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 = {
language: 'javascript',
text: exampleText()
};
export const RunningOnLine = Template.bind({});
RunningOnLine.args = {
language: 'javascript',
text: exampleText(),
highlight: [
{ line: 15, type: 'running' },
]
};
export const PausedOnLine = Template.bind({});
PausedOnLine.args = {
language: 'javascript',
text: exampleText(),
highlight: [
{ line: 15, type: 'paused' },
]
};
export const ErrorOnLine = Template.bind({});
ErrorOnLine.args = {
language: 'javascript',
text: exampleText(),
highlight: [
{ line: 15, type: 'error' },
]
};

87
src/web/components/toolbar.stories.tsx
View File

@ -1,87 +0,0 @@
/*
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 { Toolbar, ToolbarProps } from './toolbar';
import { ToolbarButton } from './toolbarButton';
export default {
title: 'Components/Toolbar',
component: Toolbar,
} as Meta;
const Template: Story<ToolbarProps> = () => <Toolbar>
<ToolbarButton icon='record' title='Record' onClick={() => {}}>Record</ToolbarButton>
<ToolbarButton icon='question' title='Inspect' onClick={() => {}}>Explore</ToolbarButton>
<ToolbarButton icon='files' title='Copy' onClick={() => {}}></ToolbarButton>
</Toolbar>;
export const Primary = Template.bind({});
const AllTemplate: Story = () => <Toolbar>
{[
'add', 'plus', 'gist-new', 'repo-create', 'lightbulb', 'light-bulb', 'repo', 'repo-delete', 'gist-fork', 'repo-forked',
'git-pull-request', 'git-pull-request-abandoned', 'record-keys', 'keyboard', 'tag', 'tag-add', 'tag-remove', 'person',
'person-add', 'person-follow', 'person-outline', 'person-filled', 'git-branch', 'git-branch-create',
'git-branch-delete', 'source-control', 'mirror', 'mirror-public', 'star', 'star-add', 'star-delete', 'star-empty',
'comment', 'comment-add', 'alert', 'warning', 'search', 'search-save', 'log-out', 'sign-out', 'log-in', 'sign-in',
'eye', 'eye-unwatch', 'eye-watch', 'circle-filled', 'primitive-dot', 'close-dirty', 'debug-breakpoint',
'debug-breakpoint-disabled', 'debug-hint', 'primitive-square', 'edit', 'pencil', 'info', 'issue-opened',
'gist-private', 'git-fork-private', 'lock', 'mirror-private', 'close', 'remove-close', 'x', 'repo-sync',
'sync', 'clone', 'desktop-download', 'beaker', 'microscope', 'vm', 'device-desktop', 'file', 'file-text', 'more',
'ellipsis', 'kebab-horizontal', 'mail-reply', 'reply', 'organization', 'organization-filled', 'organization-outline',
'new-file', 'file-add', 'new-folder', 'file-directory-create', 'trash', 'trashcan', 'history', 'clock', 'folder',
'file-directory', 'symbol-folder', 'logo-github', 'mark-github', 'github', 'terminal', 'console', 'repl', 'zap',
'symbol-event', 'error', 'stop', 'variable', 'symbol-variable', 'array', 'symbol-array', 'symbol-module',
'symbol-package', 'symbol-namespace', 'symbol-object', 'symbol-method', 'symbol-function', 'symbol-constructor',
'symbol-boolean', 'symbol-null', 'symbol-numeric', 'symbol-number', 'symbol-structure', 'symbol-struct', 'symbol-parameter',
'symbol-type-parameter', 'symbol-key', 'symbol-text', 'symbol-reference', 'go-to-file', 'symbol-enum', 'symbol-value', 'symbol-ruler',
'symbol-unit', 'activate-breakpoints', 'archive', 'arrow-both', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-small-down', 'arrow-small-left',
'arrow-small-right', 'arrow-small-up', 'arrow-up', 'bell', 'bold', 'book', 'bookmark', 'debug-breakpoint-conditional-unverified',
'debug-breakpoint-conditional', 'debug-breakpoint-conditional-disabled', 'debug-breakpoint-data-unverified', 'debug-breakpoint-data',
'debug-breakpoint-data-disabled', 'debug-breakpoint-log-unverified', 'debug-breakpoint-log', 'debug-breakpoint-log-disabled', 'briefcase',
'broadcast', 'browser', 'bug', 'calendar', 'case-sensitive', 'check', 'checklist', 'chevron-down', 'chevron-left', 'chevron-right', 'chevron-up',
'chrome-close', 'chrome-maximize', 'chrome-minimize', 'chrome-restore', 'circle-outline', 'debug-breakpoint-unverified', 'circle-slash',
'circuit-board', 'clear-all', 'clippy', 'close-all', 'cloud-download', 'cloud-upload', 'code', 'collapse-all', 'color-mode', 'comment-discussion',
'compare-changes', 'credit-card', 'dash', 'dashboard', 'database', 'debug-continue', 'debug-disconnect', 'debug-pause', 'debug-restart',
'debug-start', 'debug-step-into', 'debug-step-out', 'debug-step-over', 'debug-stop', 'debug', 'device-camera-video', 'device-camera',
'device-mobile', 'diff-added', 'diff-ignored', 'diff-modified', 'diff-removed', 'diff-renamed', 'diff', 'discard', 'editor-layout',
'empty-window', 'exclude', 'extensions', 'eye-closed', 'file-binary', 'file-code', 'file-media', 'file-pdf', 'file-submodule',
'file-symlink-directory', 'file-symlink-file', 'file-zip', 'files', 'filter', 'flame', 'fold-down', 'fold-up', 'fold', 'folder-active',
'folder-opened', 'gear', 'gift', 'gist-secret', 'gist', 'git-commit', 'git-compare', 'git-merge', 'github-action', 'github-alt', 'globe',
'grabber', 'graph', 'gripper', 'heart', 'home', 'horizontal-rule', 'hubot', 'inbox', 'issue-closed', 'issue-reopened', 'issues', 'italic',
'jersey', 'json', 'kebab-vertical', 'key', 'law', 'lightbulb-autofix', 'link-external', 'link', 'list-ordered', 'list-unordered', 'live-share',
'loading', 'location', 'mail-read', 'mail', 'markdown', 'megaphone', 'mention', 'milestone', 'mortar-board', 'move', 'multiple-windows', 'mute',
'no-newline', 'note', 'octoface', 'open-preview', 'package', 'paintcan', 'pin', 'play', 'run', 'plug', 'preserve-case', 'preview', 'project',
'pulse', 'question', 'quote', 'radio-tower', 'reactions', 'references', 'refresh', 'regex', 'remote-explorer', 'remote', 'remove', 'replace-all',
'replace', 'repo-clone', 'repo-force-push', 'repo-pull', 'repo-push', 'report', 'request-changes', 'rocket', 'root-folder-opened', 'root-folder',
'rss', 'ruby', 'save-all', 'save-as', 'save', 'screen-full', 'screen-normal', 'search-stop', 'server', 'settings-gear', 'settings', 'shield',
'smiley', 'sort-precedence', 'split-horizontal', 'split-vertical', 'squirrel', 'star-full', 'star-half', 'symbol-class', 'symbol-color',
'symbol-constant', 'symbol-enum-member', 'symbol-field', 'symbol-file', 'symbol-interface', 'symbol-keyword', 'symbol-misc', 'symbol-operator',
'symbol-property', 'wrench', 'wrench-subaction', 'symbol-snippet', 'tasklist', 'telescope', 'text-size', 'three-bars', 'thumbsdown', 'thumbsup',
'tools', 'triangle-down', 'triangle-left', 'triangle-right', 'triangle-up', 'twitter', 'unfold', 'unlock', 'unmute', 'unverified', 'verified',
'versions', 'vm-active', 'vm-outline', 'vm-running', 'watch', 'whitespace', 'whole-word', 'window', 'word-wrap', 'zoom-in', 'zoom-out',
'list-filter', 'list-flat', 'list-selection', 'selection', 'list-tree', 'debug-breakpoint-function-unverified', 'debug-breakpoint-function',
'debug-breakpoint-function-disabled', 'debug-stackframe-active', 'debug-stackframe-dot', 'debug-stackframe', 'debug-stackframe-focused',
'debug-breakpoint-unsupported', 'symbol-string', 'debug-reverse-continue', 'debug-step-back', 'debug-restart-frame', 'call-incoming',
'call-outgoing', 'menu', 'expand-all', 'feedback', 'group-by-ref-type', 'ungroup-by-ref-type', 'account', 'bell-dot', 'debug-console', 'library',
'output', 'run-all', 'sync-ignored', 'pinned', 'github-inverted', 'debug-alt', 'server-process', 'server-environment', 'pass', 'stop-circle',
'play-circle', 'record', 'debug-alt-small', 'vm-connect', 'cloud', 'merge', 'export', 'graph-left', 'magnet',
].map(icon => <ToolbarButton icon={icon} title={icon} onClick={() => {}}></ToolbarButton>)}
</Toolbar>;
export const AllButtons = AllTemplate.bind({});

33
src/web/components/toolbarButton.stories.tsx
View File

@ -1,33 +0,0 @@
/*
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 { ToolbarButton, ToolbarButtonProps } from './toolbarButton';
export default {
title: 'Components/ToolbarButton',
component: ToolbarButton,
} as Meta;
const Template: Story<ToolbarButtonProps> = args => <ToolbarButton {...args} />;
export const Primary = Template.bind({});
Primary.args = {
title: 'Close',
icon: 'close',
onClick: () => {}
};

93
src/web/recorder/callLog.example.ts
View File

@ -1,93 +0,0 @@
/*
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 { CallLog } from '../../server/supplements/recorder/recorderTypes';
export function exampleCallLog(): CallLog[] {
return [
{
'id': 3,
'messages': [],
'title': 'newPage',
'status': 'done',
'duration': 100,
'params': {},
'snapshots': {
'before': true,
'in': false,
'after': true,
}
},
{
'id': 4,
'messages': [
'navigating to "https://github.com/microsoft", waiting until "load"',
],
'title': 'goto',
'status': 'done',
'params': {
'url': 'https://github.com/microsoft'
},
'snapshots': {
'before': true,
'in': false,
'after': true,
},
'duration': 1100,
},
{
'id': 5,
'messages': [
'waiting for selector "input[aria-label="Find a repository…"]"',
' selector resolved to visible <input name="q" value=" type="search" autocomplete="of…/>',
'attempting click action',
' waiting for element to be visible, enabled and stable',
' element is visible, enabled and stable',
' scrolling into view if needed',
' done scrolling',
' checking that element receives pointer events at (351.6,291)',
' element does receive pointer events',
' performing click action'
],
'title': 'click',
'status': 'paused',
'params': {
'selector': 'input[aria-label="Find a repository…"]'
},
'snapshots': {
'before': true,
'in': true,
'after': false,
}
},
{
'id': 6,
'messages': [
'navigating to "https://github.com/microsoft", waiting until "load"',
],
'error': 'Error occured',
'title': 'error',
'status': 'error',
'params': {
},
'snapshots': {
'before': false,
'in': false,
'after': false,
}
},
];
}

37
src/web/recorder/callLog.stories.tsx
View File

@ -1,37 +0,0 @@
/*
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 { CallLogProps, CallLogView } from './callLog';
import { exampleCallLog } from './callLog.example';
export default {
title: 'Recorder/CallLog',
component: CallLogView,
parameters: {
viewport: {
defaultViewport: 'recorder'
}
}
} as Meta;
const Template: Story<CallLogProps> = args => <CallLogView {...args} />;
export const Primary = Template.bind({});
Primary.args = {
log: exampleCallLog()
};

109
src/web/recorder/recorder.stories.tsx
View File

@ -1,109 +0,0 @@
/*
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 { exampleCallLog } from './callLog.example';
import { Recorder, RecorderProps } from './recorder';
export default {
title: 'Recorder/Recorder',
component: Recorder,
parameters: {
viewport: {
defaultViewport: 'recorder'
}
}
} as Meta;
const Template: Story<RecorderProps> = args => <Recorder {...args} />;
export const Primary = Template.bind({});
Primary.args = {
sources: [],
paused: false,
log: [],
mode: 'none'
};
export const OneSource = Template.bind({});
OneSource.args = {
sources: [
{
file: '<one>',
text: '// Text One',
language: 'javascript',
highlight: [],
},
],
paused: false,
log: [],
mode: 'none'
};
export const TwoSources = Template.bind({});
TwoSources.args = {
sources: [
{
file: '<one>',
text: '// Text One',
language: 'javascript',
highlight: [],
},
{
file: '<two>',
text: '// Text Two',
language: 'javascript',
highlight: [],
},
],
paused: false,
log: [],
mode: 'none'
};
export const WithLog = Template.bind({});
WithLog.args = {
sources: [
],
paused: false,
log: exampleCallLog(),
mode: 'none'
};
export const Inspecting = Template.bind({});
Inspecting.args = {
sources: [],
paused: false,
log: [],
mode: 'inspecting',
initialSelector: 'text=Find me'
};
export const Recording = Template.bind({});
Recording.args = {
sources: [
{
file: '<javascript>',
text: `await page.click('button');\n\nawait page.click('button');\n`,
language: 'javascript',
highlight: [],
},
],
paused: false,
log: [],
mode: 'recording',
};

60
src/web/traceViewer/ui/actionList.stories.tsx
View File

@ -1,60 +0,0 @@
/*
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 { ActionList, ActionListProps } from './actionList';
export default {
title: 'TraceViewer/ActionList',
component: ActionList,
backgrounds: {
default: '#edebe9',
}
} as Meta;
const Template: Story<ActionListProps> = args => <ActionList {...args} />;
export const Primary = Template.bind({});
Primary.args = {
actions: [
{
actionId: 'id2',
action: {
timestamp: Date.now(),
type: 'action',
contextId: '<context>',
action: 'goto',
value: 'https://github.com/microsoft',
startTime: Date.now(),
endTime: Date.now(),
},
resources: [],
},
{
actionId: 'id',
action: {
timestamp: Date.now(),
type: 'action',
contextId: '<context>',
action: 'click',
selector: 'input[aria-label="Find a repository…"]',
startTime: Date.now(),
endTime: Date.now(),
},
resources: [],
}
]
};

2
src/web/traceViewer/ui/helpers.tsx
View File

@ -43,7 +43,7 @@ export function useMeasure<T extends Element>() {
const target = ref.current;
if (!target)
return;
const resizeObserver = new ResizeObserver(entries => {
const resizeObserver = new ResizeObserver((entries: any) => {
const entry = entries[entries.length - 1];
if (entry && entry.contentRect)
setMeasure(entry.contentRect);