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:
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:
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:
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: 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:
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:
Instead of showing events as inline attributes, just show a badge with the number of it. Event details will be displayed with other means:
- Hover
- Dedicated tab
- Other
Reviewed By: mweststrate
Differential Revision: D43946575
fbshipit-source-id: 762a241040d7fc6afb2c86d129a620ff2bb15feb
Summary: Previously we would scroll back to the top of the list
Reviewed By: passy, ivanmisuno
Differential Revision: D43390481
fbshipit-source-id: ce2d5d57d35b22e87a538720fe2760707a6bc058
Summary: If you focused a node with zero area (e.g a fragment) it would make the visualiser disappear. Simple solution is to prevent this in this case
Reviewed By: mweststrate
Differential Revision: D43363219
fbshipit-source-id: 8035db47486a2872fd86a5336e9fcaabeb0016a6
Summary:
Fixes https://fb.workplace.com/groups/443457641253219/permalink/522121466720169/
For context see changelog.
The issue was because when an update comes in it creates an entirely new treeList. Since we were accessing that treeList in useEffect it was added to the dependency array. Therefore when an update came in we would scroll back to the last selected node. This effect was only meant to run when the selection changed in the visualiser. To fix we have to put the data it depends on in a ref so it can access the latest value without needing this data in the dependency array
changelog: UIDebugger Fix bug where if video playing on android and if element selected it would sometimes jump back to selected element when you scroll away
Reviewed By: mweststrate
Differential Revision: D43347501
fbshipit-source-id: f03bb32ddfa7828a4742d1a57e9be133a455ec30
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:
Indent is made bigger so the horizontal lines have more space and the whole thing can breath more. To componesate the view scroll horiztontally so that the tree node is always visible. Was also able to clean up the hierachy a bit
changelog: increase tree indent and automatically scroll both horizontally and vertically when selecting an element
Reviewed By: lblasa
Differential Revision: D43311566
fbshipit-source-id: 53bc7bd55027e87fdecadac9aa8bc41612bb684a
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:
Added ability to copy element name and any inline attributes
Changelog:
UI Debugger - Added extra context menu items for copying element name and attributes
UI Debugger - Added open in Android studio button
UI Debugger - Improve speed of loading the Open in IDE buttons
Reviewed By: lblasa
Differential Revision: D43153666
fbshipit-source-id: 8b440d77444cd6849388e7e9d348da4527db5baf
Summary:
This change addresses some obvious issues which made the ui-debugger unusable with dark mode on.
There may more things that need changing, but at the very least this should be a good place to start.
Reviewed By: fabiomassimo
Differential Revision: D43083218
fbshipit-source-id: 8e4338b79178d3a0f05f9bcaffa2fc6f35eb0e21
Summary: When an event is monitored show running total in the tree
Reviewed By: lblasa
Differential Revision: D42996553
fbshipit-source-id: 9b7bd5d2e98d8775f28b0b541f4eb1bd8231cc3e
Summary: For deep nested hierarchies, the current offset was too big making the hierarchy almost un-browsable. The current offset seems to work better.
Reviewed By: LukeDefeo
Differential Revision: D42996296
fbshipit-source-id: 808a2ecc32aff2d8d252bdb9f653344866e5653b
Summary:
1. Greater spacing between levels
2. Align children when one has chevron and another doesnt
3. Allow searching of inline attribute values
Reviewed By: lblasa
Differential Revision: D41955235
fbshipit-source-id: aa6bce71810a32cd218db790287aaaf506df75b7
Summary:
This is temporary solution to get to parity with the old plugin. In future would like to make this more flexible on the desktop side
Additionally getData was renamed to getAttributes for consistency
Reviewed By: lblasa
Differential Revision: D41845248
fbshipit-source-id: 50e94a7712f5d42938229134e212cef5d379475d
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: This was causing the hover state to linger which is now quite noticable in the tree
Reviewed By: lblasa
Differential Revision: D41548249
fbshipit-source-id: cdf8ed434aa064dba05ebf31773bedaef18ba007
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: We have to do a couple of odd things to get the context menu items to behave. The code was duplicated between tree and visualizer. This custom component removes duplication and makes the approach a bit clearer (via js doc)
Reviewed By: antonk52
Differential Revision: D41495718
fbshipit-source-id: ec98d5101e636a2c9034c656d29991d4fe348762
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: 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
