Summary:
Added stream interecptor which gets a chance to augment the messages off the wire. Stream interceptor transformations are async and can fail due to network errors so added error state with a retry button. The retry button will just call the function again.
I am also handling errors better generally when this method fails unexpectedly, logging more clearly what went wrong and communicating it to the user
Did some refactoring of subtree update event to support this
Reviewed By: lblasa
Differential Revision: D44415260
fbshipit-source-id: a5a5542b318775b641d53941808399a8fa4634d3
Summary: This is no longer needed or sent by the client given our new approach to frames
Reviewed By: antonk52
Differential Revision: D44872566
fbshipit-source-id: 9ec340a5cc68605f730cf6677fb89778bf77a3a1
Summary:
Track:
- Element selected. Include name and tags. Useful to understand what type of elements engineers are selecting in a hierarchy i.e. ui framework, element type, etc.
- Element focused. Same as above.
- Context menu usage
Reviewed By: LukeDefeo
Differential Revision: D44294618
fbshipit-source-id: f2b9642e70818e8a382bbbddc28115a40734dfe8
Summary:
Current metrics are deltas from an initial set timestamp. This works but is limiting or affecting the overall accuracy of them.
The aim of this task is to replace the deltas with actual measurements for the operations.
This way we can add/remove operations in between which will not create any impact of them.
Reviewed By: LukeDefeo
Differential Revision: D44026823
fbshipit-source-id: fd7d62c4eab86bab8239b44beecd5c133f6d11c7
Summary: Framework events was added recently so no garentueed to always be on all clients. Should fix T145084769
Reviewed By: mweststrate
Differential Revision: D44064430
fbshipit-source-id: 5dab14a7de5815a25cf8fe7bfa485a6a57d60071
Summary:
Previously If you set the visualiser too wide, the height adjusts with the aspect ratio and the bottom was cut off and there was no way to scroll. Have added a scrollbar if it exceeds the available height
Also the width state was promoted to an atom so the users resize amount is preserved when moving between plugins
A better solution might be to prevent the visualiser from getting too wide for the available hieght but it get complex when the window resizes.
Reviewed By: lblasa
Differential Revision: D43351294
fbshipit-source-id: f618a69ed025214593a74b952ce75c5fd98447cd
Summary: Previously when selecting from the visualiser nothing would happen in the tree if one of the parents was collapsed
Reviewed By: lblasa
Differential Revision: D43318177
fbshipit-source-id: 7bf9296dec2ca82e3f983b4cf2676ea8741a9d0e
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:
Previously we were checking the framework events stream for any new events and populating the map from that. Now we expect the init event to contain event types.
This allows us to know if the app supports framework event and therefore we dont show the controls to monitor it. Additionally we can fully populate the event monitoring dialog
Reviewed By: lblasa
Differential Revision: D42996552
fbshipit-source-id: 7850ada53d0630ba102af6c0d74d9d904f75eada
Summary:
Listen to framework events and store in a map based on node id
Added UI to allow for monitoring framework event types.
The event type is a string separated by : Each segment of this string represents a level in the dialog hierachy. For example Litho:Layout:StateUpdateSync would have levels, Litho Layout StateUpdateSync
When event type monitored and event comes in for a node flash the visualiser node briefly
Reviewed By: lblasa
Differential Revision: D42074988
fbshipit-source-id: 52458ad87ab84bf7b1749e87be516ed73106a6c0
Summary:
^
Only for iOS this time.
Note: passing the device OS freely to the main component as this is just temporary code that will be deleted soon.
Reviewed By: antonk52
Differential Revision: D42990221
fbshipit-source-id: 41b4107caa6bf312191889af75afd28873f6eda5
Summary: The call to myles was a little slow and very cachable so use react query. Additionally it depends on VPN / light so added an error state to make that clear.
Reviewed By: lblasa
Differential Revision: D42990344
fbshipit-source-id: 8d6ad20aea79f1972a7cf1f61f8af729e5f3464f
Summary: this assumption doesnt hold true for android as the snapshot is of the decor view and app bounds include the status bar / bottom bar
Reviewed By: elboman
Differential Revision: D42035810
fbshipit-source-id: 177b5d086487a940e0bdbe20c2a001c420a08d69
Summary:
1. only useValue from tree root
2. Pass down props for ui state instead subscribing ad hoc
3. Pass down callbacks, instead of updating atoms ad hoc.
4. Create ui actions object holding api, will use this later on in the vizualizer as some of the same
In general its more verbose but with memoizing perf should be fine should hopefully be easier to reason about components and what they can do as things are more explicit
Hopefully this serves as a general template for how to organise the react code going forward
Reviewed By: lblasa
Differential Revision: D41872490
fbshipit-source-id: 94a33b0e951c04df367ba102fa0a097d4a0389cd
Summary: The old implementation would always rerender on every operation (select, hover etc) and was quite slow for large hierachies
Reviewed By: lblasa
Differential Revision: D41838166
fbshipit-source-id: 1270841027926440a9c1f1a846d3aedc75ffe8bf
Summary: also made the controls component full width to push down the visualiser
Reviewed By: lblasa
Differential Revision: D41548665
fbshipit-source-id: 2bca527e70c92bc0ded120e51a0880f76f7cca87
Summary: If you focus a node and then move activity then the focused nodes will no longer be active. this means that they are automatically collapsed in the tree and the visualizer wont be display it. Previously we didnt spot this and the focus state was wrong. Now we check that all parents are active whenever an update comes from client, if the focused node is no longer active after an update then we remove the focus
Reviewed By: lblasa
Differential Revision: D41548250
fbshipit-source-id: d536e0c466d9002fc53bcb43b9b29c7c7fa23ad2
Summary: There are some situations where we are doing a traversal of the entire node hierachy looking for something. In some situtations this linear search can be replaced with a walk up the anchestory path making the code easier to understand and more efficient
Reviewed By: lblasa
Differential Revision: D41548253
fbshipit-source-id: 4fb2141282f1f9663835c3b7812d30dcc59b707e
Summary: There were a few subtleties around what to the auto expanding / collapsing for active children but otherwise this is quite straightforward
Reviewed By: lblasa
Differential Revision: D41548252
fbshipit-source-id: c153d00210d859463a51753dadf2e5aabeb7ea35
Summary: Should be a bit easier to see what UI state we are holding at the plugin instance level
Reviewed By: lblasa
Differential Revision: D41498272
fbshipit-source-id: 6d88086766efd9c39f71be7e2ce32c5058494c96
Summary: Mouse over event still fires for the dom nodes behind the context menu modal. This will cause state changes and rerenders. Some of the state the context menu depends on can change so it would cause the context menu items to change while its stil open. Now we dont fire those hover state changes while context menu active
Reviewed By: lblasa
Differential Revision: D41494947
fbshipit-source-id: 17918f15d74230d9c7070a4de7a0a0ce10a08001
Summary: Added context menu to tree nodes that 'focuses' a node. This will make the node the root of the tree. Focus state can be removed again via context menu but we could add a permanent button in the future
Reviewed By: lblasa
Differential Revision: D41493002
fbshipit-source-id: 43ec7a25aeea0b169cbcbb1ac20ac22ea893fee2
Summary: In order to support focus mode we need to have only 1 snapshot. In practice this is the case but we are making this more apparant in this diff.
Reviewed By: lblasa
Differential Revision: D41493003
fbshipit-source-id: 19ed7213d15adaea4732f4ec60309efa8dae6f94
Summary: Out of the box the library search has some issues. when search matches it steals focus from the input. Eventually we want to customise the rendering of the tree items anyway so this lays the foundation for taht
Reviewed By: antonk52
Differential Revision: D41336524
fbshipit-source-id: 194f67023edd0675cd9bd8d6134260439c6b2785
Summary:
There are situations where multiple siblings overlap and they are both hit. Previously we picked the first one in the hierachy. Now we produce a list of hit children. The list will not have 2 nodes in the same ancestor path.
We store the hovered nodes as a list as we may want to present a modal in future to ask user which node they indented to select. That said simply sorting nodes by area seems to give decent results so we can start with this
Reviewed By: lblasa
Differential Revision: D41220271
fbshipit-source-id: 643a369113da28e8c4749725a7aee7aa5d08c401
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
