From 422ab99d29454d09cd89cdafc46e8502eee0ed67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=BCchele?= Date: Wed, 9 Jan 2019 10:02:55 -0800 Subject: [PATCH] no client/device Summary: Plugin debugger is now supporting 3 different scenarios: - no devices connected - device connected, but no app for the selected device is connected - apps are connected Added button to the sidebar to open plugin debugger. Reviewed By: passy Differential Revision: D13608749 fbshipit-source-id: d5ba04882590dace78e4ef0b17799d5a394dc3c4 --- src/chrome/MainSidebar.js | 205 ++++++++++++++++++++--------------- src/chrome/PluginDebugger.js | 97 ++++++++++++++--- 2 files changed, 198 insertions(+), 104 deletions(-) diff --git a/src/chrome/MainSidebar.js b/src/chrome/MainSidebar.js index 35bf2f6db..d43be494f 100644 --- a/src/chrome/MainSidebar.js +++ b/src/chrome/MainSidebar.js @@ -21,6 +21,7 @@ import { Text, Glyph, styled, + FlexColumn, GK, FlipperPlugin, FlipperDevicePlugin, @@ -29,6 +30,7 @@ import { import React from 'react'; import NotificationsHub from '../NotificationsHub.js'; import {selectPlugin} from '../reducers/connections.js'; +import {setActiveSheet} from '../reducers/application.js'; import {connect} from 'react-redux'; const ListItem = styled('div')(({active}) => ({ @@ -97,6 +99,20 @@ const PluginName = styled(Text)(props => ({ }, })); +const Plugins = styled(FlexColumn)({ + flexGrow: 1, +}); + +const PluginDebugger = styled(FlexBox)(props => ({ + color: colors.blackAlpha50, + borderTop: `1px solid ${colors.blackAlpha10}`, + alignItems: 'center', + padding: 10, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', +})); + function PluginIcon({ isActive, backgroundColor, @@ -188,6 +204,7 @@ type MainSidebarProps = {| numNotifications: number, devicePlugins: Map>>, clientPlugins: Map>>, + setActiveSheet: (activeSheet: ?string) => any, |}; class MainSidebar extends PureComponent { @@ -216,98 +233,111 @@ class MainSidebar extends PureComponent { backgroundColor={ process.platform === 'darwin' && windowIsFocused ? 'transparent' : '' }> - {!GK.get('flipper_disable_notifications') && ( - - selectPlugin({ - selectedPlugin: 'notifications', - selectedApp: null, - deepLinkPayload: null, - }) - }> - 0 - ? NotificationsHub.icon || 'bell' - : 'bell-null' - } - isActive={selectedPlugin === NotificationsHub.id} - /> - - {NotificationsHub.title} - - - )} - {selectedDevice && ( - {selectedDevice.title} - )} - {selectedDevice && - Array.from(this.props.devicePlugins.values()) - .filter(plugin => plugin.supportsDevice(selectedDevice)) - .map((plugin: Class>) => ( - - selectPlugin({ - selectedPlugin: plugin.id, - selectedApp: null, - deepLinkPayload: null, - }) + + {!GK.get('flipper_disable_notifications') && ( + + selectPlugin({ + selectedPlugin: 'notifications', + selectedApp: null, + deepLinkPayload: null, + }) + }> + 0 + ? NotificationsHub.icon || 'bell' + : 'bell-null' } - plugin={plugin} + isActive={selectedPlugin === NotificationsHub.id} /> + + {NotificationsHub.title} + + + )} + {selectedDevice && ( + {selectedDevice.title} + )} + {selectedDevice && + Array.from(this.props.devicePlugins.values()) + .filter(plugin => plugin.supportsDevice(selectedDevice)) + .map((plugin: Class>) => ( + + selectPlugin({ + selectedPlugin: plugin.id, + selectedApp: null, + deepLinkPayload: null, + }) + } + plugin={plugin} + /> + ))} + {clients + .filter( + (client: Client) => + (selectedDevice && + client.query.device_id === selectedDevice.serial) || + // Old android sdk versions don't know their device_id + // Display their plugins under all selected devices until they die out + client.query.device_id === 'unknown', + ) + .map((client: Client) => ( + + {client.query.app} + {Array.from(this.props.clientPlugins.values()) + .filter( + (p: Class>) => + client.plugins.indexOf(p.id) > -1, + ) + .map((plugin: Class>) => ( + + selectPlugin({ + selectedPlugin: plugin.id, + selectedApp: client.id, + deepLinkPayload: null, + }) + } + plugin={plugin} + app={client.query.app} + /> + ))} + ))} - {clients - .filter( - (client: Client) => - (selectedDevice && - client.query.device_id === selectedDevice.serial) || - // Old android sdk versions don't know their device_id - // Display their plugins under all selected devices until they die out - client.query.device_id === 'unknown', - ) - .map((client: Client) => ( - - {client.query.app} - {Array.from(this.props.clientPlugins.values()) - .filter( - (p: Class>) => - client.plugins.indexOf(p.id) > -1, - ) - .map((plugin: Class>) => ( - - selectPlugin({ - selectedPlugin: plugin.id, - selectedApp: client.id, - deepLinkPayload: null, - }) - } - plugin={plugin} - app={client.query.app} - /> - ))} + {uninitializedClients.map(entry => ( + + {entry.client.appName} + {entry.errorMessage ? ( + + ) : ( + + )} ))} - {uninitializedClients.map(entry => ( - - {entry.client.appName} - {entry.errorMessage ? ( - - ) : ( - - )} - - ))} + + this.props.setActiveSheet('PLUGIN_DEBUGGER')}> + +  Plugin not showing? + ); } @@ -347,5 +377,6 @@ export default connect( }), { selectPlugin, + setActiveSheet, }, )(MainSidebar); diff --git a/src/chrome/PluginDebugger.js b/src/chrome/PluginDebugger.js index 8e5457082..9cb9148be 100644 --- a/src/chrome/PluginDebugger.js +++ b/src/chrome/PluginDebugger.js @@ -9,9 +9,17 @@ import type {FlipperDevicePlugin, FlipperPlugin} from '../plugin'; import type {PluginDefinition} from '../dispatcher/plugins'; import type Client from '../Client'; -import {Component} from 'react'; +import {Component, Fragment} from 'react'; import {connect} from 'react-redux'; -import {FlexColumn, Button, Text, ManagedTable, styled, colors} from 'flipper'; +import { + FlexColumn, + Button, + Text, + ManagedTable, + styled, + colors, + Link, +} from 'flipper'; import {remote} from 'electron'; const Container = styled(FlexColumn)({ @@ -20,7 +28,8 @@ const Container = styled(FlexColumn)({ }); const InfoText = styled(Text)({ - lineHeight: '140%', + lineHeight: '130%', + marginBottom: 8, }); const Title = styled('div')({ @@ -67,6 +76,7 @@ type Props = {| disabledPlugins: Array, failedPlugins: Array<[PluginDefinition, string]>, clients: Array, + selectedDevice: ?string, onHide: () => mixed, |}; @@ -217,22 +227,74 @@ class PluginDebugger extends Component { } render() { + let content = null; + + if (!this.props.selectedDevice) { + content = ( + + We can't find any device connected to your computer. Is an + emulator/simulator currently running on your system, or is there a + development device connected via USB? There are some devices/emulators + known to have problems connecting to Flipper. Check out the{' '} + + known incompatibilities + . + + ); + } else if ( + !this.props.clients.some( + (client: Client) => + client.query.device_id === this.props.selectedDevice, + ) + ) { + // no clients for selected device + content = ( + + + While Flipper was able to connect to your device, it wasn't able to + connect to the app you are running on your device. For this reason, + app-specific plugins will not show up. + + {this.props.clients.length > 0 && ( + // we have clients, but not for this device + + Make sure you selected the correct device from the dropdown button + in the upper left corner. Only plugins for the selected device are + shown in the sidebar. + + )} + + To debug why Flipper couldn't establish a connection to the app, + check out our documentation about{' '} + + connection issues + . + + + ); + } else { + content = ( + + + The table lists all plugins known to Flipper. Some of them might be + blocked by GKs, others may not show up, because none of the + connected apps is supporting it. + + + + + + ); + } return ( Plugin Status - - The table lists all plugins known to Flipper. Some of them might be - blocked by GKs, others may not show up, because none of the connected - apps is supporting it. - - - - + {content}