diff --git a/src/devtools/views/Elements/Tree.js b/src/devtools/views/Elements/Tree.js index 049ef4632d..9354245a12 100644 --- a/src/devtools/views/Elements/Tree.js +++ b/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': diff --git a/src/devtools/views/Profiler/Interactions.css b/src/devtools/views/Profiler/Interactions.css index bc441e485e..935d2f221a 100644 --- a/src/devtools/views/Profiler/Interactions.css +++ b/src/devtools/views/Profiler/Interactions.css @@ -3,3 +3,7 @@ height: 100%; padding: 0.5rem; } + +.FocusTarget:focus { + outline: none; +} diff --git a/src/devtools/views/Profiler/Interactions.js b/src/devtools/views/Profiler/Interactions.js index 827a8634fe..558760c8bc 100644 --- a/src/devtools/views/Profiler/Interactions.js +++ b/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(() => { // 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 ( - - {InteractionListItem} - +
+ + {InteractionListItem} + +
); } diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css index 8d4fa32d1b..a68e564207 100644 --- a/src/devtools/views/Profiler/SnapshotSelector.css +++ b/src/devtools/views/Profiler/SnapshotSelector.css @@ -9,6 +9,9 @@ margin-left: 0.25rem; overflow: hidden; } +.Commits:focus { + outline: none; +} .VRule { height: 20px; diff --git a/src/devtools/views/Profiler/SnapshotSelector.js b/src/devtools/views/Profiler/SnapshotSelector.js index 6a49e9d026..8965268b1e 100644 --- a/src/devtools/views/Profiler/SnapshotSelector.js +++ b/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) {
0 ? '1 1 auto' : '0 0 auto', maxWidth: @@ -118,6 +135,7 @@ export default function SnapshotSelector(_: Props) { ? numFilteredCommits * maxBarWidth : undefined, }} + tabIndex={0} > {numFilteredCommits > 0 && (