chore(trace): split settings into ui and per-model (#37974)

Author: pavelfeldman

packages/trace-viewer/src/ui/actionList.tsx

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import type { ActionTraceEvent, AfterActionTraceEventAttachment } from '@trace/trace';
+import type { ActionTraceEvent } from '@trace/trace';
 import { clsx, msToString } from '@web/uiUtils';
 import * as React from 'react';
 import './actionList.css';
@@ -34,11 +34,13 @@ export interface ActionListProps {
   selectedAction: ActionTraceEventInContext | undefined,
   selectedTime: Boundaries | undefined,
   setSelectedTime: (time: Boundaries | undefined) => void,
+  treeState: TreeState,
+  setTreeState: (treeState: TreeState) => void,
   sdkLanguage: Language | undefined;
   onSelected?: (action: ActionTraceEventInContext) => void,
   onHighlighted?: (action: ActionTraceEventInContext | undefined) => void,
   revealConsole?: () => void,
-  revealAttachment(attachment: AfterActionTraceEventAttachment): void,
+  revealActionAttachment?(callId: string): void,
   isLive?: boolean,
 }
 
@@ -49,14 +51,15 @@ export const ActionList: React.FC<ActionListProps> = ({
   selectedAction,
   selectedTime,
   setSelectedTime,
+  treeState,
+  setTreeState,
   sdkLanguage,
   onSelected,
   onHighlighted,
   revealConsole,
-  revealAttachment,
+  revealActionAttachment,
   isLive,
 }) => {
-  const [treeState, setTreeState] = React.useState<TreeState>({ expandedItems: new Map() });
   const { rootItem, itemMap } = React.useMemo(() => modelUtil.buildActionTree(actions), [actions]);
 
   const { selectedItem } = React.useMemo(() => {
@@ -73,8 +76,9 @@ export const ActionList: React.FC<ActionListProps> = ({
   }, [setSelectedTime]);
 
   const render = React.useCallback((item: ActionTreeItem) => {
-    return renderAction(item.action!, { sdkLanguage, revealConsole, revealAttachment, isLive, showDuration: true, showBadges: true });
-  }, [isLive, revealConsole, revealAttachment, sdkLanguage]);
+    const showAttachments = !!revealActionAttachment && !!item.action?.attachments?.length;
+    return renderAction(item.action!, { sdkLanguage, revealConsole, revealActionAttachment: () => revealActionAttachment?.(item.action!.callId), isLive, showDuration: true, showBadges: true, showAttachments });
+  }, [isLive, revealConsole, revealActionAttachment, sdkLanguage]);
 
   const isVisible = React.useCallback((item: ActionTreeItem) => {
     return !selectedTime || !item.action || (item.action!.startTime <= selectedTime.maximum && item.action!.endTime >= selectedTime.minimum);
@@ -111,14 +115,14 @@ export const renderAction = (
   options: {
     sdkLanguage?: Language,
     revealConsole?: () => void,
-    revealAttachment?(attachment: AfterActionTraceEventAttachment): void,
+    revealActionAttachment?(): void,
     isLive?: boolean,
     showDuration?: boolean,
     showBadges?: boolean,
+    showAttachments?: boolean,
   }) => {
-  const { sdkLanguage, revealConsole, revealAttachment, isLive, showDuration, showBadges } = options;
+  const { sdkLanguage, revealConsole, revealActionAttachment, isLive, showDuration, showBadges, showAttachments } = options;
   const { errors, warnings } = modelUtil.stats(action);
-  const showAttachments = !!action.attachments?.length && !!revealAttachment;
 
   const locator = action.params.selector ? asLocatorDescription(sdkLanguage || 'javascript', action.params.selector) : undefined;
 
@@ -135,7 +139,7 @@ export const renderAction = (
     <div className='hbox'>
       <span className='action-title-method' title={title}>{elements}</span>
       {(showDuration || showBadges || showAttachments || isSkipped) && <div className='spacer'></div>}
-      {showAttachments && <ToolbarButton icon='attach' title='Open Attachment' onClick={() => revealAttachment(action.attachments![0])} />}
+      {showAttachments && <ToolbarButton icon='attach' title='Open Attachment' onClick={() => revealActionAttachment?.()} />}
       {showDuration && !isSkipped && <div className='action-duration'>{time || <span className='codicon codicon-loading'></span>}</div>}
       {isSkipped && <span className={clsx('action-skipped', 'codicon', testStatusIcon('skipped'))} title='skipped'></span>}
       {showBadges && <div className='action-icons' onClick={() => revealConsole?.()}>

packages/trace-viewer/src/ui/attachmentsTab.tsx

@@ -23,18 +23,17 @@ import { isTextualMimeType } from '@isomorphic/mimeType';
 import { Expandable } from '@web/components/expandable';
 import { linkifyText } from '@web/renderUtils';
 import { clsx, useFlash } from '@web/uiUtils';
-import { TraceModelContext } from './traceModelContext';
+import { useTraceModel } from './traceModelContext';
 
 import type { Attachment, MultiTraceModel } from './modelUtil';
-import type { AfterActionTraceEventAttachment } from '@trace/trace';
 
 type ExpandableAttachmentProps = {
   attachment: Attachment;
-  reveal?: any;
+  reveal: any;
 };
 
 const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> = ({ attachment, reveal }) => {
-  const model = React.useContext(TraceModelContext);
+  const model = useTraceModel();
   const [expanded, setExpanded] = React.useState(false);
   const [attachmentText, setAttachmentText] = React.useState<string | null>(null);
   const [placeholder, setPlaceholder] = React.useState<string | null>(null);
@@ -94,9 +93,9 @@ const ExpandableAttachment: React.FunctionComponent<ExpandableAttachmentProps> =
 };
 
 export const AttachmentsTab: React.FunctionComponent<{
-  revealedAttachment?: [AfterActionTraceEventAttachment, number],
-}> = ({ revealedAttachment }) => {
-  const model = React.useContext(TraceModelContext);
+  revealedAttachmentCallId?: { callId: string },
+}> = ({ revealedAttachmentCallId }) => {
+  const model = useTraceModel();
   const { diffMap, screenshots, attachments } = React.useMemo(() => {
     const attachments = new Set(model?.visibleAttachments ?? []);
     const screenshots = new Set<Attachment>();
@@ -149,17 +148,13 @@ export const AttachmentsTab: React.FunctionComponent<{
       return <div className='attachment-item' key={attachmentKey(a, i)}>
         <ExpandableAttachment
           attachment={a}
-          reveal={(!!revealedAttachment && isEqualAttachment(a, revealedAttachment[0])) ? revealedAttachment : undefined}
+          reveal={!!revealedAttachmentCallId && a.callId === revealedAttachmentCallId.callId ? revealedAttachmentCallId : undefined}
         />
       </div>;
     })}
   </div>;
 };
 
-function isEqualAttachment(a: Attachment, b: AfterActionTraceEventAttachment): boolean {
-  return a.name === b.name && a.path === b.path && a.sha1 === b.sha1;
-}
-
 export function attachmentURL(model: MultiTraceModel | undefined, attachment: Attachment) {
   if (model && attachment.sha1)
     return model.createRelativeUrl(`sha1/${attachment.sha1}`) ;

packages/trace-viewer/src/ui/consoleTab.tsx

@@ -130,7 +130,7 @@ export const ConsoleTab: React.FunctionComponent<{
   boundaries: Boundaries,
   consoleModel: ConsoleTabModel,
   selectedTime?: Boundaries | undefined,
-  onEntryHovered?: (entry: ConsoleEntry | undefined) => void,
+  onEntryHovered?: (ordinal: number | undefined) => void,
   onAccepted?: (entry: ConsoleEntry) => void,
 }> = ({ consoleModel, boundaries, onEntryHovered, onAccepted }) => {
   if (!consoleModel.entries.length)
@@ -140,7 +140,7 @@ export const ConsoleTab: React.FunctionComponent<{
     <ConsoleListView
       name='console'
       onAccepted={onAccepted}
-      onHighlighted={onEntryHovered}
+      onHighlighted={entry => onEntryHovered?.(entry ? consoleModel.entries.indexOf(entry) : undefined)}
       items={consoleModel.entries}
       isError={entry => entry.isError}
       isWarning={entry => entry.isWarning}

packages/trace-viewer/src/ui/errorsTab.tsx

@@ -27,7 +27,7 @@ import { copyPrompt, stripAnsiEscapes } from '@web/shared/prompts';
 import { MetadataWithCommitInfo } from '@testIsomorphic/types';
 import { calculateSha1 } from './sourceTab';
 import type { StackFrame } from '@protocol/channels';
-import { TraceModelContext } from './traceModelContext';
+import { useTraceModel } from './traceModelContext';
 
 const CopyPromptButton: React.FC<{ prompt: string }> = ({ prompt }) => {
   return (
@@ -91,7 +91,7 @@ export const ErrorsTab: React.FunctionComponent<{
   revealInSource: (error: modelUtil.ErrorDescription) => void,
   testRunMetadata: MetadataWithCommitInfo | undefined,
 }> = ({ errorsModel, sdkLanguage, revealInSource, wallTime, testRunMetadata }) => {
-  const model = React.useContext(TraceModelContext);
+  const model = useTraceModel();
   const errorContext = useAsyncMemo(async () => {
     const attachment = model?.attachments.find(a => a.name === 'error-context');
     if (!attachment)

packages/trace-viewer/src/ui/filmStrip.tsx

@@ -22,7 +22,7 @@ import type { PageEntry } from '../types/entries';
 import type { ActionTraceEventInContext } from './modelUtil';
 import { renderAction } from './actionList';
 import type { Language } from '@isomorphic/locatorGenerators';
-import { TraceModelContext } from './traceModelContext';
+import { useTraceModel } from './traceModelContext';
 
 export type FilmStripPreviewPoint = {
   x: number;
@@ -39,7 +39,7 @@ export const FilmStrip: React.FunctionComponent<{
   boundaries: Boundaries,
   previewPoint?: FilmStripPreviewPoint,
 }> = ({ boundaries, previewPoint }) => {
-  const model = React.useContext(TraceModelContext);
+  const model = useTraceModel();
   const [measure, ref] = useMeasure<HTMLDivElement>();
   const lanesRef = React.useRef<HTMLDivElement>(null);
 
@@ -90,7 +90,7 @@ const FilmStripLane: React.FunctionComponent<{
   page: PageEntry,
   width: number,
 }> = ({ boundaries, page, width }) => {
-  const model = React.useContext(TraceModelContext);
+  const model = useTraceModel();
   const viewportSize = { width: 0, height: 0 };
   const screencastFrames = page.screencastFrames;
   for (const frame of screencastFrames) {

packages/trace-viewer/src/ui/liveWorkbenchLoader.tsx

@@ -20,7 +20,6 @@ import './workbenchLoader.css';
 import { Workbench } from './workbench';
 
 import type { ContextEntry } from '../types/entries';
-import { TraceModelContext } from './traceModelContext';
 
 export const LiveWorkbenchLoader: React.FC<{ traceJson: string }> = ({ traceJson }) => {
   const [model, setModel] = React.useState<MultiTraceModel | undefined>(undefined);
@@ -49,9 +48,7 @@ export const LiveWorkbenchLoader: React.FC<{ traceJson: string }> = ({ traceJson
     };
   }, [traceJson, counter]);
 
-  return <TraceModelContext.Provider value={model}>
-    <Workbench isLive={true} />
-  </TraceModelContext.Provider>;
+  return <Workbench isLive={true} model={model} />;
 };
 
 async function loadSingleTraceFile(traceJson: string): Promise<MultiTraceModel> {

packages/trace-viewer/src/ui/modelUtil.ts

@@ -59,7 +59,7 @@ export type ErrorDescription = {
   message: string;
 };
 
-export type Attachment = trace.AfterActionTraceEventAttachment;
+export type Attachment = trace.AfterActionTraceEventAttachment & { callId: string };
 
 export class MultiTraceModel {
   readonly startTime: number;
@@ -112,7 +112,7 @@ export class MultiTraceModel {
     this.hasSource = contexts.some(c => c.hasSource);
     this.hasStepData = contexts.some(context => context.origin === 'testRunner');
     this.resources = [...contexts.map(c => c.resources)].flat();
-    this.attachments = this.actions.flatMap(action => action.attachments?.map(attachment => ({ ...attachment, traceUrl })) ?? []);
+    this.attachments = this.actions.flatMap(action => action.attachments?.map(attachment => ({ ...attachment, callId: action.callId, traceUrl })) ?? []);
     this.visibleAttachments = this.attachments.filter(attachment => !attachment.name.startsWith('_'));
 
     this.events.sort((a1, a2) => a1.time - a2.time);

packages/trace-viewer/src/ui/networkResourceDetails.tsx

@@ -26,7 +26,7 @@ import { getAPIRequestCodeGen } from './codegen';
 import type { Language } from '@isomorphic/locatorGenerators';
 import { msToString, useAsyncMemo } from '@web/uiUtils';
 import type { Entry } from '@trace/har';
-import { TraceModelContext } from './traceModelContext';
+import { useTraceModel } from './traceModelContext';
 
 type RequestBody = { text: string, mimeType?: string } | null;
 
@@ -38,7 +38,7 @@ export const NetworkResourceDetails: React.FunctionComponent<{
   onClose: () => void;
 }> = ({ resource, sdkLanguage, startTimeOffset, onClose }) => {
   const [selectedTab, setSelectedTab] = React.useState('request');
-  const model = React.useContext(TraceModelContext);
+  const model = useTraceModel();
 
   const requestBody = useAsyncMemo<RequestBody>(async () => {
     if (model && resource.request.postData) {
@@ -147,7 +147,7 @@ const ResponseTab: React.FunctionComponent<{
 const BodyTab: React.FunctionComponent<{
   resource: ResourceSnapshot;
 }> = ({ resource }) => {
-  const model = React.useContext(TraceModelContext);
+  const model = useTraceModel();
   const [responseBody, setResponseBody] = React.useState<{ dataUrl?: string, text?: string, mimeType?: string, font?: BufferSource } | null>(null);
 
   React.useEffect(() => {

packages/trace-viewer/src/ui/networkTab.tsx

@@ -34,6 +34,7 @@ type NetworkTabModel = {
 };
 
 type RenderedEntry = {
+  ordinal: number,
   name: { name: string, url: string },
   method: string,
   status: { code: number, text: string },
@@ -66,15 +67,15 @@ export function useNetworkTabModel(model: MultiTraceModel | undefined, selectedT
 export const NetworkTab: React.FunctionComponent<{
   boundaries: Boundaries,
   networkModel: NetworkTabModel,
-  onEntryHovered?: (entry: Entry | undefined) => void,
+  onResourceHovered?: (ordinal: number | undefined) => void,
   sdkLanguage: Language,
-}> = ({ boundaries, networkModel, onEntryHovered, sdkLanguage }) => {
+}> = ({ boundaries, networkModel, onResourceHovered, sdkLanguage }) => {
   const [sorting, setSorting] = React.useState<Sorting | undefined>(undefined);
   const [selectedEntry, setSelectedEntry] = React.useState<RenderedEntry | undefined>(undefined);
   const [filterState, setFilterState] = React.useState(defaultFilterState);
 
   const { renderedEntries } = React.useMemo(() => {
-    const renderedEntries = networkModel.resources.map(entry => renderEntry(entry, boundaries, networkModel.contextIdMap)).filter(filterEntry(filterState));
+    const renderedEntries = networkModel.resources.map((entry, i) => renderEntry(entry, boundaries, networkModel.contextIdMap, i)).filter(filterEntry(filterState));
     if (sorting)
       sort(renderedEntries, sorting);
     return { renderedEntries };
@@ -98,7 +99,7 @@ export const NetworkTab: React.FunctionComponent<{
     items={renderedEntries}
     selectedItem={selectedEntry}
     onSelected={item => setSelectedEntry(item)}
-    onHighlighted={item => onEntryHovered?.(item?.resource)}
+    onHighlighted={item => onResourceHovered?.(item?.ordinal)}
     columns={visibleColumns(!!selectedEntry, renderedEntries)}
     columnTitle={columnTitle}
     columnWidths={columnWidths}
@@ -261,7 +262,7 @@ function hasMultipleContexts(renderedEntries: RenderedEntry[]): boolean {
   return false;
 }
 
-const renderEntry = (resource: Entry, boundaries: Boundaries, contextIdGenerator: ContextIdMap): RenderedEntry => {
+const renderEntry = (resource: Entry, boundaries: Boundaries, contextIdGenerator: ContextIdMap, ordinal: number): RenderedEntry => {
   const routeStatus = formatRouteStatus(resource);
   let resourceName: string;
   try {
@@ -280,6 +281,7 @@ const renderEntry = (resource: Entry, boundaries: Boundaries, contextIdGenerator
     contentType = charset[1];
 
   return {
+    ordinal,
     name: { name: resourceName, url: resource.request.url },
     method: resource.request.method,
     status: { code: resource.response.status, text: resource.response.statusText },

packages/trace-viewer/src/ui/sourceTab.tsx

@@ -26,10 +26,10 @@ import type { StackFrame } from '@protocol/channels';
 import { CopyToClipboard } from './copyToClipboard';
 import { ToolbarButton } from '@web/components/toolbarButton';
 import { Toolbar } from '@web/components/toolbar';
-import { TraceModelContext } from './traceModelContext';
+import { useTraceModel } from './traceModelContext';
 
 function useSources(stack: StackFrame[] | undefined, selectedFrame: number, sources: Map<string, SourceModel>, rootDir?: string, fallbackLocation?: SourceLocation) {
-  const model = React.useContext(TraceModelContext);
+  const model = useTraceModel();
   return useAsyncMemo<{ source: SourceModel, targetLine?: number, fileName?: string, highlight: SourceHighlight[], location?: SourceLocation }>(async () => {
     const actionLocation = stack?.[selectedFrame];
     const location = actionLocation?.file ? actionLocation : fallbackLocation;