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:
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: 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: 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: Feedback from michel, It is always empty for android so dont show it
Reviewed By: elboman
Differential Revision: D46152985
fbshipit-source-id: 6c4f1d499ddb8916fdae6015cd57e158a0c1f182
Summary: This feature is annoying and useless
Reviewed By: antonk52
Differential Revision: D45696921
fbshipit-source-id: 01c007d3e196a7511b940b7973bb8e6a880e27e5
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:
An issue was reported for the visualiser whereas there seemed to be some cropping taking place on the right hand side.
https://pxl.cl/2BhPT
The issue was the resizable panel and visualiser both were set with the same width.
The resizable panel was set as to have a gutter which was not taken into consideration, add this width to the panel width and that fixes the issue.
Also change box sizing model as to not affect the dimensions of the wireframe.
Reviewed By: LukeDefeo
Differential Revision: D44664377
fbshipit-source-id: e640af2090f7c3378e624626fe3ea5df631caa11
Summary:
As events get bigger, this change includes the following:
- Dedicated event inspector
- Stacktrace viewer for events with stacktrace attribution
- Stacktrace viewer is displayed within a new BottomPanel. BottomPanel can display any React component and can be reused in the future in different use cases.
Reviewed By: LukeDefeo
Differential Revision: D44628768
fbshipit-source-id: 71a9ef87e71c9a17f58c2544a1aa356eed14ed27
Summary: It has served its purpose, remove.
Reviewed By: LukeDefeo
Differential Revision: D43769239
fbshipit-source-id: 36fb575b15fe9d092c7728a56b735ff98ff78608
Summary:
Fixes https://fb.workplace.com/groups/443457641253219/permalink/522118536720462/
On android for some reason our display metrics for the application, activity and winow were smaller than the decor view. We were using the root view as the base static view for the visualiser with overflow hidden. Since it will slightly smaller than the decor view we were losing some of the lower pixels of the snapshot
The decor view is the one that is actually snapshot so any bounds for nodes above are meaningless . The fix is to simply have the visualiser start at the snapshot view. We know this bounds is correct.
Tested on ios and android and all looks ok
Reviewed By: lblasa
Differential Revision: D43356523
fbshipit-source-id: 4d6177c8242365f33b1d64fc149a10baff7c85d6
Summary:
Previously If you set the visualiser too wide, the height adjusts with the aspect ratio and the bottom was cut off and there was no way to scroll. Have added a scrollbar if it exceeds the available height
Also the width state was promoted to an atom so the users resize amount is preserved when moving between plugins
A better solution might be to prevent the visualiser from getting too wide for the available hieght but it get complex when the window resizes.
Reviewed By: lblasa
Differential Revision: D43351294
fbshipit-source-id: f618a69ed025214593a74b952ce75c5fd98447cd
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:
So much tidier
changelog: UIDebugger remove gap between tree and visualiser
Reviewed By: lblasa
Differential Revision: D43307743
fbshipit-source-id: ceec9b3b164c93ecadfe8c0b7299a978b2915e3b
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:
^
Only for iOS this time.
Note: passing the device OS freely to the main component as this is just temporary code that will be deleted soon.
Reviewed By: antonk52
Differential Revision: D42990221
fbshipit-source-id: 41b4107caa6bf312191889af75afd28873f6eda5
Summary: The call to myles was a little slow and very cachable so use react query. Additionally it depends on VPN / light so added an error state to make that clear.
Reviewed By: lblasa
Differential Revision: D42990344
fbshipit-source-id: 8d6ad20aea79f1972a7cf1f61f8af729e5f3464f
Summary:
^
Not removing the component, yet, as we may re-introduce the survey once we officially release on iOS.
Reviewed By: antonk52
Differential Revision: D42499399
fbshipit-source-id: 596ebda7acf39c0b8377bbd3a1a8f4dfa81e59a4
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 change adds a small feedback alert banner. It will have a link to our workplace feedback group.
Additionally, it asks engineers to record their sessions.
Reviewed By: LukeDefeo
Differential Revision: D41531851
fbshipit-source-id: 7ec8ca79350e7a84ab0532065bc57187ef0055ba
Summary: also made the controls component full width to push down the visualiser
Reviewed By: lblasa
Differential Revision: D41548665
fbshipit-source-id: 2bca527e70c92bc0ded120e51a0880f76f7cca87
Summary: There were a few subtleties around what to the auto expanding / collapsing for active children but otherwise this is quite straightforward
Reviewed By: lblasa
Differential Revision: D41548252
fbshipit-source-id: c153d00210d859463a51753dadf2e5aabeb7ea35
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: In order to support focus mode we need to have only 1 snapshot. In practice this is the case but we are making this more apparant in this diff.
Reviewed By: lblasa
Differential Revision: D41493003
fbshipit-source-id: 19ed7213d15adaea4732f4ec60309efa8dae6f94
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:
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:
Before this change, attributes and attribute metadata were intermingled and sent as one unit via subtree update event.
This represented a few issues:
- Repetitiveness. For each declared and dynamic attribute, metadata was included on each value unit.
- Metadata can vary in size and thus can have a negative impact on payload size.
- The attribute name which is part of metadata is a string which always overhead on processing.
- Metadata instantiation is not cheap thus this also incurs in processing overhead i.e. even instantiating a single string can have an impact.
The proposal is to separate metadata of attributes from the actual node reported attributes. This solves the problems mentioned above.
Reviewed By: LukeDefeo
Differential Revision: D40674156
fbshipit-source-id: 0788551849fbce53065f819ba503e7e4afc03cc0
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:
Replace draft inspectors with read-only components.
This is a first step into having a richer UI. At the moment, these are read-only components but will likely be extended in the future as to allow editing of values.
Reviewed By: LukeDefeo
Differential Revision: D40345016
fbshipit-source-id: a6aef5861474b4aa8353c00ef257ab17b4cff00e
Summary:
^
This laids the foundation for the inspector. It just reorganises a few bits.
Reviewed By: LukeDefeo
Differential Revision: D40319611
fbshipit-source-id: 8cf9b151c631faa1f26a7a6dfaa86b01abc42fe5
Summary:
^
This change allows to take different snapshots for different nodes and render them each on the visualiser.
At the moment, more than likely, this is not really used. At the same time, it fixes an issue whereas any subtree update can override and set the only visible snapshot.
Reviewed By: LukeDefeo, antonk52
Differential Revision: D39821920
fbshipit-source-id: ab8f6a4a2a5e96801c951a4e3009cc571a617f22
Summary:
^
TODO: the snapshot corresponds to the referring subtree update. However, the snapshot is getting applied as if it was the current top view of the running app. This is true in most cases but it doesn't for some. To solve this, we need to use the rootId for the subtree and apply the snapshot only if appropriate.
Having said that, is good enough for the current submission as we keep iterating on it.
Reviewed By: LukeDefeo
Differential Revision: D39813307
fbshipit-source-id: 33b6aff6e9dd085934150ebd2f247062447a59ff
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: Basic visual wireframe for the purposes of verifying that our captured view hierachy is correct, the actual version we ship will hopefully be a lot better :)
Reviewed By: lblasa
Differential Revision: D39539278
fbshipit-source-id: 73d926ff1990f09ca9877430cb227f690d05d1d4
Summary: Split our the mega component into separate parts in preparation for the visualizer
Reviewed By: lblasa
Differential Revision: D39509406
fbshipit-source-id: 0f867c1f8a91b7592673ae47ba2b5db4f3500732
Summary: While looking at the event stream it is useful to know which observer type fired it
Reviewed By: lblasa
Differential Revision: D39430756
fbshipit-source-id: bc52f085a5497692f8076b12a9c015cc33a19d1e
Summary:
Added concept of a tree observer which is responsible for listening to the changes for a portion of the UI tree. This structure nests so Tree observers can hold child tree observers which emit events on a different cadence. This structure should allow us to incorporate different UI frameworks down the road as well as native android views.
We push the tree updates from the tree observers onto a channel and setup a coroutine to consume this channel, serialize and send down the wire.
Reviewed By: lblasa
Differential Revision: D39276681
fbshipit-source-id: a4bc23b3578a8a10b57dd11fe88b273e1ce09ad8
