From 0038c9c9bf8ec112a38d417e88cf019ad7d2c32d Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Wed, 8 Jul 2020 09:59:11 -0700
Subject: [PATCH] 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 (https://github.com/facebook/flipper/commit/2ce65c1b3cda9addb2d0cf945195b78d9e7be398)

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   | 39 ++++++++++++++++++++-------------------
 desktop/static/icons.json |  3 +++
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/desktop/app/src/App.tsx b/desktop/app/src/App.tsx
index dbcfcc71d..39e38ff50 100644
--- a/desktop/app/src/App.tsx
+++ b/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>
     );
   }
 }
diff --git a/desktop/static/icons.json b/desktop/static/icons.json
index 4b4b44598..d71fbec70 100644
--- a/desktop/static/icons.json
+++ b/desktop/static/icons.json
@@ -430,5 +430,8 @@
   ],
   "line-chart": [
     12
+  ],
+  "caution-circle": [
+    12
   ]
 }
\ No newline at end of file