feat(tracing): keyboard navigate lists (#6224)

src/web/traceViewer/ui/actionList.css

@@ -22,6 +22,7 @@
   user-select: none;
   color: #555;
   overflow: auto;
+  outline: none;
 }
 
 .action-entry {
@@ -32,19 +33,19 @@
   white-space: nowrap;
   line-height: 28px;
   padding-left: 3px;
-  border-left: 3px solid transparent;
-}
-
-.action-entry:hover, .action-entry.selected {
-  color: #333;
 }
 
 .action-entry.selected {
-  border-left: 3px solid #666;
+  color: white;
+  background-color: var(--gray);
 }
 
-.action-entry.selected:focus {
+.action-list:focus .action-entry.selected {
-  border-color: var(--orange);
+  background-color: var(--blue);
+}
+
+.action-entry.selected > div {
+  color: white;
 }
 
 .action-title {

src/web/traceViewer/ui/actionList.tsx

@@ -33,7 +33,27 @@ export const ActionList: React.FC<ActionListProps> = ({
   onSelected = () => {},
   onHighlighted = () => {},
 }) => {
-  return <div className='action-list'>{actions.map(actionEntry => {
+  return <div
+    className='action-list'
+    tabIndex={0}
+    onKeyDown={event => {
+      if (event.key !== 'ArrowDown' &&  event.key !== 'ArrowUp')
+        return;
+      const index = selectedAction ? actions.indexOf(selectedAction) : -1;
+      if (event.key === 'ArrowDown') {
+        if (index === -1)
+          onSelected(actions[0]);
+        else
+          onSelected(actions[Math.min(index + 1, actions.length - 1)]);
+      }
+      if (event.key === 'ArrowUp') {
+        if (index === -1)
+          onSelected(actions[actions.length - 1]);
+        else
+          onSelected(actions[Math.max(index - 1, 0)]);
+      }
+    }}
+  >{actions.map((actionEntry, index) => {
     const { metadata, actionId } = actionEntry;
     return <div
       className={'action-entry' + (actionEntry === selectedAction ? ' selected' : '')}

src/web/traceViewer/ui/snapshotTab.css

@@ -17,23 +17,29 @@
 .snapshot-tab {
   display: flex;
   flex: auto;
-  flex-direction: column;
   align-items: stretch;
+  outline: none;
+  padding-right: 60px;
 }
 
 .snapshot-controls {
-  flex: 0 0 24px;
+  flex: 0 0 60px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
-  padding: 10px 4px 0 0;
+  padding: 5px 0 0 5px;
 }
 
 .snapshot-toggle {
+  margin-top: 4px;
   padding: 4px 8px;
   cursor: pointer;
   border-radius: 20px;
   margin-left: 4px;
+  width: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .snapshot-toggle:hover {
@@ -41,7 +47,12 @@
 }
 
 .snapshot-toggle.toggled {
-  background: var(--inactive-focus-ring);
+  background: var(--gray);
+  color: white;
+}
+
+.snapshot-tab:focus .snapshot-toggle.toggled {
+  background: var(--blue);
 }
 
 .snapshot-wrapper {

src/web/traceViewer/ui/snapshotTab.tsx

@@ -56,8 +56,16 @@ export const SnapshotTab: React.FunctionComponent<{
     width: snapshotSize.width * scale,
     height: snapshotSize.height * scale,
   };
-  return <div className='snapshot-tab'>
+  return <div
-    <div className='snapshot-controls'>
+    className='snapshot-tab'
+    tabIndex={0}
+    onKeyDown={event => {
+      if (event.key === 'ArrowDown')
+        setSnapshotIndex(Math.min(snapshotIndex + 1, snapshots.length - 1));
+      if (event.key === 'ArrowUp')
+        setSnapshotIndex(Math.max(snapshotIndex - 1, 0));
+    }}
+  ><div className='snapshot-controls'>
       {snapshots.map((snapshot, index) => {
         return <div
           key={snapshot.title}

src/web/traceViewer/ui/timeline.css

@@ -46,10 +46,14 @@
   pointer-events: none;
   overflow: hidden;
   flex: none;
-  flex-basis: 30px;
+  height: 30px;
   position: relative;
 }
 
+.timeline-lane.timeline-labels {
+  height: 20px;
+}
+
 .timeline-grid {
   position: absolute;
   top: 0;