Minor sidebar improvements

Summary:
~~Two~~ Four small improvements in the sidebar, that give a cleaner look:

1. expanding the plugin section is now a small button instead of text
2. Star / unstar buttons are only shown on hover of a plugin
3. Used all caps for application names, since we are F A C E B O O K now :-P.
4. Fixed styling of loading status of apps, so that it is consistent with a fully loaded app

Reviewed By: nikoant

Differential Revision: D19297880

fbshipit-source-id: 0fee44511965fc22351eff589d253365c1c6f774

src/chrome/mainsidebar/MainSidebar2.tsx

@@ -26,6 +26,7 @@ import {
   SmallText,
   Info,
   HBox,
+  LoadingIndicator,
 } from 'flipper';
 import React, {
   PureComponent,
@@ -55,9 +56,7 @@ import {
   CategoryName,
   PluginIcon,
   PluginSidebarListItem,
-  ErrorIndicator,
   NoClients,
-  Spinner,
   NoDevices,
   getColorByApp,
 } from './sidebarUtils';
@@ -80,6 +79,8 @@ const SidebarSectionButton = styled('button')<{
   fontSize: level === 3 ? 11 : 14,
   color,
   padding: `${level === 3 ? 0 : 8}px 10px 8px 9px`,
+  textTransform: 'capitalize',
+  fontVariantCaps: level === 2 ? 'all-small-caps' : 'normal',
 }));
 
 const SidebarSectionBody = styled('div')<{
@@ -88,8 +89,10 @@ const SidebarSectionBody = styled('div')<{
 }>(({collapsed}) => ({
   flexShrink: 0,
   overflow: 'hidden',
-  maxHeight: collapsed ? 0 : 1000, // might need increase if too many plugins...
+  maxHeight: collapsed ? 0 : 2000, // might need increase if too many plugins...
-  transition: 'max-height 0.5s ease',
+  transition: collapsed
+    ? 'max-height 0.5s ease-out'
+    : 'max-height 0.5s ease-in',
 }));
 
 const SidebarSection: React.FC<{
@@ -109,7 +112,7 @@ const SidebarSection: React.FC<{
         color={color}>
         <HBox grow="left">
           {typeof title === 'function' ? title(collapsed) : title}
-          {level < 3 && (
+          {level < 3 && children && (
             <Glyph
               name={collapsed ? 'chevron-down' : 'chevron-up'}
               size={12}
@@ -245,16 +248,6 @@ class MainSidebar2 extends PureComponent<Props, State> {
             );
           })}
         </SidebarSection>
-        {uninitializedClients.map(entry => (
-          <ListItem key={JSON.stringify(entry.client)}>
-            {entry.client.appName}
-            {entry.errorMessage ? (
-              <ErrorIndicator name={'mobile-cross'} size={16} />
-            ) : (
-              <Spinner size={16} />
-            )}
-          </ListItem>
-        ))}
         {clients.length === 0 ? (
           <NoClients />
         ) : (
@@ -272,6 +265,22 @@ class MainSidebar2 extends PureComponent<Props, State> {
             />
           ))
         )}
+        {uninitializedClients.map(entry => (
+          <SidebarSection
+            color={getColorByApp(entry.client.appName)}
+            key={JSON.stringify(entry.client)}
+            title={
+              <HBox grow="left">
+                {entry.client.appName}
+                {entry.errorMessage ? (
+                  <Glyph name={'mobile-cross'} size={16} />
+                ) : (
+                  <LoadingIndicator size={16} />
+                )}
+              </HBox>
+            }
+            level={2}></SidebarSection>
+        ))}
       </SidebarSection>
     );
   }
@@ -488,22 +497,18 @@ const PluginList = memo(function PluginList({
       {!allPluginsStarred && (
         <SidebarSection
           level={3}
-          color={colors.light20}
+          color={colors.macOSTitleBarIconBlur}
           defaultCollapsed={
             favoritePlugins.length > 0 && !selectedNonFavoritePlugin
           }
           title={collapsed => (
-            <div>
+            <ShowMoreButton>
-              {collapsed ? 'All plugins…' : 'Show less'}
               <Glyph
-                color={colors.light20}
+                color={colors.macOSTitleBarIconBlur}
                 size={8}
                 name={collapsed ? 'chevron-down' : 'chevron-up'}
-                style={{
-                  marginLeft: 4,
-                }}
               />
-            </div>
+            </ShowMoreButton>
           )}>
           <PluginsByCategory
             client={client}
@@ -578,3 +583,13 @@ const PluginsByCategory = memo(function PluginsByCategory({
     </>
   );
 });
+
+const ShowMoreButton = styled('div')({
+  border: `1px solid ${colors.macOSTitleBarIconBlur}`,
+  width: 16,
+  height: 16,
+  borderRadius: 16,
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  lineHeight: '12px',
+});

src/chrome/mainsidebar/sidebarUtils.tsx

@@ -22,7 +22,7 @@ import {
   Spacer,
   Heading,
 } from 'flipper';
-import React, {Component} from 'react';
+import React, {useState, useCallback} from 'react';
 import {StaticView} from '../../reducers/connections';
 import {BackgroundColorProperty} from 'csstype';
 
@@ -135,7 +135,7 @@ export function centerInSidebar(component: any) {
   });
 }
 
-export class PluginSidebarListItem extends Component<{
+export const PluginSidebarListItem: React.FC<{
   onClick: () => void;
   isActive: boolean;
   plugin: typeof FlipperBasePlugin;
@@ -144,27 +144,33 @@ export class PluginSidebarListItem extends Component<{
   provided?: any;
   onFavorite?: () => void;
   starred?: boolean;
-}> {
+}> = function(props) {
-  render() {
+  const {isActive, plugin, onFavorite, starred} = props;
-    const {isActive, plugin, onFavorite, starred} = this.props;
+  const iconColor = getColorByApp(props.app);
-    const iconColor = getColorByApp(this.props.app);
+  const [hovered, setHovered] = useState(false);
 
-    return (
+  const onEnter = useCallback(() => setHovered(true), []);
-      <ListItem active={isActive} onClick={this.props.onClick}>
+  const onLeave = useCallback(() => setHovered(false), []);
-        <PluginIcon
+
-          isActive={isActive}
+  return (
-          name={plugin.icon || 'apps'}
+    <ListItem
-          backgroundColor={iconColor}
+      active={isActive}
-          color={colors.white}
+      onClick={props.onClick}
-        />
+      onMouseEnter={onEnter}
-        <PluginName>{plugin.title || plugin.id}</PluginName>
+      onMouseLeave={onLeave}>
-        {starred !== undefined && (
+      <PluginIcon
-          <StarButton onStar={onFavorite!} starred={starred} />
+        isActive={isActive}
-        )}
+        name={plugin.icon || 'apps'}
-      </ListItem>
+        backgroundColor={iconColor}
-    );
+        color={colors.white}
-  }
+      />
-}
+      <PluginName>{plugin.title || plugin.id}</PluginName>
+      {starred !== undefined && (hovered || isActive) && (
+        <StarButton onStar={onFavorite!} starred={starred} />
+      )}
+    </ListItem>
+  );
+};
 
 export function getColorByApp(app?: string | null): string {
   let iconColor: string | undefined = (brandColors as any)[app!];