Profiler CSS/layout tweaks
Brian Vaughn committed
Mar 13, 2019 at 16:25 UTC
8b3546b437668cc6a6913193ac78279c481f90ae
6 files changed
+40
-19
src/devtools/views/Profiler/SnapshotCommitListItem.css
new
+15
@@ -0,0 +1,15 @@
1
+.Outer {
2
+ user-select: none;
3
+ cursor: pointer;
4
+ border-bottom: 3px solid transparent;
5
+ padding-top: 4px;
6
+ padding-bottom: 1px;
7
+ display: flex;
8
+ align-items: flex-end;
9
+}
10
+
11
+.Inner {
12
+ width: 100%;
13
+ min-height: 5px;
14
+ background-color: var(--color-commit-did-not-render);
15
+}
src/devtools/views/Profiler/SnapshotCommitListItem.js
+6
-12
@@ -4,6 +4,8 @@ import React, { memo, useCallback } from 'react';
4
import { areEqual } from 'react-window';
5
import { getGradientColor, formatDuration, formatTime } from './utils';
6
7
+import styles from './SnapshotCommitListItem.css';
8
+
9
import type { ItemData } from './SnapshotCommitList';
10
11
type Props = {
@@ -40,34 +42,26 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
42
43
return (
44
<div
45
+ className={styles.Outer}
46
onClick={handleClick}
47
onMouseEnter={isMouseDown ? handleClick : null}
48
style={{
49
...style,
50
width,
48
- userSelect: 'none',
49
- cursor: 'pointer',
51
borderBottom: isSelected
52
? '3px solid var(--color-tree-node-selected)'
52
- : '3px solid transparent',
53
- paddingTop: 4,
54
- paddingBottom: 1,
55
- display: 'flex',
56
- alignItems: 'flex-end',
53
+ : undefined,
54
}}
55
title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
56
commitTime
57
)}s`}
58
>
59
<div
60
+ className={styles.Inner}
61
style={{
64
- width,
62
height: `${Math.round(percentage * 100)}%`,
66
- minHeight: 5,
63
backgroundColor:
68
- percentage === 0
69
- ? 'var(--color-commit-did-not-render)'
70
- : getGradientColor(percentage),
64
+ percentage > 0 ? getGradientColor(percentage) : undefined,
65
}}
66
/>
67
</div>
src/devtools/views/Profiler/SnapshotSelector.css
+3
-1
@@ -12,8 +12,9 @@
12
}
13
14
.Commits {
15
- flex: 1 1 150px;
15
+ flex: 1 1 auto;
16
height: 2.25rem;
17
+ min-width: 50px;
18
margin-left: 0.25rem;
19
}
20
@@ -25,5 +26,6 @@
26
}
27
28
.Number {
29
+ white-space: nowrap;
30
font-family: var(--font-family-monospace);
31
}
src/devtools/views/Profiler/constants.js
-3
@@ -1,8 +1,5 @@
1
// @flow
2
3
-export const barHeight = 20;
4
-export const barWidth = 100;
5
-export const barWidthThreshold = 2;
3
export const minBarHeight = 5;
4
export const minBarWidth = 5;
5
export const textHeight = 18;
src/devtools/views/TabBar.css
+9
-2
@@ -58,7 +58,14 @@
58
height: 1rem;
59
}
60
61
-.TabLabel {
61
+.TabLabelLarge,
62
+.TabLabelSmall {
63
+}
64
+
65
+@media screen and (max-width: 900px) {
66
+ .TabLabelSmall {
67
+ display: none;
68
+ }
69
}
70
71
@media screen and (max-width: 600px) {
@@ -67,7 +74,7 @@
74
margin-right: 0;
75
}
76
70
- .TabLabel {
77
+ .TabLabelLarge {
78
display: none;
79
}
80
}
src/devtools/views/TabBar.js
+7
-1
@@ -82,7 +82,13 @@ export default function TabBar({
82
}`}
83
type={icon}
84
/>
85
- <span className={styles.TabLabel}>{label}</span>
85
+ <span
86
+ className={
87
+ size === 'large' ? styles.TabLabelLarge : styles.TabLabelSmall
88
+ }
89
+ >
90
+ {label}
91
+ </span>
92
</label>
93
))}
94
</Fragment>