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:
* 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: 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: 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:
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:
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
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: It has served its purpose, remove.
Reviewed By: LukeDefeo
Differential Revision: D43769239
fbshipit-source-id: 36fb575b15fe9d092c7728a56b735ff98ff78608
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/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:
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:
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:
Paddings and alignments were improved also
changelog:
UIDebugger - Added ability to big grep search based on android ID if available
Reviewed By: lblasa
Differential Revision: D43159228
fbshipit-source-id: e2d7190ea2411e936ba065328bcc375c64619e8f
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:
Make it optional to display the icon (glyph) with a default of true.
Not used in this diff, but it will in future diffs.
Reviewed By: ivanmisuno
Differential Revision: D43186605
fbshipit-source-id: b525e126bcc46604e0abc0f83b6ff33a7ce78962
Summary: <NoData /> didn't support dark mode, now it does.
Reviewed By: ivanmisuno
Differential Revision: D43186565
fbshipit-source-id: 9952535d8762d8510afcce03b6cde7b603292107
Summary: A bit more explicit with the intent, clearer code.
Reviewed By: ivanmisuno
Differential Revision: D43186540
fbshipit-source-id: 24f2168f5be91673683966208c9b8b54125aaa5b
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: This is internal to ui-debugger so there's no need to surface this information to users.
Reviewed By: ivanmisuno
Differential Revision: D43081188
fbshipit-source-id: f6abdeb7828a1709d2590cf2a10407baec645420
Summary:
Previously we were checking the framework events stream for any new events and populating the map from that. Now we expect the init event to contain event types.
This allows us to know if the app supports framework event and therefore we dont show the controls to monitor it. Additionally we can fully populate the event monitoring dialog
Reviewed By: lblasa
Differential Revision: D42996552
fbshipit-source-id: 7850ada53d0630ba102af6c0d74d9d904f75eada
Summary: When an event is monitored show running total in the tree
Reviewed By: lblasa
Differential Revision: D42996553
fbshipit-source-id: 9b7bd5d2e98d8775f28b0b541f4eb1bd8231cc3e
Summary:
Listen to framework events and store in a map based on node id
Added UI to allow for monitoring framework event types.
The event type is a string separated by : Each segment of this string represents a level in the dialog hierachy. For example Litho:Layout:StateUpdateSync would have levels, Litho Layout StateUpdateSync
When event type monitored and event comes in for a node flash the visualiser node briefly
Reviewed By: lblasa
Differential Revision: D42074988
fbshipit-source-id: 52458ad87ab84bf7b1749e87be516ed73106a6c0
Summary: We are using frame time on android so make sense to present it
Reviewed By: lblasa
Differential Revision: D42996555
fbshipit-source-id: 595a08571ccd82de0761cfeea8a204e576981ee0
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:
^
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:
- Vertically center values
- Add gutter between rows/cols
- Tryout the removal of the indentation border (it could either be removed in the future or brought back)
Reviewed By: antonk52
Differential Revision: D42581663
fbshipit-source-id: cd682adca7f76f80240a0ca6d9023368a33453c3
