Added arrow key navigation for commits and interactions
Brian Vaughn committed
Mar 24, 2019 at 18:53 UTC
5718eaf0f323c50fa44ff321777f09eac5cb5a7f
5 files changed
+64
-15
src/devtools/views/Elements/Tree.js
-1
@@ -58,7 +58,6 @@ export default function Tree(props: Props) {
58
event.preventDefault();
59
break;
60
case 'ArrowLeft':
61
- console.log('LEFT');
61
selectParentElementInTree();
62
break;
63
case 'ArrowRight':
src/devtools/views/Profiler/Interactions.css
+4
@@ -3,3 +3,7 @@
3
height: 100%;
4
padding: 0.5rem;
5
}
6
+
7
+.FocusTarget:focus {
8
+ outline: none;
9
+}
src/devtools/views/Profiler/Interactions.js
+37
-12
@@ -1,6 +1,6 @@
1
// @flow
2
3
-import React, { useContext, useMemo } from 'react';
3
+import React, { useCallback, useContext, useMemo } from 'react';
4
import AutoSizer from 'react-virtualized-auto-sizer';
5
import { FixedSizeList } from 'react-window';
6
import { ProfilerContext } from './ProfilerContext';
@@ -64,6 +64,31 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
64
rootID: ((rootID: any): number),
65
});
66
67
+ const handleKeyDown = useCallback(
68
+ event => {
69
+ let index;
70
+ switch (event.key) {
71
+ case 'ArrowDown':
72
+ index = interactions.findIndex(
73
+ interaction => interaction.id === selectedInteractionID
74
+ );
75
+ selectInteraction(Math.min(interactions.length - 1, index + 1));
76
+ event.stopPropagation();
77
+ break;
78
+ case 'ArrowUp':
79
+ index = interactions.findIndex(
80
+ interaction => interaction.id === selectedInteractionID
81
+ );
82
+ selectInteraction(Math.max(0, index - 1));
83
+ event.stopPropagation();
84
+ break;
85
+ default:
86
+ break;
87
+ }
88
+ },
89
+ [interactions, selectedInteractionID, selectInteraction]
90
+ );
91
+
92
const itemData = useMemo<ItemData>(() => {
93
// TODO (profiling) constants
94
const labelWidth = Math.min(200, width / 5);
@@ -91,8 +116,6 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
116
width,
117
]);
118
94
- // TODO (profiling) Up/down arrow keys to select prev/next interaction.
95
-
119
// If a commit contains no fibers with an actualDuration > 0,
120
// Display a fallback message.
121
if (interactions.length === 0) {
@@ -100,14 +123,16 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
123
}
124
125
return (
103
- <FixedSizeList
104
- height={height}
105
- itemCount={interactions.length}
106
- itemData={itemData}
107
- itemSize={30}
108
- width={width}
109
- >
110
- {InteractionListItem}
111
- </FixedSizeList>
126
+ <div className={styles.FocusTarget} onKeyDown={handleKeyDown} tabIndex={0}>
127
+ <FixedSizeList
128
+ height={height}
129
+ itemCount={interactions.length}
130
+ itemData={itemData}
131
+ itemSize={30}
132
+ width={width}
133
+ >
134
+ {InteractionListItem}
135
+ </FixedSizeList>
136
+ </div>
137
);
138
}
src/devtools/views/Profiler/SnapshotSelector.css
+3
@@ -9,6 +9,9 @@
9
margin-left: 0.25rem;
10
overflow: hidden;
11
}
12
+.Commits:focus {
13
+ outline: none;
14
+}
15
16
.VRule {
17
height: 20px;
src/devtools/views/Profiler/SnapshotSelector.js
+20
-2
@@ -12,8 +12,6 @@ import styles from './SnapshotSelector.css';
12
13
export type Props = {||};
14
15
-// TODO (profiling) Left/right arrow navigation.
16
-
15
export default function SnapshotSelector(_: Props) {
16
const {
17
isCommitFilterEnabled,
@@ -94,6 +92,24 @@ export default function SnapshotSelector(_: Props) {
92
selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
93
}, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
94
95
+ const handleKeyDown = useCallback(
96
+ event => {
97
+ switch (event.key) {
98
+ case 'ArrowLeft':
99
+ viewPrevCommit();
100
+ event.stopPropagation();
101
+ break;
102
+ case 'ArrowRight':
103
+ viewNextCommit();
104
+ event.stopPropagation();
105
+ break;
106
+ default:
107
+ break;
108
+ }
109
+ },
110
+ [viewNextCommit, viewPrevCommit]
111
+ );
112
+
113
if (rendererID === null || rootID === null) {
114
return null;
115
}
@@ -111,6 +127,7 @@ export default function SnapshotSelector(_: Props) {
127
</Button>
128
<div
129
className={styles.Commits}
130
+ onKeyDown={handleKeyDown}
131
style={{
132
flex: numFilteredCommits > 0 ? '1 1 auto' : '0 0 auto',
133
maxWidth:
@@ -118,6 +135,7 @@ export default function SnapshotSelector(_: Props) {
135
? numFilteredCommits * maxBarWidth
136
: undefined,
137
}}
138
+ tabIndex={0}
139
>
140
{numFilteredCommits > 0 && (
141
<SnapshotCommitList