Summary:
With new abstraction, `DataList` matches what the plugin trying to render.
Should fix:
https://fb.workplace.com/groups/flippersupport/permalink/1145431339270856/
Changelog: [MobileConfig] Fix issues with scrolling not working and several other improvements
Reviewed By: cekkaewnumchai
Differential Revision: D28314408
fbshipit-source-id: 4d8fbe3d8e868f737750203cd568d94bae8b4108
Summary:
Re-introduced context menu to DataTable, due to popular demand.
Originally it wasn't there to better align with ant design principles, but in an app like Flipper it makes just too much sense to have it
See e.g. https://fb.workplace.com/groups/flippersupport/permalink/1138285579985432/
changelog: Restored context menu in data tables
Reviewed By: passy
Differential Revision: D28996137
fbshipit-source-id: 16ef4c90997c9313efa62da7576fd453a7853761
Summary: Fixed minor keyboard navigation annoyance: pressing arrow down on the last entry would remove selection, then jump to first row. Pressing up on first row would deselect then select first again. After this change the first/last item is kept selected in those cases
Reviewed By: passy
Differential Revision: D28958705
fbshipit-source-id: 01dbce3971ed965eae3b74e6706fef96aa86df66
Summary: some type simplifications, that makes it easier to reuse data sources and helps type inference
Reviewed By: passy
Differential Revision: D28413380
fbshipit-source-id: 261a8b981bf18a00edc3075926bd668322e1c37d
Summary:
Improving usability of the WAIQWatch plugin.
Also fixing a bug in `MasterDetail`, which didn't use `sidebarSize` as `height` when detail panel is shown at the bottom.
iOS companion diff here: D28756787
Reviewed By: tomw
Differential Revision: D28751609
fbshipit-source-id: ba27ae7ce3596179752c963dba1bf4b994767c2a
Summary: Changelog: Increased contrast of timestamps text on marker timelines used in several plugins (QPL, Sections)
Reviewed By: mweststrate
Differential Revision: D28707431
fbshipit-source-id: 8749a95fccf895bddf707c1d830baf5c65578fb9
Summary: When reporting errors we could add info about interactions which caused errors. Ability to connect errors and interactions could be quite helpful for analysing and debugging errors and where they are coming from.
Reviewed By: passy, mweststrate
Differential Revision: D28467575
fbshipit-source-id: bef69917a4d6c786d762a2f6eb75a47fd4e46b0f
Summary: Tracked component catches rejected promises under it to log them. After catching promises become "handled". This might hide potential promise error handling mistakes, so it's better to ensure we keep promises unhandled after catching them for tracking, so they are properly catched by the unhandled promise handler after that. The easiest solution seems to just make new rejected promise and return it instead of the catched one.
Reviewed By: passy
Differential Revision: D28466570
fbshipit-source-id: 26c1e7af3d6e4f7067b95f20e646462d808bb497
Summary:
Fix performance issue in rendering sidebars
Noticed during debugging that sidebars are continuously re-rendering if the mouse is on top of them, which is caused by the mouseMove handler of resizable containers always updating the state with a fresh object, causing a render (see yellow rectangles in test plan). Short circuited this by checking if the resize state should actually change and bailing out otherwise.
Reviewed By: nikoant
Differential Revision: D28441431
fbshipit-source-id: b3f125f3a392a5cf9b021a6636ba39b5a23d541c
Summary:
Changelog: [Logs] Fix regression causing the scrollbars to be hidden. This diff fixes a regression where the Logs plugin was no longer scrollable (and scrolls indefinitely, killing perf).
As reported in https://fb.workplace.com/groups/flippersupport/permalink/1133775743769749/
The cause of the problem is the swap between the `PluginContainer` and `outOfContentsContainer`.
The deeper root that caused in the first place, is that containers use a `flex: 1` layout, which gets interpreted as `flex: 1 1 0%` (grow, shrink, 0% by default), where it was always inteded to be `flex: 1 1 0` (grow, shrink, by default zero pixels). In practice that difference usually doesn't matter. But sometimes it does... See https://stackoverflow.com/a/42630660/1983583
My whole life has been a lie up to this point.
Will trigger a new release after landing this.
Reviewed By: nikoant
Differential Revision: D28422966
fbshipit-source-id: 3ebd5f8ae76e032c5d698154b021df8ebef2c757
Summary:
Added a microbundle based build setup to the data-source folder to be able to package just that folder.
For simplicity / iteration speed, this is only used to publish externally. Our own code still references the source files directly.
More strict separation can be done later if there is external adoption.
Reviewed By: nikoant
Differential Revision: D28056699
fbshipit-source-id: a011b615cfffeff8ecb879bd7281a71085cea965
Summary:
To make the DataSource abstraction reusable for other teams and an upcoming talk, this diff moves all DataSource storage & virtualization logic in one folder.
Will set up a build process and demo project in later diffs.
Reviewed By: nikoant
Differential Revision: D28056700
fbshipit-source-id: 7cfe5b40bbbe387da711f765a604a45029d451c7
Summary: Found a small issue in the column width calculation where initial invisible columns still got space assigned.
Reviewed By: passy
Differential Revision: D28221659
fbshipit-source-id: ef052533bc37bc833bab72979803ce36bcf50e61
Summary:
With proper notification, components and code clean up in place, time for the reward and giving the plugin a fresh look.
Changelog: CrashReporter plugin got a fresh look and several navigation issues were addressed.
Reviewed By: passy
Differential Revision: D28102398
fbshipit-source-id: 5721634e45c5b1fc5fba3fb0c0b8970635b80b46
Summary: Added wash color option to Toolbar, made codeblocks transparent rather than gray & bordered, which looks cleaner
Reviewed By: passy
Differential Revision: D28119720
fbshipit-source-id: 9d1f4db5b39a91d9d117046bd5482726ac2f555d
Summary:
Changelog: Standardized DataList component
This diff standardizes the DataList component, by reusing the DataList. This is done to be able to take full advantage of all its features like virtualisation, keyboard support, datasource support, etc.
Also cleaned up DataTable properties a bit, by prefixing all flags with `enableXXX` and setting clear defaults
Reviewed By: passy
Differential Revision: D28119721
fbshipit-source-id: b7b241ea18d788bfa035389cc8c6ae7ea95ecadb
Summary:
Code blocks are quite common in Flipper, and a bit verbose in Ant, so let's standardize!
Changelog: Standardize CodeBlock component
Reviewed By: passy
Differential Revision: D28117560
fbshipit-source-id: 5a5538a49b59ef40c814d22055fac56e7598cbbb
Summary:
Increase the mouse target for copying values from the the tree in a data inspector to the full row, not just the text.
Not sure if bringing reversing the order here has any unintended side-effects, but in testing it seems to work fine.
Reviewed By: mweststrate
Differential Revision: D28185064
fbshipit-source-id: b9b86a7e181bfd0083f2a3bcb24c571b5ec4647e
Summary:
Noticed a regression in sticky scrolling not being sticky. I suspect this is caused by pixel inaccuracy + rounding, but our offset from bottom calculation consistently now reports `1` when being at the end of the scrollable region.
Too bad it is really hard to protect against these kind of regressions automated.
Reviewed By: passy
Differential Revision: D28095803
fbshipit-source-id: 1dbd57d84fb308023c2300c543aca344bf27ec28
Summary: This fixes an earlier reported issue with Messages plugin, if no column widths are set values can jump around per row
Reviewed By: passy
Differential Revision: D28090807
fbshipit-source-id: be124b94f507584cf177710816035cd280a5ef01
Summary:
Noticed in reviews during the convertathon there is still quite some boilerplate in things that happen on the boundary of UI and plugin state, such as setting up menu entries and providing common functionality like clear, master/detail layout, etc.
This diff introduces the `MasterDetail` component, which takes a higher level approach by merely needing to provide the state atoms and desired features, and taking care of the wiring.
Applied it to createTablePlugin, to prove that going from `createTablePlugin` to `MasterDetail` will be a much smaller step now.
Verified on the funnel logger plugin
Reviewed By: passy
Differential Revision: D28090362
fbshipit-source-id: 146f8c315fea903901ad4e3e46711642f16cf0e6
Summary: This diff exposes the createTablePlugin from flipper-plugin, so that createTablePlugin based plugins can be converted to Sandy as well
Reviewed By: jknoxville
Differential Revision: D28031227
fbshipit-source-id: 8e9c82da08a83fddab740b46be9917b6a1023117
Summary: Having time / async / non-blocking behavior in components in unit tests is really annoying, as it makes unit tests async without an easy way to determine 'done'. This diff makes sure that DataTable & DataInspector don't break down their work in smaller tasks, but do everything block if they are running in a unit test.
Reviewed By: nikoant
Differential Revision: D28054487
fbshipit-source-id: 72c3b519e092ad69ed71eb1731e1fed80022f91f
Summary:
Two minor renames:
* `DataInspector` => `DataInspectorNode`
* `ManagedDataInspector` => `DataInspector`
This aligns the internal and public name of the component, and better captures the meaning of the original `DataInspector` class.
The diff looks quite hefty, but that seems to be a phabricator issue caused by the filename swap; barely a thing changed :)
Reviewed By: jknoxville
Differential Revision: D28028554
fbshipit-source-id: d3d61fcb50abffaeae4bd1d26966604cece37b03
Summary: Moved Toolbar to flipper-plugin. No further changes.
Reviewed By: nikoant
Differential Revision: D28027334
fbshipit-source-id: 35de13d87734ae3a8af037166945b1a669106274
Summary:
Introduced the `scrollable={false}` option to DataTable, that gives the table its natural size, while still having all the other gimmicks of DataTable, like search, filter, etc etc.
To implement this, a non-virtualizing rendering is needed, which is handled by the `StaticDataSourceRenderer`
Also introduced the option to hide the searchbar.
Reviewed By: nikoant
Differential Revision: D28036469
fbshipit-source-id: 633c4f7f3fabfa99efa2839059aaa59b0a407ada
Summary: This diff allows using a DataTable without setting up a full datasource, which is simpler in case the dataset is small and/or fixed. For an continuously growing dataset a DataSource should still be set up.
Reviewed By: jknoxville
Differential Revision: D28037897
fbshipit-source-id: 2e56b1970e19f967c3752a78737b8f7a3f934b87
Summary:
Ant'd tabs didn't allow for vertical fill out. Introduced our own tiny wrapper that has `grow` by default.
Also made sure the users last selection is remembered.
Reviewed By: cekkaewnumchai
Differential Revision: D28026345
fbshipit-source-id: 7703bc241cd1427336b7c917bdb5be9f56bba9b9
Summary: Introduce the DataList component. Not feature complete yet, but core functionality is present so that people can use it during the convertathon. It is used to implement the route list in the network mock dialog
Reviewed By: priteshrnandgaonkar
Differential Revision: D27046716
fbshipit-source-id: a247ce7032b350b31bf55962ca4268e30f43471a
Summary: Expose a Panel api from Sandy, which is quite similar to the old one, except that it uses Antd, and it will remember the users closed / open preference through sessions, a much requested feature.
Reviewed By: nikoant
Differential Revision: D27966607
fbshipit-source-id: 9b18df377215c1e6c5844d0bf972058c8c574cbb
Summary:
Some styling fixes and minor improvements in DataTable, used by network plugin:
- be able to customise the context menu
- be able to customise how entire rows are copied and presented on the clipboard to be able to deviate from the standard JSON
- deeplink handling was made async, this gives the plugin the opportunity to first handle initial setup and rendering before trying to jump somewhere which is a typical use case for deeplinking
Reviewed By: passy
Differential Revision: D27947186
fbshipit-source-id: a56f081d60520c4bc2ad3c547a8ca5b9357e71a1
Summary:
This fixes an issue where `Layout.Top/Right/Left/Bottom` would not render its secondary child in the remaining size, if the primary child is empty (`null`). This is caused by React not rendering anything for null children, and as a result the CSS rules for the primary child would then match the second child.
In the example below making the component tree invisible if there are no bundles in the NT/Bloks plugin. Fixed by rendering a zero sized element instead.
Reviewed By: jknoxville
Differential Revision: D27793382
fbshipit-source-id: 1e76b51986c30a6a0d98e9356fcad4dd8d5d5f91
Summary:
Layer selection is pretty easy to miss, as reported in for example: https://fb.workplace.com/groups/flippersupport/permalink/1098169193997071/
Moved the layer selection to the top of the view and gave it some highlighting + dynamic height. The section is no longer collapsible.
Changelog: [Layout] Make the layer selection more prominent
Reviewed By: priteshrnandgaonkar
Differential Revision: D27708650
fbshipit-source-id: c86a55c3a20794aee86e64b6766b2ca4dd6b563f
Summary:
This diff fixes some more perf bottlenecks in the layout inspector (see the diffs earlier in the stack for the total picture). Mostly:
1. Pass down stable refs from the root for callbacks and configuration
2. Remove the deep-equality check in the sidebar section rendering, which has a pretty significant constant overhead, especially if the selection didn't change
3. If the selection changes, the correct semantics is to reset the sidebar rather than trying to reconcile the elements. (A consequence of this is that Panel collapse state isn't preserved atm after changing selection, will address that in a later diff)
This reduces average render time for sidebar from ~20 to ~2 ms.
Reviewed By: priteshrnandgaonkar
Differential Revision: D27677353
fbshipit-source-id: ba183b7e3d778c0b3c8e7ca0d51535ce99a097ca
Summary:
Changelog: [Layout] Addressed several performance issues in the layout plugin
This diff and a few of the next stuff fix some performance issues in the Layout plugin. This diff fixes an issue where computing the context menu will cause all rows to render at all times, make the responiveness of the plugin quite slugish.
The fix in this case is to build up the context menu lazily, and pass a stable ref to the function through the tree, rather than a new menu every time the root component renders.
The changes in this diff and the next ones in total reduces the time (in prod builds) to draw a frame from ~200ms to ~5ms.
Reviewed By: cekkaewnumchai
Differential Revision: D27685983
fbshipit-source-id: a48b2ce2cdd1db31bb13122924617cbc3b6c198a
Summary:
This diff moves the core of ElementsInspector to flipper-plugin and decouples it from legacy design system and Electron, without any significant improvements or API changes yet, which will follow later.
Colors and docs will be added later in this stack.
Reviewed By: passy
Differential Revision: D27660300
fbshipit-source-id: 96abfa3b3174fa852cf04ae119c23c3d629fee74
Summary:
This diff moves the rest of the DataInspector jungle to flipper-plugin. No actual improvements are made yet, but the code is decoupled from Electron and the legacy theming. For example by using Antd based context menus.
Note that `ManagedDataInspector` is now rebranded `DataInspector`, as that is the only variation that should (and is) used publicly.
For the interactionTracker removal, see next diff.
SearchableDataInspector will be addressed in a next diff
Reviewed By: passy
Differential Revision: D27603125
fbshipit-source-id: 188bd000260e4e4704202ce02c7fc98319f0bc22
Summary:
Another utility component used by DataInspector.
Colors have been hardcoded for now, to decouple from the classic Flipper color palette. Will organize this better later in this stack, and when addressing / adding support for dark mode.
Buttons, checkboxes, selects have been replaced by Antd's counterpart.
Unlike ManagedDataTable, the DataInspector is primarily moved rather than copied & adapted, as the underlying abstraction / API won't change significantly. So the changes here will immediately affect all plugins in Flipper using this component.
Reviewed By: passy
Differential Revision: D27603126
fbshipit-source-id: bacd48c9af2b591033e7f2352627f11acb4df589
Summary: This stack moves the DataInspector component to flipper-plugin. The first diffs will move some utility abstractions to turn this into smaller steps
Reviewed By: passy
Differential Revision: D27591890
fbshipit-source-id: d0285ca31b6c9b334000dd15c722b9bda7638d73
Summary: just a rename, as we will have `data-inspector` folder as well in next diffs.
Reviewed By: passy
Differential Revision: D27591891
fbshipit-source-id: b1fe92cbf4be1633e623e59b694efc3f687c3413
Summary: Message truncated worked in devs build, but failed in production build, as it JSON formatted React elements in prod build (incorreclty), while it didn't do so in Dev builds, as in dev that generates an exception (undesired) meaning the serialisation gets skipped (desired).
Reviewed By: passy, nikoant, priteshrnandgaonkar
Differential Revision: D27467280
fbshipit-source-id: 1f8e0ca4750464c778c33b69a8cf13d05f019143
Summary:
Changelog: Added an explicit autoscroll indicator in logs and fixed snapping
We got several reports that auto scrolling was to aggressive, so revisited the implementation and the new one is a lot more reliable. Also added an explicit indicator / button to toggle tailing.
Exposed ant's active color as well in our theme, as it gives better contrast on the buttons than Flipper purple.
Reviewed By: passy
Differential Revision: D27397506
fbshipit-source-id: 5e82939de4b2f8b89380bd55009e3fa2a7c10ec9
Summary:
Fixed a longer standing issue where after a horizontal resize the rows wouldn't redraw until new data arrives (or the user scrolls), resulting in rendering artefacts.
Also introduced a hook to force a reflow of contents if the contents of a hook changes. It's a bit leaky abstraction, but does keep the virtualization performant if dynamic heights are used.
Reviewed By: passy
Differential Revision: D27395516
fbshipit-source-id: 1691af3ec64f1a476969a318553d83e22239997c
