Add Flipper logs to leftrail

Summary:
This adds support for flipper logs in Sandy, including some theme adjustments.

Did remove storage and showing of debug messages, as I noticed it tends to crash Flipper after a while since there are so many. Also added a fixed limit of only remembering last 1000

Also converted Toolbar and button with dropdown items to Sandy.

Reviewed By: cekkaewnumchai

Differential Revision: D23824528

fbshipit-source-id: b89d1182d4f14682251dbb482d93c2c009ddc7a4

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

@@ -7,15 +7,19 @@
  * @format
  */
 
+import React from 'react';
 import {colors} from './colors';
 import FlexRow from './FlexRow';
 import FlexBox from './FlexBox';
 import styled from '@emotion/styled';
+import {Space} from 'antd';
+import {useIsSandy} from '../../sandy-chrome/SandyContext';
+import {theme} from '../../sandy-chrome/theme';
 
 /**
  * A toolbar.
  */
-const Toolbar = styled(FlexRow)<{
+const ToolbarContainer = styled(FlexRow)<{
   position?: 'bottom' | 'top';
   compact?: boolean;
 }>((props) => ({
@@ -36,11 +40,35 @@ const Toolbar = styled(FlexRow)<{
   padding: 6,
   width: '100%',
 }));
-Toolbar.displayName = 'Toolbar';
+ToolbarContainer.displayName = 'ToolbarContainer';
+
+const SandyToolbarContainer = styled(Space)({
+  width: '100%',
+  padding: theme.space.small,
+  boxShadow: `inset 0px -1px 0px ${theme.dividerColor}`,
+});
 
 export const Spacer = styled(FlexBox)({
   flexGrow: 1,
 });
 Spacer.displayName = 'Spacer';
 
-export default Toolbar;
+export default function Toolbar({
+  children,
+  style,
+  ...rest
+}: {
+  children?: React.ReactNode;
+  position?: 'bottom' | 'top';
+  compact?: boolean;
+  style?: React.CSSProperties;
+}) {
+  const isSandy = useIsSandy();
+  return isSandy ? (
+    <SandyToolbarContainer style={style}>{children}</SandyToolbarContainer>
+  ) : (
+    <ToolbarContainer style={style} {...rest}>
+      {children}
+    </ToolbarContainer>
+  );
+}