Summary:
As events get bigger, this change includes the following:
- Dedicated event inspector
- Stacktrace viewer for events with stacktrace attribution
- Stacktrace viewer is displayed within a new BottomPanel. BottomPanel can display any React component and can be reused in the future in different use cases.
Reviewed By: LukeDefeo
Differential Revision: D44628768
fbshipit-source-id: 71a9ef87e71c9a17f58c2544a1aa356eed14ed27
Summary: Leverage the properties prop of `TimelineDataDescription`. Whenever an event is selected, the event payload is shown as the event properties.
Reviewed By: antonk52
Differential Revision: D44497058
fbshipit-source-id: 09782d583957a0df8c3efd3f5a62af6b321a26e3
Summary: Because Tabs now depend on the selected node (i.e. some nodes have events, some don't) they need to use a key.
Reviewed By: antonk52
Differential Revision: D44624658
fbshipit-source-id: 693983f6a82c090adae3a2e009873d903626ab75
Summary:
The current event label used the event type. The type in itself can have this shape:
`ck:willMountComponent`
The event name is just 'willMountComponent'.
So, extract that piece of data instead.
Reviewed By: aigoncharov
Differential Revision: D43983728
fbshipit-source-id: e232b59cfe3eb0710e56fc9ba7f94b644b07ee74
Summary:
Add a frameworks events tab. This is currently using the `TimelineDataDescription` component which may ultimately be replaced by something more sophisticated.
In the meanwhile, this does the job of chronologically displaying events with a label.
Reviewed By: mweststrate
Differential Revision: D43948891
fbshipit-source-id: 31ebf8a1d0e126856c3aa5291a1a06d7f2547233
Summary:
For the visualiser we use the same trick as with the hover state. We subscribe to selection changes and only render if the prev or new state concerns us.
For the tree we change from object identity to the node id + and indent guide are added to the memoisation equal check.
Depending on teh change this tree memoisation can vary in effectiveness. If you go from nothing selecting to selecting the top element nothing is memoised since react needs to render every element to draw the indent guide. If you have somethign selected and select a nearby element the memoisation works well.
There are ways to improve this more down the road
changelog: UIDebugger improve performance of selecting nodes
Reviewed By: lblasa
Differential Revision: D43305979
fbshipit-source-id: 5d90e806ed7b6a8401e9968be398d4a67ed0c294
Summary:
This change addresses some obvious issues which made the ui-debugger unusable with dark mode on.
There may more things that need changing, but at the very least this should be a good place to start.
Reviewed By: fabiomassimo
Differential Revision: D43083218
fbshipit-source-id: 8e4338b79178d3a0f05f9bcaffa2fc6f35eb0e21
Summary:
Before this change, attributes and attribute metadata were intermingled and sent as one unit via subtree update event.
This represented a few issues:
- Repetitiveness. For each declared and dynamic attribute, metadata was included on each value unit.
- Metadata can vary in size and thus can have a negative impact on payload size.
- The attribute name which is part of metadata is a string which always overhead on processing.
- Metadata instantiation is not cheap thus this also incurs in processing overhead i.e. even instantiating a single string can have an impact.
The proposal is to separate metadata of attributes from the actual node reported attributes. This solves the problems mentioned above.
Reviewed By: LukeDefeo
Differential Revision: D40674156
fbshipit-source-id: 0788551849fbce53065f819ba503e7e4afc03cc0
Summary:
Replace draft inspectors with read-only components.
This is a first step into having a richer UI. At the moment, these are read-only components but will likely be extended in the future as to allow editing of values.
Reviewed By: LukeDefeo
Differential Revision: D40345016
fbshipit-source-id: a6aef5861474b4aa8353c00ef257ab17b4cff00e
Summary:
^
This laids the foundation for the inspector. It just reorganises a few bits.
Reviewed By: LukeDefeo
Differential Revision: D40319611
fbshipit-source-id: 8cf9b151c631faa1f26a7a6dfaa86b01abc42fe5
