Commit Graph

57 Commits

Author SHA1 Message Date
Luke De Feo
b184500d94 New sidebar design 1/n
Summary: Added basic infra basic types

Reviewed By: lblasa

Differential Revision: D50595985

fbshipit-source-id: 48ebd74bd8ccebdd8a6d69dbda344b8d831dc04f
2023-10-26 05:24:30 -07:00
Anton Kastritskiy
663380e721 mark unused vars as errors
Reviewed By: lblasa

Differential Revision: D50500690

fbshipit-source-id: 6f739fe25c232ecfe842337af4399681e85f6a13
2023-10-20 12:44:58 -07:00
Luke De Feo
4d7b017430 Use antd icon
Summary:
the glyph isnt working and need to get it fixed asap

changelog: UIDebugger fix icon for litho event timeline tab

Reviewed By: ivanmisuno

Differential Revision: D49780805

fbshipit-source-id: 832746237a43552171cd8e0bd3063318159279dd
2023-09-29 11:21:05 -07:00
Luke De Feo
237faddb40 Fix crash for bloks sidebar
Summary: Bloks ios is serializing some ns dictionary without registering the metadata, this means the look up fails. That said regsitering metadata for dictionarys where the keyspace is unbounded doesnt make any sense so for this case we can just fall back to the key as the name. Since we can rely on the id lookup passing we iterarates the enties of the object

Reviewed By: passy, ivanmisuno

Differential Revision: D49314398

fbshipit-source-id: 65f7beb0d8402b08a68b9f00b7605e0b6c44766f
2023-09-15 04:05:43 -07:00
Luke De Feo
aab84d3fb9 Use new antd apis for framework events
Summary: No more warnings.

Reviewed By: antonk52

Differential Revision: D48964070

fbshipit-source-id: 4f9b9affb04b8bc355b0687c9bc9c7273e469d78
2023-09-05 10:01:17 -07:00
Luke De Feo
a275235a7c ADd tracking for framework event debugging
Summary: ^

Reviewed By: lblasa

Differential Revision: D48645332

fbshipit-source-id: faf558c592b00a69586970edea407d8997a54699
2023-08-24 08:14:31 -07:00
Luke De Feo
7d9744b8ff Improve framework event filtering
Summary: Now when entering framework event table from a tree root we filter that so you can see all tree events. Also we use exact matches to avoid and nasty substring bugs

Reviewed By: lblasa

Differential Revision: D48560169

fbshipit-source-id: 1df375a2b8c5035003d82c210b55adebda8bd4ec
2023-08-23 01:51:31 -07:00
Luke De Feo
206ef79cf9 Improve table view
Summary:
added component name, root component name, duration, event type and better names

changelog: UIDebugger - added event debugger table view and side panel views

Reviewed By: lblasa

Differential Revision: D48559367

fbshipit-source-id: d357ecf654b4e443eac7673731a8be542e76dd48
2023-08-23 01:51:31 -07:00
Luke De Feo
03ba22451d Dont show filter if nothing to filter
Reviewed By: lblasa

Differential Revision: D48471138

fbshipit-source-id: c86d2542b7dc98e323fdde9ae8cc687bd10dfb3a
2023-08-21 04:24:16 -07:00
Luke De Feo
22d1bc2552 Allow exploring all events in table view
Summary: This lets you debug when events go off screen

Reviewed By: lblasa

Differential Revision: D48395787

fbshipit-source-id: 51a6eb74fa0f61c34f25e86a6ee40bf5969379ee
2023-08-21 04:24:16 -07:00
Luke De Feo
1bffe8bc6b Improve framework event filters
Reviewed By: lblasa

Differential Revision: D48393422

fbshipit-source-id: 18d92b53bd56c100b6d4bb6adc07ede0b4a46732
2023-08-21 04:24:16 -07:00
Luke De Feo
756a289883 Add button to get to table mode from node level stream
Reviewed By: lblasa

Differential Revision: D48348325

fbshipit-source-id: f54815226dc230aa2d3c2bafdae8edfa829bf3fe
2023-08-21 04:24:16 -07:00
Luke De Feo
4918d21df8 Show framework event metadata documentation in detail view and tree select
Reviewed By: lblasa

Differential Revision: D48348090

fbshipit-source-id: e48547508b78178b278f72ce72fc579c9f015570
2023-08-21 04:24:16 -07:00
Luke De Feo
f5bc03c263 Add framework event node level event filtering
Summary: Lets you filter a nodes events by thread or type

Reviewed By: lblasa

Differential Revision: D48346955

fbshipit-source-id: 455d65ad21c54c5ad26782ac6a446f7ae15a4356
2023-08-21 04:24:16 -07:00
Luke De Feo
3cd6079c24 Change framework event seperator to .
Summary: Its easier this way since this is how they come out of android internally, also a bit nicer to display the full string this way

Reviewed By: lblasa

Differential Revision: D48346954

fbshipit-source-id: 997dd3922159683fcdf4b5f5f288702a5d998dc4
2023-08-21 04:24:16 -07:00
Luke De Feo
d5814ea17c Use bottom panel as detail view for framework events
Summary: Now when you click on an event the bottom bar appears automatically showing you every thing you need

Reviewed By: lblasa

Differential Revision: D48318694

fbshipit-source-id: 6505e439d949941dc0e091b9576d7d1321d8a05f
2023-08-21 04:24:16 -07:00
Luke De Feo
87a1b657c3 UID Refactor 3/n UINode -> ClientNode
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
2023-07-21 07:17:31 -07:00
Luke De Feo
f181551ce6 UID refactor 2/n Split types into client and desktop types
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
2023-07-21 07:17:31 -07:00
Luke De Feo
2cc0ca0167 UID Refactor 1/n move to utils
Summary: Lets start adding some organisation to the folder structure

Reviewed By: lblasa

Differential Revision: D47547530

fbshipit-source-id: 30d20340ccc4b1c3ab4d4712c807831d74028322
2023-07-21 07:17:31 -07:00
Luke De Feo
7812dae764 Migrate framework events backing data structure to datasource
Summary: This will allow us to build a nice table easily.

Reviewed By: lblasa

Differential Revision: D47520029

fbshipit-source-id: 3cdd776533b66688329171eb29b892e0b9153540
2023-07-19 08:58:20 -07:00
Luke De Feo
3282417663 Fix bug where if events come in the creation of a new tab throws exception
Summary:
See title. The issue occurs because this tabs component derives a key by essentially serializing the children. Since its possible for different elements in the UIDebugger to have different number of tabs, due to framework events not always being present this was never anticipated.

Solution is to just let the callee supply a storage key which does not depend on the exact number of tabs

Reviewed By: lblasa

Differential Revision: D47520033

fbshipit-source-id: 67e57db5110fde52451d30496c25a25b0eb4a6f7
2023-07-19 08:58:20 -07:00
Luke De Feo
a6bc8933cc No longer autoscroll when selecting via tree
Summary:
Added selection source concept to onSelect callback. This allows us to only autoscroll the tree when selection source is the visualiser. We had feedback that the horizontal autoscrolling whilst using the tree was unhelpful.

A side benefit of selection source is better tracking of how people use kb, tree vs visualiser to select things

Changelog: UIDebugger only autoscroll horizontally when selecting via the visualiser

Reviewed By: lblasa

Differential Revision: D47334078

fbshipit-source-id: d7eadddb8d3d0fd428d5c294b2dccc2f1efa5a95
2023-07-19 08:58:20 -07:00
Luke De Feo
a24934cad2 Improve open in ide functionality for bloks
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
2023-06-22 08:24:55 -07:00
Luke De Feo
13c589724b Dont show layout tab for android
Summary: Feedback from michel, It is always empty for android  so dont show it

Reviewed By: elboman

Differential Revision: D46152985

fbshipit-source-id: 6c4f1d499ddb8916fdae6015cd57e158a0c1f182
2023-06-14 03:27:23 -07:00
Luke De Feo
4fdfbdc8df Open in IDE for bloks derived components
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
2023-04-27 07:28:41 -07:00
Lorenzo Blasa
8f5fcf9444 FrameworkEventsInspector
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
2023-04-04 05:54:42 -07:00
Lorenzo Blasa
0c4ec03e69 Add event payload as event properties for the timeline view
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
2023-04-03 10:35:15 -07:00
Lorenzo Blasa
04911d9d85 Tabs need key now
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
2023-04-03 04:39:25 -07:00
Lorenzo Blasa
c192af7fa0 Event name declutter
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
2023-03-13 03:55:03 -07:00
Lorenzo Blasa
2dde672045 Events tab
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
2023-03-10 06:18:21 -08:00
Luke De Feo
8581aa1944 Memoise selection of nodes
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
2023-02-17 02:45:05 -08:00
Luke De Feo
25149cc8c9 Added bgs on android ID + cleanup
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
2023-02-15 08:27:19 -08:00
Lorenzo Blasa
ada748170f Make glyph optional
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
2023-02-10 06:04:04 -08:00
Lorenzo Blasa
5fc0bcb631 Dark mode fix for Glyph
Summary: <NoData /> didn't support dark mode, now it does.

Reviewed By: ivanmisuno

Differential Revision: D43186565

fbshipit-source-id: 9952535d8762d8510afcce03b6cde7b603292107
2023-02-10 06:04:04 -08:00
Lorenzo Blasa
ca602bffd0 Clearer section creation
Summary: A bit more explicit with the intent, clearer code.

Reviewed By: ivanmisuno

Differential Revision: D43186540

fbshipit-source-id: 24f2168f5be91673683966208c9b8b54125aaa5b
2023-02-10 06:04:04 -08:00
Lorenzo Blasa
39a4cc22b1 Dark mode support
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
2023-02-07 07:58:12 -08:00
Lorenzo Blasa
9c9cd91832 Remove id from Inspector
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
2023-02-07 07:16:20 -08:00
Lorenzo Blasa
92ac6988d5 Attributes inspector style improvements
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
2023-01-19 05:05:49 -08:00
Luke De Feo
edf7dd1b8f Add entire node to raw data
Reviewed By: lblasa

Differential Revision: D41612115

fbshipit-source-id: a89dc1b3c994435afa9b85f6681df73f637c3f3f
2022-12-19 09:20:27 -08:00
Lorenzo Blasa
df960aee80 Show empty sidebar when no node is selected
Summary: ^

Reviewed By: LukeDefeo

Differential Revision: D41549165

fbshipit-source-id: 7f6324c8e04b8c7db3afe1e4cc5e1cbe0c023b7c
2022-11-29 10:39:14 -08:00
Lorenzo Blasa
b701d76668 Fixes overflow text
Summary: ^

Reviewed By: antonk52

Differential Revision: D41580381

fbshipit-source-id: d2e2d53f28ebf68a0f6c5a4cb882e905fd4bdd66
2022-11-29 08:10:12 -08:00
Luke De Feo
a89f6960dc Added tool tips to sidebar tabs and removed documentation tab
Reviewed By: lblasa

Differential Revision: D41554191

fbshipit-source-id: d14c042f3def75e33e7a2b9d5ad0a27b3303e0d4
2022-11-29 01:43:49 -08:00
Lorenzo Blasa
76b1673d15 Basic array support
Summary:
Attributes Inspector didn't have support for inspectable arrays.

This change addresses an issue with the inspectable itself and adds basic support to it in the visualiser.

Reviewed By: LukeDefeo

Differential Revision: D41522879

fbshipit-source-id: f9cad42470541039c8157477b0fe9bc58f18f1ba
2022-11-28 10:19:20 -08:00
Lorenzo Blasa
3044ddc5c1 Remove checkbox as boolean value
Summary:
Remove checkbox as we currently don't support editing values.

Instead replace with a simple 'TRUE', 'FALSE' text.

Reviewed By: antonk52

Differential Revision: D41532898

fbshipit-source-id: d4af37e30eb21ab761c39cb4ae45337247c80c9d
2022-11-25 08:14:08 -08:00
Lorenzo Blasa
c23f62219b Rename raw attributes flag to rawEnabled
Summary:
^

IMHO, this is a better name.

... and secretly make it enabled by default

Reviewed By: LukeDefeo

Differential Revision: D41495973

fbshipit-source-id: f287a4beadb70587ff43ac896213a20746dd8c22
2022-11-23 08:31:13 -08:00
Lorenzo Blasa
ef64abb495 Improve color inspector
Summary:
Before this change, color inspector used a color picker that showed: color, rgba, hex.

The problem is that engineers have to click on it to see these values.

This change leaves the picker as is, but presents both hex and rgba inlined within the inspector thus avoiding extra interactions.

Reviewed By: antonk52

Differential Revision: D41495740

fbshipit-source-id: c8af01e3060d2e6725295418293b1e30679c1b1f
2022-11-23 08:31:13 -08:00
Lorenzo Blasa
ae5eeb137d Add unknown type support in visualiser
Summary:
^

In this case, the unknown value, which is a text will be displayed as sent by the client.

Reviewed By: antonk52

Differential Revision: D41494094

fbshipit-source-id: 9295e3f7e055a8ce9b430137600108a4cdf32c90
2022-11-23 05:14:00 -08:00
Lorenzo Blasa
5b3e110821 Remove Enumeration type
Summary:
Enumeration used to be a type containing a single property value of type string.

The InspectableEnum is a type that had an Enumeration value and possible values.

As we removed possible values from the enum value, this structure no longer serves its purpose.

Reviewed By: antonk52

Differential Revision: D41400874

fbshipit-source-id: e5c2d1e15ee9b3074ddd69f75ee9b8150d44379f
2022-11-21 05:30:18 -08:00
Lorenzo Blasa
c92a9ae03e Enrich raw data with metadata
Summary:
As metadata got split from attributes, raw data became harder to read.

This change annotates raw data with attribute names to ease readability and thus usability.

Reviewed By: antonk52

Differential Revision: D41400622

fbshipit-source-id: 8bebb2bd368490b9d7a2b4435749cdf0570b7571
2022-11-21 04:51:23 -08:00
Lorenzo Blasa
1adcf2bc68 No data available
Summary: If there are no attributes for a given section, display a 'No data available' message rather than having an empty panel.

Reviewed By: antonk52

Differential Revision: D41400252

fbshipit-source-id: 0337702f638b9b917e6b3be5962838d2eb15c20d
2022-11-18 05:21:56 -08:00