mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
/**
|
|
* 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 type { StackFrame } from '@protocol/channels';
|
|
import type { ActionTraceEvent } from '@trace/trace';
|
|
import { Source as SourceView } from '@web/components/source';
|
|
import { SplitView } from '@web/components/splitView';
|
|
import * as React from 'react';
|
|
import { useAsyncMemo } from './helpers';
|
|
import './sourceTab.css';
|
|
import { StackTraceView } from './stackTrace';
|
|
|
|
type StackInfo = string | {
|
|
frames: StackFrame[];
|
|
fileContent: Map<string, string>;
|
|
};
|
|
|
|
export const SourceTab: React.FunctionComponent<{
|
|
action: ActionTraceEvent | undefined,
|
|
}> = ({ action }) => {
|
|
const [lastAction, setLastAction] = React.useState<ActionTraceEvent | undefined>();
|
|
const [selectedFrame, setSelectedFrame] = React.useState<number>(0);
|
|
const [needReveal, setNeedReveal] = React.useState<boolean>(false);
|
|
|
|
if (lastAction !== action) {
|
|
setLastAction(action);
|
|
setSelectedFrame(0);
|
|
setNeedReveal(true);
|
|
}
|
|
|
|
const stackInfo = React.useMemo<StackInfo>(() => {
|
|
if (!action)
|
|
return '';
|
|
const frames = action.stack || [];
|
|
return {
|
|
frames,
|
|
fileContent: new Map(),
|
|
};
|
|
}, [action]);
|
|
|
|
const content = useAsyncMemo<string>(async () => {
|
|
let value: string;
|
|
if (typeof stackInfo === 'string') {
|
|
value = stackInfo;
|
|
} else {
|
|
const filePath = stackInfo.frames[selectedFrame]?.file;
|
|
if (!filePath)
|
|
return '';
|
|
if (!stackInfo.fileContent.has(filePath)) {
|
|
const sha1 = await calculateSha1(filePath);
|
|
stackInfo.fileContent.set(filePath, await fetch(`sha1/src@${sha1}.txt`).then(response => response.text()).catch(e => `<Unable to read "${filePath}">`));
|
|
}
|
|
value = stackInfo.fileContent.get(filePath)!;
|
|
}
|
|
return value;
|
|
}, [stackInfo, selectedFrame], '');
|
|
|
|
const targetLine = typeof stackInfo === 'string' ? 0 : stackInfo.frames[selectedFrame]?.line || 0;
|
|
|
|
const targetLineRef = React.useRef<HTMLDivElement>(null);
|
|
React.useLayoutEffect(() => {
|
|
if (needReveal && targetLineRef.current) {
|
|
targetLineRef.current.scrollIntoView({ block: 'center', inline: 'nearest' });
|
|
setNeedReveal(false);
|
|
}
|
|
}, [needReveal, targetLineRef]);
|
|
|
|
return <SplitView sidebarSize={200} orientation='horizontal'>
|
|
<SourceView text={content} language='javascript' highlight={[{ line: targetLine, type: 'running' }]} revealLine={targetLine}></SourceView>
|
|
<StackTraceView action={action} selectedFrame={selectedFrame} setSelectedFrame={setSelectedFrame}></StackTraceView>
|
|
</SplitView>;
|
|
};
|
|
|
|
export async function calculateSha1(text: string): Promise<string> {
|
|
const buffer = new TextEncoder().encode(text);
|
|
const hash = await crypto.subtle.digest('SHA-1', buffer);
|
|
const hexCodes = [];
|
|
const view = new DataView(hash);
|
|
for (let i = 0; i < view.byteLength; i += 1) {
|
|
const byte = view.getUint8(i).toString(16).padStart(2, '0');
|
|
hexCodes.push(byte);
|
|
}
|
|
return hexCodes.join('');
|
|
}
|