Summary:
Requested by litho team
Changelog: UIDebugger Add seperate icon for litho mountables
Changelog: UIDebugger Serialize all props using java.lang.toString
Changelog: UIDebugger show drawables mounted by litho
Reviewed By: lblasa
Differential Revision: D47295799
fbshipit-source-id: ce5b9384e4796a5c58080a289709ed9f7afdf329
Summary:
We had feedback that when a small eleemnt was selected it was hard to find, this should help
Changelog: [UIDebugger] Make selection more prominent in the visualiser
Reviewed By: lblasa
Differential Revision: D47223504
fbshipit-source-id: 33b448d36b0323e958e45fd1d0e2c7f659de293c
Summary:
Following feedback when using keyboard controls its a little bit awkward to have to move with arrows and then select with enter.
Now when using keyboard controls you are manipulating the selected state.
Enter still selects / unselects but its not really needed anymore
When using the mouse the hover state is still there
Changelog: [UIDebugger] Using keyboard arrow control changes the selected and hovered state together for faster / easier navigation
Reviewed By: lblasa
Differential Revision: D47212492
fbshipit-source-id: 996196880d623885b4d4b7d1a70954201f809d28
Summary:
To avoid showing the Ugly spinner in the context menu as well as a better UX we prefetch the IDE resolved path. It was important to limit the concurrency of the running arc jobs otherwise lots of bad things happen and the whole machine stalls out.
The general idea is as the frame comes off the wire we send them to react query to prefetch. by setting the cache time sending the same key twice will not result in 2 fetches, so we dont need to worry about deduplication on our side
Reviewed By: antonk52
Differential Revision: D47210292
fbshipit-source-id: 4a1d8efdfae754c1a73c6a868b02d1f3a0a5b567
Summary:
Originally we planned to move the IDE inline in the row but this is hard to do well, especially with the horizontal scroll as well as the extra buttons for biggrep, codehub, AS and vscode.
Context menu is still very natural so lets try this
Reviewed By: lblasa
Differential Revision: D47210289
fbshipit-source-id: 339508c820915298161bf95fd1c3cea60b800746
Summary: node count and root node prescense will be very useful
Reviewed By: lblasa
Differential Revision: D47153394
fbshipit-source-id: 067f6f3aefa17cdfa88124956781400f53fe08d7
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:
^
Basically, update Jest and fix any raised issues. Mainly:
- Update necessary dependencies
- Update snapshots
- `useFakeTimers` caused a few issues which meant that the way we hook into the performance object had to be tweaked. The main code change is: `//fbsource/xplat/sonar/desktop/scripts/jest-setup-after.tsx`
- `mocked` -> `jest.mocked`
Changelog: Update Jest to v29.5.1
Reviewed By: antonk52
Differential Revision: D46319818
fbshipit-source-id: d218ca8f7e43abac6b00844953ddeb7f4e1010a2
Summary:
Brotli response decoding was introduced via https://github.com/facebook/flipper/pull/4288, and released in 0.177.0. We noticed from that release that many of our iOS response bodies were not being rendered. It simply showed `(empty)` in the `Response Body` section.
As noted in the gzip decoder ([here](2a52656d0b/desktop/plugins/public/network/utils.tsx (L117-L119))) within Flipper, iOS already provides an inflated `data` value, so it doesn't need inflating again.
This PR adds a best-effort guess to detect when the same problem arises in the Brotli decoder.
I'm definitely not a Brotli expert, but according to [this SO post](https://stackoverflow.com/questions/39008957/is-there-a-way-to-check-if-a-buffer-is-in-brotli-compressed-format), there's no sure-fire way to detect Brotli data, and some blobs of random data will still present as Brotli. We may still occasionally see false positives that continue to show `(empty)`, however in my testing, all of our server responses have rendered JSON responses perfectly.
The library used for decoding doesn't throw an error on failure with any responses we've seen, it just simply returns a 0-length buffer. So the naïve approach taken in this PR simply looks for a 0-length output buffer on a non-zero-length input buffer, and concludes "probably not Brotli, shrug emoji".
## Changelog
Ignore Brotli decode result on 0-length return value
Pull Request resolved: https://github.com/facebook/flipper/pull/4632
Test Plan:
We can use Facebook's servers to test this. Fire up a RN app, and add the following somewhere you can run it:
```typescript
fetch('https://graph.facebook.com/facebook/picture?redirect=false', {
headers: {
'accept-encoding': 'br',
},
})
```
Before this patch, we can see that `Response Body` is `(empty)` in Flipper:
<img width="1211" alt="Screenshot 2023-03-30 at 1 26 48 am" src="https://user-images.githubusercontent.com/33126/228690254-988b5a01-5d7b-4ab3-b6dc-49f3b0607d10.png">
But after this patch, we can see some valid JSON in the `Response Body`:
<img width="1213" alt="Screenshot 2023-03-30 at 1 26 07 am" src="https://user-images.githubusercontent.com/33126/228690351-9611759a-5b7d-4ccb-9170-22b950c8afbe.png">
Most importantly, both responses have `Content-Encoding: br` headers.
Reviewed By: passy
Differential Revision: D46219337
Pulled By: mweststrate
fbshipit-source-id: 2ae775d381fa325c6d9e543bdbc617d1fd986671
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
