Standardize Chrome to use Layout component

Summary:
Fixes a potential issue where double scrollbars could appear or entire main contents would be scrollable (when a plugin has a fixed height > window height) as maincontents was made scrollable as well in D22411617 (2ce65c1b3c)

Anyway this is nice clean up that makes our chrome layout more understandable (imho). The PluginContents wrapper is still very sad (used by ReactDevTools and Hermes debugger), but can hopefully be addressed with the sandy cleanup in the future

Reviewed By: nikoant

Differential Revision: D22431807

fbshipit-source-id: 113e8441e0c43a8b764f5cf27615ab93627c3197

desktop/app/src/App.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {FlexColumn, FlexRow, styled} from 'flipper';
+import {FlexRow, styled, Layout} from 'flipper';
 import {connect} from 'react-redux';
 import TitleBar from './chrome/TitleBar';
 import MainSidebar2 from './chrome/mainsidebar/MainSidebar2';
@@ -65,19 +65,16 @@ type DispatchProps = {
   setActiveSheet: typeof setActiveSheet;
 };
 
-const MainContent = styled(FlexColumn)({
-  height: 'calc(100vh - 38px)',
-});
-
+/**
+ * This wrapper is only needed for hacky plugins that place contents out of
+ * contents, like hermes debugger
+ */
 const PluginContent = styled(FlexRow)({
   width: '100%',
   height: '100%',
   position: 'relative',
 });
-
 PluginContent.displayName = 'App:PluginContent';
-MainContent.displayName = 'App:MainContent';
-
 type Props = StateFromProps & OwnProps & DispatchProps;
 
 export class App extends React.Component<Props> {
@@ -152,13 +149,17 @@ export class App extends React.Component<Props> {
 
   render() {
     return (
-      <FlexColumn grow={true}>
-        <TitleBar version={version} />
-        <Sheet>{this.getSheet}</Sheet>
-        <MainContent>
-          <DoctorBar />
-          <ErrorBar />
-          <FlexRow grow scrollable>
+      <Layout.Top>
+        <Layout.Top>
+          <TitleBar version={version} />
+          <>
+            <Sheet>{this.getSheet}</Sheet>
+            <DoctorBar />
+            <ErrorBar />
+          </>
+        </Layout.Top>
+        <Layout.Bottom>
+          <Layout.Left>
             {this.props.leftSidebarVisible && <MainSidebar2 />}
             <PluginContent>
               {this.props.staticView != null ? (
@@ -180,10 +181,10 @@ export class App extends React.Component<Props> {
                 }}
               />
             </PluginContent>
-          </FlexRow>
-        </MainContent>
-        <StatusBar />
-      </FlexColumn>
+          </Layout.Left>
+          <StatusBar />
+        </Layout.Bottom>
+      </Layout.Top>
     );
   }
 }