Show commit boxes in interaxctions sidebar
Brian Vaughn committed
Mar 24, 2019 at 09:58 UTC
9d942b486a2562b7498cebdd9e76b404d9605534
2 files changed
+47
-9
src/devtools/views/Profiler/SidebarInteractions.css
+13
@@ -29,6 +29,10 @@
29
color: var(--color-dim);
30
}
31
32
+.Commits {
33
+ font-weight: bold;
34
+}
35
+
36
.List {
37
list-style: none;
38
margin: 0;
@@ -36,8 +40,17 @@
40
}
41
42
.ListItem {
43
+ display: flex;
44
+ flex-direction: row;
45
+ align-items: center;
46
padding: 0.25rem 0.5rem;
47
}
48
.ListItem:hover {
49
background-color: var(--color-hover-background);
50
}
51
+
52
+.CommitBox {
53
+ width: 20px;
54
+ height: 20px;
55
+ margin-right: 0.5rem;
56
+}
src/devtools/views/Profiler/SidebarInteractions.js
+34
-9
@@ -4,6 +4,7 @@ import React, { Fragment, useContext } from 'react';
4
import { ProfilerContext } from './ProfilerContext';
5
import { formatDuration, formatTime } from './utils';
6
import { StoreContext } from '../context';
7
+import { getGradientColor } from './utils';
8
9
import styles from './SidebarInteractions.css';
10
@@ -30,12 +31,19 @@ export default function SidebarInteractions(_: Props) {
31
rendererID: ((rendererID: any): number),
32
rootID: ((rootID: any): number),
33
});
33
- const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
34
- {
35
- rendererID: ((rendererID: any): number),
36
- rootID: ((rootID: any): number),
37
- }
38
- );
34
+
35
+ const profilingSummary = profilingCache.ProfilingSummary.read({
36
+ rendererID: ((rendererID: any): number),
37
+ rootID: ((rootID: any): number),
38
+ });
39
+
40
+ const { maxCommitDuration } = profilingCache.getInteractionsChartData({
41
+ interactions,
42
+ profilingSummary,
43
+ rootID: ((rootID: any): number),
44
+ });
45
+
46
+ const { commitDurations, commitTimes } = profilingSummary;
47
48
const interaction = ((interactions.find(
49
interaction => interaction.id === selectedInteractionID
@@ -52,6 +60,7 @@ export default function SidebarInteractions(_: Props) {
60
<div className={styles.Name}>{interaction.name}</div>
61
</div>
62
<div className={styles.Content}>
63
+ <div className={styles.Commits}>Commits:</div>
64
<ul className={styles.List}>
65
{interaction.commits.map(commitIndex => (
66
<li
@@ -59,9 +68,25 @@ export default function SidebarInteractions(_: Props) {
68
className={styles.ListItem}
69
onClick={() => viewCommit(commitIndex)}
70
>
62
- timestamp: {formatTime(commitTimes[commitIndex])}s
63
- <br />
64
- duration: {formatDuration(commitDurations[commitIndex])}ms
71
+ <div
72
+ className={styles.CommitBox}
73
+ style={{
74
+ backgroundColor: getGradientColor(
75
+ Math.min(
76
+ 1,
77
+ Math.max(
78
+ 0,
79
+ commitDurations[commitIndex] / maxCommitDuration
80
+ )
81
+ ) || 0
82
+ ),
83
+ }}
84
+ />
85
+ <div>
86
+ timestamp: {formatTime(commitTimes[commitIndex])}s
87
+ <br />
88
+ duration: {formatDuration(commitDurations[commitIndex])}ms
89
+ </div>
90
</li>
91
))}
92
</ul>