From 5963998fbec54872c35ceae45b6ebbaae57254fd Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 4 Jun 2019 07:24:14 -0700 Subject: [PATCH] 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 | 3 +-- .../views/Profiler/CommitFlamegraph.js | 5 ++-- .../Profiler/CommitFlamegraphListItem.js | 8 +++--- src/devtools/views/Profiler/CommitRanked.js | 5 ++-- .../views/Profiler/CommitRankedListItem.js | 9 ++++--- src/devtools/views/Profiler/constants.js | 3 --- .../views/Settings/SettingsContext.js | 26 ++++++++++++------- src/devtools/views/root.css | 2 ++ 8 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/devtools/views/Profiler/ChartNode.js b/src/devtools/views/Profiler/ChartNode.js index 121f46ecb2..a85f7702a3 100644 --- a/src/devtools/views/Profiler/ChartNode.js +++ b/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} >
{label} diff --git a/src/devtools/views/Profiler/CommitFlamegraph.js b/src/devtools/views/Profiler/CommitFlamegraph.js index e9f8718d16..676a2f1334 100644 --- a/src/devtools/views/Profiler/CommitFlamegraph.js +++ b/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(() => { @@ -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} diff --git a/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/src/devtools/views/Profiler/CommitFlamegraphListItem.js index d5bc614542..00566d272b 100644 --- a/src/devtools/views/Profiler/CommitFlamegraphListItem.js +++ b/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 ( {CommitRankedListItem} diff --git a/src/devtools/views/Profiler/CommitRankedListItem.js b/src/devtools/views/Profiler/CommitRankedListItem.js index 996a207469..5a25b3c49d 100644 --- a/src/devtools/views/Profiler/CommitRankedListItem.js +++ b/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 ( { 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( diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css index 0f25b7d321..e9690a01bc 100644 --- a/src/devtools/views/root.css +++ b/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,