Move plugin docs to plugin folders

Summary: Moved plugin documentation and related assets to plugin folders, fixed links and configured redirects where required. Now these docs are used for both showing docs in Flipper and generating Flipper docs website.

Reviewed By: passy

Differential Revision: D29465567

fbshipit-source-id: 3ec4240b215b0d5baea5154f64266a9ba7ead3a5
This commit is contained in:
Anton Nikolaev
2021-06-29 17:39:37 -07:00
committed by Facebook GitHub Bot
parent 4ad7a70ee3
commit 039d3a4a08
24 changed files with 47 additions and 192 deletions

View File

@@ -0,0 +1,27 @@
import useBaseUrl from '@docusaurus/useBaseUrl';
The images plugin allows you to inspect what images were fetched, where they are
coming from and selectively clear caches. Currently, the plugin supports
[Fresco](https://github.com/facebook/fresco/) as backend.
<img alt="Images plugin" src={useBaseUrl("img/images-plugin.png")} />
## Cache Inspector
Images are grouped by the different caching layers they are stored in. The current
fill rate of the cache is shown and you can choose to selectively clear caches.
## Attribution
Images can be annotated with attributes that can help to determine the context in
which an image was loaded and displayed. You can use that information to filter
by a particular surface or only inspect images that are in the critical path
of your application, for instance during cold start.
## Leak Tracking
Dealing with large resources can require special APIs to be used that circumvent
usual garbage collection. The plugin allows tracking `CloseableReference`s for
Fresco on Android that weren't properly closed, which can help you improve
the performance of your app.

View File

@@ -0,0 +1,93 @@
Currently, the images plugin only supports [Fresco](https://frescolib.org/) for Android as backend, but just like the network plugin, support for other image loading libraries
could easily be added. Send us a PR!
## Fresco and Android
The Fresco images plugin is shipped as a separate Maven artifact:
```groovy
dependencies {
debugImplementation 'com.facebook.flipper:flipper-fresco-plugin:0.30.1'
}
```
After including the plugin in your dependencies, you can add it to the
client:
```java
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
client.addPlugin(new FrescoFlipperPlugin());
```
The `FrescoFlipperPlugin` constructor offers a whole lot of configuration options which
can be useful if you have an advanced setup of Fresco in your application:
```java
FrescoFlipperPlugin(
DebugImageTracker imageTracker,
PlatformBitmapFactory bitmapFactory,
@Nullable FlipperObjectHelper flipperObjectHelper,
DebugMemoryManager memoryManager,
FlipperPerfLogger perfLogger,
@Nullable FrescoFlipperDebugPrefHelper debugPrefHelper,
@Nullable CloseableReferenceLeakTracker closeableReferenceLeakTracker) { ... }
```
### Leak Tracking
The Flipper plugin can help you track down `CloseableReferences` who have not had
`close()` called on them. This can have a negative impact on the performance of
your application.
To enable this functionality, you need to create a `CloseableReferenceLeakTracker`
and set it in both your `ImagePipelineConfig` for Fresco and the `FrescoPluginPlugin`
on creation.
```java
import com.facebook.imagepipeline.debug.FlipperCloseableReferenceLeakTracker;
// ...
FlipperCloseableReferenceLeakTracker leakTracker = new FlipperCloseableReferenceLeakTracker();
new ImagePipelineConfig.Builder()
// ...
.setCloseableReferenceLeakTracker(leakTracker)
.build();
client.addPlugin(new FrescoFlipperPlugin(
new FlipperImageTracker(),
Fresco.getImagePipelineFactory().getPlatformBitmapFactory(),
null,
new NoOpDebugMemoryManager(),
new NoOpFlipperPerfLogger(),
null,
leakTracker));
```
### Attribution
In order to annotate images with the context they are used in, you have to set a
caller context when loading the image. This can be any object, so for the simplest
case, a String will suffice.
```java
String callerContext = "my_feature";
// For DraweeViews:
draweeView.setImageURI(uri, callerContext);
// For prefetching:
ImagePipeline imagePipeline = Fresco.getImagePipeline();
imagePipeline.prefetchToDiskCache(imageRequest, callerContext);
// For manually fetching an image:
DataSource<CloseableReference<CloseableImage>>
dataSource = imagePipeline.fetchDecodedImage(imageRequest, callerContext);
```
If a caller context is supplied, the image will be properly attributed in the
Flipper image plugin.