docs: add features page

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

docs/features/crash-reporter-plugin.md

@@ -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)

docs/features/index.md

@@ -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.

docs/features/layout-plugin.md

@@ -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.

docs/features/leak-canary-plugin.md

@@ -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.

docs/features/logs-plugin.md

@@ -0,0 +1,18 @@
+---
+id: logs-plugin
+title: Logs
+---
+
+The Logs plugin shows device logs, without any additional setup. This is a device plugin, meaning that it is not tied to any specific app and there is no additional setup needed to see the logs.
+
+![Logs plugin](/docs/assets/logs.png)
+
+## Filtering
+
+The search bar can be used to search for logs and filter for certain types. From the context menu on the table headers you can show more infos like timestamp, PID or TID. Click on a tag, PID or TID in the table to filter only for logs with the same value.
+
+## Expression watcher
+
+The expression watcher in the sidebar can be used to watch for certain logs to happen and count how often the occur. An expression can be a simple string, or a regular expression which is matched against the logs.
+
+When the notify checkbox is enabled, Flipper will send notifications once the log is happening. This let's you know when the watcher triggered, even if Flipper is in the background.

docs/features/network-plugin.md

@@ -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.

docs/features/sandbox-plugin.md

@@ -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.

docs/features/share-flipper-data.md

@@ -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.

docs/features/shared-preferences-plugin.md

@@ -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.