From aea04dd0cfccb08a88f0329f8625ae046b169efd Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Thu, 24 Sep 2020 05:56:14 -0700 Subject: [PATCH] Add Flipper logs to leftrail Summary: This adds support for flipper logs in Sandy, including some theme adjustments. Did remove storage and showing of debug messages, as I noticed it tends to crash Flipper after a while since there are so many. Also added a fixed limit of only remembering last 1000 Also converted Toolbar and button with dropdown items to Sandy. Reviewed By: cekkaewnumchai Differential Revision: D23824528 fbshipit-source-id: b89d1182d4f14682251dbb482d93c2c009ddc7a4 --- desktop/app/src/chrome/ConsoleLogs.tsx | 60 +++++++- .../ExportDataPluginSheet.node.tsx.snap | 12 +- .../ShareSheetPendingDialog.node.tsx.snap | 4 +- .../PluginInstaller.node.tsx.snap | 16 +-- desktop/app/src/sandy-chrome/LeftRail.tsx | 28 +++- desktop/app/src/sandy-chrome/SandyApp.tsx | 12 +- desktop/app/src/sandy-chrome/theme.tsx | 13 ++ desktop/app/src/ui/components/Button.tsx | 133 +++++++++++++++--- desktop/app/src/ui/components/ButtonGroup.tsx | 9 +- desktop/app/src/ui/components/Toolbar.tsx | 34 ++++- 10 files changed, 275 insertions(+), 46 deletions(-) diff --git a/desktop/app/src/chrome/ConsoleLogs.tsx b/desktop/app/src/chrome/ConsoleLogs.tsx index 70b3ab7ef..2379e3ef5 100644 --- a/desktop/app/src/chrome/ConsoleLogs.tsx +++ b/desktop/app/src/chrome/ConsoleLogs.tsx @@ -12,8 +12,13 @@ import {Button, Toolbar, ButtonGroup, Layout} from '../ui'; import React from 'react'; import {Console, Hook} from 'console-feed'; import type {Methods} from 'console-feed/lib/definitions/Methods'; +import type {Styles} from 'console-feed/lib/definitions/Styles'; import {createState, useValue} from 'flipper-plugin'; import {useLocalStorage} from '../utils/useLocalStorage'; +import {theme, useIsDarkMode} from '../sandy-chrome/theme'; +import {useIsSandy} from '../sandy-chrome/SandyContext'; + +const MAX_LOG_ITEMS = 1000; const logsAtom = createState([]); export const errorCounterAtom = createState(0); @@ -23,7 +28,12 @@ export function enableConsoleHook() { Hook( window.console, (log) => { - logsAtom.set([...logsAtom.get(), log]); + if (log.method === 'debug') { + return; // See below, skip debug messages which are generated very aggressively by Flipper + } + const newLogs = logsAtom.get().slice(-MAX_LOG_ITEMS); + newLogs.push(log); + logsAtom.set(newLogs); if (log.method === 'error' || log.method === 'assert') { errorCounterAtom.set(errorCounterAtom.get() + 1); } @@ -39,7 +49,8 @@ function clearLogs() { const allLogLevels: Methods[] = [ 'log', - 'debug', + // 'debug', We typically don't want to allow users to enable the debug logs, as they are used very intensively by flipper itself, + // making Flipper / console-feed. For debug level logging, use the Chrome devtools. 'info', 'warn', 'error', @@ -54,6 +65,8 @@ const allLogLevels: Methods[] = [ const defaultLogLevels: Methods[] = ['warn', 'error', 'table', 'assert']; export function ConsoleLogs() { + const isSandy = useIsSandy(); + const isDarkMode = useIsDarkMode(); const logs = useValue(logsAtom); const [logLevels, setLogLevels] = useLocalStorage( 'console-logs-loglevels', @@ -77,6 +90,8 @@ export function ConsoleLogs() { ); }, [logLevels, setLogLevels]); + const styles = useMemo(() => buildTheme(isSandy), [isSandy]); + return ( @@ -87,7 +102,46 @@ export function ConsoleLogs() { - + ); } + +function buildTheme(isSandy: boolean): Styles { + if (!isSandy) { + const bg = '#333'; + return { + BASE_BACKGROUND_COLOR: bg, + BASE_COLOR: 'white', + LOG_BACKGROUND: bg, + }; + } + return { + // See: https://github.com/samdenty/console-feed/blob/master/src/definitions/Styles.d.ts + BASE_BACKGROUND_COLOR: 'transparent', + BASE_COLOR: theme.textColorPrimary, + LOG_COLOR: theme.textColorPrimary, + LOG_BACKGROUND: 'transparent', + LOG_INFO_BACKGROUND: 'transparent', + LOG_COMMAND_BACKGROUND: 'transparent', + LOG_RESULT_BACKGROUND: 'transparent', + LOG_WARN_BACKGROUND: theme.warningColor, + LOG_ERROR_BACKGROUND: theme.errorColor, + LOG_INFO_COLOR: theme.textColorPrimary, + LOG_COMMAND_COLOR: theme.textColorSecondary, + LOG_RESULT_COLOR: theme.textColorSecondary, + LOG_WARN_COLOR: 'white', + LOG_ERROR_COLOR: 'white', + LOG_INFO_BORDER: theme.dividerColor, + LOG_COMMAND_BORDER: theme.dividerColor, + LOG_RESULT_BORDER: theme.dividerColor, + LOG_WARN_BORDER: theme.dividerColor, + LOG_ERROR_BORDER: theme.dividerColor, + LOG_BORDER: theme.dividerColor, + }; +} diff --git a/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap b/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap index f6e5b2d18..588bc3b33 100644 --- a/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap +++ b/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap @@ -43,7 +43,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = ` TestDevicePlugin
- } - title="Flipper Logs" - /> + state.connections.staticView); + const active = isStaticViewActive(staticView, ConsoleLogs); + const errorCount = useValue(errorCounterAtom); + const dispatch = useDispatch(); + + return ( + } + title="Flipper Logs" + selected={active} + count={errorCount} + onClick={() => { + dispatch(setStaticView(ConsoleLogs)); + }} + /> + ); +} + function ShowSettingsButton() { const [showSettings, setShowSettings] = useState(false); const onClose = useCallback(() => setShowSettings(false), []); diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx index 39832b1ed..09e0676d6 100644 --- a/desktop/app/src/sandy-chrome/SandyApp.tsx +++ b/desktop/app/src/sandy-chrome/SandyApp.tsx @@ -29,8 +29,10 @@ export function SandyApp({logger}: {logger: Logger}) { }, []); const mainMenuVisible = useStore( - (state) => state.application.leftSidebarVisible, + (state) => + state.application.leftSidebarVisible && !state.connections.staticView, ); + const staticView = useStore((state) => state.connections.staticView); return ( @@ -51,7 +53,13 @@ export function SandyApp({logger}: {logger: Logger}) { - + {staticView ? ( + React.createElement(staticView, { + logger: logger, + }) + ) : ( + + )} diff --git a/desktop/app/src/sandy-chrome/theme.tsx b/desktop/app/src/sandy-chrome/theme.tsx index 31d13c33f..2673b82bf 100644 --- a/desktop/app/src/sandy-chrome/theme.tsx +++ b/desktop/app/src/sandy-chrome/theme.tsx @@ -7,6 +7,8 @@ * @format */ +import {useStore} from '../utils/useStore'; + // Exposes all the variables defined in themes/base.less: export const theme = { @@ -33,3 +35,14 @@ export const theme = { smallBody: '12px', }, }; + +/** + * This hook returns whether dark mode is currently being used. + * Generally should be avoided in favor of using the above theme object, + * which will provide colors that reflect the theme + */ +export function useIsDarkMode(): boolean { + return useStore( + (state) => state.settingsState.enableSandy && state.settingsState.darkMode, + ); +} diff --git a/desktop/app/src/ui/components/Button.tsx b/desktop/app/src/ui/components/Button.tsx index dfcb579b7..e26958e00 100644 --- a/desktop/app/src/ui/components/Button.tsx +++ b/desktop/app/src/ui/components/Button.tsx @@ -7,12 +7,12 @@ * @format */ -import React, {useContext, useState, useRef, useCallback} from 'react'; +import React, {useContext, useState, useRef, useCallback, useMemo} from 'react'; import electron, {MenuItemConstructorOptions} from 'electron'; import styled from '@emotion/styled'; import {findDOMNode} from 'react-dom'; import {keyframes} from 'emotion'; -import {Button as AntdButton} from 'antd'; +import {Button as AntdButton, Dropdown, Menu} from 'antd'; import {colors} from './colors'; import Glyph, {IconSize} from './Glyph'; @@ -20,6 +20,8 @@ import {ButtonGroupContext} from './ButtonGroup'; import {useStore} from '../../utils/useStore'; import {useIsSandy} from '../../sandy-chrome/SandyContext'; import type {ButtonProps} from 'antd/lib/button'; +import {DownOutlined, CheckOutlined} from '@ant-design/icons'; +import {theme} from '../../sandy-chrome/theme'; type ButtonType = 'primary' | 'success' | 'warning' | 'danger'; @@ -217,7 +219,7 @@ type Props = { /** * Type of button. */ - type?: ButtonType; + type?: ButtonType; // TODO: normalize to Sandy /** * Children. */ @@ -264,11 +266,15 @@ type Props = { * A simple button, used in many parts of the application. */ export default function Button(props: Props) { + const isSandy = useIsSandy(); + return isSandy ? : ; +} + +function ClassicButton(props: Props) { const windowIsFocused = useStore( (state) => state.application.windowIsFocused, ); const inButtonGroup = useContext(ButtonGroupContext); - const isSandy = useIsSandy(); const [active, setActive] = useState(false); const [wasClosed, setWasClosed] = useState(false); @@ -359,19 +365,7 @@ export default function Button(props: Props) { ); } - return isSandy ? ( - - {children} - - ) : ( + return ( ); } + +/** + * A simple button, used in many parts of the application. + */ +export function SandyButton({ + compact, + disabled, + icon, + children, + iconSize, + iconVariant, + dropdown, + type, + onClick, + href, + ...restProps +}: Props) { + const [dropdownVisible, setDropdownVible] = useState(false); + + const handleClick = useCallback( + (e: React.MouseEvent) => { + if (disabled === true) { + return; + } + onClick?.(e); + if (href != null) { + electron.shell.openExternal(href); // TODO: decouple from Electron + } + }, + [disabled, onClick, href], + ); + const handleVisibleChange = useCallback((flag: boolean) => { + setDropdownVible(flag); + }, []); + let iconComponent; + if (icon != null) { + iconComponent = ( + + ); + } + + const dropdownItems = useMemo( + () => + dropdown && ( + + {dropdown!.map((item, idx) => ( + { + // @ts-ignore this event args are bound to electron, remove in the future + item.click(); + if (item.checked !== undefined) { + // keep the menu item for check lists + e.domEvent.stopPropagation(); + e.domEvent.preventDefault(); + } + }} + disabled={item.enabled === false} + icon={ + item.checked !== undefined && ( + + ) + } + key={idx}> + {item.label} + + ))} + + ), + [dropdown], + ); + + const button = ( + + {children} + {dropdown ? : null} + + ); + if (dropdown) { + return ( + + {button} + + ); + } else { + return button; + } +} diff --git a/desktop/app/src/ui/components/ButtonGroup.tsx b/desktop/app/src/ui/components/ButtonGroup.tsx index 5ad07ef0f..f82c3f123 100644 --- a/desktop/app/src/ui/components/ButtonGroup.tsx +++ b/desktop/app/src/ui/components/ButtonGroup.tsx @@ -9,6 +9,8 @@ import styled from '@emotion/styled'; import React, {createContext} from 'react'; +import {useIsSandy} from '../../sandy-chrome/SandyContext'; +import {Space} from 'antd'; const ButtonGroupContainer = styled.div({ display: 'inline-flex', @@ -33,7 +35,12 @@ export const ButtonGroupContext = createContext(false); * ``` */ export default function ButtonGroup({children}: {children: React.ReactNode}) { - return ( + const isSandy = useIsSandy(); // according to Ant design guides buttons should only be grouped if they are radios + return isSandy ? ( + + {children} + + ) : ( {children} diff --git a/desktop/app/src/ui/components/Toolbar.tsx b/desktop/app/src/ui/components/Toolbar.tsx index c5dbf14b6..31e599f1d 100644 --- a/desktop/app/src/ui/components/Toolbar.tsx +++ b/desktop/app/src/ui/components/Toolbar.tsx @@ -7,15 +7,19 @@ * @format */ +import React from 'react'; import {colors} from './colors'; import FlexRow from './FlexRow'; import FlexBox from './FlexBox'; import styled from '@emotion/styled'; +import {Space} from 'antd'; +import {useIsSandy} from '../../sandy-chrome/SandyContext'; +import {theme} from '../../sandy-chrome/theme'; /** * A toolbar. */ -const Toolbar = styled(FlexRow)<{ +const ToolbarContainer = styled(FlexRow)<{ position?: 'bottom' | 'top'; compact?: boolean; }>((props) => ({ @@ -36,11 +40,35 @@ const Toolbar = styled(FlexRow)<{ padding: 6, width: '100%', })); -Toolbar.displayName = 'Toolbar'; +ToolbarContainer.displayName = 'ToolbarContainer'; + +const SandyToolbarContainer = styled(Space)({ + width: '100%', + padding: theme.space.small, + boxShadow: `inset 0px -1px 0px ${theme.dividerColor}`, +}); export const Spacer = styled(FlexBox)({ flexGrow: 1, }); Spacer.displayName = 'Spacer'; -export default Toolbar; +export default function Toolbar({ + children, + style, + ...rest +}: { + children?: React.ReactNode; + position?: 'bottom' | 'top'; + compact?: boolean; + style?: React.CSSProperties; +}) { + const isSandy = useIsSandy(); + return isSandy ? ( + {children} + ) : ( + + {children} + + ); +}