Files
flipper/docs/extending/layout-inspector.md
Pascal Hartig df46c0c63e Add extending Layout Inspector docs
Summary:
Please give feedback on the sidebar placement.

This is only the Android part. I'll put up a second diff copying the iOS thing over
but hope someone can commandeer that and check for accuracy.

Reviewed By: priteshrnandgaonkar

Differential Revision: D15181454

fbshipit-source-id: d32081feefbfb0ffc38890e835a7d5f6b78667ab
2019-05-02 08:44:44 -07:00

2.3 KiB

id, title
id title
layout-inspector 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

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

class ViewGroupDescriptor extends ViewDescriptor<ViewGroup> {
  public String getName(ViewGroup node) {
    return super.getName(node);
  }
}

Do

class ViewGroupDescriptor extends NodeDescriptor<ViewGroup> {
  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.

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.