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}>
-          <FlexRow fill={true}>
+          {this.props.leftSidebarVisible && <MainSidebar />}
-            {this.props.leftSidebarVisible && <MainSidebar />}
+          {this.props.selectedDevice ? (
             <PluginContainer logger={this.props.logger} />
-          </FlexRow>
+          ) : (
-        ) : this.props.pluginManagerVisible ? (
+            <WelcomeScreen />
-          <PluginManager />
+          )}
-        ) : (
+        </FlexRow>
-          <WelcomeScreen />
-        )}
         <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}>
+      <Sidebar
-        {devicePlugins
+        position="left"
-          .filter(selectedDevice.supportsPlugin)
+        width={200}
-          .map((plugin: Class<SonarDevicePlugin<>>) => (
+        backgroundColor={
-            <PluginSidebarListItem
+          process.platform === 'darwin' && windowIsFocused ? 'transparent' : ''
-              key={plugin.id}
+        }>
-              isActive={plugin.id === selectedPlugin}
+        {selectedDevice &&
-              onClick={() =>
+          devicePlugins
-                selectPlugin({
+            .filter(selectedDevice.supportsPlugin)
-                  selectedPlugin: plugin.id,
+            .map((plugin: Class<SonarDevicePlugin<>>) => (
-                  selectedApp: null,
+              <PluginSidebarListItem
-                })
+                key={plugin.id}
-              }
+                isActive={plugin.id === selectedPlugin}
-              plugin={plugin}
+                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 = {

static/index.dev.html

@@ -9,7 +9,8 @@
     <title>Sonar</title>
 
     <style>
-      .__infinity-dev-box {
+
+      #loading {
         -webkit-app-region: drag;
         z-index: 999999;
         position: absolute;
@@ -18,12 +19,13 @@
         bottom: 0;
         right: 0;
         padding: 50px;
-        color: #fff;
         overflow: auto;
-      }
+        display: flex;
-
+        align-items: center;
-      .__infinity-dev-box-loading {
+        justify-content: center;
-        background-color: #333;
+        font-size: 20px;
+        color: #525252;
+        text-align: center;
       }
 
       .__infinity-dev-box-error {
@@ -33,26 +35,16 @@
         font-size: 16px;
       }
 
-      .__infinity-dev-box-text {
-        font-size: 30px;
-        line-height: 200px;
-        margin-top: -100px;
-        width: 100%;
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        text-align: center;
-      }
     </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
-
+      <div id="loading">
-    <div class="__infinity-dev-box __infinity-dev-box-loading">
+        Loading...
-      <div class="__infinity-dev-box-text">Loading...</div>
+      </div>
     </div>
 
+
     <div class="__infinity-dev-box __infinity-dev-box-error" hidden>
 
     </div>
@@ -83,11 +75,6 @@
           const box = document.querySelector('.__infinity-dev-box-error');
           box.removeAttribute('hidden');
           box.textContent = text;
-          onLoad();
-        }
-
-        function onLoad() {
-          document.querySelector('.__infinity-dev-box-loading').setAttribute('hidden', true);
         }
 
         function init() {
@@ -98,8 +85,6 @@
             openError('Script failure. Check Chrome console for more info.');
           };
 
-          script.onload = onLoad;
-
           document.body.appendChild(script);
         }
 

static/index.js

@@ -141,6 +141,7 @@ function tryCreateWindow() {
       fullscreenable: false,
       backgroundThrottling: false,
       titleBarStyle: 'hiddenInset',
+      vibrancy: 'sidebar',
       webPreferences: {
         webSecurity: false,
         scrollBounce: true,