5ad32757c1
1. Script name instead of repeating “Long Animation Frame” text. Showing script 2 by default, and + more if there are more scripts 2. Task timeline will use Green, Yellow and Red (<100ms, >100ms, >200ms) respectively. 3. Improved formatting, fonts, etc.
63 lines
No EOL
1.8 KiB
TypeScript
63 lines
No EOL
1.8 KiB
TypeScript
import React from 'react'
|
|
import { LongAnimationTask } from './type'
|
|
import { Tag } from 'antd';
|
|
import { Code } from 'lucide-react';
|
|
|
|
function getAddress(script: LongAnimationTask['scripts'][number]) {
|
|
return `${script.sourceURL}${script.sourceFunctionName ? ':' + script.sourceFunctionName : ''}${script.sourceCharPosition && script.sourceCharPosition >= 0 ? ':' + script.sourceCharPosition : ''}`;
|
|
}
|
|
function ScriptTitle({
|
|
script,
|
|
}: {
|
|
script: LongAnimationTask['scripts'][number]
|
|
}) {
|
|
return script.invokerType ? (
|
|
<span className=''>{script.invokerType}</span>
|
|
) : (
|
|
<span>{script.name}</span>
|
|
)
|
|
}
|
|
|
|
function ScriptInfo({
|
|
script,
|
|
}: {
|
|
script: LongAnimationTask['scripts'][number];
|
|
}) {
|
|
const hasInvoker = script.invoker !== script.sourceURL;
|
|
return (
|
|
<div className={''}>
|
|
{hasInvoker ? (
|
|
<InfoEntry title={'invoker:'} value={script.invoker} />
|
|
) : null}
|
|
<InfoEntry title={'address:'} value={getAddress(script)} />
|
|
<InfoEntry title={'script execution:'} value={`${Math.round(script.duration)} ms`} />
|
|
<InfoEntry title={'pause duration:'} value={`${Math.round(script.pauseDuration)} ms`} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InfoEntry({
|
|
title,
|
|
value,
|
|
}: {
|
|
title: string;
|
|
value: string | number;
|
|
}) {
|
|
return (
|
|
<div className={'flex items-center gap-1 text-sm'}>
|
|
<div className={''}>{title}</div>
|
|
<div className='font-mono text-neutral-600'>{value}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Script({ script }: { script: LongAnimationTask['scripts'][number] }) {
|
|
return (
|
|
<div className="flex flex-col mb-4">
|
|
<Tag className='w-fit font-mono text-sm font-bold flex gap-1 items-center rounded-lg'><Code size={12} /> <ScriptTitle script={script} /></Tag>
|
|
<ScriptInfo script={script} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Script |