Summary:
Following feedback when using keyboard controls its a little bit awkward to have to move with arrows and then select with enter.
Now when using keyboard controls you are manipulating the selected state.
Enter still selects / unselects but its not really needed anymore
When using the mouse the hover state is still there
Changelog: [UIDebugger] Using keyboard arrow control changes the selected and hovered state together for faster / easier navigation
Reviewed By: lblasa
Differential Revision: D47212492
fbshipit-source-id: 996196880d623885b4d4b7d1a70954201f809d28
Summary:
To avoid showing the Ugly spinner in the context menu as well as a better UX we prefetch the IDE resolved path. It was important to limit the concurrency of the running arc jobs otherwise lots of bad things happen and the whole machine stalls out.
The general idea is as the frame comes off the wire we send them to react query to prefetch. by setting the cache time sending the same key twice will not result in 2 fetches, so we dont need to worry about deduplication on our side
Reviewed By: antonk52
Differential Revision: D47210292
fbshipit-source-id: 4a1d8efdfae754c1a73c6a868b02d1f3a0a5b567
Summary: Im concerned that we are gettign disconnected without realising, this should help with the logs
Reviewed By: lblasa
Differential Revision: D47053321
fbshipit-source-id: 1014a3e856517e234f0f79f2a4692f18397fc457
Summary: This will hopefully be useful for prod debugging where we have users with no data,
Reviewed By: lblasa
Differential Revision: D47053328
fbshipit-source-id: 37ecce885ebd93bf2ffdd67cf49cf33255dda429
Summary: Previously there was no way to get of this state
Reviewed By: aigoncharov
Differential Revision: D46803900
fbshipit-source-id: 2eb0eb41b58064659ef1d2cff245a2b8d7e2f261
Summary: There was an issue with cropping introduce by virtualisation and the position of the scroll view in the hierachy. Its a bit fragile but it works now.
Reviewed By: lblasa
Differential Revision: D46761831
fbshipit-source-id: ce001c6f4fe7ddc111edf0098f75a1273c84472d
Summary:
Following feedback from https://fb.workplace.com/groups/443457641253219/permalink/587444816854500/
When pressing left arrow and is already collapse goes to parent, when pressing right arrow and is expanded will go to first child. this mimics behaviours in mac os and other ides.
Also refactored kb scroll to use row virtualiser instead of dom refs
I also fixed the kb scroll hijacking, previously we were using a setTimeout, if you held a key down for a long time then the timeout would fire and the mouse enter event would briefly fire causing the hover position to jump. I now use a more robust approach were we just reserve the focus input for 250ms from the keyboard input, each time the key is held this reservation is extended slightly.
Changelog: UIDebugger, pressing left arrow jumps to parent after collapse. Pressing right arrow enters after expand. Similar to file browsers in IDES
Reviewed By: aigoncharov
Differential Revision: D46760448
fbshipit-source-id: da45d81056aa070be84b2db972400d650b86a172
Summary:
There were a small number of styles / attributes that were missing, this addresses this.
Similar to the bloks minification map there are some special hardcoded reserved ids, if that doesnt work then you can look into a special place for each style
I also refactored the transform metadata method as it was getting very nested and hard to understand.
Reviewed By: aigoncharov
Differential Revision: D46799392
fbshipit-source-id: 8de8a2740f45ddb23a1bc9abb7bb36f969cf1fbb
Summary: Feedback from michel, It is always empty for android so dont show it
Reviewed By: elboman
Differential Revision: D46152985
fbshipit-source-id: 6c4f1d499ddb8916fdae6015cd57e158a0c1f182
Summary:
The previous approach of setting some of the borders to be thicker and different colours was flakey, sometimes parts of the border would be cut off by a parent
With this approach we figure out the offset relative to the root of the visualiser, and draw a box that is definatley on top. It works much more reliably
Also fixed a couple of other niggles:
1. Can unselect when clicking again
2. Going into focus mode clears selection since your selection may not be in the focused area and there is a phantom box
Reviewed By: lblasa
Differential Revision: D46224034
fbshipit-source-id: 24bed8db38cddab796f786e7e0a4acfe7c6a9089
Summary:
The logic was a little outdated to when we were accumulating subtrees, now its much simpler, if the previously focused id is not in the new frame, remove focus
Changelog: UIDebugger, fix focus mode behaviour
Reviewed By: mweststrate
Differential Revision: D45523026
fbshipit-source-id: 894a85df21cc27eb57dbef411ae57743d0c4f753
Summary:
Given that stream interceptor is async the folling race conditino could occur.
Frame at time t=0 comes in, we yeild to the event loop while fetching metadata, fetch takes 5 ticks
Frame at time t=1 comes in, we yeild to the event loop but fetch takes 1 tick
At time t=2 the second frame is augmented and display
At time t=5 the first fetch returns and we display and older frame
This is a simple check to avoid this.
Reviewed By: aigoncharov
Differential Revision: D45314013
fbshipit-source-id: 054e7e6beb52dfbfd94bc9f8ee3d0a758a669f66
Summary:
In order to support this the stream inceptor transform nodes now is able to return a list of new meta enties, since these are new attributes we try to mimic what would have happened if they were generated on the client. This makes the rest of the logic downstream simpler
Introduced metadata register, same idea as on the clients.
The attributes available are a mixed bag, will work with blok server to imporove
Reviewed By: antonk52
Differential Revision: D45177781
fbshipit-source-id: 9d761b2f682e7e0fd4710f5b2e9d9d6ff26741fc
Summary: This is purely a cosmetic change but more accurately reflects the nature of how we send data from device to desktop. Ie its always an entire frame rather than subtrees. This helps with correctness great Both ios and android are like this and have been for a while.
Reviewed By: lblasa
Differential Revision: D45080088
fbshipit-source-id: 8f68047056c4825b0b1dd89f26c7fa462e2ecb1b
Summary: We were memoizing the reduction trace fetch in the stream interceptor but this was redundant. We let the library handle that. Also pulled the calls into the uidebugger so we have more control over the retry behaviour
Reviewed By: mweststrate
Differential Revision: D45079132
fbshipit-source-id: 7354fce0fddbebdb0b027dade03398a36adc5e9a
Summary:
Hooked up metadata to the stream inteceptor, enhanced error handling to deal with:
1. Recording subsequent metadata messaages that came in while in error state such that all of them are processed
2. Recording any frames that came in while in error state such that after recovering from error we have the latest state
3. Splitting out recoverable and non recoverable errors more explicitly
Reviewed By: lblasa
Differential Revision: D45079137
fbshipit-source-id: 67a2ffef72d94d2b1492f201a2228659720e306b
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
