chore(trace): render error background (#21135)

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

@@ -68,15 +68,3 @@
   padding-left: 5px;
   color: var(--blue);
 }
-
-.action-entry .codicon {
-  padding: 0 2px;
-}
-
-.action-entry .codicon-error, .action-entry .codicon-issues {
-  color: red;
-}
-
-.action-entry .codicon-warning {
-  color: darkorange;
-}

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

@@ -46,6 +46,7 @@ export const ActionList: React.FC<ActionListProps> = ({
     onSelected={(action: ActionTraceEvent) => onSelected(action)}
     onHighlighted={(action: ActionTraceEvent) => onHighlighted(action)}
     itemKey={(action: ActionTraceEvent) => action.metadata.id}
+    itemType={(action: ActionTraceEvent) => action.metadata.error?.error?.message ? 'error' : undefined}
     itemRender={(action: ActionTraceEvent) => renderAction(action, sdkLanguage, setSelectedTab)}
     showNoItemsMessage={true}
   ></ListView>;
@@ -57,7 +58,6 @@ const renderAction = (
   setSelectedTab: (tab: string) => void
 ) => {
   const { metadata } = action;
-  const error = metadata.error?.error?.message;
   const { errors, warnings } = modelUtil.stats(action);
   const locator = metadata.params.selector ? asLocator(sdkLanguage || 'javascript', metadata.params.selector) : undefined;
 
@@ -72,6 +72,5 @@ const renderAction = (
       {!!errors && <div className='action-icon'><span className={'codicon codicon-error'}></span><span className="action-icon-value">{errors}</span></div>}
       {!!warnings && <div className='action-icon'><span className={'codicon codicon-warning'}></span><span className="action-icon-value">{warnings}</span></div>}
     </div>
-    {error && <div className='codicon codicon-issues' title={error} />}
   </>;
 };

packages/trace-viewer/src/ui/callTab.css

@@ -19,7 +19,6 @@
   line-height: 24px;
   white-space: pre;
   overflow: auto;
-  padding: 6px 0;
   user-select: text;
 }
 
@@ -94,3 +93,13 @@
 .call-value.object {
   color: var(--blue);
 }
+
+.call-error-message {
+  font-family: var(--vscode-editor-font-family);
+  font-weight: var(--vscode-editor-font-weight);
+  font-size: var(--vscode-editor-font-size);
+  background-color: var(--vscode-inputValidation-errorBackground);
+  white-space: pre;
+  overflow: auto;
+  padding: 5px;
+}

packages/web/src/components/listView.css

@@ -59,3 +59,9 @@
   align-items: center;
   justify-content: center;
 }
+
+.list-view-entry.error:not(.selected) {
+  color: var(--vscode-list-errorForeground);
+  background-color: var(--vscode-inputValidation-errorBackground);
+  outline: 1px solid var(--vscode-inputValidation-errorBorder);
+}

packages/web/src/components/listView.tsx

@@ -23,6 +23,7 @@ export type ListViewProps = {
   itemRender: (item: any) => React.ReactNode,
   itemIcon?: (item: any) => string | undefined,
   itemIndent?: (item: any) => number | undefined,
+  itemType: (item: any) => 'error' | undefined,
   selectedItem?: any,
   onAccepted?: (item: any) => void,
   onSelected?: (item: any) => void,
@@ -35,6 +36,7 @@ export const ListView: React.FC<ListViewProps> = ({
   itemKey,
   itemRender,
   itemIcon,
+  itemType,
   itemIndent,
   selectedItem,
   onAccepted,
@@ -83,6 +85,7 @@ export const ListView: React.FC<ListViewProps> = ({
       {items.map(item => <ListItemView
         key={itemKey(item)}
         icon={itemIcon?.(item)}
+        type={itemType?.(item)}
         indent={itemIndent?.(item)}
         isHighlighted={item === highlightedItem}
         isSelected={item === selectedItem}
@@ -105,6 +108,7 @@ export const ListView: React.FC<ListViewProps> = ({
 const ListItemView: React.FC<{
   key: string,
   icon: string | undefined,
+  type: 'error' | undefined,
   indent: number | undefined,
   isHighlighted: boolean,
   isSelected: boolean,
@@ -112,9 +116,10 @@ const ListItemView: React.FC<{
   onMouseEnter: () => void,
   onMouseLeave: () => void,
   children: React.ReactNode | React.ReactNode[],
-}> = ({ key, icon, indent, onSelected, onMouseEnter, onMouseLeave, isHighlighted, isSelected, children }) => {
+}> = ({ key, icon, type, indent, onSelected, onMouseEnter, onMouseLeave, isHighlighted, isSelected, children }) => {
   const selectedSuffix = isSelected ? ' selected' : '';
   const highlightedSuffix = isHighlighted ? ' highlighted' : '';
+  const errorSuffix = type === 'error' ? ' error' : '';
   const divRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
@@ -124,14 +129,14 @@ const ListItemView: React.FC<{
 
   return <div
     key={key}
-    className={'list-view-entry' + selectedSuffix + highlightedSuffix}
+    className={'list-view-entry' + selectedSuffix + highlightedSuffix + errorSuffix}
     onClick={onSelected}
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}
     ref={divRef}
   >
     {indent ? <div style={{ minWidth: indent * 16 }}></div> : undefined}
-    <div className={'codicon ' + icon} style={{ minWidth: 16, marginRight: 4 }}></div>
+    <div className={'codicon ' + (icon || 'blank')} style={{ minWidth: 16, marginRight: 4 }}></div>
     {typeof children === 'string' ? <div style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>{children}</div> : children}
   </div>;
 };