Summary:
1. Add indent guidess to all tree depths
2. Monospaced font
3. cleaned up alignment of icons
4. Gave everything a bit more space to breathe
Changelog: UI Debugger Tree UI refresh, added indent guides and fixed alignment
Reviewed By: mweststrate
Differential Revision: D47626869
fbshipit-source-id: e4509621cda6c254f7dd5a7ec9b99c13efb577f4
Summary:
The old layout plugins target mode would ask you which view you wanted to select when you clicked, the visualiser currently chooses for you based on size of the element.
Sometimes this isnt what you want so I have added a context menu with all the intersecting nodes from which you can select or focus
Reviewed By: lblasa
Differential Revision: D47589789
fbshipit-source-id: 9c9d0d7587b830aa72089267d9bcf2b687142574
Summary:
I introduced this to stop the visualiser going off while the framework events modal was open. However on mouse leave fires when the context menu is open. and if you click to focus then it never refires.
Also renamed the ref to make it clearer
Reviewed By: lblasa
Differential Revision: D47550672
fbshipit-source-id: 62e108e55e5c42a37d3aebded6467ececdc458df
Summary:
Previously we were registering a click handler with every single div in the visualiser. This is somewhat wasteful as well as was causing issues since i needed to call stop propagation to prevent the click bubbling and selecting all the parents too.
as a result of stop propagation the context menu behaviour was weird, when left clicking elsewhere to close the context menu it wouldnt work as the click was swallowed by the click handlers for the nodes.
Now we have a much simpler system. The hovered overlay is the click handler. Thats it.
Another benefit of this is the visualisation nodes under the overlays are all interaction less so they can be moved to canvas one day if need be
Reviewed By: lblasa
Differential Revision: D47550673
fbshipit-source-id: 1a607059c68f0b936f0184bd98a6a1492703d41b
Summary: The previous names made no sense after they drifted over time
Reviewed By: lblasa
Differential Revision: D47550916
fbshipit-source-id: fa7df17b090c52b68ab4af9388d87365da6e8ff3
Summary: preparing to split this up a bit
Reviewed By: lblasa
Differential Revision: D47548840
fbshipit-source-id: 907b9cd6a7a044e4aad97f9755fd9b43b81768f1
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: An more options page drop down of size one didnt really make a great deal of sense
Reviewed By: lblasa
Differential Revision: D47520034
fbshipit-source-id: cea7ac404f73a0d7e5a1541b16097c4fd6549215
Summary:
See title. The issue occurs because this tabs component derives a key by essentially serializing the children. Since its possible for different elements in the UIDebugger to have different number of tabs, due to framework events not always being present this was never anticipated.
Solution is to just let the callee supply a storage key which does not depend on the exact number of tabs
Reviewed By: lblasa
Differential Revision: D47520033
fbshipit-source-id: 67e57db5110fde52451d30496c25a25b0eb4a6f7
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: I was experiencing some odd behaviour and locks ups from deep within Ant d. It seems to be related to the fact that tooltips for the visualiser were showing up when there was a modal on top.
Reviewed By: lblasa
Differential Revision: D47519848
fbshipit-source-id: d67edaedba2910069ba1eb424548de55c2badff3
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: It was complaining about no key for items in a list
Reviewed By: antonk52
Differential Revision: D47396639
fbshipit-source-id: c3d5cb7205dbe1c343d109e22f43e5756a071119
Summary:
Requested by litho team
Changelog: UIDebugger Add seperate icon for litho mountables
Changelog: UIDebugger Serialize all props using java.lang.toString
Changelog: UIDebugger show drawables mounted by litho
Reviewed By: lblasa
Differential Revision: D47295799
fbshipit-source-id: ce5b9384e4796a5c58080a289709ed9f7afdf329
Summary:
We had feedback that when a small eleemnt was selected it was hard to find, this should help
Changelog: [UIDebugger] Make selection more prominent in the visualiser
Reviewed By: lblasa
Differential Revision: D47223504
fbshipit-source-id: 33b448d36b0323e958e45fd1d0e2c7f659de293c
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:
Originally we planned to move the IDE inline in the row but this is hard to do well, especially with the horizontal scroll as well as the extra buttons for biggrep, codehub, AS and vscode.
Context menu is still very natural so lets try this
Reviewed By: lblasa
Differential Revision: D47210289
fbshipit-source-id: 339508c820915298161bf95fd1c3cea60b800746
Summary: node count and root node prescense will be very useful
Reviewed By: lblasa
Differential Revision: D47153394
fbshipit-source-id: 067f6f3aefa17cdfa88124956781400f53fe08d7
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:
PerformanceStatsEvent declares the metrics we track for performance.
DynamicPerformanceStatsEvent is a new type which extends it by allowing arbitraty key/value pairs to be reported and visualised.
Reviewed By: antonk52
Differential Revision: D47023248
fbshipit-source-id: fadfad79561fca9ae48d0668da3cc62f0d0391d8
Summary:
A few enhancements:
1. we use the component name when using big grep search and looking up in codehub instead of big grep search
2. diffusion renamed to code hub
Differential Revision: D46934805
fbshipit-source-id: c818b2937256cbeaabfdfc0a191706ebdecb716b
Summary:
Sometimes iOS can return active child -1, which is causing some crashes on desktop, (see the tasks) this is a client bug but the desktop shouldnt crash none the less
seems to occur only sometimes only on fboios
Reviewed By: lblasa
Differential Revision: D46894387
fbshipit-source-id: f9c34fe8fb32691486455224f82bed9c3dce6cef
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: Now the tree is virtualise the dom based scrolling effect doesnt work. Instead have to reimplement the search on the raw data and use the virtualiser to scroll, this isnt idea but it is still very fast and we can use this to later implement the browser style 4/8 results with ability to page through them.
Reviewed By: aigoncharov
Differential Revision: D46760491
fbshipit-source-id: 9c9b9961f084b39f86fd2aa94ab8e33ca476788b
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:
Removed previous memoization approach as it was causing issues and very inconsistent perf increase due to the indent guides often causing half the tree needed to rerender.
New approach is using react virtual. Its very fast in all cases including initial render off the wire. It does require 2 hacks.
1) React virtual requires you to explicitly size your parent component. In all the examples they have a height in px. This doesnt really work given we can resize the window. To mitigate this I added a grandparent component that is sized correclty with flexbox, then i use a layout effect to grab the height from the grandparent ref and set it to the scroll parent ref
2) Due to the implementaion of react virtual the width of the items in the tree is not correct. By default all the content overflows the box and the box doesnt grow automatically to fill the content. I think this is due to absolute positioning which breaks all the normal layout engine rules. The fix is to get the scrollWidth of the parent scroll view. (scrollWidth is the width of the element including overflow) and then set it via the refs we have on the tree item elements. This is also done in a layout effect.
changelog: UIDebugger virtualized UI to improve rendering performance
Reviewed By: aigoncharov
Differential Revision: D46724776
fbshipit-source-id: 75a6d35542066bd788aa4536481dedc72f667fc1
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:
Previously every single visualisation node would have jsx for a tooltip and would control its own tooltop. now we have the overlay we can have just one. this improves perf a bit and simplifies the code.
i also increased the delay slightly
Reviewed By: lblasa
Differential Revision: D46274098
fbshipit-source-id: cb8afbc4804c549da9abf33d69aaf190397f74c7
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:
Previously we used an overlay to indicated selected but this was kind of hard to see due to <1 opacity. I think this approach where we enchance the border is clearer.
Also we used border colour earlier to indicate type of node which i think was never obvious to the user. Given that nodes heavily overlap we should remove this design language
changelog: UIDebugger, improve selected and hover state of the visualiser
Reviewed By: antonk52
Differential Revision: D45737758
fbshipit-source-id: 5299043656787d6479cff6ec2b38cebe8417fd53
Summary: This feature is annoying and useless
Reviewed By: antonk52
Differential Revision: D45696921
fbshipit-source-id: 01c007d3e196a7511b940b7973bb8e6a880e27e5
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:
* Added line number as an attribute to node, in theory we could get it from the device in the case of compose
* dont need to use miles as have the file already
* cleaned up naming in ide file resolver so its clear its the qualified name we are talking about
Reviewed By: lblasa
Differential Revision: D45079135
fbshipit-source-id: 24f2d5814800a4a404b680599d307cc750758fcd
Summary:
1. Need to unminify the names from something call the minification map
2. Bloks attributes themselves are already minified. However the uidebugger also has a similar concept in its own metadata so the data we get off the device has been minified twice. To fix this we remap the metadata off the device using the minification map. In order to find the correct entry we need to get the style id of the bloks model parent. this is sent as a metadata custom attribute
Reviewed By: lblasa
Differential Revision: D45079136
fbshipit-source-id: bb448d81918c0b8c9e8ac87c4390b46a8a374d78
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: Payload size is useful to understand how much data is going down the wire for frame updates.
Reviewed By: LukeDefeo
Differential Revision: D45114582
fbshipit-source-id: d0c2a01deb84a67017db88bd396b4859e08d0037
