Summary: This lets you debug when events go off screen
Reviewed By: lblasa
Differential Revision: D48395787
fbshipit-source-id: 51a6eb74fa0f61c34f25e86a6ee40bf5969379ee
Summary: Lets you filter a nodes events by thread or type
Reviewed By: lblasa
Differential Revision: D48346955
fbshipit-source-id: 455d65ad21c54c5ad26782ac6a446f7ae15a4356
Summary: Its easier this way since this is how they come out of android internally, also a bit nicer to display the full string this way
Reviewed By: lblasa
Differential Revision: D48346954
fbshipit-source-id: 997dd3922159683fcdf4b5f5f288702a5d998dc4
Summary: Now when you click on an event the bottom bar appears automatically showing you every thing you need
Reviewed By: lblasa
Differential Revision: D48318694
fbshipit-source-id: 6505e439d949941dc0e091b9576d7d1321d8a05f
Summary: This was complaining about mixing shorthand and separete css attributes. Just use separate since its clearer
Reviewed By: passy
Differential Revision: D48315864
fbshipit-source-id: e73e76d7fb94b3d7bba36a34d408202bc91933be
Summary: The bottom panel got broken during the virtualisation+ panel refactor, we need to tell the tree how much height is taken by the panel so it can size itself accordingly.
Reviewed By: lblasa
Differential Revision: D48313766
fbshipit-source-id: 849886101eb0869cc068fd0ad6dc1d053233043e
Summary:
Added new tree id to the framework event. Its currently optional.
The tree id is the parent component tree / tree manager this tree belongs to, this is so we can view all tree events at once in the table.
We ony show the context menu item when we have the tree root tag which is set for component tree only at this point. We can add for blok and ios later
Reviewed By: lblasa
Differential Revision: D48268120
fbshipit-source-id: 3dee06309b146a0392ca32fbb5e8231883b8439a
Summary: This mode is useless for leaves
Reviewed By: aigoncharov
Differential Revision: D47949539
fbshipit-source-id: 7f3ae6652ad696e9f550fe5b8f2298a1a3eff329
Summary: I noticed a slow down when using key board controls as this would change the selection. this adds the optimization back when wireframe mode == All
Reviewed By: antonk52
Differential Revision: D47949836
fbshipit-source-id: a08e5608c159d23b8a0afed419724c02231718d6
Summary:
Made rows smaller so you get to see more content
Monospace font
Reviewed By: antonk52
Differential Revision: D47949839
fbshipit-source-id: f8935e233838ff35acf8c1ab14bcf9b8f2153ab4
Summary: On certain apps there are a lot of views that have zero size and this isnt clear from the tree view. This will help
Reviewed By: lblasa
Differential Revision: D47917167
fbshipit-source-id: 180ef1cf34c3735acfd54d3498db9d29f759d959
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:
Added 3 context menu items:
- expand recursive
- collapse recursive
These are self explanatory.
I also collapse non ancestors. This collapses everything except your direct ancestor path to the root. Quite useful to refocus the tree on a node
Changelog: UIDebugger - added context menu items for exanding and collapsing the tree.
Reviewed By: aigoncharov
Differential Revision: D47949840
fbshipit-source-id: 6eebba182fe2092fbf5f0db0ec5ff728c3900424
Summary: The idea of the hit test is to return the deepest children that hit an element and not their parents. Due to this bug we were actually returning every other node all the way up to the root resulting in way to many hit nodes for target mode
Reviewed By: lblasa
Differential Revision: D47949837
fbshipit-source-id: d3391b4a700ab0be4c3b21dde5f13452f90c887b
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:
The code used the hovered node and selected node somewhere inconsistently for keyboard controls, this led to subitle bugs where if you moused over the next keybaord jump point would be the hovered node sometimes. This straightens it all out
Changelog: [UIDebugger] Fixed bug with keyboard tree controls
Reviewed By: aigoncharov
Differential Revision: D47832249
fbshipit-source-id: 7697c97a817ed5b70250c0c4f12fc1c59bdb96b9
Summary: Previously we would run the effect even if search term hadnt changed causing us to scorll to a search term rather than the selected node when selecting in the visualiser
Reviewed By: antonk52
Differential Revision: D47831188
fbshipit-source-id: 5700d49aea219a1229bcc8df462e55d8508c6c1a
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:
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
