Move Metro control buttons to titlebar

Summary:
The Metro control buttons are now in the titlebar. This has a few benefits:
- the buttons are accessible if you are inspecting other metro plugins
- the buttons are even usuable if you selected an app on the actual device. This should help with reducing the cognitive dissonance of having apps both as 'android' app and metro device
- killed the Metro plugin again :)

Reviewed By: nikoant

Differential Revision: D19789455

fbshipit-source-id: 476fd0af1d3fc7b51a33f1af6d3fc3578aeeefae

src/chrome/MetroButton.tsx

@@ -7,16 +7,9 @@
  * @format
  */
 
-import React from 'react';
-import {
-  FlipperDevicePlugin,
-  Device,
-  View,
-  Button,
-  Toolbar,
-  ButtonGroup,
-  MetroDevice,
-} from 'flipper';
+import React, {useCallback} from 'react';
+import {Button, ButtonGroup, MetroDevice, connect} from 'flipper';
+import {State} from '../reducers';
 
 type LogEntry = {};
 
@@ -24,8 +17,6 @@ export type PersistedState = {
   logs: LogEntry[];
 };
 
-type State = {};
-
 /*
 Flow types for events 
 
@@ -120,22 +111,15 @@ export type ReportableEvent =
     };
 */
 
-export default class MetroPlugin extends FlipperDevicePlugin<
-  State,
-  any,
-  PersistedState
-> {
-  static supportsDevice(device: Device) {
-    return device.os === 'Metro';
-  }
+type Props = {
+  device: MetroDevice;
+};
 
-  get ws(): WebSocket {
-    return (this.device as MetroDevice).ws;
-  }
-
-  sendCommand(command: string) {
-    if (this.ws) {
-      this.ws.send(
+function MetroButton({device}: Props) {
+  const sendCommand = useCallback(
+    (command: string) => {
+      if (device.ws) {
+        device.ws.send(
           JSON.stringify({
             version: 2,
             type: 'command',
@@ -143,29 +127,34 @@ export default class MetroPlugin extends FlipperDevicePlugin<
           }),
         );
       }
-  }
-
-  render() {
-    return (
-      <View>
-        <Toolbar>
-          <ButtonGroup>
-            Work-in-progress
-            <Button
-              onClick={() => {
-                this.sendCommand('reload');
-              }}>
-              Reload RN
-            </Button>
-            <Button
-              onClick={() => {
-                this.sendCommand('devMenu');
-              }}>
-              Dev Menu
-            </Button>
-          </ButtonGroup>
-        </Toolbar>
-      </View>
+    },
+    [device],
+  );
+
+  return (
+    <ButtonGroup>
+      <Button
+        title="Reload React Native App"
+        icon="arrows-circle"
+        compact
+        onClick={() => {
+          sendCommand('reload');
+        }}
+      />
+      <Button
+        title="Open the React Native Dev Menu on the device"
+        icon="navicon"
+        compact
+        onClick={() => {
+          sendCommand('devMenu');
+        }}
+      />
+    </ButtonGroup>
   );
-  }
 }
+
+export default connect<Props, {}, {}, State>(({connections: {devices}}) => ({
+  device: devices.find(
+    device => device.os === 'Metro' && !device.isArchived,
+  ) as MetroDevice,
+}))(MetroButton);

src/chrome/TitleBar.tsx

@@ -42,9 +42,10 @@ import {isAutoUpdaterEnabled} from '../utils/argvUtils';
 import isProduction from '../utils/isProduction';
 import {clipboard} from 'electron';
 import React from 'react';
-import {State} from 'src/reducers';
+import {State} from '../reducers';
 import {reportUsage} from '../utils/metrics';
 import FpsGraph from './FpsGraph';
+import MetroButton from './MetroButton';
 
 const AppTitleBar = styled(FlexRow)<{focused?: boolean}>(({focused}) => ({
   background: focused
@@ -83,6 +84,7 @@ type StateFromProps = {
   launcherMsg: LauncherMsg;
   share: ShareType | null | undefined;
   navPluginIsActive: boolean;
+  isMetroActive: boolean;
 };
 
 const VersionText = styled(Text)({
@@ -144,7 +146,7 @@ function statusMessageComponent(
 type Props = OwnProps & DispatchFromProps & StateFromProps;
 class TitleBar extends React.Component<Props, StateFromProps> {
   render() {
-    const {navPluginIsActive, share} = this.props;
+    const {navPluginIsActive, share, isMetroActive} = this.props;
     return (
       <AppTitleBar focused={this.props.windowIsFocused} className="toolbar">
         {navPluginIsActive ? (
@@ -156,6 +158,8 @@ class TitleBar extends React.Component<Props, StateFromProps> {
           <DevicesButton />
         )}
 
+        {isMetroActive ? <MetroButton /> : null}
+
         <ScreenCaptureButtons />
         {statusMessageComponent(
           this.props.downloadingImportData,
@@ -238,7 +242,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, State>(
       launcherMsg,
       share,
     },
-    connections: {selectedDevice, selectedApp},
+    connections: {selectedDevice, selectedApp, devices},
     pluginStates,
   }) => {
     const navigationPluginKey = getPluginKey(
@@ -247,6 +251,9 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, State>(
       'Navigation',
     );
     const navPluginIsActive = !!pluginStates[navigationPluginKey];
+    const isMetroActive = !!devices.find(
+      device => device.os === 'Metro' && !device.isArchived,
+    );
 
     return {
       windowIsFocused,
@@ -257,6 +264,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, State>(
       launcherMsg,
       share,
       navPluginIsActive,
+      isMetroActive,
     };
   },
   {

src/plugins/metro/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "Metro",
-  "version": "0.1.0",
-  "description": "A plugin to manage React Native applications served trough Metro",
-  "main": "index.tsx",
-  "repository": "https://github.com/facebook/flipper",
-  "license": "MIT",
-  "keywords": [
-    "flipper-plugin",
-    "react-native",
-    "metro"
-  ],
-  "title": "Metro Bundler",
-  "bugs": {
-    "email": "mweststrate@fb.com"
-  },
-  "dependencies": {}
-}

static/icons.json

@@ -365,5 +365,11 @@
   ],
   "plus-circle-outline": [
     16
+  ],
+  "arrows-circle": [
+    12
+  ],
+  "navicon": [
+    12
   ]
 }