Commit Graph

5 Commits

Author SHA1 Message Date
Michel Weststrate
5242a81e94 Fix elements jumping around when making a selection
Summary:
Minor usability improvements, addresses: https://fb.workplace.com/groups/flippersupport/permalink/1133169680497022/.

Handcrafted scroll detection, to make sure elements aren't scroll unnecessarily

Reviewed By: nikoant

Differential Revision: D28438078

fbshipit-source-id: 037f1456a5b6f37a0ea1b9e8318e54b3fad382ec
2021-05-17 03:17:00 -07:00
Michel Weststrate
0fe879c838 Improve multiple element selector UI
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
2021-04-15 07:48:33 -07:00
Michel Weststrate
5db2ef1275 Perf fixes
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
2021-04-15 07:48:33 -07:00
Michel Weststrate
7d9495027b Fix layout inspector re-rendering all elements on all changes
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
2021-04-15 07:48:33 -07:00
Michel Weststrate
69de9bc92d Initial move to flipper-plugin
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
2021-04-15 07:48:33 -07:00