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.

src/devtools/views/Profiler/ChartNode.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react';
-import { textHeight } from './constants';
 
 import styles from './ChartNode.css';
 
@@ -57,7 +56,7 @@ export default function ChartNode({
             opacity: isDimmed ? 0.75 : 1,
             display: width < minWidthToDisplay ? 'none' : 'block',
           }}
-          y={height < textHeight ? -textHeight : 0}
+          y={0}
         >
           <div className={styles.Div} style={textStyle}>
             {label}

src/devtools/views/Profiler/CommitFlamegraph.js

@@ -6,9 +6,9 @@ import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitFlamegraphListItem from './CommitFlamegraphListItem';
-import { barHeight } from './constants';
 import { scale } from './utils';
 import { StoreContext } from '../context';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import styles from './CommitFlamegraph.css';
 
@@ -84,6 +84,7 @@ type Props = {|
 |};
 
 function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
+  const { lineHeight } = useContext(SettingsContext);
   const { selectFiber, selectedFiberID } = useContext(ProfilerContext);
 
   const selectedChartNodeIndex = useMemo<number>(() => {
@@ -135,7 +136,7 @@ function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
       innerElementType={InnerElementType}
       itemCount={chartData.depth}
       itemData={itemData}
-      itemSize={barHeight}
+      itemSize={lineHeight}
       width={width}
     >
       {CommitFlamegraphListItem}

src/devtools/views/Profiler/CommitFlamegraphListItem.js

@@ -1,10 +1,11 @@
 // @flow
 
-import React, { Fragment, memo, useCallback } from 'react';
+import React, { Fragment, memo, useCallback, useContext } from 'react';
 import { areEqual } from 'react-window';
-import { barHeight, barWidthThreshold } from './constants';
+import { barWidthThreshold } from './constants';
 import { getGradientColor } from './utils';
 import ChartNode from './ChartNode';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import type { ItemData } from './CommitFlamegraph';
 
@@ -25,6 +26,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
   } = data;
   const { renderPathNodes, maxSelfDuration, rows } = chartData;
 
+  const { lineHeight } = useContext(SettingsContext);
   const handleClick = useCallback(
     (event: SyntheticMouseEvent<*>, id: number, name: string) => {
       event.stopPropagation();
@@ -89,7 +91,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
         return (
           <ChartNode
             color={color}
-            height={barHeight}
+            height={lineHeight}
             isDimmed={index < selectedChartNodeIndex}
             key={id}
             label={label}

src/devtools/views/Profiler/CommitRanked.js

@@ -6,9 +6,9 @@ import { FixedSizeList } from 'react-window';
 import { ProfilerContext } from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitRankedListItem from './CommitRankedListItem';
-import { barHeight } from './constants';
 import { scale } from './utils';
 import { StoreContext } from '../context';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import styles from './CommitRanked.css';
 
@@ -82,6 +82,7 @@ type Props = {|
 |};
 
 function CommitRanked({ chartData, commitTree, height, width }: Props) {
+  const { lineHeight } = useContext(SettingsContext);
   const { selectedFiberID, selectFiber } = useContext(ProfilerContext);
 
   const selectedFiberIndex = useMemo(
@@ -107,7 +108,7 @@ function CommitRanked({ chartData, commitTree, height, width }: Props) {
       innerElementType="svg"
       itemCount={chartData.nodes.length}
       itemData={itemData}
-      itemSize={barHeight}
+      itemSize={lineHeight}
       width={width}
     >
       {CommitRankedListItem}

src/devtools/views/Profiler/CommitRankedListItem.js

@@ -1,10 +1,11 @@
 // @flow
 
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useContext } from 'react';
 import { areEqual } from 'react-window';
-import { barHeight, minBarWidth } from './constants';
+import { minBarWidth } from './constants';
 import { getGradientColor } from './utils';
 import ChartNode from './ChartNode';
+import { SettingsContext } from '../Settings/SettingsContext';
 
 import type { ItemData } from './CommitRanked';
 
@@ -19,6 +20,8 @@ function CommitRankedListItem({ data, index, style }: Props) {
 
   const node = chartData.nodes[index];
 
+  const { lineHeight } = useContext(SettingsContext);
+
   const handleClick = useCallback(
     event => {
       event.stopPropagation();
@@ -36,7 +39,7 @@ function CommitRankedListItem({ data, index, style }: Props) {
   return (
     <ChartNode
       color={getGradientColor(node.value / chartData.maxValue)}
-      height={barHeight}
+      height={lineHeight}
       isDimmed={index < selectedFiberIndex}
       key={node.id}
       label={node.label}

src/devtools/views/Profiler/constants.js

@@ -1,10 +1,7 @@
 // @flow
 
-export const barHeight = 20;
 export const barWidthThreshold = 2;
 export const interactionCommitSize = 10;
 export const interactionLabelWidth = 200;
 export const maxBarWidth = 30;
-export const minBarHeight = 5;
 export const minBarWidth = 5;
-export const textHeight = 18;

src/devtools/views/Settings/SettingsContext.js

@@ -5,7 +5,7 @@ import { useLocalStorage } from '../hooks';
 
 import type { BrowserTheme } from '../DevTools';
 
-export type DisplayDensity = 'compact' | 'comfortable';
+export type DisplayDensity = 'comfortable' | 'compact';
 export type Theme = 'auto' | 'light' | 'dark';
 
 type Context = {|
@@ -78,27 +78,24 @@ function SettingsContextController({
     settingsPortalContainer,
   ]);
 
+  const computedStyle = getComputedStyle((document.body: any));
   const comfortableLineHeight = parseInt(
-    getComputedStyle((document.body: any)).getPropertyValue(
-      '--comfortable-line-height-data'
-    ),
+    computedStyle.getPropertyValue('--comfortable-line-height-data'),
     10
   );
   const compactLineHeight = parseInt(
-    getComputedStyle((document.body: any)).getPropertyValue(
-      '--compact-line-height-data'
-    ),
+    computedStyle.getPropertyValue('--compact-line-height-data'),
     10
   );
 
   useLayoutEffect(() => {
     switch (displayDensity) {
-      case 'compact':
-        updateDisplayDensity('compact', documentElements);
-        break;
       case 'comfortable':
         updateDisplayDensity('comfortable', documentElements);
         break;
+      case 'compact':
+        updateDisplayDensity('compact', documentElements);
+        break;
       default:
         throw Error(`Unsupported displayDensity value "${displayDensity}"`);
     }
@@ -193,6 +190,15 @@ function updateDisplayDensity(
   updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
   updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);
   updateStyleHelper(displayDensity, 'line-height-data', documentElements);
+
+  // Sizes and paddings/margins are all rem-based,
+  // so update the root font-size as well when the display preference changes.
+  const computedStyle = getComputedStyle((document.body: any));
+  const fontSize = computedStyle.getPropertyValue(
+    `--${displayDensity}-root-font-size`
+  );
+  const root = document.querySelector(':root');
+  ((root: any): HTMLElement).style.fontSize = fontSize;
 }
 
 function updateThemeVariables(

src/devtools/views/root.css

@@ -142,6 +142,7 @@
   --compact-font-size-sans-normal: 12px;
   --compact-font-size-sans-large: 14px;
   --compact-line-height-data: 18px;
+  --compact-root-font-size: 16px;
 
   /* Comfortable density */
   --comfortable-font-size-monospace-small: 10px;
@@ -151,6 +152,7 @@
   --comfortable-font-size-sans-normal: 14px;
   --comfortable-font-size-sans-large: 16px;
   --comfortable-line-height-data: 22px;
+  --comfortable-root-font-size: 20px;
 
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,