Added export and clear buttons for Profiler, cleaned up record toggle
Brian Vaughn committed
Mar 30, 2019 at 09:01 UTC
7bd8c02f1093e8f6b614f690c00a2b2d24b04d00
6 files changed
+70
-6
src/devtools/views/ButtonIcon.js
+18
@@ -5,9 +5,11 @@ import styles from './ButtonIcon.css';
5
6
export type IconType =
7
| 'back'
8
+ | 'cancel'
9
| 'close'
10
| 'copy'
11
| 'down'
12
+ | 'download'
13
| 'filter'
14
| 'more'
15
| 'next'
@@ -30,6 +32,9 @@ export default function ButtonIcon({ type }: Props) {
32
case 'back':
33
pathData = PATH_BACK;
34
break;
35
+ case 'cancel':
36
+ pathData = PATH_CANCEL;
37
+ break;
38
case 'close':
39
pathData = PATH_CLOSE;
40
break;
@@ -39,6 +44,9 @@ export default function ButtonIcon({ type }: Props) {
44
case 'down':
45
pathData = PATH_DOWN;
46
break;
47
+ case 'download':
48
+ pathData = PATH_DOWNLOAD;
49
+ break;
50
case 'filter':
51
pathData = PATH_FILTER;
52
break;
@@ -97,6 +105,11 @@ const PATH_BACK = `
105
10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z
106
`;
107
108
+const PATH_CANCEL = `
109
+ M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69
110
+ 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z
111
+`;
112
+
113
const PATH_CLOSE =
114
'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
115
@@ -107,6 +120,11 @@ const PATH_COPY = `
120
121
const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
122
123
+const PATH_DOWNLOAD = `
124
+ M 21.855469 8.460938 L 16.214844 8.460938 L 16.214844 0 L 7.753906 0 L 7.753906 8.460938 L 2.113281 8.460938 L 11.984375
125
+ 18.332031 Z M 2.113281 21.152344 L 2.113281 23.972656 L 21.855469 23.972656 L 21.855469 21.152344 Z M 2.113281 21.152344
126
+`;
127
+
128
const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';
129
130
const PATH_MORE = `
src/devtools/views/Profiler/ClearProfilingDataButton.js
new
+21
@@ -0,0 +1,21 @@
1
+// @flow
2
+
3
+import React, { useCallback, useContext } from 'react';
4
+import Button from '../Button';
5
+import ButtonIcon from '../ButtonIcon';
6
+import { StoreContext } from '../context';
7
+
8
+export default function ClearProfilingDataButton() {
9
+ const store = useContext(StoreContext);
10
+ const clear = useCallback(() => store.clearProfilingData(), [store]);
11
+
12
+ return (
13
+ <Button
14
+ disabled={!store.hasProfilingData}
15
+ onClick={clear}
16
+ title="Clear profiling data"
17
+ >
18
+ <ButtonIcon type="cancel" />
19
+ </Button>
20
+ );
21
+}
src/devtools/views/Profiler/Profiler.js
+6
@@ -8,12 +8,14 @@ import {
8
} from './CommitFilterModalContext';
9
import { ProfilerContext } from './ProfilerContext';
10
import TabBar from '../TabBar';
11
+import ClearProfilingDataButton from './ClearProfilingDataButton';
12
import CommitFlamegraph from './CommitFlamegraph';
13
import CommitRanked from './CommitRanked';
14
import FilterModal from './FilterModal';
15
import Interactions from './Interactions';
16
import RecordToggle from './RecordToggle';
17
import ReloadAndProfileButton from './ReloadAndProfileButton';
18
+import SaveProfilingDataButton from './SaveProfilingDataButton';
19
import SnapshotSelector from './SnapshotSelector';
20
import SidebarCommitInfo from './SidebarCommitInfo';
21
import SidebarInteractions from './SidebarInteractions';
@@ -86,6 +88,8 @@ function NonSuspendingProfiler({
88
<div className={styles.Toolbar}>
89
<RecordToggle disabled={!supportsProfiling} />
90
<ReloadAndProfileButton />
91
+ <ClearProfilingDataButton />
92
+ <SaveProfilingDataButton />
93
<div className={styles.VRule} />
94
<TabBar
95
currentTab={null}
@@ -155,6 +159,8 @@ function SuspendingProfiler() {
159
<div className={styles.Toolbar}>
160
<RecordToggle />
161
<ReloadAndProfileButton />
162
+ <ClearProfilingDataButton />
163
+ <SaveProfilingDataButton />
164
<div className={styles.VRule} />
165
<TabBar
166
currentTab={selectedTabID}
src/devtools/views/Profiler/RecordToggle.css
+6
-2
@@ -1,7 +1,9 @@
1
.ActiveRecordToggle {
2
color: var(--color-record-active);
3
}
4
-.ActiveRecordToggle:hover,
4
+.ActiveRecordToggle:hover {
5
+ color: var(--color-record-active);
6
+}
7
.ActiveRecordToggle:focus {
8
color: var(--color-record-active);
9
}
@@ -12,7 +14,9 @@
14
.InactiveRecordToggle {
15
color: var(--color-record-inactive);
16
}
15
-.InactiveRecordToggle:hover,
17
+.InactiveRecordToggle:hover {
18
+ color: var(--color-record-hover);
19
+}
20
.InactiveRecordToggle:focus {
21
color: var(--color-record-inactive);
22
}
src/devtools/views/Profiler/SaveProfilingDataButton.js
new
+15
@@ -0,0 +1,15 @@
1
+// @flow
2
+
3
+import React from 'react';
4
+import Button from '../Button';
5
+import ButtonIcon from '../ButtonIcon';
6
+
7
+export default function SaveProfilingDataButton() {
8
+ // TODO (profiling) Support export
9
+
10
+ return (
11
+ <Button disabled title="Save profile...">
12
+ <ButtonIcon type="download" />
13
+ </Button>
14
+ );
15
+}
src/devtools/views/root.css
+4
-4
@@ -38,8 +38,8 @@
38
--light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
39
--light-color-modal-background: rgba(255, 255, 255, 0.25);
40
--light-color-record-active: #fc3a4b;
41
- --light-color-record-hover: #000000;
42
- --light-color-record-inactive: #cfd1d5;
41
+ --light-color-record-hover: #3578e5;
42
+ --light-color-record-inactive: #0088fa;
43
--light-color-search-match: yellow;
44
--light-color-search-match-current: #f7923b;
45
--light-color-selected-background: #0088fa;
@@ -82,8 +82,8 @@
82
--dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
83
--dark-color-modal-background: rgba(0, 0, 0, 0.25);
84
--dark-color-record-active: #fc3a4b;
85
- --dark-color-record-hover: #ffffff;
86
- --dark-color-record-inactive: #777d88;
85
+ --dark-color-record-hover: #a2e9fc;
86
+ --dark-color-record-inactive: #61dafb;
87
--dark-color-search-match: yellow;
88
--dark-color-search-match-current: #f7923b;
89
--dark-color-selected-background: #178fb9;