Fixed edge-case display density bug
Brian Vaughn committed
Feb 14, 2019 at 12:46 UTC
a07d9862cac51ada3f31077b251522670a67f932
2 files changed
+26
-9
src/devtools/views/SettingsContext.js
+22
@@ -11,6 +11,11 @@ export type Theme = 'auto' | 'light' | 'dark';
11
type Context = {|
12
displayDensity: DisplayDensity,
13
setDisplayDensity(value: DisplayDensity): void,
14
+
15
+ // Derived from display density.
16
+ // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
17
+ lineHeight: number,
18
+
19
theme: Theme,
20
setTheme(value: Theme): void,
21
|};
@@ -31,6 +36,19 @@ function SettingsContextController({ browserTheme, children }: Props) {
36
);
37
const [theme, setTheme] = useLocalStorage<Theme>('theme', 'auto');
38
39
+ const comfortableLineHeight = parseInt(
40
+ getComputedStyle((document.body: any)).getPropertyValue(
41
+ '--comfortable-line-height-data'
42
+ ),
43
+ 10
44
+ );
45
+ const compactLineHeight = parseInt(
46
+ getComputedStyle((document.body: any)).getPropertyValue(
47
+ '--compact-line-height-data'
48
+ ),
49
+ 10
50
+ );
51
+
52
useLayoutEffect(() => {
53
switch (displayDensity) {
54
case 'compact':
@@ -66,6 +84,10 @@ function SettingsContextController({ browserTheme, children }: Props) {
84
setDisplayDensity,
85
theme,
86
setTheme,
87
+ lineHeight:
88
+ displayDensity === 'compact'
89
+ ? compactLineHeight
90
+ : comfortableLineHeight,
91
}),
92
[displayDensity, setDisplayDensity, theme, setTheme]
93
);
src/devtools/views/Tree.js
+4
-9
@@ -10,6 +10,7 @@ import React, {
10
import AutoSizer from 'react-virtualized-auto-sizer';
11
import { FixedSizeList } from 'react-window';
12
import { TreeContext } from './TreeContext';
13
+import { SettingsContext } from './SettingsContext';
14
import ButtonIcon from './ButtonIcon';
15
import Element from './Element';
16
import OwnersStack from './OwnersStack';
@@ -31,6 +32,8 @@ export default function Tree(props: Props) {
32
} = useContext(TreeContext);
33
const listRef = useRef<FixedSizeList<any>>();
34
35
+ const { lineHeight } = useContext(SettingsContext);
36
+
37
// Make sure a newly selected element is visible in the list.
38
// This is helpful for things like the owners list.
39
useLayoutEffect(() => {
@@ -79,14 +82,6 @@ export default function Tree(props: Props) {
82
[baseDepth, numElements, getElementAtIndex]
83
);
84
82
- const itemSize =
83
- parseInt(
84
- getComputedStyle((document.body: any)).getPropertyValue(
85
- '--line-height-data'
86
- ),
87
- 10
88
- ) || 18;
89
-
85
return (
86
<div className={styles.Tree}>
87
<div className={styles.SearchInput}>
@@ -106,7 +101,7 @@ export default function Tree(props: Props) {
101
height={height}
102
itemCount={numElements}
103
itemData={itemData}
109
- itemSize={itemSize}
104
+ itemSize={lineHeight}
105
ref={listRef}
106
width={width}
107
>