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
Summary:
Replace draft inspectors with read-only components.
This is a first step into having a richer UI. At the moment, these are read-only components but will likely be extended in the future as to allow editing of values.
Reviewed By: LukeDefeo
Differential Revision: D40345016
fbshipit-source-id: a6aef5861474b4aa8353c00ef257ab17b4cff00e
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:
- Support loading globally installed DevTools
Background:
1. Initially, I wanted to use react-devtools-core as before. react-devtools-core standalone contains quite a few imports of node.js APIs. After [a conversation with Brian](https://fb.workplace.com/groups/react.devtools/permalink/3131548550392044), I pivoted to react-devtools-inline
2. Technical design doc of react-devtools-inline integration: https://docs.google.com/document/d/1STUSUhXzrW_KkvqSu7Ge-rxjVFF7oU3_NbwzimkO_Z4
3. We support usage of globally installed devtools. Code of react-devtools-inline is not ready to be used by the browser as is. We need to bundle it and substitute React and ReactDOM imports with the globals.
4. As we can't pre-compile what users install globally, we need to bundle global devtools on demand,
5. I tried re-using our Metro bundling pipeline initially, but gave up after fighting it for 2 days. Included, `rollup` instead.
6. Size of a `tgz` archive with a plugin is 2.1MB
allow-large-files
Reviewed By: mweststrate
Differential Revision: D34968770
fbshipit-source-id: 352299964ccc195b8677dbda47db84ffaf38737b
Summary:
Changelog: Migrate from react-devtools-core to -react-devtools-inline
Technical design doc: https://docs.google.com/document/d/1STUSUhXzrW_KkvqSu7Ge-rxjVFF7oU3_NbwzimkO_Z4
At this point, React DevTools doe snot support globally installed DevTools. Only the bundled version. The support for the globally installed DevTools comes in the subsequent diffs along with on-the-fly transpilation.
Reviewed By: mweststrate
Differential Revision: D34926472
fbshipit-source-id: fde1d4cf386adfbf8a8581ee5a54e950d2cb34ef
Summary: There are some issues with label positioning, but overall works.
Reviewed By: defHLT
Differential Revision: D29588329
fbshipit-source-id: 5c2e8f6f139d997559111fa2ad124ae1d695b36a
Summary: Larger list of fixes. Adding another package to the flipper export is a bit nasty but it unblocks us for now and centralises `remote` access which seems like a win for FAAS.
Reviewed By: mweststrate
Differential Revision: D30785421
fbshipit-source-id: 931297e8566b5d8a213b69ae87d0cda7648b3ed4
Summary:
Got this in my dep bump: https://www.internalfb.com/intern/sandcastle/job/13510799320314417/
Babel is having some trouble with a certain syntax in newer d3-array elements: https://github.com/babel/babel/issues/11038
Until that's fixed the recommended work-around is hard-coding the old version which is apparently compatible.
Reviewed By: priteshrnandgaonkar
Differential Revision: D29107071
fbshipit-source-id: 5a4ba8e698969bc033a76da78ce9116d1cfbbeb4
Summary:
- recharts includes types now as part of the main distro
- the react resolution doesn't make a difference to the `yarn.lock` anymore
Reviewed By: mweststrate
Differential Revision: D29105837
fbshipit-source-id: 5699b7b9c4f00da00781245fed8b2a94d603bb63
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
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
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: 
Reviewed By: mweststrate
Differential Revision: D27507451
Pulled By: passy
fbshipit-source-id: 586d891b74f2b17d28fe7a2a99074da755851f38
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
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:
Here I'm changing plugin repository structure to allow re-using of shared packages between both public and fb-internal plugins, and to ensure that public plugins has their own yarn.lock as this will be required to implement reproducible jobs checking plugin compatibility with released flipper versions.
Please note that there are a lot of moved files in this diff, make sure to click "Expand all" to see all that actually changed (there are not much of them actually).
New proposed structure for plugin packages:
```
- root
- node_modules - modules included into Flipper: flipper, flipper-plugin, react, antd, emotion
-- plugins
--- node_modules - modules used by both public and fb-internal plugins (shared libs will be linked here, see D27034936)
--- public
---- node_modules - modules used by public plugins
---- pluginA
----- node_modules - modules used by plugin A exclusively
---- pluginB
----- node_modules - modules used by plugin B exclusively
--- fb
---- node_modules - modules used by fb-internal plugins
---- pluginC
----- node_modules - modules used by plugin C exclusively
---- pluginD
----- node_modules - modules used by plugin D exclusively
```
I've moved all public plugins under dir "plugins/public" and excluded them from root yarn workspaces. Instead, they will have their own yarn workspaces config and yarn.lock and they will use flipper modules as peer dependencies.
Reviewed By: mweststrate
Differential Revision: D27034108
fbshipit-source-id: c2310e3c5bfe7526033f51b46c0ae40199fd7586
