Tidied up Profiler toolbar UI
Brian Vaughn committed
Mar 11, 2019 at 09:50 UTC
22a3c757fb6df9af7cdef12a6ec589e8d7487df9
3 files changed
+69
-33
src/devtools/views/Profiler/Profiler.css
+21
-2
@@ -2,13 +2,28 @@
2
width: 100%;
3
height: 100%;
4
display: flex;
5
- flex-direction: column;
5
+ flex-direction: row;
6
+ align-items: stretch;
7
font-family: var(--font-family-sans);
8
font-size: var(--font-size-sans-normal);
9
background-color: var(--color-background);
10
color: var(--color-text-color);
11
}
12
13
+.LeftColumn {
14
+ display: flex;
15
+ flex-direction: column;
16
+ flex: 2 1 200px;
17
+}
18
+
19
+.RightColumn {
20
+ display: flex;
21
+ flex-direction: column;
22
+ flex: 1 1 100px;
23
+ max-width: 300px;
24
+ border-left: 1px solid var(--color-border);
25
+}
26
+
27
.Content {
28
position: relative;
29
flex: 1 1 auto;
@@ -38,13 +53,17 @@
53
}
54
55
.Toolbar {
56
+ height: 2.25rem;
57
padding: 0 0.5rem;
58
flex: 0 0 auto;
59
display: flex;
60
align-items: center;
61
border-bottom: 1px solid var(--color-border);
62
border-top: 1px solid var(--color-border);
47
- color: var(--color-button);
63
+}
64
+
65
+.InspectedProperties {
66
+ padding: 0.5rem;
67
}
68
69
.VRule {
src/devtools/views/Profiler/Profiler.js
+47
-31
@@ -29,6 +29,9 @@ function ProfilerInner(_: Props) {
29
const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
30
const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
31
32
+ // TODO (profiling) Maybe a smarter check here
33
+ const showProfilingData = !isProfiling && hasProfilingData;
34
+
35
let view = null;
36
if (isProfiling) {
37
view = <RecortdingInProgress />;
@@ -42,38 +45,51 @@ function ProfilerInner(_: Props) {
45
46
return (
47
<div className={styles.Profiler}>
45
- <div className={styles.Toolbar}>
46
- <RecordToggle />
47
- <Button disabled title="Reload and start profiling">
48
- {/* TODO (profiling) Wire up reload button */}
49
- <ButtonIcon type="reload" />
50
- </Button>
51
- <div className={styles.VRule} />
52
- <TabBar
53
- currentTab={tab}
54
- disabled={isProfiling || !hasProfilingData}
55
- id="Profiler"
56
- selectTab={setTab}
57
- size="small"
58
- tabs={tabs}
59
- />
60
- <div className={styles.Spacer} />
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}
73
- {isFilterModalShowing && (
74
- <FilterModal dismissModal={dismissFilterModal} />
75
- )}
48
+ <div className={styles.LeftColumn}>
49
+ <div className={styles.Toolbar}>
50
+ <RecordToggle />
51
+ <Button disabled title="Reload and start profiling">
52
+ {/* TODO (profiling) Wire up reload button */}
53
+ <ButtonIcon type="reload" />
54
+ </Button>
55
+ <div className={styles.VRule} />
56
+ <TabBar
57
+ currentTab={tab}
58
+ disabled={!showProfilingData}
59
+ id="Profiler"
60
+ selectTab={setTab}
61
+ size="small"
62
+ tabs={tabs}
63
+ />
64
+ <div className={styles.Spacer} />
65
+ <Button onClick={showFilterModal} title="Filter commits by duration">
66
+ <ButtonIcon type="filter" />
67
+ </Button>
68
+ {showProfilingData && (
69
+ <Fragment>
70
+ <div className={styles.VRule} />
71
+ <SnapshotSelector />
72
+ </Fragment>
73
+ )}
74
+ </div>
75
+ <div className={styles.Content}>
76
+ {view}
77
+ {isFilterModalShowing && ( // TODO (profiler) Position when snapshot graph is open
78
+ <FilterModal dismissModal={dismissFilterModal} />
79
+ )}
80
+ </div>
81
</div>
82
+ {showProfilingData && (
83
+ <div className={styles.RightColumn}>
84
+ {/* TODO (profiler) Dynamic information */}
85
+ <div className={styles.Toolbar}>Commit information</div>
86
+ <div className={styles.InspectedProperties}>
87
+ Committed at: 0.8s <br />
88
+ <br />
89
+ Render duration: 2.1ms
90
+ </div>
91
+ </div>
92
+ )}
93
</div>
94
);
95
}
src/devtools/views/TabBar.css
+1
@@ -1,6 +1,7 @@
1
.Tab,
2
.TabCurrent,
3
.TabDisabled {
4
+ height: 100%;
5
display: flex;
6
align-items: center;
7
cursor: pointer;