Commit Graph

497 Commits

Author SHA1 Message Date
Michel Weststrate
4062950fbe Convert React DevTools to Sandy
Summary:
Converted ReactDevTools to Sandy, no real semantic changes. Will add those in next diffs.

Made some minor flow optimizations.

The port forwarding setup interacted directly with the Flipper store, so made an escape hatch for that. Will clean that up again in next diffs.

Reviewed By: passy

Differential Revision: D28380055

fbshipit-source-id: 053979fd10bf3b62089a4f1e27b0e02b4b05e2e1
2021-05-12 14:21:53 -07:00
Pascal Hartig
69c7876be9 Enforce react/jsx-boolean-value
Summary: yarn fix results.

Reviewed By: nikoant

Differential Revision: D28329714

fbshipit-source-id: 564aa24bcdb4bc6cdea67dfad10a077a9c817a2d
2021-05-11 10:14:05 -07:00
dependabot[bot]
674f71a426 Bump prettier from 2.2.1 to 2.3.0 in /desktop (#2300)
Summary:
Bumps [prettier](https://github.com/prettier/prettier) from 2.2.1 to 2.3.0.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a href="https://github.com/prettier/prettier/releases">prettier's releases</a>.</em></p>
<blockquote>
<h2>2.3.0</h2>
<p><a href="https://github.com/prettier/prettier/compare/2.2.1...2.3.0">diff</a></p>
<p>{emoji:1f517} <a href="https://prettier.io/blog/2021/05/09/2.3.0.html">Release Notes</a></p>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a href="https://github.com/prettier/prettier/blob/main/CHANGELOG.md">prettier's changelog</a>.</em></p>
<blockquote>
<h1>2.3.0</h1>
<p><a href="https://github.com/prettier/prettier/compare/2.2.1...2.3.0">diff</a></p>
<p>{emoji:1f517} <a href="https://prettier.io/blog/2021/05/09/2.3.0.html">Release Notes</a></p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a href="2afc3b9ae6"><code>2afc3b9</code></a> Release 2.3.0</li>
<li><a href="7cfa9aa89b"><code>7cfa9aa</code></a> Fix pre-commit hook setup command (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/10710">#10710</a>)</li>
<li><a href="c8c02b4753"><code>c8c02b4</code></a> Build(deps-dev): Bump concurrently from 6.0.2 to 6.1.0 in /website (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/10834">#10834</a>)</li>
<li><a href="6506e0f50e"><code>6506e0f</code></a> Build(deps-dev): Bump webpack-cli from 4.6.0 to 4.7.0 in /website (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/10836">#10836</a>)</li>
<li><a href="69fae9c291"><code>69fae9c</code></a> Build(deps): Bump flow-parser from 0.150.0 to 0.150.1 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/10839">#10839</a>)</li>
<li><a href="164a6e2351"><code>164a6e2</code></a> Switch CLI to async (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/10804">#10804</a>)</li>
<li><a href="d3e7e2f634"><code>d3e7e2f</code></a> Build(deps): Bump codecov/codecov-action from v1.4.1 to v1.5.0 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/10833">#10833</a>)</li>
<li><a href="9e09845da0"><code>9e09845</code></a> Build(deps): Bump <code>@​angular/compiler</code> from 11.2.12 to 11.2.13 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/10838">#10838</a>)</li>
<li><a href="1bfab3d045"><code>1bfab3d</code></a> Build(deps-dev): Bump eslint from 7.25.0 to 7.26.0 (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/10840">#10840</a>)</li>
<li><a href="387fce4ed8"><code>387fce4</code></a> Minor formatting tweaks (<a href="https://github-redirect.dependabot.com/prettier/prettier/issues/10807">#10807</a>)</li>
<li>Additional commits viewable in <a href="https://github.com/prettier/prettier/compare/2.2.1...2.3.0">compare view</a></li>
</ul>
</details>
<br />

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=prettier&package-manager=npm_and_yarn&previous-version=2.2.1&new-version=2.3.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

 ---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `dependabot rebase` will rebase this PR
- `dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `dependabot merge` will merge this PR after your CI passes on it
- `dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `dependabot cancel merge` will cancel a previously requested merge and block automerging
- `dependabot reopen` will reopen this PR if it is closed
- `dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

</details>

Pull Request resolved: https://github.com/facebook/flipper/pull/2300

Reviewed By: passy

Differential Revision: D28323849

Pulled By: cekkaewnumchai

fbshipit-source-id: 1842877ccc9a9587af7f0d9ff9432c2075c8ee22
2021-05-11 05:51:56 -07:00
Michel Weststrate
0c2348ebdb Introduce custom header columns
Summary:
Changelog: [Network] It is now possible to add custom columns for specific request / response headers

This implements #3 papercut. See also https://fb.workplace.com/groups/flippersupport/permalink/1080685582412099/

Didn't include a way to remove custom columns yet. But they can be hidden just like normal columns. Custom columns aren't remembered across Flipper sessions or apps. We can add that later if desired.

Reviewed By: passy

Differential Revision: D28223515

fbshipit-source-id: 3ed008883430be4ae51a645c6a4ac780467ba442
2021-05-06 04:27:59 -07:00
Michel Weststrate
9c5967caf9 Introduce button to copy request / response body to clipboard
Summary: Changelog: [Network] Introduce a copy button for request / response bodies

Reviewed By: passy

Differential Revision: D28222152

fbshipit-source-id: db33c8e91cbbe733502b32df75de14290e6f3d95
2021-05-06 04:27:59 -07:00
Michel Weststrate
72e34bbd0d Parse request bodies eagerly
Summary:
Currently the network plugin was always storing the transfer format of our request/ response bodies: a base64 string. However, those are not searchable, and every formatter (and multiple can be invoked in a single view) was responsible for its own decompressing.

This diff changes parsing requests / responses into an accurate format: a decompressed, de-base64-ed utf8 string, or a Uint8array for binary data.

We will use this in the next diffs to do some more efficient searching

Reviewed By: passy

Differential Revision: D28200190

fbshipit-source-id: 33a71aeb7b340b58305e97fff4fa5ce472169b25
2021-05-06 04:27:59 -07:00
Michel Weststrate
fc4a08eb55 Convert plugin UI to Sandy
Summary:
Changelog: Updated Network plugin to Sandy UI, including several UI improvements

Converted UI to Sandy, and some minor code cleanups

Moved all mock related logic to its own dir

Fixes https://github.com/facebook/flipper/issues/2267

Reviewed By: passy

Differential Revision: D27966606

fbshipit-source-id: a64e20276d7f0966ce7a95b22557762a32c184cd
2021-05-06 04:27:59 -07:00
Michel Weststrate
23402dfff6 Convert network plugin to Sandy
Summary:
converted the network plugin to use DataSource / DataTable. Restructured the storage to contain a single flat normalised object that will be much more efficient for rendering / filtering (as columns currently don't support nested keys yet, and lazy columns are a lot less flexible)

lint errors and further `flipper` package usages will be cleaned up in the next diff to make sure this diff doesn't become too large.

The rest of the plugin is converted in the next diff

Reviewed By: nikoant

Differential Revision: D27938581

fbshipit-source-id: 2e0e2ba75ef13d88304c6566d4519b121daa215b
2021-05-06 04:27:59 -07:00
Anton Nikolaev
bef1885395 Fix broken layout on Databases plugin load
Summary: Somehow emotion styling of Typography.Text component from antd breaks the entire layout

Reviewed By: cekkaewnumchai

Differential Revision: D28226743

fbshipit-source-id: 7bdba33b7b02e4272cc9478c66fcc13ab74a0fc3
2021-05-05 11:00:16 -07:00
Mathias Fleig Mortensen
8a5b2c5981 Migrate Fresco plugin to Sandy
Summary:
Removed the "notifications for leaks" test since we're no longer storing notifications but showing them immediately.

Will do UI updates separately.

Reviewed By: mweststrate

Differential Revision: D28025507

fbshipit-source-id: 58db2504c29bba441b2c2d86cd3e2b8b5c010757
2021-05-05 06:04:37 -07:00
Michel Weststrate
e707fcc9f9 Convert UI to Sandy
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
2021-05-04 13:50:31 -07:00
Michel Weststrate
01ea822341 Code shuffle
Summary:
Moved a lot of utility logic in separate files for Android and iOS, to make cleanup in next diffs easier by having a bit smaller files.

Purely a code shuffle, no functional changes

Reviewed By: passy

Differential Revision: D28102399

fbshipit-source-id: 2fd8f6669bdd2804fa8a7e1791c610ae7883eda6
2021-05-04 13:50:31 -07:00
Michel Weststrate
d903a862d2 Use DataTable as list base
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
2021-05-04 13:50:31 -07:00
Anton Nikolaev
3586f8ebbb UI Conversion: extracted plugin UI root component into a separate file
Summary: Extracted plugin UI root coomponent to a separate file to avoid falling back to full reloads even when "--fast-refresh" flag provided

Reviewed By: mweststrate

Differential Revision: D28119498

fbshipit-source-id: 18ef891512cbe5ddc34cacf7010dfd82f86c4fcc
2021-04-30 09:38:15 -07:00
Anton Nikolaev
45397fd2f4 UI Conversion: use DetailsSidebar from "flipper-plugin"
Summary: Use DetailsSidebar from "flipper-plugin"

Reviewed By: mweststrate

Differential Revision: D28110484

fbshipit-source-id: 0b9e3c07fc642242f2846f024895e740078779f7
2021-04-30 09:38:15 -07:00
Anton Nikolaev
368dd4a5ab Remove Value/renderValue public API from "flipper"
Summary:
Moving Value/renderValue API to "database" plugin as these APIs used exclusively by this plugin.

Alternative to that could be moving this API to "flipper-plugin" instead, but I think it doesn't make sense to expose public API which is only used in one plugin.

Reviewed By: mweststrate

Differential Revision: D28110483

fbshipit-source-id: 1576444681c1e0531fe45f0c15f442d65a28f803
2021-04-30 09:38:15 -07:00
Anton Nikolaev
23102b1997 UI Conversion: Use DataTable to show DB table structure
Summary: Use DataTable to show table structure

Reviewed By: mweststrate

Differential Revision: D28110485

fbshipit-source-id: 81f843a4763e1fbf5acf870621bc9049f719fd2c
2021-04-30 09:38:15 -07:00
Brian Vaughn
2520e6912f Update React DevTools to ^4.13.0
Summary:
React DevTools has gotten pretty outdated in React Native. Let's fix that!

Last time I tried this it caused a lot of churn for tools like Flipper, so I approached this in two steps ([detailed in this post](https://fb.workplace.com/groups/rnsyncsquad/permalink/808063140086959/)).

First was a short term plan (as implemented in [PR 21344](https://github.com/facebook/react/pull/21344)) to:
1. Branch and make a patch release of DevTools 4.10 that adds a protocol check to the frontend (to detect any newer backends).
2. Upgrade Flipper (and recommend upgrade for the OSS React Native Debugger as well) to this new frontend.
3. Wait for the updated frontend to roll out.

The short term plan is now done, at least for the internal build of Flipper, and both GitHub PRs to update Flipper and React Native Debugger have been merged.

So this diff moves forward with the longer term plan (implemented in [PR 21331](https://github.com/facebook/react/pull/21331)):
1. Add an explicit version to the protocol used by the DevTools "backend" and "frontend" components to talk to each other.
2. Check this protocol during initialization to ensure it matches.
3. Show upgrade/downgrade instructions if there's a mismatch (or if the check times out without a response– indicating an older backend).
4. Release this as 4.13.

 ---

Changelog:
[General][Changed] - Upgrade `react-devtools-core` from ~4.6.0 to ^4.13.0

Reviewed By: yungsters

Differential Revision: D28103394

fbshipit-source-id: 21114294144bde9aede63cb3ba98a240082299bd
2021-04-29 16:58:33 -07:00
Anton Nikolaev
84b48ff7e9 UI Conversion: Cleanup margins / paddings
Summary:
Cleaned up margins and paddings by removing hardcoded values and use constant sizes from "themes" instead.

Changelog: Database plugin UI aligned with the new Flipper UI

Reviewed By: mweststrate

Differential Revision: D28094217

fbshipit-source-id: 6514b2f1ea7073ca658a86e49c2be029f054ddf0
2021-04-29 12:04:04 -07:00
Anton Nikolaev
e1afe9d6b9 UI Conversion: Use TextArea from antd
Summary: Replaced Text and TextArea components by antd analogues

Reviewed By: mweststrate

Differential Revision: D28088959

fbshipit-source-id: 87f867f04f34a9b026045b34467a35437d132317
2021-04-29 12:04:04 -07:00
Anton Nikolaev
71d827288f UI Conversion: Replace buttons and dropdowns to antd analogues
Summary: Replaced favorite query dropdown to antd analogue

Reviewed By: mweststrate

Differential Revision: D28089366

fbshipit-source-id: 0d6e01bf6169f100ba7c9e612f0da8240ca3218d
2021-04-29 12:04:04 -07:00
Anton Nikolaev
1a315c510e UI Conversion: Switched ButtonGroup to Radio
Summary: Switched button group to Ant's radio buttons

Reviewed By: mweststrate

Differential Revision: D28068173

fbshipit-source-id: bcde8f32d76f76c18cf8bc8c8742bc3e01c54c7c
2021-04-29 12:04:04 -07:00
Anton Nikolaev
f743bd68a1 UI Conversion: Use Select from antd
Summary: Used Antd's Select component instead of the old one. In addition to that also enabled search in Select which can be quite handly as there might be many databases / tables.

Reviewed By: mweststrate

Differential Revision: D28068179

fbshipit-source-id: 4ff337a532e035c8b53a23858b5ba6d900e65ebd
2021-04-29 12:04:04 -07:00
Anton Nikolaev
24ac075d76 UI Conversion: Replaced all usages of FlexRow / FlexColumn to Layout
Summary: Replaced all usages of FlexRow / FlexColumn to new Layout component

Reviewed By: mweststrate

Differential Revision: D28055698

fbshipit-source-id: ad50762b068c897e5c4c182ac2d575d7e3a5f166
2021-04-29 12:04:04 -07:00
Anton Nikolaev
00fb573ba2 Extracted and memoized components
Summary: Just small refactoring to extract / memoize some of components

Reviewed By: mweststrate

Differential Revision: D28055699

fbshipit-source-id: 3d689a4e41e3f3c4c4e2e8cc2887cb255b4c4dc2
2021-04-29 12:04:04 -07:00
Pascal Hartig
c3f3b35a31 Mass-bump deps
Summary:
Trying to get ahead of dependabot by bumping a bunch of things at once
that are minor or patch level bumps.

Reviewed By: muraziz

Differential Revision: D28094201

fbshipit-source-id: b6b53ae2d582686201124b82fed4f436a60b3172
2021-04-29 11:33:57 -07:00
John Knox
679ef665e2 Cleanup CPU plugin
Summary:
Addressing code review feedback from previous 3 diffs.

* Don't return draft when using immer
* Move functions out of component to module level
* Make executeShell async and simplify callsites
* Add onStopMonitor to cleanup function
* Add uniform spacing by adding Layout.Container around titles
* Disable searchbar on both tables
* Use Toolbar

Reviewed By: mweststrate

Differential Revision: D28091565

fbshipit-source-id: 533d2491e6f48a9eaaa64b1a6cf76eea2e7189a5
2021-04-29 07:41:23 -07:00
John Knox
303e42535c Finish converting CPU plugin to Sandy
Summary: Finishes off by converting the rest of the UI.

Reviewed By: mweststrate

Differential Revision: D28061468

fbshipit-source-id: 8d87d3344fe3937470e566d8c425efc97f38333c
2021-04-29 07:41:23 -07:00
John Knox
92f51485c9 Fix CPU plugin concurrency issues
Summary:
Half way through sandy conversion I ended up redoing the task scheduling in this plugin because it was sketchy and unreliable.

Previously, it was using setInterval to schedule a task every 500ms, which would query a lot of data from the device. The problem was that if these tasks took >500ms (which they did for me at least), you'd get overlapping ones, causing havoc.

Now it uses setTimeout instead, promisifies everything, and only ever schedules the next timeout when the current task has finished.

Also fixed a race condition where you could hit stop, but not actually stop the recurring tasks... and then there was no way to stop them because it was already "stopped".

Reviewed By: mweststrate

Differential Revision: D28061469

fbshipit-source-id: 2bb8aba7ddf37ba1fdbdc52c95ec258cae96f509
2021-04-29 07:41:23 -07:00
John Knox
a53f1b8f8d Convert CPU plugin to Sandy
Summary:
Starts converting the plugin by moving to new model and switching some of the UI components.

No logic changes here, it's just shifting everything over.

Reviewed By: mweststrate

Differential Revision: D28028052

fbshipit-source-id: 7444eab77d9dba49261a70887ee26b8d120e97a6
2021-04-29 07:41:23 -07:00
Michel Weststrate
e3cb16d870 Fixed layout issue with undefined column widths
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
2021-04-29 07:31:54 -07:00
Brian Vaughn
e7cdbcbe85 Update react-devtools-core from ~4.10.2 to ~4.10.3 (#2244)
Summary:
4.10.2 had an fburl.com link in it when I should have used an fb.me link :( I'm sorry

cc mweststrate

Pull Request resolved: https://github.com/facebook/flipper/pull/2244

Reviewed By: passy

Differential Revision: D28054736

Pulled By: mweststrate

fbshipit-source-id: 0330f884e5d82cc669232aee3d8439b0f51240bd
2021-04-29 04:25:34 -07:00
Anton Nikolaev
c4887e638b Fixed adding queries to favorites
Summary: I found a bug after migration to Sandy. It is now not possible to add queries to favorites. This diff fixes the issue.

Reviewed By: mweststrate

Differential Revision: D28066435

fbshipit-source-id: 129a62dab9521160f8957abba70e5c7a6e609839
2021-04-29 01:27:54 -07:00
Pascal Hartig
cf2405a466 Convert flipper-messages to ant.design
Summary: The main change is the move to DataTable here.

Reviewed By: mweststrate

Differential Revision: D28006097

fbshipit-source-id: 7564276a1177a7835612db08857862cb81942bce
2021-04-28 07:06:09 -07:00
Brian Vaughn
e423bc7959 Update react-devtools-core from ^4.10.1 to ~4.10.2 (#2243)
Summary:
Bumps [react-devtools-core](https://github.com/facebook/react/tree/master/packages/react-devtools-core) from 4.10.1 to 4.10.2.

This update has only one change: https://github.com/facebook/react/pull/21344

For more background information on this upgrade: https://github.com/facebook/react/issues/21326

cc mweststrate

Pull Request resolved: https://github.com/facebook/flipper/pull/2243

Reviewed By: bvaughn

Differential Revision: D28040682

Pulled By: mweststrate

fbshipit-source-id: 82b1212f839719ff69b3b7735a8a24042b382085
2021-04-27 15:03:39 -07:00
Anton Nikolaev
c2a07e7638 Databases plugin migrated to Sandy functional API
Summary: Converted Databases plugin to Sandy functional API

Reviewed By: mweststrate

Differential Revision: D27999205

fbshipit-source-id: e9d2c7aa5858b9da3c1672efbb558fb6b1077b6b
2021-04-27 09:31:11 -07:00
Pascal Hartig
dcc7e06afc Add test for flipper-messages
Summary: Some non-UI tests. Couldn't quite figure out how to make the renderer aware of changes in the old ManagedTable. Given that I've got a task for migrating, I didn't think it was worth digging into it more.

Reviewed By: mweststrate

Differential Revision: D28001651

fbshipit-source-id: 034b3d71bff2513c946b9f84525f3344b7879df9
2021-04-27 09:06:10 -07:00
Pascal Hartig
15e4ae5c24 Convert flipper-messages to Sandy
Summary: No logic change or UI update, just 1-to-1 conversion.

Reviewed By: mweststrate

Differential Revision: D27997791

fbshipit-source-id: 4cde0ef7d749d3117ef95cf67e9ce66e9674f747
2021-04-27 09:06:10 -07:00
Harold Martin
4d262c0da4 Add protobuf support to network inspector (#2080)
Summary:
Protobuf based APIs are becoming more common (i.e. gRPC) but are difficult to inspect. Unlike plain text data formats (JSON), Protobuf calls transmit binary data requiring the format to be known ahead of time, making ad-hoc inspection impossible. This PR allows for those format definitions (messages in protobuf terminology) to be transmitted from the client to the network inspector plugin. These definitions are then imported into ProtobufJS which enables the binary data transmitted to be inspected as easily as JSON data.

See Retrofit PR in https://github.com/facebook/flipper/pull/2084

## Changelog

* Add ProtobufJS library to network plugin
* New `ProtobufFormatter` UI in `RequestDetails`
* `ProtobufDefinitionsRepository` to cache and load protobuf defintions
* `addProtobufDefinitions` call in the Android network plugin

Pull Request resolved: https://github.com/facebook/flipper/pull/2080

Test Plan: ![screenshot](https://user-images.githubusercontent.com/745166/111652068-001a5e80-87c4-11eb-8c94-e19b46dd074c.png)

Reviewed By: mweststrate

Differential Revision: D27507451

Pulled By: passy

fbshipit-source-id: 586d891b74f2b17d28fe7a2a99074da755851f38
2021-04-20 05:10:39 -07:00
Tim Yung
451c332260 Back out "Update React DevTools deps from 4.6 -> 4.12"
Summary:
Reverts D27764688 (7bd4f80c25) due to a bug with "Invalid hook call." being erroneously reported. We will upgrade again after that bug is resolved.

Changelog:
[Internal]

Reviewed By: fkgozali

Differential Revision: D27813660

fbshipit-source-id: 84a12f19cf1bb7e8aebef0da3ff6f7022c391d3e
2021-04-15 21:15:50 -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
4f75247213 Make Sidebar Extensions more idiomatic
Summary: Sidebar extensions were unkeyed, which make them render inefficiently. I cleaned the api a bit here by making the extensions more idiomatic; they are now components rather then functions, so that they have their own render cycle, state, etc. They are memo-ed now as well, so that they don't have to re-render if the selected item doesn't change.

Reviewed By: nikoant

Differential Revision: D27685980

fbshipit-source-id: b133bc42061b3b8cf971792f5818810ecb80e3ea
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
Brian Vaughn
7bd4f80c25 Update React DevTools deps from 4.6 -> 4.12
Summary:
Update `react-devtools-core` and `react-devtools` dependencies for RN, VSCode, Sonar, etc.

# Changelog:

[General][Changed] - Upgraded react-devtools-core dependency to 4.12.0

Reviewed By: gaearon

Differential Revision: D27764688

fbshipit-source-id: faa179cf4be3b49b14244d47ee0b91ae63138b8b
2021-04-14 13:37:24 -07:00
Anton Nikolaev
dc7226b7dc Script for plugin type-checking (#2172)
Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/2172

New script which runs "tsc" for all plugins, receives list of errors and then checks which plugins are affected. It works for shared libs too, e.g. if there is an error in a shared library, then all plugins dependant on it will be counted as affected. For convenience, script saves list of errors affecting each plugin to "tsc-errors.log" in plugin folder.

This script will be used for automatic type-checking plugins against current "stable" and "insiders" versions of Flipper.

An alternative to this implementation would be to simply run "tsc" for each plugin individually, but such implementation takes a lot of time (5+ sec per plugin) and so cannot be effectively used on diffs.

Reviewed By: mweststrate

Differential Revision: D27499765

fbshipit-source-id: fcbbfc94a13e6c7c5beff0c889a929f84c41b2dd
2021-04-09 05:22:01 -07:00
Anton Nikolaev
e7c5a5cc93 Check that all dependencies provided by Flipper core are specified as peers in plugins
Summary: This is a guard to ensure all Flipper built-in packages are declared as peer dependencies. It also removes all of them from nested node_modules after installation to be 100% sure they always loaded from the root folder, because e.g. react can be still installed as a transitive dependency even it is not declared as dependency directly.

Reviewed By: passy

Differential Revision: D27040267

fbshipit-source-id: 1e315a6b280b36ab20778ee261aa386b51d9f964
2021-04-09 05:22:00 -07:00
Anton Nikolaev
b45b5f854a Move layout plugin sidebar extensions to the plugin package
Summary: Moved layout plugin sidebar extensions to the plugin package.

Reviewed By: passy

Differential Revision: D27036489

fbshipit-source-id: 5b3406e5c50ba61709d925a3c0cb07a6fd7552db
2021-04-09 05:22:00 -07:00
Anton Nikolaev
e5261967cb Link shared libs to allow re-using them in both in public and fb-internal plugins
Summary:
Link plugin shared libraries to the "plugins/node_modules" dir so they can be used as peer dependencies by both public and fb-internal plugins.

```
plugins
- node_modules
-- fb_shared_lib (symlink pointing to "plugins/fb/fb_shared_lib")
-- public_shared_lib (symlink pointing to "plugins/public/public_shared_lib")
- fb
-- fb_shared_lib
-- fb_plugin (can now use both fb_shared_lib and public_shared_lib as peer dependencies)
- public
-- public_shared_lib
-- public_plugin (can now use both public_shared_lib and fb_shared_lib (optionally if it's an fb-internal repo) as peer dependencies)
```

Reviewed By: passy

Differential Revision: D27034936

fbshipit-source-id: 68ee5312060ff57649ae061dd7dd14f8beb6d4a1
2021-04-09 05:22:00 -07:00