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

@@ -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,

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"
     >
       <span
-        className="css-1qd3nqz-Text"
+        className="css-meh2qi-Text"
       >
         Select the plugins for which you want to export the data
       </span>
@@ -38,7 +38,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
                 }
               >
                 <span
-                  className="css-1186rtw-Text e19o3fcp0"
+                  className="css-xsnw23-Text e19o3fcp0"
                 >
                   TestDevicePlugin
                 </span>
@@ -79,7 +79,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
                 }
               >
                 <span
-                  className="css-1186rtw-Text e19o3fcp0"
+                  className="css-xsnw23-Text e19o3fcp0"
                 >
                   TestPlugin
                 </span>
@@ -115,7 +115,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
           className="css-12n892b"
         >
           <div
-            className="css-dltu4w-StyledButton enfqd40"
+            className="css-xing9h-StyledButton enfqd40"
             onClick={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -129,7 +129,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
           onMouseLeave={[Function]}
         >
           <div
-            className="css-3z5lpm-StyledButton enfqd40"
+            className="css-ia8nd7-StyledButton enfqd40"
             disabled={true}
             onClick={[Function]}
             onMouseDown={[Function]}
@@ -156,7 +156,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
       className="css-k28k5g-View-FlexBox-FlexColumn ecr18to0"
     >
       <span
-        className="css-1qd3nqz-Text"
+        className="css-meh2qi-Text"
       >
         Select the plugins for which you want to export the data
       </span>
@@ -183,7 +183,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
                 }
               >
                 <span
-                  className="css-1186rtw-Text e19o3fcp0"
+                  className="css-xsnw23-Text e19o3fcp0"
                 >
                   TestDevicePlugin
                 </span>
@@ -224,7 +224,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
                 }
               >
                 <span
-                  className="css-1186rtw-Text e19o3fcp0"
+                  className="css-xsnw23-Text e19o3fcp0"
                 >
                   TestPlugin
                 </span>
@@ -260,7 +260,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
           className="css-12n892b"
         >
           <div
-            className="css-dltu4w-StyledButton enfqd40"
+            className="css-xing9h-StyledButton enfqd40"
             onClick={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -274,7 +274,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
           onMouseLeave={[Function]}
         >
           <div
-            className="css-dltu4w-StyledButton enfqd40"
+            className="css-xing9h-StyledButton enfqd40"
             disabled={false}
             onClick={[Function]}
             onMouseDown={[Function]}

desktop/app/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap

@@ -17,7 +17,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       size={30}
     />
     <span
-      className="css-1bcpoxy-Text"
+      className="css-137ad86-Text"
       color="#6f6f6f"
     >
       Update
@@ -30,7 +30,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       className="css-te359u-View-FlexBox-Spacer e13mj6h81"
     />
     <div
-      className="css-dltu4w-StyledButton enfqd40"
+      className="css-xing9h-StyledButton enfqd40"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -38,7 +38,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       Cancel
     </div>
     <div
-      className="css-dltu4w-StyledButton enfqd40"
+      className="css-xing9h-StyledButton enfqd40"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -67,7 +67,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       size={30}
     />
     <span
-      className="css-1bcpoxy-Text"
+      className="css-137ad86-Text"
       color="#6f6f6f"
     >
       wubba lubba dub dub
@@ -80,7 +80,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       className="css-te359u-View-FlexBox-Spacer e13mj6h81"
     />
     <div
-      className="css-dltu4w-StyledButton enfqd40"
+      className="css-xing9h-StyledButton enfqd40"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -88,7 +88,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       Cancel
     </div>
     <div
-      className="css-dltu4w-StyledButton enfqd40"
+      className="css-xing9h-StyledButton enfqd40"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}

desktop/app/src/chrome/mainsidebar/MainSidebar2.tsx

@@ -101,6 +101,7 @@ const SidebarSectionBody = styled('div')<{
   level: SectionLevel;
   collapsed: boolean;
 }>(({collapsed, level}) => ({
+  userSelect: 'none',
   flexShrink: 0,
   overflow: 'hidden',
   maxHeight: collapsed ? 0 : 2000, // might need increase if too many plugins...

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) => ({

desktop/app/src/ui/components/Button.tsx

@@ -115,6 +115,7 @@ const StyledButton = styled.div<{
   disabled?: boolean;
   dropdown?: Array<MenuItemConstructorOptions>;
 }>((props) => ({
+  userSelect: 'none',
   backgroundColor:
     props.windowIsFocused && !props.disabled
       ? colors.white

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,

desktop/app/src/ui/components/Tabs.tsx

@@ -28,6 +28,7 @@ const TabListItem = styled.div<{
   width?: WidthProperty<number>;
   container?: boolean;
 }>((props) => ({
+  userSelect: 'none',
   background: props.container
     ? props.active
       ? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)'

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'

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'

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';

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%',

desktop/app/src/ui/components/table/TableRow.tsx

@@ -76,7 +76,6 @@ const TableBodyRowContainer = styled(FlexRow)<TableBodyRowContainerProps>(
     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',

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';
 

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,

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);"
       />
       <span
-        class="css-b2jb3d-Text"
+        class="css-8j2gzl-Text"
       >
         Turtle
       </span>

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;
 }