move WelcomeScreen

Summary: The sidebar is now shown, even if no device is connected. This prevents the jumping layout when Flipper launches, but still has not connected to devices.

Reviewed By: passy

Differential Revision: D9263892

fbshipit-source-id: d5b96a8619393ee4002863a83d9024f00c6cb396

src/App.js

@@ -52,16 +52,14 @@ export class App extends React.Component<Props> {
             close={() => this.props.toggleBugDialogVisible(false)}
           />
         )}
-        {this.props.selectedDevice ? (
-          <FlexRow fill={true}>
-            {this.props.leftSidebarVisible && <MainSidebar />}
+        <FlexRow fill={true}>
+          {this.props.leftSidebarVisible && <MainSidebar />}
+          {this.props.selectedDevice ? (
             <PluginContainer logger={this.props.logger} />
-          </FlexRow>
-        ) : this.props.pluginManagerVisible ? (
-          <PluginManager />
-        ) : (
-          <WelcomeScreen />
-        )}
+          ) : (
+            <WelcomeScreen />
+          )}
+        </FlexRow>
         <ErrorBar text={this.props.error} />
       </FlexColumn>
     );

src/chrome/MainSidebar.js

@@ -135,7 +135,8 @@ class PluginSidebarListItem extends Component<{
 type MainSidebarProps = {|
   selectedPlugin: ?string,
   selectedApp: ?string,
-  selectedDevice: BaseDevice,
+  selectedDevice: ?BaseDevice,
+  windowIsFocused: boolean,
   selectPlugin: (payload: {
     selectedPlugin: ?string,
     selectedApp: ?string,
@@ -150,12 +151,13 @@ class MainSidebar extends Component<MainSidebarProps> {
       selectedPlugin,
       selectedApp,
       selectPlugin,
+      windowIsFocused,
     } = this.props;
     let {clients} = this.props;
 
     let enabledPlugins = [];
     for (const devicePlugin of devicePlugins) {
-      if (selectedDevice.supportsPlugin(devicePlugin)) {
+      if (selectedDevice && selectedDevice.supportsPlugin(devicePlugin)) {
         enabledPlugins.push(devicePlugin);
       }
     }
@@ -179,22 +181,28 @@ class MainSidebar extends Component<MainSidebarProps> {
       .sort((a, b) => (a.query.app || '').localeCompare(b.query.app));
 
     return (
-      <Sidebar position="left" width={200}>
-        {devicePlugins
-          .filter(selectedDevice.supportsPlugin)
-          .map((plugin: Class<SonarDevicePlugin<>>) => (
-            <PluginSidebarListItem
-              key={plugin.id}
-              isActive={plugin.id === selectedPlugin}
-              onClick={() =>
-                selectPlugin({
-                  selectedPlugin: plugin.id,
-                  selectedApp: null,
-                })
-              }
-              plugin={plugin}
-            />
-          ))}
+      <Sidebar
+        position="left"
+        width={200}
+        backgroundColor={
+          process.platform === 'darwin' && windowIsFocused ? 'transparent' : ''
+        }>
+        {selectedDevice &&
+          devicePlugins
+            .filter(selectedDevice.supportsPlugin)
+            .map((plugin: Class<SonarDevicePlugin<>>) => (
+              <PluginSidebarListItem
+                key={plugin.id}
+                isActive={plugin.id === selectedPlugin}
+                onClick={() =>
+                  selectPlugin({
+                    selectedPlugin: plugin.id,
+                    selectedApp: null,
+                  })
+                }
+                plugin={plugin}
+              />
+            ))}
         {clients.map((client: Client) => (
           <React.Fragment key={client.id}>
             <SidebarHeader>{client.query.app}</SidebarHeader>
@@ -226,7 +234,11 @@ class MainSidebar extends Component<MainSidebarProps> {
 }
 
 export default connect(
-  ({connections: {selectedDevice, selectedPlugin, selectedApp, clients}}) => ({
+  ({
+    application: {windowIsFocused},
+    connections: {selectedDevice, selectedPlugin, selectedApp, clients},
+  }) => ({
+    windowIsFocused,
     selectedDevice,
     selectedPlugin,
     selectedApp,

src/chrome/WelcomeScreen.js

@@ -23,7 +23,7 @@ const Container = FlexColumn.extends({
   width: '100%',
   justifyContent: 'center',
   alignItems: 'center',
-  backgroundImage: 'url(./pattern.gif)',
+  backgroundColor: colors.light02,
 });
 
 const Welcome = FlexColumn.extends(
@@ -104,12 +104,14 @@ export default class WelcomeScreen extends PureComponent<Props, State> {
   };
 
   componentDidMount() {
+    // waiting sometime before showing the welcome screen to allow Flipper to
+    // connect to devices, if there are any
     setTimeout(
       () =>
         this.setState({
           isMounted: true,
         }),
-      100,
+      2000,
     );
   }
 

src/ui/components/Sidebar.js

@@ -8,6 +8,7 @@
 import type {StyledComponent} from '../styled/index.js';
 import Interactive from './Interactive.js';
 import FlexColumn from './FlexColumn.js';
+import {colors} from './colors';
 import {Component} from 'react';
 
 const SidebarInteractiveContainer = Interactive.extends({
@@ -21,7 +22,8 @@ const SidebarContainer: StyledComponent<{
   overflow?: boolean,
 }> = FlexColumn.extends(
   {
-    backgroundColor: props => props.backgroundColor || '#f7f7f7',
+    backgroundColor: props =>
+      props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
     borderLeft: props =>
       props.position === 'right' ? '1px solid #b3b3b3' : 'none',
     borderTop: props =>
@@ -103,7 +105,11 @@ type SidebarState = {|
 export default class Sidebar extends Component<SidebarProps, SidebarState> {
   constructor(props: SidebarProps, context: Object) {
     super(props, context);
-    this.state = {userChange: false, width: props.width, height: props.height};
+    this.state = {
+      userChange: false,
+      width: props.width,
+      height: props.height,
+    };
   }
 
   static defaultProps = {