Moved some shared CSS vars into CSS
Brian Vaughn committed
Mar 25, 2019 at 10:29 UTC
030914fdcad02d04cb811e4707232b24e30d252f
4 files changed
+23
-5
src/devtools/views/Profiler/InteractionListItem.css
+2
-2
@@ -34,8 +34,8 @@
34
35
.CommitBox {
36
position: absolute;
37
- width: 10px;
38
- height: 10px;
37
+ width: var(--interaction-commit-size);
38
+ height: var(--interaction-commit-size);
39
background-color: var(--color-commit-did-not-render);
40
cursor: pointer;
41
}
src/devtools/views/Profiler/Interactions.js
+15
-3
@@ -90,9 +90,21 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
90
);
91
92
const itemData = useMemo<ItemData>(() => {
93
- // TODO (profiling) constants
94
- const labelWidth = Math.min(200, width / 5);
95
- const timelineWidth = width - labelWidth - 10;
93
+ const interactionCommitSize = parseInt(
94
+ getComputedStyle((document.body: any)).getPropertyValue(
95
+ '--interaction-commit-size'
96
+ ),
97
+ 10
98
+ );
99
+ const interactionLabelWidth = parseInt(
100
+ getComputedStyle((document.body: any)).getPropertyValue(
101
+ '--interaction-label-width'
102
+ ),
103
+ 10
104
+ );
105
+
106
+ const labelWidth = Math.min(interactionLabelWidth, width / 5);
107
+ const timelineWidth = width - labelWidth - interactionCommitSize;
108
109
return {
110
chartData,
src/devtools/views/Profiler/constants.js
+2
@@ -2,6 +2,8 @@
2
3
export const barHeight = 20;
4
export const barWidthThreshold = 2;
5
+export const interactionCommitSize = 10;
6
+export const interactionLabelWidth = 200;
7
export const maxBarWidth = 30;
8
export const minBarHeight = 5;
9
export const minBarWidth = 5;
src/devtools/views/root.css
+4
@@ -110,6 +110,10 @@
110
Courier, monospace;
111
--font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
112
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
113
+
114
+ /* Constant values shared between JS and CSS */
115
+ --interaction-commit-size: 10px;
116
+ --interaction-label-width: 200px;
117
}
118
119
* {