From 2db6d6a5a7a2ecf74610d5a55732d6753b15b836 Mon Sep 17 00:00:00 2001 From: Yash Joshi Date: Tue, 9 Nov 2021 01:47:22 +0530 Subject: [PATCH] fix(devtools): expose css vars to reach-ui portal components (#22716) --- .../src/devtools/views/Button.js | 9 ++--- .../devtools/views/Components/OwnersStack.js | 9 +++-- .../{ => Components/reach-ui}/Tooltip.css | 0 .../views/Components/reach-ui/menu-button.js | 28 +++++++++++++++ .../views/Components/reach-ui/tooltip.js | 35 +++++++++++++++++++ .../views/Settings/SettingsContext.js | 28 --------------- .../src/devtools/views/TabBar.js | 5 ++- .../src/devtools/views/ThemeProvider.js | 18 ++++------ .../src/devtools/views/Toggle.js | 9 ++--- .../src/devtools/views/root.css | 28 +-------------- .../src/devtools/views/useThemeStyles.js | 28 +++++++++++++++ 11 files changed, 112 insertions(+), 85 deletions(-) rename packages/react-devtools-shared/src/devtools/views/{ => Components/reach-ui}/Tooltip.css (100%) create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js create mode 100644 packages/react-devtools-shared/src/devtools/views/useThemeStyles.js diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js index 0d706fc2eb..aa006cbbc7 100644 --- a/packages/react-devtools-shared/src/devtools/views/Button.js +++ b/packages/react-devtools-shared/src/devtools/views/Button.js @@ -8,10 +8,9 @@ */ import * as React from 'react'; -import Tooltip from '@reach/tooltip'; import styles from './Button.css'; -import tooltipStyles from './Tooltip.css'; +import Tooltip from './Components/reach-ui/tooltip'; type Props = { children: React$Node, @@ -35,11 +34,7 @@ export default function Button({ ); if (title) { - button = ( - - {button} - - ); + button = {button}; } return button; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js index d7efafee6c..cc9c43fd77 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js @@ -16,8 +16,6 @@ import { useRef, useState, } from 'react'; -import Tooltip from '@reach/tooltip'; -import {Menu, MenuList, MenuButton, MenuItem} from '@reach/menu-button'; import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; import Toggle from '../Toggle'; @@ -26,6 +24,13 @@ import {OwnersListContext} from './OwnersListContext'; import {TreeDispatcherContext, TreeStateContext} from './TreeContext'; import {useIsOverflowing} from '../hooks'; import {StoreContext} from '../context'; +import Tooltip from '../Components/reach-ui/tooltip'; +import { + Menu, + MenuList, + MenuButton, + MenuItem, +} from '../Components/reach-ui/menu-button'; import type {SerializedElement} from './types'; diff --git a/packages/react-devtools-shared/src/devtools/views/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css similarity index 100% rename from packages/react-devtools-shared/src/devtools/views/Tooltip.css rename to packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css diff --git a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js new file mode 100644 index 0000000000..cee8021a19 --- /dev/null +++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js @@ -0,0 +1,28 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import * as React from 'react'; +import { + Menu, + MenuList as ReachMenuList, + MenuButton, + MenuItem, +} from '@reach/menu-button'; +import useThemeStyles from '../../useThemeStyles'; + +const MenuList = ({children, ...props}: {children: React$Node, ...}) => { + const style = useThemeStyles(); + return ( + + {children} + + ); +}; + +export {MenuItem, MenuButton, MenuList, Menu}; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js new file mode 100644 index 0000000000..d3f07258c8 --- /dev/null +++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js @@ -0,0 +1,35 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import * as React from 'react'; +import ReachTooltip from '@reach/tooltip'; +import tooltipStyles from './Tooltip.css'; +import useThemeStyles from '../../useThemeStyles'; + +const Tooltip = ({ + children, + className = '', + ...props +}: { + children: React$Node, + className: string, + ... +}) => { + const style = useThemeStyles(); + return ( + + {children} + + ); +}; + +export default Tooltip; diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js index 7f8cfe614b..09c815b49b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js @@ -248,28 +248,6 @@ function SettingsContextController({ ); } -function setStyleVariable( - name: string, - value: string, - documentElements: DocumentElements, -) { - documentElements.forEach(documentElement => - documentElement.style.setProperty(name, value), - ); -} - -function updateStyleHelper( - themeKey: string, - style: string, - documentElements: DocumentElements, -) { - setStyleVariable( - `--${style}`, - `var(--${themeKey}-${style})`, - documentElements, - ); -} - export function updateDisplayDensity( displayDensity: DisplayDensity, documentElements: DocumentElements, @@ -296,12 +274,6 @@ export function updateThemeVariables( // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`; }); - - // The ThemeProvider works by writing DOM style variables to an HTMLDivElement. - // Because Portals render in a different DOM subtree, these variables don't propagate. - // So we need to also set @reach/tooltip specific styles on the root. - updateStyleHelper(theme, 'color-tooltip-background', documentElements); - updateStyleHelper(theme, 'color-tooltip-text', documentElements); } export {SettingsContext, SettingsContextController}; diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js index c195710a42..32bd32827f 100644 --- a/packages/react-devtools-shared/src/devtools/views/TabBar.js +++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js @@ -9,11 +9,10 @@ import * as React from 'react'; import {Fragment, useCallback} from 'react'; -import Tooltip from '@reach/tooltip'; import Icon from './Icon'; import styles from './TabBar.css'; -import tooltipStyles from './Tooltip.css'; +import Tooltip from './Components/reach-ui/tooltip'; import type {IconType} from './Icon'; @@ -127,7 +126,7 @@ export default function TabBar({ if (title) { button = ( - + {button} ); diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js index 8fb93469ad..a353b4c6ee 100644 --- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js +++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js @@ -8,22 +8,18 @@ */ import * as React from 'react'; -import {useContext, useMemo} from 'react'; -import {SettingsContext} from './Settings/SettingsContext'; -import {THEME_STYLES} from '../../constants'; +import useThemeStyles from './useThemeStyles'; export default function ThemeProvider({children}: {|children: React$Node|}) { - const {theme, displayDensity, browserTheme} = useContext(SettingsContext); + const themeStyle = useThemeStyles(); - const style = useMemo( - () => ({ + const style = React.useMemo(() => { + return { + ...themeStyle, width: '100%', height: '100%', - ...THEME_STYLES[displayDensity], - ...THEME_STYLES[theme === 'auto' ? browserTheme : theme], - }), - [theme, browserTheme, displayDensity], - ); + }; + }, [themeStyle]); return
{children}
; } diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.js b/packages/react-devtools-shared/src/devtools/views/Toggle.js index c5961a9bbf..20e78fee77 100644 --- a/packages/react-devtools-shared/src/devtools/views/Toggle.js +++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js @@ -9,10 +9,9 @@ import * as React from 'react'; import {useCallback} from 'react'; -import Tooltip from '@reach/tooltip'; import styles from './Toggle.css'; -import tooltipStyles from './Tooltip.css'; +import Tooltip from './Components/reach-ui/tooltip'; type Props = { children: React$Node, @@ -58,11 +57,7 @@ export default function Toggle({ ); if (title) { - toggle = ( - - {toggle} - - ); + toggle = {toggle}; } return toggle; diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css index 9bb749ff23..cbf8ece006 100644 --- a/packages/react-devtools-shared/src/devtools/views/root.css +++ b/packages/react-devtools-shared/src/devtools/views/root.css @@ -1,36 +1,10 @@ :root { - /** - * The light and dark theme styles below should be kept in sync with 'react-devtools-shared/src/constants' - * They are repeated here because they're used by e.g. tooltips or context menus - * which get rendered outside of the DOM subtree (where normal theme/styles are written). - */ - - /* Light theme */ - --light-color-scroll-thumb: #c2c2c2; - --light-color-scroll-track: #fafafa; - --light-color-tooltip-background: rgba(0, 0, 0, 0.9); - --light-color-tooltip-text: #ffffff; - - /* Dark theme */ - --dark-color-scroll-thumb: #afb3b9; - --dark-color-scroll-track: #313640; - --dark-color-tooltip-background: rgba(255, 255, 255, 0.95); - --dark-color-tooltip-text: #000000; - /* Font smoothing */ --font-smoothing: auto; - /* Compact density */ - --compact-line-height-data: 18px; - --compact-root-font-size: 16px; - - /* Comfortable density */ - --comfortable-line-height-data: 22px; - --comfortable-root-font-size: 20px; - /* GitHub.com system fonts */ --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; -} \ No newline at end of file +} diff --git a/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js new file mode 100644 index 0000000000..009cf1a50d --- /dev/null +++ b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js @@ -0,0 +1,28 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import {useContext, useMemo} from 'react'; +import {SettingsContext} from './Settings/SettingsContext'; +import {THEME_STYLES} from '../../constants'; + +const useThemeStyles = () => { + const {theme, displayDensity, browserTheme} = useContext(SettingsContext); + + const style = useMemo( + () => ({ + ...THEME_STYLES[displayDensity], + ...THEME_STYLES[theme === 'auto' ? browserTheme : theme], + }), + [theme, browserTheme, displayDensity], + ); + + return style; +}; + +export default useThemeStyles;