Commit Graph

634 Commits

Author SHA1 Message Date
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
f34b6f52ed The ui debugger grows up
Reviewed By: lblasa

Differential Revision: D41549291

fbshipit-source-id: d3c72c01f6b7bd2a3be8a35d5f54270b64191e21
2022-11-28 05:09: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
d9314c3b73 Fix Focus mode bug when is the decendant of an inactive node.
Summary: If you focus a node and then move activity then the focused nodes will no longer be active. this means that they are automatically collapsed in the tree and the visualizer wont be display it. Previously we didnt spot this and the focus state was wrong. Now we check that all parents are active whenever an update comes from client, if the focused node is no longer active after an update then we remove the focus

Reviewed By: lblasa

Differential Revision: D41548250

fbshipit-source-id: d536e0c466d9002fc53bcb43b9b29c7c7fa23ad2
2022-11-28 05:09:20 -08:00
Luke De Feo
8eb0866760 Add parent reference to desktop node
Summary: There are some situations where we are doing a traversal of the entire node hierachy looking for something. In some situtations this linear search can be replaced with a walk up the anchestory path making the code easier to understand and more efficient

Reviewed By: lblasa

Differential Revision: D41548253

fbshipit-source-id: 4fb2141282f1f9663835c3b7812d30dcc59b707e
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
56b717c197 Track performance
Summary: Track performance for subtree updates

Reviewed By: antonk52

Differential Revision: D41531057

fbshipit-source-id: b9cfd04e5d22796f026c56d2fc66c7dea8accb78
2022-11-28 02:54:42 -08:00
Lorenzo Blasa
7f5592a68b Suggest ui-debugger from layout
Summary: Increase awareness of ui-debugger by displaying a notification.

Reviewed By: LukeDefeo

Differential Revision: D41530681

fbshipit-source-id: bf0aaeb8bb5fdc88e2425371fb04155cec739ba4
2022-11-28 02:40:38 -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
Luke De Feo
3722ac1fea Permanent search bar
Summary: Out of the box the library search has some issues. when search matches it steals focus from the input. Eventually we want to customise the rendering of the tree items anyway so this lays the foundation for taht

Reviewed By: antonk52

Differential Revision: D41336524

fbshipit-source-id: 194f67023edd0675cd9bd8d6134260439c6b2785
2022-11-24 09:23:16 -08:00
Lorenzo Blasa
43f44652f4 Change snapshots format to png
Summary:
There was an issue whereas snapshots were not properly rendered on retina devices.

After running a few tests, the issue seems to be solved by changing the snapshot format from jpeg to png.

Reviewed By: antonk52

Differential Revision: D41520939

fbshipit-source-id: 1563fe89162e41f71418357a7e58caaf46581f04
2022-11-24 07:14:55 -08:00
Kevin Strider
89740f7e0a Features
Summary: This diff includes minor changes to the pages within the Features section of Flipper Docs.

Reviewed By: passy

Differential Revision: D41471000

fbshipit-source-id: 0a414d1e5e0cff5d874d3fe6eab647c3877b9caf
2022-11-24 06:18:38 -08:00
Kevin Strider
98d2f37f10 Setup - Part 2
Summary: This diff includes minor changes to the pages within the Setup section of Flipper Docs.

Reviewed By: mweststrate

Differential Revision: D41496698

fbshipit-source-id: a338931bd08e474ee348e25798463647f9a0be29
2022-11-24 06:18:36 -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
Luke De Feo
7ec09b4f95 Shift fetching litho attributes to background thread
Summary: Due to litho component instances being immutable we are able to process them later if we hold on to the instance. We have added a Maybe deferred type which sort of resembles a Monad. It wraps a value which may or may not be calculated later.

Reviewed By: lblasa

Differential Revision: D41474251

fbshipit-source-id: 2ba6e688518dba55cf4aa5ba53f390a92cf0921f
2022-11-23 03:45:26 -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
Luke De Feo
1d920efe10 Change hit test to explore all nodes
Summary:
Previously we would only consider a node hit if the nouse pos was inside every parents. There are a few reason why this isnt ideal:
1. Fragments are return 0 bounds
2. Many hierachys (particually in litho ) have nonsensical strucutres where your parent may have hieght 0, or children overflow parents bounds. Therefore it was impossible to select many nodes but unclear why

Reviewed By: lblasa

Differential Revision: D41304499

fbshipit-source-id: d75c8060f71fa0b972f136cb11258b62a9c98ebc
2022-11-16 10:38:23 -08:00
Luke De Feo
477eae1993 Hit test can produce multiple nodes
Summary:
There are situations where multiple siblings overlap and they are both hit. Previously we picked the first one in the hierachy. Now we produce a list of hit children. The list will not have 2 nodes in the same ancestor path.

We store the hovered nodes as a list as we may want to present a modal in future to ask user which node they indented to select. That said simply sorting nodes by area seems to give decent results so we can start with this

Reviewed By: lblasa

Differential Revision: D41220271

fbshipit-source-id: 643a369113da28e8c4749725a7aee7aa5d08c401
2022-11-14 07:05:58 -08:00
Luke De Feo
062e87f50f Use mouse position for hit test for 2D vizualizer
Summary:
The Dom events for the divs that are very close together were not firing correctly causing the old implementation to not track the hovered node correctly. This was really frustrating trying to select a node amongst many close neighbours.

The new approach uses the mouse x,y position and performs a hit test. Currently we do a dfs looking for the first deepest child that interests the mouse x,y. In a future diff we will extract a list when there are multiple candidates.

Hovered node was removed from react props since both the tree and visualisor depend on it meaning when hover state changes the whole app is rerendered. Instead we have moved hover state to an atom which is subscribed to by each visualsation node. Only if the old or new value matches the particular nodes id do we set state. The viz nodes were memo'd to prevent children renderning. The result is that for a hover change at most 2 nodes out of the 500 or so will rerender.

I attempted to do the same with the tree but it wasnt working with the controlled tree environment + focus state. The perf seems fine as is so will leave it for now

Reviewed By: lblasa

Differential Revision: D41218324

fbshipit-source-id: 7f80bcee256abad2689a88d7e209f92417aab672
2022-11-14 07:05:58 -08:00
Luke De Feo
bfe098485f Nested node structure for vizualiser
Summary: This structure makes sense for the vizualiser which itself is a nested structure. It also saves the awkward branch of there is no key in the map.

Reviewed By: lblasa

Differential Revision: D40670371

fbshipit-source-id: 6c1b960a77749be9e8a193decf6b8d50ce6c7968
2022-11-14 07:05:58 -08:00
Shreesh Ayachit
79bf56e72c Add export and import to Shared Preferences plugin
Summary:
We want to enable backing up and restoring debug settings between app installations.

Currently it is a manual process to click into menu and perform multiple operations.

With this feature, we can export and import shared preferences which will eliminate manual steps on devices.

Reviewed By: mweststrate

Differential Revision: D40987341

fbshipit-source-id: 15dd9600ee5cfd80a085117bdba4d434e4d2198f
2022-11-11 07:09:09 -08:00
Lorenzo Blasa
612bd69605 Styles refactoring
Summary: This change extracts most styles used across the inspector components and puts them in Styles.tsx

Reviewed By: passy

Differential Revision: D41026862

fbshipit-source-id: 461a78fb4a707d9a455281ec020bac95191ddfce
2022-11-11 03:22:39 -08:00
Lorenzo Blasa
f33e3fc78b Add qualified name to Node
Summary:
Our descriptors currently have a method to return the name as it will be displayed on the elements hierarchy.

However, it doesn't provide enough context if the name is to be used to discover the type in our code base.

This change adds a qualified name method that can provide a more complete name which can indeed be used by the Open In IDE functionality, for example.

Reviewed By: passy

Differential Revision: D40936785

fbshipit-source-id: 790ae02b9ebf37501765c52a24307fcaaaf9c14d
2022-11-11 03:22:39 -08:00
Lorenzo Blasa
caaded026b Big Grep Search
Summary: Add Big Grep Search for Android elements.

Reviewed By: antonk52

Differential Revision: D40634183

fbshipit-source-id: faecfc8900211478655ddff6499ff797e3136f91
2022-11-10 11:52:28 -08:00
Lorenzo Blasa
01dc22b1ab Attributes Metadata
Summary:
Before this change, attributes and attribute metadata were intermingled and sent as one unit via subtree update event.

This represented a few issues:
- Repetitiveness. For each declared and dynamic attribute, metadata was included on each value unit.
- Metadata can vary in size and thus can have a negative impact on payload size.
- The attribute name which is part of metadata is a string which always overhead on processing.
- Metadata instantiation is not cheap thus this also incurs in processing overhead i.e. even instantiating a single string can have an impact.

The proposal is to separate metadata of attributes from the actual node reported attributes. This solves the problems mentioned above.

Reviewed By: LukeDefeo

Differential Revision: D40674156

fbshipit-source-id: 0788551849fbce53065f819ba503e7e4afc03cc0
2022-11-10 11:52:28 -08:00
generatedunixname89002005306973
019bcaeb9e Flipper Release: v0.174.0
Summary: Releasing version 0.174.0

Reviewed By: mweststrate

Differential Revision: D41154768

fbshipit-source-id: bc9dbccae2ae413024a6573ec7ba57f4933f1741
2022-11-10 06:52:13 -08:00
generatedunixname89002005306973
aef077f54f Flipper Release: v0.173.0
Summary: Releasing version 0.173.0

Reviewed By: lblasa

Differential Revision: D40803306

fbshipit-source-id: 502ae3cb94994454c31aee05573ec1d43150862a
2022-10-28 09:27:02 -07:00
Lorenzo Blasa
587f428cf8 Allow plugins to use css
Summary:
Flipper plugins fail when importing css from third-party dependencies. This diff tries to fix that.

Effectively, the plugin can import the css and export it when is bundled.

When we load the plugin, we check if there's a css file for it. If there's one, we return it and try to use it.

Reviewed By: aigoncharov

Differential Revision: D40758178

fbshipit-source-id: e53afffcc481504905d5eeb1aea1f9114ee2a86b
2022-10-27 22:50:30 -07:00
generatedunixname89002005306973
1923ad0142 Flipper Release: v0.172.0
Summary: Releasing version 0.172.0

Reviewed By: aigoncharov

Differential Revision: D40720215

fbshipit-source-id: 24b3c7a82d285ee6bfc1819a38aaa7243350ea0a
2022-10-26 08:55:46 -07:00
Luke De Feo
b2c7d67586 More subtile selection and hover state for vizualizer
Summary:
Old hover state is now selection state
New hover state is a slightly thicker border

Reviewed By: lblasa

Differential Revision: D40637724

fbshipit-source-id: 7b13bc864bc1f626cf0982517befcb80615e7cc0
2022-10-25 07:10:38 -07:00
Luke De Feo
f282a5eb8a Ant tree -> React complex tree
Summary:
Upgraded from ant tree library to the much more capable React complex tree. Added the following:
1. Ability to expand / collapse nodes while automatically expanding / collapsing active/inactive children when they change
2. Keyboard controls of tree all the time
3. Basic search functionality
4. Selecting node in tree focuses and scrolls in the tree
5. Hover state for tree

Reviewed By: lblasa

Differential Revision: D40633876

fbshipit-source-id: 8dcef5ec2c277e476a3eb3cdaef62b15c25323c0
2022-10-25 07:10:38 -07:00
Luke De Feo
0c52ad307e Improve selection in vizualizer
Summary:
Clicking on a node a second time will unselect which was impossible before.

The behaviour of the on click handler doesnt always line up what is currently hovered, this is a temporary work around. There are deeper issues with this in that on exit we hover the parent, but in some situations the parent is too small to propagate. In future we will use the mouse position and do a hit test and drive selection / hover from that

Reviewed By: lblasa

Differential Revision: D40637356

fbshipit-source-id: 9df19dbf619845891bb46624730d7cf74f73cf25
2022-10-25 07:10:38 -07:00
Luke De Feo
b1bee28f08 Coordinate update event when litho scrolls or is shifted
Summary: See doc comment for explanation

Reviewed By: lblasa

Differential Revision: D40587610

fbshipit-source-id: f0909440c4e6e3cc9f5c7b557198a93ba8809bd9
2022-10-25 07:10:38 -07:00