chore: implement tree w/o list

packages/playwright/src/matchers/toMatchAriaSnapshot.ts

@@ -49,8 +49,8 @@ export async function toMatchAriaSnapshot(
 
   const messagePrefix = matcherHint(this, receiver, matcherName, 'locator', undefined, matcherOptions, timedOut ? timeout : undefined);
   const notFound = received === kNoElementsFoundError;
-  const escapedExpected = escapePrivateUsePoints(expected);
-  const escapedReceived = escapePrivateUsePoints(received);
+  const escapedExpected = unshift(escapePrivateUsePoints(expected));
+  const escapedReceived = unshift(escapePrivateUsePoints(received));
   const message = () => {
     if (pass) {
       if (notFound)
@@ -79,3 +79,17 @@ export async function toMatchAriaSnapshot(
 function escapePrivateUsePoints(str: string) {
   return str.replace(/[\uE000-\uF8FF]/g, char => `\\u${char.charCodeAt(0).toString(16).padStart(4, '0')}`);
 }
+
+function unshift(snapshot: string): string {
+  const lines = snapshot.split('\n');
+  let whitespacePrefixLength = 100;
+  for (const line of lines) {
+    if (!line.trim())
+      continue;
+    const match = line.match(/^(\s*)/);
+    if (match && match[1].length < whitespacePrefixLength)
+      whitespacePrefixLength = match[1].length;
+    break;
+  }
+  return lines.filter(t => t.trim()).map(line => line.substring(whitespacePrefixLength)).join('\n');
+}

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

@@ -59,6 +59,30 @@ export const ActionList: React.FC<ActionListProps> = ({
     return { selectedItem };
   }, [itemMap, selectedAction]);
 
+  const isError = React.useCallback((item: ActionTreeItem) => {
+    return !!item.action?.error?.message;
+  }, []);
+
+  const onAccepted = React.useCallback((item: ActionTreeItem) => {
+    return setSelectedTime({ minimum: item.action!.startTime, maximum: item.action!.endTime });
+  }, [setSelectedTime]);
+
+  const render = React.useCallback((item: ActionTreeItem) => {
+    return renderAction(item.action!, { sdkLanguage, revealConsole, isLive, showDuration: true, showBadges: true });
+  }, [isLive, revealConsole, sdkLanguage]);
+
+  const isVisible = React.useCallback((item: ActionTreeItem) => {
+    return !selectedTime || !item.action || (item.action!.startTime <= selectedTime.maximum && item.action!.endTime >= selectedTime.minimum);
+  }, [selectedTime]);
+
+  const onSelectedAction = React.useCallback((item: ActionTreeItem) => {
+    onSelected?.(item.action!);
+  }, [onSelected]);
+
+  const onHighlightedAction = React.useCallback((item: ActionTreeItem | undefined) => {
+    onHighlighted?.(item?.action);
+  }, [onHighlighted]);
+
   return <div className='vbox'>
     {selectedTime && <div className='action-list-show-all' onClick={() => setSelectedTime(undefined)}><span className='codicon codicon-triangle-left'></span>Show all</div>}
     <ActionTreeView
@@ -67,12 +91,12 @@ export const ActionList: React.FC<ActionListProps> = ({
       treeState={treeState}
       setTreeState={setTreeState}
       selectedItem={selectedItem}
-      onSelected={item => onSelected?.(item.action!)}
-      onHighlighted={item => onHighlighted?.(item?.action)}
-      onAccepted={item => setSelectedTime({ minimum: item.action!.startTime, maximum: item.action!.endTime })}
-      isError={item => !!item.action?.error?.message}
-      isVisible={item => !selectedTime || (item.action!.startTime <= selectedTime.maximum && item.action!.endTime >= selectedTime.minimum)}
-      render={item => renderAction(item.action!, { sdkLanguage, revealConsole, isLive, showDuration: true, showBadges: true })}
+      onSelected={onSelectedAction}
+      onHighlighted={onHighlightedAction}
+      onAccepted={onAccepted}
+      isError={isError}
+      isVisible={isVisible}
+      render={render}
     />
   </div>;
 };

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

@@ -161,7 +161,7 @@ export const TestListView: React.FC<{
     render={treeItem => {
       return <div className='hbox ui-mode-tree-item'>
         <div className='ui-mode-tree-item-title'>
-          <span title={treeItem.title}>{treeItem.title}</span>
+          <span>{treeItem.title}</span>
           {treeItem.kind === 'case' ? treeItem.tags.map(tag => <TagView key={tag} tag={tag.slice(1)} onClick={e => handleTagClick(e, tag)} />) : null}
         </div>
         {!!treeItem.duration && treeItem.status !== 'skipped' && <div className='ui-mode-tree-item-time'>{msToString(treeItem.duration)}</div>}
@@ -179,6 +179,7 @@ export const TestListView: React.FC<{
       </div>;
     }}
     icon={treeItem => testStatusIcon(treeItem.status)}
+    title={treeItem => treeItem.title}
     selectedItem={selectedTreeItem}
     onAccepted={runTreeItem}
     onSelected={treeItem => {

packages/web/src/components/toolbarButton.tsx

@@ -52,7 +52,7 @@ export const ToolbarButton: React.FC<React.PropsWithChildren<ToolbarButtonProps>
     disabled={!!disabled}
     style={style}
     data-testid={testId}
-    aria-label={ariaLabel}
+    aria-label={ariaLabel || title}
   >
     {icon && <span className={`codicon codicon-${icon}`} style={children ? { marginRight: 5 } : {}}></span>}
     {children}