Added snapshot selector placeholder UI
Brian Vaughn committed
Mar 10, 2019 at 19:16 UTC
e5280307c920279c6607c612fe066847505b1ee3
5 files changed
+81
-4
src/devtools/views/ButtonIcon.js
+13
@@ -10,6 +10,8 @@ export type IconType =
10
| 'down'
11
| 'filter'
12
| 'more'
13
+ | 'next'
14
+ | 'previous'
15
| 'record'
16
| 'reload'
17
| 'search'
@@ -43,6 +45,12 @@ export default function ButtonIcon({ type }: Props) {
45
case 'more':
46
pathData = PATH_MORE;
47
break;
48
+ case 'next':
49
+ pathData = PATH_NEXT;
50
+ break;
51
+ case 'previous':
52
+ pathData = PATH_PREVIOUS;
53
+ break;
54
case 'record':
55
pathData = PATH_RECORD;
56
break;
@@ -108,6 +116,11 @@ const PATH_MORE = `
116
1.5.67 1.5 1.5-.67 1.5-1.5 1.5z
117
`;
118
119
+const PATH_NEXT = 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z';
120
+
121
+const PATH_PREVIOUS =
122
+ 'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z';
123
+
124
const PATH_RECORD = 'M4,12a8,8 0 1,0 16,0a8,8 0 1,0 -16,0';
125
126
const PATH_RELOAD = `
src/devtools/views/Profiler/Profiler.js
+26
-4
@@ -1,12 +1,13 @@
1
// @flow
2
3
-import React, { useCallback, useContext, useState } from 'react';
3
+import React, { Fragment, useCallback, useContext, useState } from 'react';
4
import { ProfilerContext, ProfilerContextController } from './ProfilerContext';
5
import Button from '../Button';
6
import ButtonIcon from '../ButtonIcon';
7
import TabBar from '../TabBar';
8
import FilterModal from './FilterModal';
9
import RecordToggle from './RecordToggle';
10
+import SnapshotSelector from './SnapshotSelector';
11
12
import styles from './Profiler.css';
13
@@ -60,6 +61,12 @@ function ProfilerInner(_: Props) {
61
<Button onClick={showFilterModal} title="Filter commits by duration">
62
<ButtonIcon type="filter" />
63
</Button>
64
+ {hasProfilingData && (
65
+ <Fragment>
66
+ <div className={styles.VRule} />
67
+ <SnapshotSelector />
68
+ </Fragment>
69
+ )}
70
</div>
71
<div className={styles.Content}>
72
{view}
@@ -72,9 +79,24 @@ function ProfilerInner(_: Props) {
79
}
80
81
const tabs = [
75
- { id: 'flame-chart', icon: 'flame-chart', label: 'Flamegraph' },
76
- { id: 'ranked-chart', icon: 'ranked-chart', label: 'Ranked' },
77
- { id: 'interactions', icon: 'interactions', label: 'Interactions' },
82
+ {
83
+ id: 'flame-chart',
84
+ icon: 'flame-chart',
85
+ label: 'Flamegraph',
86
+ title: 'Flamegraph chart',
87
+ },
88
+ {
89
+ id: 'ranked-chart',
90
+ icon: 'ranked-chart',
91
+ label: 'Ranked',
92
+ title: 'Ranked chart',
93
+ },
94
+ {
95
+ id: 'interactions',
96
+ icon: 'interactions',
97
+ label: 'Interactions',
98
+ title: 'Profiled interactions',
99
+ },
100
];
101
102
const NoProfilingData = () => (
src/devtools/views/Profiler/SnapshotSelector.css
new
+14
@@ -0,0 +1,14 @@
1
+.SnapshotSelector {
2
+ display: flex;
3
+ align-items: center;
4
+ color: var(--color-text-color);
5
+ margin-left: 0.5rem;
6
+}
7
+
8
+.Button {
9
+ margin-left: 0.25rem;
10
+}
11
+
12
+.Commits {
13
+ margin-left: 0.25rem;
14
+}
src/devtools/views/Profiler/SnapshotSelector.js
new
+26
@@ -0,0 +1,26 @@
1
+// @flow
2
+
3
+import React from 'react';
4
+import Button from '../Button';
5
+import ButtonIcon from '../ButtonIcon';
6
+
7
+import styles from './SnapshotSelector.css';
8
+
9
+export type Props = {||};
10
+
11
+export default function SnapshotSelector(_: Props) {
12
+ return (
13
+ <div className={styles.SnapshotSelector}>
14
+ 1 / 3
15
+ <Button className={styles.Button}>
16
+ <ButtonIcon type="previous" />
17
+ </Button>
18
+ <div className={styles.Commits}>
19
+ [] {/* TODO (profiling) Add FixedSizeList selector */}
20
+ </div>
21
+ <Button className={styles.Button}>
22
+ <ButtonIcon type="next" />
23
+ </Button>
24
+ </div>
25
+ );
26
+}
src/devtools/views/Profiler/reducer.js
+2
@@ -52,6 +52,8 @@ type Action =
52
| SEND_START_PROFILING_ACTION
53
| SEND_STOP_PROFILING_ACTION;
54
55
+// TODO (profiling) Lift this state up so it's shared between tabs.
56
+
57
export default function reducer(state: State, action: Action): State {
58
const { type } = action;
59
switch (type) {