jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve marker timeline

Browse Source 
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
This commit is contained in:
Luke De Feo
2023-08-21 04:24:16 -07:00
committed by Facebook GitHub Bot
parent 94114eb821
commit 2d217575bb
2 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
desktop/flipper-plugin/src/ui/MarkerTimeline.tsx
View File

@@ -63,14 +63,15 @@ const Point = styled(Layout.Horizontal)<{
right: 10, right: 10,
cursor: props.onClick ? 'pointer' : 'default', cursor: props.onClick ? 'pointer' : 'default',
borderRadius: 3, borderRadius: 3,
alignItems: 'flex-start', alignItems: 'baseline',
lineHeight: '16px', lineHeight: '16px',
':hover': { ':hover': {
backgroundColor: theme.selectionBackgroundColor, backgroundColor: theme.backgroundWash,
'> span': { '> span': {
whiteSpace: 'initial', whiteSpace: 'initial',
}, },
}, },
'::before': { '::before': {
position: 'relative', position: 'relative',
textAlign: 'center', textAlign: 'center',
@@ -115,12 +116,15 @@ const Time = styled.span({
}); });
Time.displayName = 'MakerTimeline:Time'; Time.displayName = 'MakerTimeline:Time';
const Code = styled(Typography.Text)({ const Name = styled(Typography.Text)({
overflow: 'hidden', overflow: 'hidden',
opacity: 0.8,
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
marginTop: -1, marginTop: -1,
marginLeft: theme.space.tiny,
fontFamily: 'monospace',
}); });
Code.displayName = 'MakerTimeline:Code'; Name.displayName = 'MakerTimeline:Name';
type TimePoint = { type TimePoint = {
timestamp: number; timestamp: number;
@@ -229,8 +233,8 @@ export class MarkerTimeline extends Component<Props, State> {
number={ number={
p.markerNames.length > 1 ? p.markerNames.length : undefined p.markerNames.length > 1 ? p.markerNames.length : undefined
}> }>
<Time>{p.timestamp.toFixed(5)}ms</Time>{' '} <Time>{p.timestamp.toFixed(0)}ms</Time>{' '}
<Code code>{p.markerNames.join(', ')}</Code> <Name>{p.markerNames.join(', ')}</Name>
</Point> </Point>
); );
})} })}

2
desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx
View File

@@ -69,7 +69,7 @@ export class TimelineDataDescription extends Component<Props, State> {
</Button> </Button>
</div> </div>
)} )}
<div> <div style={{userSelect: 'none'}}>
<MarkerTimeline <MarkerTimeline
points={points} points={points}
onClick={(ids) => { onClick={(ids) => {