chore: migrate treeView to treeitem aria

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

@@ -14,28 +14,28 @@
   limitations under the License.
 */
 
-.ui-mode-list-item {
+.ui-mode-tree-item {
   flex: auto;
 }
 
-.ui-mode-list-item-title {
+.ui-mode-tree-item-title {
   flex: auto;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.ui-mode-list-item-time {
+.ui-mode-tree-item-time {
   flex: none;
   color: var(--vscode-editorCodeLens-foreground);
   margin: 0 4px;
   user-select: none;
 }
 
-.tests-list-view .list-view-entry.selected .ui-mode-list-item-time,
-.tests-list-view .list-view-entry.highlighted .ui-mode-list-item-time {
+.tests-tree-view .tree-view-entry.selected .ui-mode-tree-item-time,
+.tests-tree-view .tree-view-entry.highlighted .ui-mode-tree-item-time {
   display: none;
 }
 
-.tests-list-view .list-view-entry:not(.highlighted):not(.selected) .toolbar-button:not(.toggled) {
+.tests-tree-view .tree-view-entry:not(.highlighted):not(.selected) .toolbar-button:not(.toggled) {
   display: none;
 }

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

@@ -159,12 +159,12 @@ export const TestListView: React.FC<{
     rootItem={testTree.rootItem}
     dataTestId='test-tree'
     render={treeItem => {
-      return <div className='hbox ui-mode-list-item'>
-        <div className='ui-mode-list-item-title'>
+      return <div className='hbox ui-mode-tree-item'>
+        <div className='ui-mode-tree-item-title'>
           <span title={treeItem.title}>{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-list-item-time'>{msToString(treeItem.duration)}</div>}
+        {!!treeItem.duration && treeItem.status !== 'skipped' && <div className='ui-mode-tree-item-time'>{msToString(treeItem.duration)}</div>}
         <Toolbar noMinHeight={true} noShadow={true}>
           <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState && !runningState.completed}></ToolbarButton>
           <ToolbarButton icon='go-to-file' title='Show source' onClick={onRevealSource} style={(treeItem.kind === 'group' && treeItem.subKind === 'folder') ? { visibility: 'hidden' } : {}}></ToolbarButton>

packages/web/src/components/gridView.tsx

@@ -110,15 +110,12 @@ export function GridView<T>(model: GridViewProps<T>) {
           </>;
         }}
         icon={model.icon}
-        indent={model.indent}
         isError={model.isError}
         isWarning={model.isWarning}
         isInfo={model.isInfo}
         selectedItem={model.selectedItem}
         onAccepted={model.onAccepted}
         onSelected={model.onSelected}
-        onLeftArrow={model.onLeftArrow}
-        onRightArrow={model.onRightArrow}
         onHighlighted={model.onHighlighted}
         onIconClicked={model.onIconClicked}
         noItemsMessage={model.noItemsMessage}

packages/web/src/components/listView.tsx

@@ -16,23 +16,20 @@
 
 import * as React from 'react';
 import './listView.css';
-import { clsx } from '@web/uiUtils';
+import { clsx, scrollIntoViewIfNeeded } from '@web/uiUtils';
 
 export type ListViewProps<T> = {
   name: string,
   items: T[],
   id?: (item: T, index: number) => string,
   render: (item: T, index: number) => React.ReactNode,
   icon?: (item: T, index: number) => string | undefined,
-  indent?: (item: T, index: number) => number | undefined,
   isError?: (item: T, index: number) => boolean,
   isWarning?: (item: T, index: number) => boolean,
   isInfo?: (item: T, index: number) => boolean,
   selectedItem?: T,
   onAccepted?: (item: T, index: number) => void,
   onSelected?: (item: T, index: number) => void,
-  onLeftArrow?: (item: T, index: number) => void,
-  onRightArrow?: (item: T, index: number) => void,
   onHighlighted?: (item: T | undefined) => void,
   onIconClicked?: (item: T, index: number) => void,
   noItemsMessage?: string,
@@ -51,12 +48,9 @@ export function ListView<T>({
   isError,
   isWarning,
   isInfo,
-  indent,
   selectedItem,
   onAccepted,
   onSelected,
-  onLeftArrow,
-  onRightArrow,
   onHighlighted,
   onIconClicked,
   noItemsMessage,
@@ -95,21 +89,12 @@ export function ListView<T>({
           onAccepted?.(selectedItem, items.indexOf(selectedItem));
           return;
         }
-        if (event.key !== 'ArrowDown' &&  event.key !== 'ArrowUp' && event.key !== 'ArrowLeft' &&  event.key !== 'ArrowRight')
+        if (event.key !== 'ArrowDown' &&  event.key !== 'ArrowUp')
           return;
 
         event.stopPropagation();
         event.preventDefault();
 
-        if (selectedItem && event.key === 'ArrowLeft') {
-          onLeftArrow?.(selectedItem, items.indexOf(selectedItem));
-          return;
-        }
-        if (selectedItem && event.key === 'ArrowRight') {
-          onRightArrow?.(selectedItem, items.indexOf(selectedItem));
-          return;
-        }
-
         const index = selectedItem ? items.indexOf(selectedItem) : -1;
         let newIndex = index;
         if (event.key === 'ArrowDown') {
@@ -135,7 +120,6 @@ export function ListView<T>({
     >
       {noItemsMessage && items.length === 0 && <div className='list-view-empty'>{noItemsMessage}</div>}
       {items.map((item, index) => {
-        const indentation = indent?.(item, index) || 0;
         const rendered = render(item, index);
         return <div
           key={id?.(item, index) || index}
@@ -152,8 +136,6 @@ export function ListView<T>({
           onMouseEnter={() => setHighlightedItem(item)}
           onMouseLeave={() => setHighlightedItem(undefined)}
         >
-          {/* eslint-disable-next-line react/jsx-key */}
-          {indentation ? new Array(indentation).fill(0).map(() => <div className='list-view-indent'></div>) : undefined}
           {icon && <div
             className={'codicon ' + (icon(item, index) || 'codicon-blank')}
             style={{ minWidth: 16, marginRight: 4 }}
@@ -173,12 +155,3 @@ export function ListView<T>({
     </div>
   </div>;
 }
-
-function scrollIntoViewIfNeeded(element: Element | undefined) {
-  if (!element)
-    return;
-  if ((element as any)?.scrollIntoViewIfNeeded)
-    (element as any).scrollIntoViewIfNeeded(false);
-  else
-    element?.scrollIntoView();
-}

packages/web/src/components/treeView.css

@@ -0,0 +1,91 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.tree-view-content {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  position: relative;
+  user-select: none;
+  overflow: hidden auto;
+  outline: 1px solid transparent;
+}
+
+.tree-view-entry {
+  display: flex;
+  flex: none;
+  cursor: pointer;
+  align-items: center;
+  white-space: nowrap;
+  line-height: 28px;
+  padding-left: 5px;
+}
+
+.tree-view-content.not-selectable > .tree-view-entry {
+  cursor: inherit;
+}
+
+.tree-view-entry.highlighted:not(.selected) {
+  background-color: var(--vscode-list-inactiveSelectionBackground) !important;
+}
+
+.tree-view-entry.selected {
+  z-index: 10;
+}
+
+.tree-view-indent {
+  min-width: 16px;
+}
+
+.tree-view-content:focus .tree-view-entry.selected {
+  background-color: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+  outline: 1px solid var(--vscode-focusBorder);
+}
+
+.tree-view-content .tree-view-entry.selected {
+  background-color: var(--vscode-list-inactiveSelectionBackground);
+}
+
+.tree-view-content:focus .tree-view-entry.selected * {
+  color: var(--vscode-list-activeSelectionForeground) !important;
+  background-color: transparent !important;
+}
+
+.tree-view-content:focus .tree-view-entry.selected .codicon {
+  color: var(--vscode-list-activeSelectionForeground) !important;
+}
+
+.tree-view-empty {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tree-view-entry.error {
+  color: var(--vscode-list-errorForeground);
+  background-color: var(--vscode-inputValidation-errorBackground);
+}
+
+.tree-view-entry.warning {
+  color: var(--vscode-list-warningForeground);
+  background-color: var(--vscode-inputValidation-warningBackground);
+}
+
+.tree-view-entry.info {
+  background-color: var(--vscode-inputValidation-infoBackground);
+}