Devtools Profiler: allow user to enter commit number (#19957)
Co-authored-by: Brian Vaughn <bvaughn@fb.com>
Steve Rubin committed
Jul 14, 2021 at 17:37 UTC
232c67e911c61dbd15ceb8b1da4f3fa139ff617a
2 files changed
+87
-29
packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css
+16
@@ -28,3 +28,19 @@
28
justify-content: center;
29
color: var(--color-dim);
30
}
31
+
32
+.Input {
33
+ background: none;
34
+ font-size: var(--font-size-sans-normal);
35
+ text-align: right;
36
+ font-family: var(--font-family-monospace);
37
+ border: 1px solid transparent;
38
+ border-radius: 0.125rem;
39
+ padding: 0.125rem;
40
+ color: var(--color-attribute-editable-value);
41
+}
42
+
43
+.Input:focus {
44
+ background-color: var(--color-button-background-focus);
45
+ outline: none;
46
+}
packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
+71
-29
@@ -8,7 +8,7 @@
8
*/
9
10
import * as React from 'react';
11
-import {Fragment, useCallback, useContext, useMemo} from 'react';
11
+import {Fragment, useContext, useMemo} from 'react';
12
import Button from '../Button';
13
import ButtonIcon from '../ButtonIcon';
14
import {ProfilerContext} from './ProfilerContext';
@@ -86,47 +86,89 @@ export default function SnapshotSelector(_: Props) {
86
87
let label = null;
88
if (numFilteredCommits > 0) {
89
- label =
90
- `${selectedFilteredCommitIndex + 1}`.padStart(
91
- `${numFilteredCommits}`.length,
92
- '0',
93
- ) +
94
- ' / ' +
95
- numFilteredCommits;
89
+ const handleCommitInputChange = event => {
90
+ const value = parseInt(event.currentTarget.value, 10);
91
+ if (!isNaN(value)) {
92
+ const filteredIndex = Math.min(
93
+ Math.max(value - 1, 0),
94
+
95
+ // Snashots are shown to the user as 1-based
96
+ // but the indices within the profiler data array ar 0-based.
97
+ numFilteredCommits - 1,
98
+ );
99
+ selectCommitIndex(filteredCommitIndices[filteredIndex]);
100
+ }
101
+ };
102
+
103
+ const handleClick = event => {
104
+ event.currentTarget.select();
105
+ };
106
+
107
+ const handleKeyDown = event => {
108
+ switch (event.key) {
109
+ case 'ArrowDown':
110
+ viewPrevCommit();
111
+ event.stopPropagation();
112
+ break;
113
+ case 'ArrowUp':
114
+ viewNextCommit();
115
+ event.stopPropagation();
116
+ break;
117
+ default:
118
+ break;
119
+ }
120
+ };
121
+
122
+ const input = (
123
+ <input
124
+ className={styles.Input}
125
+ type="text"
126
+ inputMode="numeric"
127
+ pattern="[0-9]*"
128
+ value={selectedFilteredCommitIndex + 1}
129
+ size={`${numFilteredCommits}`.length}
130
+ onChange={handleCommitInputChange}
131
+ onClick={handleClick}
132
+ onKeyDown={handleKeyDown}
133
+ />
134
+ );
135
+
136
+ label = (
137
+ <Fragment>
138
+ {input} / {numFilteredCommits}
139
+ </Fragment>
140
+ );
141
}
142
98
- const viewNextCommit = useCallback(() => {
143
+ const viewNextCommit = () => {
144
let nextCommitIndex = ((selectedFilteredCommitIndex: any): number) + 1;
145
if (nextCommitIndex === filteredCommitIndices.length) {
146
nextCommitIndex = 0;
147
}
148
selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
104
- }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
105
- const viewPrevCommit = useCallback(() => {
149
+ };
150
+ const viewPrevCommit = () => {
151
let nextCommitIndex = ((selectedFilteredCommitIndex: any): number) - 1;
152
if (nextCommitIndex < 0) {
153
nextCommitIndex = filteredCommitIndices.length - 1;
154
}
155
selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
111
- }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
156
+ };
157
113
- const handleKeyDown = useCallback(
114
- event => {
115
- switch (event.key) {
116
- case 'ArrowLeft':
117
- viewPrevCommit();
118
- event.stopPropagation();
119
- break;
120
- case 'ArrowRight':
121
- viewNextCommit();
122
- event.stopPropagation();
123
- break;
124
- default:
125
- break;
126
- }
127
- },
128
- [viewNextCommit, viewPrevCommit],
129
- );
158
+ const handleKeyDown = event => {
159
+ switch (event.key) {
160
+ case 'ArrowLeft':
161
+ viewPrevCommit();
162
+ event.stopPropagation();
163
+ break;
164
+ case 'ArrowRight':
165
+ viewNextCommit();
166
+ event.stopPropagation();
167
+ break;
168
+ default:
169
+ break;
170
+ }
171
+ };
172
173
if (commitData.length === 0) {
174
return null;