diff --git a/docs/assets/layoutinspector.png b/docs/assets/layoutinspector.png new file mode 100644 index 000000000..2164f8f7e Binary files /dev/null and b/docs/assets/layoutinspector.png differ diff --git a/docs/extending/layout-inspector.md b/docs/extending/layout-inspector.md new file mode 100644 index 000000000..a08331278 --- /dev/null +++ b/docs/extending/layout-inspector.md @@ -0,0 +1,53 @@ +--- +id: layout-inspector +title: Extending Layout Inspector +--- + +The Layout Inspector plugin can be extended to support new kinds of UI components. You can also extend it to customize the data made available in the sidebar. +Depending on whether you want to expose new data on Android or iOS, there are different interfaces you can use. + +![Layout Inspector](/docs/assets/layoutinspector.png) + +## Android + +### Node Descriptor +To expose an object to the Layout Inspector in Flipper you have to implement a `NodeDescriptor` which describes your object. For example the `ViewDescriptor` describes `View` objects and the `FragmentDescriptor` describe `Fragment` instances. These descriptors have a set of callbacks used to expose children and data associated with the object they describe. See [`NodeDescriptor`](https://github.com/facebook/flipper/blob/b0d2983bd440dc41ec67089e11acd394e6566b8f/android/src/main/java/com/facebook/flipper/plugins/inspector/NodeDescriptor.java) for the full API. + +`NodeDescriptor` implementations should not subclass other `NodeDescriptor` implementations. Instead to re-use existing behavior from a more generic descriptor, you should prefer to use delegate. + +**Don't** + +```java +class ViewGroupDescriptor extends ViewDescriptor { + public String getName(ViewGroup node) { + return super.getName(node); + } +} +``` + +**Do** + +```java +class ViewGroupDescriptor extends NodeDescriptor { + public String getName(ViewGroup node) { + NodeDescriptor descriptor = descriptorForClass(View.class); + return descriptor.getName(node); + } +} +``` + +### Register a Descriptor + +Register your descriptor in the `DescriptorMapping` used to instantiate the `InspectorFlipperPlugin`. + +```java +final FlipperClient client = FlipperClient.createInstance(mContext); +final DescriptorMapping descriptorMapping = DescriptorMapping.withDefaults(); +descriptorMapping.register(MyObject.class, new MyObjectDescriptor()); +client.addPlugin(new InspectorFlipperPlugin(mContext, descriptorMapping)); +``` + +### Extending an existing Descriptor + +You may not need to create a whole new descriptor but instead you may just want to change extend an existing one to expose some new piece of data. In that case just locate the correct descriptor and edit its `getData`, `getAttributes` and perhaps `setData` methods. + diff --git a/website/i18n/en.json b/website/i18n/en.json index 137dfad26..c2db0a894 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -34,6 +34,9 @@ "extending/js-setup": { "title": "JavaScript Setup" }, + "extending/layout-inspector": { + "title": "Extending the Layout Inspector" + }, "extending/new-clients": { "title": "Implementing a Flipper Client" }, diff --git a/website/sidebars.json b/website/sidebars.json index 377c01f7e..981985ea1 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -29,7 +29,7 @@ "Advanced Usage": ["custom-ports", "stetho"] }, "extending": { - "Extending Flipper": ["extending/index"], + "Extending Flipper": ["extending/index", "extending/layout-inspector"], "Plugin Development": [ "extending/js-setup", "extending/writing-a-plugin",