Summary:
Introduced some basic bidirectional link between tree and wireframe, the specific interaction will need some tweaking but this should get us started.
When hovering over the tree we halt the rendering of the wireframe up to that point, this allows us to explore parent views that layout child views.
When clicking a view in the wireframe it is 'seleceted' as if it was clicked in the tree. This set the tree selection so you can identify it in the tree as well as opens the side bar
Reviewed By: lblasa
Differential Revision: D39539277
fbshipit-source-id: 3beb1ad4cb56b398c640ac3e7fac2cc97f3f1a18
Summary: Basic visual wireframe for the purposes of verifying that our captured view hierachy is correct, the actual version we ship will hopefully be a lot better :)
Reviewed By: lblasa
Differential Revision: D39539278
fbshipit-source-id: 73d926ff1990f09ca9877430cb227f690d05d1d4
Summary: Split our the mega component into separate parts in preparation for the visualizer
Reviewed By: lblasa
Differential Revision: D39509406
fbshipit-source-id: 0f867c1f8a91b7592673ae47ba2b5db4f3500732
Summary: While looking at the event stream it is useful to know which observer type fired it
Reviewed By: lblasa
Differential Revision: D39430756
fbshipit-source-id: bc52f085a5497692f8076b12a9c015cc33a19d1e
Summary:
Added concept of a tree observer which is responsible for listening to the changes for a portion of the UI tree. This structure nests so Tree observers can hold child tree observers which emit events on a different cadence. This structure should allow us to incorporate different UI frameworks down the road as well as native android views.
We push the tree updates from the tree observers onto a channel and setup a coroutine to consume this channel, serialize and send down the wire.
Reviewed By: lblasa
Differential Revision: D39276681
fbshipit-source-id: a4bc23b3578a8a10b57dd11fe88b273e1ce09ad8
Summary: A node can have an active child, if present we assume all others are inactive and we don't traverse them. This means the activities not on top and view pager views not active will not be scanned. Additionally on the desktop we are automatically collapsing these views. The net result is a lot less work done on the main thread
Reviewed By: lblasa
Differential Revision: D39310126
fbshipit-source-id: ebd0c69d46f2d42fe42e678c8327fcdc73d08385
Summary: Added scheduler to scan the Native UI every 500 ms to test, Also added instrumentation in a separate event with the timings of each stage visualised in a Data table on desktop which can be accessed with ctrl+I. Currently this instrumentation event is sent every time but it could be a config option controlled from the desktop in the future
Reviewed By: lblasa
Differential Revision: D39205313
fbshipit-source-id: ca034171db6b062396b4ef28028aaa663c4d852a
Summary: Move from a nested structure to a flatten one for data exchange, this will allow us to only send sections of the UI in the future
Reviewed By: lblasa
Differential Revision: D38982138
fbshipit-source-id: d578a07a6d2d7e117fbd741bd6e33062223ce10d
Summary: A very basic tree in Antd to visualise the UI
Reviewed By: lblasa
Differential Revision: D38977035
fbshipit-source-id: f9bbf765ea8027eeb263cad86407502c6a5779dd
Summary:
Scaffolded desktop UI for UI debugger
I changed getroot from an rpc call to an event sent on connect. The root should never change as its the application object.
Reviewed By: lblasa
Differential Revision: D38866008
fbshipit-source-id: ca0f1908bedb643238f11ed796922e3359619167
Summary:
The share preference plugin page flashes when INSPECTOR's width is too large.
## Changelog
Add 'overflowX: 'hidden'' to FlexRow.
Pull Request resolved: https://github.com/facebook/flipper/pull/3903
Test Plan: Pass the test on MAC.
Reviewed By: passy
Differential Revision: D38784840
Pulled By: mweststrate
fbshipit-source-id: 4ca3fc17ccc66767e75ce0f9ab7ad71741dbf15e
Summary:
In order to accomplish multi-panel mode, we need to use multiple data views on the same data source so that the filters can be applied differently, etc.
This diff serves to refactor DataTable and some of its associated classes to use DataView as the primary driver for data management. Additionally, the diff refactored the state to allow multi-paneling to be on the DataPanel layer instead of the DataTable layer for ease of usage
This is the last diff of the larger stack which introduces the multi-panel mode feature. A possible next step could be allowing infinite(up to a certain limit) panels to be populated.
Changelog: Introduced side by side view feature for `DataTable`. There is now a new boolean for `DataTable` props called `enableMultiPanels`. If this is passed in, then the table will have an option to open a different "side panel" using a completely different dataview which allows different filters, searches, etc.
Reviewed By: mweststrate
Differential Revision: D37685390
fbshipit-source-id: 51e35f59da1ceba07ba8d379066970b57ab1734e
Summary:
^
Ignore the errors as otherwise it may cause unhandled rejection errors.
Reviewed By: aigoncharov
Differential Revision: D37926740
fbshipit-source-id: 50476378b4d254e28af953979fbedad1113e43aa
Summary:
Client calls return a promise. Not dealing with the error causes promise unhandled rejection errors.
This change adds a catch block and logs the error instead.
Reviewed By: antonk52
Differential Revision: D37955029
fbshipit-source-id: 50cac5a5339961d16868ab2102d3c77790e6943c
Summary:
Sets a default key binding of `ctrl+l` to clear the screen within built-in Flipper plugins which display a log view.
Motivation: A small quality of life improvement for developers used to the default "clear screen" binding. This makes our log-rendering plugins consistent with other native apps such as terminals, Chrome DevTools, and many others.
Reviewed By: mweststrate
Differential Revision: D37782638
fbshipit-source-id: 0a85b930faaa0e9468d5391f15092aad7b6057ee
Summary:
Currently in the Flipper network plugin implementation, XMLTextFormatter is only enabled if `content-type` is `text/html`.
We should enable it for `application/xml` and `text/xml` as well.
Reviewed By: mweststrate
Differential Revision: D37733487
fbshipit-source-id: f272c5d0a305cf4afd32701d40459c3e11049886
Summary:
A few comments in my rewrite stack got missed, I am addressing them here.
In addition react testing library has been hoisted to the root module in the project and been made available to all sub modules
Reviewed By: mweststrate
Differential Revision: D37712339
fbshipit-source-id: 60984c3d16bd535b0c489570907f097c7d80f634
Summary:
Bootcamp task:
I’m removing the remaining UI components imported from ‘flipper’ and replacing with new ones from ‘antd’.
I’m also attempting to polish 🇵🇱 the UI and UX of the plugin:
UI:
- Selecting one of the listed sandboxes and custom URL lead to the same action -> align all components together
UX:
- Sometimes loading sandboxes takes time, and it’s not clear for the user what’s happening -> add a loading indicator
- At first the input field was a bit confusing to me -> add more labels to explain the purpose of visible components
- It’s not always clear what happened after requesting a sandbox change -> the result of all actions is now confirmed with the small 'popup' notification.
I don't have any experience with web frontend, so if something is terribly wrong below - don't be afraid to point it out :)
Before/After:
{F745958473}
Reviewed By: mweststrate
Differential Revision: D37343946
fbshipit-source-id: 3dbdd213ffd5540dc7a418c1590eb956ef4c6715
Summary: Use BasDevice definition from flipper-frontend-core in flipper-ui-core and remove the redundant definition from flipper-ui-core
Reviewed By: lblasa
Differential Revision: D37234785
fbshipit-source-id: 6e768090a197c1d2c49cb1cd573acea12fb65d24
Summary: This stack attempts to start using flipper-frontend-core from flipper-ui-core. Currently, flipper-frontend-core contains lots of copy-pasted code from flipper-ui-core.
Reviewed By: lblasa
Differential Revision: D37139198
fbshipit-source-id: 042db7492c550e10ea72c32fd15001c141bf53f9
