Summary:
The Dom events for the divs that are very close together were not firing correctly causing the old implementation to not track the hovered node correctly. This was really frustrating trying to select a node amongst many close neighbours.
The new approach uses the mouse x,y position and performs a hit test. Currently we do a dfs looking for the first deepest child that interests the mouse x,y. In a future diff we will extract a list when there are multiple candidates.
Hovered node was removed from react props since both the tree and visualisor depend on it meaning when hover state changes the whole app is rerendered. Instead we have moved hover state to an atom which is subscribed to by each visualsation node. Only if the old or new value matches the particular nodes id do we set state. The viz nodes were memo'd to prevent children renderning. The result is that for a hover change at most 2 nodes out of the 500 or so will rerender.
I attempted to do the same with the tree but it wasnt working with the controlled tree environment + focus state. The perf seems fine as is so will leave it for now
Reviewed By: lblasa
Differential Revision: D41218324
fbshipit-source-id: 7f80bcee256abad2689a88d7e209f92417aab672
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:
Flipper plugins fail when importing css from third-party dependencies. This diff tries to fix that.
Effectively, the plugin can import the css and export it when is bundled.
When we load the plugin, we check if there's a css file for it. If there's one, we return it and try to use it.
Reviewed By: aigoncharov
Differential Revision: D40758178
fbshipit-source-id: e53afffcc481504905d5eeb1aea1f9114ee2a86b
Summary:
Upgraded from ant tree library to the much more capable React complex tree. Added the following:
1. Ability to expand / collapse nodes while automatically expanding / collapsing active/inactive children when they change
2. Keyboard controls of tree all the time
3. Basic search functionality
4. Selecting node in tree focuses and scrolls in the tree
5. Hover state for tree
Reviewed By: lblasa
Differential Revision: D40633876
fbshipit-source-id: 8dcef5ec2c277e476a3eb3cdaef62b15c25323c0
Summary: It didnt need to exist and can be seen as a subtree update of type full scan
Reviewed By: lblasa
Differential Revision: D39731552
fbshipit-source-id: e351413d9480e118fc000c5e55eae0e7980233f2
Summary:
^
This change allows to take different snapshots for different nodes and render them each on the visualiser.
At the moment, more than likely, this is not really used. At the same time, it fixes an issue whereas any subtree update can override and set the only visible snapshot.
Reviewed By: LukeDefeo, antonk52
Differential Revision: D39821920
fbshipit-source-id: ab8f6a4a2a5e96801c951a4e3009cc571a617f22
Summary:
^
TODO: the snapshot corresponds to the referring subtree update. However, the snapshot is getting applied as if it was the current top view of the running app. This is true in most cases but it doesn't for some. To solve this, we need to use the rootId for the subtree and apply the snapshot only if appropriate.
Having said that, is good enough for the current submission as we keep iterating on it.
Reviewed By: LukeDefeo
Differential Revision: D39813307
fbshipit-source-id: 33b6aff6e9dd085934150ebd2f247062447a59ff
Summary: Split our the mega component into separate parts in preparation for the visualizer
Reviewed By: lblasa
Differential Revision: D39509406
fbshipit-source-id: 0f867c1f8a91b7592673ae47ba2b5db4f3500732
Summary: While looking at the event stream it is useful to know which observer type fired it
Reviewed By: lblasa
Differential Revision: D39430756
fbshipit-source-id: bc52f085a5497692f8076b12a9c015cc33a19d1e
Summary:
Added concept of a tree observer which is responsible for listening to the changes for a portion of the UI tree. This structure nests so Tree observers can hold child tree observers which emit events on a different cadence. This structure should allow us to incorporate different UI frameworks down the road as well as native android views.
We push the tree updates from the tree observers onto a channel and setup a coroutine to consume this channel, serialize and send down the wire.
Reviewed By: lblasa
Differential Revision: D39276681
fbshipit-source-id: a4bc23b3578a8a10b57dd11fe88b273e1ce09ad8
Summary: Added scheduler to scan the Native UI every 500 ms to test, Also added instrumentation in a separate event with the timings of each stage visualised in a Data table on desktop which can be accessed with ctrl+I. Currently this instrumentation event is sent every time but it could be a config option controlled from the desktop in the future
Reviewed By: lblasa
Differential Revision: D39205313
fbshipit-source-id: ca034171db6b062396b4ef28028aaa663c4d852a
Summary: Move from a nested structure to a flatten one for data exchange, this will allow us to only send sections of the UI in the future
Reviewed By: lblasa
Differential Revision: D38982138
fbshipit-source-id: d578a07a6d2d7e117fbd741bd6e33062223ce10d
Summary: A very basic tree in Antd to visualise the UI
Reviewed By: lblasa
Differential Revision: D38977035
fbshipit-source-id: f9bbf765ea8027eeb263cad86407502c6a5779dd
Summary:
Scaffolded desktop UI for UI debugger
I changed getroot from an rpc call to an event sent on connect. The root should never change as its the application object.
Reviewed By: lblasa
Differential Revision: D38866008
fbshipit-source-id: ca0f1908bedb643238f11ed796922e3359619167
