Added arrow key navigation for commits and interactions

src/devtools/views/Elements/Tree.js

@@ -58,7 +58,6 @@ export default function Tree(props: Props) {
           event.preventDefault();
           break;
         case 'ArrowLeft':
-          console.log('LEFT');
           selectParentElementInTree();
           break;
         case 'ArrowRight':

src/devtools/views/Profiler/Interactions.css

@@ -3,3 +3,7 @@
   height: 100%;
   padding: 0.5rem;
 }
+
+.FocusTarget:focus {
+  outline: none;
+}

src/devtools/views/Profiler/Interactions.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
@@ -64,6 +64,31 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
     rootID: ((rootID: any): number),
   });
 
+  const handleKeyDown = useCallback(
+    event => {
+      let index;
+      switch (event.key) {
+        case 'ArrowDown':
+          index = interactions.findIndex(
+            interaction => interaction.id === selectedInteractionID
+          );
+          selectInteraction(Math.min(interactions.length - 1, index + 1));
+          event.stopPropagation();
+          break;
+        case 'ArrowUp':
+          index = interactions.findIndex(
+            interaction => interaction.id === selectedInteractionID
+          );
+          selectInteraction(Math.max(0, index - 1));
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
+    },
+    [interactions, selectedInteractionID, selectInteraction]
+  );
+
   const itemData = useMemo<ItemData>(() => {
     // TODO (profiling) constants
     const labelWidth = Math.min(200, width / 5);
@@ -91,8 +116,6 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
     width,
   ]);
 
-  // TODO (profiling) Up/down arrow keys to select prev/next interaction.
-
   // If a commit contains no fibers with an actualDuration > 0,
   // Display a fallback message.
   if (interactions.length === 0) {
@@ -100,14 +123,16 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
   }
 
   return (
-    <FixedSizeList
-      height={height}
-      itemCount={interactions.length}
-      itemData={itemData}
-      itemSize={30}
-      width={width}
-    >
-      {InteractionListItem}
-    </FixedSizeList>
+    <div className={styles.FocusTarget} onKeyDown={handleKeyDown} tabIndex={0}>
+      <FixedSizeList
+        height={height}
+        itemCount={interactions.length}
+        itemData={itemData}
+        itemSize={30}
+        width={width}
+      >
+        {InteractionListItem}
+      </FixedSizeList>
+    </div>
   );
 }

src/devtools/views/Profiler/SnapshotSelector.css

@@ -9,6 +9,9 @@
   margin-left: 0.25rem;
   overflow: hidden;
 }
+.Commits:focus {
+  outline: none;
+}
 
 .VRule {
   height: 20px;

src/devtools/views/Profiler/SnapshotSelector.js

@@ -12,8 +12,6 @@ import styles from './SnapshotSelector.css';
 
 export type Props = {||};
 
-// TODO (profiling) Left/right arrow navigation.
-
 export default function SnapshotSelector(_: Props) {
   const {
     isCommitFilterEnabled,
@@ -94,6 +92,24 @@ export default function SnapshotSelector(_: Props) {
     selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
   }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
 
+  const handleKeyDown = useCallback(
+    event => {
+      switch (event.key) {
+        case 'ArrowLeft':
+          viewPrevCommit();
+          event.stopPropagation();
+          break;
+        case 'ArrowRight':
+          viewNextCommit();
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
+    },
+    [viewNextCommit, viewPrevCommit]
+  );
+
   if (rendererID === null || rootID === null) {
     return null;
   }
@@ -111,6 +127,7 @@ export default function SnapshotSelector(_: Props) {
       </Button>
       <div
         className={styles.Commits}
+        onKeyDown={handleKeyDown}
         style={{
           flex: numFilteredCommits > 0 ? '1 1 auto' : '0 0 auto',
           maxWidth:
@@ -118,6 +135,7 @@ export default function SnapshotSelector(_: Props) {
               ? numFilteredCommits * maxBarWidth
               : undefined,
         }}
+        tabIndex={0}
       >
         {numFilteredCommits > 0 && (
           <SnapshotCommitList