From c802215dd2b4310fd37d2ee2640c7d8f73e28ab4 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Tue, 4 Aug 2020 03:04:31 -0700 Subject: [PATCH] Make most text selectable Summary: Fix long standing issue where text by default in Flipper is not selectable. Which is super annoying when working with tables, trying to copy error messages, etc etc. Wanted to fix it with ant.design, but got so annoyed by not being able to select an error I needed, that I fixed it now :-P. This diff makes all text selectable by default, and then bails out for specific elements, like section headers, button captions, the left toolbar (navigation) and top toolbar to preserve the desktop app look & feel. Fixes a popular papercut issue Changelog: All text is now selectable by default in Flipper. Reviewed By: passy Differential Revision: D22897793 fbshipit-source-id: 7bc50a987e012595956c07d1997959a5480790aa --- desktop/app/src/chrome/TitleBar.tsx | 1 + .../ExportDataPluginSheet.node.tsx.snap | 20 +++++++++---------- .../ShareSheetPendingDialog.node.tsx.snap | 12 +++++------ .../src/chrome/mainsidebar/MainSidebar2.tsx | 1 + desktop/app/src/plugins/TableNativePlugin.tsx | 1 - desktop/app/src/ui/components/Button.tsx | 1 + desktop/app/src/ui/components/Panel.tsx | 1 + desktop/app/src/ui/components/Tabs.tsx | 1 + desktop/app/src/ui/components/Text.tsx | 6 ++++-- desktop/app/src/ui/components/Toolbar.tsx | 1 + .../elements-inspector/elements.tsx | 1 - .../src/ui/components/filter/FilterRow.tsx | 1 - .../app/src/ui/components/table/TableRow.tsx | 2 -- .../table/TypeBasedValueRenderer.tsx | 1 - desktop/plugins/logs/index.tsx | 1 - .../src/__tests__/seammammals.node.tsx | 2 +- desktop/static/style.css | 4 ++-- 17 files changed, 29 insertions(+), 28 deletions(-) diff --git a/desktop/app/src/chrome/TitleBar.tsx b/desktop/app/src/chrome/TitleBar.tsx index 078202add..81b04a2a6 100644 --- a/desktop/app/src/chrome/TitleBar.tsx +++ b/desktop/app/src/chrome/TitleBar.tsx @@ -48,6 +48,7 @@ import NetworkGraph from './NetworkGraph'; import MetroButton from './MetroButton'; const AppTitleBar = styled(FlexRow)<{focused?: boolean}>(({focused}) => ({ + userSelect: 'none', background: focused ? `linear-gradient(to bottom, ${colors.macOSTitleBarBackgroundTop} 0%, ${colors.macOSTitleBarBackgroundBottom} 100%)` : colors.macOSTitleBarBackgroundBlur, 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 05d9a1c1b..f6e5b2d18 100644 --- a/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap +++ b/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap @@ -11,7 +11,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = ` className="css-k28k5g-View-FlexBox-FlexColumn ecr18to0" > Select the plugins for which you want to export the data @@ -38,7 +38,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = ` } > TestDevicePlugin @@ -79,7 +79,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = ` } > TestPlugin @@ -115,7 +115,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = ` className="css-12n892b" >
Select the plugins for which you want to export the data @@ -183,7 +183,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = ` } > TestDevicePlugin @@ -224,7 +224,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = ` } > TestPlugin @@ -260,7 +260,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = ` className="css-12n892b" >
Update @@ -30,7 +30,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = ` className="css-te359u-View-FlexBox-Spacer e13mj6h81" />
wubba lubba dub dub @@ -80,7 +80,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = ` className="css-te359u-View-FlexBox-Spacer e13mj6h81" />
(({collapsed, level}) => ({ + userSelect: 'none', flexShrink: 0, overflow: 'hidden', maxHeight: collapsed ? 0 : 2000, // might need increase if too many plugins... diff --git a/desktop/app/src/plugins/TableNativePlugin.tsx b/desktop/app/src/plugins/TableNativePlugin.tsx index e28c09b74..52b17cf84 100644 --- a/desktop/app/src/plugins/TableNativePlugin.tsx +++ b/desktop/app/src/plugins/TableNativePlugin.tsx @@ -95,7 +95,6 @@ const NonWrappingText = styled(Text)({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', - userSelect: 'none', }); const BooleanValue = styled(NonWrappingText)<{active?: boolean}>((props) => ({ diff --git a/desktop/app/src/ui/components/Button.tsx b/desktop/app/src/ui/components/Button.tsx index 94d2f2d8e..3b0dede8e 100644 --- a/desktop/app/src/ui/components/Button.tsx +++ b/desktop/app/src/ui/components/Button.tsx @@ -115,6 +115,7 @@ const StyledButton = styled.div<{ disabled?: boolean; dropdown?: Array; }>((props) => ({ + userSelect: 'none', backgroundColor: props.windowIsFocused && !props.disabled ? colors.white diff --git a/desktop/app/src/ui/components/Panel.tsx b/desktop/app/src/ui/components/Panel.tsx index 6609ec158..9298f2156 100644 --- a/desktop/app/src/ui/components/Panel.tsx +++ b/desktop/app/src/ui/components/Panel.tsx @@ -96,6 +96,7 @@ export default class Panel extends React.Component< static PanelHeader = styled(FlexBox)<{floating?: boolean; padded?: boolean}>( (props) => ({ + userSelect: 'none', backgroundColor: '#f6f7f9', border: props.floating ? BORDER : 'none', borderBottom: BORDER, diff --git a/desktop/app/src/ui/components/Tabs.tsx b/desktop/app/src/ui/components/Tabs.tsx index bb1d94028..47467ed11 100644 --- a/desktop/app/src/ui/components/Tabs.tsx +++ b/desktop/app/src/ui/components/Tabs.tsx @@ -28,6 +28,7 @@ const TabListItem = styled.div<{ width?: WidthProperty; container?: boolean; }>((props) => ({ + userSelect: 'none', background: props.container ? props.active ? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)' diff --git a/desktop/app/src/ui/components/Text.tsx b/desktop/app/src/ui/components/Text.tsx index f9bec6efc..32a3a1933 100644 --- a/desktop/app/src/ui/components/Text.tsx +++ b/desktop/app/src/ui/components/Text.tsx @@ -48,9 +48,11 @@ const Text = styled.span<{ : props.family, overflow: props.code ? 'auto' : 'visible', userSelect: - props.selectable || (props.code && typeof props.selectable === 'undefined') + props.selectable === false + ? 'none' + : props.selectable === true ? 'text' - : 'none', + : undefined, wordWrap: props.code ? 'break-word' : props.wordWrap, whiteSpace: props.code && typeof props.whiteSpace === 'undefined' diff --git a/desktop/app/src/ui/components/Toolbar.tsx b/desktop/app/src/ui/components/Toolbar.tsx index 41a6aa051..c5dbf14b6 100644 --- a/desktop/app/src/ui/components/Toolbar.tsx +++ b/desktop/app/src/ui/components/Toolbar.tsx @@ -19,6 +19,7 @@ const Toolbar = styled(FlexRow)<{ position?: 'bottom' | 'top'; compact?: boolean; }>((props) => ({ + userSelect: 'none', backgroundColor: colors.light02, borderBottom: props.position === 'bottom' diff --git a/desktop/app/src/ui/components/elements-inspector/elements.tsx b/desktop/app/src/ui/components/elements-inspector/elements.tsx index 5e3e6b4f4..20db94766 100644 --- a/desktop/app/src/ui/components/elements-inspector/elements.tsx +++ b/desktop/app/src/ui/components/elements-inspector/elements.tsx @@ -109,7 +109,6 @@ const NoShrinkText = styled(Text)({ flexShrink: 0, flexWrap: 'nowrap', overflow: 'hidden', - userSelect: 'none', fontWeight: 400, }); NoShrinkText.displayName = 'Elements:NoShrinkText'; diff --git a/desktop/app/src/ui/components/filter/FilterRow.tsx b/desktop/app/src/ui/components/filter/FilterRow.tsx index d2029aac3..80c2fd44a 100644 --- a/desktop/app/src/ui/components/filter/FilterRow.tsx +++ b/desktop/app/src/ui/components/filter/FilterRow.tsx @@ -17,7 +17,6 @@ import {colors} from '../colors'; const FilterText = styled.div({ display: 'flex', alignSelf: 'baseline', - userSelect: 'none', cursor: 'pointer', position: 'relative', maxWidth: '100%', diff --git a/desktop/app/src/ui/components/table/TableRow.tsx b/desktop/app/src/ui/components/table/TableRow.tsx index 3e0ca2c02..0cb6036f2 100644 --- a/desktop/app/src/ui/components/table/TableRow.tsx +++ b/desktop/app/src/ui/components/table/TableRow.tsx @@ -76,7 +76,6 @@ const TableBodyRowContainer = styled(FlexRow)( fontWeight: props.fontWeight, overflow: 'hidden', width: '100%', - userSelect: 'none', flexShrink: 0, '&:hover': { backgroundColor: @@ -100,7 +99,6 @@ const TableBodyColumnContainer = styled.div<{ flexShrink: props.width === 'flex' ? 1 : 0, overflow: 'hidden', padding: '0 8px', - userSelect: 'none', textOverflow: 'ellipsis', verticalAlign: 'top', whiteSpace: props.multiline ? 'normal' : 'nowrap', diff --git a/desktop/app/src/ui/components/table/TypeBasedValueRenderer.tsx b/desktop/app/src/ui/components/table/TypeBasedValueRenderer.tsx index 688862ed3..854d88f78 100644 --- a/desktop/app/src/ui/components/table/TypeBasedValueRenderer.tsx +++ b/desktop/app/src/ui/components/table/TypeBasedValueRenderer.tsx @@ -42,7 +42,6 @@ const NonWrappingText = styled(Text)({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', - userSelect: 'none', }); NonWrappingText.displayName = 'TypeBasedValueRenderer:NonWrappingText'; diff --git a/desktop/plugins/logs/index.tsx b/desktop/plugins/logs/index.tsx index 506266d2b..c173e12b6 100644 --- a/desktop/plugins/logs/index.tsx +++ b/desktop/plugins/logs/index.tsx @@ -225,7 +225,6 @@ const DEFAULT_FILTERS = [ const HiddenScrollText = styled(Text)({ alignSelf: 'baseline', - userSelect: 'none', lineHeight: '130%', marginTop: 5, paddingBottom: 3, diff --git a/desktop/plugins/seamammals/src/__tests__/seammammals.node.tsx b/desktop/plugins/seamammals/src/__tests__/seammammals.node.tsx index caf971e2d..41080d0ef 100644 --- a/desktop/plugins/seamammals/src/__tests__/seammammals.node.tsx +++ b/desktop/plugins/seamammals/src/__tests__/seammammals.node.tsx @@ -104,7 +104,7 @@ test('It can have selection and render details', async () => { style="background-image: url(http://turtle.png);" /> Turtle diff --git a/desktop/static/style.css b/desktop/static/style.css index c18c9caf3..6285ea1d9 100644 --- a/desktop/static/style.css +++ b/desktop/static/style.css @@ -3,6 +3,8 @@ * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. + * + * @format */ html, @@ -145,8 +147,6 @@ body, body { font-family: system-ui; font-size: 13px; - user-select: none; - -webkit-user-select: none; cursor: default; overflow: hidden; }