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
Summary: This adds a filter on top of the event types to only highlight when the thread occurs on the main thread
Reviewed By: lblasa
Differential Revision: D47520036
fbshipit-source-id: b4a67b262345d845e5dcbf79bba5a210c1bca4f8
Summary: The previous approach would set the atom many times causing several unnecessary renders
Reviewed By: lblasa
Differential Revision: D47519869
fbshipit-source-id: 536334c892334035a6c0fefc86a2e205b2c9769d
Summary: I was experiencing some odd behaviour and locks ups from deep within Ant d. It seems to be related to the fact that tooltips for the visualiser were showing up when there was a modal on top.
Reviewed By: lblasa
Differential Revision: D47519848
fbshipit-source-id: d67edaedba2910069ba1eb424548de55c2badff3
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
Summary: It was complaining about no key for items in a list
Reviewed By: antonk52
Differential Revision: D47396639
fbshipit-source-id: c3d5cb7205dbe1c343d109e22f43e5756a071119
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
