From 2d217575bb8095d9775d8656d45262b6d23714a9 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 21 Aug 2023 04:24:16 -0700
Subject: [PATCH] improve marker timeline

Summary:
1. removed background hover
2. made can select actually work
3. disable user selection
4. remove decimal points from ms

Reviewed By: lblasa

Differential Revision: D48270181

fbshipit-source-id: 724efedb5cad7f93c80ed5dd7f49efe4c434c324
---
 desktop/flipper-plugin/src/ui/MarkerTimeline.tsx | 16 ++++++++++------
 .../data-inspector/TimelineDataDescription.tsx   |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx b/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx
index 72d26a7d0..50a6cbf3f 100644
--- a/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx
+++ b/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx
@@ -63,14 +63,15 @@ const Point = styled(Layout.Horizontal)<{
   right: 10,
   cursor: props.onClick ? 'pointer' : 'default',
   borderRadius: 3,
-  alignItems: 'flex-start',
+  alignItems: 'baseline',
   lineHeight: '16px',
   ':hover': {
-    backgroundColor: theme.selectionBackgroundColor,
+    backgroundColor: theme.backgroundWash,
     '> span': {
       whiteSpace: 'initial',
     },
   },
+
   '::before': {
     position: 'relative',
     textAlign: 'center',
@@ -115,12 +116,15 @@ const Time = styled.span({
 });
 Time.displayName = 'MakerTimeline:Time';
 
-const Code = styled(Typography.Text)({
+const Name = styled(Typography.Text)({
   overflow: 'hidden',
+  opacity: 0.8,
   textOverflow: 'ellipsis',
   marginTop: -1,
+  marginLeft: theme.space.tiny,
+  fontFamily: 'monospace',
 });
-Code.displayName = 'MakerTimeline:Code';
+Name.displayName = 'MakerTimeline:Name';
 
 type TimePoint = {
   timestamp: number;
@@ -229,8 +233,8 @@ export class MarkerTimeline extends Component<Props, State> {
               number={
                 p.markerNames.length > 1 ? p.markerNames.length : undefined
               }>
-              <Time>{p.timestamp.toFixed(5)}ms</Time>{' '}
-              <Code code>{p.markerNames.join(', ')}</Code>
+              <Time>{p.timestamp.toFixed(0)}ms</Time>{' '}
+              <Name>{p.markerNames.join(', ')}</Name>
             </Point>
           );
         })}
diff --git a/desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx b/desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx
index 70e937a92..9e49ca847 100644
--- a/desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx
+++ b/desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx
@@ -69,7 +69,7 @@ export class TimelineDataDescription extends Component<Props, State> {
             </Button>
           </div>
         )}
-        <div>
+        <div style={{userSelect: 'none'}}>
           <MarkerTimeline
             points={points}
             onClick={(ids) => {