chore: sources tab render polish (#32055)

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

@@ -63,6 +63,6 @@ export const LogTab: React.FunctionComponent<{
       <span className='log-list-duration'>{entry.time}</span>
       {entry.message}
     </div>}
-    noHighlightOnHover={true}
+    notSelectable={true}
   />;
 };

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

@@ -29,3 +29,9 @@
   align-items: center;
   flex: 1 1 auto;
 }
+
+.source-tab-file-name div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -95,6 +95,7 @@ export const SourceTab: React.FunctionComponent<{
   }, [onOpenExternally, location]);
 
   const showStackFrames = (stack?.length ?? 0) > 1;
+  const shortFileName = getFileName(fileName);
 
   return <SplitView
     sidebarSize={200}
@@ -102,8 +103,10 @@ export const SourceTab: React.FunctionComponent<{
     sidebarHidden={!showStackFrames}
     main={<div className='vbox' data-testid='source-code'>
       { fileName && <Toolbar>
-        <span className='source-tab-file-name'>{fileName}</span>
-        <CopyToClipboard description='Copy filename' value={getFileName(fileName)}/>
+        <div className='source-tab-file-name' title={fileName}>
+          <div>{shortFileName}</div>
+        </div>
+        <CopyToClipboard description='Copy filename' value={shortFileName}/>
         {location && <ToolbarButton icon='link-external' title='Open in VS Code' onClick={openExternally}></ToolbarButton>}
       </Toolbar> }
       <CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} />

packages/web/src/components/gridView.tsx

@@ -121,7 +121,7 @@ export function GridView<T>(model: GridViewProps<T>) {
         onIconClicked={model.onIconClicked}
         noItemsMessage={model.noItemsMessage}
         dataTestId={model.dataTestId}
-        noHighlightOnHover={model.noHighlightOnHover}
+        notSelectable={model.notSelectable}
       ></ListView>
     </div>
   </div>;

packages/web/src/components/listView.css

@@ -34,6 +34,10 @@
   padding-left: 5px;
 }
 
+.list-view-content.not-selectable > .list-view-entry {
+  cursor: inherit;
+}
+
 .list-view-entry.highlighted:not(.selected) {
   background-color: var(--vscode-list-inactiveSelectionBackground) !important;
 }

packages/web/src/components/listView.tsx

@@ -16,6 +16,7 @@
 
 import * as React from 'react';
 import './listView.css';
+import { clsx } from '@web/uiUtils';
 
 export type ListViewProps<T> = {
   name: string,
@@ -36,7 +37,7 @@ export type ListViewProps<T> = {
   onIconClicked?: (item: T, index: number) => void,
   noItemsMessage?: string,
   dataTestId?: string,
-  noHighlightOnHover?: boolean,
+  notSelectable?: boolean,
 };
 
 const scrollPositions = new Map<string, number>();
@@ -60,7 +61,7 @@ export function ListView<T>({
   onIconClicked,
   noItemsMessage,
   dataTestId,
-  noHighlightOnHover,
+  notSelectable,
 }: ListViewProps<T>) {
   const itemListRef = React.useRef<HTMLDivElement>(null);
   const [highlightedItem, setHighlightedItem] = React.useState<any>();
@@ -85,9 +86,9 @@ export function ListView<T>({
       itemListRef.current.scrollTop = scrollPositions.get(name) || 0;
   }, [name]);
 
-  return <div className={`list-view vbox ` + name + '-list-view' } role={items.length > 0 ? 'list' : undefined} data-testid={dataTestId || (name + '-list')}>
+  return <div className={clsx(`list-view vbox`, name + '-list-view')} role={items.length > 0 ? 'list' : undefined} data-testid={dataTestId || (name + '-list')}>
     <div
-      className='list-view-content'
+      className={clsx('list-view-content', notSelectable && 'not-selectable')}
       tabIndex={0}
       onKeyDown={event => {
         if (selectedItem && event.key === 'Enter') {
@@ -134,18 +135,19 @@ export function ListView<T>({
     >
       {noItemsMessage && items.length === 0 && <div className='list-view-empty'>{noItemsMessage}</div>}
       {items.map((item, index) => {
-        const selectedSuffix = selectedItem === item ? ' selected' : '';
-        const highlightedSuffix = !noHighlightOnHover && highlightedItem === item ? ' highlighted' : '';
-        const errorSuffix = isError?.(item, index) ? ' error' : '';
-        const warningSuffix = isWarning?.(item, index) ? ' warning' : '';
-        const infoSuffix = isInfo?.(item, index) ? ' info' : '';
         const indentation = indent?.(item, index) || 0;
         const rendered = render(item, index);
         return <div
           key={id?.(item, index) || index}
           onDoubleClick={() => onAccepted?.(item, index)}
           role='listitem'
-          className={'list-view-entry' + selectedSuffix + highlightedSuffix + errorSuffix + warningSuffix + infoSuffix}
+          className={clsx(
+              'list-view-entry',
+              selectedItem === item && 'selected',
+              !notSelectable && highlightedItem === item && 'highlighted',
+              isError?.(item, index) && 'error',
+              isWarning?.(item, index) && 'warning',
+              isInfo?.(item, index) && 'info')}
           onClick={() => onSelected?.(item, index)}
           onMouseEnter={() => setHighlightedItem(item)}
           onMouseLeave={() => setHighlightedItem(undefined)}