Fixed edge-case display density bug

src/devtools/views/SettingsContext.js

@@ -11,6 +11,11 @@ export type Theme = 'auto' | 'light' | 'dark';
 type Context = {|
   displayDensity: DisplayDensity,
   setDisplayDensity(value: DisplayDensity): void,
+
+  // Derived from display density.
+  // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
+  lineHeight: number,
+
   theme: Theme,
   setTheme(value: Theme): void,
 |};
@@ -31,6 +36,19 @@ function SettingsContextController({ browserTheme, children }: Props) {
   );
   const [theme, setTheme] = useLocalStorage<Theme>('theme', 'auto');
 
+  const comfortableLineHeight = parseInt(
+    getComputedStyle((document.body: any)).getPropertyValue(
+      '--comfortable-line-height-data'
+    ),
+    10
+  );
+  const compactLineHeight = parseInt(
+    getComputedStyle((document.body: any)).getPropertyValue(
+      '--compact-line-height-data'
+    ),
+    10
+  );
+
   useLayoutEffect(() => {
     switch (displayDensity) {
       case 'compact':
@@ -66,6 +84,10 @@ function SettingsContextController({ browserTheme, children }: Props) {
       setDisplayDensity,
       theme,
       setTheme,
+      lineHeight:
+        displayDensity === 'compact'
+          ? compactLineHeight
+          : comfortableLineHeight,
     }),
     [displayDensity, setDisplayDensity, theme, setTheme]
   );

src/devtools/views/Tree.js

@@ -10,6 +10,7 @@ import React, {
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
 import { TreeContext } from './TreeContext';
+import { SettingsContext } from './SettingsContext';
 import ButtonIcon from './ButtonIcon';
 import Element from './Element';
 import OwnersStack from './OwnersStack';
@@ -31,6 +32,8 @@ export default function Tree(props: Props) {
   } = useContext(TreeContext);
   const listRef = useRef<FixedSizeList<any>>();
 
+  const { lineHeight } = useContext(SettingsContext);
+
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list.
   useLayoutEffect(() => {
@@ -79,14 +82,6 @@ export default function Tree(props: Props) {
     [baseDepth, numElements, getElementAtIndex]
   );
 
-  const itemSize =
-    parseInt(
-      getComputedStyle((document.body: any)).getPropertyValue(
-        '--line-height-data'
-      ),
-      10
-    ) || 18;
-
   return (
     <div className={styles.Tree}>
       <div className={styles.SearchInput}>
@@ -106,7 +101,7 @@ export default function Tree(props: Props) {
               height={height}
               itemCount={numElements}
               itemData={itemData}
-              itemSize={itemSize}
+              itemSize={lineHeight}
               ref={listRef}
               width={width}
             >