convert to emotion

Summary:
My benchmarks have shown react-emotion to be faster than the current implementation of `styled`. For this reason, I am converting all styling to [emotion](https://emotion.sh).

Benchmark results:
{F136839093}

The syntax is very similar between the two libraries. The main difference is that emotion only allows a single function for the whole style attribute, whereas the old implementation had functions for every style-attirbute.

Before:
```
{
  color: props => props.color,
  fontSize: props => props.size,
}
```

After:
```
props => ({
  color: props.color,
  fontSize: props.size,
})
```

Reviewed By: jknoxville

Differential Revision: D9479893

fbshipit-source-id: 2c39e4618f7e52ceacb67bbec8ae26114025723f

src/plugins/network/RequestDetails.js

@@ -23,7 +23,7 @@ import {getHeaderValue} from './index.js';
 
 import querystring from 'querystring';
 
-const WrappingText = Text.extends({
+const WrappingText = styled(Text)({
   wordWrap: 'break-word',
   width: '100%',
   lineHeight: '125%',
@@ -84,7 +84,7 @@ function decompress(body: string): string {
 }
 
 export default class RequestDetails extends Component<RequestDetailsProps> {
-  static Container = FlexColumn.extends({
+  static Container = styled(FlexColumn)({
     height: '100%',
     overflow: 'auto',
   });
@@ -274,7 +274,7 @@ class HeaderInspector extends Component<
   }
 }
 
-const BodyContainer = styled.view({
+const BodyContainer = styled('div')({
   paddingTop: 10,
   paddingBottom: 20,
 });
@@ -338,7 +338,7 @@ class ResponseBodyInspector extends Component<{
   }
 }
 
-const MediaContainer = FlexColumn.extends({
+const MediaContainer = styled(FlexColumn)({
   alignItems: 'center',
   justifyContent: 'center',
   width: '100%',
@@ -354,14 +354,14 @@ type ImageWithSizeState = {
 };
 
 class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> {
-  static Image = styled.image({
+  static Image = styled('img')({
     objectFit: 'scale-down',
     maxWidth: 500,
     maxHeight: 500,
     marginBottom: 10,
   });
 
-  static Text = Text.extends({
+  static Text = styled(Text)({
     color: colors.dark70,
     fontSize: 14,
   });
@@ -408,7 +408,7 @@ class ImageFormatter {
 }
 
 class VideoFormatter {
-  static Video = styled.customHTMLTag('video', {
+  static Video = styled('video')({
     maxWidth: 500,
     maxHeight: 500,
   });

src/plugins/network/index.js

@@ -16,6 +16,7 @@ import {
   colors,
   PureComponent,
   SonarSidebar,
+  styled,
 } from 'sonar';
 import {SonarPlugin, SearchableTable} from 'sonar';
 import RequestDetails from './RequestDetails.js';
@@ -100,7 +101,7 @@ export function formatBytes(count: number): string {
   return count + ' B';
 }
 
-const TextEllipsis = Text.extends({
+const TextEllipsis = styled(Text)({
   overflowX: 'hidden',
   textOverflow: 'ellipsis',
   maxWidth: '100%',
@@ -287,7 +288,7 @@ function calculateState(
 }
 
 class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
-  static ContextMenu = ContextMenu.extends({
+  static ContextMenu = styled(ContextMenu)({
     flex: 1,
   });
 
@@ -338,7 +339,7 @@ class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
   }
 }
 
-const Icon = Glyph.extends({
+const Icon = styled(Glyph)({
   marginTop: -3,
   marginRight: 3,
 });
@@ -367,7 +368,7 @@ class DurationColumn extends PureComponent<{
   request: Request,
   response: ?Response,
 }> {
-  static Text = Text.extends({
+  static Text = styled(Text)({
     flex: 1,
     textAlign: 'right',
     paddingRight: 10,
@@ -389,7 +390,7 @@ class DurationColumn extends PureComponent<{
 class SizeColumn extends PureComponent<{
   response: ?Response,
 }> {
-  static Text = Text.extends({
+  static Text = styled(Text)({
     flex: 1,
     textAlign: 'right',
     paddingRight: 10,