Introduce favorite plugins

Summary: This diff lands improved sidebar navigation. The old functionality to order plugins based on last-recently-used, and cropping at 5 items has been removed. Instead, items can be starred and their position will be fixed. Together with the app switcher introduced this should lead to a cleaner, stabler, and more customizable UI.

Reviewed By: jknoxville

Differential Revision: D18299401

fbshipit-source-id: 29b7eb3a4130933c637f7c81834558bf738d5bf0

src/Client.tsx

@@ -22,7 +22,6 @@ import {registerPlugins} from './reducers/plugins';
 import createTableNativePlugin from './plugins/TableNativePlugin';
 import EventEmitter from 'events';
 import invariant from 'invariant';
-import {Responder} from 'rsocket-types/ReactiveSocketTypes';
 
 type Plugins = Array<string>;
 
@@ -98,11 +97,6 @@ const handleError = (
   }
 };
 
-export const MAX_MINIMUM_PLUGINS = 5;
-export const SHOW_REMAINING_PLUGIN_IF_LESS_THAN = 3;
-export const SAVED_PLUGINS_COUNT =
-  MAX_MINIMUM_PLUGINS + SHOW_REMAINING_PLUGIN_IF_LESS_THAN;
-
 export default class Client extends EventEmitter {
   app: App | undefined;
   connected: boolean;
@@ -111,8 +105,6 @@ export default class Client extends EventEmitter {
   sdkVersion: number;
   messageIdCounter: number;
   plugins: Plugins;
-  lessPlugins: Plugins | undefined;
-  showAllPlugins: boolean;
   connection: RSocketClientSocket<any, any> | null | undefined;
   store: Store;
   activePlugins: Set<string>;
@@ -146,7 +138,6 @@ export default class Client extends EventEmitter {
     super();
     this.connected = true;
     this.plugins = plugins ? plugins : [];
-    this.showAllPlugins = false;
     this.connection = conn;
     this.id = id;
     this.query = query;
@@ -188,29 +179,6 @@ export default class Client extends EventEmitter {
     }
   }
 
-  /// Sort plugins by LRU order stored in lessPlugins; if not, sort by alphabet
-  byClientLRU(
-    pluginsCount: number,
-    a: typeof FlipperPlugin,
-    b: typeof FlipperPlugin,
-  ): number {
-    // Sanity check
-    if (this.lessPlugins != null) {
-      const showPluginsCount =
-        pluginsCount >= MAX_MINIMUM_PLUGINS + SHOW_REMAINING_PLUGIN_IF_LESS_THAN
-          ? MAX_MINIMUM_PLUGINS
-          : pluginsCount;
-      let idxA = this.lessPlugins.indexOf(a.id);
-      idxA = idxA < 0 || idxA >= showPluginsCount ? showPluginsCount : idxA;
-      let idxB = this.lessPlugins.indexOf(b.id);
-      idxB = idxB < 0 || idxB >= showPluginsCount ? showPluginsCount : idxB;
-      if (idxA !== idxB) {
-        return idxA > idxB ? 1 : -1;
-      }
-    }
-    return (a.title || a.id) > (b.title || b.id) ? 1 : -1;
-  }
-
   /* All clients should have a corresponding Device in the store.
      However, clients can connect before a device is registered, so wait a
      while for the device to be registered if it isn't already. */

src/chrome/ErrorBar.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {styled, colors} from 'flipper';
+import {styled, colors, Glyph} from 'flipper';
 import React, {useState, memo} from 'react';
 import {connect} from 'react-redux';
 import {FlipperError, dismissError} from '../reducers/connections';
@@ -51,7 +51,13 @@ const ErrorBar = memo(function ErrorBar(props: Props) {
       <DismissAllErrors
         onClick={() => setCollapsed(c => !c)}
         title="Show / hide errors">
-        {collapsed ? `▼ ${errorCount}` : '▲'}
+        <Glyph
+          color={colors.white}
+          size={8}
+          name={collapsed ? 'chevron-down' : 'chevron-up'}
+          style={{marginRight: 4}}
+        />
+        {collapsed && errorCount}
       </DismissAllErrors>
     </ErrorBarContainer>
   );

src/chrome/MainSidebar.tsx

@@ -29,12 +29,13 @@ import {
   FlipperDevicePlugin,
   LoadingIndicator,
   Button,
+  StarButton,
 } from 'flipper';
 import React, {Component, PureComponent, Fragment} from 'react';
 import NotificationsHub from '../NotificationsHub';
 import {
   selectPlugin,
-  showMoreOrLessPlugins,
+  starPlugin,
   StaticView,
   setStaticView,
 } from '../reducers/connections';
@@ -42,13 +43,12 @@ import {setActiveSheet} from '../reducers/application';
 import UserAccount from './UserAccount';
 import {connect} from 'react-redux';
 import {BackgroundColorProperty} from 'csstype';
-import {
-  MAX_MINIMUM_PLUGINS,
-  SHOW_REMAINING_PLUGIN_IF_LESS_THAN,
-} from '../Client';
 import {StyledOtherComponent} from 'create-emotion-styled';
 import SupportRequestFormManager from '../fb-stubs/SupportRequestFormManager';
 
+type FlipperPlugins = (typeof FlipperPlugin)[];
+type PluginsByCategory = [string, FlipperPlugins][];
+
 const ListItem = styled('div')(({active}: {active?: boolean}) => ({
   paddingLeft: 10,
   display: 'flex',
@@ -64,19 +64,18 @@ const ListItem = styled('div')(({active}: {active?: boolean}) => ({
   },
 }));
 
-const SidebarHeader = styled(FlexBox)({
+const SidebarButton = styled(Button)(({small}: {small?: boolean}) => ({
-  display: 'block',
+  fontWeight: 'bold',
-  alignItems: 'center',
+  fontSize: small ? 11 : 14,
-  padding: 3,
+  width: '100%',
-  color: colors.macOSSidebarSectionTitle,
-  fontSize: 11,
-  fontWeight: 500,
-  marginLeft: 7,
-  textOverflow: 'ellipsis',
   overflow: 'hidden',
-  whiteSpace: 'nowrap',
+  marginTop: small ? 0 : 20,
-  flexShrink: 0,
+  pointer: 'cursor',
-});
+  border: 'none',
+  background: 'none',
+  padding: 0,
+  justifyContent: 'left',
+}));
 
 const PluginShape = styled(FlexBox)(
   ({backgroundColor}: {backgroundColor?: BackgroundColorProperty}) => ({
@@ -130,23 +129,6 @@ const Plugins = styled(FlexColumn)({
   overflow: 'auto',
 });
 
-const PluginDebugger = styled(FlexBox)({
-  color: colors.blackAlpha50,
-  alignItems: 'center',
-  padding: 10,
-  flexShrink: 0,
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
-const PluginShowMoreOrLess = styled(ListItem)({
-  color: colors.blue,
-  fontSize: 10,
-  lineHeight: '10px',
-  paddingBottom: 5,
-});
-
 function PluginIcon({
   isActive,
   backgroundColor,
@@ -170,9 +152,13 @@ class PluginSidebarListItem extends Component<{
   isActive: boolean;
   plugin: typeof FlipperBasePlugin;
   app?: string | null | undefined;
+  helpRef?: any;
+  provided?: any;
+  onFavorite?: () => void;
+  starred?: boolean;
 }> {
   render() {
-    const {isActive, plugin} = this.props;
+    const {isActive, plugin, onFavorite, starred} = this.props;
     const app = this.props.app || 'Facebook';
     let iconColor: string | undefined = (brandColors as any)[app];
 
@@ -201,6 +187,9 @@ class PluginSidebarListItem extends Component<{
           color={colors.white}
         />
         <PluginName>{plugin.title || plugin.id}</PluginName>
+        {starred !== undefined && (
+          <StarButton onStar={onFavorite!} starred={starred} />
+        )}
       </ListItem>
     );
   }
@@ -230,6 +219,7 @@ type StateFromProps = {
   staticView: StaticView;
   selectedPlugin: string | null | undefined;
   selectedApp: string | null | undefined;
+  userStarredPlugins: Store['connections']['userStarredPlugins'];
   clients: Array<Client>;
   uninitializedClients: Array<{
     client: UninitializedClient;
@@ -248,16 +238,21 @@ type DispatchFromProps = {
   }) => void;
   setActiveSheet: (activeSheet: ActiveSheet) => void;
   setStaticView: (payload: StaticView) => void;
-  showMoreOrLessPlugins: (payload: string) => void;
+  starPlugin: typeof starPlugin;
 };
 
 type Props = OwnProps & StateFromProps & DispatchFromProps;
-type State = {showSupportForm: boolean; selectedClientIndex: number};
+type State = {
+  showSupportForm: boolean;
+  selectedClientIndex: number;
+  showAllPlugins: boolean;
+};
 class MainSidebar extends PureComponent<Props, State> {
   state: State = {
     showSupportForm: GK.get('flipper_support_requests'),
     // Not to be confused with selectedApp prop, this one only used to remember the client drowdown selector
     selectedClientIndex: 0,
+    showAllPlugins: false,
   };
   static getDerivedStateFromProps(props: Props, state: State) {
     if (
@@ -297,11 +292,6 @@ class MainSidebar extends PureComponent<Props, State> {
     const client: Client | null =
       clients[this.state.selectedClientIndex] || null;
 
-    const byPluginNameOrId = (
-      a: typeof FlipperBasePlugin,
-      b: typeof FlipperBasePlugin,
-    ) => ((a.title || a.id) > (b.title || b.id) ? 1 : -1);
-
     return (
       <Sidebar
         position="left"
@@ -310,6 +300,69 @@ class MainSidebar extends PureComponent<Props, State> {
           process.platform === 'darwin' && windowIsFocused ? 'transparent' : ''
         }>
         <Plugins>
+          {selectedDevice && (
+            <ListItem>
+              <SidebarButton>{selectedDevice.title}</SidebarButton>
+            </ListItem>
+          )}
+          {selectedDevice &&
+            Array.from(this.props.devicePlugins.values())
+              .filter(plugin => plugin.supportsDevice(selectedDevice))
+              .sort(sortPluginsByName)
+              .map((plugin: typeof FlipperDevicePlugin) => (
+                <PluginSidebarListItem
+                  key={plugin.id}
+                  isActive={plugin.id === selectedPlugin}
+                  onClick={() =>
+                    selectPlugin({
+                      selectedPlugin: plugin.id,
+                      selectedApp: null,
+                      deepLinkPayload: null,
+                    })
+                  }
+                  plugin={plugin}
+                />
+              ))}
+          <ListItem>
+            <SidebarButton
+              title="Select an app to see available plugins"
+              compact={true}
+              dropdown={clients.map((c, index) => ({
+                checked: client === c,
+                label: c.query.app,
+                type: 'checkbox',
+                click: () => this.setState({selectedClientIndex: index}),
+              }))}>
+              {clients.length === 0 ? (
+                '(Not connected to app)'
+              ) : this.state.selectedClientIndex >= clients.length ? (
+                '(Select app)'
+              ) : (
+                <>
+                  {client.query.app}
+                  {clients.length > 1 && (
+                    <Glyph
+                      size={12}
+                      name="chevron-down"
+                      style={{marginLeft: 8}}
+                    />
+                  )}
+                </>
+              )}
+            </SidebarButton>
+          </ListItem>
+          {this.renderClientPlugins(client)}
+          {uninitializedClients.map(entry => (
+            <ListItem key={JSON.stringify(entry.client)}>
+              {entry.client.appName}
+              {entry.errorMessage ? (
+                <ErrorIndicator name={'mobile-cross'} size={16} />
+              ) : (
+                <Spinner size={16} />
+              )}
+            </ListItem>
+          ))}
+        </Plugins>
         {!GK.get('flipper_disable_notifications') && (
           <ListItem
             active={selectedPlugin === 'notifications'}
@@ -319,7 +372,10 @@ class MainSidebar extends PureComponent<Props, State> {
                 selectedApp: null,
                 deepLinkPayload: null,
               })
-              }>
+            }
+            style={{
+              borderTop: `1px solid ${colors.blackAlpha10}`,
+            }}>
             <PluginIcon
               color={colors.light50}
               name={
@@ -357,104 +413,28 @@ class MainSidebar extends PureComponent<Props, State> {
             </PluginName>
           </ListItem>
         )}
-          {selectedDevice && (
+        <ListItem
-            <SidebarHeader>{selectedDevice.title}</SidebarHeader>
-          )}
-          {selectedDevice &&
-            Array.from(this.props.devicePlugins.values())
-              .filter(plugin => plugin.supportsDevice(selectedDevice))
-              .sort(byPluginNameOrId)
-              .map((plugin: typeof FlipperDevicePlugin) => (
-                <PluginSidebarListItem
-                  key={plugin.id}
-                  isActive={plugin.id === selectedPlugin}
-                  onClick={() =>
-                    selectPlugin({
-                      selectedPlugin: plugin.id,
-                      selectedApp: null,
-                      deepLinkPayload: null,
-                    })
-                  }
-                  plugin={plugin}
-                />
-              ))}
-          <ListItem style={{marginTop: 20}}>
-            <Button
-              title="Select a client to see available plugins"
-              compact={true}
-              dropdown={clients.map((c, index) => ({
-                checked: client === c,
-                label: c.query.app,
-                type: 'checkbox',
-                click: () => this.setState({selectedClientIndex: index}),
-              }))}
-              style={{
-                fontSize: 11,
-                width: '100%',
-                overflow: 'hidden',
-              }}>
-              {clients.length === 0
-                ? '(Not connected to client)'
-                : this.state.selectedClientIndex >= clients.length
-                ? '(Select a client)'
-                : client.query.app}{' '}
-            </Button>
-          </ListItem>
-          {this.renderClientPlugins(client)}
-          {uninitializedClients.map(entry => (
-            <React.Fragment key={JSON.stringify(entry.client)}>
-              <SidebarHeader>{entry.client.appName}</SidebarHeader>
-              {entry.errorMessage ? (
-                <ErrorIndicator name={'mobile-cross'} size={16} />
-              ) : (
-                <Spinner size={16} />
-              )}
-            </React.Fragment>
-          ))}
-        </Plugins>
-        <PluginDebugger
           onClick={() => this.props.setActiveSheet(ACTIVE_SHEET_PLUGINS)}>
-          <Glyph
+          <PluginIcon
             name="question-circle"
-            size={16}
+            color={colors.light50}
-            variant="outline"
+            isActive={false}
-            color={colors.blackAlpha30}
           />
-          &nbsp;Manage Plugins...
+          Manage Plugins
-        </PluginDebugger>
+        </ListItem>
         {config.showLogin && <UserAccount />}
       </Sidebar>
     );
   }
 
-  renderClientPlugins(client: Client | null) {
+  renderPluginsByCategory(
-    if (!client) {
+    client: Client,
-      return null;
+    plugins: FlipperPlugins,
-    }
+    starred: boolean,
+    onFavorite: (pluginId: string) => void,
+  ) {
     const {selectedPlugin, selectedApp, selectPlugin} = this.props;
-    const plugins = Array.from(this.props.clientPlugins.values()).filter(
+    return groupPluginsByCategory(plugins).map(([category, plugins]) => (
-      (p: typeof FlipperPlugin) => client.plugins.indexOf(p.id) > -1,
-    );
-
-    const minShowPluginsCount =
-      plugins.length < MAX_MINIMUM_PLUGINS + SHOW_REMAINING_PLUGIN_IF_LESS_THAN
-        ? plugins.length
-        : MAX_MINIMUM_PLUGINS;
-
-    return (
-      <React.Fragment key={client.id}>
-        {groupPluginsByCategory(
-          plugins
-            .sort((a: typeof FlipperPlugin, b: typeof FlipperPlugin) =>
-              client.byClientLRU(plugins.length, a, b),
-            )
-            .slice(
-              0,
-              client.showAllPlugins
-                ? client.plugins.length
-                : minShowPluginsCount,
-            ),
-        ).map(([category, plugins]) => (
       <Fragment key={category}>
         {category && (
           <ListItem>
@@ -464,9 +444,7 @@ class MainSidebar extends PureComponent<Props, State> {
         {plugins.map(plugin => (
           <PluginSidebarListItem
             key={plugin.id}
-                isActive={
+            isActive={plugin.id === selectedPlugin && selectedApp === client.id}
-                  plugin.id === selectedPlugin && selectedApp === client.id
-                }
             onClick={() =>
               selectPlugin({
                 selectedPlugin: plugin.id,
@@ -476,30 +454,117 @@ class MainSidebar extends PureComponent<Props, State> {
             }
             plugin={plugin}
             app={client.query.app}
+            onFavorite={() => onFavorite(plugin.id)}
+            starred={starred}
           />
         ))}
       </Fragment>
-        ))}
+    ));
-        {plugins.length > minShowPluginsCount && (
+  }
-          <PluginShowMoreOrLess
+
-            onClick={() => this.props.showMoreOrLessPlugins(client.id)}>
+  renderClientPlugins(client: Client | null) {
-            {client.showAllPlugins ? 'Show less' : 'Show more'}
+    if (!client) {
-          </PluginShowMoreOrLess>
+      return null;
+    }
+    const onFavorite = (plugin: string) => {
+      this.props.starPlugin({
+        selectedApp: client.id,
+        selectedPlugin: plugin,
+      });
+    };
+    const allPlugins = Array.from(this.props.clientPlugins.values());
+    const favoritePlugins: FlipperPlugins = getFavoritePlugins(
+      client,
+      allPlugins,
+      this.props.userStarredPlugins,
+      true,
+    );
+    return (
+      <>
+        {favoritePlugins.length === 0 ? (
+          <ListItem>
+            <div style={{textAlign: 'center', width: '100%'}}>
+              Star some plugins!
+              <hr style={{width: '100%'}} />
+            </div>
+          </ListItem>
+        ) : (
+          <>
+            {this.renderPluginsByCategory(
+              client,
+              favoritePlugins,
+              true,
+              onFavorite,
             )}
-      </React.Fragment>
+            <ListItem>
+              <SidebarButton
+                small
+                compact
+                onClick={() =>
+                  this.setState(state => ({
+                    ...state,
+                    showAllPlugins: !state.showAllPlugins,
+                  }))
+                }>
+                {this.state.showAllPlugins ? 'Show less' : 'Show more'}
+                <Glyph
+                  size={8}
+                  name={
+                    this.state.showAllPlugins ? 'chevron-up' : 'chevron-down'
+                  }
+                  style={{
+                    marginLeft: 4,
+                  }}
+                />
+              </SidebarButton>
+            </ListItem>
+          </>
+        )}
+        <div
+          style={{
+            flex: 'auto' /*scroll this region, not the entire thing*/,
+            overflow: 'auto',
+            height: 'auto',
+          }}>
+          {this.state.showAllPlugins || favoritePlugins.length === 0
+            ? this.renderPluginsByCategory(
+                client,
+                getFavoritePlugins(
+                  client,
+                  allPlugins,
+                  this.props.userStarredPlugins,
+                  false,
+                ),
+                false,
+                onFavorite,
+              )
+            : null}
+        </div>
+      </>
     );
   }
 }
 
-type PluginsByCategory = [string, (typeof FlipperPlugin)[]][];
+function getFavoritePlugins(
+  client: Client,
+  allPlugins: FlipperPlugins,
+  userStarredPlugins: Props['userStarredPlugins'],
+  favorite: boolean,
+): FlipperPlugins {
+  const appName = client.id;
+  return allPlugins.filter(plugin => {
+    const idx = userStarredPlugins[appName]
+      ? userStarredPlugins[appName].indexOf(plugin.id)
+      : -1;
+    return idx === -1 ? !favorite : favorite;
+  });
+}
 
-function groupPluginsByCategory(
+function groupPluginsByCategory(plugins: FlipperPlugins): PluginsByCategory {
-  plugins: (typeof FlipperPlugin)[],
+  const sortedPlugins = plugins.slice().sort(sortPluginsByName);
-): PluginsByCategory {
+  const byCategory: {[cat: string]: FlipperPlugins} = {};
-  // Pre condition: plugins are already sorted globally
-  const byCategory: {[cat: string]: (typeof FlipperPlugin)[]} = {};
   const res: PluginsByCategory = [];
-  plugins.forEach(plugin => {
+  sortedPlugins.forEach(plugin => {
     const category = plugin.category || '';
     (byCategory[category] || (byCategory[category] = [])).push(plugin);
   });
@@ -512,6 +577,13 @@ function groupPluginsByCategory(
   return res;
 }
 
+function sortPluginsByName(
+  a: typeof FlipperBasePlugin,
+  b: typeof FlipperBasePlugin,
+): number {
+  return (a.title || a.id) > (b.title || b.id) ? 1 : -1;
+}
+
 export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
   ({
     application: {windowIsFocused},
@@ -519,6 +591,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
       selectedDevice,
       selectedPlugin,
       selectedApp,
+      userStarredPlugins,
       clients,
       uninitializedClients,
       staticView,
@@ -537,6 +610,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
     staticView,
     selectedPlugin,
     selectedApp,
+    userStarredPlugins,
     clients,
     uninitializedClients,
     devicePlugins,
@@ -546,6 +620,6 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
     selectPlugin,
     setStaticView,
     setActiveSheet,
-    showMoreOrLessPlugins,
+    starPlugin,
   },
 )(MainSidebar);

src/reducers/connections.tsx

@@ -14,7 +14,6 @@ import {UninitializedClient} from '../UninitializedClient';
 import {isEqual} from 'lodash';
 import iosUtil from '../fb-stubs/iOSContainerUtility';
 import {performance} from 'perf_hooks';
-import {SAVED_PLUGINS_COUNT} from '../Client';
 import isHeadless from '../utils/isHeadless';
 import {Actions} from '.';
 const WelcomeScreen = isHeadless()
@@ -43,7 +42,7 @@ export type State = {
   userPreferredDevice: null | string;
   userPreferredPlugin: null | string;
   userPreferredApp: null | string;
-  userLRUPlugins: {[key: string]: Array<string>};
+  userStarredPlugins: {[key: string]: Array<string>};
   errors: FlipperError[];
   clients: Array<Client>;
   uninitializedClients: Array<{
@@ -116,11 +115,6 @@ export type Action =
       type: 'CLIENT_SETUP_ERROR';
       payload: {client: UninitializedClient; error: FlipperError};
     }
-  | {
-      type: 'CLIENT_SHOW_MORE_OR_LESS';
-      payload: string;
-    }
-  | {type: 'CLEAR_LRU_PLUGINS_HISTORY'}
   | {
       type: 'SET_STATIC_VIEW';
       payload: StaticView;
@@ -128,6 +122,13 @@ export type Action =
   | {
       type: 'DISMISS_ERROR';
       payload: number;
+    }
+  | {
+      type: 'STAR_PLUGIN';
+      payload: {
+        selectedPlugin: string;
+        selectedApp: string;
+      };
     };
 
 const DEFAULT_PLUGIN = 'DeviceLogs';
@@ -141,7 +142,7 @@ const INITAL_STATE: State = {
   userPreferredDevice: null,
   userPreferredPlugin: null,
   userPreferredApp: null,
-  userLRUPlugins: {},
+  userStarredPlugins: {},
   errors: [],
   clients: [],
   uninitializedClients: [],
@@ -259,45 +260,43 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => {
       }
 
       const userPreferredApp = selectedApp || state.userPreferredApp;
-      const selectedAppName = extractAppNameFromAppId(userPreferredApp);
-      // Need to recreate an array to make sure that it doesn't refer to the
-      // array that is showed in on the screen and the array that is kept for
-      // least recently used plugins reference
-      const LRUPlugins = [
-        ...((selectedAppName && state.userLRUPlugins[selectedAppName]) || []),
-      ];
-      const idxLRU =
-        (selectedPlugin && LRUPlugins.indexOf(selectedPlugin)) || -1;
-      if (idxLRU >= 0) {
-        LRUPlugins.splice(idxLRU, 1);
-      }
-      selectedPlugin && LRUPlugins.unshift(selectedPlugin);
-      LRUPlugins.splice(SAVED_PLUGINS_COUNT);
       return {
         ...state,
         ...payload,
         staticView: null,
         userPreferredApp: userPreferredApp,
         userPreferredPlugin: selectedPlugin,
-        userLRUPlugins: selectedAppName
-          ? {
-              ...state.userLRUPlugins,
-              [selectedAppName]: LRUPlugins,
-            }
-          : {...state.userLRUPlugins},
       };
     }
+    case 'STAR_PLUGIN': {
+      const {selectedPlugin, selectedApp} = action.payload;
+      const starredPluginsForApp = [
+        ...(state.userStarredPlugins[selectedApp] || []),
+      ];
+      const idx = starredPluginsForApp.indexOf(selectedPlugin);
+      if (idx === -1) {
+        starredPluginsForApp.push(selectedPlugin);
+      } else {
+        starredPluginsForApp.splice(idx, 1);
+      }
+      return {
+        ...state,
+        userStarredPlugins: {
+          ...state.userStarredPlugins,
+          [selectedApp]: starredPluginsForApp,
+        },
+      };
+    }
+
     case 'SELECT_USER_PREFERRED_PLUGIN': {
       const {payload} = action;
       return {...state, userPreferredPlugin: payload};
     }
     case 'NEW_CLIENT': {
       const {payload} = action;
-      const {userPreferredApp, userPreferredPlugin, userLRUPlugins} = state;
+      const {userPreferredApp, userPreferredPlugin} = state;
       let {selectedApp, selectedPlugin} = state;
 
-      const appName = extractAppNameFromAppId(payload.id);
-      payload.lessPlugins = (appName && userLRUPlugins[appName]) || [];
       if (
         userPreferredApp &&
         userPreferredPlugin &&
@@ -317,10 +316,6 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => {
             c.client.appName !== payload.query.app
           );
         }),
-        userLRUPlugins: {
-          ...state.userLRUPlugins,
-          [payload.id]: payload.lessPlugins,
-        },
         selectedApp,
         selectedPlugin,
       };
@@ -420,33 +415,6 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => {
         }),
       };
     }
-    case 'CLIENT_SHOW_MORE_OR_LESS': {
-      const {payload} = action;
-      const appName = extractAppNameFromAppId(payload);
-
-      return {
-        ...state,
-        clients: state.clients.map((client: Client) => {
-          if (appName && extractAppNameFromAppId(client.id) === appName) {
-            client.showAllPlugins = !client.showAllPlugins;
-            client.lessPlugins = state.userLRUPlugins[appName] || [];
-          }
-          return client;
-        }),
-      };
-    }
-    case 'CLEAR_LRU_PLUGINS_HISTORY': {
-      const clearLRUPlugins: {[key: string]: Array<string>} = {};
-      Object.keys(state.userLRUPlugins).forEach((key: string) => {
-        if (key !== null) {
-          clearLRUPlugins[key] = [];
-        }
-      });
-      return {
-        ...state,
-        userLRUPlugins: clearLRUPlugins,
-      };
-    }
     case 'DISMISS_ERROR': {
       const errors = state.errors.slice();
       errors.splice(action.payload, 1);
@@ -531,8 +499,11 @@ export const selectPlugin = (payload: {
   payload,
 });
 
-export const showMoreOrLessPlugins = (payload: string): Action => ({
+export const starPlugin = (payload: {
-  type: 'CLIENT_SHOW_MORE_OR_LESS',
+  selectedPlugin: string;
+  selectedApp: string;
+}): Action => ({
+  type: 'STAR_PLUGIN',
   payload,
 });
 

src/reducers/index.tsx

@@ -96,7 +96,7 @@ export default combineReducers<State, Actions>({
         'userPreferredDevice',
         'userPreferredPlugin',
         'userPreferredApp',
-        'userLRUPlugins',
+        'userStarredPlugins',
       ],
     },
     connections,

src/ui/components/Glyph.tsx

@@ -43,12 +43,13 @@ function ColoredIcon(
     size?: number;
     className?: string;
     color?: string;
+    style?: React.CSSProperties;
   },
   context: {
     glyphColor?: string;
   },
 ) {
-  const {color = context.glyphColor, name, size = 16, src} = props;
+  const {color = context.glyphColor, name, size = 16, src, style} = props;
 
   const isBlack =
     color == null ||
@@ -63,6 +64,7 @@ function ColoredIcon(
         src={src}
         size={size}
         className={props.className}
+        style={style}
       />
     );
   } else {
@@ -72,6 +74,7 @@ function ColoredIcon(
         size={size}
         src={src}
         className={props.className}
+        style={style}
       />
     );
   }
@@ -87,9 +90,10 @@ export default class Glyph extends React.PureComponent<{
   variant?: 'filled' | 'outline';
   className?: string;
   color?: string;
+  style?: React.CSSProperties;
 }> {
   render() {
-    const {name, size = 16, variant, color, className} = this.props;
+    const {name, size = 16, variant, color, className, style} = this.props;
 
     return (
       <ColoredIcon
@@ -102,6 +106,7 @@ export default class Glyph extends React.PureComponent<{
           size,
           typeof window !== 'undefined' ? window.devicePixelRatio : 1,
         )}
+        style={style}
       />
     );
   }

src/ui/components/StarButton.tsx

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {useState, useCallback} from 'react';
+import {colors} from './colors';
+import Glyph from './Glyph';
+import styled from 'react-emotion';
+
+const DownscaledGlyph = styled(Glyph)({
+  maskSize: '12px 12px',
+  WebkitMaskSize: '12px 12px',
+  height: 12,
+  width: 12,
+});
+
+export function StarButton({
+  starred,
+  onStar,
+}: {
+  starred: boolean;
+  onStar: () => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onStar();
+    },
+    [onStar],
+  );
+  const handleMouseEnter = useCallback(setHovered.bind(null, true), []);
+  const handleMouseLeave = useCallback(setHovered.bind(null, false), []);
+  return (
+    <button
+      style={{
+        border: 'none',
+        background: 'none',
+        cursor: 'pointer',
+        padding: 0,
+        paddingLeft: 4,
+        flex: 0,
+      }}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}>
+      <DownscaledGlyph
+        size={
+          16 /* the icons used below are not available in smaller sizes :-/ */
+        }
+        name={hovered ? (starred ? 'star-slash' : 'life-event-major') : 'star'}
+        color={hovered ? colors.lemonDark1 : colors.macOSTitleBarIconBlur}
+        variant={hovered || starred ? 'filled' : 'outline'}
+      />
+    </button>
+  );
+}

src/ui/index.tsx

@@ -175,3 +175,4 @@ export {InspectorSidebar} from './components/elements-inspector/sidebar';
 export {Console} from './components/console';
 
 export {default as Sheet} from './components/Sheet';
+export {StarButton} from './components/StarButton';

src/utils/icons.js

@@ -24,7 +24,8 @@ const ICONS = {
   'caution-octagon': [16],
   'caution-triangle': [16],
   'chevron-down-outline': [10],
-  'chevron-down': [8],
+  'chevron-down': [8, 12],
+  'chevron-up': [8, 12],
   'chevron-right': [8],
   'dots-3-circle-outline': [16],
   'info-circle': [16],
@@ -52,6 +53,8 @@ const ICONS = {
   rocket: [20],
   settings: [12],
   star: [16, 24],
+  'star-slash': [16],
+  'life-event-major': [16],
   target: [12, 16],
   tools: [20],
 };
@@ -77,7 +80,12 @@ function buildLocalIconPath(name, size, density) {
 // $FlowFixMe not using flow in this file
 function buildIconURL(name, size, density) {
   const icon = getIconPartsFromName(name);
-  const url = `https://external.xx.fbcdn.net/assets/?name=${icon.trimmedName}&variant=${icon.variant}&size=${size}&set=facebook_icons&density=${density}x`;
+  // eslint-disable-next-line prettier/prettier
+  const url = `https://external.xx.fbcdn.net/assets/?name=${
+    icon.trimmedName
+  }&variant=${
+    icon.variant
+  }&size=${size}&set=facebook_icons&density=${density}x`;
   if (
     typeof window !== 'undefined' &&
     (!ICONS[name] || !ICONS[name].includes(size))