mirror of
https://github.com/microsoft/playwright.git
synced 2024-10-27 13:50:25 +03:00
chore: highlight ansi in browser messages as well (#26881)
This commit is contained in:
parent
e065a927bb
commit
e0db46ae14
@ -22,15 +22,16 @@ import { ListView } from '@web/components/listView';
|
||||
import type { Boundaries } from '../geometry';
|
||||
import { msToString } from '@web/uiUtils';
|
||||
import { ansi2html } from '@web/ansi2html';
|
||||
import type * as trace from '@trace/trace';
|
||||
import { PlaceholderPanel } from './placeholderPanel';
|
||||
|
||||
export type ConsoleEntry = {
|
||||
browserMessage?: trace.ConsoleMessageTraceEvent['initializer'],
|
||||
browserMessage?: {
|
||||
body: JSX.Element[];
|
||||
location: string;
|
||||
},
|
||||
browserError?: channels.SerializedError;
|
||||
nodeMessage?: {
|
||||
text?: string;
|
||||
base64?: string;
|
||||
html: string;
|
||||
},
|
||||
isError: boolean;
|
||||
isWarning: boolean;
|
||||
@ -54,12 +55,23 @@ export function useConsoleTabModel(model: modelUtil.MultiTraceModel | undefined,
|
||||
continue;
|
||||
if (event.method === 'console') {
|
||||
const { guid } = event.params.message;
|
||||
entries.push({
|
||||
browserMessage: modelUtil.context(event).initializers[guid],
|
||||
isError: modelUtil.context(event).initializers[guid]?.type === 'error',
|
||||
isWarning: modelUtil.context(event).initializers[guid]?.type === 'warning',
|
||||
timestamp: event.time,
|
||||
});
|
||||
const browserMessage = modelUtil.context(event).initializers[guid];
|
||||
if (browserMessage) {
|
||||
const body = browserMessage.args && browserMessage.args.length ? format(browserMessage.args) : formatAnsi(browserMessage.text);
|
||||
const url = browserMessage.location.url;
|
||||
const filename = url ? url.substring(url.lastIndexOf('/') + 1) : '<anonymous>';
|
||||
const location = `${filename}:${browserMessage.location.lineNumber}`;
|
||||
|
||||
entries.push({
|
||||
browserMessage: {
|
||||
body,
|
||||
location,
|
||||
},
|
||||
isError: modelUtil.context(event).initializers[guid]?.type === 'error',
|
||||
isWarning: modelUtil.context(event).initializers[guid]?.type === 'warning',
|
||||
timestamp: event.time,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (event.method === 'pageError') {
|
||||
entries.push({
|
||||
@ -71,11 +83,14 @@ export function useConsoleTabModel(model: modelUtil.MultiTraceModel | undefined,
|
||||
}
|
||||
}
|
||||
for (const event of model.stdio) {
|
||||
let html = '';
|
||||
if (event.text)
|
||||
html = ansi2html(event.text.trim()) || '';
|
||||
if (event.base64)
|
||||
html = ansi2html(atob(event.base64).trim()) || '';
|
||||
|
||||
entries.push({
|
||||
nodeMessage: {
|
||||
text: event.text,
|
||||
base64: event.base64,
|
||||
},
|
||||
nodeMessage: { html },
|
||||
isError: event.type === 'stderr',
|
||||
isWarning: false,
|
||||
timestamp: event.timestamp,
|
||||
@ -119,11 +134,8 @@ export const ConsoleTab: React.FunctionComponent<{
|
||||
|
||||
const { browserMessage, browserError, nodeMessage } = entry;
|
||||
if (browserMessage) {
|
||||
const text = browserMessage.args && browserMessage.args.length ? format(browserMessage.args) : browserMessage.text;
|
||||
const url = browserMessage.location.url;
|
||||
const filename = url ? url.substring(url.lastIndexOf('/') + 1) : '<anonymous>';
|
||||
locationText = `${filename}:${browserMessage.location.lineNumber}`;
|
||||
messageBody = text;
|
||||
locationText = browserMessage.location;
|
||||
messageBody = browserMessage.body;
|
||||
}
|
||||
|
||||
if (browserError) {
|
||||
@ -136,11 +148,8 @@ export const ConsoleTab: React.FunctionComponent<{
|
||||
}
|
||||
}
|
||||
|
||||
if (nodeMessage?.text)
|
||||
messageInnerHTML = ansi2html(nodeMessage.text.trim()) || '';
|
||||
|
||||
if (nodeMessage?.base64)
|
||||
messageInnerHTML = ansi2html(atob(nodeMessage.base64).trim()) || '';
|
||||
if (nodeMessage)
|
||||
messageInnerHTML = nodeMessage.html;
|
||||
|
||||
return <div className='console-line'>
|
||||
{timestampElement}
|
||||
@ -157,7 +166,8 @@ export const ConsoleTab: React.FunctionComponent<{
|
||||
|
||||
function format(args: { preview: string, value: any }[]): JSX.Element[] {
|
||||
if (args.length === 1)
|
||||
return [<span>{args[0].preview}</span>];
|
||||
return formatAnsi(args[0].preview);
|
||||
|
||||
const hasMessageFormat = typeof args[0].value === 'string' && args[0].value.includes('%');
|
||||
const messageFormat = hasMessageFormat ? args[0].value as string : '';
|
||||
const tail = hasMessageFormat ? args.slice(1) : args;
|
||||
@ -203,6 +213,10 @@ function format(args: { preview: string, value: any }[]): JSX.Element[] {
|
||||
return formatted;
|
||||
}
|
||||
|
||||
function formatAnsi(text: string): JSX.Element[] {
|
||||
return [<span dangerouslySetInnerHTML={{ __html: ansi2html(text.trim()) }}></span>];
|
||||
}
|
||||
|
||||
function parseCSSStyle(cssFormat: string): Record<string, string | number> {
|
||||
try {
|
||||
const styleObject: Record<string, string | number> = {};
|
||||
|
Loading…
Reference in New Issue
Block a user