Summary:
Rather than automatically collapsing siblings when using the visualiser instead we take a different approach:
1. The tree starts out fully collapsed
2. Every time you click on the visualiser we expand it and its ancestory chain to expanded nodes.
This is exactly how the Dom inspector works. The previous approach of constantly collapsing all siblings when uinsg the visualiser felt too intrusive and taking control from the user. The option is still there but only in the context menu
Some ultilities around autocollapsing nodes were removed as they dont make sense anymore that we now send complete frames
Changelog: UIDebugger Tree starts collapsed and expands as you click from the visualiser
Reviewed By: aigoncharov
Differential Revision: D47949843
fbshipit-source-id: 4381d22b12874dde5a89267572bee95f084380e3
Summary:
This allows you to control how the wire frames are drawn, useful when there are lots of overalpping wireframes
Changelog: UIDebugger - Added wireframe mode control, useful when lots of overlapping wireframes
Reviewed By: aigoncharov
Differential Revision: D47949841
fbshipit-source-id: 72de7d085ca433557107ab0cc6e4399220836d9f
Summary:
This file was huge and was hard to understand what was going on. changes:
1. UIActions moved out to separate file
2. create UIstate moved out
3. All declared state (atoms or plain js objects) moved to the top of the function like a class
4. utilities moved out
Reviewed By: lblasa
Differential Revision: D47547844
fbshipit-source-id: e7fa705a14a23bff2415016a488147bed7ad9e91
Summary:
Currently state writes can either go through a named handler that is easy to find and debug or they can directly modify the state.
By exposing readonly atoms only we ensure that all state writes go through a UIACtions. This adds consistency and ease of future debugging.
E.g We could add a utility to wrap all ui actions with logging statements
Reviewed By: antonk52
Differential Revision: D47547531
fbshipit-source-id: f88651169d8e7c5f7e31068d64f9aa5b6b573647
Summary:
UINode has never been a good name, we have 3 versions of a node.
ClientNode Previously UINode (the raw data from the client)
NestedNode (for the visualiser)
TreeNode (extends ClientNode and adds stuff specific to the tree like indentation and expanded states)
Arguablely we dont need nested node but that is another story
Reviewed By: elboman
Differential Revision: D47547529
fbshipit-source-id: 9a3b119d1230ea7b6734e7a3270c28287b04faf1
Summary: This file was getting overwelhming, and this seemed like a reasonable way to split it
Reviewed By: elboman
Differential Revision: D47547532
fbshipit-source-id: ab2bfa22daabbed13ec1445da0cf8ba88bda12d7
Summary: Very basic framework events table, quite useful for debugging will add more to this soon
Reviewed By: lblasa
Differential Revision: D47520035
fbshipit-source-id: 10f4572dd4ed3529324f03a969773c7e91fde030
Summary: This will allow us to build a nice table easily.
Reviewed By: lblasa
Differential Revision: D47520029
fbshipit-source-id: 3cdd776533b66688329171eb29b892e0b9153540
Summary: This adds a filter on top of the event types to only highlight when the thread occurs on the main thread
Reviewed By: lblasa
Differential Revision: D47520036
fbshipit-source-id: b4a67b262345d845e5dcbf79bba5a210c1bca4f8
Summary: The previous approach would set the atom many times causing several unnecessary renders
Reviewed By: lblasa
Differential Revision: D47519869
fbshipit-source-id: 536334c892334035a6c0fefc86a2e205b2c9769d
Summary:
Added selection source concept to onSelect callback. This allows us to only autoscroll the tree when selection source is the visualiser. We had feedback that the horizontal autoscrolling whilst using the tree was unhelpful.
A side benefit of selection source is better tracking of how people use kb, tree vs visualiser to select things
Changelog: UIDebugger only autoscroll horizontally when selecting via the visualiser
Reviewed By: lblasa
Differential Revision: D47334078
fbshipit-source-id: d7eadddb8d3d0fd428d5c294b2dccc2f1efa5a95
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
