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/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';