Summary:
Now that we have panels for tree visualiser separately we can have visualiser specific controls. There is a dedicated button for focus mode which should make that more discoverable and a better implementation of target mode which uses a slider. This has several benefits:
1. more discoverable
2. more obvious what is going on with the text prompts and a real slider control instead of mouse enter
3. there is no context menu getting in the way of the content
Changelog: UIDebugger Add visualizer target mode feature for selecting views in the z stack easily
Changelog: UIDebugger Add FocusMode button to visualiser toolbar
Reviewed By: mweststrate
Differential Revision: D47671658
fbshipit-source-id: 6f657f9d417280627457624660b934c9898cda58
Summary: This isnt very discoverable and we can put functionality in the toolbar
Reviewed By: mweststrate
Differential Revision: D47670683
fbshipit-source-id: 8426ba05135f9a56f0a0952e94ac80480cd30a48
Summary: This looks a lot neater and allows us to have separate dedicated visualiser header
Reviewed By: mweststrate
Differential Revision: D47626867
fbshipit-source-id: 843721853e0ff88837afbb9bf3f510a908160d12
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: Exception showed up in our monitoring. The only `.sort` that happens in that request/response sequence is the one updated. Didn't get to the root of this, but likely the plugin returns nothing rather than an empty array when no databases present?
Reviewed By: LukeDefeo
Differential Revision: D47665268
fbshipit-source-id: 3f8dea591db3e6cb5d4e0d09f893a177ad4f642e
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:
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: 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: The previous approach would set the atom many times causing several unnecessary renders
Reviewed By: lblasa
Differential Revision: D47519869
fbshipit-source-id: 536334c892334035a6c0fefc86a2e205b2c9769d
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: 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:
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
