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
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
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: this assumption doesnt hold true for android as the snapshot is of the decor view and app bounds include the status bar / bottom bar
Reviewed By: elboman
Differential Revision: D42035810
fbshipit-source-id: 177b5d086487a940e0bdbe20c2a001c420a08d69
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
