jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: add features page

Browse Source 
Summary: Adding a "features" page to the to bar and splitting plugin descriptions from their setup instructions.

Reviewed By: jknoxville

Differential Revision: D15147464

fbshipit-source-id: b2106d825454c3b2989eb1e536b128ef9b6d0247
This commit is contained in:
Daniel Büchele
2019-04-30 07:35:45 -07:00
committed by Facebook Github Bot
parent d9bb1c5cf1
commit 3b03a3d605
25 changed files with 1055 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/plugins.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

49
docs/crash-reporter-plugin.md
View File

@@ -1,49 +0,0 @@
---
id: crash-reporter-plugin
title: Crash Reporter Plugin
---
The Crash Reporter Plugin shows a notification in Flipper whenever an app crashes. You can click on the notification to see crash information like stacktrace and other metadata. For Android, you can click the "Open in Logs" button to jump to the row in the Logs plugin with the crash information.
It also shows the list of crashes in the form of a dropdown. You can easily navigate the crashes using previous and next buttons in the UI.
The plugin looks like the following
![UI](/docs/assets/crashreporterplugin.png)
![Notification](/docs/assets/crashreporterpluginnotification.png)
## Setup
### iOS
Add crash reporter plugin to the client.
#### Objective-C
```objectivec
#import <FlipperKitCrashReporterPlugin/FlipperKitCrashReporterPlugin.h>
[client addPlugin:[FlipperKitCrashReporterPlugin sharedInstance]];
```
#### Swift
```swift
import FlipperKit
client?.add(FlipperKitCrashReporterPlugin.sharedInstance());
```
### Android
Add crash reporter plugin to the client.
```java
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
client.addPlugin(CrashReporterPlugin.getInstance());
```

10
docs/features/crash-reporter-plugin.md Normal file
View File

@@ -0,0 +1,10 @@
---
id: crash-reporter-plugin
title: Crash Reporter
---
The Crash Reporter Plugin shows a notification in Flipper whenever an app crashes. You can click on the notification to see crash information like stacktrace and other metadata. For Android, you can click the "Open in Logs" button to jump to the row in the Logs plugin with the crash information.
![UI](/docs/assets/crashreporterplugin.png)
![Notification](/docs/assets/crashreporterpluginnotification.png)

19
docs/features/index.md Normal file
View File

@@ -0,0 +1,19 @@
---
id: index
title: Features
---
Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](logs-plugin.md), [Layout Inspector](layout-plugin.md) and [Network Inspector](network-plugin.md) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own. Each plugin plugin needs to be enabled individually.
![Layout plugin](/docs/assets/plugins.png)
## Build your own plugin
The Flipper desktop app and the mobile native SDK establish a connection which is used to send data to and from the device. Flipper does not make any restrictions on what kind of data is being sent. This enables a lot of different use-cases where you want to better understand what is going inside your app. For example you can visualize the state of local caches, events happening or trigger actions on your app from the desktop.
A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [create a plugin](/docs/create-plugin.md). The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React.
If there is no plugin that does exactly what you want, you can build your own plugin, tailored to your needs. [Learn more]() about how to build plugins.

33
docs/features/layout-plugin.md Normal file
View File

@@ -0,0 +1,33 @@
---
id: layout-plugin
title: Layout Inspector
---
The Layout Inspector in Flipper is useful for a ton of different debugging scenarios. First of all, you can inspect what views the hierarchy is made up of as well as what properties each view has. This is incredibly useful when debugging issues with your product.
The Layout tab supports [Litho](https://fblitho.com) and [ComponentKit](https://componentkit.org) components as well. We integrate with these frameworks to present components in the hierarchy just as if they were native views. We show you all the layout properties, props, and state of the components. The layout inspector is further extensible to support other UI frameworks.
If you hover over a view or component in Flipper we will highlight the corresponding item in your app. This is perfect for debugging the bounds of your views and making sure you have the correct visual padding.
![Layout plugin](/docs/assets/layout.png)
## Quick edits
The Layout Inspector not only allows you to view the hierarchy and inspect each item's properties, but it also allows you to edit things such as layout attributes, background colors, props, and state. Most things actually. This allows you to quickly tweak paddings, margins, and colors until you are happy with them, all without re-compiling. This can save you many hours implementing a new design.
## Target mode
Enable target mode by clicking on the crosshairs icon. Now, you can touch any view on the device and Layout Inspector will jump to the correct position within your layout hierarchy.
Tip: Target mode also works with Talkback running.
## Accessibility mode (Android-only)
Enable accessibility mode by clicking on the accessibility icon. This shows the accessibility view hierarchy next to the normal hierarchy. In the hierarchy, the currently accessibility-focused view is highlighted in green and any accessibility-focusable elements have a green icon next to their name. The hierarchy's context menu also allows you to focus accessibility services on certain elements. When selecting an element in one hierarchy, the corresponding element in the other will also be highlighted. The hierarchies expand and collapse in sync, and searching through the main hierarchy works in accessibility mode as well.
When accessibility mode is enabled, the sidebar will show special properties that are used by accessibility services to determine their functionality. This includes things like content-description, clickable, focusable, and long-clickable among others.
### Talkback
The accessibility mode sidebar also includes a panel with properties derived specifically to show Talkback's interpretation of a view (with logic ported over from Google's Talkback source). While generally accurate, this is not guaranteed to be accurate for all situations. It is always better to turn Talkback on for verification.

11
docs/features/leak-canary-plugin.md Normal file
View File

@@ -0,0 +1,11 @@
---
id: leak-canary-plugin
title: LeakCanary
---
The LeakCanary plugin provides developers with Flipper support for [LeakCanary](https://github.com/square/leakcanary), an open source memory leak detection library.
Leaks detected by LeakCanary will appear automatically in Flipper. Each leak will display a hierarchy of objects, beginning from the garbage collector root and ending at the leaked class.
Selecting any object in this list will display contents of the object's various fields.
Note: this plugin is only available for Android.

0
docs/logs-plugin.md → docs/features/logs-plugin.md
View File

10
docs/features/network-plugin.md Normal file
View File

@@ -0,0 +1,10 @@
---
id: network-plugin
title: Network
---
Use the Network inspector to inspect outgoing network traffic our apps. You can easily browse all requests being made and their responses. The plugin also supports gzipped responses.
![Network plugin](/docs/assets/network.png)
All request sent from the device will be listed in the plugin. Click on a request to see details like headers and body. You can filter the table for domain, method or status by clicking on the corresponding value in the table.

7
docs/features/sandbox-plugin.md Normal file
View File

@@ -0,0 +1,7 @@
---
id: sandbox-plugin
title: Sandbox
---
The Sandbox plugin is useful for developers that had to test changes of their apps by pointing them to some Sandbox environment. Through this plugin and a few lines of code in the client,
the app can get a callback and get the value that the user has input through Flipper. At this point, the developer can plugin its logic to save this setting in its app.

24
docs/features/share-flipper-data.md Normal file
View File

@@ -0,0 +1,24 @@
---
id: share-flipper-data
title: Share Flipper Data
---
Flipper's diagnostic and profiling data is often used for debugging. But sometimes you can not solve the problem on your own and need some help from your colleagues. Rather than sending screenshots or ... you can share the data you are seeing in Flipper with them. This includes all logs, the layout hierarchy, network requests, etc. and helps to get the bigger picture of why something didn't work as expected.
## Export Flipper Data
You can export Flipper's data in a `.flipper` file. For the export to work, an active device needs to be connected to Flipper. Make sure you have selected the device you want to export in Flipper's device dropdown:
![selectedDevice](/docs/assets/shareFlipperData/selectedDevice.png)
To export Flipper's into a file, select "File" → "Export" from the menu bar and save it where ever you like. This file now can be shared with your colleagues.
**Caution:** Bear in mind that the file will include all the data available to the plugins, including for example any access tokens in recorded network requests.
## Import Flipper Data
Opening a `.flipper` file imports all the data and allows you to use Flipper as if the device was connected. However, note the device is marked as "offline". This means, while you are able to see all the date, you can not interact with it (e.g. change a view's background color), because the actual device is not present.
![importedDevice](/docs/assets/shareFlipperData/importedDevice.png)
For advanced users, Flipper also provides a URL handler to import data. Linking to `flipper://import/?url={LINK_TO_FLIPPER_FILE}` will launch Flipper and display the downloaded data.

10
docs/features/shared-preferences-plugin.md Normal file
View File

@@ -0,0 +1,10 @@
---
id: shared-preferences-plugin
title: Shared Preferences
---
Easily inspect and modify the data contained within your app's shared preferences.
![Shared Preferences Plugin](/docs/assets/shared-preferences.png)
All changes to the given shared preference file will automatically appear in Flipper. You may also edit the values in Flipper and have them synced to your device. This can be done by clicking on the value of the specific key you wish to edit, editing the value and then pressing enter.

25
docs/sandbox-plugin.md
View File

@@ -1,25 +0,0 @@
---
id: sandbox-plugin
title: Sandbox
---
The Sandbox plugin is useful for developers that had to test changes of their apps by pointing them to some Sandbox environment. Through this plugin and a few lines of code in the client,
the app can get a callback and get the value that the user has input through Flipper. At this point, the developer can plugin its logic to save this setting in its app.
## Setup
To use the sandbox plugin, you need to add the plugin to your Flipper client instance.
### Android
```java
import com.facebook.flipper.plugins.sandbox.SandboxFlipperPlugin;
import com.facebook.flipper.plugins.sandbox.SandboxFlipperPluginStrategy;
final SandboxFlipperPluginStrategy strategy = getStrategy(); // Your strategy goes here
client.addPlugin(new SandboxFlipperPlugin(strategy));
```
### iOS
Coming soon

31
docs/setup/crash-reporter-plugin.md Normal file
View File

@@ -0,0 +1,31 @@
---
id: crash-reporter-plugin
title: Crash Reporter Setup
sidebar_label: Crash Reporter
---
## Android
```java
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
client.addPlugin(CrashReporterPlugin.getInstance());
```
## iOS
<!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
```objectivec
#import <FlipperKitCrashReporterPlugin/FlipperKitCrashReporterPlugin.h>
[client addPlugin:[FlipperKitCrashReporterPlugin sharedInstance]];
```
<!--Swift-->
```swift
import FlipperKit
client?.add(FlipperKitCrashReporterPlugin.sharedInstance());
```
<!--END_DOCUSAURUS_CODE_TABS-->

73
docs/layout-plugin.md → docs/setup/layout-plugin.md
View File

@@ -1,21 +1,12 @@
--- ---
id: layout-plugin id: layout-plugin
title: Layout Inspector title: Layout Inspector Setup
sidebar_label: Layout Inspector
--- ---
The Layout Inspector in Flipper is useful for a ton of different debugging scenarios. First of all, you can inspect what views the hierarchy is made up of as well as what properties each view has. This is incredibly useful when debugging issues with your product.
The Layout tab supports [Litho](https://fblitho.com) and [ComponentKit](https://componentkit.org) components as well. We integrate with these frameworks to present components in the hierarchy just as if they were native views. We show you all the layout properties, props, and state of the components. The layout inspector is further extensible to support other UI frameworks.
If you hover over a view or component in Flipper we will highlight the corresponding item in your app. This is perfect for debugging the bounds of your views and making sure you have the correct visual padding.
![Layout plugin](/docs/assets/layout.png)
## Setup
To use the layout inspector plugin, you need to add the plugin to your Flipper client instance. To use the layout inspector plugin, you need to add the plugin to your Flipper client instance.
### Android ## Android
**Standard Android View Only** **Standard Android View Only**
@@ -61,39 +52,6 @@ dependencies {
} }
``` ```
### iOS
In Objective-C you can add it as follows:
```objective-c
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];
[client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]]
```
Whereas in swift you can add it as follows:
```swift
import FlipperKit
let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
// If you want to debug componentkit view in swift, otherwise you can ignore the next line
FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
```
## Quick edits
The Layout Inspector not only allows you to view the hierarchy and inspect each item's properties, but it also allows you to edit things such as layout attributes, background colors, props, and state. Most things actually. This allows you to quickly tweak paddings, margins, and colors until you are happy with them, all without re-compiling. This can save you many hours implementing a new design.
## Target mode
Enable target mode by clicking on the crosshairs icon. Now, you can touch any view on the device and Layout Inspector will jump to the correct position within your layout hierarchy.
Tip: Target mode also works with Talkback running.
### Blocking fullscreen views (Android only) ### Blocking fullscreen views (Android only)
@@ -105,11 +63,26 @@ Add the following tag to your view to skip it from Flipper's view picker. The vi
view.setTag("flipper_skip_view_traversal", true); view.setTag("flipper_skip_view_traversal", true);
``` ```
## Accessibility mode (Android-only)
Enable accessibility mode by clicking on the accessibility icon. This shows the accessibility view hierarchy next to the normal hierarchy. In the hierarchy, the currently accessibility-focused view is highlighted in green and any accessibility-focusable elements have a green icon next to their name. The hierarchy's context menu also allows you to focus accessibility services on certain elements. When selecting an element in one hierarchy, the corresponding element in the other will also be highlighted. The hierarchies expand and collapse in sync, and searching through the main hierarchy works in accessibility mode as well. ## iOS
When accessibility mode is enabled, the sidebar will show special properties that are used by accessibility services to determine their functionality. This includes things like content-description, clickable, focusable, and long-clickable among others. <!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
```objective-c
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutPlugin/SKDescriptorMapper.h>
### Talkback SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];
The accessibility mode sidebar also includes a panel with properties derived specifically to show Talkback's interpretation of a view (with logic ported over from Google's Talkback source). While generally accurate, this is not guaranteed to be accurate for all situations. It is always better to turn Talkback on for verification. [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]]
```
<!--Swift-->
```swift
import FlipperKit
let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
// If you want to debug componentkit view in swift, otherwise you can ignore the next line
FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
```
<!--END_DOCUSAURUS_CODE_TABS-->

16
docs/leak-canary-plugin.md → docs/setup/leak-canary-plugin.md
View File

@@ -1,14 +1,9 @@
--- ---
id: leak-canary-plugin id: leak-canary-plugin
title: LeakCanary title: LeakCanary Setup
sidebar_label: LeakCanary
--- ---
The LeakCanary plugin provides developers with Flipper support for [LeakCanary](https://github.com/square/leakcanary), an open source memory leak detection library.
## Setup
Note: this plugin is only available for Android.
Ensure that you already have an explicit dependency in your application's Ensure that you already have an explicit dependency in your application's
`build.gradle`, e.g. `build.gradle`, e.g.
@@ -19,8 +14,6 @@ dependencies {
} }
``` ```
### Android
First, add the plugin to your Flipper client instance: First, add the plugin to your Flipper client instance:
```java ```java
import com.facebook.flipper.plugins.leakcanary.LeakCanaryFlipperPlugin; import com.facebook.flipper.plugins.leakcanary.LeakCanaryFlipperPlugin;
@@ -43,8 +36,3 @@ Then, add the `RecordLeakService` in your debug variant AndroidManifest.xml.
```xml ```xml
<service android:name="com.facebook.flipper.plugins.leakcanary.RecordLeakService" /> <service android:name="com.facebook.flipper.plugins.leakcanary.RecordLeakService" />
``` ```
## Usage
Leaks detected by LeakCanary will appear automatically in Flipper. Each leak will display a hierarchy of objects, beginning from the garbage collector root and ending at the leaked class.
Selecting any object in this list will display contents of the object's various fields.

19
docs/network-plugin.md → docs/setup/network-plugin.md
View File

@@ -1,17 +1,12 @@
--- ---
id: network-plugin id: network-plugin
title: Network title: Network Setup
sidebar_label: Network
--- ---
Use the Network inspector to inspect outgoing network traffic our apps. You can easily browse all requests being made and their responses. The plugin also supports gzipped responses.
![Network plugin](/docs/assets/network.png)
## Setup
To use the network plugin, you need to add the plugin to your Flipper client instance. To use the network plugin, you need to add the plugin to your Flipper client instance.
### Android ## Android
```java ```java
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
@@ -20,7 +15,7 @@ NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
client.addPlugin(networkFlipperPlugin); client.addPlugin(networkFlipperPlugin);
``` ```
#### OkHttp Integration ### OkHttp Integration
If you are using the popular OkHttp library, you can use the Interceptors system to automatically hook into your existing stack. If you are using the popular OkHttp library, you can use the Interceptors system to automatically hook into your existing stack.
@@ -34,14 +29,10 @@ new OkHttpClient.Builder()
As interceptors can modify the request and response, add the Flipper interceptor after all others to get an accurate view of the network traffic. As interceptors can modify the request and response, add the Flipper interceptor after all others to get an accurate view of the network traffic.
### iOS ## iOS
```objective-c ```objective-c
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h> #import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
[client addPlugin: [FlipperKitNetworkPlugin new]] [client addPlugin: [FlipperKitNetworkPlugin new]]
``` ```
## Usage
All request sent from the device will be listed in the plugin. Click on a request to see details like headers and body. You can filter the table for domain, method or status by clicking on the corresponding value in the table.

17
docs/setup/sandbox-plugin.md Normal file
View File

@@ -0,0 +1,17 @@
---
id: sandbox-plugin
title: Sandbox Setup
sidebar_label: Sandbox
---
To use the sandbox plugin, you need to add the plugin to your Flipper client instance. Currently the plugin is only supported on Android.
## Android
```java
import com.facebook.flipper.plugins.sandbox.SandboxFlipperPlugin;
import com.facebook.flipper.plugins.sandbox.SandboxFlipperPluginStrategy;
final SandboxFlipperPluginStrategy strategy = getStrategy(); // Your strategy goes here
client.addPlugin(new SandboxFlipperPlugin(strategy));
```

33
docs/shared-preferences-plugin.md → docs/setup/shared-preferences-plugin.md
View File

@@ -1,17 +1,12 @@
--- ---
id: shared-preferences-plugin id: shared-preferences-plugin
title: Shared Preferences title: Shared Preferences Setup
sidebar_label: Shared Preferences
--- ---
Easily inspect and modify the data contained within your app's shared preferences.
![Shared Preferences Plugin](/docs/assets/shared-preferences.png)
## Setup
This plugin is available for both Android and iOS. This plugin is available for both Android and iOS.
### Android ## Android
```java ```java
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
@@ -20,24 +15,20 @@ client.addPlugin(
new SharedPreferencesFlipperPlugin(context, "my_shared_preference_file")); new SharedPreferencesFlipperPlugin(context, "my_shared_preference_file"));
``` ```
### iOS ## iOS
#### Swift
```swift
import FlipperKit
client?.add(FKUserDefaultsPlugin.init(suiteName: "your_suitename"))
```
#### Objective-c
<!--DOCUSAURUS_CODE_TABS-->
<!--Objective-C-->
```objc ```objc
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h> #import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
[client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:@"your_suitename"]]; [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:@"your_suitename"]];
``` ```
<!--Swift-->
```swift
import FlipperKit
## Usage client?.add(FKUserDefaultsPlugin.init(suiteName: "your_suitename"))
```
All changes to the given shared preference file will automatically appear in Flipper. You may also edit the values in Flipper and have them synced to your device. This can be done by clicking on the value of the specific key you wish to edit, editing the value and then pressing enter. <!--END_DOCUSAURUS_CODE_TABS-->

42
docs/share-flipper-data.md
View File

@@ -1,42 +0,0 @@
---
id: share-flipper-data
title: Share Flipper Data 📦
---
Flipper provides rich diagnostic and profiling data. It's used by mobile engineers to debug issues. It lets you share what you're seeing from your Flipper application, so other developers can open it and explore a snapshot of the data, as if they had the device connected.
## Export Flipper Data
You can export Flipper data as a `.flipper` file. For the export to work, there should be an active device connected to the Flipper application. Make sure you have a device connected to Flipper, by looking for the device name in the following rectangle in the toolbar of the Flipper application:
![selectedDevice](/docs/assets/shareFlipperData/selectedDevice.png)
To export Flipper data as a `.flipper` file, follow these steps:
1. Click on “File” in the menu bar.
2. Click on “Export”.
3. Click on “File...”.
4. You can combine the above steps by using the shortcut ⌘E.
5. After the above steps, a dialog allows you to select the location and change the filename.
6. Wait for the file to appear at the specified location. No loading indicator appears in this case (we are working on it).
7. Once the file appears, share the file with your colleagues. **Bear in mind that the file will include all the data available to the plugins, including any access tokens in the recorded network requests.**
## Import Flipper Data
There are multiple ways to open a `.flipper` file.
**Directly from finder**
Double click the `.flipper` file to launch the app with that device snapshot.
**From within Flipper**
Choose "Open File..." from either the Devices dropdown menu or the File menu (or keyboard shortcut ⌘O) and select the file to import.
This will load the snapshot as an offline device, which will look like this:
![importedDevice](/docs/assets/shareFlipperData/importedDevice.png)
**flipper:// URL handler**
For advanced users, flipper is a registered handler for URLs of the form `flipper://import...` so if you download a .flipper file from a link like this, Flipper will launch directly from the browser and display the downloaded snapshot.

687
docs/ui-components.md
View File

@@ -5,3 +5,690 @@ sidebar_label: UI Components
--- ---
Flipper has a lot of built in React components to build UIs. You can import them directly using e.g. `import {Button} from 'flipper'`. Flipper has a lot of built in React components to build UIs. You can import them directly using e.g. `import {Button} from 'flipper'`.
## Button
A simple button, used in many parts of the application.
| Property | Type | Description |
|---------|------|-------------|
| `onClick` | `(event: SyntheticMouseEvent<>) => any` | onClick handler. |
| `disabled` | `boolean` | Whether this button is disabled. |
| `large` | `boolean` | Whether this button is large. Increases padding and line-height. |
| `compact` | `boolean` | Whether this button is compact. Decreases padding and line-height. |
| `type` | `'primary' ⎮ 'success' ⎮ 'warning' ⎮ 'danger'` | Type of button. |
| `children` | `React$Node` | Children. |
| `dropdown` | `Array<Electron$MenuItemOptions>` | Dropdown menu template shown on click. |
| `icon` | `string` | Name of the icon dispalyed next to the text |
| `iconSize` | `number` | Size of the icon in pixels. |
| `selected` | `boolean` | For toggle buttons, if the button is selected |
| `pulse` | `boolean` | Button is pulsing |
| `href` | `string` | URL to open in the browser on click |
| `depressed` | `boolean` | Whether the button should render depressed into its socket |
| `iconVariant` | `'filled' ⎮ 'outline'` | Style of the icon. `filled` is the default |
| `padded` | `boolean` | Whether the button should have additional padding left and right. |
| `windowIsFocused` | `boolean` | |
## ButtonGroup
Group a series of buttons together.
```jsx
<ButtonGroup>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
```
| Property | Type | Description |
|---------|------|-------------|
| `children` | `React$Node` | |
## ButtonNavigationGroup
Button group to navigate back and forth.
| Property | Type | Description |
|---------|------|-------------|
| `canGoBack` | `boolean` | Back button is enabled |
| `canGoForward` | `boolean` | Forwards button is enabled |
| `onBack` | `() => void` | Callback when back button is clicked |
| `onForward` | `() => void` | Callback when forwards button is clicked |
## Checkbox
A checkbox to toggle UI state
| Property | Type | Description |
|---------|------|-------------|
| `checked` | `boolean` | Whether the checkbox is checked. |
| `onChange` | `(checked: boolean) => void` | Called when a state change is triggered |
## Console
| Property | Type | Description |
|---------|------|-------------|
| `client` | `PluginClient` | |
| `getContext` | `() => string` | |
## ContextMenu
Native context menu that is shown on secondary click.
Uses [Electron's context menu API](https://electronjs.org/docs/api/menu-item)
to show menu items.
Separators can be added by `{type: 'separator'}`
| Property | Type | Description |
|---------|------|-------------|
| `items` | `Array<Electron$MenuItemOptions>` | List of items in the context menu. Used for static menus. |
| `buildItems` | `() => MenuTemplate` | Function to generate the menu. Called right before the menu is showed. Used for dynamic menus. |
| `children` | `React$Node` | Nodes that should have a context menu |
| `component` | `React.ComponentType<any> ⎮ string` | The component that is used to wrap the children. Defaults to `FlexColumn`. |
## ContextMenuProvider
Flipper's root is already wrapped with this component, so plugins should not
need to use this. ContextMenu is what you probably want to use.
| Property | Type | Description |
|---------|------|-------------|
| `children` | `React$Node` | |
## DataDescription
| Property | Type | Description |
|---------|------|-------------|
| `path` | `Array<string>` | |
| `type` | `string` | |
| `value` | `any` | |
| `setValue` | `?DataInspectorSetValue` | |
## DataInspector
An expandable data inspector.
This component is fairly low level. It's likely you're looking for
[`<ManagedDataInspector>`]().
| Property | Type | Description |
|---------|------|-------------|
| `data` | `any` | Object to inspect. |
| `diff` | `any` | Object to compare with the provided `data` property. Differences will be styled accordingly in the UI. |
| `name` | `string` | Current name of this value. |
| `depth` | `number` | Current depth. |
| `path` | `Array<string>` | An array containing the current location of the data relative to its root. |
| `expandRoot` | `boolean` | Whether to expand the root by default. |
| `expanded` | `{ [key: string]: boolean, }` | An array of paths that are currently expanded. |
| `extractValue` | `( value: any, depth: number, ) => ?{⎮ mutable: boolean, type: string, value: any, ⎮}` | An optional callback that will explode a value into its type and value. Useful for inspecting serialised data. |
| `onExpanded` | `?(expanded: DataInspectorExpanded) => void` | Callback whenever the current expanded paths is changed. |
| `setValue` | `?(path: Array<string>, val: any) => void` | Callback when a value is edited. |
| `collapsed` | `boolean` | Whether all objects and arrays should be collapsed by default. |
| `ancestry` | `Array<Object>` | Ancestry of parent objects, used to avoid recursive objects. |
| `tooltips` | `Object` | Object of properties that will have tooltips |
## DataPreview
| Property | Type | Description |
|---------|------|-------------|
| `type` | `string` | |
| `value` | `any` | |
| `depth` | `number` | |
| `extractValue` | `DataValueExtractor` | |
| `maxProperties` | `number` | |
## ManagedDataInspector
Wrapper around `DataInspector` that handles expanded state.
If you require lower level access to the state then use `DataInspector`
directly.
| Property | Type | Description |
|---------|------|-------------|
| `data` | `any` | Object to inspect. |
| `diff` | `any` | Object to compare with the provided `data` property. Differences will be styled accordingly in the UI. |
| `expandRoot` | `boolean` | Whether to expand the root by default. |
| `extractValue` | `DataValueExtractor` | An optional callback that will explode a value into its type and value. Useful for inspecting serialised data. |
| `setValue` | `(path: Array<string>, val: any) => void` | Callback when a value is edited. |
| `collapsed` | `boolean` | Whether all objects and arrays should be collapsed by default. |
| `tooltips` | `Object` | Object of all properties that will have tooltips |
## Elements
| Property | Type | Description |
|---------|------|-------------|
| `root` | `?ElementID` | |
| `selected` | `?ElementID` | |
| `focused` | `?ElementID` | |
| `searchResults` | `?ElementSearchResultSet` | |
| `elements` | `{[key: ElementID]: Element}` | |
| `onElementSelected` | `(key: ElementID) => void` | |
| `onElementExpanded` | `(key: ElementID, deep: boolean) => void` | |
| `onElementHovered` | `?(key: ?ElementID) => void` | |
| `alternateRowColor` | `boolean` | |
| `contextMenuExtensions` | `Array<ContextMenuExtension>` | |
## ElementsInspector
| Property | Type | Description |
|---------|------|-------------|
| `onElementExpanded` | `(key: ElementID, deep: boolean) => void` | |
| `onElementSelected` | `(key: ElementID) => void` | |
| `onElementHovered` | `?(key: ?ElementID) => void` | |
| `onValueChanged` | `?(path: Array<string>, val: any) => void` | |
| `selected` | `?string` | |
| `focused` | `?string` | |
| `searchResults` | `?{⎮ query: string, matches: Set<ElementID>, ⎮}` | |
| `root` | `?string` | |
| `elements` | `{[key: ElementID]: Element}` | |
| `useAppSidebar` | `boolean` | |
| `alternateRowColor` | `boolean` | |
| `contextMenuExtensions` | `Array<ContextMenuExtension>` | |
## InspectorSidebar
| Property | Type | Description |
|---------|------|-------------|
| `element` | `?Element` | |
| `tooltips` | `Object` | |
| `onValueChanged` | `?(path: Array<string>, val: any) => void` | |
| `client` | `PluginClient` | |
| `realClient` | `Client` | |
| `logger` | `Logger` | |
| `extensions` | `Array<Function>` | |
## ErrorBlock
Displaying error messages in a red box.
| Property | Type | Description |
|---------|------|-------------|
| `error` | `Error ⎮ string ⎮ void` | Error message to display. Error object's `stack` or `message` property is used. |
| `className` | `string` | Additional className added to the container. |
## ErrorBoundary
Boundary catching errors and displaying an ErrorBlock instead.
| Property | Type | Description |
|---------|------|-------------|
| `buildHeading` | `(err: Error) => string` | Function to dynamically generate the heading of the ErrorBox. |
| `heading` | `string` | Heading of the ErrorBox. Used as an alternative to `buildHeading`. |
| `showStack` | `boolean` | Whether the stacktrace of the error is shown in the error box |
| `children` | `React$Node` | Code that might throw errors that will be catched |
## File
Wrapper for loading file content from the file system.
| Property | Type | Description |
|---------|------|-------------|
| `src` | `string` | Path to the file in the file system |
| `buffer` | `?string` | Initial content that should be shown while the file is loading |
| `encoding` | `string` | Encoding to parse the contents of the file. Defaults to UTF-8. |
| `onError` | `(err: Error) => React.Element<any>` | Content that should be rendered, when the file loading failed. |
| `onLoading` | `() => React.Element<any>` | Content that should be rendered, while the file is loaded. |
| `onData` | `(content: string) => void` | Callback when the data is successfully loaded. |
| `onLoad` | `(content: string) => React.Element<any>` | Content that should be rendered, when the file is successfully loaded. This ususally should render the file's contents. |
## FileList
List the contents of a folder from the user's file system. The file system is watched for
changes and this list will automatically update.
| Property | Type | Description |
|---------|------|-------------|
| `src` | `string` | Path to the folder |
| `onError` | `?(err: Error) => React$Node` | Content to be rendered in case of an error |
| `onLoad` | `() => void` | Content to be rendered while loading |
| `onFiles` | `(files: FileListFiles) => React$Node` | Content to be rendered when the file list is loaded |
## FilterRow
| Property | Type | Description |
|---------|------|-------------|
| `children` | `ReactNode` | |
| `addFilter` | `(filter: Filter) => void` | |
| `filterKey` | `string` | |
## FlexBox
A container using flexbox to layout its children
## FlexCenter
A container displaying its children horizontally and vertically centered.
## FlexColumn
A container displaying its children in a column
## FlexRow
A container displaying its children in a row
## FocusableBox
| Property | Type | Description |
|---------|------|-------------|
| `focusable` | `` | |
## Glyph
| Property | Type | Description |
|---------|------|-------------|
| `name` | `string` | |
| `size` | `8 ⎮ 10 ⎮ 12 ⎮ 16 ⎮ 18 ⎮ 20 ⎮ 24 ⎮ 32` | |
| `variant` | `'filled' ⎮ 'outline'` | |
| `className` | `string` | |
| `color` | `string` | |
## Heading
A heading component.
| Property | Type | Description |
|---------|------|-------------|
| `level` | `number` | Level of the heading. A number from 1-6. Where 1 is the largest heading. |
| `children` | `React$Node` | Children. |
## Interactive
| Property | Type | Description |
|---------|------|-------------|
| `isMovableAnchor` | `(event: SyntheticMouseEvent<>) => boolean` | |
| `onMoveStart` | `() => void` | |
| `onMoveEnd` | `() => void` | |
| `onMove` | `(top: number, left: number, event: SyntheticMouseEvent<>) => void` | |
| `id` | `string` | |
| `movable` | `boolean` | |
| `hidden` | `boolean` | |
| `moving` | `boolean` | |
| `grow` | `boolean` | |
| `siblings` | `$Shape` | |
| `updateCursor` | `(cursor: ?string) => void` | |
| `zIndex` | `number` | |
| `top` | `number` | |
| `left` | `number` | |
| `minTop` | `number` | |
| `minLeft` | `number` | |
| `width` | `number ⎮ string` | |
| `height` | `number ⎮ string` | |
| `minWidth` | `number` | |
| `minHeight` | `number` | |
| `maxWidth` | `number` | |
| `maxHeight` | `number` | |
| `onCanResize` | `(sides: ResizingSides) => void` | |
| `onResizeStart` | `() => void` | |
| `onResizeEnd` | `() => void` | |
| `onResize` | `(width: number, height: number) => void` | |
| `resizing` | `boolean` | |
| `resizable` | `boolean ⎮ ResizingSides` | |
| `innerRef` | `(elem: HTMLElement) => void` | |
| `style` | `Object` | |
| `className` | `string` | |
| `children` | `React$Element` | |
## Intro
| Property | Type | Description |
|---------|------|-------------|
| `title` | `string` | |
| `icon` | `string` | |
| `screenshot` | `?string` | |
| `children` | `ReactNode` | |
| `onDismiss` | `() => void` | |
## Link
| Property | Type | Description |
|---------|------|-------------|
| `href` | `string` | |
| `children` | `React$Node` | |
## MarkerTimeline
| Property | Type | Description |
|---------|------|-------------|
| `onClick` | `(keys: Array<string>) => mixed` | |
| `selected` | `?string` | |
| `points` | `Array<DataPoint>` | |
| `lineHeight` | `number` | |
| `maxGap` | `number` | |
## ModalOverlay
| Property | Type | Description |
|---------|------|-------------|
| `onClose` | `() => void` | |
| `children` | `React$Node` | |
## Orderable
| Property | Type | Description |
|---------|------|-------------|
| `items` | `{[key: string]: React.Element<*>}` | |
| `orientation` | `'horizontal' ⎮ 'vertical'` | |
| `onChange` | `(order: OrderableOrder, key: string) => void` | |
| `order` | `?Array<string>` | |
| `className` | `string` | |
| `reverse` | `boolean` | |
| `altKey` | `boolean` | |
| `moveDelay` | `number` | |
| `dragOpacity` | `number` | |
| `ignoreChildEvents` | `boolean` | |
## Panel
A Panel component.
| Property | Type | Description |
|---------|------|-------------|
| `className` | `string` | Class name to customise styling. |
| `floating` | `boolean` | Whether this panel is floating from the rest of the UI. ie. if it has margin and a border. |
| `grow` | `boolean` | Whether the panel takes up all the space it can. Equivalent to the following CSS: height: 100%; width: 100%; |
| `heading` | `React$Node` | Heading for this panel. If this is anything other than a string then no padding is applied to the heading. |
| `children` | `React$Node` | Contents of the panel. |
| `padded` | `boolean` | Whether the panel header and body have padding. |
| `collapsable` | `boolean` | Whether the panel can be collapsed. Defaults to true |
| `collapsed` | `boolean` | Initial state for panel if it is collapsable |
| `accessory` | `React$Node` | Heading for this panel. If this is anything other than a string then no padding is applied to the heading. |
## PathBreadcrumbs
| Property | Type | Description |
|---------|------|-------------|
| `path` | `string` | |
| `isFile` | `boolean` | |
| `onClick` | `(path: string) => void` | |
## Popover
| Property | Type | Description |
|---------|------|-------------|
| `children` | `ReactNode` | |
| `onDismiss` | `Function` | |
| `forceOpts` | `Object` | |
## ResizeSensor
Listener for resize events.
| Property | Type | Description |
|---------|------|-------------|
| `onResize` | `(e: UIEvent) => void` | Callback when resize happened |
## FilterToken
| Property | Type | Description |
|---------|------|-------------|
| `filter` | `Filter` | |
| `focused` | `boolean` | |
| `index` | `number` | |
| `onFocus` | `(focusedToken: number) => void` | |
| `onBlur` | `() => void` | |
| `onDelete` | `(deletedToken: number) => void` | |
| `onReplace` | `(index: number, filter: Filter) => void` | |
## SearchableManagedTable
| Property | Type | Description |
|---------|------|-------------|
| `innerRef` | `(ref: React.ElementRef<*>) => void` | Reference to the table |
| `defaultFilters` | `Array<Filter>` | Filters that are added to the filterbar by default |
## Select
Dropdown to select from a list of options
| Property | Type | Description |
|---------|------|-------------|
| `className` | `string` | Additional className added to the element |
| `options` | `{ [key: string]: string, }` | Additional className added to the element |
| `onChange` | `(key: string) => void` | Callback when the selected value changes |
| `selected` | `?string` | Selected key |
| `label` | `string` | Label shown next to the dropdown |
| `grow` | `boolean` | Select box should take all available space |
## Sheet
Usage: <Sheet>{onHide => <YourSheetContent onHide={onHide} />}</Sheet>
| Property | Type | Description |
|---------|------|-------------|
| `children` | `(onHide: () => void) => ?React.Node` | Function as child component (FaCC) to render the contents of the sheet. A `onHide` function is passed as argument, that can be called to remove the sheet. |
| `setActiveSheet` | `(sheet: ActiveSheet) => any` | |
| `activeSheet` | `ActiveSheet` | |
## Sidebar
A resizable sidebar.
| Property | Type | Description |
|---------|------|-------------|
| `position` | `'left' ⎮ 'top' ⎮ 'right' ⎮ 'bottom'` | Position of the sidebar. |
| `width` | `number` | Default width of the sidebar. Only used for left/right sidebars. |
| `minWidth` | `number` | Minimum sidebar width. Only used for left/right sidebars. |
| `maxWidth` | `number` | Maximum sidebar width. Only used for left/right sidebars. |
| `height` | `number` | Default height of the sidebar. |
| `minHeight` | `number` | Minimum sidebar height. Only used for top/bottom sidebars. |
| `maxHeight` | `number` | Maximum sidebar height. Only used for top/bottom sidebars. |
| `backgroundColor` | `string` | Background color. |
| `onResize` | `(width: number, height: number) => void` | Callback when the sidebar size ahs changed. |
| `children` | `React$Node` | Contents of the sidebar. |
| `className` | `string` | Class name to customise styling. |
## StackTrace
Display a stack trace
| Property | Type | Description |
|---------|------|-------------|
| `children` | `Array<{ isBold?: boolean, library?: ?string, address?: ?string, caller?: ?string, lineNumber?: ?string, message?: ?string, }>` | |
| `reason` | `string` | Reason for the crash, displayed above the trace |
| `isCrash` | `boolean` | Does the trace show a crash |
| `padded` | `boolean` | Display the stack trace in a padded container |
| `backgroundColor` | `string` | Background color of the stack trace |
## TableHead
| Property | Type | Description |
|---------|------|-------------|
| `columnOrder` | `TableColumnOrder` | |
| `onColumnOrder` | `?(order: TableColumnOrder) => void` | |
| `columns` | `TableColumns` | |
| `sortOrder` | `?TableRowSortOrder` | |
| `onSort` | `?TableOnSort` | |
| `columnSizes` | `TableColumnSizes` | |
| `onColumnResize` | `?TableOnColumnResize` | |
## TableRow
| Property | Type | Description |
|---------|------|-------------|
| `columnSizes` | `TableColumnSizes` | |
| `columnKeys` | `TableColumnKeys` | |
| `onMouseDown` | `(e: SyntheticMouseEvent<>) => mixed` | |
| `onMouseEnter` | `(e: SyntheticMouseEvent<>) => void` | |
| `multiline` | `?boolean` | |
| `rowLineHeight` | `number` | |
| `highlighted` | `boolean` | |
| `row` | `TableBodyRow` | |
| `index` | `number` | |
| `style` | `?Object` | |
| `onAddFilter` | `TableOnAddFilter` | |
| `zebra` | `?boolean` | |
## Tabs
A Tabs component.
| Property | Type | Description |
|---------|------|-------------|
| `onActive` | `(key: ?string) => void` | Callback for when the active tab has changed. |
| `defaultActive` | `string` | The key of the default active tab. |
| `active` | `?string` | The key of the currently active tab. |
| `children` | `Array<React$Element<any>>` | Tab elements. |
| `orderable` | `boolean` | Whether the tabs can be reordered by the user. |
| `onOrder` | `(order: Array<string>) => void` | Callback when the tab order changes. |
| `order` | `Array<string>` | Order of tabs. |
| `persist` | `boolean` | Whether to include the contents of every tab in the DOM and just toggle its visibility. |
| `newable` | `boolean` | Whether to include a button to create additional items. |
| `onNew` | `() => void` | Callback for when the new button is clicked. |
| `before` | `Array<React$Node>` | Elements to insert before all tabs in the tab list. |
| `after` | `Array<React$Node>` | Elements to insert after all tabs in the tab list. |
## ToggleButton
Toggle Button.
**Usage**
```jsx
import {ToggleButton} from 'flipper';
<ToggleButton onClick={handler} toggled={boolean}/>
```
| Property | Type | Description |
|---------|------|-------------|
| `onClick` | `(event: SyntheticMouseEvent<>) => void` | onClick handler. |
| `toggled` | `boolean` | whether the button is toggled |
| `className` | `string` | |
## Tooltip
| Property | Type | Description |
|---------|------|-------------|
| `title` | `React$Node` | Content shown in the tooltip |
| `children` | `React$Node` | Component that will show the tooltip |
| `options` | `TooltipOptions` | |
## TooltipProvider
| Property | Type | Description |
|---------|------|-------------|
| `children` | `React$Node` | |
## ViewWithSize
| Property | Type | Description |
|---------|------|-------------|
| `onSize` | `(width: number, height: number) => any` | |
## VirtualList
| Property | Type | Description |
|---------|------|-------------|
| `data` | `Array<any>` | |
| `renderRow` | `(data: any, i: number) => any` | |
| `rowHeight` | `number` | |
| `overscanCount` | `number` | |
| `sync` | `number` | |
| `wrapInner` | `(data: any) => any` | |

13
docs/unterstanding-sonar.md
View File

@@ -1,13 +0,0 @@
---
id: understand
title: Understanding Flipper
sidebar_label: Understanding Flipper
---
The Flipper desktop app and the mobile native SDK establish an [rsocket](http://rsocket.io) connection which is used to send data to and from the device. Flipper does not make any restrictions on what kind of data is being sent. This enables a lot of different use-cases where you want to better understand what is going inside your app. For example you can visualize the state of local caches, events happening or trigger actions on your app from the desktop.
## Plugins
Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](logs-plugin.md), [Layout Inspector](layout-plugin.md) and [Network Inspector](network-plugin.md) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own.
A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [create a plugin](create-plugin.md). The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React.

163
website/i18n/en.json
View File

@@ -4,49 +4,130 @@
"next": "Next", "next": "Next",
"previous": "Previous", "previous": "Previous",
"tagline": "Extensible mobile app debugging", "tagline": "Extensible mobile app debugging",
"background-plugin-jsside": "Background Plugin Setup", "docs": {
"Background Plugin": "Background Plugin", "communicating": {
"communicating": "Device Communication", "title": "Device Communication",
"Device Communication": "Device Communication", "sidebar_label": "Device Communication"
"create-plugin": "Mobile Setup", },
"Mobile Setup": "Mobile Setup", "create-plugin": {
"create-table-plugin": "Create Table Plugin", "title": "Mobile Setup",
"Create Table Plugin": "Create Table Plugin", "sidebar_label": "Mobile Setup"
"error-handling": "Error Handling", },
"Error Handling": "Error Handling", "create-table-plugin": {
"establishing-a-connection": "Establishing a connection", "title": "Create Table Plugin",
"Establishing a connection": "Establishing a connection", "sidebar_label": "Create Table Plugin"
"getting-started": "Getting Started", },
"Getting Started": "Getting Started", "custom-ports": {
"js-setup": "JavaScript Setup", "title": "Running Flipper with different ports",
"JavaScript Setup": "JavaScript Setup", "sidebar_label": "Using different ports"
"layout-plugin": "Layout Inspector", },
"leak-canary-plugin": "LeakCanary", "error-handling": {
"logs-plugin": "Logs", "title": "Error Handling",
"network-plugin": "Network", "sidebar_label": "Error Handling"
"sandbox-plugin": "Sandbox", },
"send-data": "Sending Data to Plugins", "establishing-a-connection": {
"Send Data": "Send Data", "title": "Establishing a connection",
"shared-preferences-plugin": "Shared Preferences", "sidebar_label": "Establishing a connection"
"stetho": "Stetho Guidance", },
"Stetho Guidance": "Stetho Guidance", "features/crash-reporter-plugin": {
"styling-components": "Styling Components", "title": "Crash Reporter"
"Styling Components": "Styling Components", },
"testing": "Testing", "features/index": {
"Testing": "Testing", "title": "Features"
"troubleshooting": "Troubleshooting Issues", },
"Troubleshooting Issues": "Troubleshooting Issues", "features/layout-plugin": {
"ui-components": "UI Components", "title": "Layout Inspector"
"UI Components": "UI Components", },
"understand": "Understanding Flipper", "features/leak-canary-plugin": {
"Understanding Flipper": "Understanding Flipper", "title": "LeakCanary"
},
"features/logs-plugin": {
"title": "Logs"
},
"features/network-plugin": {
"title": "Network"
},
"features/sandbox-plugin": {
"title": "Sandbox"
},
"features/share-flipper-data": {
"title": "Share Flipper Data"
},
"features/shared-preferences-plugin": {
"title": "Shared Preferences"
},
"getting-started": {
"title": "Getting Started"
},
"js-setup": {
"title": "JavaScript Setup",
"sidebar_label": "JavaScript Setup"
},
"send-data": {
"title": "Sending Data to Plugins",
"sidebar_label": "Send Data"
},
"setup/crash-reporter-plugin": {
"title": "Crash Reporter Setup",
"sidebar_label": "Crash Reporter"
},
"setup/layout-plugin": {
"title": "Layout Inspector Setup",
"sidebar_label": "Layout Inspector"
},
"setup/leak-canary-plugin": {
"title": "LeakCanary Setup",
"sidebar_label": "LeakCanary"
},
"setup/network-plugin": {
"title": "Network Setup",
"sidebar_label": "Network"
},
"setup/sandbox-plugin": {
"title": "Sandbox Setup",
"sidebar_label": "Sandbox"
},
"setup/shared-preferences-plugin": {
"title": "Shared Preferences Setup",
"sidebar_label": "Shared Preferences"
},
"stetho": {
"title": "Stetho Guidance",
"sidebar_label": "Stetho Guidance"
},
"styling-components": {
"title": "Styling Components",
"sidebar_label": "Styling Components"
},
"testing": {
"title": "Testing",
"sidebar_label": "Testing"
},
"troubleshooting": {
"title": "Troubleshooting Issues",
"sidebar_label": "Troubleshooting Issues"
},
"ui-components": {
"title": "UI Components",
"sidebar_label": "UI Components"
},
"writing-a-plugin": {
"title": "Writing a plugin in JavaScript",
"sidebar_label": "Writing a plugin"
}
},
"links": {
"Features": "Features",
"Docs": "Docs", "Docs": "Docs",
"GitHub": "GitHub", "GitHub": "GitHub"
},
"categories": {
"Features": "Features",
"Using Flipper": "Using Flipper", "Using Flipper": "Using Flipper",
"Built-in Plugins": "Built-in Plugins", "Plugin Setup": "Plugin Setup",
"Plugins: Desktop part": "Plugins: Desktop part", "Plugin Development": "Plugin Development",
"Plugins: Mobile part": "Plugins: Mobile part", "Advanced Usage": "Advanced Usage"
"Flipper Internals": "Flipper Internals" }
}, },
"pages-strings": { "pages-strings": {
"Help Translate|recruit community translators for your project": "Help Translate", "Help Translate|recruit community translators for your project": "Help Translate",

39
website/sidebars.json
View File

@@ -1,36 +1,43 @@
{ {
"features": {
"Features": [
"features/index",
"features/logs-plugin",
"features/layout-plugin",
"features/network-plugin",
"features/sandbox-plugin",
"features/shared-preferences-plugin",
"features/leak-canary-plugin",
"features/crash-reporter-plugin",
"features/share-flipper-data"
]
},
"docs": { "docs": {
"Using Flipper": [ "Using Flipper": [
"getting-started", "getting-started",
"understand",
"stetho",
"share-flipper-data", "share-flipper-data",
"troubleshooting" "troubleshooting"
], ],
"Built-in Plugins": [ "Plugin Setup": [
"logs-plugin", "setup/layout-plugin",
"layout-plugin", "setup/network-plugin",
"network-plugin", "setup/sandbox-plugin",
"sandbox-plugin", "setup/shared-preferences-plugin",
"shared-preferences-plugin", "setup/leak-canary-plugin",
"leak-canary-plugin", "setup/crash-reporter-plugin"
"crash-reporter-plugin"
], ],
"Plugins: Desktop part": [ "Plugin Development": [
"js-setup", "js-setup",
"writing-a-plugin", "writing-a-plugin",
"create-table-plugin", "create-table-plugin",
"communicating", "communicating",
"ui-components", "ui-components",
"styling-components" "styling-components",
],
"Plugins: Mobile part": [
"create-plugin", "create-plugin",
"send-data", "send-data",
"error-handling", "error-handling",
"testing" "testing"
], ],
"Flipper Internals": ["establishing-a-connection"], "Advanced Usage": ["custom-ports", "establishing-a-connection", "stetho"]
"Advanced Usage": ["custom-ports"]
} }
} }

4
website/siteConfig.js
View File

@@ -13,8 +13,8 @@ const siteConfig = {
baseUrl: '/' /* base url for your project */, baseUrl: '/' /* base url for your project */,
projectName: 'flipper', projectName: 'flipper',
headerLinks: [ headerLinks: [
{doc: 'getting-started', label: 'Getting Started'}, {doc: 'features/index', label: 'Features'},
{doc: 'understand', label: 'Docs'}, {doc: 'getting-started', label: 'Docs'},
{href: repoUrl, label: 'GitHub'}, {href: repoUrl, label: 'GitHub'},
], ],
editUrl: 'https://github.com/facebook/flipper/blob/master/docs/', editUrl: 'https://github.com/facebook/flipper/blob/master/docs/',

5
website/static/css/custom.css
View File

@@ -364,3 +364,8 @@ footer iframe {
border-left: 4px solid rgb(241, 196, 15); border-left: 4px solid rgb(241, 196, 15);
padding: 12px; padding: 12px;
} }
.navListItem a[href='/docs/features/index.html'] {
/* Hide sidebar link to "Features"-pages, because it is linked in header */
display: none !important;
}