Added a blue timeline line

Summary:
I've added in a timeline line. Getting the CSS for this to work perfectly was tricky, but in the end this result looks pretty good. I've opted for the unknown events to have a smaller circle.

Edit:

I have fixed the border radius issue with the img element:

{F206482232}

And Unknown events are better aligned:

{F206482255}

Reviewed By: jknoxville

Differential Revision: D17180819

fbshipit-source-id: c318d2721adde758494267095524961c796f7a54

src/plugins/navigation/components/NavigationInfoBox.tsx

@@ -36,6 +36,8 @@ const ScreenshotContainer = styled('div')({
   overflow: 'hidden',
   borderLeft: `1px ${colors.blueGreyTint90} solid`,
   position: 'relative',
+  height: '100%',
+  borderRadius: 10,
   img: {
     width: '100%',
   },
@@ -44,6 +46,7 @@ const ScreenshotContainer = styled('div')({
 const NoData = styled('div')({
   color: colors.light30,
   fontSize: 14,
+  position: 'relative',
 });
 
 const NavigationDataContainer = styled('div')({
@@ -74,7 +77,7 @@ const NavigationInfoBoxContainer = styled('div')({
   height: BOX_HEIGHT,
   borderRadius: 10,
   flexGrow: 1,
-  overflow: 'hidden',
+  position: 'relative',
   marginBottom: 10,
   backgroundColor: colors.white,
   boxShadow: '1px 1px 5px rgba(0,0,0,0.1)',
@@ -107,6 +110,27 @@ const NoParamters = styled(FlexCenter)({
   color: colors.light10,
 });
 
+const TimelineCircle = styled('div')({
+  width: 18,
+  height: 18,
+  top: 11,
+  left: -33,
+  backgroundColor: colors.light02,
+  border: `4px solid ${colors.highlight}`,
+  borderRadius: '50%',
+  position: 'absolute',
+});
+
+const TimelineMiniCircle = styled('div')({
+  width: 12,
+  height: 12,
+  top: 1,
+  left: -30,
+  borderRadius: '50%',
+  backgroundColor: colors.highlight,
+  position: 'absolute',
+});
+
 const buildParameterTable = (parameters: Map<string, string>) => {
   const tableRows: Array<TableBodyRow> = [];
   let idx = 0;
@@ -144,11 +168,19 @@ export default (props: Props) => {
     date,
   } = props;
   if (uri == null && className == null) {
-    return <NoData>Unknown Navigation Event</NoData>;
+    return (
+      <>
+        <NoData>
+          <TimelineMiniCircle />
+          Unknown Navigation Event
+        </NoData>
+      </>
+    );
   } else {
     const parameters = uri != null ? parseURIParameters(uri) : null;
     return (
       <NavigationInfoBoxContainer>
+        <TimelineCircle />
         <NavigationDataContainer>
           <Header>
             {uri != null ? stripQueryParameters(uri) : ''}

src/plugins/navigation/components/Timeline.tsx

@@ -17,16 +17,35 @@ type Props = {
   onFavorite: (uri: URI) => void;
 };
 
+const TimelineLine = styled('div')({
+  width: 2,
+  backgroundColor: colors.highlight,
+  position: 'absolute',
+  top: 38,
+  bottom: 0,
+});
+
 const TimelineContainer = styled('div')({
+  position: 'relative',
+  paddingLeft: 25,
   overflowY: 'scroll',
   flexGrow: 1,
   backgroundColor: colors.light02,
   scrollBehavior: 'smooth',
+  '&>div': {
+    position: 'relative',
+    minHeight: '100%',
+    '&:last-child': {
+      paddingBottom: 25,
+    },
+  },
 });
 
 const NavigationEventContainer = styled('div')({
   display: 'flex',
-  margin: 20,
+  paddingTop: 25,
+  paddingLeft: 25,
+  marginRight: 25,
 });
 
 const NoData = styled(FlexCenter)({
@@ -43,29 +62,32 @@ export default (props: Props) => {
     <NoData>No Navigation Events to Show</NoData>
   ) : (
     <TimelineContainer innerRef={timelineRef}>
-      {events.map((event: NavigationEvent, idx: number) => {
-        return (
-          <NavigationEventContainer>
-            <NavigationInfoBox
-              key={idx}
-              isBookmarked={
-                event.uri != null ? bookmarks.has(event.uri) : false
-              }
-              className={event.className}
-              uri={event.uri}
-              onNavigate={uri => {
-                if (timelineRef.current != null) {
-                  timelineRef.current.scrollTo(0, 0);
+      <div>
+        <TimelineLine />
+        {events.map((event: NavigationEvent, idx: number) => {
+          return (
+            <NavigationEventContainer>
+              <NavigationInfoBox
+                key={idx}
+                isBookmarked={
+                  event.uri != null ? bookmarks.has(event.uri) : false
                 }
-                onNavigate(uri);
-              }}
-              onFavorite={onFavorite}
-              screenshot={event.screenshot}
-              date={event.date}
-            />
-          </NavigationEventContainer>
-        );
-      })}
+                className={event.className}
+                uri={event.uri}
+                onNavigate={uri => {
+                  if (timelineRef.current != null) {
+                    timelineRef.current.scrollTo(0, 0);
+                  }
+                  onNavigate(uri);
+                }}
+                onFavorite={onFavorite}
+                screenshot={event.screenshot}
+                date={event.date}
+              />
+            </NavigationEventContainer>
+          );
+        })}
+      </div>
     </TimelineContainer>
   );
 };