Added placeholder Profiler sidebar views
Brian Vaughn committed
Mar 19, 2019 at 12:41 UTC
433b6aadd6cda3caaa0a86a48ff2ce441010d8b4
6 files changed
+145
-9
src/devtools/views/Profiler/Profiler.css
-4
@@ -62,10 +62,6 @@
62
border-top: 1px solid var(--color-border);
63
}
64
65
-.InspectedProperties {
66
- padding: 0.5rem;
67
-}
68
-
65
.VRule {
66
height: 20px;
67
width: 1px;
src/devtools/views/Profiler/Profiler.js
+16
-5
@@ -11,6 +11,8 @@ import CommitRanked from './CommitRanked';
11
import FilterModal from './FilterModal';
12
import RecordToggle from './RecordToggle';
13
import SnapshotSelector from './SnapshotSelector';
14
+import SidebarCommitInfo from './SidebarCommitInfo';
15
+import SidebarInteractions from './SidebarInteractions';
16
17
import styles from './Profiler.css';
18
@@ -124,6 +126,19 @@ function SuspendingProfiler() {
126
break;
127
}
128
129
+ let sidebar = null;
130
+ switch (tab) {
131
+ case 'interactions':
132
+ sidebar = <SidebarInteractions />;
133
+ break;
134
+ case 'flame-chart':
135
+ case 'ranked-chart':
136
+ sidebar = <SidebarCommitInfo />;
137
+ break;
138
+ default:
139
+ break;
140
+ }
141
+
142
return (
143
<div className={styles.Profiler}>
144
<div className={styles.LeftColumn}>
@@ -157,11 +172,7 @@ function SuspendingProfiler() {
172
</div>
173
</div>
174
<div className={styles.RightColumn}>
160
- <Suspense fallback={<ProfilerFallback />}>
161
- {/* TODO (profiler) Dynamic information */}
162
- <div className={styles.Toolbar}>Commit information</div>
163
- <div className={styles.InspectedProperties} />
164
- </Suspense>
175
+ <Suspense fallback={<ProfilerFallback />}>{sidebar}</Suspense>
176
</div>
177
</div>
178
);
src/devtools/views/Profiler/SidebarCommitInfo.css
new
+34
@@ -0,0 +1,34 @@
1
+.Toolbar {
2
+ height: 2.25rem;
3
+ padding: 0 0.5rem;
4
+ flex: 0 0 auto;
5
+ display: flex;
6
+ align-items: center;
7
+ border-bottom: 1px solid var(--color-border);
8
+ border-top: 1px solid var(--color-border);
9
+}
10
+
11
+.Content {
12
+ padding: 0.5rem;
13
+}
14
+
15
+.List {
16
+ list-style: none;
17
+ margin: 0;
18
+ padding: 0;
19
+}
20
+
21
+.ListItem {
22
+ margin: 0 0 0.25rem;
23
+}
24
+
25
+.Label {
26
+ overflow: hidden;
27
+ text-overflow: ellipsis;
28
+ font-weight: bold;
29
+}
30
+
31
+.Value {
32
+ font-family: var(--font-family-monospace);
33
+ font-size: var(--font-size-monospace-normal);
34
+}
src/devtools/views/Profiler/SidebarCommitInfo.js
new
+58
@@ -0,0 +1,58 @@
1
+// @flow
2
+
3
+import React, { Fragment, useContext } from 'react';
4
+import { ProfilerContext } from './ProfilerContext';
5
+import { formatDuration, formatTime } from './utils';
6
+import { StoreContext } from '../context';
7
+
8
+import styles from './SidebarCommitInfo.css';
9
+
10
+export type Props = {||};
11
+
12
+export default function SidebarCommitInfo(_: Props) {
13
+ const { selectedCommitIndex, rendererID, rootID } = useContext(
14
+ ProfilerContext
15
+ );
16
+
17
+ const { profilingCache } = useContext(StoreContext);
18
+ const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
19
+ {
20
+ rendererID: ((rendererID: any): number),
21
+ rootID: ((rootID: any): number),
22
+ }
23
+ );
24
+
25
+ if (selectedCommitIndex === null) {
26
+ return 'TODO';
27
+ }
28
+
29
+ return (
30
+ <Fragment>
31
+ <div className={styles.Toolbar}>Commit information</div>
32
+ <div className={styles.Content}>
33
+ <ul className={styles.List}>
34
+ <li className={styles.ListItem}>
35
+ <label className={styles.Label}>Committed at</label>:{' '}
36
+ <span className={styles.Value}>
37
+ {formatTime(commitTimes[selectedCommitIndex])}s
38
+ </span>
39
+ </li>
40
+ <li className={styles.ListItem}>
41
+ <label className={styles.Label}>Render duration</label>:{' '}
42
+ <span className={styles.Value}>
43
+ {formatDuration(commitDurations[selectedCommitIndex])}ms
44
+ </span>
45
+ </li>
46
+ <li className={styles.ListItem}>
47
+ <label className={styles.Label}>Interactions</label>:
48
+ <ul className={styles.List}>
49
+ <li className={styles.ListItem}>
50
+ <div>Coming soon</div>
51
+ </li>
52
+ </ul>
53
+ </li>
54
+ </ul>
55
+ </div>
56
+ </Fragment>
57
+ );
58
+}
src/devtools/views/Profiler/SidebarInteractions.css
new
+13
@@ -0,0 +1,13 @@
1
+.Toolbar {
2
+ height: 2.25rem;
3
+ padding: 0 0.5rem;
4
+ flex: 0 0 auto;
5
+ display: flex;
6
+ align-items: center;
7
+ border-bottom: 1px solid var(--color-border);
8
+ border-top: 1px solid var(--color-border);
9
+}
10
+
11
+.Content {
12
+ padding: 0.5rem;
13
+}
src/devtools/views/Profiler/SidebarInteractions.js
new
+24
@@ -0,0 +1,24 @@
1
+// @flow
2
+
3
+import React, { Fragment, useContext } from 'react';
4
+import { ProfilerContext } from './ProfilerContext';
5
+import { StoreContext } from '../context';
6
+
7
+import styles from './SidebarInteractions.css';
8
+
9
+export type Props = {||};
10
+
11
+export default function SidebarInteractions(_: Props) {
12
+ const { selectedCommitIndex, rendererID, rootID } = useContext(
13
+ ProfilerContext
14
+ );
15
+
16
+ const { profilingCache } = useContext(StoreContext);
17
+
18
+ return (
19
+ <Fragment>
20
+ <div className={styles.Toolbar}>Interaction</div>
21
+ <div className={styles.Content}>Coming soon</div>
22
+ </Fragment>
23
+ );
24
+}