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
Summary:
A few enhancements:
1. we use the component name when using big grep search and looking up in codehub instead of big grep search
2. diffusion renamed to code hub
Differential Revision: D46934805
fbshipit-source-id: c818b2937256cbeaabfdfc0a191706ebdecb716b
Summary:
Sometimes iOS can return active child -1, which is causing some crashes on desktop, (see the tasks) this is a client bug but the desktop shouldnt crash none the less
seems to occur only sometimes only on fboios
Reviewed By: lblasa
Differential Revision: D46894387
fbshipit-source-id: f9c34fe8fb32691486455224f82bed9c3dce6cef
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: 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:
There were a small number of styles / attributes that were missing, this addresses this.
Similar to the bloks minification map there are some special hardcoded reserved ids, if that doesnt work then you can look into a special place for each style
I also refactored the transform metadata method as it was getting very nested and hard to understand.
Reviewed By: aigoncharov
Differential Revision: D46799392
fbshipit-source-id: 8de8a2740f45ddb23a1bc9abb7bb36f969cf1fbb
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:
Previously every single visualisation node would have jsx for a tooltip and would control its own tooltop. now we have the overlay we can have just one. this improves perf a bit and simplifies the code.
i also increased the delay slightly
Reviewed By: lblasa
Differential Revision: D46274098
fbshipit-source-id: cb8afbc4804c549da9abf33d69aaf190397f74c7
Summary:
The previous approach of setting some of the borders to be thicker and different colours was flakey, sometimes parts of the border would be cut off by a parent
With this approach we figure out the offset relative to the root of the visualiser, and draw a box that is definatley on top. It works much more reliably
Also fixed a couple of other niggles:
1. Can unselect when clicking again
2. Going into focus mode clears selection since your selection may not be in the focused area and there is a phantom box
Reviewed By: lblasa
Differential Revision: D46224034
fbshipit-source-id: 24bed8db38cddab796f786e7e0a4acfe7c6a9089
Summary:
Previously we used an overlay to indicated selected but this was kind of hard to see due to <1 opacity. I think this approach where we enchance the border is clearer.
Also we used border colour earlier to indicate type of node which i think was never obvious to the user. Given that nodes heavily overlap we should remove this design language
changelog: UIDebugger, improve selected and hover state of the visualiser
Reviewed By: antonk52
Differential Revision: D45737758
fbshipit-source-id: 5299043656787d6479cff6ec2b38cebe8417fd53
Summary: This feature is annoying and useless
Reviewed By: antonk52
Differential Revision: D45696921
fbshipit-source-id: 01c007d3e196a7511b940b7973bb8e6a880e27e5
Summary:
The logic was a little outdated to when we were accumulating subtrees, now its much simpler, if the previously focused id is not in the new frame, remove focus
Changelog: UIDebugger, fix focus mode behaviour
Reviewed By: mweststrate
Differential Revision: D45523026
fbshipit-source-id: 894a85df21cc27eb57dbef411ae57743d0c4f753
Summary:
Given that stream interceptor is async the folling race conditino could occur.
Frame at time t=0 comes in, we yeild to the event loop while fetching metadata, fetch takes 5 ticks
Frame at time t=1 comes in, we yeild to the event loop but fetch takes 1 tick
At time t=2 the second frame is augmented and display
At time t=5 the first fetch returns and we display and older frame
This is a simple check to avoid this.
Reviewed By: aigoncharov
Differential Revision: D45314013
fbshipit-source-id: 054e7e6beb52dfbfd94bc9f8ee3d0a758a669f66
Summary:
In order to support this the stream inceptor transform nodes now is able to return a list of new meta enties, since these are new attributes we try to mimic what would have happened if they were generated on the client. This makes the rest of the logic downstream simpler
Introduced metadata register, same idea as on the clients.
The attributes available are a mixed bag, will work with blok server to imporove
Reviewed By: antonk52
Differential Revision: D45177781
fbshipit-source-id: 9d761b2f682e7e0fd4710f5b2e9d9d6ff26741fc
Summary: This is purely a cosmetic change but more accurately reflects the nature of how we send data from device to desktop. Ie its always an entire frame rather than subtrees. This helps with correctness great Both ios and android are like this and have been for a while.
Reviewed By: lblasa
Differential Revision: D45080088
fbshipit-source-id: 8f68047056c4825b0b1dd89f26c7fa462e2ecb1b
Summary: We were memoizing the reduction trace fetch in the stream interceptor but this was redundant. We let the library handle that. Also pulled the calls into the uidebugger so we have more control over the retry behaviour
Reviewed By: mweststrate
Differential Revision: D45079132
fbshipit-source-id: 7354fce0fddbebdb0b027dade03398a36adc5e9a
Summary:
* Added line number as an attribute to node, in theory we could get it from the device in the case of compose
* dont need to use miles as have the file already
* cleaned up naming in ide file resolver so its clear its the qualified name we are talking about
Reviewed By: lblasa
Differential Revision: D45079135
fbshipit-source-id: 24f2d5814800a4a404b680599d307cc750758fcd
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:
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: Type is any as it can be litterally anything, using json is a bit of pain as we have to do a lot of type checks to access anything
Reviewed By: lblasa
Differential Revision: D45079133
fbshipit-source-id: bcce93a1fce48d2779a648576f12df6392a0938e
Summary: These replace tags, and are KV instead. They allow us to send framework specific data that arent common enough to be promoted to the top level, similar to hidden attributes. They will be needed for bloks
Reviewed By: lblasa
Differential Revision: D45079134
fbshipit-source-id: e4962bd56f0c24608504367f50cd796fd3d79fcd
Summary: This is no longer needed or sent by the client given our new approach to frames
Reviewed By: antonk52
Differential Revision: D44872566
fbshipit-source-id: 9ec340a5cc68605f730cf6677fb89778bf77a3a1
Summary: Payload size is useful to understand how much data is going down the wire for frame updates.
Reviewed By: LukeDefeo
Differential Revision: D45114582
fbshipit-source-id: d0c2a01deb84a67017db88bd396b4859e08d0037
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:
Make it more specific as to keep it consistent with the other types.
Do not export JSON.
Reviewed By: antonk52
Differential Revision: D44625218
fbshipit-source-id: 9cab52ee7e7be21d13f85102597a60c9be967fd0
Summary: Leverage the properties prop of `TimelineDataDescription`. Whenever an event is selected, the event payload is shown as the event properties.
Reviewed By: antonk52
Differential Revision: D44497058
fbshipit-source-id: 09782d583957a0df8c3efd3f5a62af6b321a26e3
Summary: Because Tabs now depend on the selected node (i.e. some nodes have events, some don't) they need to use a key.
Reviewed By: antonk52
Differential Revision: D44624658
fbshipit-source-id: 693983f6a82c090adae3a2e009873d903626ab75
Summary:
Based on the stack trace in T145744183, `activeChildIdx` could point to a non-existent array element.
Previously, we used to:
1) Find the index of the activeChild in the non-filtered array of children
2) Filter the array
As a result, it could lead to some of the elements in the child array to be filtered and shifting activeChildIdx, making it invalid.
Now, we search activeChild in the already filtered array.
Reviewed By: LukeDefeo
Differential Revision: D44575170
fbshipit-source-id: 2cb9a0b24badc8509a859011694f77b048d93316
Summary:
Track:
- Element selected. Include name and tags. Useful to understand what type of elements engineers are selecting in a hierarchy i.e. ui framework, element type, etc.
- Element focused. Same as above.
- Context menu usage
Reviewed By: LukeDefeo
Differential Revision: D44294618
fbshipit-source-id: f2b9642e70818e8a382bbbddc28115a40734dfe8
Summary:
Current metrics are deltas from an initial set timestamp. This works but is limiting or affecting the overall accuracy of them.
The aim of this task is to replace the deltas with actual measurements for the operations.
This way we can add/remove operations in between which will not create any impact of them.
Reviewed By: LukeDefeo
Differential Revision: D44026823
fbshipit-source-id: fd7d62c4eab86bab8239b44beecd5c133f6d11c7
Summary: Framework events was added recently so no garentueed to always be on all clients. Should fix T145084769
Reviewed By: mweststrate
Differential Revision: D44064430
fbshipit-source-id: 5dab14a7de5815a25cf8fe7bfa485a6a57d60071
Summary:
The current event label used the event type. The type in itself can have this shape:
`ck:willMountComponent`
The event name is just 'willMountComponent'.
So, extract that piece of data instead.
Reviewed By: aigoncharov
Differential Revision: D43983728
fbshipit-source-id: e232b59cfe3eb0710e56fc9ba7f94b644b07ee74
Summary:
Add a frameworks events tab. This is currently using the `TimelineDataDescription` component which may ultimately be replaced by something more sophisticated.
In the meanwhile, this does the job of chronologically displaying events with a label.
Reviewed By: mweststrate
Differential Revision: D43948891
fbshipit-source-id: 31ebf8a1d0e126856c3aa5291a1a06d7f2547233
