Handle case where :root styles aren't (yet) applied when SettingsContext mounts
This fixes a possible bug in the inline shell where line-heights are NaN so the Tree (react-window List) gets created with a itemSize of NaN
Brian Vaughn committed
Aug 6, 2019 at 08:46 UTC
2349f04478269f922feccb6db4b7a443eb549e74
1 file changed
+41
-13
src/devtools/views/Settings/SettingsContext.js
+41
-13
@@ -6,6 +6,7 @@ import React, {
6
useEffect,
7
useLayoutEffect,
8
useMemo,
9
+ useState,
10
} from 'react';
11
import { LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY } from 'src/constants';
12
import { useLocalStorage } from '../hooks';
@@ -36,6 +37,11 @@ SettingsContext.displayName = 'SettingsContext';
37
38
type DocumentElements = Array<HTMLElement>;
39
40
+type CurrentLineHeights = {|
41
+ comfortableLineHeight: number,
42
+ compactLineHeight: number,
43
+|};
44
+
45
type Props = {|
46
browserTheme: BrowserTheme,
47
children: React$Node,
@@ -83,15 +89,24 @@ function SettingsContextController({
89
return array;
90
}, [componentsPortalContainer, profilerPortalContainer]);
91
86
- const computedStyle = getComputedStyle((document.body: any));
87
- const comfortableLineHeight = parseInt(
88
- computedStyle.getPropertyValue('--comfortable-line-height-data'),
89
- 10
90
- );
91
- const compactLineHeight = parseInt(
92
- computedStyle.getPropertyValue('--compact-line-height-data'),
93
- 10
94
- );
92
+ const [
93
+ currentLineHeights,
94
+ setCurrentLineHeights,
95
+ ] = useState<CurrentLineHeights>(getCurrentLineHeights);
96
+
97
+ // In case the root styles have not yet been applied, wait a bit and then check again.
98
+ // This avoids a bad case of NaN line heights in lists/trees.
99
+ useEffect(() => {
100
+ if (Number.isNaN(currentLineHeights.compactLineHeight)) {
101
+ const intervalID = setInterval(() => {
102
+ const newLineHeights = getCurrentLineHeights();
103
+ if (!Number.isNaN(newLineHeights.compactLineHeight)) {
104
+ setCurrentLineHeights(newLineHeights);
105
+ }
106
+ }, 100);
107
+ return () => clearInterval(intervalID);
108
+ }
109
+ }, [currentLineHeights]);
110
111
useLayoutEffect(() => {
112
switch (displayDensity) {
@@ -136,12 +151,11 @@ function SettingsContextController({
151
setAppendComponentStack,
152
lineHeight:
153
displayDensity === 'compact'
139
- ? compactLineHeight
140
- : comfortableLineHeight,
154
+ ? currentLineHeights.compactLineHeight
155
+ : currentLineHeights.comfortableLineHeight,
156
}),
157
[
143
- comfortableLineHeight,
144
- compactLineHeight,
158
+ currentLineHeights,
159
displayDensity,
160
setDisplayDensity,
161
setTheme,
@@ -158,6 +172,20 @@ function SettingsContextController({
172
);
173
}
174
175
+function getCurrentLineHeights(): CurrentLineHeights {
176
+ const computedStyle = getComputedStyle((document.body: any));
177
+ return {
178
+ comfortableLineHeight: parseInt(
179
+ computedStyle.getPropertyValue('--comfortable-line-height-data'),
180
+ 10
181
+ ),
182
+ compactLineHeight: parseInt(
183
+ computedStyle.getPropertyValue('--compact-line-height-data'),
184
+ 10
185
+ ),
186
+ };
187
+}
188
+
189
function setStyleVariable(
190
name: string,
191
value: string,