Commit Graph

91 Commits

Author SHA1 Message Date
Luke De Feo
d93c9d45a9 Ability to highlight nodes that match monitored event
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
2023-02-06 04:33:11 -08:00
Luke De Feo
d3df6bc00e Attempt to render txid as date if possible
Summary: We are using frame time on android so make sense to present it

Reviewed By: lblasa

Differential Revision: D42996555

fbshipit-source-id: 595a08571ccd82de0761cfeea8a204e576981ee0
2023-02-06 04:33:11 -08:00
Lorenzo Blasa
4e21a67903 Better offset
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
2023-02-03 08:37:33 -08:00
Lorenzo Blasa
dacc6ebb16 Feedback request
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
2023-02-03 07:43:00 -08:00
Luke De Feo
df9b0a6aa6 Use react query to cache myles query
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
2023-02-03 04:38:51 -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
Lorenzo Blasa
49403df95f Remove survey banner
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
2023-01-13 07:36:20 -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
Luke De Feo
989797a225 Dynamic scaling of visualizer and resizable window
Summary: Fixes https://fb.workplace.com/groups/443457641253219/permalink/480446154221034/

Reviewed By: mweststrate

Differential Revision: D42095625

fbshipit-source-id: 364577141f2819dd22b0b499b11770d0bb88b1f5
2022-12-16 03:47:58 -08:00
Luke De Feo
12c1fdf952 Trim last indent guide
Summary: Changelog: UIDebugger: Reimplemented Tree, inline attributes, faster performance and added indent guides

Reviewed By: lblasa

Differential Revision: D42031069

fbshipit-source-id: f1394ca528005e645760ea38cb5c4c805d122a4b
2022-12-14 08:38:58 -08:00
Lorenzo Blasa
d66b513298 Add CK and iOS tags
Summary: ^

Reviewed By: LukeDefeo

Differential Revision: D41876581

fbshipit-source-id: 79b98a06abb503f4cd39a61a2ed90e7899b8fd68
2022-12-13 10:02:05 -08:00
Luke De Feo
b686567e2b Added indent guides to parent and children for selected node
Reviewed By: lblasa

Differential Revision: D41995460

fbshipit-source-id: cd4574caa6aa164d2b3a026f656609585cae65c0
2022-12-13 08:21:22 -08:00
Luke De Feo
5043e5292f Last minute tree changes
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
2022-12-12 09:17:03 -08:00
Luke De Feo
8242a94ca4 Rename tree
Reviewed By: lblasa

Differential Revision: D41875028

fbshipit-source-id: a3afd0014798f03cbaefac3f9128b4e92bccb290
2022-12-12 07:28:37 -08:00
Luke De Feo
74247ee721 Remove react complex tree
Reviewed By: lblasa

Differential Revision: D41875029

fbshipit-source-id: 2af58610fe0d0f644aa8450a4210fd52f8ed4db6
2022-12-12 07:28:37 -08:00
Luke De Feo
ed35623bef Only render a single context menu for the entire tree
Summary: There is no reason to have a context menu rendered by react for each item in the tree, its pretty wastefull. It also means less props drilled to the tree node

Reviewed By: lblasa

Differential Revision: D41872778

fbshipit-source-id: b13491a310c03334d7f3056207f5de23d20c3e61
2022-12-12 07:28:37 -08:00
Luke De Feo
040240ec34 Tree2 feedback
Summary:
1. only useValue from tree root
2. Pass down props for ui state  instead subscribing ad hoc
3. Pass down callbacks, instead of updating atoms ad hoc.
4. Create ui actions object holding api, will use this later on in the vizualizer as some of the same

In general its more verbose but with memoizing perf should be fine should hopefully be easier to reason about components and what they can do as things are more explicit

Hopefully this serves as a general template for how to organise the react code going forward

Reviewed By: lblasa

Differential Revision: D41872490

fbshipit-source-id: 94a33b0e951c04df367ba102fa0a097d4a0389cd
2022-12-12 07:28:37 -08:00
Luke De Feo
1a9724d790 Added inline tree attributes
Summary:
This is temporary solution to get to parity with the old plugin. In future would like to make this more flexible on the desktop side

Additionally getData was renamed to getAttributes for consistency

Reviewed By: lblasa

Differential Revision: D41845248

fbshipit-source-id: 50e94a7712f5d42938229134e212cef5d379475d
2022-12-12 07:28:37 -08:00
Luke De Feo
fc43580134 Memoize tree nodes
Reviewed By: antonk52

Differential Revision: D41838164

fbshipit-source-id: 3184f4ee607f0dd47604265fc259480403c083f0
2022-12-12 07:28:37 -08:00
Luke De Feo
0db0afec21 Fix 'focus undefined' in viz context menu
Reviewed By: antonk52

Differential Revision: D41838173

fbshipit-source-id: 01019614362a1c5154e920faa1a4b6aee83f88c3
2022-12-12 07:28:37 -08:00
Luke De Feo
65d6089ed2 Added context menu and focus mode
Reviewed By: antonk52

Differential Revision: D41838172

fbshipit-source-id: 7c5fad5a7520cea5f0dbabb9f99ef436ad87ec60
2022-12-12 07:28:37 -08:00
Luke De Feo
88e2bb7607 Fix order of items
Reviewed By: lawrencelomax

Differential Revision: D41838169

fbshipit-source-id: 2cc82eb1d50552de5f7970b61f6375d6ff8985fd
2022-12-12 07:28:37 -08:00
Luke De Feo
8784691e62 If no children dont show chevron
Reviewed By: lawrencelomax

Differential Revision: D41809088

fbshipit-source-id: 7f4bef5390561671cc53a12be8aa99ea5efe228c
2022-12-12 07:28:37 -08:00
Luke De Feo
0e51914e9e Made kb controls scroll friendly
Reviewed By: antonk52

Differential Revision: D41838167

fbshipit-source-id: fb32941ed750fa22797586bab8da39880131eac9
2022-12-12 07:28:37 -08:00
Luke De Feo
2692476647 Added scroll into view when when node selected
Reviewed By: lblasa

Differential Revision: D41838165

fbshipit-source-id: 4b135f9bfaf3ac0dd536ab7250a22dc4e739aed6
2022-12-12 07:28:37 -08:00
Luke De Feo
d61f36a0d2 Added basic kb controls to tree
Reviewed By: lawrencelomax

Differential Revision: D41838171

fbshipit-source-id: 1e89c689b2c371f870b1a3f1c7dd8c611426195a
2022-12-12 07:28:37 -08:00
Luke De Feo
a2ce6d5aac Added fast hover to tree
Summary: While moving mouse and changing hover state react render is under 1ms due to subscribing to state rather than passing hover as prop to all components

Reviewed By: lblasa

Differential Revision: D41838168

fbshipit-source-id: c9b3334adc44df5018e0a785684a2883aeb3bab1
2022-12-12 07:28:37 -08:00
Luke De Feo
2bdb068531 Added chevon icon when expanding / collapsing
Reviewed By: lblasa

Differential Revision: D41838170

fbshipit-source-id: f04438d77445736e45e29e2c46e9e8f8dd0906a8
2022-12-12 07:28:37 -08:00
Luke De Feo
a6544489f3 Basic new tree implemenation
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
2022-12-12 07:28:37 -08:00
Luke De Feo
00334acb2b Fixing issue where certain activities not tracked
Summary:
The root view resolver will always find all root views but there was a bug in the listrootviews method. The code was very complex and most of the code seemed to be unneeded. Its now working. The listrootviews method now just returns teh contents of the observable array.

The reason we needed this is that Certain activities dont seem to tracked by the listener we add to `registerActivityLifecycleCallbacks` Its as if there is a floating decor with no activity. One example in FB4a is clicking on a notification in the notifications panel

Reviewed By: lblasa

Differential Revision: D41522791

fbshipit-source-id: b49b0104ddf758f097e1fd3f9ac6588de2d3646e
2022-12-05 07:07:44 -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
Lorenzo Blasa
feb206d069 Tree styles improvement
Summary: ^

Reviewed By: antonk52

Differential Revision: D41579010

fbshipit-source-id: efb7d4300093173d85a3c5c269d79b78fe79908a
2022-11-29 06:02:11 -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
a8f8e081c5 Feedback request banner
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
2022-11-28 11:21:24 -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
Luke De Feo
b214806325 Add padding and refactor our controls component
Summary: also made the controls component full width to push down the visualiser

Reviewed By: lblasa

Differential Revision: D41548665

fbshipit-source-id: 2bca527e70c92bc0ded120e51a0880f76f7cca87
2022-11-28 05:09:20 -08:00
Luke De Feo
a93d571dc0 Unhover on mouse exit of tree
Summary: This was causing the hover state to linger which is now quite noticable in the tree

Reviewed By: lblasa

Differential Revision: D41548249

fbshipit-source-id: cdf8ed434aa064dba05ebf31773bedaef18ba007
2022-11-28 05:09:20 -08:00
Luke De Feo
6183671a5d Improve presentation of node name in hover state for visualizer
Summary: With the previous approach it was hard to read the name of the node, this should be a lot clearer. The tool top comes in a after a delay, the reason for this is because when i tried without a delay when you moved the mouse fast a ton of tooltips would appear and disappear when you passed over diffferent nodes and it was very distracting. 200ms seems to be about the sweet spot

Reviewed By: lblasa

Differential Revision: D41548248

fbshipit-source-id: 76460347730d5b1d2e968984e845be0c65255456
2022-11-28 05:09:20 -08:00
Luke De Feo
57dcf72763 Added ability to pause the incoming updates from the client
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
2022-11-28 05:09: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
Luke De Feo
6bb541a33f Group app wide ui state into one object
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
2022-11-24 09:23:16 -08:00
Luke De Feo
7fc64adfd4 Refactor out UI debugger menu item
Summary: We have to do a couple of odd things to get the context menu items to behave. The code was duplicated between tree and visualizer. This custom component removes duplication and makes the approach a bit clearer (via js doc)

Reviewed By: antonk52

Differential Revision: D41495718

fbshipit-source-id: ec98d5101e636a2c9034c656d29991d4fe348762
2022-11-24 09:23:16 -08:00
Luke De Feo
ca67bfd916 Add context menu to visualizer
Summary: Added context menu to visualizer similar to what we have on the tree

Reviewed By: lblasa

Differential Revision: D41494948

fbshipit-source-id: 0cfa4c98b7a68462a7103ed1ce9eaaff8c99aeee
2022-11-24 09:23:16 -08:00
Luke De Feo
f78899b69f Store context menu open in app wide state to disable all hover effects which cause rerenders and mess up the context menu
Summary: Mouse over event still fires for the dom nodes behind the context menu modal. This will cause state changes and rerenders. Some of the state the context menu depends on can change so it would cause the context menu items to change while its stil open. Now we dont fire those hover state changes while context menu active

Reviewed By: lblasa

Differential Revision: D41494947

fbshipit-source-id: 17918f15d74230d9c7070a4de7a0a0ce10a08001
2022-11-24 09:23:16 -08:00
Luke De Feo
32fe3948d9 Fix issue with visualizer hovering offscreen nodes
Summary: If a node has a global negative offset (e.g from a view pager) its position will be outside of the visualizors bounds and could potentially be where the tree is. The user doesnt see the wireframes since overflow hidden is on the parent node. A situation can arise where when the mouse is over the tree the hit test returns an offscreen node and causes us to hover a random node rather than the tree node hover effect taking place. We are just adding a guard to say if the mouse is outside the dom rect for the root visualization node than dont run the hit test

Reviewed By: lblasa

Differential Revision: D41493001

fbshipit-source-id: ea7974de7f2b80126d52490526a21e2a3b487d3d
2022-11-24 09:23:16 -08:00
Luke De Feo
8ae367dbf6 Added focus mode to vizualizer
Summary: Introduced an outer div which is the size of the real root node so that focusing doesnt shift the UI.

Reviewed By: antonk52

Differential Revision: D41492999

fbshipit-source-id: 336104e5d18d773953e0a58a699acc7660c4045f
2022-11-24 09:23:16 -08:00
Luke De Feo
4b566dbe03 Add ability to focus on a node to tree
Summary: Added context menu to tree nodes that 'focuses' a node. This will make the node the root of the tree. Focus state can be removed again via context menu but we could add a permanent button in the future

Reviewed By: lblasa

Differential Revision: D41493002

fbshipit-source-id: 43ec7a25aeea0b169cbcbb1ac20ac22ea893fee2
2022-11-24 09:23:16 -08:00
Luke De Feo
01f7fa34e5 Remove per node snapshot in favour of single top level snapshot
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
2022-11-24 09:23:16 -08:00
Luke De Feo
b576060339 Pretty loading spinner
Reviewed By: antonk52

Differential Revision: D41343098

fbshipit-source-id: 69b75e7a93344d2a05fa6fac9f466126feaf8cad
2022-11-24 09:23:16 -08:00