Handle case where :root styles aren't (yet) applied when SettingsCont…

…ext 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

src/devtools/views/Settings/SettingsContext.js

@@ -6,6 +6,7 @@ import React, {
   useEffect,
   useLayoutEffect,
   useMemo,
+  useState,
 } from 'react';
 import { LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY } from 'src/constants';
 import { useLocalStorage } from '../hooks';
@@ -36,6 +37,11 @@ SettingsContext.displayName = 'SettingsContext';
 
 type DocumentElements = Array<HTMLElement>;
 
+type CurrentLineHeights = {|
+  comfortableLineHeight: number,
+  compactLineHeight: number,
+|};
+
 type Props = {|
   browserTheme: BrowserTheme,
   children: React$Node,
@@ -83,15 +89,24 @@ function SettingsContextController({
     return array;
   }, [componentsPortalContainer, profilerPortalContainer]);
 
-  const computedStyle = getComputedStyle((document.body: any));
-  const comfortableLineHeight = parseInt(
-    computedStyle.getPropertyValue('--comfortable-line-height-data'),
-    10
-  );
-  const compactLineHeight = parseInt(
-    computedStyle.getPropertyValue('--compact-line-height-data'),
-    10
-  );
+  const [
+    currentLineHeights,
+    setCurrentLineHeights,
+  ] = useState<CurrentLineHeights>(getCurrentLineHeights);
+
+  // In case the root styles have not yet been applied, wait a bit and then check again.
+  // This avoids a bad case of NaN line heights in lists/trees.
+  useEffect(() => {
+    if (Number.isNaN(currentLineHeights.compactLineHeight)) {
+      const intervalID = setInterval(() => {
+        const newLineHeights = getCurrentLineHeights();
+        if (!Number.isNaN(newLineHeights.compactLineHeight)) {
+          setCurrentLineHeights(newLineHeights);
+        }
+      }, 100);
+      return () => clearInterval(intervalID);
+    }
+  }, [currentLineHeights]);
 
   useLayoutEffect(() => {
     switch (displayDensity) {
@@ -136,12 +151,11 @@ function SettingsContextController({
       setAppendComponentStack,
       lineHeight:
         displayDensity === 'compact'
-          ? compactLineHeight
-          : comfortableLineHeight,
+          ? currentLineHeights.compactLineHeight
+          : currentLineHeights.comfortableLineHeight,
     }),
     [
-      comfortableLineHeight,
-      compactLineHeight,
+      currentLineHeights,
       displayDensity,
       setDisplayDensity,
       setTheme,
@@ -158,6 +172,20 @@ function SettingsContextController({
   );
 }
 
+function getCurrentLineHeights(): CurrentLineHeights {
+  const computedStyle = getComputedStyle((document.body: any));
+  return {
+    comfortableLineHeight: parseInt(
+      computedStyle.getPropertyValue('--comfortable-line-height-data'),
+      10
+    ),
+    compactLineHeight: parseInt(
+      computedStyle.getPropertyValue('--compact-line-height-data'),
+      10
+    ),
+  };
+}
+
 function setStyleVariable(
   name: string,
   value: string,