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
Summary:
There are situations where multiple siblings overlap and they are both hit. Previously we picked the first one in the hierachy. Now we produce a list of hit children. The list will not have 2 nodes in the same ancestor path.
We store the hovered nodes as a list as we may want to present a modal in future to ask user which node they indented to select. That said simply sorting nodes by area seems to give decent results so we can start with this
Reviewed By: lblasa
Differential Revision: D41220271
fbshipit-source-id: 643a369113da28e8c4749725a7aee7aa5d08c401
Summary:
The Dom events for the divs that are very close together were not firing correctly causing the old implementation to not track the hovered node correctly. This was really frustrating trying to select a node amongst many close neighbours.
The new approach uses the mouse x,y position and performs a hit test. Currently we do a dfs looking for the first deepest child that interests the mouse x,y. In a future diff we will extract a list when there are multiple candidates.
Hovered node was removed from react props since both the tree and visualisor depend on it meaning when hover state changes the whole app is rerendered. Instead we have moved hover state to an atom which is subscribed to by each visualsation node. Only if the old or new value matches the particular nodes id do we set state. The viz nodes were memo'd to prevent children renderning. The result is that for a hover change at most 2 nodes out of the 500 or so will rerender.
I attempted to do the same with the tree but it wasnt working with the controlled tree environment + focus state. The perf seems fine as is so will leave it for now
Reviewed By: lblasa
Differential Revision: D41218324
fbshipit-source-id: 7f80bcee256abad2689a88d7e209f92417aab672
Summary:
Upgraded from ant tree library to the much more capable React complex tree. Added the following:
1. Ability to expand / collapse nodes while automatically expanding / collapsing active/inactive children when they change
2. Keyboard controls of tree all the time
3. Basic search functionality
4. Selecting node in tree focuses and scrolls in the tree
5. Hover state for tree
Reviewed By: lblasa
Differential Revision: D40633876
fbshipit-source-id: 8dcef5ec2c277e476a3eb3cdaef62b15c25323c0
Summary: We have a list of modules that we do not bundle with the plugins, but provide externally to them from Flipper. For the mechanism to work correctly, we have to stop importing from nested paths of these modules.
Reviewed By: mweststrate
Differential Revision: D39776237
fbshipit-source-id: 06eae9bf9d5b11b48d2720bf592bfea749773847
Summary:
Improved the 2 way relationship between tree and vizualiser. There are 3 states.
1. Select, this is when you click on either tree node or view. View is highlighted darker colour, sidebar shows up for that node and select is persisted when you mouse away
2. Hover, this is when you hover over a tree node or in the vizualizer, the node is highlighted a lighter colur
3. Hover while holding control - same as hover but we dont draw any children, this lets you see how parent nodes appear without their children
Reviewed By: lblasa
Differential Revision: D39695661
fbshipit-source-id: 623e479fb03567e9f15a4a4f9201b2c7884cabe4
Summary:
Introduced some basic bidirectional link between tree and wireframe, the specific interaction will need some tweaking but this should get us started.
When hovering over the tree we halt the rendering of the wireframe up to that point, this allows us to explore parent views that layout child views.
When clicking a view in the wireframe it is 'seleceted' as if it was clicked in the tree. This set the tree selection so you can identify it in the tree as well as opens the side bar
Reviewed By: lblasa
Differential Revision: D39539277
fbshipit-source-id: 3beb1ad4cb56b398c640ac3e7fac2cc97f3f1a18
Summary: Split our the mega component into separate parts in preparation for the visualizer
Reviewed By: lblasa
Differential Revision: D39509406
fbshipit-source-id: 0f867c1f8a91b7592673ae47ba2b5db4f3500732
