Display density preference updates :root fontSize
As a result, paddings and sizes (e.g. tab bar heights) will also be impacted now by this preference. More importantly, Profile charts will also use the line height preference, so the 'comfortable' setting will hopefully make profiling data easier to read.
Brian Vaughn committed
Jun 4, 2019 at 07:24 UTC
5963998fbec54872c35ceae45b6ebbaae57254fd
8 files changed
+36
-25
src/devtools/views/Profiler/ChartNode.js
+1
-2
@@ -1,7 +1,6 @@
1
// @flow
2
3
import React from 'react';
4
-import { textHeight } from './constants';
4
5
import styles from './ChartNode.css';
6
@@ -57,7 +56,7 @@ export default function ChartNode({
56
opacity: isDimmed ? 0.75 : 1,
57
display: width < minWidthToDisplay ? 'none' : 'block',
58
}}
60
- y={height < textHeight ? -textHeight : 0}
59
+ y={0}
60
>
61
<div className={styles.Div} style={textStyle}>
62
{label}
src/devtools/views/Profiler/CommitFlamegraph.js
+3
-2
@@ -6,9 +6,9 @@ import { FixedSizeList } from 'react-window';
6
import { ProfilerContext } from './ProfilerContext';
7
import NoCommitData from './NoCommitData';
8
import CommitFlamegraphListItem from './CommitFlamegraphListItem';
9
-import { barHeight } from './constants';
9
import { scale } from './utils';
10
import { StoreContext } from '../context';
11
+import { SettingsContext } from '../Settings/SettingsContext';
12
13
import styles from './CommitFlamegraph.css';
14
@@ -84,6 +84,7 @@ type Props = {|
84
|};
85
86
function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
87
+ const { lineHeight } = useContext(SettingsContext);
88
const { selectFiber, selectedFiberID } = useContext(ProfilerContext);
89
90
const selectedChartNodeIndex = useMemo<number>(() => {
@@ -135,7 +136,7 @@ function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
136
innerElementType={InnerElementType}
137
itemCount={chartData.depth}
138
itemData={itemData}
138
- itemSize={barHeight}
139
+ itemSize={lineHeight}
140
width={width}
141
>
142
{CommitFlamegraphListItem}
src/devtools/views/Profiler/CommitFlamegraphListItem.js
+5
-3
@@ -1,10 +1,11 @@
1
// @flow
2
3
-import React, { Fragment, memo, useCallback } from 'react';
3
+import React, { Fragment, memo, useCallback, useContext } from 'react';
4
import { areEqual } from 'react-window';
5
-import { barHeight, barWidthThreshold } from './constants';
5
+import { barWidthThreshold } from './constants';
6
import { getGradientColor } from './utils';
7
import ChartNode from './ChartNode';
8
+import { SettingsContext } from '../Settings/SettingsContext';
9
10
import type { ItemData } from './CommitFlamegraph';
11
@@ -25,6 +26,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
26
} = data;
27
const { renderPathNodes, maxSelfDuration, rows } = chartData;
28
29
+ const { lineHeight } = useContext(SettingsContext);
30
const handleClick = useCallback(
31
(event: SyntheticMouseEvent<*>, id: number, name: string) => {
32
event.stopPropagation();
@@ -89,7 +91,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
91
return (
92
<ChartNode
93
color={color}
92
- height={barHeight}
94
+ height={lineHeight}
95
isDimmed={index < selectedChartNodeIndex}
96
key={id}
97
label={label}
src/devtools/views/Profiler/CommitRanked.js
+3
-2
@@ -6,9 +6,9 @@ import { FixedSizeList } from 'react-window';
6
import { ProfilerContext } from './ProfilerContext';
7
import NoCommitData from './NoCommitData';
8
import CommitRankedListItem from './CommitRankedListItem';
9
-import { barHeight } from './constants';
9
import { scale } from './utils';
10
import { StoreContext } from '../context';
11
+import { SettingsContext } from '../Settings/SettingsContext';
12
13
import styles from './CommitRanked.css';
14
@@ -82,6 +82,7 @@ type Props = {|
82
|};
83
84
function CommitRanked({ chartData, commitTree, height, width }: Props) {
85
+ const { lineHeight } = useContext(SettingsContext);
86
const { selectedFiberID, selectFiber } = useContext(ProfilerContext);
87
88
const selectedFiberIndex = useMemo(
@@ -107,7 +108,7 @@ function CommitRanked({ chartData, commitTree, height, width }: Props) {
108
innerElementType="svg"
109
itemCount={chartData.nodes.length}
110
itemData={itemData}
110
- itemSize={barHeight}
111
+ itemSize={lineHeight}
112
width={width}
113
>
114
{CommitRankedListItem}
src/devtools/views/Profiler/CommitRankedListItem.js
+6
-3
@@ -1,10 +1,11 @@
1
// @flow
2
3
-import React, { memo, useCallback } from 'react';
3
+import React, { memo, useCallback, useContext } from 'react';
4
import { areEqual } from 'react-window';
5
-import { barHeight, minBarWidth } from './constants';
5
+import { minBarWidth } from './constants';
6
import { getGradientColor } from './utils';
7
import ChartNode from './ChartNode';
8
+import { SettingsContext } from '../Settings/SettingsContext';
9
10
import type { ItemData } from './CommitRanked';
11
@@ -19,6 +20,8 @@ function CommitRankedListItem({ data, index, style }: Props) {
20
21
const node = chartData.nodes[index];
22
23
+ const { lineHeight } = useContext(SettingsContext);
24
+
25
const handleClick = useCallback(
26
event => {
27
event.stopPropagation();
@@ -36,7 +39,7 @@ function CommitRankedListItem({ data, index, style }: Props) {
39
return (
40
<ChartNode
41
color={getGradientColor(node.value / chartData.maxValue)}
39
- height={barHeight}
42
+ height={lineHeight}
43
isDimmed={index < selectedFiberIndex}
44
key={node.id}
45
label={node.label}
src/devtools/views/Profiler/constants.js
-3
@@ -1,10 +1,7 @@
1
// @flow
2
3
-export const barHeight = 20;
3
export const barWidthThreshold = 2;
4
export const interactionCommitSize = 10;
5
export const interactionLabelWidth = 200;
6
export const maxBarWidth = 30;
8
-export const minBarHeight = 5;
7
export const minBarWidth = 5;
10
-export const textHeight = 18;
src/devtools/views/Settings/SettingsContext.js
+16
-10
@@ -5,7 +5,7 @@ import { useLocalStorage } from '../hooks';
5
6
import type { BrowserTheme } from '../DevTools';
7
8
-export type DisplayDensity = 'compact' | 'comfortable';
8
+export type DisplayDensity = 'comfortable' | 'compact';
9
export type Theme = 'auto' | 'light' | 'dark';
10
11
type Context = {|
@@ -78,27 +78,24 @@ function SettingsContextController({
78
settingsPortalContainer,
79
]);
80
81
+ const computedStyle = getComputedStyle((document.body: any));
82
const comfortableLineHeight = parseInt(
82
- getComputedStyle((document.body: any)).getPropertyValue(
83
- '--comfortable-line-height-data'
84
- ),
83
+ computedStyle.getPropertyValue('--comfortable-line-height-data'),
84
10
85
);
86
const compactLineHeight = parseInt(
88
- getComputedStyle((document.body: any)).getPropertyValue(
89
- '--compact-line-height-data'
90
- ),
87
+ computedStyle.getPropertyValue('--compact-line-height-data'),
88
10
89
);
90
91
useLayoutEffect(() => {
92
switch (displayDensity) {
96
- case 'compact':
97
- updateDisplayDensity('compact', documentElements);
98
- break;
93
case 'comfortable':
94
updateDisplayDensity('comfortable', documentElements);
95
break;
96
+ case 'compact':
97
+ updateDisplayDensity('compact', documentElements);
98
+ break;
99
default:
100
throw Error(`Unsupported displayDensity value "${displayDensity}"`);
101
}
@@ -193,6 +190,15 @@ function updateDisplayDensity(
190
updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
191
updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);
192
updateStyleHelper(displayDensity, 'line-height-data', documentElements);
193
+
194
+ // Sizes and paddings/margins are all rem-based,
195
+ // so update the root font-size as well when the display preference changes.
196
+ const computedStyle = getComputedStyle((document.body: any));
197
+ const fontSize = computedStyle.getPropertyValue(
198
+ `--${displayDensity}-root-font-size`
199
+ );
200
+ const root = document.querySelector(':root');
201
+ ((root: any): HTMLElement).style.fontSize = fontSize;
202
}
203
204
function updateThemeVariables(
src/devtools/views/root.css
+2
@@ -142,6 +142,7 @@
142
--compact-font-size-sans-normal: 12px;
143
--compact-font-size-sans-large: 14px;
144
--compact-line-height-data: 18px;
145
+ --compact-root-font-size: 16px;
146
147
/* Comfortable density */
148
--comfortable-font-size-monospace-small: 10px;
@@ -151,6 +152,7 @@
152
--comfortable-font-size-sans-normal: 14px;
153
--comfortable-font-size-sans-large: 16px;
154
--comfortable-line-height-data: 22px;
155
+ --comfortable-root-font-size: 20px;
156
157
/* GitHub.com system fonts */
158
--font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,