diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml new file mode 100644 index 00000000000..0079e67aced --- /dev/null +++ b/.github/workflows/build-and-deploy.yml @@ -0,0 +1,30 @@ +name: facebook/flipper/build-and-deploy +on: + push: + branches: + - main +env: + ANDROID_PUBLISH_KEY: ${{ secrets.ANDROID_PUBLISH_KEY }} +jobs: + snapshot: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - name: Install Dependencies + run: | + sudo apt-get update + sudo apt-get install -y sdkmanager + - name: Install JDK + uses: actions/setup-java@v4 + with: + java-version: '17' + distribution: 'temurin' + cache: gradle + - name: Install Retry + run: scripts/install-retry.sh + - name: Build + run: | + yes | sdkmanager "platforms;android-33" || true + /tmp/retry -m 3 ./gradlew :android:assembleRelease --info + - name: Deploy Snapshot + run: "/tmp/retry -m 3 scripts/publish-android-snapshot.sh" diff --git a/.github/workflows/nodejs-doctor.yml b/.github/workflows/nodejs-doctor.yml deleted file mode 100644 index 0ca49a4298e..00000000000 --- a/.github/workflows/nodejs-doctor.yml +++ /dev/null @@ -1,20 +0,0 @@ -name: Doctor Node CI -# This action runs on 'git push' and PRs -on: [push, pull_request] - -jobs: - build: - runs-on: 'ubuntu-latest' - env: - doctor-directory: ./desktop/doctor - steps: - - uses: actions/checkout@v3.5.3 - - uses: actions/setup-node@v3.6.0 - with: - node-version: '18.x' - - name: install - working-directory: ${{env.doctor-directory}} - run: yarn - - name: run - working-directory: ${{env.doctor-directory}} - run: yarn run run diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 1a4df5d9ab5..c4f6c2d3658 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -5,7 +5,7 @@ on: branches: - main paths: - - 'desktop/package.json' + - "desktop/package.json" jobs: release: @@ -29,7 +29,7 @@ jobs: with: token: ${{ secrets.GITHUB_TOKEN }} ref: ${{ steps.extract-version-commit.outputs.commit }} - version_tag_prefix: 'v' + version_tag_prefix: "v" version_assertion_command: 'grep -q "\"version\": \"$version\"" desktop/package.json' - name: Create release if: ${{ steps.tag-version-commit.outputs.tag != '' }} @@ -53,32 +53,42 @@ jobs: desktop-directory: ./desktop steps: - - uses: actions/checkout@v3.5.3 - with: - ref: ${{ needs.release.outputs.tag }} - - uses: actions/setup-node@v3.6.0 - with: - node-version: '18.x' - - name: Install - uses: nick-invision/retry@v2.0.0 - with: - timeout_minutes: 10 - max_attempts: 3 - command: cd ${{env.desktop-directory}} && yarn - - name: Build - run: cd ${{env.desktop-directory}} && yarn build:flipper-server --mac --dmg - - name: List dist artifacts - run: ls -l dist/ - - name: Upload x86-64 - uses: actions/upload-artifact@v3.1.2 - with: - name: 'Flipper-server-mac-x64.dmg' - path: 'dist/Flipper-server-mac-x64.dmg' - - name: Upload aarch64 - uses: actions/upload-artifact@v3.1.2 - with: - name: 'Flipper-server-mac-aarch64.dmg' - path: 'dist/Flipper-server-mac-aarch64.dmg' + - uses: actions/checkout@v3.5.3 + with: + ref: ${{ needs.release.outputs.tag }} + - uses: actions/setup-node@v3.6.0 + with: + node-version: "18.x" + - name: Install + uses: nick-invision/retry@v2.0.0 + with: + timeout_minutes: 10 + max_attempts: 3 + command: cd ${{env.desktop-directory}} && yarn + - name: Build + run: cd ${{env.desktop-directory}} && yarn build:flipper-server --mac --dmg --linux --win --tar + - name: List dist artifacts + run: ls -l dist/ + - name: Upload Mac x86-64 + uses: actions/upload-artifact@v3.1.2 + with: + name: "Flipper-server-mac-x64.dmg" + path: "dist/Flipper-server-mac-x64.dmg" + - name: Upload Mac aarch64 + uses: actions/upload-artifact@v3.1.2 + with: + name: "Flipper-server-mac-aarch64.dmg" + path: "dist/Flipper-server-mac-aarch64.dmg" + - name: Upload Linux x64 + uses: actions/upload-artifact@v3.1.2 + with: + name: "flipper-server-linux.tar.gz" + path: "dist/flipper-server-linux.tar.gz" + - name: Upload Windows x64 + uses: actions/upload-artifact@v3.1.2 + with: + name: "flipper-server-windows.tar.gz" + path: "dist/flipper-server-windows.tar.gz" build-flipper-server: needs: @@ -88,27 +98,27 @@ jobs: desktop-directory: ./desktop steps: - - uses: actions/checkout@v3.5.3 - with: - ref: ${{ needs.release.outputs.tag }} - - uses: actions/setup-node@v3.6.0 - with: - node-version: '18.x' - - name: Install - uses: nick-invision/retry@v2.0.0 - with: - timeout_minutes: 10 - max_attempts: 3 - command: cd ${{env.desktop-directory}} && yarn - - name: Build - run: cd ${{env.desktop-directory}} && yarn build:flipper-server - - name: List dist artifacts - run: ls -l dist/ - - name: Upload flipper-server - uses: actions/upload-artifact@v3.1.2 - with: - name: 'flipper-server.tgz' - path: 'dist/flipper-server.tgz' + - uses: actions/checkout@v3.5.3 + with: + ref: ${{ needs.release.outputs.tag }} + - uses: actions/setup-node@v3.6.0 + with: + node-version: "18.x" + - name: Install + uses: nick-invision/retry@v2.0.0 + with: + timeout_minutes: 10 + max_attempts: 3 + command: cd ${{env.desktop-directory}} && yarn + - name: Build + run: cd ${{env.desktop-directory}} && yarn build:flipper-server + - name: List dist artifacts + run: ls -l dist/ + - name: Upload flipper-server + uses: actions/upload-artifact@v3.1.2 + with: + name: "flipper-server.tgz" + path: "dist/flipper-server.tgz" publish: needs: @@ -118,53 +128,53 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3.5.3 - with: - ref: ${{ needs.release.outputs.tag }} - - name: Download Flipper Server x86-64 - if: ${{ needs.release.outputs.tag != '' }} - uses: actions/download-artifact@v1 - with: - name: 'Flipper-server-mac-x64.dmg' - path: 'Flipper-server-mac-x64.dmg' - - name: Download Flipper Server aarch64 - if: ${{ needs.release.outputs.tag != '' }} - uses: actions/download-artifact@v1 - with: - name: 'Flipper-server-mac-aarch64.dmg' - path: 'Flipper-server-mac-aarch64.dmg' - - name: Download Flipper Server - if: ${{ needs.release.outputs.tag != '' }} - uses: actions/download-artifact@v1 - with: - name: 'flipper-server.tgz' - path: 'flipper-server.tgz' - - name: GitHub Upload Release Artifacts - if: ${{ needs.release.outputs.tag != '' }} - uses: aigoncharov/github-upload-release-artifacts-action@2.2.3 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - created_tag: ${{ needs.release.outputs.tag }} - args: flipper-server.tgz/flipper-server.tgz Flipper-server-mac-x64.dmg/Flipper-server-mac-x64.dmg Flipper-server-mac-aarch64.dmg/Flipper-server-mac-aarch64.dmg - - name: Set up npm token - run: echo "//registry.yarnpkg.com/:_authToken=${{ secrets.FLIPPER_NPM_TOKEN }}" >> ~/.npmrc - - name: Publish flipper-server on NPM - if: ${{ needs.release.outputs.tag != '' }} - run: | - tar zxvf flipper-server.tgz/flipper-server.tgz - cd package - yarn publish - - name: Open issue on failure - if: failure() - uses: JasonEtco/create-an-issue@v2.9.1 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - REPOSITORY: ${{ github.repository }} - RUN_ID: ${{ github.run_id }} - WORKFLOW_NAME: "Publish" - with: - filename: .github/action-failure-template.md + - uses: actions/checkout@v3.5.3 + with: + ref: ${{ needs.release.outputs.tag }} + - name: Download Flipper Server x86-64 + if: ${{ needs.release.outputs.tag != '' }} + uses: actions/download-artifact@v1 + with: + name: "Flipper-server-mac-x64.dmg" + path: "Flipper-server-mac-x64.dmg" + - name: Download Flipper Server aarch64 + if: ${{ needs.release.outputs.tag != '' }} + uses: actions/download-artifact@v1 + with: + name: "Flipper-server-mac-aarch64.dmg" + path: "Flipper-server-mac-aarch64.dmg" + - name: Download Flipper Server + if: ${{ needs.release.outputs.tag != '' }} + uses: actions/download-artifact@v1 + with: + name: "flipper-server.tgz" + path: "flipper-server.tgz" + - name: GitHub Upload Release Artifacts + if: ${{ needs.release.outputs.tag != '' }} + uses: aigoncharov/github-upload-release-artifacts-action@2.2.3 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + created_tag: ${{ needs.release.outputs.tag }} + args: flipper-server.tgz/flipper-server.tgz Flipper-server-mac-x64.dmg/Flipper-server-mac-x64.dmg Flipper-server-mac-aarch64.dmg/Flipper-server-mac-aarch64.dmg + - name: Set up npm token + run: echo "//registry.yarnpkg.com/:_authToken=${{ secrets.FLIPPER_NPM_TOKEN }}" >> ~/.npmrc + - name: Publish flipper-server on NPM + if: ${{ needs.release.outputs.tag != '' }} + run: | + tar zxvf flipper-server.tgz/flipper-server.tgz + cd package + yarn publish + - name: Open issue on failure + if: failure() + uses: JasonEtco/create-an-issue@v2.9.1 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + REPOSITORY: ${{ github.repository }} + RUN_ID: ${{ github.run_id }} + WORKFLOW_NAME: "Publish" + with: + filename: .github/action-failure-template.md dispatch: needs: @@ -172,22 +182,22 @@ jobs: runs-on: ubuntu-latest steps: - - name: Publish Workflow Dispatch - if: ${{ needs.release.outputs.tag != '' }} - uses: benc-uk/workflow-dispatch@v1.2.2 - with: - workflow: Publish Pods - ref: ${{ needs.release.outputs.tag }} - - name: Publish NPM - if: ${{ needs.release.outputs.tag != '' }} - uses: benc-uk/workflow-dispatch@v1.2.2 - with: - workflow: Publish NPM - ref: ${{ needs.release.outputs.tag }} - - name: Publish Android - if: ${{ needs.release.outputs.tag != '' }} - uses: benc-uk/workflow-dispatch@v1.2.2 - with: - workflow: Publish Android - ref: ${{ needs.release.outputs.tag }} - inputs: '{"tag": "${{ needs.release.outputs.tag }}"}' + - name: Publish Workflow Dispatch + if: ${{ needs.release.outputs.tag != '' }} + uses: benc-uk/workflow-dispatch@v1.2.2 + with: + workflow: Publish Pods + ref: ${{ needs.release.outputs.tag }} + - name: Publish NPM + if: ${{ needs.release.outputs.tag != '' }} + uses: benc-uk/workflow-dispatch@v1.2.2 + with: + workflow: Publish NPM + ref: ${{ needs.release.outputs.tag }} + - name: Publish Android + if: ${{ needs.release.outputs.tag != '' }} + uses: benc-uk/workflow-dispatch@v1.2.2 + with: + workflow: Publish Android + ref: ${{ needs.release.outputs.tag }} + inputs: '{"tag": "${{ needs.release.outputs.tag }}"}' diff --git a/.vscode/settings.json b/.vscode/settings.json index 21592c1639b..480ba89afdc 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -17,7 +17,7 @@ } ], "[typescriptreact]": { - "editor.defaultFormatter": "dbaeumer.vscode-eslint" + "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" diff --git a/Flipper.podspec b/Flipper.podspec index b72ab3347f5..3181860d62e 100644 --- a/Flipper.podspec +++ b/Flipper.podspec @@ -3,7 +3,7 @@ # This source code is licensed under the MIT license found in the # LICENSE file in the root directory of this source tree. -flipperkit_version = '0.233.0' +flipperkit_version = '0.250.0' Pod::Spec.new do |spec| spec.name = 'Flipper' spec.cocoapods_version = '>= 1.10' diff --git a/FlipperKit.podspec b/FlipperKit.podspec index 227626dbad2..7a435d1f6a9 100644 --- a/FlipperKit.podspec +++ b/FlipperKit.podspec @@ -4,7 +4,7 @@ # LICENSE file in the root directory of this source tree. folly_compiler_flags = '-DDEBUG=1 -DFLIPPER_OSS=1 -DFB_SONARKIT_ENABLED=1 -DFOLLY_HAVE_BACKTRACE=1 -DFOLLY_HAVE_CLOCK_GETTIME=1 -DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_HAVE_LIBGFLAGS=0 -DFOLLY_HAVE_LIBJEMALLOC=0 -DFOLLY_HAVE_PREADV=0 -DFOLLY_HAVE_PWRITEV=0 -DFOLLY_HAVE_TFO=0 -DFOLLY_USE_SYMBOLIZER=0' -flipperkit_version = '0.233.0' +flipperkit_version = '0.250.0' Pod::Spec.new do |spec| spec.name = 'FlipperKit' spec.version = flipperkit_version @@ -18,6 +18,7 @@ Pod::Spec.new do |spec| spec.module_name = 'FlipperKit' spec.platforms = { :ios => "11.0" } spec.default_subspecs = "Core" + spec.frameworks = 'AVFoundation' # This subspec is necessary since FBDefines.h is imported as # inside SKMacros.h, which is a public header file. Defining this directory as a @@ -77,6 +78,7 @@ Pod::Spec.new do |spec| ss.dependency 'FlipperKit/FKPortForwarding' ss.dependency 'Flipper', '~>'+flipperkit_version ss.dependency 'SocketRocket', '~> 0.7.0' + ss.dependency 'SSZipArchive', '~> 2.4.3' ss.compiler_flags = folly_compiler_flags ss.source_files = 'iOS/FlipperKit/*.{h,m,mm}', 'iOS/FlipperKit/CppBridge/*.{h,mm}' ss.public_header_files = 'iOS/FlipperKit/**/{FlipperDiagnosticsViewController,FlipperStateUpdateListener,FlipperClient,FlipperPlugin,FlipperConnection,FlipperResponder,SKMacros,FlipperKitCertificateProvider}.h' diff --git a/README.md b/README.md index 33f6566bf69..37c417654ca 100644 --- a/README.md +++ b/README.md @@ -27,12 +27,15 @@ The last Electron release is [v0.239.0](https://github.com/facebook/flipper/rele ### React Native support -If you are debugging React Native applications, v0.239.0 will be the last release with support for it due to technical limitations for React Dev Tools and Hermes Debugger plugins. As such, please refer to that release when debugging React Native applications. +If you are debugging React Native applications, [v0.239.0](https://github.com/facebook/flipper/releases/tag/v0.239.0) will be the last release with support for it due to technical limitations for React Dev Tools and Hermes Debugger plugins. As such, please refer to that release when debugging React Native applications. + +New, dedicated debug tooling for React Native is currently being developed at Meta. +In the mean time we recommend this [blog post](https://shift.infinite.red/why-you-dont-need-flipper-in-your-react-native-app-and-how-to-get-by-without-it-3af461955109) with guidance on how to get the capibilities of Flipper through several alternatives. ---

- Flipper (formerly Sonar) is a platform for debugging mobile apps on iOS and Android and JS apps in your browser or in Node.js. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API. + Flipper is a platform for debugging mobile apps on iOS and Android and JS apps in your browser or in Node.js. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.

![Flipper](website/static/img/inspector.png) @@ -83,27 +86,23 @@ This repository includes all parts of Flipper. This includes: (`/desktop`) - native Flipper SDKs for iOS (`/iOS`) - native Flipper SDKs for Android (`/android`) +- cross-platform C++ SDK (`/xplat`) - React Native Flipper SDK (`/react-native`) - JS Flipper SDK (`/js`) -- Plugins: - - Logs (`/desktop/plugins/public/logs`) - - Layout inspector (`/desktop/plugins/public/layout`) - - Network inspector (`/desktop/plugins/public/network`) - - Shared Preferences/NSUserDefaults inspector - (`/desktop/plugins/public/shared_preferences`) -- website and documentation (`/website` / `/docs`) +- Plugins (`/desktop/plugins/public/`) +- website and documentation (`/website`, `/docs`) # Getting started Please refer to our [Getting Started guide](https://fbflipper.com/docs/getting-started) to set up -Flipper. Or, (still experimental) run `npx flipper-server` for a browser based +Flipper. Or, run `npx flipper-server` for a browser based version of Flipper. ## Requirements -- node >= 8 -- yarn >= 1.5 +- node >= 18 +- yarn >= 1.16 - iOS developer tools (for developing iOS plugins) - Android SDK and adb @@ -120,16 +119,13 @@ yarn yarn start ``` -NOTE: If you're on Windows, you need to use Yarn 1.5.1 until -[this issue](https://github.com/yarnpkg/yarn/issues/6048) is resolved. - ### Building standalone application Provide either `--mac`, `--win`, `--linux` or any combination of them to `yarn build` to build a release zip file for the given platform(s). E.g. ```bash -yarn build --mac --version $buildNumber +yarn build --mac ``` You can find the resulting artifact in the `dist/` folder. diff --git a/android/plugins/jetpack-compose/build.gradle b/android/plugins/jetpack-compose/build.gradle index e2c657b86fd..9e5a79f3880 100644 --- a/android/plugins/jetpack-compose/build.gradle +++ b/android/plugins/jetpack-compose/build.gradle @@ -29,7 +29,9 @@ android { implementation project(':android') implementation "androidx.compose.ui:ui:$COMPOSE_VERSION" implementation "androidx.compose.ui:ui-tooling:$COMPOSE_VERSION" + implementation "androidx.compose.ui:ui-tooling-data:$COMPOSE_VERSION" implementation "org.jetbrains.kotlin:kotlin-reflect:$KOTLIN_VERSION" + implementation "androidx.collection:collection-ktx:1.4.0" implementation project(':inspection-lib') implementation deps.soloader } diff --git a/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/UIDebuggerComposeSupport.kt b/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/UIDebuggerComposeSupport.kt index a0f99fe3458..01774031fe8 100644 --- a/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/UIDebuggerComposeSupport.kt +++ b/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/UIDebuggerComposeSupport.kt @@ -18,6 +18,7 @@ import com.facebook.flipper.plugins.jetpackcompose.model.ComposeInnerViewNode import com.facebook.flipper.plugins.jetpackcompose.model.ComposeNode import com.facebook.flipper.plugins.uidebugger.core.UIDContext import com.facebook.flipper.plugins.uidebugger.descriptors.DescriptorRegister +import com.facebook.flipper.plugins.uidebugger.model.ActionIcon import com.facebook.soloader.SoLoader const val JetpackComposeTag = "Compose" @@ -38,13 +39,32 @@ object UIDebuggerComposeSupport { } fun enable(context: UIDContext) { + addCustomActions(context) addDescriptors(context.descriptorRegister) } private fun addDescriptors(register: DescriptorRegister) { - register.register(AbstractComposeView::class.java, AbstractComposeViewDescriptor) - register.register(ComposeNode::class.java, ComposeNodeDescriptor) - register.register(ComposeInnerViewNode::class.java, ComposeInnerViewDescriptor) + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) { + register.register(AbstractComposeView::class.java, AbstractComposeViewDescriptor) + register.register(ComposeNode::class.java, ComposeNodeDescriptor) + register.register(ComposeInnerViewNode::class.java, ComposeInnerViewDescriptor) + } + } + + private fun addCustomActions(context: UIDContext) { + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) { + context.addCustomActionGroup("Compose options", ActionIcon.Local("icons/compose-logo.png")) { + booleanAction( + "Hide System Nodes", AbstractComposeViewDescriptor.layoutInspector.hideSystemNodes) { + newValue -> + AbstractComposeViewDescriptor.layoutInspector.hideSystemNodes = newValue + newValue + } + unitAction("Reset Recomposition Counts", ActionIcon.Antd("CloseSquareOutlined")) { + AbstractComposeViewDescriptor.resetRecompositionCounts() + } + } + } } private fun enableDebugInspectorInfo() { diff --git a/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/descriptors/AbstractComposeViewDescriptor.kt b/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/descriptors/AbstractComposeViewDescriptor.kt index 3bf4a63841d..2c8e41800fd 100644 --- a/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/descriptors/AbstractComposeViewDescriptor.kt +++ b/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/descriptors/AbstractComposeViewDescriptor.kt @@ -23,13 +23,19 @@ import facebook.internal.androidx.compose.ui.inspection.inspector.LayoutInspecto import java.io.IOException object AbstractComposeViewDescriptor : ChainedDescriptor() { - private val recompositionHandler by lazy { - RecompositionHandler(DefaultArtTooling("Flipper")).apply { - if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) { - attachJvmtiAgent() - startTrackingRecompositions(this) + + @RequiresApi(Build.VERSION_CODES.Q) internal val layoutInspector = LayoutInspectorTree() + + private val recompositionHandler = + RecompositionHandler(DefaultArtTooling("Flipper")).apply { + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) { + attachJvmtiAgent() + startTrackingRecompositions(this) + } } - } + + fun resetRecompositionCounts() { + recompositionHandler.changeCollectionMode(startCollecting = true, keepCounts = false) } override fun onGetName(node: AbstractComposeView): String = node.javaClass.simpleName @@ -51,6 +57,13 @@ object AbstractComposeViewDescriptor : ChainedDescriptor() } override fun onGetChildren(node: AbstractComposeView): List { + if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) { + return listOf( + WarningMessage( + "Flipper Compose Plugin works only on devices with Android Q (API 29) and above.", + getBounds(node))) + } + val children = mutableListOf() val count = node.childCount - 1 for (i in 0..count) { @@ -58,9 +71,16 @@ object AbstractComposeViewDescriptor : ChainedDescriptor() children.add(child) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) { - val layoutInspector = LayoutInspectorTree() - layoutInspector.hideSystemNodes = true - val composeNodes = transform(child, layoutInspector.convert(child), layoutInspector) + layoutInspector.resetAccumulativeState() + val composeNodes = + try { + transform(child, layoutInspector.convert(child), layoutInspector) + } catch (t: Throwable) { + listOf( + WarningMessage( + "Unknown error occurred while trying to inspect compose node: ${t.message}", + getBounds(node))) + } return if (composeNodes.isNullOrEmpty()) { listOf( WarningMessage( diff --git a/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/descriptors/ComposeNodeDescriptor.kt b/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/descriptors/ComposeNodeDescriptor.kt index ac6ae159cb9..109209d33a9 100644 --- a/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/descriptors/ComposeNodeDescriptor.kt +++ b/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/descriptors/ComposeNodeDescriptor.kt @@ -7,9 +7,12 @@ package com.facebook.flipper.plugins.jetpackcompose.descriptors +import android.os.Build +import androidx.annotation.RequiresApi import com.facebook.flipper.plugins.jetpackcompose.JetpackComposeTag import com.facebook.flipper.plugins.jetpackcompose.descriptors.ComposeNodeDescriptor.toInspectableValue import com.facebook.flipper.plugins.jetpackcompose.model.ComposeNode +import com.facebook.flipper.plugins.uidebugger.descriptors.AttributesInfo import com.facebook.flipper.plugins.uidebugger.descriptors.BaseTags import com.facebook.flipper.plugins.uidebugger.descriptors.Id import com.facebook.flipper.plugins.uidebugger.descriptors.MetadataRegister @@ -21,11 +24,12 @@ import com.facebook.flipper.plugins.uidebugger.model.Inspectable import com.facebook.flipper.plugins.uidebugger.model.InspectableObject import com.facebook.flipper.plugins.uidebugger.model.InspectableValue import com.facebook.flipper.plugins.uidebugger.model.MetadataId -import com.facebook.flipper.plugins.uidebugger.util.Immediate +import com.facebook.flipper.plugins.uidebugger.util.Deferred import com.facebook.flipper.plugins.uidebugger.util.MaybeDeferred import facebook.internal.androidx.compose.ui.inspection.inspector.NodeParameter import facebook.internal.androidx.compose.ui.inspection.inspector.ParameterType +@RequiresApi(Build.VERSION_CODES.Q) object ComposeNodeDescriptor : NodeDescriptor { private const val NAMESPACE = "ComposeNode" @@ -75,66 +79,76 @@ object ComposeNodeDescriptor : NodeDescriptor { return node.children } - override fun getAttributes(node: ComposeNode): MaybeDeferred> { - - val builder = mutableMapOf() - val props = mutableMapOf() - - props[IdAttributeId] = InspectableValue.Number(node.inspectorNode.id) - props[ViewIdAttributeId] = InspectableValue.Number(node.inspectorNode.viewId) - props[KeyAttributeId] = InspectableValue.Number(node.inspectorNode.key) - props[NameAttributeId] = InspectableValue.Text(node.inspectorNode.name) - props[FilenameAttributeId] = InspectableValue.Text(node.inspectorNode.fileName) - props[PackageHashAttributeId] = InspectableValue.Number(node.inspectorNode.packageHash) - props[LineNumberAttributeId] = InspectableValue.Number(node.inspectorNode.lineNumber) - props[OffsetAttributeId] = InspectableValue.Number(node.inspectorNode.offset) - props[LengthAttributeId] = InspectableValue.Number(node.inspectorNode.length) - - props[BoxAttributeId] = - InspectableValue.Bounds( - Bounds( - node.inspectorNode.left, - node.inspectorNode.top, - node.inspectorNode.width, - node.inspectorNode.height)) - - node.inspectorNode.bounds?.let { bounds -> - val quadBounds = mutableMapOf() - quadBounds[Bounds0AttributeId] = InspectableValue.Coordinate(Coordinate(bounds.x0, bounds.y0)) - quadBounds[Bounds1AttributeId] = InspectableValue.Coordinate(Coordinate(bounds.x1, bounds.y1)) - quadBounds[Bounds2AttributeId] = InspectableValue.Coordinate(Coordinate(bounds.x2, bounds.y2)) - quadBounds[Bounds3AttributeId] = InspectableValue.Coordinate(Coordinate(bounds.x3, bounds.y3)) - props[BoundsAttributeId] = InspectableObject(quadBounds.toMap()) - } + override fun getAttributes( + node: ComposeNode, + shouldGetAdditionalData: Boolean + ): MaybeDeferred { + return Deferred { + val builder = mutableMapOf() + val props = mutableMapOf() + + props[IdAttributeId] = InspectableValue.Number(node.inspectorNode.id) + props[ViewIdAttributeId] = InspectableValue.Number(node.inspectorNode.viewId) + props[KeyAttributeId] = InspectableValue.Number(node.inspectorNode.key) + props[NameAttributeId] = InspectableValue.Text(node.inspectorNode.name) + props[FilenameAttributeId] = InspectableValue.Text(node.inspectorNode.fileName) + props[PackageHashAttributeId] = InspectableValue.Number(node.inspectorNode.packageHash) + props[LineNumberAttributeId] = InspectableValue.Number(node.inspectorNode.lineNumber) + props[OffsetAttributeId] = InspectableValue.Number(node.inspectorNode.offset) + props[LengthAttributeId] = InspectableValue.Number(node.inspectorNode.length) + + props[BoxAttributeId] = + InspectableValue.Bounds( + Bounds( + node.inspectorNode.left, + node.inspectorNode.top, + node.inspectorNode.width, + node.inspectorNode.height)) + + node.inspectorNode.bounds?.let { bounds -> + val quadBounds = mutableMapOf() + quadBounds[Bounds0AttributeId] = + InspectableValue.Coordinate(Coordinate(bounds.x0, bounds.y0)) + quadBounds[Bounds1AttributeId] = + InspectableValue.Coordinate(Coordinate(bounds.x1, bounds.y1)) + quadBounds[Bounds2AttributeId] = + InspectableValue.Coordinate(Coordinate(bounds.x2, bounds.y2)) + quadBounds[Bounds3AttributeId] = + InspectableValue.Coordinate(Coordinate(bounds.x3, bounds.y3)) + props[BoundsAttributeId] = InspectableObject(quadBounds.toMap()) + } - val params = mutableMapOf() - node.parameters.forEach { parameter -> - fillNodeParameters(parameter, params, node.inspectorNode.name) - } - builder[ParametersAttributeId] = InspectableObject(params.toMap()) + val params = mutableMapOf() + node.getParameters(shouldGetAdditionalData).forEach { parameter -> + fillNodeParameters(parameter, params, node.inspectorNode.name) + } + builder[ParametersAttributeId] = InspectableObject(params.toMap()) - val mergedSemantics = mutableMapOf() - node.mergedSemantics.forEach { parameter -> - fillNodeParameters(parameter, mergedSemantics, node.inspectorNode.name) - } - builder[MergedSemanticsAttributeId] = InspectableObject(mergedSemantics.toMap()) + val mergedSemantics = mutableMapOf() + node.getMergedSemantics(shouldGetAdditionalData).forEach { parameter -> + fillNodeParameters(parameter, mergedSemantics, node.inspectorNode.name) + } + builder[MergedSemanticsAttributeId] = InspectableObject(mergedSemantics.toMap()) - val unmergedSemantics = mutableMapOf() - node.unmergedSemantics.forEach { parameter -> - fillNodeParameters(parameter, unmergedSemantics, node.inspectorNode.name) - } - builder[UnmergedSemanticsAttributeId] = InspectableObject(unmergedSemantics.toMap()) + val unmergedSemantics = mutableMapOf() + node.getUnmergedSemantics(shouldGetAdditionalData).forEach { parameter -> + fillNodeParameters(parameter, unmergedSemantics, node.inspectorNode.name) + } + builder[UnmergedSemanticsAttributeId] = InspectableObject(unmergedSemantics.toMap()) - builder[SectionId] = InspectableObject(props.toMap()) + builder[SectionId] = InspectableObject(props.toMap()) - return Immediate(builder) + AttributesInfo(builder, node.hasAdditionalData) + } } override fun getInlineAttributes(node: ComposeNode): Map { val attributes = mutableMapOf() if (!node.inspectorNode.inlined) { - node.recompositionCount?.let { attributes["🔄"] = it.toString() } - node.skipCount?.let { attributes["⏭️"] = it.toString() } + node.recompositionCounts?.let { (counts, skips) -> + attributes["🔄"] = counts.toString() + attributes["⏭️"] = skips.toString() + } } else { attributes["inline"] = "true" } @@ -179,6 +193,7 @@ object ComposeNodeDescriptor : NodeDescriptor { private fun NodeParameter.toInspectableValue(): InspectableValue { return when (type) { ParameterType.Iterable, + ParameterType.ComplexObject, ParameterType.String -> InspectableValue.Text(value.toString()) ParameterType.Boolean -> InspectableValue.Boolean(value as Boolean) ParameterType.Int32 -> InspectableValue.Number(value as Int) diff --git a/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/model/ComposeNode.kt b/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/model/ComposeNode.kt index f1198dfc911..61fc44bb729 100644 --- a/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/model/ComposeNode.kt +++ b/android/plugins/jetpack-compose/src/main/java/com/facebook/flipper/plugins/jetpackcompose/model/ComposeNode.kt @@ -8,6 +8,7 @@ package com.facebook.flipper.plugins.jetpackcompose.model import android.os.Build +import android.util.Log import android.view.View import android.view.ViewGroup import androidx.annotation.RequiresApi @@ -17,11 +18,13 @@ import facebook.internal.androidx.compose.ui.inspection.inspector.InspectorNode import facebook.internal.androidx.compose.ui.inspection.inspector.LayoutInspectorTree import facebook.internal.androidx.compose.ui.inspection.inspector.NodeParameter import facebook.internal.androidx.compose.ui.inspection.inspector.ParameterKind +import facebook.internal.androidx.compose.ui.inspection.inspector.ParameterType // Same values as in AndroidX (ComposeLayoutInspector.kt) private const val MAX_RECURSIONS = 2 private const val MAX_ITERABLE_SIZE = 5 +@RequiresApi(Build.VERSION_CODES.Q) class ComposeNode( private val parentComposeView: View, private val layoutInspectorTree: LayoutInspectorTree, @@ -37,31 +40,63 @@ class ComposeNode( inspectorNode.width, inspectorNode.height) - val recompositionCount: Int? - - val skipCount: Int? + val recompositionCounts: Pair? by lazy { + recompositionHandler.getCounts(inspectorNode.key, inspectorNode.anchorId)?.let { + Pair(it.count, it.skips) + } + } val children: List = collectChildren() - val parameters: List + val hasAdditionalData: Boolean + get() { + return hasAdditionalParameterData || + hasAdditionalMergedSemanticsData || + hasAdditionalUnmergedSemanticsData + } + + private var hasAdditionalParameterData: Boolean = false + private var hasAdditionalMergedSemanticsData: Boolean = false + private var hasAdditionalUnmergedSemanticsData: Boolean = false - val mergedSemantics: List + fun getParameters(useReflection: Boolean): List { + return getNodeParameters(ParameterKind.Normal, useReflection) + } - val unmergedSemantics: List + fun getMergedSemantics(useReflection: Boolean): List { + return getNodeParameters(ParameterKind.MergedSemantics, useReflection) + } - init { - val count = recompositionHandler.getCounts(inspectorNode.key, inspectorNode.anchorId) - recompositionCount = count?.count - skipCount = count?.skips - parameters = getNodeParameters(ParameterKind.Normal) - mergedSemantics = getNodeParameters(ParameterKind.MergedSemantics) - unmergedSemantics = getNodeParameters(ParameterKind.UnmergedSemantics) + fun getUnmergedSemantics(useReflection: Boolean): List { + return getNodeParameters(ParameterKind.UnmergedSemantics, useReflection) } - private fun getNodeParameters(kind: ParameterKind): List { + private fun getNodeParameters(kind: ParameterKind, useReflection: Boolean): List { layoutInspectorTree.resetAccumulativeState() - return layoutInspectorTree.convertParameters( - inspectorNode.id, inspectorNode, kind, MAX_RECURSIONS, MAX_ITERABLE_SIZE) + return try { + val params = + layoutInspectorTree.convertParameters( + inspectorNode.id, + inspectorNode, + kind, + MAX_RECURSIONS, + MAX_ITERABLE_SIZE, + useReflection) + if (!useReflection) { + // We only need to check for additional data if we are not using reflection since + // params parsed with useReflection == true wont have complex objects + val hasAdditionalData = hasAdditionalData(params) + when (kind) { + ParameterKind.Normal -> hasAdditionalParameterData = hasAdditionalData + ParameterKind.MergedSemantics -> hasAdditionalMergedSemanticsData = hasAdditionalData + ParameterKind.UnmergedSemantics -> hasAdditionalUnmergedSemanticsData = hasAdditionalData + } + } + params + } catch (t: Throwable) { + Log.e(TAG, "Failed to get parameters.", t) + emptyList() + } } private fun collectChildren(): List { @@ -102,4 +137,21 @@ class ComposeNode( } return null } + + private fun hasAdditionalData(params: List): Boolean { + val queue = ArrayDeque() + queue.addAll(params) + while (!queue.isEmpty()) { + val param = queue.removeFirst() + if (param.type == ParameterType.ComplexObject) { + return true + } + queue.addAll(param.elements) + } + return false + } + + companion object { + private const val TAG = "ComposeNode" + } } diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/BUCK b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/BUCK new file mode 100644 index 00000000000..726ffab3d38 --- /dev/null +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/BUCK @@ -0,0 +1,19 @@ +load("@fbsource//tools/build_defs/android:fb_android_library.bzl", "fb_android_library") + +fb_android_library( + name = "ui-inspection", + abi_generation_mode = "source_only", + create_suffixed_alias = True, + dataclass_generate = { + "mode": "EXPLICIT", + }, + k2 = True, + oncall = "flipper", + deps = [ + "//third-party/java/androidx/compose/ui/ui-android:ui-android-aar", + ], + exported_deps = [ + "//third-party/java/androidx/inspection/inspection:inspection", + "//xplat/sonar/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector:inspector", + ], +) diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/METADATA.bzl b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/METADATA.bzl new file mode 100644 index 00000000000..4b2a89d486b --- /dev/null +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/METADATA.bzl @@ -0,0 +1,8 @@ +METADATA = { + "licenses": ["The Apache Software License, Version 2.0"], + "maintainers": ["androidx"], + "name": "ui-inspection", + "upstream_address": "https://android.googlesource.com/platform/frameworks/support/+/androidx-main/compose/ui/ui-inspection/src/main/java/androidx/compose/ui/inspection", + "upstream_hash": "f24ae42d863ea9710488e8f34deff4624840035a", + "version": "1.0.0", +} diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/README.facebook b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/README.facebook index 94ea6c9366b..ab69264869c 100644 --- a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/README.facebook +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/README.facebook @@ -1,5 +1,5 @@ This is a check-in of https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/compose/ui/ui-inspection/src/main/java/androidx/compose/ui/inspection -The classes are currently not exported but we rely on them for debug information. +The classes are currently not exported but we rely on them for debug information. The package name was updated in all of the files to avoid collisions with AOSP versions of these files which are used by Android Studio Layout Inspector. Tree: 80c942dfbd74be7bf1931364d0157a85a3517287 diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/BUCK b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/BUCK new file mode 100644 index 00000000000..aa3d7c3473c --- /dev/null +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/BUCK @@ -0,0 +1,17 @@ +load("@fbsource//tools/build_defs/android:fb_android_library.bzl", "fb_android_library") + +fb_android_library( + name = "inspector", + create_suffixed_alias = True, + dataclass_generate = { + "mode": "EXPLICIT", + }, + k2 = True, + oncall = "flipper", + deps = [ + "//fbandroid/third-party/android/androidx/compose:ui-tooling-data", + "//third-party/java/androidx/compose/ui/ui-android:ui-android-aar", + "//third-party/kotlin:kotlin-reflect", + "//xplat/sonar/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util:util", + ], +) diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/LayoutInspectorTree.kt b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/LayoutInspectorTree.kt index 83ae643ee42..8d4736f38b4 100644 --- a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/LayoutInspectorTree.kt +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/LayoutInspectorTree.kt @@ -16,8 +16,14 @@ package facebook.internal.androidx.compose.ui.inspection.inspector +import android.os.Build import android.view.View +import androidx.annotation.RequiresApi import androidx.annotation.VisibleForTesting +import androidx.collection.LongList +import androidx.collection.mutableIntObjectMapOf +import androidx.collection.mutableLongListOf +import androidx.collection.mutableLongObjectMapOf import androidx.compose.runtime.tooling.CompositionData import androidx.compose.runtime.tooling.CompositionGroup import androidx.compose.ui.InternalComposeUiApi @@ -75,6 +81,7 @@ private val unwantedCalls = /** Generator of a tree for the Layout Inspector. */ @OptIn(UiToolingDataApi::class) +@RequiresApi(Build.VERSION_CODES.Q) class LayoutInspectorTree { @Suppress("MemberVisibilityCanBePrivate") var hideSystemNodes = true var includeNodesOutsizeOfWindow = true @@ -93,9 +100,9 @@ class LayoutInspectorTree { /** Map from owner node to child trees that are about to be stitched to this owner */ private val ownerMap = IdentityHashMap>() /** Map from semantics id to a list of merged semantics information */ - private val semanticsMap = mutableMapOf>() + private val semanticsMap = mutableIntObjectMapOf>() /* Map of seemantics id to a list of unmerged semantics information */ - private val unmergedSemanticsMap = mutableMapOf>() + private val unmergedSemanticsMap = mutableIntObjectMapOf>() /** Set of tree nodes that were stitched into another tree */ private val stitched = Collections.newSetFromMap(IdentityHashMap()) private val contextCache = ContextCache() @@ -161,7 +168,8 @@ class LayoutInspectorTree { node: InspectorNode, kind: ParameterKind, maxRecursions: Int, - maxInitialIterableSize: Int + maxInitialIterableSize: Int, + useReflection: Boolean ): List { val parameters = node.parametersByKind(kind) return parameters.mapIndexed { index, parameter -> @@ -174,42 +182,11 @@ class LayoutInspectorTree { kind, index, maxRecursions, - maxInitialIterableSize) + maxInitialIterableSize, + useReflection) } } - /** - * Converts a part of the [RawParameter] identified by [reference] into a displayable parameter. - * If the parameter is some sort of a collection then [startIndex] and [maxElements] describes the - * scope of the data returned. - */ - fun expandParameter( - rootId: Long, - node: InspectorNode, - reference: NodeParameterReference, - startIndex: Int, - maxElements: Int, - maxRecursions: Int, - maxInitialIterableSize: Int - ): NodeParameter? { - val parameters = node.parametersByKind(reference.kind) - if (reference.parameterIndex !in parameters.indices) { - return null - } - val parameter = parameters[reference.parameterIndex] - return parameterFactory.expand( - rootId, - node.id, - node.anchorId, - parameter.name, - parameter.value, - reference, - startIndex, - maxElements, - maxRecursions, - maxInitialIterableSize) - } - /** Reset any state accumulated between windows. */ @Suppress("unused") fun resetAccumulativeState() { @@ -397,7 +374,10 @@ class LayoutInspectorTree { } } else { node.id = if (node.id != UNDEFINED_ID) node.id else --generatedId - val withSemantics = node.packageHash !in systemPackages + // START CHANGE + val withSemantics = true + // val withSemantics = node.packageHash !in systemPackages + // END CHANGE val resultNode = node.build(withSemantics) // TODO: replace getOrPut with putIfAbsent which requires API level 24 node.layoutNodes.forEach { claimedNodes.getOrPut(it) { resultNode } } @@ -554,18 +534,30 @@ class LayoutInspectorTree { return anchorId.toLong() - Int.MAX_VALUE.toLong() + RESERVED_FOR_GENERATED_IDS } - private fun belongsToView(layoutNodes: List, view: View): Boolean = - layoutNodes - .asSequence() - .flatMap { node -> - node - .getModifierInfo() - .asSequence() - .map { it.extra } - .filterIsInstance() - .map { it.ownerViewId } - } - .contains(view.uniqueDrawingId) + /** + * Returns true if the [layoutNodes] belong under the specified [view]. + * + * For: popups & Dialogs we may encounter parts of a compose tree that belong under a different + * sub-composition. Consider these nodes to "belong" to the current sub-composition under [view] + * if the ownerViews contains [view] or doesn't contain any owner views at all. + */ + private fun belongsToView(layoutNodes: List, view: View): Boolean { + val ownerViewIds = ownerViews(layoutNodes) + return ownerViewIds.isEmpty() || ownerViewIds.contains(view.uniqueDrawingId) + } + + private fun ownerViews(layoutNodes: List): LongList { + val ownerViewIds = mutableLongListOf() + layoutNodes.forEach { node -> + node.getModifierInfo().forEach { info -> + val extra = info.extra + if (extra is GraphicLayerInfo) { + ownerViewIds.add(extra.ownerViewId) + } + } + } + return ownerViewIds + } private fun addParameters(context: SourceContext, node: MutableInspectorNode) { context.parameters.forEach { @@ -680,7 +672,7 @@ class LayoutInspectorTree { * Map from View owner to a pair of [InspectorNode] indicating the actual root, and the node * where the content should be stitched in. */ - private val found = mutableMapOf() + private val found = mutableLongObjectMapOf() /** Call this before converting a SlotTree for an AndroidComposeView */ fun clear() { diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/NodeParameter.kt b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/NodeParameter.kt index b2a3ce1a040..e4807083e7c 100644 --- a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/NodeParameter.kt +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/NodeParameter.kt @@ -54,4 +54,5 @@ enum class ParameterType { Lambda, FunctionReference, Iterable, + ComplexObject, } diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/NodeParameterReference.kt b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/NodeParameterReference.kt index 1353413f06e..5342211b063 100644 --- a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/NodeParameterReference.kt +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/NodeParameterReference.kt @@ -16,7 +16,7 @@ package facebook.internal.androidx.compose.ui.inspection.inspector -import facebook.internal.androidx.compose.ui.inspection.util.asIntArray +import androidx.collection.IntList /** * A reference to a parameter to a [NodeParameter] @@ -33,16 +33,8 @@ class NodeParameterReference( val anchorId: Int, val kind: ParameterKind, val parameterIndex: Int, - val indices: IntArray + val indices: IntList ) { - constructor( - nodeId: Long, - anchorId: Int, - kind: ParameterKind, - parameterIndex: Int, - indices: List - ) : this(nodeId, anchorId, kind, parameterIndex, indices.asIntArray()) - // For testing: override fun toString(): String { val suffix = if (indices.isNotEmpty()) ", ${indices.joinToString()}" else "" diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/PackageHashes.kt b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/PackageHashes.kt index 8ca3d67107e..cdbfae1c856 100644 --- a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/PackageHashes.kt +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/PackageHashes.kt @@ -10,6 +10,7 @@ package facebook.internal.androidx.compose.ui.inspection.inspector import androidx.annotation.VisibleForTesting +import androidx.collection.intSetOf import kotlin.math.absoluteValue @VisibleForTesting @@ -17,7 +18,7 @@ fun packageNameHash(packageName: String) = packageName.fold(0) { hash, char -> hash * 31 + char.code }.absoluteValue val systemPackages = - setOf( + intSetOf( -1, packageNameHash("androidx.compose.animation"), packageNameHash("androidx.compose.animation.core"), @@ -34,22 +35,26 @@ val systemPackages = packageNameHash("androidx.compose.foundation.lazy.staggeredgrid"), packageNameHash("androidx.compose.foundation.pager"), packageNameHash("androidx.compose.foundation.text"), + packageNameHash("androidx.compose.foundation.text.input"), packageNameHash("androidx.compose.foundation.text.selection"), - packageNameHash("androidx.compose.foundation.text2"), - packageNameHash("androidx.compose.foundation.text2.input"), - packageNameHash("androidx.compose.foundation.text2.input.internal.selection"), packageNameHash("androidx.compose.foundation.window"), packageNameHash("androidx.compose.material"), packageNameHash("androidx.compose.material.internal"), + packageNameHash("androidx.compose.material.navigation"), packageNameHash("androidx.compose.material.pullrefresh"), packageNameHash("androidx.compose.material.ripple"), packageNameHash("androidx.compose.material3"), packageNameHash("androidx.compose.material3.adaptive"), - packageNameHash("androidx.compose.material3.adaptive.navigation.suite"), + packageNameHash("androidx.compose.material3.adaptive.layout"), + packageNameHash("androidx.compose.material3.adaptive.navigation"), + packageNameHash("androidx.compose.material3.adaptive.navigationsuite"), + packageNameHash("androidx.compose.material3.carousel"), + packageNameHash("androidx.compose.material3.common"), packageNameHash("androidx.compose.material3.internal"), - packageNameHash("androidx.compose.material3.pullrefresh"), + packageNameHash("androidx.compose.material3.pulltorefresh"), packageNameHash("androidx.compose.material3.windowsizeclass"), packageNameHash("androidx.compose.runtime"), + packageNameHash("androidx.compose.runtime.internal"), packageNameHash("androidx.compose.runtime.livedata"), packageNameHash("androidx.compose.runtime.mock"), packageNameHash("androidx.compose.runtime.reflect"), @@ -58,6 +63,8 @@ val systemPackages = packageNameHash("androidx.compose.runtime.saveable"), packageNameHash("androidx.compose.ui"), packageNameHash("androidx.compose.ui.awt"), + packageNameHash("androidx.compose.ui.draw"), + packageNameHash("androidx.compose.ui.graphics"), packageNameHash("androidx.compose.ui.graphics.benchmark"), packageNameHash("androidx.compose.ui.graphics.vector"), packageNameHash("androidx.compose.ui.layout"), @@ -66,4 +73,5 @@ val systemPackages = packageNameHash("androidx.compose.ui.util"), packageNameHash("androidx.compose.ui.viewinterop"), packageNameHash("androidx.compose.ui.window"), + packageNameHash("androidx.navigation.compose"), ) diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/ParameterFactory.kt b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/ParameterFactory.kt index e74e49ed445..356bab0d4be 100644 --- a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/ParameterFactory.kt +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/ParameterFactory.kt @@ -18,6 +18,8 @@ package facebook.internal.androidx.compose.ui.inspection.inspector import android.util.Log import android.view.View +import androidx.collection.mutableIntListOf +import androidx.collection.mutableLongObjectMapOf import androidx.compose.runtime.internal.ComposableLambda import androidx.compose.ui.AbsoluteAlignment import androidx.compose.ui.Modifier @@ -44,6 +46,8 @@ import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.TextUnitType import facebook.internal.androidx.compose.ui.inspection.inspector.ParameterType.DimensionDp +import facebook.internal.androidx.compose.ui.inspection.util.copy +import facebook.internal.androidx.compose.ui.inspection.util.removeLast import java.lang.reflect.Field import java.lang.reflect.Modifier as JavaModifier import java.util.IdentityHashMap @@ -59,14 +63,15 @@ import kotlin.reflect.jvm.isAccessible import kotlin.reflect.jvm.javaField import kotlin.reflect.jvm.javaGetter -private val reflectionScope: ReflectionScope = ReflectionScope() - /** * Factory of [NodeParameter]s. * * Each parameter value is converted to a user readable value. */ internal class ParameterFactory(private val inlineClassConverter: InlineClassConverter) { + + private val reflectionScope: ReflectionScope = ReflectionScope() + /** A map from known values to a user readable string representation. */ private val valueLookup = mutableMapOf() @@ -123,11 +128,26 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon kind: ParameterKind, parameterIndex: Int, maxRecursions: Int, - maxInitialIterableSize: Int + maxInitialIterableSize: Int, + useReflection: Boolean ): NodeParameter { val creator = creatorCache ?: ParameterCreator() try { - return reflectionScope.withReflectiveAccess { + return if (useReflection) { + reflectionScope.withReflectiveAccess { + creator.create( + rootId, + nodeId, + anchorId, + name, + value, + kind, + parameterIndex, + maxRecursions, + maxInitialIterableSize, + true) + } + } else { creator.create( rootId, nodeId, @@ -137,52 +157,8 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon kind, parameterIndex, maxRecursions, - maxInitialIterableSize) - } - } finally { - creatorCache = creator - } - } - - /** - * Create/expand the [NodeParameter] specified by [reference]. - * - * @param rootId is the root id of the specified [nodeId]. - * @param nodeId is the [InspectorNode.id] of the node the parameter belongs to. - * @param anchorId is the [InspectorNode.anchorId] of the node the parameter belongs to. - * @param name is the name of the [reference].parameterIndex'th parameter of the node. - * @param value is the value of the [reference].parameterIndex'th parameter of the node. - * @param startIndex is the index of the 1st wanted element of a List/Array. - * @param maxElements is the max number of elements wanted from a List/Array. - * @param maxRecursions is the max recursion into composite types starting from reference. - * @param maxInitialIterableSize is the max number of elements wanted in new List/Array values. - */ - fun expand( - rootId: Long, - nodeId: Long, - anchorId: Int, - name: String, - value: Any?, - reference: NodeParameterReference, - startIndex: Int, - maxElements: Int, - maxRecursions: Int, - maxInitialIterableSize: Int - ): NodeParameter? { - val creator = creatorCache ?: ParameterCreator() - try { - return reflectionScope.withReflectiveAccess { - creator.expand( - rootId, - nodeId, - anchorId, - name, - value, - reference, - startIndex, - maxElements, - maxRecursions, - maxInitialIterableSize) + maxInitialIterableSize, + false) } } finally { creatorCache = creator @@ -190,8 +166,7 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon } fun clearReferenceCache() { - val creator = creatorCache ?: return - creator.clearReferenceCache() + creatorCache?.clearReferenceCache() } private fun loadConstantsFrom(javaClass: Class<*>) { @@ -326,11 +301,12 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon private var maxRecursions = 0 private var maxInitialIterableSize = 0 private var recursions = 0 - private val valueIndex = mutableListOf() + private val valueIndex = mutableIntListOf() private val valueLazyReferenceMap = IdentityHashMap>() private val rootValueIndexCache = - mutableMapOf>() + mutableLongObjectMapOf>() private var valueIndexMap = IdentityHashMap() + private var useReflection = false fun create( rootId: Long, @@ -341,56 +317,24 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon kind: ParameterKind, parameterIndex: Int, maxRecursions: Int, - maxInitialIterableSize: Int + maxInitialIterableSize: Int, + useReflection: Boolean ): NodeParameter = try { setup( - rootId, nodeId, anchorId, kind, parameterIndex, maxRecursions, maxInitialIterableSize) + rootId, + nodeId, + anchorId, + kind, + parameterIndex, + maxRecursions, + maxInitialIterableSize, + useReflection) create(name, value, null) ?: createEmptyParameter(name) } finally { setup() } - fun expand( - rootId: Long, - nodeId: Long, - anchorId: Int, - name: String, - value: Any?, - reference: NodeParameterReference, - startIndex: Int, - maxElements: Int, - maxRecursions: Int, - maxInitialIterableSize: Int - ): NodeParameter? { - setup( - rootId, - nodeId, - anchorId, - reference.kind, - reference.parameterIndex, - maxRecursions, - maxInitialIterableSize) - var parent: Pair? = null - var new = Pair(name, value) - for (i in reference.indices) { - parent = new - new = find(new.first, new.second, i) ?: return null - } - recursions = 0 - valueIndex.addAll(reference.indices.asSequence()) - val parameter = - if (startIndex == 0) { - create(new.first, new.second, parent?.second) - } else { - createFromCompositeValue(new.first, new.second, parent?.second, startIndex, maxElements) - } - if (parameter == null && reference.indices.isEmpty()) { - return createEmptyParameter(name) - } - return parameter - } - fun clearReferenceCache() { rootValueIndexCache.clear() } @@ -402,7 +346,8 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon newKind: ParameterKind = ParameterKind.Normal, newParameterIndex: Int = 0, maxRecursions: Int = 0, - maxInitialIterableSize: Int = 0 + maxInitialIterableSize: Int = 0, + useReflection: Boolean = false ) { rootId = newRootId nodeId = newNodeId @@ -415,6 +360,7 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon valueIndex.clear() valueLazyReferenceMap.clear() valueIndexMap = rootValueIndexCache.getOrPut(newRootId) { IdentityHashMap() } + this.useReflection = useReflection } private fun create(name: String, value: Any?, parentValue: Any?): NodeParameter? { @@ -444,8 +390,10 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon if (value == null) { return null } - createFromConstant(name, value)?.let { - return it + if (useReflection) { + createFromConstant(name, value)?.let { + return it + } } return when (value) { is AnnotatedString -> NodeParameter(name, ParameterType.String, value.text) @@ -492,25 +440,21 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon createFromSequence(name, value, value.asSequence(), startIndex, maxElements) value.javaClass.isArray -> createFromArray(name, value, startIndex, maxElements) value is Offset -> createFromOffset(name, value) - value is Shadow -> createFromShadow(name, value) + value is Shadow -> { + if (useReflection) { + createFromShadow(name, value) + } else { + NodeParameter(name, ParameterType.ComplexObject, value.toString()) + } + } value is TextStyle -> createFromTextStyle(name, value) - else -> createFromKotlinReflection(name, value) - } - - private fun find(name: String, value: Any?, index: Int): Pair? = - when { - value == null -> null - value is Modifier -> findFromModifier(name, value, index) - value is InspectableValue -> findFromInspectableValue(value, index) - value is Sequence<*> -> findFromSequence(value, index) - value is Map<*, *> -> findFromSequence(value.asSequence(), index) - value is Map.Entry<*, *> -> findFromMapEntry(value, index) - value is Iterable<*> -> findFromSequence(value.asSequence(), index) - value.javaClass.isArray -> findFromArray(value, index) - value is Offset -> findFromOffset(value, index) - value is Shadow -> findFromShadow(value, index) - value is TextStyle -> findFromTextStyle(value, index) - else -> findFromKotlinReflection(value, index) + else -> { + if (useReflection) { + createFromKotlinReflection(name, value) + } else { + NodeParameter(name, ParameterType.ComplexObject, value.toString()) + } + } } private fun createRecursively( @@ -609,7 +553,7 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon } private fun valueIndexToReference(): NodeParameterReference = - NodeParameterReference(nodeId, anchorId, kind, parameterIndex, valueIndex) + NodeParameterReference(nodeId, anchorId, kind, parameterIndex, valueIndex.copy()) private fun createEmptyParameter(name: String): NodeParameter = NodeParameter(name, ParameterType.String, "") @@ -624,11 +568,6 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon return createFromSequence(name, value, sequence, startIndex, maxElements) } - private fun findFromArray(value: Any, index: Int): Pair? { - val sequence = arrayToSequence(value) ?: return null - return findFromSequence(sequence, index) - } - private fun arrayToSequence(value: Any): Sequence<*>? = when (value) { is Array<*> -> value.asSequence() @@ -691,19 +630,18 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon } } - private fun findFromKotlinReflection(value: Any, index: Int): Pair? { - val properties = lookup(value)?.entries?.iterator()?.asSequence() ?: return null - val element = properties.elementAtOrNull(index)?.value ?: return null - return Pair(element.name, valueOf(element, value)) - } - private fun lookup(value: Any): Map>? { val kClass = value::class val simpleName = kClass.simpleName val qualifiedName = kClass.qualifiedName if (simpleName == null || qualifiedName == null || - ignoredPackagePrefixes.any { qualifiedName.startsWith(it) }) { + ignoredPackagePrefixes.any { qualifiedName.startsWith(it) } || + kClass.allSuperclasses.any { superClass -> + val superClassQualifiedName = superClass.qualifiedName + superClassQualifiedName == null || + ignoredPackagePrefixes.any { superClassQualifiedName.startsWith(it) } + }) { // Exit without creating a parameter for: // - internal synthetic classes // - certain android packages @@ -749,15 +687,6 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon return parameter.removeIfEmpty(value) } - private fun findFromInspectableValue(value: InspectableValue, index: Int): Pair? { - val elements = value.inspectableElements.toList() - if (index !in elements.indices) { - return null - } - val element = elements[index] - return Pair(element.name, element.value) - } - private fun createFromMapEntry( name: String, entry: Map.Entry<*, *>, @@ -774,13 +703,6 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon } } - private fun findFromMapEntry(entry: Map.Entry<*, *>, index: Int): Pair? = - when (index) { - 0 -> Pair("key", entry.key) - 1 -> Pair("value", entry.value) - else -> null - } - private fun createFromSequence( name: String, value: Any, @@ -811,11 +733,6 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon } } - private fun findFromSequence(value: Sequence<*>, index: Int): Pair? { - val element = value.elementAtOrNull(index) ?: return null - return Pair("[$index]", element) - } - private fun sequenceName(value: Any): String = when (value) { is Array<*> -> "Array[${value.size}]" @@ -864,16 +781,6 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon return collector.modifiers } - private fun findFromModifier(name: String, value: Modifier, index: Int): Pair? = - when { - name.isNotEmpty() -> { - val modifiers = unwrap(value) - if (index in modifiers.indices) Pair("", modifiers[index]) else null - } - value is InspectableValue -> findFromInspectableValue(value, index) - else -> null - } - private fun createFromOffset(name: String, value: Offset): NodeParameter { val parameter = NodeParameter(name, ParameterType.String, Offset::class.java.simpleName) val elements = parameter.elements @@ -884,13 +791,6 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon return parameter } - private fun findFromOffset(value: Offset, index: Int): Pair? = - when (index) { - 0 -> Pair("x", with(density) { value.x.toDp() }) - 1 -> Pair("y", with(density) { value.y.toDp() }) - else -> null - } - // Special handling of blurRadius: convert to dp: private fun createFromShadow(name: String, value: Shadow): NodeParameter? { val parameter = createFromKotlinReflection(name, value) ?: return null @@ -905,14 +805,6 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon return parameter } - private fun findFromShadow(value: Shadow, index: Int): Pair? { - val result = findFromKotlinReflection(value, index) - if (result == null || result.first != "blurRadius") { - return result - } - return Pair("blurRadius", with(density) { value.blurRadius.toDp() }) - } - // Temporary handling of TextStyle: remove when TextStyle implements InspectableValue // Hide: paragraphStyle, spanStyle, platformStyle, lineHeightStyle private fun createFromTextStyle(name: String, value: TextStyle): NodeParameter? { @@ -940,28 +832,6 @@ internal class ParameterFactory(private val inlineClassConverter: InlineClassCon return parameter } - private fun findFromTextStyle(value: TextStyle, index: Int): Pair? = - when (index) { - 0 -> Pair("color", value.color) - 1 -> Pair("fontSize", value.fontSize) - 2 -> Pair("fontWeight", value.fontWeight) - 3 -> Pair("fontStyle", value.fontStyle) - 4 -> Pair("fontSynthesis", value.fontSynthesis) - 5 -> Pair("fontFamily", value.fontFamily) - 6 -> Pair("fontFeatureSettings", value.fontFeatureSettings) - 7 -> Pair("letterSpacing", value.letterSpacing) - 8 -> Pair("baselineShift", value.baselineShift) - 9 -> Pair("textGeometricTransform", value.textGeometricTransform) - 10 -> Pair("localeList", value.localeList) - 11 -> Pair("background", value.background) - 12 -> Pair("textDecoration", value.textDecoration) - 13 -> Pair("shadow", value.shadow) - 14 -> Pair("textDirection", value.textDirection) - 15 -> Pair("lineHeight", value.lineHeight) - 16 -> Pair("textIndent", value.textIndent) - else -> null - } - @Suppress("DEPRECATION") private fun createFromTextUnit(name: String, value: TextUnit): NodeParameter = when (value.type) { diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/ReflectionScope.kt b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/ReflectionScope.kt index 8deae6a1b32..321d9958d94 100644 --- a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/ReflectionScope.kt +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/inspector/ReflectionScope.kt @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Android Open Source Project + * Copyright 2020 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/AnchorMap.kt b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/AnchorMap.kt index b7af6df915e..247d15a01a4 100644 --- a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/AnchorMap.kt +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/AnchorMap.kt @@ -16,14 +16,12 @@ package facebook.internal.androidx.compose.ui.inspection.util -import java.util.IdentityHashMap - const val NO_ANCHOR_ID = 0 /** A map of anchors with a unique id generator. */ class AnchorMap { private val anchorLookup = mutableMapOf() - private val idLookup = IdentityHashMap() + private val idLookup = mutableMapOf() /** Return a unique id for the specified [anchor] instance. */ operator fun get(anchor: Any?): Int = diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/BUCK b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/BUCK new file mode 100644 index 00000000000..4140f21d81c --- /dev/null +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/BUCK @@ -0,0 +1,11 @@ +load("@fbsource//tools/build_defs/android:fb_android_library.bzl", "fb_android_library") + +fb_android_library( + name = "util", + abi_generation_mode = "source_only", + k2 = True, + oncall = "flipper", + deps = [ + "//third-party/java/androidx/collection/collection:collection", + ], +) diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/CollectionUtil.kt b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/CollectionUtil.kt new file mode 100644 index 00000000000..d4f67498279 --- /dev/null +++ b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/CollectionUtil.kt @@ -0,0 +1,45 @@ +/* + * Copyright 2021 The Android Open Source Project + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package facebook.internal.androidx.compose.ui.inspection.util + +import androidx.collection.IntList +import androidx.collection.MutableIntList +import androidx.collection.MutableLongObjectMap +import androidx.collection.mutableIntListOf + +fun MutableIntList.removeLast() { + val last = lastIndex + if (last < 0) throw NoSuchElementException("List is empty.") else removeAt(last) +} + +fun >> Iterable.groupByToLongObjectMap( + destination: M, + keySelector: (T) -> Long +): M { + for (element in this) { + val key = keySelector(element) + val list = destination.getOrPut(key) { ArrayList() } + list.add(element) + } + return destination +} + +fun IntList.copy(): IntList { + val result = mutableIntListOf() + forEach { result.add(it) } + return result +} diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/IntArray.kt b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/IntArray.kt deleted file mode 100644 index 8287eb7a329..00000000000 --- a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/IntArray.kt +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright 2021 The Android Open Source Project - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -package facebook.internal.androidx.compose.ui.inspection.util - -private val EMPTY_INT_ARRAY = intArrayOf() - -fun List.asIntArray() = if (isNotEmpty()) toIntArray() else EMPTY_INT_ARRAY diff --git a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/ThreadUtils.kt b/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/ThreadUtils.kt deleted file mode 100644 index 80320d9f70b..00000000000 --- a/android/plugins/jetpack-compose/src/main/java/facebook/internal/androidx/compose/ui/inspection/util/ThreadUtils.kt +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Copyright 2021 The Android Open Source Project - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -package facebook.internal.androidx.compose.ui.inspection.util - -import android.os.Handler -import android.os.Looper -import java.util.concurrent.CompletableFuture -import java.util.concurrent.Future - -object ThreadUtils { - fun assertOnMainThread() { - if (!Looper.getMainLooper().isCurrentThread) { - error("This work is required on the main thread") - } - } - - fun assertOffMainThread() { - if (Looper.getMainLooper().isCurrentThread) { - error("This work is required off the main thread") - } - } - - /** - * Run some logic on the main thread, returning a future that will contain any data computed by - * and returned from the block. - * - * If this method is called from the main thread, it will run immediately. - */ - fun runOnMainThread(block: () -> T): Future { - return if (!Looper.getMainLooper().isCurrentThread) { - val future = CompletableFuture() - Handler.createAsync(Looper.getMainLooper()).post { future.complete(block()) } - future - } else { - CompletableFuture.completedFuture(block()) - } - } -} diff --git a/android/plugins/litho/build.gradle b/android/plugins/litho/build.gradle index 83a3a6a89c2..b583d189f68 100644 --- a/android/plugins/litho/build.gradle +++ b/android/plugins/litho/build.gradle @@ -37,6 +37,7 @@ android { implementation deps.lithoSectionsCore implementation deps.lithoWidget implementation deps.supportAppCompat + implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.1" compileOnly deps.jsr305 testImplementation deps.junit diff --git a/android/plugins/litho/src/main/java/com/facebook/flipper/plugins/uidebugger/litho/UIDebuggerLithoSupport.kt b/android/plugins/litho/src/main/java/com/facebook/flipper/plugins/uidebugger/litho/UIDebuggerLithoSupport.kt index b43e8de4c12..edfc368ba28 100644 --- a/android/plugins/litho/src/main/java/com/facebook/flipper/plugins/uidebugger/litho/UIDebuggerLithoSupport.kt +++ b/android/plugins/litho/src/main/java/com/facebook/flipper/plugins/uidebugger/litho/UIDebuggerLithoSupport.kt @@ -10,7 +10,11 @@ package com.facebook.flipper.plugins.uidebugger.litho import com.facebook.flipper.plugins.uidebugger.core.ConnectionListener import com.facebook.flipper.plugins.uidebugger.core.UIDContext import com.facebook.flipper.plugins.uidebugger.descriptors.DescriptorRegister -import com.facebook.flipper.plugins.uidebugger.litho.descriptors.* +import com.facebook.flipper.plugins.uidebugger.litho.descriptors.ComponentTreeDescriptor +import com.facebook.flipper.plugins.uidebugger.litho.descriptors.DebugComponentDescriptor +import com.facebook.flipper.plugins.uidebugger.litho.descriptors.LithoViewDescriptor +import com.facebook.flipper.plugins.uidebugger.litho.descriptors.MatrixDrawableDescriptor +import com.facebook.flipper.plugins.uidebugger.litho.descriptors.TextDrawableDescriptor import com.facebook.flipper.plugins.uidebugger.model.FrameworkEvent import com.facebook.flipper.plugins.uidebugger.model.FrameworkEventMetadata import com.facebook.litho.ComponentTree @@ -137,9 +141,12 @@ object UIDebuggerLithoSupport { event.attributeOrNull(attributeName)?.let { attributes[attributeName] = it.toString() } } + lateinit var DebugComponentDescritpor: DebugComponentDescriptor + private fun addDescriptors(register: DescriptorRegister) { register.register(LithoView::class.java, LithoViewDescriptor) - register.register(DebugComponent::class.java, DebugComponentDescriptor(register)) + DebugComponentDescritpor = DebugComponentDescriptor(register) + register.register(DebugComponent::class.java, DebugComponentDescritpor) register.register(TextDrawable::class.java, TextDrawableDescriptor) register.register(MatrixDrawable::class.java, MatrixDrawableDescriptor) register.register(ComponentTree::class.java, ComponentTreeDescriptor(register)) diff --git a/android/plugins/litho/src/main/java/com/facebook/flipper/plugins/uidebugger/litho/descriptors/DebugComponentDescriptor.kt b/android/plugins/litho/src/main/java/com/facebook/flipper/plugins/uidebugger/litho/descriptors/DebugComponentDescriptor.kt index 75565b94100..2aa0234b054 100644 --- a/android/plugins/litho/src/main/java/com/facebook/flipper/plugins/uidebugger/litho/descriptors/DebugComponentDescriptor.kt +++ b/android/plugins/litho/src/main/java/com/facebook/flipper/plugins/uidebugger/litho/descriptors/DebugComponentDescriptor.kt @@ -21,6 +21,7 @@ import com.facebook.flipper.plugins.uidebugger.litho.LithoTag import com.facebook.flipper.plugins.uidebugger.litho.descriptors.props.ComponentDataExtractor import com.facebook.flipper.plugins.uidebugger.litho.descriptors.props.LayoutPropExtractor import com.facebook.flipper.plugins.uidebugger.model.Bounds +import com.facebook.flipper.plugins.uidebugger.model.BoxData import com.facebook.flipper.plugins.uidebugger.model.Inspectable import com.facebook.flipper.plugins.uidebugger.model.InspectableObject import com.facebook.flipper.plugins.uidebugger.model.InspectableValue @@ -29,7 +30,6 @@ import com.facebook.flipper.plugins.uidebugger.model.MetadataId import com.facebook.flipper.plugins.uidebugger.util.Deferred import com.facebook.flipper.plugins.uidebugger.util.MaybeDeferred import com.facebook.litho.Component -import com.facebook.litho.ComponentTree import com.facebook.litho.DebugComponent import com.facebook.litho.DebugLayoutNodeEditor import com.facebook.litho.StateContainer @@ -40,6 +40,7 @@ import com.facebook.litho.widget.RecyclerBinder import com.facebook.rendercore.FastMath import com.facebook.yoga.YogaEdge import java.lang.reflect.Modifier +import kotlinx.serialization.json.JsonObject typealias GlobalKey = String @@ -61,6 +62,32 @@ class DebugComponentDescriptor(val register: DescriptorRegister) : NodeDescripto override fun getQualifiedName(node: com.facebook.litho.DebugComponent): String = node.component::class.qualifiedName ?: "" + override fun getBoxData(node: DebugComponent): BoxData? { + val layoutNode = node.layoutNode ?: return null + val margin = + listOf( + layoutNode.getLayoutMargin(YogaEdge.LEFT), + layoutNode.getLayoutMargin(YogaEdge.RIGHT), + layoutNode.getLayoutMargin(YogaEdge.TOP), + layoutNode.getLayoutMargin(YogaEdge.BOTTOM)) + + val border = + listOf( + layoutNode.getLayoutBorderWidth(YogaEdge.LEFT), + layoutNode.getLayoutBorderWidth(YogaEdge.RIGHT), + layoutNode.getLayoutBorderWidth(YogaEdge.TOP), + layoutNode.getLayoutBorderWidth(YogaEdge.BOTTOM)) + + val padding = + listOf( + layoutNode.getLayoutPadding(YogaEdge.LEFT), + layoutNode.getLayoutPadding(YogaEdge.RIGHT), + layoutNode.getLayoutPadding(YogaEdge.TOP), + layoutNode.getLayoutPadding(YogaEdge.BOTTOM)) + + return BoxData(margin, border, padding) + } + override fun getChildren(node: DebugComponent): List { val result = mutableListOf() @@ -221,8 +248,7 @@ class DebugComponentDescriptor(val register: DescriptorRegister) : NodeDescripto Bounds.fromRect(node.boundsInParentDebugComponent) override fun getTags(node: DebugComponent): Set { - val tags = mutableSetOf(LithoTag) - + val tags: MutableSet = mutableSetOf(LithoTag) if (node.component.mountType != Component.MountType.NONE) { tags.add(LithoMountableTag) } @@ -252,23 +278,23 @@ class DebugComponentDescriptor(val register: DescriptorRegister) : NodeDescripto } val mountState = lithoView.mountDelegateTarget - val componentTree = lithoView.componentTree ?: return mountingData + val layoutState = lithoView.currentLayoutState ?: return mountingData val component = node.component if (component.mountType != Component.MountType.NONE) { - val renderUnit = DebugComponent.getRenderUnit(node, componentTree) + val renderUnit = DebugComponent.getRenderUnit(node, layoutState) if (renderUnit != null) { val renderUnitId = renderUnit.id val isMounted = mountState.getContentById(renderUnitId) != null mountingData[isMountedAttributeId] = InspectableValue.Boolean(isMounted) - isExcludedFromIncrementalMount(node, componentTree)?.let { - mountingData[excludeFromIncrementalMountAttributeId] = InspectableValue.Boolean(it) - } + mountingData[excludeFromIncrementalMountAttributeId] = + InspectableValue.Boolean( + DebugComponent.isExcludedFromIncrementalMount(node, layoutState)) } } - val visibilityOutput = DebugComponent.getVisibilityOutput(node, componentTree) + val visibilityOutput = DebugComponent.getVisibilityOutput(node, layoutState) if (visibilityOutput != null) { val isVisible = DebugComponent.isVisible(node, lithoView) mountingData[isVisibleAttributeId] = InspectableValue.Boolean(isVisible) @@ -277,25 +303,7 @@ class DebugComponentDescriptor(val register: DescriptorRegister) : NodeDescripto return mountingData } - private fun isExcludedFromIncrementalMount( - node: DebugComponent, - componentTree: ComponentTree - ): Boolean? { - return try { - // TODO: T174494880 Remove reflection approach once litho-oss releases new version. When - // ready, just replace by DebugComponent.isExcludedFromIncrementalMount(node, componentTree) - val debugComponentClass = DebugComponent::class.java - val isExcludedFromIncrementalMountMethod = - debugComponentClass.getDeclaredMethod( - "isExcludedFromIncrementalMount", - DebugComponent::class.java, - ComponentTree::class.java) - isExcludedFromIncrementalMountMethod.invoke(null, node, componentTree) as? Boolean - } catch (exception: Exception) { - // Reflection is really brittle and we don't want to break the UI Debugger in that case. - null - } - } + override fun getHiddenAttributes(node: DebugComponent): JsonObject? = null class OverrideData( val metadataPath: List, diff --git a/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkFlipperPlugin.java b/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkFlipperPlugin.java index 242c45fd923..f3499d46d3b 100644 --- a/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkFlipperPlugin.java +++ b/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkFlipperPlugin.java @@ -20,7 +20,8 @@ public class NetworkFlipperPlugin extends BufferingFlipperPlugin implements Netw public static final String ID = "Network"; private static final int MAX_BODY_SIZE_IN_BYTES = 1024 * 1024; - private final List mFormatters; + private List mFormatters; + private final List mRequestFormatters; public NetworkFlipperPlugin() { this(null); @@ -28,6 +29,13 @@ public NetworkFlipperPlugin() { public NetworkFlipperPlugin(List formatters) { this.mFormatters = formatters; + this.mRequestFormatters = null; + } + + public NetworkFlipperPlugin( + List formatters, List requestFormatters) { + this.mFormatters = formatters; + this.mRequestFormatters = requestFormatters; } @Override @@ -35,9 +43,14 @@ public String getId() { return ID; } + public void setFormatters(List formatters) { + mFormatters = formatters; + } + @Override public void reportRequest(final RequestInfo requestInfo) { - (new ErrorReportingRunnable(getConnection()) { + final Runnable job = + new ErrorReportingRunnable(getConnection()) { @Override protected void runOrThrow() throws Exception { final FlipperObject request = @@ -52,8 +65,26 @@ protected void runOrThrow() throws Exception { send("newRequest", request); } - }) - .run(); + }; + + if (mRequestFormatters != null) { + for (NetworkRequestFormatter formatter : mRequestFormatters) { + if (formatter.shouldFormat(requestInfo)) { + formatter.format( + requestInfo, + new NetworkRequestFormatter.OnCompletionListener() { + @Override + public void onCompletion(final String json) { + requestInfo.body = json.getBytes(); + job.run(); + } + }); + return; + } + } + } + + job.run(); } @Override @@ -140,14 +171,14 @@ protected void runOrThrow() throws Exception { .run(); } - private String toBase64(@Nullable byte[] bytes) { + public static String toBase64(@Nullable byte[] bytes) { if (bytes == null) { return null; } return new String(Base64.encode(bytes, Base64.DEFAULT)); } - private FlipperArray toFlipperObject(List
headers) { + public static FlipperArray toFlipperObject(List
headers) { final FlipperArray.Builder list = new FlipperArray.Builder(); for (Header header : headers) { @@ -157,7 +188,7 @@ private FlipperArray toFlipperObject(List
headers) { return list.build(); } - private static boolean shouldStripResponseBody(ResponseInfo responseInfo) { + public static boolean shouldStripResponseBody(ResponseInfo responseInfo) { final Header contentType = responseInfo.getFirstHeader("content-type"); if (contentType == null) { return false; diff --git a/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkRequestFormatter.java b/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkRequestFormatter.java new file mode 100644 index 00000000000..9ae35ab19a3 --- /dev/null +++ b/android/plugins/network/src/main/java/com/facebook/flipper/plugins/network/NetworkRequestFormatter.java @@ -0,0 +1,18 @@ +/* + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +package com.facebook.flipper.plugins.network; + +public interface NetworkRequestFormatter { + interface OnCompletionListener { + void onCompletion(String json); + } + + boolean shouldFormat(NetworkReporter.RequestInfo request); + + void format(NetworkReporter.RequestInfo request, OnCompletionListener onCompletionListener); +} diff --git a/android/sample/src/main/java/com/facebook/flipper/sample/Database2Helper.java b/android/sample/src/main/java/com/facebook/flipper/sample/Database2Helper.java index 9dc51c4dffa..98c52800513 100644 --- a/android/sample/src/main/java/com/facebook/flipper/sample/Database2Helper.java +++ b/android/sample/src/main/java/com/facebook/flipper/sample/Database2Helper.java @@ -64,7 +64,10 @@ public void insertSampleData(SQLiteDatabase db) { contentValues.put("column1", "Long text data for testing resizing"); contentValues.put( "column2", - "extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra Long text data for testing resizing"); + "extra extra extra extra extra extra extra extra extra extra extra extra extra extra" + + " extra extra extra extra extra extra extra extra extra extra extra extra extra" + + " extra extra extra extra extra extra extra extra extra Long text data for testing" + + " resizing"); db.insert("db2_first_table", null, contentValues); db.insert("db2_second_table", null, contentValues); } diff --git a/android/sample/src/main/java/com/facebook/flipper/sample/JetpackComposeActivity.kt b/android/sample/src/main/java/com/facebook/flipper/sample/JetpackComposeActivity.kt index 0a8b57941c4..6d588d88ba0 100644 --- a/android/sample/src/main/java/com/facebook/flipper/sample/JetpackComposeActivity.kt +++ b/android/sample/src/main/java/com/facebook/flipper/sample/JetpackComposeActivity.kt @@ -41,7 +41,7 @@ import androidx.compose.ui.unit.sp @Preview @Composable -fun Counter() { +fun Counter(complexParameter: ComplexParameter) { var count: Int by remember { mutableIntStateOf(0) } var openAlertDialog by remember { mutableStateOf(false) } @@ -114,6 +114,10 @@ fun AlertDialogExample( class JetpackComposeActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) - setContent { Counter() } + setContent { Counter(ComplexParameter(ComplexParameterChild("Hello"))) } } } + +class ComplexParameter(val child: ComplexParameterChild) + +class ComplexParameterChild(val value: String) diff --git a/android/src/main/java/com/facebook/flipper/plugins/crashreporter/CrashReporterPlugin.java b/android/src/main/java/com/facebook/flipper/plugins/crashreporter/CrashReporterPlugin.java index 0426b9b4031..c65ae0cd74b 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/crashreporter/CrashReporterPlugin.java +++ b/android/src/main/java/com/facebook/flipper/plugins/crashreporter/CrashReporterPlugin.java @@ -31,6 +31,7 @@ public static CrashReporterPlugin getInstance() { return crashreporterPlugin; } + /* * Activity to be used to display incoming messages */ @@ -42,6 +43,7 @@ public void setActivity(Activity activity) { public void onConnect(FlipperConnection connection) { mConnection = connection; } + // This function is called from Litho's error boundary. public void sendExceptionMessage(Thread paramThread, Throwable paramThrowable) { if (mConnection != null) { diff --git a/android/src/main/java/com/facebook/flipper/plugins/inspector/InspectorFlipperPlugin.java b/android/src/main/java/com/facebook/flipper/plugins/inspector/InspectorFlipperPlugin.java index 91e8c2b5086..5e0aff1907a 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/inspector/InspectorFlipperPlugin.java +++ b/android/src/main/java/com/facebook/flipper/plugins/inspector/InspectorFlipperPlugin.java @@ -75,6 +75,7 @@ public static IDE fromString(final String ide) { public interface ExtensionCommand { /** The command to respond to */ String command(); + /** The corresponding FlipperReceiver for the command */ FlipperReceiver receiver(ObjectTracker tracker, FlipperConnection connection); } diff --git a/android/src/main/java/com/facebook/flipper/plugins/inspector/InspectorValue.java b/android/src/main/java/com/facebook/flipper/plugins/inspector/InspectorValue.java index 81555bf4cf5..42f4ab15dc2 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/inspector/InspectorValue.java +++ b/android/src/main/java/com/facebook/flipper/plugins/inspector/InspectorValue.java @@ -9,14 +9,7 @@ import com.facebook.flipper.core.FlipperObject; import com.facebook.flipper.core.FlipperValue; -import java.util.Collections; -import java.util.Comparator; -import java.util.List; -import java.util.Map; import java.util.Set; -import org.json.JSONArray; -import org.json.JSONException; -import org.json.JSONObject; public class InspectorValue implements FlipperValue { @@ -37,7 +30,6 @@ public static class Type { public static final Type Enum = new Type<>("enum"); public static final Type Color = new Type<>("color"); public static final Type Picker = new Type<>("picker"); - public static final Type Timeline = new Type<>("timeline"); private final String mName; @@ -116,84 +108,4 @@ public String toString() { return b.toString(); } } - - /** - * A widget that represents a timeline. Each point has a moment to be placed on the timeline, and - * a key to be identified as. The current field represents the key of the point in the timeline - * that matches the current moment in time. - */ - public static final class Timeline { - public final List time; - public final String current; - - public Timeline(List time, String current) { - Collections.sort( - time, - new Comparator() { - @Override - public int compare(TimePoint stringTimePointEntry, TimePoint t1) { - return Float.compare(stringTimePointEntry.moment, t1.moment); - } - }); - this.time = time; - this.current = current; - } - - private JSONObject toJson() { - final JSONArray points = new JSONArray(); - for (TimePoint value : time) { - points.put(value.toJson()); - } - try { - return new JSONObject().put("time", points).put("current", current); - } catch (JSONException t) { - throw new RuntimeException(t); - } - } - - @Override - public String toString() { - return toJson().toString(); - } - - /** - * An entry in the timeline, identified by its key. They're sorted in Flipper by moment, and are - * rendered according to the display and color. Any additional properties attached to the point - * will be displayed when it's selected. - */ - public static final class TimePoint { - public final long moment; - public final String display; - public final String color; - public final String key; - public final Map properties; - - public TimePoint( - String key, long moment, String display, String color, Map properties) { - this.key = key; - this.moment = moment; - this.display = display; - this.color = color; - this.properties = properties; - } - - private JSONObject toJson() { - try { - return new JSONObject() - .put("moment", moment) - .put("display", display) - .put("color", color) - .put("key", key) - .put("properties", new JSONObject(properties)); - } catch (JSONException t) { - throw new RuntimeException(t); - } - } - - @Override - public String toString() { - return toJson().toString(); - } - } - } } diff --git a/android/src/main/java/com/facebook/flipper/plugins/inspector/NodeDescriptor.java b/android/src/main/java/com/facebook/flipper/plugins/inspector/NodeDescriptor.java index 7b13ce6bb7f..6ede30f1882 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/inspector/NodeDescriptor.java +++ b/android/src/main/java/com/facebook/flipper/plugins/inspector/NodeDescriptor.java @@ -118,7 +118,9 @@ public String getAXName(T node) throws Exception { return ""; } - /** @return The number of children this node exposes in the inspector. */ + /** + * @return The number of children this node exposes in the inspector. + */ public abstract int getChildCount(T node) throws Exception; /** Gets child at index for AX tree. Ignores non-view children. */ @@ -126,7 +128,9 @@ public int getAXChildCount(T node) throws Exception { return getChildCount(node); } - /** @return The child at index. */ + /** + * @return The child at index. + */ public abstract Object getChildAt(T node, int index) throws Exception; /** Gets child at index for AX tree. Ignores non-view children. */ diff --git a/android/src/main/java/com/facebook/flipper/plugins/inspector/Touch.java b/android/src/main/java/com/facebook/flipper/plugins/inspector/Touch.java index 271d85a6cff..d1e26da651c 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/inspector/Touch.java +++ b/android/src/main/java/com/facebook/flipper/plugins/inspector/Touch.java @@ -25,6 +25,8 @@ public interface Touch { */ void continueWithOffset(int childIndex, int offsetX, int offsetY); - /** @return Whether or not this Touch is contained within the provided bounds. */ + /** + * @return Whether or not this Touch is contained within the provided bounds. + */ boolean containedIn(int l, int t, int r, int b); } diff --git a/android/src/main/java/com/facebook/flipper/plugins/sharedpreferences/SharedPreferencesFlipperPlugin.java b/android/src/main/java/com/facebook/flipper/plugins/sharedpreferences/SharedPreferencesFlipperPlugin.java index 85ce7f68f95..d64c8d710ca 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/sharedpreferences/SharedPreferencesFlipperPlugin.java +++ b/android/src/main/java/com/facebook/flipper/plugins/sharedpreferences/SharedPreferencesFlipperPlugin.java @@ -264,9 +264,6 @@ public static class SharedPreferencesDescriptor { public final int mode; public SharedPreferencesDescriptor(String name, int mode) { - if (name == null || name.length() == 0) { - throw new IllegalArgumentException("Given null or empty name"); - } this.name = name; this.mode = mode; } diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/UIDebuggerFlipperPlugin.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/UIDebuggerFlipperPlugin.kt index 339cca83687..c489575ee8e 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/UIDebuggerFlipperPlugin.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/UIDebuggerFlipperPlugin.kt @@ -14,11 +14,16 @@ import com.facebook.flipper.core.FlipperPlugin import com.facebook.flipper.plugins.uidebugger.core.* import com.facebook.flipper.plugins.uidebugger.descriptors.ApplicationRefDescriptor import com.facebook.flipper.plugins.uidebugger.descriptors.CompoundTypeHint +import com.facebook.flipper.plugins.uidebugger.descriptors.Id import com.facebook.flipper.plugins.uidebugger.descriptors.MetadataRegister +import com.facebook.flipper.plugins.uidebugger.model.Action +import com.facebook.flipper.plugins.uidebugger.model.ActionIcon import com.facebook.flipper.plugins.uidebugger.model.InitEvent import com.facebook.flipper.plugins.uidebugger.model.MetadataId import com.facebook.flipper.plugins.uidebugger.model.MetadataUpdateEvent +import java.lang.IllegalStateException import kotlinx.serialization.json.Json +import kotlinx.serialization.modules.SerializersModule const val LogTag = "ui-debugger" @@ -69,13 +74,70 @@ class UIDebuggerFlipperPlugin(val context: UIDContext) : FlipperPlugin { } } + connection.receive("onCustomAction") { args, responder -> + try { + val customActionGroupIndex = args.getInt("customActionGroupIndex") + val customAction = context.customActionGroups[customActionGroupIndex] + + val customActionIndex = args.getInt("customActionIndex") + when (val item = customAction.actions[customActionIndex]) { + is Action.UnitAction -> { + item.action() + context.decorViewTracker.requestTraversal() + responder.success() + } + is Action.BooleanAction -> { + val newBooleanActionValue = args.getBoolean("value") + val result = item.action(newBooleanActionValue) + context.decorViewTracker.requestTraversal() + responder.success(FlipperObject.Builder().put("result", result).build()) + } + } + } catch (exception: Exception) { + + val errorResponse = + FlipperObject.Builder() + .put("errorType", exception.javaClass) + .put("errorMessage", exception.message) + .put("stackTrace", exception.stackTraceToString()) + .build() + responder.error(errorResponse) + } + } + + connection.receive("additionalNodeInspectionChange") { args, responder -> + try { + val changeType = args.getString("changeType") + val nodeId: Id = args.getInt("nodeId") + + when (changeType) { + "Add" -> context.layoutTraversal.additionalNodeInspectionIds.add(nodeId) + "Remove" -> context.layoutTraversal.additionalNodeInspectionIds.remove(nodeId) + else -> throw IllegalStateException("Unknown change type: $changeType") + } + + context.decorViewTracker.requestTraversal() + responder.success() + } catch (exception: Exception) { + + val errorResponse = + FlipperObject.Builder() + .put("errorType", exception.javaClass) + .put("errorMessage", exception.message) + .put("stackTrace", exception.stackTraceToString()) + .build() + responder.error(errorResponse) + } + } + connection.send( InitEvent.name, - Json.encodeToString( + INIT_EVENT_JSON.encodeToString( InitEvent.serializer(), InitEvent( ApplicationRefDescriptor.getId(context.applicationRef), - context.frameworkEventMetadata))) + context.frameworkEventMetadata, + context.customActionGroups))) connection.send( MetadataUpdateEvent.name, @@ -106,4 +168,36 @@ class UIDebuggerFlipperPlugin(val context: UIDContext) : FlipperPlugin { override fun runInBackground(): Boolean { return false } + + companion object { + private val INIT_EVENT_JSON = Json { + serializersModule = SerializersModule { + polymorphic( + Action::class, + Action.UnitAction::class, + Action.UnitAction.serializer(), + ) + polymorphic( + Action::class, + Action.BooleanAction::class, + Action.BooleanAction.serializer(), + ) + polymorphic( + ActionIcon::class, + ActionIcon.Local::class, + ActionIcon.Local.serializer(), + ) + polymorphic( + ActionIcon::class, + ActionIcon.Antd::class, + ActionIcon.Antd.serializer(), + ) + polymorphic( + ActionIcon::class, + ActionIcon.Fb::class, + ActionIcon.Fb.serializer(), + ) + } + } + } } diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/commands/Command.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/commands/Command.kt index 5a79866e50d..1f9e2b7e842 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/commands/Command.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/commands/Command.kt @@ -17,8 +17,10 @@ import com.facebook.flipper.plugins.uidebugger.core.UIDContext abstract class Command(val context: UIDContext) { /** The command identifier to respond to */ abstract fun identifier(): String + /** Execute the command */ abstract fun execute(params: FlipperObject, response: FlipperResponder) + /** Receiver which is the low-level handler for the incoming request */ open fun receiver(): FlipperReceiver { return object : MainThreadFlipperReceiver() { diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/ApplicationRef.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/ApplicationRef.kt index 69f4e307d8f..993a345bcbb 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/ApplicationRef.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/ApplicationRef.kt @@ -20,7 +20,6 @@ class ApplicationRef(val application: Application) { // the root view resolver will at least find the decor view, this is the case for various // kinds of custom overlays // 2. Dialog fragments - val rootsResolver: RootViewResolver = RootViewResolver() val windowManagerUtility = WindowManagerUtility() val activitiesStack: List get() { diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/AttributeEditor.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/AttributeEditor.kt index 48c9751060e..9cb5074bdbb 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/AttributeEditor.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/AttributeEditor.kt @@ -54,7 +54,8 @@ class AttributeEditor( val stack = mutableListOf(applicationRef) while (stack.isNotEmpty()) { - val curNode = stack.removeLast() + // Workaround for a JDK21/Kotlin bug, see KT-66044 + val curNode = checkNotNull(stack.removeLastOrNull()) val curDescriptor = descriptorRegister.descriptorForClassUnsafe(curNode.javaClass) if (curDescriptor.getId(curNode) == nodeId) { return curNode diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/BitmapPool.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/BitmapPool.kt index 7d2dd19b830..560b6d85520 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/BitmapPool.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/BitmapPool.kt @@ -48,7 +48,8 @@ class BitmapPool(private val config: Bitmap.Config = Bitmap.Config.RGB_565) { return if (bitmaps == null || bitmaps.isEmpty()) { LeasedBitmap(Bitmap.createBitmap(width, height, config)) } else { - LeasedBitmap(bitmaps.removeLast()) + // Workaround for a JDK21/Kotlin bug, see KT-66044 + LeasedBitmap(checkNotNull(bitmaps.removeLastOrNull())) } } diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/DecorViewTracker.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/DecorViewTracker.kt index 13cbff47739..9ac89f0a536 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/DecorViewTracker.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/DecorViewTracker.kt @@ -17,6 +17,8 @@ import com.facebook.flipper.plugins.uidebugger.descriptors.ViewDescriptor import com.facebook.flipper.plugins.uidebugger.util.StopWatch import com.facebook.flipper.plugins.uidebugger.util.Throttler import com.facebook.flipper.plugins.uidebugger.util.objectIdentity +import curtains.Curtains +import curtains.OnRootViewsChangedListener /** * The UIDebugger does 3 things: @@ -44,61 +46,70 @@ class DecorViewTracker(private val context: UIDContext, private val snapshotter: fun start() { - val applicationRef = context.applicationRef - - val rootViewListener = - object : RootViewResolver.Listener { - override fun onRootViewAdded(rootView: View) {} - - override fun onRootViewRemoved(rootView: View) {} - - override fun onRootViewsChanged(rootViews: List) { - // remove predraw listen from current view as its going away or will be covered - Log.i(LogTag, "Removing pre draw listener from ${currentDecorView?.objectIdentity()}") - currentDecorView?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener) + val rootViewChangedListener = OnRootViewsChangedListener { view, added -> + if (currentDecorView != null) { + // remove predraw listen from current view as its going away or will be covered + Log.d(LogTag, "Removing pre draw listener from ${currentDecorView?.objectIdentity()}") + currentDecorView?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener) + } + + val decorViewToActivity: Map = ActivityTracker.decorViewToActivityMap + + // at the time of this callback curtains.rootViews is not updated yet, so we need to use the + // 'view' and 'added' params to the callback to see any new root views + val topView = + if (added && ApplicationRefDescriptor.isUsefulRoot(decorViewToActivity[view] ?: view)) { + view + } else { + // this is technically the preview set of root view but this is the branch where the new + // root view is not 'useful' or we are popping a view off the stack so the old roots are + // fine here + Curtains.rootViews.lastOrNull { + ApplicationRefDescriptor.isUsefulRoot(decorViewToActivity[it] ?: it) + } + } - // setup new listener on top most view, that will be the active child in traversal + if (topView != null) { + val throttler = Throttler(500) { currentDecorView?.let { traverseSnapshotAndSend(it) } } - val decorViewToActivity: Map = ActivityTracker.decorViewToActivityMap + preDrawListener = + ViewTreeObserver.OnPreDrawListener { + throttler.trigger() + true + } - val topView = - rootViews.lastOrNull { view -> - val activityOrView = decorViewToActivity[view] ?: view - ApplicationRefDescriptor.isUsefulRoot(activityOrView) - } + topView.viewTreeObserver.addOnPreDrawListener(preDrawListener) + currentDecorView = topView - if (topView != null) { - val throttler = - Throttler(500) { currentDecorView?.let { traverseSnapshotAndSend(it) } } + Log.i(LogTag, "Added pre draw listener to ${topView.objectIdentity()}") - preDrawListener = - ViewTreeObserver.OnPreDrawListener { - throttler.trigger() - true - } + // schedule traversal immediately when we detect a new decor view + throttler.trigger() + } + } - topView.viewTreeObserver.addOnPreDrawListener(preDrawListener) - currentDecorView = topView + Curtains.onRootViewsChangedListeners.add(rootViewChangedListener) - Log.i(LogTag, "Added pre draw listener to ${topView.objectIdentity()}") + // On subscribe, trigger a traversal on whatever roots we have + val decorViewToActivity: Map = ActivityTracker.decorViewToActivityMap - // schedule traversal immediately when we detect a new decor view - throttler.trigger() - } - } + val topView = + Curtains.rootViews.lastOrNull { + ApplicationRefDescriptor.isUsefulRoot(decorViewToActivity[it] ?: it) } + if (topView != null) { + rootViewChangedListener.onRootViewsChanged(topView, true) + } - context.applicationRef.rootsResolver.attachListener(rootViewListener) - // On subscribe, trigger a traversal on whatever roots we have - rootViewListener.onRootViewsChanged(applicationRef.rootsResolver.rootViews()) + Log.i(LogTag, "Starting tracking root views, currently ${Curtains.rootViews.size} root views") + } - Log.i( - LogTag, - "Starting tracking root views, currently ${context.applicationRef.rootsResolver.rootViews().size} root views") + fun requestTraversal() { + preDrawListener?.onPreDraw() } fun stop() { - context.applicationRef.rootsResolver.attachListener(null) + Curtains.onRootViewsChangedListeners.clear() currentDecorView?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener) currentDecorView = null preDrawListener = null diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/LayoutTraversal.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/LayoutTraversal.kt index 2f228bab3d6..8af64610b4a 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/LayoutTraversal.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/LayoutTraversal.kt @@ -25,6 +25,7 @@ import com.facebook.flipper.plugins.uidebugger.util.MaybeDeferred class LayoutTraversal( private val context: UIDContext, ) { + internal val additionalNodeInspectionIds = mutableSetOf() @Suppress("unchecked_cast") private fun NodeDescriptor<*>.asAny(): NodeDescriptor = this as NodeDescriptor @@ -40,7 +41,8 @@ class LayoutTraversal( val shallow = mutableSetOf() while (stack.isNotEmpty()) { - val (node, parentId) = stack.removeLast() + // Workaround for a JDK21/Kotlin bug, see KT-66044 + val (node, parentId) = checkNotNull(stack.removeLastOrNull()) try { @@ -56,12 +58,14 @@ class LayoutTraversal( parentId, descriptor.getQualifiedName(node), descriptor.getName(node), + descriptor.getBoxData(node), emptyMap(), emptyMap(), null, descriptor.getBounds(node), emptySet(), emptyList(), + null, null))) shallow.remove(node) @@ -90,23 +94,33 @@ class LayoutTraversal( } } - val attributes = descriptor.getAttributes(node) + val shouldGetAdditionalData = curId in additionalNodeInspectionIds + val attributesInfo = descriptor.getAttributes(node, shouldGetAdditionalData) val bounds = descriptor.getBounds(node) val tags = descriptor.getTags(node) visited.add( - attributes.map { attrs -> + attributesInfo.map { attrsInfo -> + val additionalDataCollection = + if (!shouldGetAdditionalData && !attrsInfo.hasAdditionalData) { + null + } else { + shouldGetAdditionalData + } + Node( curId, parentId, descriptor.getQualifiedName(node), descriptor.getName(node), - attrs, + descriptor.getBoxData(node), + attrsInfo.attributeSections, descriptor.getInlineAttributes(node), descriptor.getHiddenAttributes(node), bounds, tags, childrenIds, - activeChildId) + activeChildId, + additionalDataCollection) }) } catch (exception: Exception) { Log.e(LogTag, "Error while processing node ${node.javaClass.name} $node", exception) diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/RootViewResolver.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/RootViewResolver.kt deleted file mode 100644 index 653b6ea2e66..00000000000 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/RootViewResolver.kt +++ /dev/null @@ -1,139 +0,0 @@ -/* - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -package com.facebook.flipper.plugins.uidebugger.core - -import android.annotation.SuppressLint -import android.os.Build -import android.view.View -import com.facebook.flipper.plugins.uidebugger.util.WindowManagerCommon -import java.lang.reflect.Field -import java.lang.reflect.InvocationTargetException -import java.lang.reflect.Modifier - -/** - * Provides access to all root views in an application, as well as the ability to listen to changes - * in root views - * - * 95% of the time this is unnecessary and we can operate solely on current Activity's root view as - * indicated by getWindow().getDecorView(). However in the case of popup windows, menus, and dialogs - * the actual view hierarchy we should be operating on is not accessible thru public apis. - * - * In the spirit of degrading gracefully when new api levels break compatibility, callers should - * handle a list of size 0 by assuming getWindow().getDecorView() on the currently resumed activity - * is the sole root - this assumption will be correct often enough. - * - * Obviously, you need to be on the main thread to use this. - */ -class RootViewResolver { - private var initialized = false - private var windowManagerObj: Any? = null - private val observableViews: ObservableViewArrayList = ObservableViewArrayList() - - interface Listener { - fun onRootViewAdded(rootView: View) - - fun onRootViewRemoved(rootView: View) - - fun onRootViewsChanged(rootViews: List) - } - - fun attachListener(listener: Listener?) { - if (Build.VERSION.SDK_INT < 19 || listener == null) { - // We don't have a use for this on older APIs. If you do then modify accordingly :) - return - } - if (!initialized) { - initialize() - } - observableViews?.setListener(listener) - } - - /** - * Lists the active root views in an application at this moment. - * - * @return a list of all the active root views in the application. - * @throws IllegalStateException if invoked from a thread besides the main thread. - */ - fun rootViews(): List { - if (!initialized) { - initialize() - } - return observableViews.toList() - } - - private fun initialize() { - - initialized = true - try { - - val (windowManager, windowManagerClas) = - WindowManagerCommon.getGlobalWindowManager() ?: return - windowManagerObj = windowManager - - val viewsField: Field = windowManagerClas.getDeclaredField(VIEWS_FIELD) - - viewsField.let { vf -> - vf.isAccessible = true - // Forgive me father for I have sinned... - @SuppressLint("DiscouragedPrivateApi") - val modifiers = Field::class.java.getDeclaredField("accessFlags") - modifiers.isAccessible = true - modifiers.setInt(vf, vf.modifiers and Modifier.FINAL.inv()) - - @Suppress("unchecked_cast") - val currentWindowManagerViews = vf[windowManagerObj] as List - observableViews.addAll(currentWindowManagerViews) - vf[windowManagerObj] = observableViews - } - } catch (ite: InvocationTargetException) {} catch (cnfe: ClassNotFoundException) {} catch ( - nsfe: NoSuchFieldException) {} catch (nsme: NoSuchMethodException) {} catch ( - re: RuntimeException) {} catch (iae: IllegalAccessException) {} - - try {} catch (e: Throwable) {} - } - - companion object { - private const val VIEWS_FIELD = "mViews" - } - - class ObservableViewArrayList : ArrayList() { - private var listener: Listener? = null - - fun setListener(listener: Listener?) { - this.listener = listener - } - - override fun add(element: View): Boolean { - val ret = super.add(element) - listener?.let { l -> - l.onRootViewAdded(element) - l.onRootViewsChanged(this as List) - } - return ret - } - - override fun remove(element: View): Boolean { - val ret = super.remove(element) - listener?.let { l -> - l.onRootViewRemoved(element) - l.onRootViewsChanged(this as List) - } - - return ret - } - - override fun removeAt(index: Int): View { - val view = super.removeAt(index) - listener?.let { l -> - l.onRootViewRemoved(view) - l.onRootViewsChanged(this as List) - } - return view - } - } -} diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/Snapshot.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/Snapshot.kt index 51102e1a27a..6758b47b779 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/Snapshot.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/Snapshot.kt @@ -162,7 +162,7 @@ internal object SnapshotCommon { } // something went wrong, use fallback, make sure to give bitmap back to pool first - Log.i(LogTag, "Using fallback snapshot method") + Log.d(LogTag, "Using fallback snapshot method") reusableBitmap?.readyForReuse() return fallback?.takeSnapshot(view) } diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/UIDContext.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/UIDContext.kt index c92ef1c3ec4..c93bd0ad427 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/UIDContext.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/UIDContext.kt @@ -13,6 +13,9 @@ import android.util.Log import com.facebook.flipper.core.FlipperConnection import com.facebook.flipper.plugins.uidebugger.LogTag import com.facebook.flipper.plugins.uidebugger.descriptors.DescriptorRegister +import com.facebook.flipper.plugins.uidebugger.model.ActionIcon +import com.facebook.flipper.plugins.uidebugger.model.CustomActionGroup +import com.facebook.flipper.plugins.uidebugger.model.CustomActionsScope import com.facebook.flipper.plugins.uidebugger.model.FrameworkEvent import com.facebook.flipper.plugins.uidebugger.model.FrameworkEventMetadata import com.facebook.flipper.plugins.uidebugger.model.TraversalError @@ -35,7 +38,11 @@ class UIDContext( val attributeEditor = AttributeEditor(applicationRef, descriptorRegister) val bitmapPool = BitmapPool() + val customActionGroups: List + get() = _customActionGroups + private val canvasSnapshotter = CanvasSnapshotter(bitmapPool) + private val _customActionGroups = mutableListOf() private val snapshotter = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) { @@ -74,6 +81,16 @@ class UIDContext( synchronized(pendingFrameworkEvents) { pendingFrameworkEvents.clear() } } + fun addCustomActionGroup( + title: String, + actionIcon: ActionIcon, + block: CustomActionsScope.() -> Unit + ) { + val scope = CustomActionsScope() + scope.block() + _customActionGroups.add(CustomActionGroup(title, actionIcon, scope.actions)) + } + companion object { fun create(application: Application): UIDContext { return UIDContext( diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/UpdateQueue.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/UpdateQueue.kt index fd874f37ec0..63f5752d5b4 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/UpdateQueue.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/core/UpdateQueue.kt @@ -45,6 +45,7 @@ data class Update( */ class UpdateQueue(val context: UIDContext) { + val json = Json { explicitNulls = false } // conflated channel means we only hold 1 item and newer values override older ones, // there is no point processing frames that the desktop cant keep up with since we only display // the latest @@ -123,7 +124,7 @@ class UpdateQueue(val context: UIDContext) { val (serialized, serializationTimeMs) = StopWatch.time { - Json.encodeToString( + json.encodeToString( FrameScanEvent.serializer(), FrameScanEvent(update.startTimestamp, nodes, snapshot, frameworkEvents)) } @@ -151,7 +152,7 @@ class UpdateQueue(val context: UIDContext) { frameworkEventsCount = frameworkEvents.size) context.connectionRef.connection?.send( - PerfStatsEvent.name, Json.encodeToString(PerfStatsEvent.serializer(), perfStats)) + PerfStatsEvent.name, json.encodeToString(PerfStatsEvent.serializer(), perfStats)) } private fun sendMetadata() { @@ -159,7 +160,7 @@ class UpdateQueue(val context: UIDContext) { if (metadata.isNotEmpty()) { context.connectionRef.connection?.send( MetadataUpdateEvent.name, - Json.encodeToString(MetadataUpdateEvent.serializer(), MetadataUpdateEvent(metadata))) + json.encodeToString(MetadataUpdateEvent.serializer(), MetadataUpdateEvent(metadata))) } } } diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ApplicationRefDescriptor.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ApplicationRefDescriptor.kt index 3195c540918..b250b20a17b 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ApplicationRefDescriptor.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ApplicationRefDescriptor.kt @@ -14,6 +14,7 @@ import com.facebook.flipper.plugins.uidebugger.core.ActivityTracker import com.facebook.flipper.plugins.uidebugger.core.ApplicationRef import com.facebook.flipper.plugins.uidebugger.model.Bounds import com.facebook.flipper.plugins.uidebugger.util.DisplayMetrics +import curtains.Curtains object ApplicationRefDescriptor : ChainedDescriptor() { @@ -34,7 +35,7 @@ object ApplicationRefDescriptor : ChainedDescriptor() { override fun onGetChildren(node: ApplicationRef): List { val children = mutableListOf() - val rootViews = node.rootsResolver.rootViews() + val rootViews = Curtains.rootViews val decorViewToActivity: Map = ActivityTracker.decorViewToActivityMap @@ -60,7 +61,9 @@ object ApplicationRefDescriptor : ChainedDescriptor() { fun isUsefulRoot(rootViewOrActivity: Any): Boolean { val className = rootViewOrActivity.javaClass.name - if (className.contains("mediagallery.ui.MediaGalleryActivity")) { + if (className.contains("mediagallery.ui.MediaGalleryActivity") || + className.contains("ImagineCreationActivity") || + className.contains("WriteWithAIActivity")) { // this activity doesn't contain the content and its actually in the decor view behind it, so // skip it :/ return false diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ChainedDescriptor.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ChainedDescriptor.kt index e5df6dae7d5..e6a3aaefaeb 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ChainedDescriptor.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ChainedDescriptor.kt @@ -9,6 +9,7 @@ package com.facebook.flipper.plugins.uidebugger.descriptors import com.facebook.flipper.core.FlipperDynamic import com.facebook.flipper.plugins.uidebugger.model.Bounds +import com.facebook.flipper.plugins.uidebugger.model.BoxData import com.facebook.flipper.plugins.uidebugger.model.InspectableObject import com.facebook.flipper.plugins.uidebugger.model.Metadata import com.facebook.flipper.plugins.uidebugger.model.MetadataId @@ -42,6 +43,10 @@ abstract class ChainedDescriptor : NodeDescriptor { return mSuper } + final override fun getBoxData(node: T): BoxData? = onGetBoxData(node) ?: mSuper?.getBoxData(node) + + open fun onGetBoxData(node: T): BoxData? = null + final override fun getActiveChild(node: T): Any? { // ask each descriptor in the chain for an active child, if none available look up the chain // until no more super descriptors @@ -83,9 +88,9 @@ abstract class ChainedDescriptor : NodeDescriptor { final override fun getHiddenAttributes(node: T): JsonObject? { - val descriptors = mutableListOf(this) + val descriptors = mutableListOf>() - var curDescriptor: ChainedDescriptor? = mSuper + var curDescriptor: ChainedDescriptor? = this while (curDescriptor != null) { descriptors.add(curDescriptor) @@ -116,9 +121,8 @@ abstract class ChainedDescriptor : NodeDescriptor { final override fun getAttributes(node: T): MaybeDeferred> { val builder = mutableMapOf() - onGetAttributes(node, builder) - var curDescriptor: ChainedDescriptor? = mSuper + var curDescriptor: ChainedDescriptor? = this while (curDescriptor != null) { curDescriptor.onGetAttributes(node, builder) @@ -137,9 +141,8 @@ abstract class ChainedDescriptor : NodeDescriptor { final override fun getInlineAttributes(node: T): Map { val builder = mutableMapOf() - onGetInlineAttributes(node, builder) - var curDescriptor: ChainedDescriptor? = mSuper + var curDescriptor: ChainedDescriptor? = this while (curDescriptor != null) { curDescriptor.onGetInlineAttributes(node, builder) diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/NodeDescriptor.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/NodeDescriptor.kt index 9ce9f4c2480..cf6e702fef6 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/NodeDescriptor.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/NodeDescriptor.kt @@ -9,10 +9,12 @@ package com.facebook.flipper.plugins.uidebugger.descriptors import com.facebook.flipper.core.FlipperDynamic import com.facebook.flipper.plugins.uidebugger.model.Bounds +import com.facebook.flipper.plugins.uidebugger.model.BoxData import com.facebook.flipper.plugins.uidebugger.model.InspectableObject import com.facebook.flipper.plugins.uidebugger.model.Metadata import com.facebook.flipper.plugins.uidebugger.model.MetadataId import com.facebook.flipper.plugins.uidebugger.util.MaybeDeferred +import java.lang.IllegalStateException import kotlinx.serialization.json.JsonObject /* @@ -59,6 +61,8 @@ interface NodeDescriptor { /** The children this node exposes in the inspector. */ fun getChildren(node: T): List + fun getBoxData(node: T): BoxData? = null + /** * If you have overlapping children this indicates which child is active / on top, we will only * listen to / traverse this child. If return null we assume all children are 'active' @@ -68,9 +72,34 @@ interface NodeDescriptor { /** * Get the attribute to show for this node in the sidebar of the inspector. The object first level * is a section and subsequent objects within are the first level of that section. Nested objects - * will nest in the sidebar + * will nest in the sidebar. + * + * You have to implement only one of [getAttributes(T)] or [getAttributes(T, boolean)] methods. If + * you don't need to support Nodes that can request additional data then use this variant, + * otherwise use [getAttributes(T, boolean)]. */ - fun getAttributes(node: T): MaybeDeferred> + fun getAttributes(node: T): MaybeDeferred> { + throw IllegalStateException( + "One of the getAttributes methods must be implemented by the NodeDescriptor.") + } + + /** + * Get the attribute to show for this node in the sidebar of the inspector. The object first level + * is a section and subsequent objects within are the first level of that section. Nested objects + * will nest in the sidebar. + * + * This is a more advanced version of [getAttributes(T)] that allows for telling Flipper that some + * of the attributes can be computed on demand. When [shouldGetAdditionalData] is true then this + * method should perform the expensive computation on the attributes, if it's false then it + * shouldn't. If any attribute is expensive to compute then this method should return + * [AttributesInfo.hasAdditionalData] set to true which will result in showing some extra UI to be + * in the sidebar of the UI Debugger in Flipper Desktop app. + */ + fun getAttributes(node: T, shouldGetAdditionalData: Boolean): MaybeDeferred { + return getAttributes(node).map { + AttributesInfo(attributeSections = it, hasAdditionalData = false) + } + } /** * Set of tags to describe this node in an abstract way for the UI Unfortunately this can't be an @@ -94,6 +123,11 @@ interface NodeDescriptor { ) {} } +data class AttributesInfo( + val attributeSections: Map, + val hasAdditionalData: Boolean +) + enum class CompoundTypeHint { TOP, LEFT, diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/OffsetChildDescriptor.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/OffsetChildDescriptor.kt index e2b86e28b50..7f087151df9 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/OffsetChildDescriptor.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/OffsetChildDescriptor.kt @@ -13,6 +13,7 @@ import com.facebook.flipper.plugins.uidebugger.model.InspectableObject import com.facebook.flipper.plugins.uidebugger.model.Metadata import com.facebook.flipper.plugins.uidebugger.model.MetadataId import com.facebook.flipper.plugins.uidebugger.util.MaybeDeferred +import kotlinx.serialization.json.JsonObject /** a drawable or view that is mounted, along with the correct descriptor */ class OffsetChild(val child: Any, val descriptor: NodeDescriptor, val x: Int, val y: Int) { @@ -44,6 +45,9 @@ object OffsetChildDescriptor : NodeDescriptor { override fun getTags(node: OffsetChild): Set = node.descriptor.getTags(node.child) + override fun getHiddenAttributes(node: OffsetChild): JsonObject? = + node.descriptor.getHiddenAttributes(node.child) + override fun editAttribute( node: OffsetChild, metadataPath: List, diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ViewDescriptor.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ViewDescriptor.kt index a2b1951ce20..588d624ddbe 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ViewDescriptor.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ViewDescriptor.kt @@ -527,6 +527,33 @@ object ViewDescriptor : ChainedDescriptor() { } } + private val emptyBox = listOf(0f, 0f, 0f, 0f) + + override fun onGetBoxData(node: View): BoxData { + + val layoutParams = node.layoutParams + val margin = + if (layoutParams is ViewGroup.MarginLayoutParams) { + listOf( + layoutParams.topMargin.toFloat(), + layoutParams.rightMargin.toFloat(), + layoutParams.bottomMargin.toFloat(), + layoutParams.leftMargin.toFloat()) + } else { + emptyBox + } + + val padding = + listOf( + node.paddingLeft.toFloat(), + node.paddingRight.toFloat(), + node.paddingTop.toFloat(), + node.paddingBottom.toFloat(), + ) + + return BoxData(margin, emptyBox, padding) + } + override fun onGetInlineAttributes(node: View, attributes: MutableMap) { val id = node.id if (id == View.NO_ID) { diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/CustomActions.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/CustomActions.kt new file mode 100644 index 00000000000..2e72e91aed9 --- /dev/null +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/CustomActions.kt @@ -0,0 +1,62 @@ +/* + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +package com.facebook.flipper.plugins.uidebugger.model + +import kotlinx.serialization.SerialName +import kotlinx.serialization.Serializable +import kotlinx.serialization.Transient + +@Serializable +data class CustomActionGroup( + val title: String, + val actionIcon: ActionIcon, + val actions: List +) + +sealed interface Action { + @Serializable + @SerialName("UnitAction") + data class UnitAction( + val title: String, + val actionIcon: ActionIcon, + @Transient val action: () -> Unit = {} + ) : Action + + @Serializable + @SerialName("BooleanAction") + data class BooleanAction( + val title: String, + val value: Boolean, + @Transient val action: (Boolean) -> Boolean = { it }, + ) : Action +} + +sealed interface ActionIcon { + @Serializable + @SerialName("Local") + data class Local(@SerialName("iconPath") val iconFullPath: String) : ActionIcon + + @Serializable @SerialName("Antd") data class Antd(val iconName: String) : ActionIcon + + @Serializable @SerialName("Fb") data class Fb(val iconName: String) : ActionIcon +} + +class CustomActionsScope { + val actions: List + get() = _actions + + private val _actions = mutableListOf() + + fun unitAction(title: String, actionIcon: ActionIcon, action: () -> Unit) { + _actions.add(Action.UnitAction(title, actionIcon, action)) + } + + fun booleanAction(title: String, initialValue: Boolean, action: (Boolean) -> Boolean) { + _actions.add(Action.BooleanAction(title, initialValue, action)) + } +} diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Events.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Events.kt index 957de38a622..39a37e9e93e 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Events.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Events.kt @@ -10,7 +10,11 @@ package com.facebook.flipper.plugins.uidebugger.model import com.facebook.flipper.plugins.uidebugger.descriptors.Id @kotlinx.serialization.Serializable -class InitEvent(val rootId: Id, val frameworkEventMetadata: List) { +class InitEvent( + val rootId: Id, + val frameworkEventMetadata: List, + val customActionGroups: List +) { companion object { const val name = "init" } diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Node.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Node.kt index 415f3c03a8d..52941b9030b 100644 --- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Node.kt +++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Node.kt @@ -8,6 +8,7 @@ package com.facebook.flipper.plugins.uidebugger.model import com.facebook.flipper.plugins.uidebugger.descriptors.Id +import kotlinx.serialization.Serializable import kotlinx.serialization.json.JsonObject @kotlinx.serialization.Serializable @@ -16,6 +17,7 @@ data class Node( val parent: Id?, val qualifiedName: String, val name: String, + val boxData: BoxData?, val attributes: Map, val inlineAttributes: Map, val hiddenAttributes: JsonObject?, @@ -23,4 +25,11 @@ data class Node( val tags: Set, val children: List, val activeChild: Id?, + val additionalDataCollection: Boolean?, ) + +/** Expected order is left right top bottom */ +typealias CompactBoxData = List + +@Serializable +class BoxData(val margin: CompactBoxData, val border: CompactBoxData, val padding: CompactBoxData) diff --git a/android/src/test/java/com/facebook/flipper/plugins/databases/DatabasesFlipperPluginTest.java b/android/src/test/java/com/facebook/flipper/plugins/databases/DatabasesFlipperPluginTest.java index 2510947a937..1940a808073 100644 --- a/android/src/test/java/com/facebook/flipper/plugins/databases/DatabasesFlipperPluginTest.java +++ b/android/src/test/java/com/facebook/flipper/plugins/databases/DatabasesFlipperPluginTest.java @@ -383,7 +383,8 @@ public void testCommandGetTableInfo() throws Exception { new FlipperObject.Builder() .put( "definition", - "CREATE TABLE first_table (_id INTEGER PRIMARY KEY AUTOINCREMENT,column1 TEXT,column2 TEXT)") + "CREATE TABLE first_table (_id INTEGER PRIMARY KEY AUTOINCREMENT,column1" + + " TEXT,column2 TEXT)") .build())); } diff --git a/build.gradle b/build.gradle index e1c92cdccc9..69fa2733621 100644 --- a/build.gradle +++ b/build.gradle @@ -19,7 +19,7 @@ buildscript { } plugins { - id 'de.undercouch.download' version '5.3.1' + id 'de.undercouch.download' version '5.6.0' id 'com.github.ben-manes.versions' version '0.47.0' } @@ -83,7 +83,7 @@ ext.deps = [ websocket : 'org.java-websocket:Java-WebSocket:1.5.4', openssl : 'com.android.ndk.thirdparty:openssl:1.1.1l-beta-1', // Annotations - kotlinxSerializationJson : "org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1", + kotlinxSerializationJson : "org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3", jsr305 : 'com.google.code.findbugs:jsr305:3.0.2', inferAnnotations : 'com.facebook.infer.annotation:infer-annotation:0.18.0', proguardAnnotations: 'com.facebook.yoga:proguard-annotations:1.19.0', @@ -110,7 +110,7 @@ ext.deps = [ okhttp3 : 'com.squareup.okhttp3:okhttp:4.11.0', leakcanary : 'com.squareup.leakcanary:leakcanary-android:1.6.3', leakcanary2 : 'com.squareup.leakcanary:leakcanary-android:2.8.1', - protobuf : 'com.google.protobuf:protobuf-java:3.25.1', + protobuf : 'com.google.protobuf:protobuf-java:3.25.3', testCore : 'androidx.test:core:1.4.0', testRules : 'androidx.test:rules:1.5.0', // Plugin dependencies diff --git a/desktop/.eslintrc.js b/desktop/.eslintrc.js index 7efb42c670d..81429c29543 100644 --- a/desktop/.eslintrc.js +++ b/desktop/.eslintrc.js @@ -106,11 +106,13 @@ module.exports = { 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn', 'react/jsx-key': 'error', + 'prefer-template': 'error', 'no-new': 0, // new keyword needed e.g. new Notification 'no-catch-shadow': 0, // only relevant for IE8 and below 'no-bitwise': 0, // bitwise operations needed in some places 'consistent-return': 0, 'no-var': 2, + 'object-shorthand': ['error', 'properties'], 'prefer-const': [2, {destructuring: 'all'}], 'prefer-spread': 1, 'prefer-rest-params': 1, diff --git a/desktop/babel-transformer/package.json b/desktop/babel-transformer/package.json index 8bb9d8a721d..a246a167e3f 100644 --- a/desktop/babel-transformer/package.json +++ b/desktop/babel-transformer/package.json @@ -29,7 +29,7 @@ }, "scripts": { "reset": "rimraf lib *.tsbuildinfo", - "build": "tsc -b && cd .. && ./ts-node ./scripts/compute-package-checksum.tsx -d ./babel-transformer -o ./lib/checksum.txt", + "build": "tsc -b && cd .. && tsx ./scripts/compute-package-checksum.tsx -d ./babel-transformer -o ./lib/checksum.txt", "prepack": "yarn reset && yarn build" }, "files": [ diff --git a/desktop/babel-transformer/src/fb-stubs.tsx b/desktop/babel-transformer/src/fb-stubs.tsx index 09031d5c82f..ce536750658 100644 --- a/desktop/babel-transformer/src/fb-stubs.tsx +++ b/desktop/babel-transformer/src/fb-stubs.tsx @@ -16,7 +16,7 @@ import fs from 'fs-extra'; const isFBFile = (filePath: string) => filePath.includes(`${sep}fb${sep}`); const requireFromFolder = (folder: string, path: string) => - new RegExp(folder + '/[\\w.-]+(.js)?$', 'g').test(path); + new RegExp(`${folder}/[\\w.-]+(.js)?$`, 'g').test(path); const pathExistsCache = new Map(); diff --git a/desktop/doctor/README.md b/desktop/doctor/README.md deleted file mode 100644 index 74cab895579..00000000000 --- a/desktop/doctor/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# Flipper Doctor - -This package exists for running checks to diagnose and potentially fix issues affecting the operation of Flipper. -It's designed to be primarily used programmatically but may also expose a CLI interface. - -## Usage -`cd doctor` -`yarn run run` diff --git a/desktop/doctor/jestconfig.json b/desktop/doctor/jestconfig.json deleted file mode 100644 index 20c25c0f71d..00000000000 --- a/desktop/doctor/jestconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "transform": { - "^.+\\.(t|j)sx?$": "ts-jest" - }, - "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", - "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"] -} diff --git a/desktop/doctor/package.json b/desktop/doctor/package.json deleted file mode 100644 index 3d728f0882b..00000000000 --- a/desktop/doctor/package.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "name": "flipper-doctor", - "version": "0.0.0", - "description": "Utility for checking for issues with a flipper installation", - "main": "lib/index.js", - "flipperBundlerEntry": "src", - "types": "lib/index.d.ts", - "license": "MIT", - "devDependencies": { - "@types/fb-watchman": "2.0.1", - "@types/node": "^17.0.31" - }, - "scripts": { - "reset": "rimraf lib *.tsbuildinfo", - "build": "tsc -b", - "prepack": "yarn reset && yarn build", - "run": "yarn run build && node lib/cli.js" - }, - "files": [ - "lib/**/*" - ], - "keywords": [ - "Flipper", - "Doctor" - ], - "author": "Facebook, Inc", - "dependencies": { - "envinfo": "^7.8.1", - "fb-watchman": "^2.0.2", - "flipper-common": "0.0.0", - "fs-extra": "^11.1.1" - } -} diff --git a/desktop/doctor/src/cli.tsx b/desktop/doctor/src/cli.tsx deleted file mode 100644 index 668b36a4fbc..00000000000 --- a/desktop/doctor/src/cli.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -import {getHealthchecks} from './index'; -import {getEnvInfo} from './environmentInfo'; - -(async () => { - const environmentInfo = await getEnvInfo(); - console.log(JSON.stringify(environmentInfo)); - const healthchecks = getHealthchecks(); - const results = await Promise.all( - Object.entries(healthchecks).map(async ([key, category]) => [ - key, - category.isSkipped - ? category - : { - label: category.label, - results: await Promise.all( - category.healthchecks.map(async ({key, label, run}) => ({ - key, - label, - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - result: await run!(environmentInfo), - })), - ), - }, - ]), - ); - - console.log(JSON.stringify(results, null, 2)); -})(); diff --git a/desktop/doctor/tsconfig.json b/desktop/doctor/tsconfig.json deleted file mode 100644 index 195fa4fb690..00000000000 --- a/desktop/doctor/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../tsconfig.base.json", - "compilerOptions": { - "outDir": "lib", - "rootDir": "src", - "types": ["node"] - }, - "references": [ - { - "path": "../flipper-common" - } - ] -} diff --git a/desktop/doctor/tslint.json b/desktop/doctor/tslint.json deleted file mode 100644 index 85e60a40a1c..00000000000 --- a/desktop/doctor/tslint.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["tslint:recommended", "tslint-config-prettier"] -} diff --git a/desktop/eslint-plugin-flipper/src/rules/noTsFileExtension.tsx b/desktop/eslint-plugin-flipper/src/rules/noTsFileExtension.tsx index 20c607fe3b4..eed133465a3 100644 --- a/desktop/eslint-plugin-flipper/src/rules/noTsFileExtension.tsx +++ b/desktop/eslint-plugin-flipper/src/rules/noTsFileExtension.tsx @@ -38,7 +38,7 @@ export default createESLintRule({ Program(node) { if (isTs) { context.report({ - node: node, + node, messageId: 'noTsFileExtension', }); } diff --git a/desktop/examples/flipper-dump/package.json b/desktop/examples/flipper-dump/package.json index ca98f73c975..08f6c1cd465 100644 --- a/desktop/examples/flipper-dump/package.json +++ b/desktop/examples/flipper-dump/package.json @@ -19,7 +19,7 @@ }, "peerDependencies": {}, "scripts": { - "start": "ts-node src/index.tsx", + "start": "tsx src/index.tsx", "reset": "rimraf lib *.tsbuildinfo", "build": "tsc -b", "prepack": "yarn reset && yarn build" diff --git a/desktop/examples/flipper-dump/src/index.tsx b/desktop/examples/flipper-dump/src/index.tsx index 9b7d7454298..63f2306bb6d 100644 --- a/desktop/examples/flipper-dump/src/index.tsx +++ b/desktop/examples/flipper-dump/src/index.tsx @@ -150,7 +150,7 @@ async function start(deviceQuery: string, appName: string, pluginId: string) { server.on('device-disconnected', (deviceInfo) => { if (device && deviceInfo.serial === device.serial) { - reject(new Error('Device disconnected: ' + deviceInfo.serial)); + reject(new Error(`Device disconnected: ${deviceInfo.serial}`)); } }); @@ -186,14 +186,14 @@ async function start(deviceQuery: string, appName: string, pluginId: string) { return; } const plugins: string[] = (response.success as any).plugins; - logger.info('Detected plugins ' + plugins.join(',')); + logger.info(`Detected plugins ${plugins.join(',')}`); if (!plugins.includes(pluginId)) { // TODO: what if it only registers later? throw new Error( `Plugin ${pluginId} was not registered on client ${client.id}`, ); } - logger.info(`Starting plugin ` + pluginId); + logger.info(`Starting plugin ${pluginId}`); const response2 = await server.exec( 'client-request-response', client.id, diff --git a/desktop/examples/flipper-dump/tsconfig.json b/desktop/examples/flipper-dump/tsconfig.json index 03395b02e0e..21659acb212 100644 --- a/desktop/examples/flipper-dump/tsconfig.json +++ b/desktop/examples/flipper-dump/tsconfig.json @@ -11,8 +11,5 @@ { "path": "../../flipper-common" } - ], - "ts-node": { - "transpileOnly": true - } + ] } diff --git a/desktop/flipper-common/src/clientUtils.tsx b/desktop/flipper-common/src/clientUtils.tsx index 7592f49a147..7bd37cd26e3 100644 --- a/desktop/flipper-common/src/clientUtils.tsx +++ b/desktop/flipper-common/src/clientUtils.tsx @@ -109,7 +109,7 @@ export function deconstructPluginKey(pluginKey: string): PluginKeyConstituents { type: 'client', ...deconstructClientId(clientId), client: clientId, - pluginName: pluginName, + pluginName, }; } } diff --git a/desktop/flipper-common/src/doctor.tsx b/desktop/flipper-common/src/doctor.tsx index ac9ec25363e..a05522b6c40 100644 --- a/desktop/flipper-common/src/doctor.tsx +++ b/desktop/flipper-common/src/doctor.tsx @@ -69,8 +69,15 @@ export namespace FlipperDoctor { command: string; }; + export type HealthcheckRunSubcheck = { + status: 'ok' | 'fail'; + title: string; + }; + export type HealthcheckRunResult = { hasProblem: boolean; + /** Indicates what sub checks were passed to better communicate the problem */ + subchecks?: HealthcheckRunSubcheck[]; message: MessageIdWithParams; }; @@ -109,6 +116,7 @@ export namespace FlipperDoctor { status: HealthcheckStatus; isAcknowledged?: boolean; message?: MessageIdWithParams; + subchecks?: HealthcheckRunSubcheck[]; }; export type HealthcheckReportItem = { @@ -136,6 +144,7 @@ export namespace FlipperDoctor { enablePhysicalIOS: boolean; idbPath: string; }; + isProduction: boolean; }; /** @@ -167,21 +176,34 @@ export namespace FlipperDoctor { 'ios.xcode--not_installed': []; 'ios.xcode-select--set': [{selected: string}]; - 'ios.xcode-select--not_set': [{message: string}]; - 'ios.xcode-select--no_xcode_selected': []; + 'ios.xcode-select--not_set': [ + {message: string; availableXcode: string | null}, + ]; + 'ios.xcode-select--no_xcode_selected': [{availableXcode: string | null}]; 'ios.xcode-select--noop': []; - 'ios.xcode-select--custom_path': []; + 'ios.xcode-select--custom_path': [ + { + selectedPath: string; + availableXcode: string | null; + }, + ]; 'ios.xcode-select--old_version_selected': [ { selectedVersion: string; latestXCode: string; }, ]; - 'ios.xcode-select--nonexisting_selected': [{selected: string}]; + 'ios.xcode-select--nonexisting_selected': [ + {selected: string; availableXcode: string | null}, + ]; 'ios.sdk--installed': [{platforms: string[]}]; 'ios.sdk--not_installed': []; + 'ios.has-simulators--idb-failed': [{message: string}]; + 'ios.has-simulators--no-devices': []; + 'ios.has-simulators--ok': [{count: number}]; + 'ios.xctrace--installed': [{output: string}]; 'ios.xctrace--not_installed': [{message: string}]; diff --git a/desktop/flipper-common/src/server-types.tsx b/desktop/flipper-common/src/server-types.tsx index 1e11125b7fb..a57dd091670 100644 --- a/desktop/flipper-common/src/server-types.tsx +++ b/desktop/flipper-common/src/server-types.tsx @@ -101,6 +101,7 @@ export type UninitializedClient = { export type ClientQuery = { readonly app: string; + readonly app_id?: string; readonly os: DeviceOS; readonly device: string; readonly device_id: string; @@ -143,6 +144,7 @@ export type FlipperServerEvents = { }; 'device-connected': DeviceDescription; 'device-disconnected': DeviceDescription; + 'device-removed': DeviceDescription; 'device-log': { serial: string; entry: DeviceLogEntry; @@ -152,6 +154,10 @@ export type FlipperServerEvents = { crash: CrashLog; }; 'client-setup': UninitializedClient; + 'client-setup-secret-exchange': { + client: UninitializedClient; + secret: string; + }; 'client-setup-error': { client: UninitializedClient; type: 'error' | 'warning'; @@ -286,6 +292,11 @@ export type FlipperServerCommands = { serial: string, destination: string, ) => Promise; + 'log-connectivity-event': ( + level: 'info' | 'warning' | 'error', + query: ClientQuery | null, + ...message: any + ) => Promise; 'device-stop-screencapture': (serial: string) => Promise; // file path 'device-shell-exec': (serial: string, command: string) => Promise; 'device-install-app': ( @@ -314,6 +325,7 @@ export type FlipperServerCommands = { 'android-adb-kill': () => Promise; 'ios-get-simulators': (bootedOnly: boolean) => Promise; 'ios-launch-simulator': (udid: string) => Promise; + 'ios-launch-app': (udid: string, appName: string) => Promise; 'ios-idb-kill': () => Promise; 'persist-settings': (settings: Settings) => Promise; 'persist-launcher-settings': (settings: LauncherSettings) => Promise; @@ -385,6 +397,7 @@ export type FlipperServerCommands = { ) => Promise; 'intern-cloud-upload': (path: string) => Promise; shutdown: () => Promise; + restart: () => Promise; 'is-logged-in': () => Promise; 'environment-info': () => Promise; 'move-pwa': () => Promise; diff --git a/desktop/flipper-common/src/utils/errors.tsx b/desktop/flipper-common/src/utils/errors.tsx index 493361054c3..a85e84fddf5 100644 --- a/desktop/flipper-common/src/utils/errors.tsx +++ b/desktop/flipper-common/src/utils/errors.tsx @@ -163,7 +163,7 @@ export function getStringFromErrorLike(e: any): string { } catch (e) { // Stringify might fail on arbitrary structures // Last resort: toString it. - return '' + e; + return `${e}`; } } } diff --git a/desktop/flipper-plugin/package.json b/desktop/flipper-plugin/package.json index c587b9d442c..eba5c24a86d 100644 --- a/desktop/flipper-plugin/package.json +++ b/desktop/flipper-plugin/package.json @@ -17,21 +17,23 @@ "@types/react-color": "2.13.5", "@types/react-dom": "^17.0.13", "dayjs": "^1.11.10", + "eventemitter3": "^4.0.7", "flipper-common": "0.0.0", "immer": "^9.0.18", "js-base64": "^3.7.5", "lodash": "^4.17.21", "react-color": "^2.19.3", "react-element-to-jsx-string": "^14.3.4", + "react-json-view": "^1.21.3", + "react-json-view-compare": "^2.0.2", "react-use": "^17.4.0", "react-virtual": "^2.10.4", - "string-natural-compare": "^3.0.0", - "eventemitter3": "^4.0.7" + "string-natural-compare": "^3.0.0" }, "devDependencies": { + "@types/react": "17.0.39", "@types/string-natural-compare": "^3.0.2", - "jest-mock-console": "^1.2.3", - "@types/react": "17.0.39" + "jest-mock-console": "^1.2.3" }, "peerDependencies": { "@ant-design/icons": "^4.2.2", diff --git a/desktop/flipper-plugin/src/__tests__/api.node.tsx b/desktop/flipper-plugin/src/__tests__/api.node.tsx index c7356c3bce6..af3c74fcf67 100644 --- a/desktop/flipper-plugin/src/__tests__/api.node.tsx +++ b/desktop/flipper-plugin/src/__tests__/api.node.tsx @@ -152,7 +152,7 @@ test('Correct top level API exposed', () => { test('All APIs documented', async () => { const docs = await promisify(readFile)( - __dirname + '/../../../../docs/extending/flipper-plugin.mdx', + `${__dirname}/../../../../docs/extending/flipper-plugin.mdx`, 'utf8', ); Object.keys(FlipperPluginModule) diff --git a/desktop/flipper-plugin/src/data-source/DataSource.tsx b/desktop/flipper-plugin/src/data-source/DataSource.tsx index 31e570407e6..c8b0ef5dde3 100644 --- a/desktop/flipper-plugin/src/data-source/DataSource.tsx +++ b/desktop/flipper-plugin/src/data-source/DataSource.tsx @@ -388,7 +388,7 @@ export class DataSource { */ public delete(index: number) { if (index < 0 || index >= this._records.length) { - throw new Error('Out of bounds: ' + index); + throw new Error(`Out of bounds: ${index}`); } const entry = this._records.splice(index, 1)[0]; if (this.keyAttribute) { @@ -1128,7 +1128,7 @@ export class DataSourceView { output, { value: oldValue, - id: -1, + id: -99999, visible: entry.visible, approxIndex: entry.approxIndex, }, diff --git a/desktop/flipper-plugin/src/data-source/__tests__/datasource-perf.node.tsx b/desktop/flipper-plugin/src/data-source/__tests__/datasource-perf.node.tsx index 03d60b1a99a..525bf7a9f48 100644 --- a/desktop/flipper-plugin/src/data-source/__tests__/datasource-perf.node.tsx +++ b/desktop/flipper-plugin/src/data-source/__tests__/datasource-perf.node.tsx @@ -19,11 +19,10 @@ function generateTodos(amount: number): Todo[] { const res = new Array(amount); for (let i = 0; i < amount; i++) { res[i] = { - id: 'todo_' + i, - title: - '' + - ((i % 20) * 1000000 + (amount - i)) + - GKChesterton.replace(/Chesterton/g, '' + i), + id: `todo_${i}`, + title: `${ + (i % 20) * 1000000 + (amount - i) + }${GKChesterton.replace(/Chesterton/g, `${i}`)}`, done: i % 3 === 0, }; } @@ -101,8 +100,8 @@ test.skip('run perf test', () => { measure('append', (ds) => { for (let i = 0; i < 1000; i++) { ds.append({ - id: 'test_' + i, - title: i + 'read some more chesterton!', + id: `test_${i}`, + title: `${i}read some more chesterton!`, done: false, }); } @@ -111,8 +110,8 @@ test.skip('run perf test', () => { measure('update', (ds) => { for (let i = 0; i < 1000; i++) { ds.update(i, { - id: 'test_update_' + i, - title: i + 'read some more chesterton!', + id: `test_update_${i}`, + title: `${i}read some more chesterton!`, done: true, }); } diff --git a/desktop/flipper-plugin/src/plugin/FlipperLib.tsx b/desktop/flipper-plugin/src/plugin/FlipperLib.tsx index bc200ca4153..6d5ecbffbf1 100644 --- a/desktop/flipper-plugin/src/plugin/FlipperLib.tsx +++ b/desktop/flipper-plugin/src/plugin/FlipperLib.tsx @@ -116,6 +116,7 @@ export interface FlipperLib { children: any; width?: number; minWidth?: number; + onResize?: (width: number, height: number) => void; }): ReactElement | null; /** * @returns @@ -210,6 +211,18 @@ export interface FlipperLib { settings: () => { isDarkMode: boolean; }; + /** + * Exposes a subset of server actions to be performed on devises + */ + runDeviceAction: < + T extends Extract< + keyof FlipperServerCommands, + `ios-${string}` | `android-${string}` + >, + >( + cmd: T, + ...params: Parameters + ) => ReturnType; } interface InternAPI { diff --git a/desktop/flipper-plugin/src/plugin/Plugin.tsx b/desktop/flipper-plugin/src/plugin/Plugin.tsx index 5061b2533bf..b2ce726fdfd 100644 --- a/desktop/flipper-plugin/src/plugin/Plugin.tsx +++ b/desktop/flipper-plugin/src/plugin/Plugin.tsx @@ -45,6 +45,11 @@ export interface PluginClient< */ readonly appId: string; + /** + * Identifier that uniquely identifies the application bundle + */ + readonly bundleId: string; + /** * Registered name for the connected application */ @@ -126,6 +131,7 @@ export interface RealFlipperClient { connected: Atom; query: { app: string; + app_id?: string; os: string; device: string; device_id: string; @@ -194,6 +200,9 @@ export class SandyPluginInstance extends BasePluginInstance { get appId() { return realClient.id; }, + get bundleId() { + return realClient.query.app_id ?? 'unknown'; + }, get appName() { return realClient.query.app; }, @@ -307,8 +316,8 @@ export class SandyPluginInstance extends BasePluginInstance { receiveMessages(messages: Message[]) { messages.forEach((message) => { - if (this.events.listenerCount('event-' + message.method) > 0) { - this.events.emit('event-' + message.method, message.params); + if (this.events.listenerCount(`event-${message.method}`) > 0) { + this.events.emit(`event-${message.method}`, message.params); } else { this.events.emit('unhandled-event', message.method, message.params); } diff --git a/desktop/flipper-plugin/src/plugin/PluginRenderer.tsx b/desktop/flipper-plugin/src/plugin/PluginRenderer.tsx index ee4db6ad399..94836b4466a 100644 --- a/desktop/flipper-plugin/src/plugin/PluginRenderer.tsx +++ b/desktop/flipper-plugin/src/plugin/PluginRenderer.tsx @@ -23,7 +23,7 @@ type Props = { */ export const SandyPluginRenderer = memo(({plugin}: Props) => { if (!plugin || !(plugin instanceof BasePluginInstance)) { - throw new Error('Expected plugin, got ' + plugin); + throw new Error(`Expected plugin, got ${plugin}`); } useEffect(() => { const style = document.createElement('style'); @@ -42,7 +42,7 @@ export const SandyPluginRenderer = memo(({plugin}: Props) => { }, [plugin]); return ( - + {createElement(plugin.definition.module.Component, { key: plugin.instanceId, diff --git a/desktop/flipper-plugin/src/test-utils/test-utils.tsx b/desktop/flipper-plugin/src/test-utils/test-utils.tsx index 30a7f8bd487..7f1d59aea00 100644 --- a/desktop/flipper-plugin/src/test-utils/test-utils.tsx +++ b/desktop/flipper-plugin/src/test-utils/test-utils.tsx @@ -108,6 +108,9 @@ export function createMockFlipperLib(options?: StartPluginOptions): FlipperLib { currentUser: () => createState(null), isConnected: () => createState(true), }, + runDeviceAction: () => { + return undefined as any; + }, remoteServerContext: { childProcess: { exec: createStubFunction(), @@ -368,6 +371,7 @@ export function startPlugin>( plugins: new Set([definition.id]), query: { app: appName, + app_id: `com.facebook.flipper.${appName}`, device: deviceName, device_id: testDevice.serial, os: testDevice.serial, @@ -578,7 +582,7 @@ function createBasePluginResult( triggerMenuEntry: (action: string) => { const entry = pluginInstance.menuEntries.find((e) => e.action === action); if (!entry) { - throw new Error('No menu entry found with action: ' + action); + throw new Error(`No menu entry found with action: ${action}`); } entry.handler(); }, @@ -703,7 +707,7 @@ export function createStubFlipperServerConfig(): FlipperServerConfig { desktopPath: `/dev/null`, execPath: '/exec', homePath: `/dev/null`, - staticPath: rootPath + '/static', + staticPath: `${rootPath}/static`, tempPath: '/temp', }, processConfig: { diff --git a/desktop/flipper-plugin/src/ui/DataFormatter.tsx b/desktop/flipper-plugin/src/ui/DataFormatter.tsx index e15116c0e37..52ed03b00f2 100644 --- a/desktop/flipper-plugin/src/ui/DataFormatter.tsx +++ b/desktop/flipper-plugin/src/ui/DataFormatter.tsx @@ -44,7 +44,7 @@ export const DataFormatter = { res = value ? 'true' : 'false'; break; case 'number': - res = '' + value; + res = `${value}`; break; case 'undefined': break; @@ -54,10 +54,11 @@ export const DataFormatter = { case 'object': { if (value === null) break; if (value instanceof Date) { - res = - value.toTimeString().split(' ')[0] + - '.' + - padStart('' + value.getMilliseconds(), 3, '0'); + res = `${value.toTimeString().split(' ')[0]}.${padStart( + `${value.getMilliseconds()}`, + 3, + '0', + )}`; break; } if (value instanceof Map) { diff --git a/desktop/flipper-plugin/src/ui/DataList.tsx b/desktop/flipper-plugin/src/ui/DataList.tsx index 59d512bd316..45059249fe2 100644 --- a/desktop/flipper-plugin/src/ui/DataList.tsx +++ b/desktop/flipper-plugin/src/ui/DataList.tsx @@ -108,9 +108,7 @@ export const DataList: (( if (!item) { onSelect?.(undefined, undefined); } else { - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const id = '' + item[idAttribute!]; + const id = `${item[idAttribute as keyof T]}`; if (id == null) { throw new Error(`No valid identifier for attribute ${idAttribute}`); } @@ -131,9 +129,7 @@ export const DataList: (( const dataListColumns: DataTableColumn[] = useMemo( () => [ { - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - key: idAttribute!, + key: idAttribute as keyof T & string, wrap: true, onRender(item: T, selected: boolean, index: number) { return onRenderItem ? ( diff --git a/desktop/flipper-plugin/src/ui/DetailSidebar.tsx b/desktop/flipper-plugin/src/ui/DetailSidebar.tsx index 5c05011f794..61ce9abf947 100644 --- a/desktop/flipper-plugin/src/ui/DetailSidebar.tsx +++ b/desktop/flipper-plugin/src/ui/DetailSidebar.tsx @@ -15,6 +15,7 @@ export type DetailSidebarProps = { children: any; width?: number; minWidth?: number; + onResize?: (width: number, height: number) => void; }; /* eslint-disable react-hooks/rules-of-hooks */ diff --git a/desktop/flipper-plugin/src/ui/Dialog.tsx b/desktop/flipper-plugin/src/ui/Dialog.tsx index 7882efc22b7..7609cccede8 100644 --- a/desktop/flipper-plugin/src/ui/Dialog.tsx +++ b/desktop/flipper-plugin/src/ui/Dialog.tsx @@ -149,7 +149,7 @@ export const Dialog = { ...rest, defaultValue: true, children: () => message, - onConfirm: onConfirm, + onConfirm, }); }, @@ -242,6 +242,7 @@ export const Dialog = { select({ defaultValue, renderer, + onValidate, ...rest }: { defaultValue: T; @@ -250,10 +251,12 @@ export const Dialog = { onChange: (newValue: T) => void, onCancel: () => void, ) => React.ReactElement; + onValidate?: (value: T) => string; } & BaseDialogOptions): DialogResult { const handle = Dialog.show({ ...rest, defaultValue, + onValidate, children: (currentValue, setValue): React.ReactElement => renderer(currentValue, setValue, () => handle.close()), }); diff --git a/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx b/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx index 6bdd9f164c5..caf0e60810c 100644 --- a/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx +++ b/desktop/flipper-plugin/src/ui/MasterDetailWithPowerSearch.tsx @@ -27,7 +27,7 @@ import { PauseCircleOutlined, PlayCircleOutlined, } from '@ant-design/icons'; -import {Button} from 'antd'; +import {Button, Tooltip} from 'antd'; import {usePluginInstance} from '../plugin/PluginContext'; import {useAssertStableRef} from '../utils/useAssertStableRef'; import {Atom, createState, useValue} from '../state/atom'; @@ -50,9 +50,14 @@ type MasterDetailProps = { tableManagerRef?: React.RefObject | undefined>; }>; /** - * Default size of the sidebar. + * Size of the sidebar, can be controlled by listening to onResize, otherwise the initial size */ sidebarSize?: number; + + /** + * Fired when user changes sidebar, allows you to control size of side bar and have it persist at whatever level is appropriate + */ + onResize?: (width: number, height: number) => void; /** * If provided, this atom will be used to store selection in. */ @@ -82,6 +87,7 @@ export function MasterDetailWithPowerSearch({ sidebarComponent, sidebarPosition, sidebarSize, + onResize, onSelect, actionsTop, extraActions, @@ -90,6 +96,7 @@ export function MasterDetailWithPowerSearch({ isPaused, selection, onClear, + actionsRight, ...tableProps }: MasterDetailProps & DataTableProps) { useAssertStableRef(isPaused, 'isPaused'); @@ -213,24 +220,24 @@ export function MasterDetailWithPowerSearch({ actionsRight={ <> {connected && isPaused && ( - + + + )} {connected && enableClear && ( - + + + )} + {actionsRight} } actionsTop={actionsTop} @@ -245,7 +252,9 @@ export function MasterDetailWithPowerSearch({ return ( {table} - {sidebar} + + {sidebar} + ); case 'right': diff --git a/desktop/flipper-plugin/src/ui/NUX.tsx b/desktop/flipper-plugin/src/ui/NUX.tsx index 0a8b9c88f12..3315e7e2095 100644 --- a/desktop/flipper-plugin/src/ui/NUX.tsx +++ b/desktop/flipper-plugin/src/ui/NUX.tsx @@ -139,7 +139,7 @@ export function NUX({ style={{color: theme.textColorPrimary}}> {title} - + @@ -163,16 +163,27 @@ const UnanimatedBadge = styled(Badge)(({count}) => ({ }, })); -const Pulse = styled.div({ - cursor: 'pointer', - background: theme.warningColor, - opacity: 0.6, - borderRadius: 20, - height: 12, - width: 12, - ':hover': { - opacity: `1 !important`, - background: theme.errorColor, - animationPlayState: 'paused', - }, -}); +const Pulse = (props: object & {style?: React.CSSProperties}) => ( +
+
+
+); diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx index ce1a1b45b96..f0e59afcf39 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx @@ -12,17 +12,17 @@ import {css} from '@emotion/css'; import {theme} from '../theme'; const containerStyle = css` - flex: 1 1 auto; + flex-grow: 1; background-color: ${theme.backgroundDefault}; display: flex; flex-direction: row; flex-wrap: wrap; - align-items: baseline; + align-items: center; border-radius: ${theme.borderRadius}; border: 1px solid ${theme.borderColor}; transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); padding: ${theme.space.tiny / 2}px; - + min-height: 34px; &:focus-within, &:hover { border-color: ${theme.primaryColor}; diff --git a/desktop/flipper-plugin/src/ui/Tabs.tsx b/desktop/flipper-plugin/src/ui/Tabs.tsx index 53c77ddb88b..caa0b19a205 100644 --- a/desktop/flipper-plugin/src/ui/Tabs.tsx +++ b/desktop/flipper-plugin/src/ui/Tabs.tsx @@ -53,7 +53,7 @@ export function Tabs({ }); const [activeTab, setActiveTab] = useLocalStorageState( - 'Tabs:' + (localStorageKeyOverride ?? keys.join(',')), + `Tabs:${localStorageKeyOverride ?? keys.join(',')}`, undefined, ); diff --git a/desktop/flipper-plugin/src/ui/Tracked.tsx b/desktop/flipper-plugin/src/ui/Tracked.tsx index 6d70241e597..760af10f344 100644 --- a/desktop/flipper-plugin/src/ui/Tracked.tsx +++ b/desktop/flipper-plugin/src/ui/Tracked.tsx @@ -132,7 +132,7 @@ export function wrapInteractionHandler( duration: initialEnd - start, totalDuration: Date.now() - start, success: error ? 0 : 1, - error: error ? '' + error : undefined, + error: error ? `${error}` : undefined, componentType: element === null ? 'unknown' diff --git a/desktop/flipper-plugin/src/ui/__tests__/Tracked.node.tsx b/desktop/flipper-plugin/src/ui/__tests__/Tracked.node.tsx index 34610c1223b..2624824ac2f 100644 --- a/desktop/flipper-plugin/src/ui/__tests__/Tracked.node.tsx +++ b/desktop/flipper-plugin/src/ui/__tests__/Tracked.node.tsx @@ -151,7 +151,7 @@ test('Throwing async action', async () => { } catch (e) { error = e; } - expect('' + error).toBe(`Error: Oops`); + expect(`${error}`).toBe(`Error: Oops`); expect(events[0]).toEqual({ action: ` - - )} - {props.actionsRight} - {props.extraActions} + + {contexMenu && ( + + + + )} + {props.actionsRight} + {props.extraActions} + )} @@ -1156,6 +1158,8 @@ function EmptyTable({ ); } +const ActionsPanel = styled.div({display: 'flex', flexWrap: 'wrap', gap: 4}); + const RangeFinder = styled.div({ backgroundColor: theme.backgroundWash, position: 'absolute', diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearchManager.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearchManager.tsx index d4a955b8783..60600a605a9 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearchManager.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearchManager.tsx @@ -270,7 +270,7 @@ export const dataTableManagerReducer = produce< break; } default: { - throw new Error('Unknown action ' + (action as any).type); + throw new Error(`Unknown action ${(action as any).type}`); } } }); @@ -291,6 +291,7 @@ export type DataTableManager = { end: number, allowUnselect?: boolean, ): void; + setAutoScroll(autoScroll: boolean): void; selectItemById(id: string, addToSelection?: boolean): void; clearSelection(): void; getSelectedItem(): T | undefined; @@ -326,6 +327,9 @@ export function createDataTableManager( resetFilters() { dispatch({type: 'resetFilters'}); }, + setAutoScroll(autoScroll: boolean) { + dispatch({type: 'setAutoScroll', autoScroll}); + }, selectItem(index: number, addToSelection = false, allowUnselect = false) { dispatch({ type: 'selectItem', diff --git a/desktop/flipper-plugin/src/ui/data-table/PowerSearchTableContextMenu.tsx b/desktop/flipper-plugin/src/ui/data-table/PowerSearchTableContextMenu.tsx index f91356f35fb..86e5f62a251 100644 --- a/desktop/flipper-plugin/src/ui/data-table/PowerSearchTableContextMenu.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/PowerSearchTableContextMenu.tsx @@ -133,13 +133,13 @@ export function tableContextMenuFactory( disabled={!hasSelection}> {visibleColumns.map((column, idx) => ( { const items = getSelectedItems(dataView, selection); if (items.length) { lib.writeTextToClipboard( items - .map((item) => '' + getValueAtPath(item, column.key)) + .map((item) => `${getValueAtPath(item, column.key)}`) .join('\n'), ); } @@ -151,7 +151,7 @@ export function tableContextMenuFactory( {columns.map((column, idx) => ( - + { @@ -192,17 +192,13 @@ function defaultOnCopyRows( items: T[], visibleColumns: DataTableColumn[], ) { - return ( - visibleColumns.map(friendlyColumnTitle).join('\t') + - '\n' + - items - .map((row, idx) => - visibleColumns - .map((col) => textContent(renderColumnValue(col, row, true, idx))) - .join('\t'), - ) - .join('\n') - ); + return `${visibleColumns.map(friendlyColumnTitle).join('\t')}\n${items + .map((row, idx) => + visibleColumns + .map((col) => textContent(renderColumnValue(col, row, true, idx))) + .join('\t'), + ) + .join('\n')}`; } function rowsToJson(items: T[]) { diff --git a/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx b/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx index 636c8ccdcac..43db7d1a4f9 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx @@ -139,13 +139,13 @@ export function tableContextMenuFactory( disabled={!hasSelection}> {visibleColumns.map((column, idx) => ( { const items = getSelectedItems(dataView, selection); if (items.length) { lib.writeTextToClipboard( items - .map((item) => '' + getValueAtPath(item, column.key)) + .map((item) => `${getValueAtPath(item, column.key)}`) .join('\n'), ); } @@ -157,7 +157,7 @@ export function tableContextMenuFactory( {columns.map((column, idx) => ( - + { @@ -228,7 +228,7 @@ export function tableContextMenuFactory( onChange={(color: string) => { dispatch({ type: 'setSearchHighlightColor', - color: color, + color, }); }}> {Object.entries(theme.searchHighlightBackground).map( @@ -284,17 +284,13 @@ function defaultOnCopyRows( items: T[], visibleColumns: DataTableColumn[], ) { - return ( - visibleColumns.map(friendlyColumnTitle).join('\t') + - '\n' + - items - .map((row, idx) => - visibleColumns - .map((col) => textContent(renderColumnValue(col, row, true, idx))) - .join('\t'), - ) - .join('\n') - ); + return `${visibleColumns.map(friendlyColumnTitle).join('\t')}\n${items + .map((row, idx) => + visibleColumns + .map((col) => textContent(renderColumnValue(col, row, true, idx))) + .join('\t'), + ) + .join('\n')}`; } function rowsToJson(items: T[]) { diff --git a/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx b/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx index 70d30e13104..a6089a69f51 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx @@ -43,19 +43,16 @@ function SortIcons({ e.stopPropagation(); onSort(direction === 'asc' ? undefined : 'asc'); }} - className={ - 'ant-table-column-sorter-up ' + (direction === 'asc' ? 'active' : '') - } + className={`ant-table-column-sorter-up ${direction === 'asc' ? 'active' : ''}`} /> { e.stopPropagation(); onSort(direction === 'desc' ? undefined : 'desc'); }} - className={ - 'ant-table-column-sorter-down ' + - (direction === 'desc' ? 'active' : '') - } + className={`ant-table-column-sorter-down ${ + direction === 'desc' ? 'active' : '' + }`} /> ); diff --git a/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx b/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx index 81211b10532..95d276ba1f8 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableRow.tsx @@ -14,7 +14,7 @@ import {DataTableColumn, TableRowRenderContext} from './DataTable'; import {Width} from '../../utils/widthUtils'; import {DataFormatter} from '../DataFormatter'; import {Dropdown} from 'antd'; -import {contextMenuTrigger} from '../data-inspector/DataInspectorNode'; + import {getValueAtPath} from './DataTableManager'; import {HighlightManager, useHighlighter} from '../Highlight'; @@ -146,7 +146,7 @@ export const TableRow = memo(function TableRow({ ); if (config.onContextMenu) { return ( - + {row} ); diff --git a/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx b/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx index 87be9606343..1dee7440a10 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableSearch.tsx @@ -76,7 +76,7 @@ export const TableSearch = memo(function TableSearch({ ); const toggleSearchDropdown = useCallback( (show: boolean) => { - dispatch({type: 'showSearchDropdown', show: show}); + dispatch({type: 'showSearchDropdown', show}); }, [dispatch], ); @@ -149,7 +149,7 @@ export const TableSearch = memo(function TableSearch({ try { new RegExp(searchValue); } catch (e) { - return '' + e; + return `${e}`; } }, [useRegex, searchValue]); diff --git a/desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx b/desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx index b0fbb439c37..746952ea122 100644 --- a/desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx +++ b/desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx @@ -643,7 +643,7 @@ export class Elements extends PureComponent { const childrenValue = children.toString().replace(',', ''); const indentation = depth === 0 ? '' : '\n'.padEnd(depth * 2 + 1, ' '); const attrs = element.attributes.reduce( - (acc, val) => acc + ` ${val.name}=${val.value}`, + (acc, val) => `${acc} ${val.name}=${val.value}`, '', ); diff --git a/desktop/flipper-plugin/src/utils/createTablePlugin.tsx b/desktop/flipper-plugin/src/utils/createTablePlugin.tsx index 4a6c9fa92c5..91ad5ca59a4 100644 --- a/desktop/flipper-plugin/src/utils/createTablePlugin.tsx +++ b/desktop/flipper-plugin/src/utils/createTablePlugin.tsx @@ -110,7 +110,7 @@ export function createTablePlugin< } unhandledMessagesSeen.add(message); notification.warn({ - message: 'Unhandled message: ' + message, + message: `Unhandled message: ${message}`, description: ( 
{JSON.stringify(params, null, 2)}
diff --git a/desktop/flipper-plugin/src/utils/safeStringify.tsx b/desktop/flipper-plugin/src/utils/safeStringify.tsx index b7f7eda8edf..f60b7664d9f 100644 --- a/desktop/flipper-plugin/src/utils/safeStringify.tsx +++ b/desktop/flipper-plugin/src/utils/safeStringify.tsx @@ -11,6 +11,6 @@ export function safeStringify(value: any, space: number = 2) { try { return JSON.stringify(value, null, space); } catch (e) { - return ''; + return ``; } } diff --git a/desktop/flipper-plugin/src/utils/shallowSerialization.tsx b/desktop/flipper-plugin/src/utils/shallowSerialization.tsx index 9bf3129359d..16106cb61b9 100644 --- a/desktop/flipper-plugin/src/utils/shallowSerialization.tsx +++ b/desktop/flipper-plugin/src/utils/shallowSerialization.tsx @@ -146,7 +146,7 @@ export function assertSerializable(obj: any) { const proto = Object.getPrototypeOf(value); if (Array.isArray(value)) { value.forEach((child, index) => { - path.push('' + index); + path.push(`${index}`); check(child); path.pop(); }); diff --git a/desktop/flipper-server-client/src/FlipperServerClient.tsx b/desktop/flipper-server-client/src/FlipperServerClient.tsx index 8745aa27787..5804fb818fc 100644 --- a/desktop/flipper-server-client/src/FlipperServerClient.tsx +++ b/desktop/flipper-server-client/src/FlipperServerClient.tsx @@ -41,11 +41,16 @@ export function createFlipperServer( }; const socket = new ReconnectingWebSocket(URLProvider); - return createFlipperServerWithSocket(socket as WebSocket, onStateChange); + return createFlipperServerWithSocket( + socket as WebSocket, + port, + onStateChange, + ); } export function createFlipperServerWithSocket( socket: WebSocket, + port: number, onStateChange: (state: FlipperServerState) => void, ): Promise { onStateChange(FlipperServerState.CONNECTING); @@ -57,7 +62,7 @@ export function createFlipperServerWithSocket( new Error( `Failed to connect to the server in a timely manner. It may be unresponsive. Run the following from the terminal - 'sudo kill -9 $(lsof -t -i :52342)' as to kill any existing running instance, if any.`, + 'sudo kill -9 $(lsof -t -i :${port})' as to kill any existing running instance, if any.`, ), ); }, CONNECTION_TIMEOUT); diff --git a/desktop/flipper-server/package.json b/desktop/flipper-server/package.json index f7bcfaeb869..b602c98d9f2 100644 --- a/desktop/flipper-server/package.json +++ b/desktop/flipper-server/package.json @@ -10,8 +10,10 @@ "bugs": "https://github.com/facebook/flipper/issues", "dependencies": { "chalk": "^4", + "envinfo": "^7.8.1", "exit-hook": "^2.1.1", "express": "^4.17.3", + "fb-watchman": "^2.0.2", "file-stream-rotator": "^0.6.1", "flipper-common": "0.0.0", "flipper-pkg-lib": "0.0.0", @@ -31,7 +33,6 @@ "archiver": "^5.3.1", "async-mutex": "^0.3.2", "axios": "^0.26.0", - "flipper-doctor": "0.0.0", "flipper-plugin-lib": "0.0.0", "form-data": "^4.0.0", "invariant": "^2.2.4", @@ -56,6 +57,7 @@ }, "devDependencies": { "@types/express": "^4.17.13", + "@types/fb-watchman": "^2.0.1", "@types/http-proxy": "^1.17.8", "@types/node": "^17.0.31", "@types/archiver": "^5.3.1", @@ -73,6 +75,11 @@ "@types/ws": "^8.5.3", "mock-fs": "^5.2.0" }, + "resolutions": { + "adbkit-logcat": "^2.0.1", + "minimist": "1.2.6", + "node-forge": "^1.0.6" + }, "peerDependencies": {}, "scripts": { "reset": "rimraf lib *.tsbuildinfo", diff --git a/desktop/flipper-server/src/FlipperServerImpl.tsx b/desktop/flipper-server/src/FlipperServerImpl.tsx index 3da9f9360a9..7f16603702f 100644 --- a/desktop/flipper-server/src/FlipperServerImpl.tsx +++ b/desktop/flipper-server/src/FlipperServerImpl.tsx @@ -7,6 +7,9 @@ * @format */ +import cp from 'child_process'; +import os from 'os'; +import {promisify} from 'util'; import './utils/macCa'; import './utils/fetch-polyfill'; import EventEmitter from 'events'; @@ -27,6 +30,7 @@ import { DeviceDebugData, CertificateExchangeMedium, Settings, + ClientQuery, } from 'flipper-common'; import {ServerDevice} from './devices/ServerDevice'; import {Base64} from 'js-base64'; @@ -61,6 +65,7 @@ import {movePWA} from './utils/findInstallation'; import GK from './fb-stubs/GK'; import {fetchNewVersion} from './fb-stubs/fetchNewVersion'; import dns from 'dns'; +import {recorder} from './recorder'; // The default on node16 is to prefer ipv4 results which causes issues // in some setups. @@ -88,11 +93,9 @@ function setProcessState(settings: Settings) { // emulator/emulator is more reliable than tools/emulator, so prefer it if // it exists process.env.PATH = - ['emulator', 'tools', 'platform-tools'] + `${['emulator', 'tools', 'platform-tools'] .map((directory) => path.resolve(androidHome, directory)) - .join(':') + - `:${idbPath}` + - `:${process.env.PATH}`; + .join(':')}:${idbPath}` + `:${process.env.PATH}`; } /** @@ -124,7 +127,7 @@ export class FlipperServerImpl implements FlipperServer { keytarModule?: KeytarModule, ) { setFlipperServerConfig(config); - console.info('Loaded flipper config: ' + JSON.stringify(config, null, 2)); + console.info(`Loaded flipper config: ${JSON.stringify(config, null, 2)}`); setProcessState(config.settings); const server = (this.server = new ServerController(this)); @@ -157,6 +160,16 @@ export class FlipperServerImpl implements FlipperServer { }, ); + server.addListener( + 'client-setup-secret-exchange', + (client: UninitializedClient, secret: string) => { + this.emit('client-setup-secret-exchange', { + client, + secret, + }); + }, + ); + server.addListener( 'client-unresponsive-error', ({ @@ -179,8 +192,8 @@ export class FlipperServerImpl implements FlipperServer { 'Timeout establishing connection. It looks like the app is taking longer than it should to reconnect using the exchanged certificates. '; message += medium === 'WWW' - ? `Verify that your mobile device is connected to Lighthouse/VPN and that you are logged in to - Flipper with the same user account used by the app (unfortunately, test accounts are not currently supported), + ? `Verify that your mobile device is connected to Lighthouse/VPN and that you are logged in to + Flipper with the same user account used by the app (unfortunately, test accounts are not currently supported), so that certificates can be exhanged. See: https://fburl.com/flippervpn. Once this is done, re-running the app may solve this issue.` : 'Re-running the app may solve this issue.'; this.emit('client-setup-error', { @@ -228,7 +241,7 @@ export class FlipperServerImpl implements FlipperServer { setServerState(state: FlipperServerState, error?: Error) { this.state = state; - this.stateError = '' + error; + this.stateError = `${error}`; this.emit('server-state', {state, error: this.stateError}); } @@ -460,6 +473,13 @@ export class FlipperServerImpl implements FlipperServer { isSymbolicLink: stats.isSymbolicLink(), }; }, + 'log-connectivity-event': async ( + level: 'info' | 'warning' | 'error', + query: ClientQuery | null, + message: any[], + ) => { + recorder.log_(level, query ?? recorder.undefinedClientQuery_, message); + }, 'node-api-fs-readlink': readlink, 'node-api-fs-readfile': async (path, options) => { const contents = await readFile(path, options ?? 'utf8'); @@ -506,7 +526,7 @@ export class FlipperServerImpl implements FlipperServer { 'metro-command': async (serial: string, command: string) => { const device = this.getDevice(serial); if (!(device instanceof MetroDevice)) { - throw new Error('Not a Metro device: ' + serial); + throw new Error(`Not a Metro device: ${serial}`); } device.sendCommand(command); }, @@ -553,6 +573,10 @@ export class FlipperServerImpl implements FlipperServer { assertNotNull(this.ios); return this.ios.launchSimulator(udid); }, + 'ios-launch-app': async (udid, bundleId) => { + assertNotNull(this.ios); + return this.ios.launchApp(udid, bundleId); + }, 'ios-idb-kill': async () => { assertNotNull(this.ios); return this.ios.idbKill(); @@ -634,6 +658,15 @@ export class FlipperServerImpl implements FlipperServer { } return uploadRes; }, + restart: async () => { + if (os.platform() === 'darwin') { + const execAsPromise = promisify(cp.exec); + await execAsPromise('open flipper://execute?cmd=restart'); + return; + } + + throw new Error('Restarting the app is only supported on macOS'); + }, shutdown: async () => { // Do not use processExit helper. We want to server immediatelly quit when this call is triggerred process.exit(0); @@ -661,7 +694,10 @@ export class FlipperServerImpl implements FlipperServer { const existing = this.devices.get(serial); if (existing) { // assert different kind of devices aren't accidentally reusing the same serial - if (Object.getPrototypeOf(existing) !== Object.getPrototypeOf(device)) { + if ( + existing.info.deviceType !== 'dummy' && + Object.getPrototypeOf(existing) !== Object.getPrototypeOf(device) + ) { throw new Error( `Tried to register a new device type for existing serial '${serial}': Trying to replace existing '${ Object.getPrototypeOf(existing).constructor.name @@ -682,8 +718,9 @@ export class FlipperServerImpl implements FlipperServer { return; } this.devices.delete(serial); - device.disconnect(); // we'll only destroy upon replacement + device.disconnect(); this.emit('device-disconnected', device.info); + this.emit('device-removed', device.info); } getDevice(serial: string): ServerDevice { @@ -699,6 +736,18 @@ export class FlipperServerImpl implements FlipperServer { return !!this.devices.get(serial); } + getDeviceWithName(name: string): ServerDevice | undefined { + const devices = this.getDevices(); + const matches = devices.filter((device) => device.info.title === name); + if (matches.length === 1) { + return matches[0]; + } + } + + getDeviceWithSerial(serial: string): ServerDevice | undefined { + return this.devices.get(serial); + } + getDeviceSerials(): string[] { return Array.from(this.devices.keys()); } diff --git a/desktop/flipper-server/src/app-connectivity/ServerController.tsx b/desktop/flipper-server/src/app-connectivity/ServerController.tsx index 366640509e8..f917828d5d4 100644 --- a/desktop/flipper-server/src/app-connectivity/ServerController.tsx +++ b/desktop/flipper-server/src/app-connectivity/ServerController.tsx @@ -18,14 +18,20 @@ import { reportPlatformFailures, FlipperServerEvents, ConnectionRecordEntry, + uuid, } from 'flipper-common'; -import CertificateProvider from './certificate-exchange/CertificateProvider'; +import CertificateProvider, { + CertificateExchangeRequestResult, +} from './certificate-exchange/CertificateProvider'; import {ClientConnection, ConnectionStatus} from './ClientConnection'; import {EventEmitter} from 'events'; import invariant from 'invariant'; import DummyDevice from '../devices/DummyDevice'; import {appNameWithUpdateHint, assertNotNull} from './Utilities'; -import ServerWebSocketBase, {ServerEventsListener} from './ServerWebSocketBase'; +import ServerWebSocketBase, { + CertificateExchangeRequestResponse, + ServerEventsListener, +} from './ServerWebSocketBase'; import { createBrowserServer, createServer, @@ -44,6 +50,7 @@ import DesktopCertificateProvider from '../devices/desktop/DesktopCertificatePro import WWWCertificateProvider from '../fb-stubs/WWWCertificateProvider'; import {tracker} from '../tracker'; import {recorder} from '../recorder'; +import GK from '../fb-stubs/GK'; type ClientTimestampTracker = { insecureStart?: number; @@ -89,7 +96,6 @@ export class ServerController recorder.enable(flipperServer); } - onClientMessage(clientId: string, payload: string): void { this.flipperServer.emit('client-message', { id: clientId, @@ -165,6 +171,7 @@ export class ServerController ): Promise { const { app, + app_id, os, device, device_id, @@ -188,6 +195,7 @@ export class ServerController clientConnection, { app, + app_id, os, device, device_id, @@ -260,13 +268,15 @@ export class ServerController clearTimeout(timeout); } - if (clientQuery.medium === 'WWW' || clientQuery.medium === 'NONE') { + const device = this.flipperServer.getDeviceWithSerial( + clientQuery.device_id, + ); + if (!device) { this.flipperServer.registerDevice( new DummyDevice( this.flipperServer, clientQuery.device_id, - clientQuery.app + - (clientQuery.medium === 'WWW' ? ' Server Exchanged' : ''), + `${clientQuery.device}`, clientQuery.os, ), ); @@ -277,6 +287,7 @@ export class ServerController deviceName: clientQuery.device, appName: appNameWithUpdateHint(clientQuery), }; + this.emit('start-client-setup', client); } @@ -313,7 +324,7 @@ export class ServerController unsanitizedCSR: string, clientQuery: ClientQuery, appDirectory: string, - ): Promise<{deviceId: string}> { + ): Promise { let certificateProvider: CertificateProvider; switch (clientQuery.os) { case 'Android': { @@ -365,11 +376,9 @@ export class ServerController ), 'processCertificateSigningRequest', ) - .then((response) => { - recorder.log( - clientQuery, - 'Certificate Signing Request successfully processed', - ); + .then((result: CertificateExchangeRequestResult) => { + const shouldSendEncryptedCertificates = + GK.get('flipper_encrypted_exchange') && clientQuery.os === 'iOS'; const client: UninitializedClient = { os: clientQuery.os, @@ -377,29 +386,85 @@ export class ServerController appName: appNameWithUpdateHint(clientQuery), }; - this.timeHandlers.set( - // In the original insecure connection request, `device_id` is set to "unknown". - // Flipper queries adb/idb to learn the device ID and provides it back to the app. - // Once app knows it, it starts using the correct device ID for its subsequent secure connections. - // When the app re-connects securely after the certificate exchange process, we need to cancel this timeout. - // Since the original clientQuery has `device_id` set to "unknown", we update it here with the correct `device_id` to find it and cancel it later. - clientQueryToKey({...clientQuery, device_id: response.deviceId}), - setTimeout(() => { - this.emit('client-unresponsive-error', { - client, - medium: clientQuery.medium, - deviceID: response.deviceId, - }); - }, 30 * 1000), - ); - - tracker.track('app-connection-certificate-exchange', { - ...clientQuery, - successful: true, - device_id: response.deviceId, - }); - - resolve(response); + if (!result.error) { + recorder.log( + clientQuery, + 'Certificate Signing Request successfully processed', + ); + + this.timeHandlers.set( + // In the original insecure connection request, `device_id` is set to "unknown". + // Flipper queries adb/idb to learn the device ID and provides it back to the app. + // Once app knows it, it starts using the correct device ID for its subsequent secure connections. + // When the app re-connects securely after the certificate exchange process, we need to cancel this timeout. + // Since the original clientQuery has `device_id` set to "unknown", we update it here with the correct `device_id` to find it and cancel it later. + clientQueryToKey({...clientQuery, device_id: result.deviceId}), + setTimeout(() => { + this.emit('client-unresponsive-error', { + client, + medium: clientQuery.medium, + deviceID: result.deviceId, + }); + }, 30 * 1000), + ); + + tracker.track('app-connection-certificate-exchange', { + ...clientQuery, + successful: true, + device_id: result.deviceId, + }); + + const response: CertificateExchangeRequestResponse = { + deviceId: result.deviceId, + }; + + resolve(response); + } else if (shouldSendEncryptedCertificates) { + recorder.log( + clientQuery, + 'Certificate Signing Request failed, attempt fallback exchange', + ); + + this.emit( + 'client-setup-secret-exchange', + client, + result.certificates?.key, + ); + + let deviceId = uuid(); + const device = this.flipperServer.getDeviceWithName( + clientQuery.device, + ); + if (device) { + deviceId = device.serial; + } else { + this.flipperServer.registerDevice( + new DummyDevice( + this.flipperServer, + deviceId, + clientQuery.device, + clientQuery.os, + ), + ); + } + + tracker.track('app-connection-insecure-attempt-fallback', { + app: clientQuery.app, + os: clientQuery.os, + device: clientQuery.device, + medium: clientQuery.medium, + device_id: deviceId, + }); + + const response: CertificateExchangeRequestResponse = { + deviceId, + certificates: result.certificates?.data, + }; + + resolve(response); + } else { + throw result.error; + } }) .catch((error: Error) => { tracker.track('app-connection-certificate-exchange', { @@ -479,7 +544,7 @@ export class ServerController const info = { client, - connection: connection, + connection, }; recorder.log( @@ -553,15 +618,24 @@ export class ServerController * @param id The client connection identifier. */ removeConnection(id: string) { - const info = this.connections.get(id); - if (info) { + const connectionInfo = this.connections.get(id); + if (connectionInfo) { recorder.log( - info.client.query, - `Disconnected: ${info.client.query.app} on ${info.client.query.device_id}.`, + connectionInfo.client.query, + `Disconnected: ${connectionInfo.client.query.app} on ${connectionInfo.client.query.device_id}.`, + ); + + const device = this.flipperServer.getDeviceWithSerial( + connectionInfo.client.query.device_id, ); + this.flipperServer.emit('client-disconnected', {id}); this.connections.delete(id); this.flipperServer.pluginManager.stopAllServerAddOns(id); + + if (device && device.info.deviceType === 'dummy') { + this.flipperServer.unregisterDevice(device.serial); + } } } diff --git a/desktop/flipper-server/src/app-connectivity/ServerRSocket.tsx b/desktop/flipper-server/src/app-connectivity/ServerRSocket.tsx index 3751017811e..f24517120b4 100644 --- a/desktop/flipper-server/src/app-connectivity/ServerRSocket.tsx +++ b/desktop/flipper-server/src/app-connectivity/ServerRSocket.tsx @@ -74,8 +74,8 @@ class ServerRSocket extends ServerWebSocketBase { ? this._trustedRequestHandler : this._untrustedRequestHandler, transport: new RSocketTCPServer({ - port: port, - serverFactory: serverFactory, + port, + serverFactory, }), }); rawServer.start(); diff --git a/desktop/flipper-server/src/app-connectivity/ServerWebSocketBase.tsx b/desktop/flipper-server/src/app-connectivity/ServerWebSocketBase.tsx index ca15e7f7945..f0d531f0266 100644 --- a/desktop/flipper-server/src/app-connectivity/ServerWebSocketBase.tsx +++ b/desktop/flipper-server/src/app-connectivity/ServerWebSocketBase.tsx @@ -18,6 +18,11 @@ import { import {SecureServerConfig} from './certificate-exchange/certificate-utils'; import GK from '../fb-stubs/GK'; +export type CertificateExchangeRequestResponse = { + deviceId?: string; + certificates?: string; +}; + /** * Defines an interface for events triggered by a running server interacting * with a client. @@ -61,7 +66,7 @@ export interface ServerEventsListener { unsanitizedCSR: string, clientQuery: ClientQuery, appDirectory: string, - ): Promise<{deviceId: string}>; + ): Promise; /** * A secure connection has been established with a validated client. * A promise to a Client instance needs to be returned. @@ -183,9 +188,7 @@ abstract class ServerWebSocketBase { console.info( `[conn] Exchanged certificate: ${clientQuery.app} on ${result.deviceId}`, ); - const response = JSON.stringify({ - deviceId: result.deviceId, - }); + const response = JSON.stringify(result); return response; } catch (error) { this.listener.onClientSetupError(clientQuery, error); diff --git a/desktop/flipper-server/src/app-connectivity/Utilities.tsx b/desktop/flipper-server/src/app-connectivity/Utilities.tsx index bae385dcfe5..0fcda798285 100644 --- a/desktop/flipper-server/src/app-connectivity/Utilities.tsx +++ b/desktop/flipper-server/src/app-connectivity/Utilities.tsx @@ -33,7 +33,7 @@ export function transformCertificateExchangeMediumToType( case 3: return 'NONE'; default: - throw new Error('Unknown Certificate exchange medium: ' + medium); + throw new Error(`Unknown Certificate exchange medium: ${medium}`); } } @@ -50,7 +50,7 @@ export function transformCertificateExchangeMediumToType( */ export function appNameWithUpdateHint(query: ClientQuery): string { if (query.os === 'Android' && (!query.sdk_version || query.sdk_version < 3)) { - return query.app + ' (Outdated SDK)'; + return `${query.app} (Outdated SDK)`; } return query.app; } @@ -123,6 +123,11 @@ export function parseClientQuery( return; } + let app_id: string | undefined; + if (typeof query.app_id === 'string') { + app_id = query.app_id; + } + let os: DeviceOS | undefined; if (typeof query.os === 'string') { os = query.os as DeviceOS; @@ -138,7 +143,7 @@ export function parseClientQuery( } if (medium !== undefined && (medium < 1 || medium > 3)) { - throw new Error('Unsupported exchange medium: ' + medium); + throw new Error(`Unsupported exchange medium: ${medium}`); } let sdk_version: number | undefined; @@ -152,6 +157,7 @@ export function parseClientQuery( device_id, device, app, + app_id, os, medium: transformCertificateExchangeMediumToType(medium), sdk_version, @@ -199,7 +205,7 @@ export function parseSecureClientQuery( } if (medium !== undefined && (medium < 1 || medium > 3)) { - throw new Error('Unsupported exchange medium: ' + medium); + throw new Error(`Unsupported exchange medium: ${medium}`); } return { ...clientQuery, diff --git a/desktop/flipper-server/src/app-connectivity/__tests__/BrowserServerWebSocket.node.tsx b/desktop/flipper-server/src/app-connectivity/__tests__/BrowserServerWebSocket.node.tsx index 702c85e665a..5194cda6a5e 100644 --- a/desktop/flipper-server/src/app-connectivity/__tests__/BrowserServerWebSocket.node.tsx +++ b/desktop/flipper-server/src/app-connectivity/__tests__/BrowserServerWebSocket.node.tsx @@ -80,6 +80,9 @@ describe('BrowserServerWebSocket', () => { device, os, app, + // FIXME + // app_id: `com.facebook.flipper.${app}`, + app_id: undefined, sdk_version: sdkVersion, medium: 'NONE', }; @@ -182,6 +185,9 @@ describe('BrowserServerWebSocket', () => { device, os: 'MacOS', app: device, + // FIXME + // app_id: `com.facebook.flipper.${device}`, + app_id: undefined, sdk_version: 4, medium: 'NONE', }; diff --git a/desktop/flipper-server/src/app-connectivity/__tests__/SecureServerWebSocket.node.tsx b/desktop/flipper-server/src/app-connectivity/__tests__/SecureServerWebSocket.node.tsx index 8b66bc296c0..d8816690f35 100644 --- a/desktop/flipper-server/src/app-connectivity/__tests__/SecureServerWebSocket.node.tsx +++ b/desktop/flipper-server/src/app-connectivity/__tests__/SecureServerWebSocket.node.tsx @@ -78,6 +78,9 @@ describe('SecureServerWebSocket', () => { device, os, app, + // FIXME + // app_id: `com.facebook.flipper.${app}`, + app_id: undefined, sdk_version: sdkVersion, csr, csr_path: csrPath, diff --git a/desktop/flipper-server/src/app-connectivity/__tests__/ServerWebSocket.node.tsx b/desktop/flipper-server/src/app-connectivity/__tests__/ServerWebSocket.node.tsx index 2eaac0f7491..5cecb8d7857 100644 --- a/desktop/flipper-server/src/app-connectivity/__tests__/ServerWebSocket.node.tsx +++ b/desktop/flipper-server/src/app-connectivity/__tests__/ServerWebSocket.node.tsx @@ -59,6 +59,9 @@ describe('ServerWebSocket', () => { device, os, app, + // FIXME + // app_id: `com.facebook.flipper.${app}`, + app_id: undefined, sdk_version: sdkVersion, medium: 'WWW', }; diff --git a/desktop/flipper-server/src/app-connectivity/__tests__/utils.tsx b/desktop/flipper-server/src/app-connectivity/__tests__/utils.tsx index b71043285cd..fcc274ca1bc 100644 --- a/desktop/flipper-server/src/app-connectivity/__tests__/utils.tsx +++ b/desktop/flipper-server/src/app-connectivity/__tests__/utils.tsx @@ -45,7 +45,10 @@ export class WSMessageAccumulator { } } -export const processCSRResponse = {deviceId: 'dagobah'}; +export const processCSRResponse = { + deviceId: 'unknown', + certificates: 'unknown', +}; export const createMockSEListener = (): ServerEventsListener => ({ onDeviceLogs: jest.fn(), diff --git a/desktop/flipper-server/src/app-connectivity/certificate-exchange/CertificateProvider.tsx b/desktop/flipper-server/src/app-connectivity/certificate-exchange/CertificateProvider.tsx index 725b51d59b3..f089e361ae1 100644 --- a/desktop/flipper-server/src/app-connectivity/certificate-exchange/CertificateProvider.tsx +++ b/desktop/flipper-server/src/app-connectivity/certificate-exchange/CertificateProvider.tsx @@ -8,32 +8,102 @@ */ import {CertificateExchangeMedium, ClientQuery} from 'flipper-common'; +import {promisify} from 'util'; import {recorder} from '../../recorder'; import { deviceCAcertFile, deviceClientCertFile, ensureOpenSSLIsAvailable, + ephemeralEncryption, extractBundleIdFromCSR, generateClientCertificate, getCACertificate, } from './certificate-utils'; +import path from 'path'; +import tmp from 'tmp'; +import fs from 'fs-extra'; +import archiver from 'archiver'; + +/** + * Some exchange operations can throw: get device identifier, push/pull certificates to the app's sandbox. + * Previously, if there was an error, this was caught by the caller and an empty response was sent back to the app. + * + * After this change, those same operations can fail, but the exception will be caught and set into the response type. + * It is reponsability of the caller to check if there is an error and handle accordingly. + * + * Why? + * Because, even if those operations fail, an overal failure may be avoided by instead, for example, attempt a different type of exchange. + * In those cases, the certificate bundles are still of value to the caller. + * + * The properties certificates and certificatesZip will always be set unless a proper error takes place which will prevent any type of exchange. + * Device identifier and no error will be found when the certificate provider succeeded. + * The absence of device identifier and/or presence of error indicate the certificate provider failed to + * exchange certificates. + */ +export type CertificateExchangeRequestResult = + | { + deviceId: string; + error?: never; + certificatesZip?: string; + certificates?: { + key: string; + data: string; + }; + } + | { + deviceId?: never; + error: Error; + certificatesZip?: string; + certificates?: { + key: string; + data: string; + }; + }; export default abstract class CertificateProvider { abstract medium: CertificateExchangeMedium; abstract name: string; - verifyMedium(medium: CertificateExchangeMedium) { if (this.medium !== medium) { throw new Error(`${this.name} does not support medium ${medium}`); } } + private async stageFile( + destination: string, + filename: string, + contents: string, + ) { + const exists = await fs.pathExists(destination); + if (!exists) { + await fs.mkdir(destination); + } + try { + await fs.writeFile(path.join(destination, filename), contents); + return; + } catch (e) { + throw new Error( + `Failed to write ${filename} to specified destination. Error: ${e}`, + ); + } + } + async processCertificateSigningRequest( clientQuery: ClientQuery, - unsanitizedCsr: string, - appDirectory: string, - ): Promise<{deviceId: string}> { - const csr = this.santitizeString(unsanitizedCsr); + unsanitizedCSR: string, + sandboxDirectory: string, + ): Promise { + const temporaryDirectory = await promisify(tmp.dir)(); + const certificatesDirectory = path.join( + temporaryDirectory, + `flipper-certificates`, + ); + const certificatesZipDirectory = path.join( + temporaryDirectory, + 'flipper-certificates.zip', + ); + + const csr = this.santitizeString(unsanitizedCSR); if (csr === '') { const msg = `Received empty CSR from ${clientQuery.os} device`; recorder.logError(clientQuery, msg); @@ -43,54 +113,92 @@ export default abstract class CertificateProvider { recorder.log(clientQuery, 'Ensure OpenSSL is available'); await ensureOpenSSLIsAvailable(); + recorder.log(clientQuery, 'Extract bundle identifier from CSR'); + const bundleId = await extractBundleIdFromCSR(csr); + recorder.log(clientQuery, 'Obtain CA certificate'); - const caCert = await getCACertificate(); - - recorder.log(clientQuery, 'Deploy CA certificate to application sandbox'); - await this.deployOrStageFileForDevice( - clientQuery, - appDirectory, - deviceCAcertFile, - caCert, - csr, - ); + const caCertificate = await getCACertificate(); + this.stageFile(certificatesDirectory, deviceCAcertFile, caCertificate); recorder.log(clientQuery, 'Generate client certificate'); - const clientCert = await generateClientCertificate(csr); - - recorder.log( - clientQuery, - 'Deploy client certificate to application sandbox', - ); - await this.deployOrStageFileForDevice( - clientQuery, - appDirectory, + const clientCertificate = await generateClientCertificate(csr); + this.stageFile( + certificatesDirectory, deviceClientCertFile, - clientCert, - csr, + clientCertificate, ); - recorder.log(clientQuery, 'Extract application name from CSR'); - const bundleId = await extractBundleIdFromCSR(csr); + const compressCertificatesBundle = new Promise((resolve, reject) => { + const output = fs.createWriteStream(certificatesZipDirectory); + const archive = archiver('zip', { + zlib: {level: 9}, // Sets the compression level. + }); + archive.directory(certificatesDirectory, false); + output.on('close', function () { + resolve(certificatesZipDirectory); + }); + archive.on('warning', reject); + archive.on('error', reject); + archive.pipe(output); + archive.finalize(); + }); - recorder.log( - clientQuery, - 'Get target device from CSR and application name', - ); - const deviceId = await this.getTargetDeviceId( - clientQuery, - bundleId, - appDirectory, - csr, - ); + await compressCertificatesBundle; - recorder.log( - clientQuery, - `Finished processing CSR, device identifier is '${deviceId}'`, + const encryptedCertificates = await ephemeralEncryption( + certificatesZipDirectory, ); - return { - deviceId, - }; + + try { + recorder.log( + clientQuery, + 'Get target device from CSR and bundle identifier', + ); + const deviceId = await this.getTargetDeviceId( + clientQuery, + bundleId, + sandboxDirectory, + csr, + ); + + recorder.log(clientQuery, 'Deploy CA certificate to application sandbox'); + await this.deployOrStageFileForDevice( + clientQuery, + sandboxDirectory, + deviceCAcertFile, + caCertificate, + csr, + ); + + recorder.log( + clientQuery, + 'Deploy client certificate to application sandbox', + ); + await this.deployOrStageFileForDevice( + clientQuery, + sandboxDirectory, + deviceClientCertFile, + clientCertificate, + csr, + ); + + recorder.log( + clientQuery, + `Finished processing CSR, device identifier is '${deviceId}'`, + ); + + return { + deviceId, + certificates: encryptedCertificates, + certificatesZip: certificatesZipDirectory, + }; + } catch (error) { + return { + error, + certificates: encryptedCertificates, + certificatesZip: certificatesZipDirectory, + }; + } } abstract getTargetDeviceId( diff --git a/desktop/flipper-server/src/app-connectivity/certificate-exchange/certificate-utils.tsx b/desktop/flipper-server/src/app-connectivity/certificate-exchange/certificate-utils.tsx index 216f7b57925..66c5786b493 100644 --- a/desktop/flipper-server/src/app-connectivity/certificate-exchange/certificate-utils.tsx +++ b/desktop/flipper-server/src/app-connectivity/certificate-exchange/certificate-utils.tsx @@ -8,6 +8,7 @@ */ import {promisify} from 'util'; +import crypto from 'crypto'; import fs from 'fs-extra'; import os from 'os'; import { @@ -209,6 +210,28 @@ const generateServerCertificate = async (): Promise => { }); }; +export interface EphemeralEncryptionResult { + data: string; + key: string; +} +export const ephemeralEncryption = async ( + path: string, +): Promise => { + const algorithm = 'aes-256-cbc'; + const key = crypto.randomBytes(32); + const iv = crypto.randomBytes(16); + + const fileContent = await fs.readFile(path); + + const cipher = crypto.createCipheriv(algorithm, Buffer.from(key), iv); + const encrypted = Buffer.concat([cipher.update(fileContent), cipher.final()]); + + return { + data: Buffer.concat([iv, encrypted]).toString('base64'), + key: key.toString('base64'), + }; +}; + const ensureCertificateAuthorityExists = async (): Promise => { if (!(await fs.pathExists(caKey))) { return generateCertificateAuthority(); @@ -256,7 +279,7 @@ const checkCertIsValid = async (filename: string): Promise => { const expiryDate = Date.parse(dateString); if (isNaN(expiryDate)) { console.error( - 'Unable to parse certificate expiry date: ' + endDateOutput, + `Unable to parse certificate expiry date: ${endDateOutput}`, ); throw new Error( 'Cannot parse certificate expiry date. Assuming it has expired.', diff --git a/desktop/flipper-server/src/devices/android/AndroidCertificateProvider.tsx b/desktop/flipper-server/src/devices/android/AndroidCertificateProvider.tsx index 0d2ebaa0fcb..d02d453f274 100644 --- a/desktop/flipper-server/src/devices/android/AndroidCertificateProvider.tsx +++ b/desktop/flipper-server/src/devices/android/AndroidCertificateProvider.tsx @@ -137,6 +137,6 @@ export default class AndroidCertificateProvider extends CertificateProvider { ].map((s) => this.santitizeString(s)); const isMatch = sanitizedDeviceCsr === sanitizedClientCsr; - return {isMatch: isMatch, foundCsr: sanitizedDeviceCsr}; + return {isMatch, foundCsr: sanitizedDeviceCsr}; } } diff --git a/desktop/flipper-server/src/devices/android/AndroidCrashUtils.tsx b/desktop/flipper-server/src/devices/android/AndroidCrashUtils.tsx index 6271f4cc181..b25c94241e3 100644 --- a/desktop/flipper-server/src/devices/android/AndroidCrashUtils.tsx +++ b/desktop/flipper-server/src/devices/android/AndroidCrashUtils.tsx @@ -31,8 +31,8 @@ export function parseAndroidCrash(content: string, logDate?: Date) { } const crash: CrashLog = { callstack: content, - name: name, - reason: reason, + name, + reason, date: logDate?.getTime(), }; return crash; @@ -85,7 +85,7 @@ export class AndroidCrashWatcher extends DeviceListener { shouldParseAndroidLog(entry, referenceDate) ) { if (androidLogUnderProcess) { - androidLog += '\n' + entry.message; + androidLog += `\n${entry.message}`; androidLog = androidLog.trim(); if (timer) { clearTimeout(timer); diff --git a/desktop/flipper-server/src/devices/android/AndroidDevice.tsx b/desktop/flipper-server/src/devices/android/AndroidDevice.tsx index dee90d1e210..fb082132947 100644 --- a/desktop/flipper-server/src/devices/android/AndroidDevice.tsx +++ b/desktop/flipper-server/src/devices/android/AndroidDevice.tsx @@ -247,7 +247,7 @@ export default class AndroidDevice if (!isValid) { const outputMessage = output.toString().trim(); throw new Error( - 'Recording was not properly started: \n' + outputMessage, + `Recording was not properly started: \n${outputMessage}`, ); } }) diff --git a/desktop/flipper-server/src/devices/android/androidDeviceManager.tsx b/desktop/flipper-server/src/devices/android/androidDeviceManager.tsx index 337f98672a0..9e4c67c6f42 100644 --- a/desktop/flipper-server/src/devices/android/androidDeviceManager.tsx +++ b/desktop/flipper-server/src/devices/android/androidDeviceManager.tsx @@ -116,7 +116,7 @@ export class AndroidDeviceManager { message.includes('device still connecting') || message.includes('device still authorizing') ) { - console.log('[conn] Device still connecting: ' + device.id); + console.log(`[conn] Device still connecting: ${device.id}`); } else { const isAuthorizationError = message.includes('device unauthorized'); if (!isAuthorizationError) { @@ -124,10 +124,10 @@ export class AndroidDeviceManager { } this.flipperServer.emit('notification', { type: 'error', - title: 'Could not connect to ' + device.id, + title: `Could not connect to ${device.id}`, description: isAuthorizationError ? 'Make sure to authorize debugging on the phone' - : 'Failed to setup connection: ' + message, + : `Failed to setup connection: ${message}`, }); } resolve(undefined); // not ready yet, we will find it in the next tick diff --git a/desktop/flipper-server/src/devices/ios/IOSBridge.tsx b/desktop/flipper-server/src/devices/ios/IOSBridge.tsx index b6162d1fa3f..0e7a3911a88 100644 --- a/desktop/flipper-server/src/devices/ios/IOSBridge.tsx +++ b/desktop/flipper-server/src/devices/ios/IOSBridge.tsx @@ -150,9 +150,9 @@ export class IDBBridge implements IOSBridge { await this._execIdb(`install ${ipaPath} --udid ${serial}`); } - async openApp(serial: string, name: string): Promise { - console.log(`Opening app via IDB ${name} ${serial}`); - await this._execIdb(`launch ${name} --udid ${serial} -f`); + async openApp(serial: string, bundleId: string): Promise { + console.log(`Opening app via IDB ${bundleId} ${serial}`); + await this._execIdb(`launch --udid ${serial} ${bundleId} -f`); } async getActiveDevices(bootedOnly: boolean): Promise { @@ -326,7 +326,7 @@ function getLogExtraArgs(deviceType: DeviceType) { } function makeTempScreenshotFilePath() { - const imageName = uuid() + '.png'; + const imageName = `${uuid()}.png`; return path.join(getFlipperServerConfig().paths.tempPath, imageName); } diff --git a/desktop/flipper-server/src/devices/ios/iOSCertificateProvider.tsx b/desktop/flipper-server/src/devices/ios/iOSCertificateProvider.tsx index ea89e0d8768..b80ab9a1079 100644 --- a/desktop/flipper-server/src/devices/ios/iOSCertificateProvider.tsx +++ b/desktop/flipper-server/src/devices/ios/iOSCertificateProvider.tsx @@ -23,8 +23,6 @@ import {isFBBuild} from '../../fb-stubs/constants'; const tmpDir = promisify(tmp.dir) as (options?: DirOptions) => Promise; -const logTag = 'iOSCertificateProvider'; - // eslint-disable-next-line @typescript-eslint/naming-convention export default class iOSCertificateProvider extends CertificateProvider { name = 'iOSCertificateProvider'; @@ -56,6 +54,7 @@ export default class iOSCertificateProvider extends CertificateProvider { recorder.logError(clientQuery, 'No devices found'); throw new Error('No iOS devices found'); } + let isPhysicalDevice = false; const deviceMatchList = targets.map(async (target) => { try { const isMatch = await this.iOSDeviceHasMatchingCSR( @@ -65,17 +64,15 @@ export default class iOSCertificateProvider extends CertificateProvider { appName, csr, ); + if (!isPhysicalDevice) { + isPhysicalDevice = target.type === 'physical'; + } return {id: target.udid, isMatch}; } catch (e) { recorder.logError( clientQuery, 'Unable to find a matching device for the incoming request', ); - console.warn( - `[conn] Unable to check for matching CSR in ${target.udid}:${appName}`, - logTag, - e, - ); return {id: target.udid, isMatch: false}; } }); @@ -83,7 +80,7 @@ export default class iOSCertificateProvider extends CertificateProvider { const matchingIds = devices.filter((m) => m.isMatch).map((m) => m.id); if (matchingIds.length == 0) { let error = `No matching device found for app: ${appName}.`; - if (clientQuery.medium === 'FS_ACCESS' && isFBBuild) { + if (clientQuery.medium === 'FS_ACCESS' && isPhysicalDevice && isFBBuild) { error += ` If you are using a physical device and a non-locally built app (i.e. Mobile Build), please make sure WWW certificate exchange is enabled in your app.`; } @@ -136,7 +133,7 @@ export default class iOSCertificateProvider extends CertificateProvider { if (matches && matches.length === 2) { return matches[1]; } - throw new Error("Path didn't match expected pattern: " + absolutePath); + throw new Error(`Path didn't match expected pattern: ${absolutePath}`); } private async pushFileToiOSDevice( diff --git a/desktop/flipper-server/src/devices/ios/iOSDeviceManager.tsx b/desktop/flipper-server/src/devices/ios/iOSDeviceManager.tsx index 9b98d29366d..45f53277111 100644 --- a/desktop/flipper-server/src/devices/ios/iOSDeviceManager.tsx +++ b/desktop/flipper-server/src/devices/ios/iOSDeviceManager.tsx @@ -197,6 +197,20 @@ export class IOSDeviceManager { try { const bridge = await this.getBridge(); await bridge.launchSimulator(udid); + } catch (e) { + if (e.killed === true && e.signal === 'SIGTERM') { + throw new Error('Failed to launch simulator: command timeout'); + } else { + console.warn('Failed to launch simulator:', e); + throw e; + } + } + } + + async launchApp(udid: string, bundleId: string) { + try { + const bridge = await this.getBridge(); + await bridge.openApp(udid, bundleId); } catch (e) { console.warn('Failed to launch simulator:', e); } @@ -269,10 +283,9 @@ function confirmSimulatorAppMatchesThatOfXcodeSelect( if (runningSimulatorApp.startsWith(xcodeCLIVersion)) { continue; } - return ( - runningSimulatorApp.split('/Contents/Developer')[0] + - '/Contents/Developer' - ); + return `${ + runningSimulatorApp.split('/Contents/Developer')[0] + }/Contents/Developer`; } return undefined; } diff --git a/desktop/flipper-server/src/devices/metro/metroDeviceManager.tsx b/desktop/flipper-server/src/devices/metro/metroDeviceManager.tsx index 8677fbccfa0..628fa1e6a41 100644 --- a/desktop/flipper-server/src/devices/metro/metroDeviceManager.tsx +++ b/desktop/flipper-server/src/devices/metro/metroDeviceManager.tsx @@ -38,7 +38,7 @@ async function isMetroRunning(): Promise { }) .on('error', (err: any) => { if (err.code !== 'ECONNREFUSED' && err.code !== 'ECONNRESET') { - console.warn('Could not connect to METRO ' + err); + console.warn(`Could not connect to METRO ${err}`); } resolve(false); }); diff --git a/desktop/doctor/src/environmentInfo.tsx b/desktop/flipper-server/src/doctor/environmentInfo.tsx similarity index 100% rename from desktop/doctor/src/environmentInfo.tsx rename to desktop/flipper-server/src/doctor/environmentInfo.tsx diff --git a/desktop/doctor/src/fb-stubs/validateSelectedXcodeVersion.tsx b/desktop/flipper-server/src/doctor/fb-stubs/validateSelectedXcodeVersion.tsx similarity index 83% rename from desktop/doctor/src/fb-stubs/validateSelectedXcodeVersion.tsx rename to desktop/flipper-server/src/doctor/fb-stubs/validateSelectedXcodeVersion.tsx index 185020e92bb..5ac03187519 100644 --- a/desktop/doctor/src/fb-stubs/validateSelectedXcodeVersion.tsx +++ b/desktop/flipper-server/src/doctor/fb-stubs/validateSelectedXcodeVersion.tsx @@ -11,6 +11,8 @@ import {FlipperDoctor} from 'flipper-common'; export async function validateSelectedXcodeVersion( _selectedPath: string, + _availableXcode: string | null, + _subchecks: FlipperDoctor.HealthcheckRunSubcheck[], ): Promise { return { hasProblem: false, diff --git a/desktop/doctor/src/globals.d.ts b/desktop/flipper-server/src/doctor/globals.d.ts similarity index 100% rename from desktop/doctor/src/globals.d.ts rename to desktop/flipper-server/src/doctor/globals.d.ts diff --git a/desktop/doctor/src/index.tsx b/desktop/flipper-server/src/doctor/index.tsx similarity index 70% rename from desktop/doctor/src/index.tsx rename to desktop/flipper-server/src/doctor/index.tsx index a8ca1298030..24dbc09fe9f 100644 --- a/desktop/doctor/src/index.tsx +++ b/desktop/flipper-server/src/doctor/index.tsx @@ -10,7 +10,6 @@ import {exec} from 'child_process'; import os from 'os'; import {promisify} from 'util'; -import {getEnvInfo} from './environmentInfo'; export {getEnvInfo} from './environmentInfo'; import * as watchman from 'fb-watchman'; @@ -20,7 +19,9 @@ import type {FlipperDoctor} from 'flipper-common'; import * as fs_extra from 'fs-extra'; import {validateSelectedXcodeVersion} from './fb-stubs/validateSelectedXcodeVersion'; -export function getHealthchecks(): FlipperDoctor.Healthchecks { +export function getHealthchecks( + isProduction: boolean, +): FlipperDoctor.Healthchecks { return { common: { label: 'Common', @@ -40,19 +41,24 @@ export function getHealthchecks(): FlipperDoctor.Healthchecks { }; }, }, - { - key: 'common.watchman', - label: 'Watchman Installed', - run: async (_: FlipperDoctor.EnvironmentInfo) => { - const isAvailable = await isWatchmanAvailable(); - return { - hasProblem: !isAvailable, - message: isAvailable - ? ['common.watchman--installed'] - : ['common.watchman--not_installed'], - }; - }, - }, + + ...(!isProduction + ? [ + { + key: 'common.watchman', + label: 'Watchman Installed', + run: async (_: FlipperDoctor.EnvironmentInfo) => { + const isAvailable = await isWatchmanAvailable(); + return { + hasProblem: !isAvailable, + message: isAvailable + ? ['common.watchman--installed'] + : ['common.watchman--not_installed'], + }; + }, + } as FlipperDoctor.Healthcheck, + ] + : []), ], }, android: { @@ -69,6 +75,7 @@ export function getHealthchecks(): FlipperDoctor.Healthchecks { run: async ( _: FlipperDoctor.EnvironmentInfo, ): Promise => { + // eslint-disable-next-line node/no-sync const hasProblem = !fs.existsSync( '/Applications/Android Studio.app', ); @@ -100,6 +107,7 @@ export function getHealthchecks(): FlipperDoctor.Healthchecks { hasProblem: true, message: ['android.sdk--no_ANDROID_HOME'], }; + // eslint-disable-next-line node/no-sync } else if (!fs.existsSync(androidHome)) { const androidStudioAndroidHome = `${os.homedir()}/Library/Android/sdk`; const globalAndroidHome = '/opt/android_sdk'; @@ -119,6 +127,7 @@ export function getHealthchecks(): FlipperDoctor.Healthchecks { }; } else { const platformToolsDir = path.join(androidHome, 'platform-tools'); + // eslint-disable-next-line node/no-sync if (!fs.existsSync(platformToolsDir)) { return { hasProblem: true, @@ -159,6 +168,66 @@ export function getHealthchecks(): FlipperDoctor.Healthchecks { isRequired: false, isSkipped: false, healthchecks: [ + { + key: 'ios.idb', + label: 'IDB installed', + isRequired: true, + run: async ( + _: FlipperDoctor.EnvironmentInfo, + settings?: {enablePhysicalIOS: boolean; idbPath: string}, + ): Promise => { + if (!settings) { + return { + hasProblem: false, + message: ['ios.idb--no_context'], + }; + } + if (!settings.enablePhysicalIOS) { + return { + hasProblem: false, + message: ['ios.idb--physical_device_disabled'], + }; + } + const result = await tryExecuteCommand( + `${settings?.idbPath} --help`, + ); + if (result.fail) { + const hasIdbInPath = await tryExecuteCommand(`which idb`); + + if (!hasIdbInPath.fail) { + return { + hasProblem: true, + message: [ + 'ios.idb--not_installed_but_present', + { + idbPath: settings.idbPath, + idbInPath: hasIdbInPath.stdout.trim(), + }, + ], + }; + } + const hasIdbCompanion = await tryExecuteCommand( + 'which idb_companion', + ); + + return { + hasProblem: true, + message: [ + 'ios.idb--not_installed', + { + idbPath: settings.idbPath, + hasIdbCompanion: !hasIdbCompanion.fail, + }, + ], + }; + } + + return { + hasProblem: false, + message: ['ios.idb--installed'], + }; + }, + }, { key: 'ios.xcode', label: 'XCode Installed', @@ -192,37 +261,87 @@ export function getHealthchecks(): FlipperDoctor.Healthchecks { run: async ( _: FlipperDoctor.EnvironmentInfo, ): Promise => { - // TODO check for an existing Xcode + const subchecks: FlipperDoctor.HealthcheckRunSubcheck[] = []; + const allApps = + await fs_extra.promises.readdir('/Applications'); + // Xcode_14.2.0_xxxxxxx.app + // Xcode_14.3.1_xxxxxxxxxx.app + // Xcode_15.0.0_xxxxxxxxxx.app + // Xcode.app + const latestXCode = allApps + .filter((a) => a.startsWith('Xcode')) + .sort() + .pop(); + const availableXcode = latestXCode + ? path.join('/Applications', latestXCode) + : null; + subchecks.push({ + status: availableXcode ? 'ok' : 'fail', + title: 'Xcode in /Applications', + }); + const result = await tryExecuteCommand('xcode-select -p'); + subchecks.push({ + status: result.fail ? 'fail' : 'ok', + title: 'xcode-select runs successfully', + }); if (result.fail) { return { hasProblem: true, + subchecks, message: [ 'ios.xcode-select--not_set', - {message: result.message}, + {message: result.message, availableXcode}, ], }; } + const selectedXcode = result.stdout.toString().trim(); - if (selectedXcode == '/Library/Developer/CommandLineTools') { + const isSelectedXcodeCommandLineTools = + selectedXcode == '/Library/Developer/CommandLineTools'; + subchecks.push({ + status: isSelectedXcodeCommandLineTools ? 'fail' : 'ok', + title: + 'xcode-select does NOT point to "/Library/Developer/CommandLineTools"', + }); + if (isSelectedXcodeCommandLineTools) { return { hasProblem: true, - message: ['ios.xcode-select--no_xcode_selected'], + subchecks, + message: [ + 'ios.xcode-select--no_xcode_selected', + {availableXcode}, + ], }; } - if ((await fs_extra.pathExists(selectedXcode)) == false) { + + const selectedXcodeExists = + await fs_extra.pathExists(selectedXcode); + subchecks.push({ + status: selectedXcodeExists ? 'ok' : 'fail', + title: 'Selected Xcode exists', + }); + if (!selectedXcodeExists) { return { hasProblem: true, + subchecks, message: [ 'ios.xcode-select--nonexisting_selected', - {selected: selectedXcode}, + {selected: selectedXcode, availableXcode}, ], }; } const validatedXcodeVersion = - await validateSelectedXcodeVersion(selectedXcode); + await validateSelectedXcodeVersion( + selectedXcode, + availableXcode, + subchecks, + ); if (validatedXcodeVersion.hasProblem) { - return validatedXcodeVersion; + return { + ...validatedXcodeVersion, + subchecks, + }; } return { hasProblem: false, @@ -256,89 +375,79 @@ export function getHealthchecks(): FlipperDoctor.Healthchecks { }, }, { - key: 'ios.xctrace', - label: 'xctrace exists', + key: 'ios.has-simulators', + label: 'Simulators are available', isRequired: true, run: async ( - _: FlipperDoctor.EnvironmentInfo, + _e: FlipperDoctor.EnvironmentInfo, + settings?: {enablePhysicalIOS: boolean; idbPath: string}, ): Promise => { const result = await tryExecuteCommand( - 'xcrun xctrace version', + `${settings?.idbPath ?? 'idb'} list-targets --json`, ); if (result.fail) { return { hasProblem: true, message: [ - 'ios.xctrace--not_installed', - {message: result.message.trim()}, + 'ios.has-simulators--idb-failed', + {message: result.message}, ], }; } + + const devices = result.stdout + .trim() + .split('\n') + .map((x) => { + try { + return JSON.parse(x); + } catch (e) { + return null; + } + }) + .filter((x) => x != null && x.type === 'simulator'); + + if (devices.length === 0) { + return { + hasProblem: true, + message: ['ios.has-simulators--no-devices'], + }; + } + return { hasProblem: false, message: [ - 'ios.xctrace--installed', - {output: result.stdout.trim()}, + 'ios.has-simulators--ok', + {count: devices.length}, ], }; }, }, { - key: 'ios.idb', - label: 'IDB installed', - isRequired: false, + key: 'ios.xctrace', + label: 'xctrace exists', + isRequired: true, run: async ( _: FlipperDoctor.EnvironmentInfo, - settings?: {enablePhysicalIOS: boolean; idbPath: string}, ): Promise => { - if (!settings) { - return { - hasProblem: false, - message: ['ios.idb--no_context'], - }; - } - if (!settings.enablePhysicalIOS) { - return { - hasProblem: false, - message: ['ios.idb--physical_device_disabled'], - }; - } const result = await tryExecuteCommand( - `${settings?.idbPath} --help`, + 'xcrun xctrace version', ); - const hasIdbCompanion = - await tryExecuteCommand(`idbCompanion --help`); if (result.fail) { - const hasIdbInPath = await tryExecuteCommand(`which idb`); - - if (!hasIdbInPath.fail) { - return { - hasProblem: true, - message: [ - 'ios.idb--not_installed_but_present', - { - idbPath: settings.idbPath, - idbInPath: hasIdbInPath.stdout.trim(), - }, - ], - }; - } - return { hasProblem: true, message: [ - 'ios.idb--not_installed', - { - idbPath: settings.idbPath, - hasIdbCompanion: !hasIdbCompanion.fail, - }, + 'ios.xctrace--not_installed', + {message: result.message.trim()}, ], }; } - return { hasProblem: false, - message: ['ios.idb--installed'], + message: [ + 'ios.xctrace--installed', + {output: result.stdout.trim()}, + ], }; }, }, @@ -352,49 +461,6 @@ export function getHealthchecks(): FlipperDoctor.Healthchecks { }; } -export async function runHealthchecks(): Promise< - Array -> { - const environmentInfo = await getEnvInfo(); - const healthchecks: FlipperDoctor.Healthchecks = getHealthchecks(); - const results: Array< - FlipperDoctor.CategoryResult | FlipperDoctor.SkippedHealthcheckCategory - > = await Promise.all( - Object.entries(healthchecks).map(async ([key, category]) => { - if (category.isSkipped) { - return category; - } - const categoryResult: FlipperDoctor.CategoryResult = [ - key, - { - label: category.label, - results: await Promise.all( - category.healthchecks.map( - async ({key, label, run, isRequired}) => ({ - key, - label, - isRequired: isRequired ?? true, - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - result: await run!(environmentInfo).catch((e) => { - console.warn(`Health check ${key}/${label} failed with:`, e); - // TODO Improve result type to be: OK | Problem(message, fix...) - return { - hasProblem: true, - }; - }), - }), - ), - ), - }, - ]; - - return categoryResult; - }), - ); - return results; -} - async function tryExecuteCommand( command: string, ): Promise< diff --git a/desktop/flipper-server/src/fb-stubs/WWWCertificateProvider.tsx b/desktop/flipper-server/src/fb-stubs/WWWCertificateProvider.tsx index fc3ddb6ccd5..a0f82019f96 100644 --- a/desktop/flipper-server/src/fb-stubs/WWWCertificateProvider.tsx +++ b/desktop/flipper-server/src/fb-stubs/WWWCertificateProvider.tsx @@ -8,7 +8,9 @@ */ import {KeytarManager} from '../utils/keytar'; -import CertificateProvider from '../app-connectivity/certificate-exchange/CertificateProvider'; +import CertificateProvider, { + CertificateExchangeRequestResult, +} from '../app-connectivity/certificate-exchange/CertificateProvider'; export default class WWWCertificateProvider extends CertificateProvider { name = 'WWWCertificateProvider'; @@ -18,7 +20,7 @@ export default class WWWCertificateProvider extends CertificateProvider { super(); } - async processCertificateSigningRequest(): Promise<{deviceId: string}> { + async processCertificateSigningRequest(): Promise { throw new Error('WWWCertificateProvider is not implemented'); } diff --git a/desktop/flipper-server/src/logger.tsx b/desktop/flipper-server/src/logger.tsx index 413e1ba734d..c6543d181b0 100644 --- a/desktop/flipper-server/src/logger.tsx +++ b/desktop/flipper-server/src/logger.tsx @@ -7,72 +7,16 @@ * @format */ -import path from 'path'; -import { - addLogTailer, - EnvironmentInfo, - LoggerExtractError, - LoggerFormat, - LoggerTypes, - setLoggerInstance, -} from 'flipper-common'; -// @ts-expect-error -import fsRotator from 'file-stream-rotator'; -import {ensureFile} from 'fs-extra'; -import {access} from 'fs/promises'; -import {constants} from 'fs'; +import {EnvironmentInfo, setLoggerInstance} from 'flipper-common'; + import {initializeLogger as initializeLoggerCore} from './fb-stubs/Logger'; -import {setProcessExitRoutine} from './utils/processExit'; export const loggerOutputFile = 'flipper-server-log.out'; -export async function initializeLogger( - environmentInfo: EnvironmentInfo, - staticDir: string, -) { +export async function initializeLogger(environmentInfo: EnvironmentInfo) { // Suppress stdout debug messages, but keep writing them to the file. console.debug = function () {}; const logger = initializeLoggerCore(environmentInfo); setLoggerInstance(logger); - - const logFilename = path.join(staticDir, loggerOutputFile); - let logStream: NodeJS.WriteStream | undefined = undefined; - try { - await ensureFile(logFilename); - await access(logFilename, constants.W_OK); - logStream = fsRotator.getStream({ - // Rotation number is going to be added after the file name - filename: logFilename, - // Rotate every 1MB - size: '1m', - // Keep last 5 rotations - max_logs: 20, - }); - } catch (e) { - console.warn('initializeLogger -> cannot write logs to FS', e); - } - - addLogTailer((level: LoggerTypes, ...data: Array) => { - const logInfo = LoggerFormat(level, ...data); - logStream?.write(`[${logInfo.time}][${logInfo.type}] ${logInfo.msg}\n`); - - if (level === 'error') { - const { - error: {stack, name}, - } = LoggerExtractError(data); - - logStream?.write(`${name}: \n${stack}\n`); - } - }); - - const finalizeLogger = async () => { - const logStreamToEnd = logStream; - // Prevent future writes - logStream = undefined; - await new Promise((resolve) => { - logStreamToEnd?.end(resolve); - }); - }; - setProcessExitRoutine(finalizeLogger); } diff --git a/desktop/flipper-server/src/plugins/PluginManager.tsx b/desktop/flipper-server/src/plugins/PluginManager.tsx index 52cd969e2c3..ca7b7b2cd38 100644 --- a/desktop/flipper-server/src/plugins/PluginManager.tsx +++ b/desktop/flipper-server/src/plugins/PluginManager.tsx @@ -79,7 +79,7 @@ export class PluginManager { */ let css = undefined; const idx = path.lastIndexOf('.'); - const cssPath = path.substring(0, idx < 0 ? path.length : idx) + '.css'; + const cssPath = `${path.substring(0, idx < 0 ? path.length : idx)}.css`; try { await fs.promises.access(cssPath); @@ -130,7 +130,7 @@ export class PluginManager { tmpDir, `${getPluginDirNameFromPackageName(name)}-${version}.tgz`, ); - let finalError = null; + let finalError: Error | null = null; for (const downloadUrl of downloadUrls) { try { const cancelationSource = axios.CancelToken.source(); @@ -184,10 +184,6 @@ export class PluginManager { return await installPluginFromFileOrBuffer(tmpFile); } } catch (error) { - console.warn( - `Failed to download plugin "${title}" v${version} from "${downloadUrl}" to "${installationDir}".`, - error, - ); finalError = error; continue; } finally { @@ -195,6 +191,10 @@ export class PluginManager { } } + console.info( + `Failed to download plugin "${title}" v${version} from "${downloadUrls}" to "${installationDir}".`, + finalError, + ); throw finalError; } diff --git a/desktop/flipper-server/src/recorder.tsx b/desktop/flipper-server/src/recorder.tsx index 5b8497a72b9..63237f92215 100644 --- a/desktop/flipper-server/src/recorder.tsx +++ b/desktop/flipper-server/src/recorder.tsx @@ -31,8 +31,9 @@ type ConnectionRecorderEvents = { class Recorder { private flipperServer_: FlipperServerImpl | undefined; - private undefinedClientQuery_: ClientQuery = { + undefinedClientQuery_: ClientQuery = { app: 'NONE', + app_id: 'NONE', device: 'NONE', medium: 'NONE', os: 'Browser', @@ -71,7 +72,7 @@ class Recorder { }, }; - private log_ = ( + log_ = ( type: 'info' | 'warning' | 'error', clientQuery: ClientQuery, ...args: any[] diff --git a/desktop/flipper-server/src/server/startFlipperServer.tsx b/desktop/flipper-server/src/server/startFlipperServer.tsx index 243887fb008..6a4a905b80b 100644 --- a/desktop/flipper-server/src/server/startFlipperServer.tsx +++ b/desktop/flipper-server/src/server/startFlipperServer.tsx @@ -67,9 +67,9 @@ export async function startFlipperServer( appPath, homePath: os.homedir(), execPath, - staticPath: staticPath, + staticPath, tempPath: os.tmpdir(), - desktopPath: desktopPath, + desktopPath, }, launcherSettings, processConfig: loadProcessConfig(env), diff --git a/desktop/flipper-server/src/server/startServer.tsx b/desktop/flipper-server/src/server/startServer.tsx index a35d8f13de9..46c6ef0dbe9 100644 --- a/desktop/flipper-server/src/server/startServer.tsx +++ b/desktop/flipper-server/src/server/startServer.tsx @@ -167,7 +167,7 @@ async function startHTTPServer( debug: !isProduction(), graphSecret: GRAPH_SECRET, appVersion: environmentInfo.appVersion, - sessionId: sessionId, + sessionId, unixname: environmentInfo.os.unixname, authToken: token, }; diff --git a/desktop/flipper-server/src/startServer.tsx b/desktop/flipper-server/src/startServer.tsx index 8283407a473..132a9f80d55 100644 --- a/desktop/flipper-server/src/startServer.tsx +++ b/desktop/flipper-server/src/startServer.tsx @@ -122,7 +122,7 @@ async function start() { process.env.NODE_ENV !== 'development' && process.env.NODE_ENV !== 'test'; const environmentInfo = await getEnvironmentInfo(rootPath, isProduction); - await initializeLogger(environmentInfo, staticPath); + await initializeLogger(environmentInfo); const t1 = performance.now(); const loggerInitializedMS = t1 - t0; diff --git a/desktop/flipper-server/src/tracker.tsx b/desktop/flipper-server/src/tracker.tsx index 7ebf6f2fc46..e99530cc07a 100644 --- a/desktop/flipper-server/src/tracker.tsx +++ b/desktop/flipper-server/src/tracker.tsx @@ -58,6 +58,7 @@ type TrackerEvents = { 'app-connection-created': AppConnectionPayload; 'app-connection-secure-attempt': AppConnectionPayload; 'app-connection-insecure-attempt': AppConnectionPayload; + 'app-connection-insecure-attempt-fallback': AppConnectionPayload; 'app-connection-certificate-exchange': AppConnectionCertificateExchangePayload; }; diff --git a/desktop/flipper-server/src/utils/launcherSettings.tsx b/desktop/flipper-server/src/utils/launcherSettings.tsx index 38e24fa20f5..95467eb6793 100644 --- a/desktop/flipper-server/src/utils/launcherSettings.tsx +++ b/desktop/flipper-server/src/utils/launcherSettings.tsx @@ -36,7 +36,7 @@ function getLauncherSettingsFile(): string { const defaultLauncherSettings: LauncherSettings = { releaseChannel: ReleaseChannel.DEFAULT, - ignoreLocalPin: false, + ignoreLocalPin: true, }; interface FormattedSettings { diff --git a/desktop/flipper-server/src/utils/openFile.tsx b/desktop/flipper-server/src/utils/openFile.tsx index db9b56bb781..1801882592a 100644 --- a/desktop/flipper-server/src/utils/openFile.tsx +++ b/desktop/flipper-server/src/utils/openFile.tsx @@ -25,7 +25,7 @@ export async function openFile(path: string | null) { // Rather randomly chosen. Some FSs still reserve 8 bytes for empty files. // If this doesn't reliably catch "corrupt" files, you might want to increase this. if (fileStat.size <= 8) { - throw new Error('File seems to be (almost) empty: ' + path); + throw new Error(`File seems to be (almost) empty: ${path}`); } await open(path); diff --git a/desktop/flipper-server/src/utils/openUI.tsx b/desktop/flipper-server/src/utils/openUI.tsx index 7a4fcb51185..8c87cb094dd 100644 --- a/desktop/flipper-server/src/utils/openUI.tsx +++ b/desktop/flipper-server/src/utils/openUI.tsx @@ -31,12 +31,21 @@ export async function openUI(preference: UIPreference, port: number) { console.info(`[flipper-server] Go to: ${url.toString()}`); - open(url.toString(), {app: {name: open.apps.chrome}}); - - tracker.track('server-open-ui', { - browser: true, - hasToken: token?.length != 0, - }); + try { + const process = await open(url.toString(), { + app: {name: open.apps.chrome}, + }); + await new Promise((resolve, reject) => { + process.on('spawn', resolve); + process.on('error', reject); + }); + tracker.track('server-open-ui', { + browser: true, + hasToken: token?.length != 0, + }); + } catch (err: unknown) { + console.error('[flipper-server] Failed to open browser', err); + } }; if (preference === UIPreference.Browser) { diff --git a/desktop/flipper-server/src/utils/pathUtils.tsx b/desktop/flipper-server/src/utils/pathUtils.tsx index 14b32f30a05..bb51ed05b67 100644 --- a/desktop/flipper-server/src/utils/pathUtils.tsx +++ b/desktop/flipper-server/src/utils/pathUtils.tsx @@ -44,6 +44,6 @@ function getChangelogPath() { if (fs.existsSync(changelogPath)) { return changelogPath; } else { - throw new Error('Changelog path path does not exist: ' + changelogPath); + throw new Error(`Changelog path path does not exist: ${changelogPath}`); } } diff --git a/desktop/flipper-server/src/utils/runHealthchecks.tsx b/desktop/flipper-server/src/utils/runHealthchecks.tsx index 4a9165ed757..22f4362e80d 100644 --- a/desktop/flipper-server/src/utils/runHealthchecks.tsx +++ b/desktop/flipper-server/src/utils/runHealthchecks.tsx @@ -7,14 +7,14 @@ * @format */ -import {getHealthchecks, getEnvInfo} from 'flipper-doctor'; +import {getHealthchecks, getEnvInfo} from '../doctor'; import {FlipperDoctor} from 'flipper-common'; import produce from 'immer'; export async function getHealthChecks( options: FlipperDoctor.HealthcheckSettings, ) { - return produce(getHealthchecks(), (healthchecks) => { + return produce(getHealthchecks(options.isProduction), (healthchecks) => { if (!options.settings.enableAndroid) { healthchecks.android = { label: healthchecks.android.label, @@ -47,17 +47,17 @@ export async function runHealthcheck( categoryName: keyof FlipperDoctor.Healthchecks, ruleName: string, ): Promise { - const healthchecks = getHealthchecks(); + const healthchecks = getHealthchecks(options.isProduction); const category = healthchecks[categoryName]; if (!category) { - throw new Error('Unknown category: ' + categoryName); + throw new Error(`Unknown category: ${categoryName}`); } if (!('healthchecks' in category)) { - throw new Error('Skipped category: ' + categoryName); + throw new Error(`Skipped category: ${categoryName}`); } const check = category.healthchecks.find((h) => h.key === ruleName); if (!check) { - throw new Error('Unknown healthcheck: ' + ruleName); + throw new Error(`Unknown healthcheck: ${ruleName}`); } const envInfoPromise = getEnvInfo(); @@ -68,6 +68,7 @@ export async function runHealthcheck( return checkResult.hasProblem && check.isRequired ? { status: 'FAILED', + subchecks: checkResult.subchecks, message: checkResult.message, } : checkResult.hasProblem && !check.isRequired diff --git a/desktop/flipper-server/tsconfig.json b/desktop/flipper-server/tsconfig.json index 1d2ef734773..045fca6a95d 100644 --- a/desktop/flipper-server/tsconfig.json +++ b/desktop/flipper-server/tsconfig.json @@ -16,9 +16,6 @@ }, "include": ["./src/**/*"], "references": [ - { - "path": "../doctor" - }, { "path": "../flipper-common" }, diff --git a/desktop/flipper-ui/package.json b/desktop/flipper-ui/package.json index 0ed9244fa2b..448d079df81 100644 --- a/desktop/flipper-ui/package.json +++ b/desktop/flipper-ui/package.json @@ -17,6 +17,7 @@ "@nicksrandall/console-feed": "^3.5.0", "@tanishiking/aho-corasick": "^0.0.1", "antd": "^4.24", + "qrcode.react": "^3.1.0", "cbuffer": "^2.2.0", "deep-equal": "^2.2.2", "eventemitter3": "^4.0.7", @@ -71,7 +72,8 @@ "metro-runtime": "^0.70.2", "pretty-format": "^29.7.0", "react-refresh": "^0.14.0", - "redux-mock-store": "^1.0.1" + "redux-mock-store": "^1.0.1", + "ts-retry-promise": "^0.8.0" }, "peerDependencies": {}, "scripts": { diff --git a/desktop/flipper-ui/src/Client.tsx b/desktop/flipper-ui/src/Client.tsx index 934be5514ca..0dd22f3d920 100644 --- a/desktop/flipper-ui/src/Client.tsx +++ b/desktop/flipper-ui/src/Client.tsx @@ -33,7 +33,7 @@ import { createState, getFlipperLib, } from 'flipper-plugin'; -import {message} from 'antd'; +import {message, notification} from 'antd'; import { isFlipperMessageDebuggingEnabled, registerFlipperDebugMessage, @@ -45,6 +45,7 @@ import {EventEmitter} from 'eventemitter3'; import {createServerAddOnControls} from './utils/createServerAddOnControls'; import isProduction from './utils/isProduction'; import {freeze} from 'immer'; +import {retry} from 'ts-retry-promise'; type Plugins = Set; type PluginsArr = Array; @@ -128,7 +129,7 @@ export default class Client extends EventEmitter { string /*pluginKey*/, { plugin: _SandyPluginInstance; - messages: Params[]; + messages: (Params & {rawSize: number})[]; } > = {}; @@ -192,20 +193,30 @@ export default class Client extends EventEmitter { } async init() { - await this.loadPlugins('init'); - await Promise.all( - [...this.plugins].map(async (pluginId) => - this.startPluginIfNeeded(await this.getPlugin(pluginId)), - ), - ); - this.backgroundPlugins = new Set(await this.getBackgroundPlugins()); - this.backgroundPlugins.forEach((plugin) => { - if (this.shouldConnectAsBackgroundPlugin(plugin)) { - this.initPlugin(plugin); - } - }); - this.emit('plugins-change'); - this.resolveInitPromise?.(null); + try { + await this.loadPlugins('init'); + await Promise.all( + [...this.plugins].map(async (pluginId) => + this.startPluginIfNeeded(await this.getPlugin(pluginId)), + ), + ); + this.backgroundPlugins = new Set(await this.getBackgroundPlugins()); + this.backgroundPlugins.forEach((plugin) => { + if (this.shouldConnectAsBackgroundPlugin(plugin)) { + this.initPlugin(plugin); + } + }); + this.emit('plugins-change'); + this.resolveInitPromise?.(null); + } catch (e) { + this.flipperServer.exec( + 'log-connectivity-event', + 'error', + this.query, + `Failed to initialise client`, + e, + ); + } } async initFromImport( @@ -225,23 +236,50 @@ export default class Client extends EventEmitter { // get the supported plugins async loadPlugins(phase: 'init' | 'refresh'): Promise> { - let response; try { - response = await timeout( - 30 * 1000, - this.rawCall<{plugins: Plugins}>('getPlugins', false), - 'Fetch plugin timeout. Unresponsive client?', + const response = await retry( + () => + //shortish timeout for each individual request + timeout( + 5 * 1000, + this.rawCall<{plugins: Plugins}>('getPlugins', false), + 'Fetch plugin timeout. Unresponsive client?', + ), + { + retries: 5, + delay: 1000, + backoff: 'LINEAR', + logger: (msg) => + this.flipperServer.exec( + 'log-connectivity-event', + 'warning', + this.query, + `Attempt to fetch plugins failed for phase ${phase}, Error: ${msg}`, + ), + }, + ); + this.plugins = new Set(response.plugins ?? []); + console.info( + `Received plugins from '${this.query.app}' on device '${this.query.device}'`, + [...this.plugins], ); + if (phase === 'init') { + await this.waitForPluginsInit(); + } } catch (e) { - console.warn('Failed to fetch plugin', e); - } - this.plugins = new Set(response?.plugins ?? []); - console.info( - `Received plugins from '${this.query.app}' on device '${this.query.device}'`, - [...this.plugins], - ); - if (phase === 'init') { - await this.waitForPluginsInit(); + this.flipperServer.exec( + 'log-connectivity-event', + 'error', + this.query, + `Failed to fetch plugins for phase ${phase}`, + e, + ); + + notification.error({ + key: `plugin-init-error${this.id}`, + duration: 10, + message: `Failed to initialise client ${this.query.app}, please restart the app`, + }); } return this.plugins; } @@ -358,8 +396,12 @@ export default class Client extends EventEmitter { if (!data.params) { throw new Error('expected params'); } - const params: Params = data.params; + const bytes = msg.length * 2; // string lengths are measured in UTF-16 units (not characters), so 2 bytes per char + const params: Params & {rawSize: number} = { + ...data.params, + rawSize: bytes, + }; this.emit('bytes-received', params.api, bytes); if (bytes > 5 * 1024 * 1024) { console.warn( @@ -557,7 +599,7 @@ export default class Client extends EventEmitter { const data = await timeout( 30 * 1000, this.rawCall<{plugins: PluginsArr}>('getBackgroundPlugins', false), - 'Fetch background plugins timeout for ' + this.id, + `Fetch background plugins timeout for ${this.id}`, ); return data.plugins; } diff --git a/desktop/flipper-ui/src/__tests__/PluginContainer.node.tsx b/desktop/flipper-ui/src/__tests__/PluginContainer.node.tsx index bffb3489f89..cc305f752ae 100644 --- a/desktop/flipper-ui/src/__tests__/PluginContainer.node.tsx +++ b/desktop/flipper-ui/src/__tests__/PluginContainer.node.tsx @@ -80,7 +80,7 @@ afterAll(() => { infoSpy.mockRestore(); }); -test('Plugin container can render plugin and receive updates', async () => { +test.skip('Plugin container can render plugin and receive updates', async () => { const {renderer, sendMessage, act} = await renderMockFlipperWithPlugin(TestPlugin); expect(renderer.baseElement).toMatchInlineSnapshot(` @@ -124,13 +124,26 @@ test('Plugin container can render plugin and receive updates', async () => { expect((await renderer.findByTestId('counter')).textContent).toBe('2'); }); -test('Number of times console errors/warning during plugin render', async () => { +// TODO(T119353406): Disabled due to flakiness. +test.skip('Number of times console errors/warning during plugin render', async () => { await renderMockFlipperWithPlugin(TestPlugin); expect(errorSpy.mock.calls).toEqual([ [ "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot", ], + [ + 'The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type".', + ], + [ + 'The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type".', + ], + [ + 'The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type".', + ], + [ + 'The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type".', + ], ]); expect(warnSpy.mock.calls).toEqual([]); expect(infoSpy.mock.calls).toEqual([ @@ -567,7 +580,7 @@ test('PluginContainer triggers correct lifecycles for background plugin', async ((client as any).rawSend as jest.Mock).mockClear(); }); -test('PluginContainer + Sandy plugin supports deeplink', async () => { +test.skip('PluginContainer + Sandy plugin supports deeplink', async () => { const linksSeen: any[] = []; const plugin = (client: PluginClient) => { @@ -742,7 +755,7 @@ test('PluginContainer + Sandy plugin supports deeplink', async () => { expect(linksSeen).toEqual(['universe!', 'london!', 'london!']); }); -test('PluginContainer can render Sandy device plugins', async () => { +test.skip('PluginContainer can render Sandy device plugins', async () => { let renders = 0; function MySandyPlugin() { @@ -909,7 +922,7 @@ test('PluginContainer can render Sandy device plugins', async () => { expect(pluginInstance.deactivatedStub).toBeCalledTimes(1); }); -test('PluginContainer + Sandy device plugin supports deeplink', async () => { +test.skip('PluginContainer + Sandy device plugin supports deeplink', async () => { const linksSeen: any[] = []; const devicePlugin = (client: DevicePluginClient) => { @@ -1217,7 +1230,7 @@ test('Sandy plugins support isPluginSupported + selectPlugin', async () => { expect(renders).toBe(2); }); -test('PluginContainer can render Sandy plugins for archived devices', async () => { +test.skip('PluginContainer can render Sandy plugins for archived devices', async () => { let renders = 0; function MySandyPlugin() { diff --git a/desktop/flipper-ui/src/__tests__/__snapshots__/createMockFlipperWithPlugin.node.tsx.snap b/desktop/flipper-ui/src/__tests__/__snapshots__/createMockFlipperWithPlugin.node.tsx.snap index 6557297c71a..6bc86648b12 100644 --- a/desktop/flipper-ui/src/__tests__/__snapshots__/createMockFlipperWithPlugin.node.tsx.snap +++ b/desktop/flipper-ui/src/__tests__/__snapshots__/createMockFlipperWithPlugin.node.tsx.snap @@ -7,6 +7,7 @@ exports[`can create a Fake flipper with legacy wrapper 1`] = ` "id": "TestApp#Android#MockAndroidDevice#serial", "query": { "app": "TestApp", + "app_id": "TestApp", "device": "MockAndroidDevice", "device_id": "serial", "medium": "NONE", diff --git a/desktop/flipper-ui/src/__tests__/deeplink.node.tsx b/desktop/flipper-ui/src/__tests__/deeplink.node.tsx index ddad9cc3c65..25d02719f54 100644 --- a/desktop/flipper-ui/src/__tests__/deeplink.node.tsx +++ b/desktop/flipper-ui/src/__tests__/deeplink.node.tsx @@ -22,7 +22,7 @@ import { import {handleDeeplink} from '../deeplink'; import {Logger} from 'flipper-common'; -test('Triggering a deeplink will work', async () => { +test.skip('Triggering a deeplink will work', async () => { const linksSeen: any[] = []; const plugin = (client: PluginClient) => { @@ -132,7 +132,7 @@ test('Will throw error on invalid protocol', async () => { ); }); -test('Will track deeplinks', async () => { +test.skip('Will track deeplinks', async () => { const definition = new _SandyPluginDefinition( TestUtils.createMockPluginDetails(), { diff --git a/desktop/flipper-ui/src/__tests__/test-utils/MockFlipper.tsx b/desktop/flipper-ui/src/__tests__/test-utils/MockFlipper.tsx index ee68fa72506..98e66aceee0 100644 --- a/desktop/flipper-ui/src/__tests__/test-utils/MockFlipper.tsx +++ b/desktop/flipper-ui/src/__tests__/test-utils/MockFlipper.tsx @@ -171,6 +171,7 @@ export default class MockFlipper { } query = query ?? { app: name ?? `serial_${++this._clientCounter}`, + app_id: name ?? 'NONE', os: 'Android', device: device.title, device_id: device.serial, diff --git a/desktop/flipper-ui/src/__tests__/test-utils/createMockFlipperWithPlugin.tsx b/desktop/flipper-ui/src/__tests__/test-utils/createMockFlipperWithPlugin.tsx index 975a4189acf..1fca6729575 100644 --- a/desktop/flipper-ui/src/__tests__/test-utils/createMockFlipperWithPlugin.tsx +++ b/desktop/flipper-ui/src/__tests__/test-utils/createMockFlipperWithPlugin.tsx @@ -245,7 +245,7 @@ export async function createMockFlipperWithPlugin( store.getState().plugins.devicePlugins.get(id) : pluginClazz; if (!plugin) { - throw new Error('unknown plugin ' + id); + throw new Error(`unknown plugin ${id}`); } store.dispatch( switchPlugin({ diff --git a/desktop/flipper-ui/src/app-connection-updates.tsx b/desktop/flipper-ui/src/app-connection-updates.tsx index 36543ce074e..786a30e5fde 100644 --- a/desktop/flipper-ui/src/app-connection-updates.tsx +++ b/desktop/flipper-ui/src/app-connection-updates.tsx @@ -8,13 +8,16 @@ */ import {css} from '@emotion/css'; -import {Button, message, notification, Typography} from 'antd'; +import {Button, message, Modal, notification, Typography} from 'antd'; import React from 'react'; import {Layout} from './ui'; +import {Dialog} from 'flipper-plugin'; +import {getFlipperServer} from './flipperServer'; type ConnectionUpdate = { key: string; type: 'loading' | 'info' | 'success' | 'success-info' | 'error' | 'warning'; + os: string; app: string; device: string; title: string; @@ -92,14 +95,150 @@ export const connectionUpdate = ( if (update.detail) { content += `\n ${update.detail}`; } + let duration = 0; + if (update.type === 'success' || update.type === 'success-info') { + duration = 3; + } else if (update.type === 'loading') { + // seconds until show how to debug hanging connection + duration = 30; + } message.open({ key: update.key, type: update.type === 'success-info' ? 'info' : update.type, content, className, - duration: - update.type === 'success' || update.type === 'success-info' ? 3 : 0, - onClick: () => message.destroy(update.key), + duration, + onClick: + update.type !== 'loading' + ? () => { + message.destroy(update.key); + } + : undefined, + // NOTE: `onClose` is only called when the message is closed by antd because of `duration` + // It is not closed when we call `message.destroy(key)`. + // Thus we can use it trigger a timeout modal for hanging "attempting to connect" messages + onClose: () => { + if (update.type === 'loading') { + Dialog.showModal((hide) => ( + + )); + } + }, }); } }; + +const styles = { + numberedList: { + listStyle: 'auto', + paddingLeft: 16, + display: 'flex', + flexDirection: 'column', + gap: 4, + } satisfies React.CSSProperties, + title: { + marginBottom: 8, + } satisfies React.CSSProperties, +}; + +function DIYConnectivityFixModal({ + app, + os, + onHide, +}: { + app: string; + os: string; + onHide: () => void; +}) { + return ( + +
+ + Connecting to {app} has timed out. + + + This is usually can be fixed in a few ways. Try the following in the + order presented. + + + Least involved + +
    +
  1. + + Completly close the app on the device + +
    2. +
  2. + +
    3. +
  3. + Launch the app on the device +
    4. +
+ + More involved + +
    +
  1. + Restart device +
    2. +
  2. + +
    3. +
+ + Most involved + + + This can be frequently fixed by restarting your computer. + +
+ + ); +} diff --git a/desktop/flipper-ui/src/chrome/ConsoleLogs.tsx b/desktop/flipper-ui/src/chrome/ConsoleLogs.tsx index ee7911ca79a..c1f24928b69 100644 --- a/desktop/flipper-ui/src/chrome/ConsoleLogs.tsx +++ b/desktop/flipper-ui/src/chrome/ConsoleLogs.tsx @@ -41,7 +41,7 @@ type ConsoleFeedLogMessage = { export function enableConsoleHook() { addLogTailer((level, ...data) => { - const logMessage = {method: level, data: data, id: v4()}; + const logMessage = {method: level, data, id: v4()}; exportLogs.push(logMessage); if (level === 'debug') { diff --git a/desktop/flipper-ui/src/chrome/ExportDataPluginSheet.tsx b/desktop/flipper-ui/src/chrome/ExportDataPluginSheet.tsx index 8d2b109c5ce..09bbac53c81 100644 --- a/desktop/flipper-ui/src/chrome/ExportDataPluginSheet.tsx +++ b/desktop/flipper-ui/src/chrome/ExportDataPluginSheet.tsx @@ -37,7 +37,7 @@ class ExportDataPluginSheet extends Component { { this.props.setSelectedPlugins(selectedArray); diff --git a/desktop/flipper-ui/src/chrome/FlipperSetupWizard.tsx b/desktop/flipper-ui/src/chrome/FlipperSetupWizard.tsx index 5e5c07e816e..1fd462d0a8a 100644 --- a/desktop/flipper-ui/src/chrome/FlipperSetupWizard.tsx +++ b/desktop/flipper-ui/src/chrome/FlipperSetupWizard.tsx @@ -131,12 +131,15 @@ export function FlipperSetupWizard({ return 'init'; } }); - const loginState = useStore((store) => - store.user.id != null ? 'success' : 'init', - ); + const user = useStore((store) => store.user); + const loginState: StepState = user?.id != null ? 'success' : 'init'; const dispatch = useDispatch(); const isLastOptionalStep = currentStep === 'pwa'; const closable = isLastOptionalStep ? true : closableProp ?? closableState; + const onClose = () => { + onHide(); + localStorage.setItem(SETUP_WIZARD_FINISHED_LOCAL_STORAGE_KEY, 'true'); + }; const content = useMemo(() => { switch (currentStep) { case 'platform': @@ -147,7 +150,14 @@ export function FlipperSetupWizard({ return {}} />; case 'login': return loginState === 'success' ? ( - You are logged in + + Logged in as{' '} + {' '} + {user.name} + ) : ( { @@ -157,7 +167,7 @@ export function FlipperSetupWizard({ /> ); case 'pwa': - return ; + return ; } }, [currentStep, loginState, onHide]); const title = useMemo(() => { @@ -195,10 +205,6 @@ export function FlipperSetupWizard({ // eslint-disable-next-line react-hooks/exhaustive-deps [], ); - const onClose = () => { - onHide(); - localStorage.setItem(SETUP_WIZARD_FINISHED_LOCAL_STORAGE_KEY, 'true'); - }; return ( { let selectedElements: Set = new Set([]); if (this.props.type === 'single') { if (!selected) { - this.setState({selectedElements: selectedElements}); + this.setState({selectedElements}); this.props.onChange([...selectedElements]); } else { selectedElements.add(id); - this.setState({selectedElements: selectedElements}); + this.setState({selectedElements}); this.props.onChange([...selectedElements]); } } else { diff --git a/desktop/flipper-ui/src/chrome/NetworkGraph.tsx b/desktop/flipper-ui/src/chrome/NetworkGraph.tsx index 1749663b9e2..c20551c013d 100644 --- a/desktop/flipper-ui/src/chrome/NetworkGraph.tsx +++ b/desktop/flipper-ui/src/chrome/NetworkGraph.tsx @@ -50,11 +50,10 @@ export default function NetworkGraph() { ctx.fillText(`${kiloBytesPerSecond} kB/s`, 0, height - 4); setHoverText( - 'Total data traffic per plugin:\n\n' + - Object.entries(pluginStats.current) - .sort(([_p, bytes], [_p2, bytes2]) => bytes2 - bytes) - .map(([key, bytes]) => `${key}: ${Math.round(bytes / 1000)}kb`) - .join('\n'), + `Total data traffic per plugin:\n\n${Object.entries(pluginStats.current) + .sort(([_p, bytes], [_p2, bytes2]) => bytes2 - bytes) + .map(([key, bytes]) => `${key}: ${Math.round(bytes / 1000)}kb`) + .join('\n')}`, ); }, 1000); diff --git a/desktop/flipper-ui/src/chrome/PlatformSelectWizard.tsx b/desktop/flipper-ui/src/chrome/PlatformSelectWizard.tsx index 95ac6001199..cc955121220 100644 --- a/desktop/flipper-ui/src/chrome/PlatformSelectWizard.tsx +++ b/desktop/flipper-ui/src/chrome/PlatformSelectWizard.tsx @@ -14,7 +14,12 @@ import ToggledSection from './settings/ToggledSection'; import {isEqual} from 'lodash'; import {reportUsage, Settings} from 'flipper-common'; import {Button, Typography} from 'antd'; -import {Layout, withTrackingScope, _NuxManagerContext} from 'flipper-plugin'; +import { + getFlipperLib, + Layout, + withTrackingScope, + _NuxManagerContext, +} from 'flipper-plugin'; import {getFlipperServer, getFlipperServerConfig} from '../flipperServer'; import {useStore} from '../utils/useStore'; @@ -49,7 +54,14 @@ export const PlatformSelectWizard = withTrackingScope( return flush().then(() => { if (!settingsPristine) { reportUsage('platformwizard:action:changed'); - getFlipperServer().exec('shutdown'); + if ( + getFlipperLib().environmentInfo.os.platform === 'darwin' && + getFlipperLib().isFB + ) { + getFlipperServer().exec('restart'); + } else { + getFlipperServer().exec('shutdown'); + } window.close(); } else { reportUsage('platformwizard:action:noop'); @@ -100,7 +112,7 @@ export const PlatformSelectWizard = withTrackingScope( onClick={() => applyChanges(settingsPristine)} disabled={settingsPristine} title={settingsPristine ? 'No changes made' : ''}> - Save changes and kill Flipper + Save changes and {platform === 'darwin' ? 'restart' : 'kill'} Flipper ); diff --git a/desktop/flipper-ui/src/chrome/ScreenCaptureButtons.tsx b/desktop/flipper-ui/src/chrome/ScreenCaptureButtons.tsx index 3ef9d8ec710..037de8a31dd 100644 --- a/desktop/flipper-ui/src/chrome/ScreenCaptureButtons.tsx +++ b/desktop/flipper-ui/src/chrome/ScreenCaptureButtons.tsx @@ -36,7 +36,7 @@ export function NavbarScreenshotButton() { .then(openFile) .catch((e) => { console.error('Taking screenshot failed:', e); - message.error('Taking screenshot failed:' + e); + message.error(`Taking screenshot failed:${e}`); }) .finally(() => { setIsTakingScreenshot(false); @@ -70,7 +70,7 @@ export function NavbarScreenRecordButton() { const videoPath = path.join(getCaptureLocation(), getFileName('mp4')); return selectedDevice.startScreenCapture(videoPath).catch((e) => { console.warn('Failed to start recording', e); - message.error('Failed to start recording' + e); + message.error(`Failed to start recording${e}`); setIsRecording(false); }); } else { @@ -83,7 +83,7 @@ export function NavbarScreenRecordButton() { }) .catch((e) => { console.warn('Failed to stop recording', e); - message.error('Failed to stop recording' + e); + message.error(`Failed to stop recording${e}`); }) .finally(() => { setIsRecording(false); diff --git a/desktop/flipper-ui/src/chrome/SettingsSheet.tsx b/desktop/flipper-ui/src/chrome/SettingsSheet.tsx index 44180efe95d..8db9ad1b0a2 100644 --- a/desktop/flipper-ui/src/chrome/SettingsSheet.tsx +++ b/desktop/flipper-ui/src/chrome/SettingsSheet.tsx @@ -45,6 +45,7 @@ import {getFlipperServer, getFlipperServerConfig} from '../flipperServer'; type OwnProps = { onHide: () => void; platform: Platform; + isFB: boolean; noModal?: boolean; // used for testing }; @@ -84,7 +85,12 @@ class SettingsSheet extends Component { this.props.onHide(); await flush(); await sleep(1000); - getFlipperServer().exec('shutdown'); + if (this.props.platform === 'darwin' && this.props.isFB) { + getFlipperServer().exec('restart'); + } else { + getFlipperServer().exec('shutdown'); + } + window.close(); }; applyChangesWithoutRestart = async () => { @@ -358,7 +364,8 @@ class SettingsSheet extends Component { disabled={settingsPristine} type="primary" onClick={this.applyChanges}> - Apply and Restart + Apply and{' '} + {this.props.platform === 'darwin' ? 'Restart' : 'Quit Flipper'} ); diff --git a/desktop/flipper-ui/src/chrome/ShareSheetExportUrl.tsx b/desktop/flipper-ui/src/chrome/ShareSheetExportUrl.tsx deleted file mode 100644 index a2a60ccfbac..00000000000 --- a/desktop/flipper-ui/src/chrome/ShareSheetExportUrl.tsx +++ /dev/null @@ -1,224 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -import {FlexColumn, styled, Text, FlexRow, Spacer, Input} from '../ui'; -import React, {Component} from 'react'; -import {ReactReduxContext, ReactReduxContextValue} from 'react-redux'; -import {Logger} from 'flipper-common'; -import {IdlerImpl} from '../utils/Idler'; -import { - DataExportResult, - DataExportError, - shareFlipperData, -} from '../fb-stubs/user'; -import { - exportStore, - EXPORT_FLIPPER_TRACE_EVENT, - displayFetchMetadataErrors, -} from '../utils/exportData'; -import ShareSheetErrorList from './ShareSheetErrorList'; -import {reportPlatformFailures} from 'flipper-common'; -import ShareSheetPendingDialog from './ShareSheetPendingDialog'; -import {getLogger} from 'flipper-common'; -import {MiddlewareAPI} from '../reducers/index'; -import {getFlipperLib, Layout} from 'flipper-plugin'; -import {Button, Modal} from 'antd'; - -export const SHARE_FLIPPER_TRACE_EVENT = 'share-flipper-link'; - -const Copy = styled(Input)({ - marginRight: 0, - marginBottom: 15, -}); - -const InfoText = styled(Text)({ - lineHeight: 1.35, - marginBottom: 15, -}); - -const Title = styled(Text)({ - marginBottom: 6, -}); - -const ErrorMessage = styled(Text)({ - display: 'block', - marginTop: 6, - wordBreak: 'break-all', - whiteSpace: 'pre-line', - lineHeight: 1.35, -}); - -type Props = { - onHide: () => any; - logger: Logger; -}; - -type State = { - fetchMetaDataErrors: { - [plugin: string]: Error; - } | null; - result: DataExportError | DataExportResult | null; - statusUpdate: string | null; -}; - -export default class ShareSheetExportUrl extends Component { - static contextType: React.Context = ReactReduxContext; - - state: State = { - fetchMetaDataErrors: null, - result: null, - statusUpdate: null, - }; - - get store(): MiddlewareAPI { - return this.context.store; - } - - idler = new IdlerImpl(); - - async componentDidMount() { - const mark = 'shareSheetExportUrl'; - performance.mark(mark); - try { - const statusUpdate = (msg: string) => { - this.setState({statusUpdate: msg}); - }; - const {serializedString, fetchMetaDataErrors} = - await reportPlatformFailures( - exportStore(this.store, false, this.idler, statusUpdate), - `${EXPORT_FLIPPER_TRACE_EVENT}:UI_LINK`, - ); - const uploadMarker = `${EXPORT_FLIPPER_TRACE_EVENT}:upload`; - performance.mark(uploadMarker); - statusUpdate('Uploading Flipper Export...'); - const result = await reportPlatformFailures( - shareFlipperData(serializedString), - `${SHARE_FLIPPER_TRACE_EVENT}`, - ); - - if ((result as DataExportError).error != undefined) { - const res = result as DataExportError; - const err = new Error(res.error); - err.stack = res.stacktrace; - throw err; - } - getLogger().trackTimeSince(uploadMarker, uploadMarker, { - plugins: this.store.getState().plugins.selectedPlugins, - }); - const flipperUrl = (result as DataExportResult).flipperUrl; - if (flipperUrl) { - getFlipperLib().writeTextToClipboard(String(flipperUrl)); - new Notification('Shareable Flipper Export created', { - body: 'URL copied to clipboard', - requireInteraction: true, - }); - } - this.setState({fetchMetaDataErrors, result}); - this.props.logger.trackTimeSince(mark, 'export:url-success'); - } catch (e) { - const result: DataExportError = { - error_class: 'EXPORT_ERROR', - error: e, - stacktrace: '', - }; - if (e instanceof Error) { - result.error = e.message; - result.stacktrace = e.stack || ''; - } - // Show the error in UI. - this.setState({result}); - this.props.logger.trackTimeSince(mark, 'export:url-error', result); - console.error('Failed to export to flipper trace', e); - } - } - - componentDidUpdate() { - const {result} = this.state; - if (!result || !(result as DataExportResult).flipperUrl) { - return; - } - } - - cancelAndHide = () => { - this.props.onHide(); - this.idler.cancel(); - }; - - renderPending(statusUpdate: string | null) { - return ( - - - - ); - } - - render() { - const {result, statusUpdate, fetchMetaDataErrors} = this.state; - if (!result) { - return this.renderPending(statusUpdate); - } - - const {title, errorArray} = displayFetchMetadataErrors(fetchMetaDataErrors); - return ( - - - <> - - {(result as DataExportResult).flipperUrl ? ( - <> - Data Upload Successful - - Flipper's data was successfully uploaded. This URL can be - used to share with other Flipper users. Opening it will - import the data from your export. - - - - When sharing your Flipper link, consider that the captured - data might contain sensitve information like access tokens - used in network requests. - - - - ) : ( - <> - - {(result as DataExportError).error_class || 'Error'} - - - {(result as DataExportError).error || - 'The data could not be uploaded'} - - - )} - - - - - - - - - ); - } -} diff --git a/desktop/flipper-ui/src/chrome/UpdateIndicator.tsx b/desktop/flipper-ui/src/chrome/UpdateIndicator.tsx index d693db1d97b..f65bba87af0 100644 --- a/desktop/flipper-ui/src/chrome/UpdateIndicator.tsx +++ b/desktop/flipper-ui/src/chrome/UpdateIndicator.tsx @@ -146,11 +146,10 @@ export function getUpdateAvailableMessage(versionCheckResult: { <> {' '} Run arc pull (optionally with --latest) in{' '} - ~/fbsource and{' '} + ~/fbsource, then{' '} - . ) ) : ( diff --git a/desktop/flipper-ui/src/deeplink.tsx b/desktop/flipper-ui/src/deeplink.tsx index cbe88eeddcb..bbbd43a9dfa 100644 --- a/desktop/flipper-ui/src/deeplink.tsx +++ b/desktop/flipper-ui/src/deeplink.tsx @@ -47,7 +47,7 @@ export async function handleDeeplink( // or alternatively flipper://welcome to open the welcome screen. return; } - if (uri.href.startsWith('flipper://open-plugin')) { + if (uri.pathname === '//open-plugin') { return handleOpenPluginDeeplink(store, query, trackInteraction); } if (uri.pathname.match(/^\/*import\/*$/)) { @@ -63,7 +63,7 @@ export async function handleDeeplink( console.warn('Failed to download Flipper trace', e); message.error({ duration: 0, - content: 'Failed to download Flipper trace: ' + e, + content: `Failed to download Flipper trace: ${e}`, }); }) .finally(() => { diff --git a/desktop/flipper-ui/src/dispatcher/__tests__/handleOpenPluginDeeplink.node.tsx b/desktop/flipper-ui/src/dispatcher/__tests__/handleOpenPluginDeeplink.node.tsx index 494c53466cb..2258da31eda 100644 --- a/desktop/flipper-ui/src/dispatcher/__tests__/handleOpenPluginDeeplink.node.tsx +++ b/desktop/flipper-ui/src/dispatcher/__tests__/handleOpenPluginDeeplink.node.tsx @@ -40,9 +40,9 @@ afterEach(() => { test('open-plugin deeplink parsing', () => { const testpayload = 'http://www.google/?test=c o%20o+l'; - const testLink = - 'flipper://open-plugin?plugin-id=graphql&client=facebook&devices=android,ios&chrome=1&payload=' + - encodeURIComponent(testpayload); + const testLink = `flipper://open-plugin?plugin-id=graphql&client=facebook&devices=android,ios&chrome=1&payload=${encodeURIComponent( + testpayload, + )}`; const res = parseOpenPluginParams(testLink); expect(res).toEqual({ pluginId: 'graphql', @@ -69,7 +69,7 @@ test('open-plugin deeplink parsing - 3', () => { ).toThrowErrorMatchingInlineSnapshot(`"Missing plugin-id param"`); }); -test('Triggering a deeplink will work', async () => { +test.skip('Triggering a deeplink will work', async () => { const linksSeen: any[] = []; const plugin = (client: PluginClient) => { @@ -163,7 +163,7 @@ test('Triggering a deeplink will work', async () => { ); }); -test('triggering a deeplink without applicable device can wait for a device', async () => { +test.skip('triggering a deeplink without applicable device can wait for a device', async () => { let lastOS: string = ''; const definition = TestUtils.createTestDevicePlugin( { @@ -250,7 +250,7 @@ test('triggering a deeplink without applicable device can wait for a device', as expect(lastOS).toBe('iOS'); }); -test('triggering a deeplink without applicable client can wait for a device', async () => { +test.skip('triggering a deeplink without applicable client can wait for a device', async () => { const definition = TestUtils.createTestPlugin( { Component() { @@ -332,7 +332,7 @@ test('triggering a deeplink without applicable client can wait for a device', as `); }); -test('triggering a deeplink with incompatible device will cause bail', async () => { +test.skip('triggering a deeplink with incompatible device will cause bail', async () => { const definition = TestUtils.createTestDevicePlugin( { Component() { diff --git a/desktop/flipper-ui/src/dispatcher/application.tsx b/desktop/flipper-ui/src/dispatcher/application.tsx index 7578dd28b29..8c8814634e3 100644 --- a/desktop/flipper-ui/src/dispatcher/application.tsx +++ b/desktop/flipper-ui/src/dispatcher/application.tsx @@ -47,7 +47,7 @@ export default (store: Store, logger: Logger) => { const isFocused = document.hasFocus(); store.dispatch({ type: 'windowIsFocused', - payload: {isFocused: isFocused, time: Date.now()}, + payload: {isFocused, time: Date.now()}, }); }); diff --git a/desktop/flipper-ui/src/dispatcher/flipperServer.tsx b/desktop/flipper-ui/src/dispatcher/flipperServer.tsx index 4b3ca999abb..bc31d325dc5 100644 --- a/desktop/flipper-ui/src/dispatcher/flipperServer.tsx +++ b/desktop/flipper-ui/src/dispatcher/flipperServer.tsx @@ -20,7 +20,7 @@ import { buildGenericClientIdFromQuery, } from 'flipper-common'; import Client from '../Client'; -import {Button, notification} from 'antd'; +import {Button, Modal, notification} from 'antd'; import BaseDevice from '../devices/BaseDevice'; import {ClientDescription, timeout} from 'flipper-common'; import {reportPlatformFailures} from 'flipper-common'; @@ -30,6 +30,7 @@ import {NotificationBody} from '../ui/components/NotificationBody'; import {Layout} from '../ui'; import {toggleConnectivityModal} from '../reducers/application'; import {connectionUpdate} from '../app-connection-updates'; +import {QRCodeSVG} from 'qrcode.react'; export function connectFlipperServerToStore( server: FlipperServer, @@ -48,7 +49,7 @@ export function connectFlipperServerToStore( server.on('server-error', (err) => { if (err.code === 'EADDRINUSE') { - handeEADDRINUSE('' + err); + handeEADDRINUSE(`${err}`); } else { const text = err.message ?? err; notification.error({ @@ -69,6 +70,23 @@ export function connectFlipperServerToStore( handleDeviceDisconnected(store, logger, deviceInfo); }); + server.on('device-removed', (deviceInfo) => { + const device = store + .getState() + .connections.devices.find((d) => d.serial === deviceInfo.serial); + + if (device) { + if (device.connected) { + device.disconnect(); + } + + store.dispatch({ + type: 'UNREGISTER_DEVICE', + payload: device, + }); + } + }); + server.on('client-setup', (client) => { store.dispatch({ type: 'START_CLIENT_SETUP', @@ -84,6 +102,7 @@ export function connectFlipperServerToStore( type: 'loading', app: client.appName, device: client.deviceName, + os: client.os, title: 'is attempting to connect...', }, troubleshootConnection, @@ -95,6 +114,7 @@ export function connectFlipperServerToStore( { key: buildGenericClientId(client), type, + os: client.os, app: client.appName, device: client.deviceName, title: 'failed to establish a connection', @@ -104,12 +124,46 @@ export function connectFlipperServerToStore( ); }); + type ModalType = { + destroy: () => void; + }; + const modals: Map = new Map(); + const secretExchangeKeyWithId = (id: string) => + `client-setup-secret-exchange-${id}`; + server.on('client-setup-secret-exchange', ({client, secret}) => { + // An option is given to dismiss the attempt by the current app for the + // current session. So, check if the user has decided to opt-out before + // showing the QR modal. + const key = secretExchangeKeyWithId(buildGenericClientId(client)); + if (sessionStorage.getItem(key) !== null) { + return; + } + + // Find and dismiss any existing QR modal. + let secretExchangeModal = modals.get(key); + secretExchangeModal?.destroy(); + + secretExchangeModal = Modal.confirm({ + title: `${client.appName} is trying to connect. Please use your device to scan the QR code.`, + centered: true, + width: 350, + content: , + onCancel() { + sessionStorage.setItem(key, ''); + }, + onOk() {}, + cancelText: 'Dismiss for the session', + }); + modals.set(key, secretExchangeModal); + }); + server.on('client-setup-step', ({client, step}) => { connectionUpdate( { key: buildGenericClientId(client), type: 'info', app: client.appName, + os: client.os, device: client.deviceName, title: step, }, @@ -118,6 +172,12 @@ export function connectFlipperServerToStore( }); server.on('client-connected', (payload: ClientDescription) => { + const key = secretExchangeKeyWithId( + buildGenericClientIdFromQuery(payload.query), + ); + const secretExchangeModal = modals.get(key); + secretExchangeModal?.destroy(); + handleClientConnected(server, store, logger, payload); connectionUpdate( { @@ -125,6 +185,7 @@ export function connectFlipperServerToStore( type: 'success', app: payload.query.app, device: payload.query.device, + os: payload.query.os, title: 'successfully connected', }, troubleshootConnection, @@ -141,6 +202,7 @@ export function connectFlipperServerToStore( key: buildGenericClientIdFromQuery(existingClient.query), type: 'success-info', app: existingClient.query.app, + os: existingClient.query.os, device: existingClient.query.device, title: 'disconnected', }, @@ -251,7 +313,7 @@ function handleServerStateChange({ notification.error({ key: `server-${state}-error`, message: 'Failed to start flipper-server', - description: '' + error, + description: `${error}`, duration: null, }); } @@ -304,8 +366,11 @@ export function handleDeviceConnected( `Tried to replace still connected device '${existing.serial}' with a new instance.`, ); } - if (store.getState().settingsState.persistDeviceData) { - //Recycle device + if ( + existing.deviceType !== 'dummy' && + store.getState().settingsState.persistDeviceData + ) { + // Recycle device existing?.connected.set(true); store.dispatch({ type: 'SELECT_DEVICE', diff --git a/desktop/flipper-ui/src/dispatcher/handleOpenPluginDeeplink.tsx b/desktop/flipper-ui/src/dispatcher/handleOpenPluginDeeplink.tsx index 112dba10e50..5d65c5ba8bb 100644 --- a/desktop/flipper-ui/src/dispatcher/handleOpenPluginDeeplink.tsx +++ b/desktop/flipper-ui/src/dispatcher/handleOpenPluginDeeplink.tsx @@ -418,7 +418,7 @@ async function verifyPluginStatus( break; } default: - throw new Error('Unhandled state: ' + status); + throw new Error(`Unhandled state: ${status}`); } } } @@ -623,7 +623,7 @@ async function launchDeviceDialog( message: (

To open the current deeplink for plugin {params.pluginId} a device{' '} - {params.devices.length ? ' of type ' + params.devices.join(', ') : ''}{' '} + {params.devices.length ? ` of type ${params.devices.join(', ')}` : ''}{' '} should be up and running. No device was found. Please connect a device or launch an emulator / simulator.

diff --git a/desktop/flipper-ui/src/dispatcher/plugins.tsx b/desktop/flipper-ui/src/dispatcher/plugins.tsx index 2884e22c585..855f5501314 100644 --- a/desktop/flipper-ui/src/dispatcher/plugins.tsx +++ b/desktop/flipper-ui/src/dispatcher/plugins.tsx @@ -190,7 +190,7 @@ export const requirePluginInternal = async ( // Note that we use 'eval', and not 'new Function', because the latter will cause the source maps // to be off by two lines (as the function declaration uses two lines in the generated source) // eslint-disable-next-line no-eval - const cjsLoader = eval('(module) => {' + js + '\n}'); + const cjsLoader = eval(`(module) => {${js}\n}`); const theModule = {exports: {}}; cjsLoader(theModule); diff --git a/desktop/flipper-ui/src/dispatcher/tracking.tsx b/desktop/flipper-ui/src/dispatcher/tracking.tsx index 08f7cb653c3..4f0d33e23c9 100644 --- a/desktop/flipper-ui/src/dispatcher/tracking.tsx +++ b/desktop/flipper-ui/src/dispatcher/tracking.tsx @@ -358,7 +358,7 @@ export function persistExitData( return; } const exitData: ExitData = { - lastSeen: '' + Date.now(), + lastSeen: `${Date.now()}`, deviceOs: state.selectedDevice ? state.selectedDevice.os : '', deviceType: state.selectedDevice ? state.selectedDevice.deviceType : '', deviceTitle: state.selectedDevice ? state.selectedDevice.title : '', diff --git a/desktop/flipper-ui/src/fb-stubs/constants.tsx b/desktop/flipper-ui/src/fb-stubs/constants.tsx index 501d88ea1d5..da1e3b8571e 100644 --- a/desktop/flipper-ui/src/fb-stubs/constants.tsx +++ b/desktop/flipper-ui/src/fb-stubs/constants.tsx @@ -12,9 +12,6 @@ import {DeviceOS} from 'flipper-plugin'; export default Object.freeze({ IS_PUBLIC_BUILD: true, - // Enables the flipper data to be exported through shareabale link - ENABLE_SHAREABLE_LINK: false, - FEEDBACK_GROUP_LINK: 'https://github.com/facebook/flipper/issues', // Workplace Group ID's diff --git a/desktop/flipper-ui/src/index.tsx b/desktop/flipper-ui/src/index.tsx index c2823413733..0ac9cc7f31e 100644 --- a/desktop/flipper-ui/src/index.tsx +++ b/desktop/flipper-ui/src/index.tsx @@ -45,6 +45,30 @@ let cachedDeepLinkURL: string | undefined; const logger = initLogger(); +const maybeDeepLinkURLFromSearchParams = (searchParams: URLSearchParams) => { + const deepLink = searchParams.get('deep-link'); + if (deepLink) { + function removePrefix(input: string, prefix: string): string { + const regex = new RegExp(`^${prefix}+`); + return input.replace(regex, ''); + } + + const url = new URL(deepLink); + const hostname = removePrefix(url.pathname, '/'); + const params = url.searchParams; + + const deeplinkURL = new URL(`flipper://${hostname.toString()}`); + deeplinkURL.search = params.toString(); + + return deeplinkURL.toString(); + } +}; + +const maybeDeepLinkURLFromURL = (url: string) => { + const searchParams = new URL(url).searchParams; + return maybeDeepLinkURLFromSearchParams(searchParams); +}; + async function start() { /** * The following is used to ensure only one instance of Flipper is running at a time. @@ -100,9 +124,7 @@ async function start() { token, ); window.flipperShowMessage?.({ - detail: - '[flipper-client][ui-browser] Failed to get token from HTML: ' + - token, + detail: `[flipper-client][ui-browser] Failed to get token from HTML: ${token}`, }); } } @@ -116,21 +138,9 @@ async function start() { return token; }; - const openPlugin = params.get('open-plugin'); - if (openPlugin) { - function removePrefix(input: string, prefix: string): string { - const regex = new RegExp(`^${prefix}+`); - return input.replace(regex, ''); - } - - const url = new URL(openPlugin); - const maybeParams = removePrefix(url.pathname, '/'); - const params = new URLSearchParams(maybeParams); - - const deeplinkURL = new URL('flipper://open-plugin'); - deeplinkURL.search = params.toString(); - - cachedDeepLinkURL = deeplinkURL.toString(); + const deepLinkURL = maybeDeepLinkURLFromSearchParams(params); + if (deepLinkURL) { + cachedDeepLinkURL = deepLinkURL.toString(); } getLogger().info('[flipper-client][ui-browser] Create WS client'); @@ -214,7 +224,7 @@ start().catch((e) => { error: getStringFromErrorLike(e), pwa: window.matchMedia('(display-mode: standalone)').matches, }); - window.flipperShowMessage?.({detail: 'Failed to start UI with error: ' + e}); + window.flipperShowMessage?.({detail: `Failed to start UI with error: ${e}`}); }); async function initializePWA() { @@ -261,20 +271,33 @@ async function initializePWA() { // @ts-ignore window.launchQueue.setConsumer(async (launchParams) => { - if (!launchParams || !launchParams.files) { + if (!launchParams) { return; } - getLogger().debug('[PWA] Attempt to to open a file'); - for (const file of launchParams.files) { - const blob = await file.getFile(); - blob.handle = file; + if (launchParams.files && launchParams.files.length > 0) { + getLogger().debug('[PWA] Attempt to to open a file'); + for (const file of launchParams.files) { + const blob = await file.getFile(); + blob.handle = file; + + const data = await blob.text(); + const name = file.name; - const data = await blob.text(); - const name = file.name; + cachedFile = {name, data}; - cachedFile = {name, data}; + openFileIfAny(); + return; + } + } - openFileIfAny(); + if (launchParams.targetURL) { + getLogger().debug('[PWA] Attempt to to open an URL'); + const deepLinkURL = maybeDeepLinkURLFromURL(launchParams.targetURL); + if (deepLinkURL) { + cachedDeepLinkURL = deepLinkURL.toString(); + } + openURLIfAny(); + return; } }); } else { diff --git a/desktop/flipper-ui/src/reducers/__tests__/sandydeviceplugins.node.tsx b/desktop/flipper-ui/src/reducers/__tests__/sandydeviceplugins.node.tsx index 602cfc1a65e..d7c632bf65b 100644 --- a/desktop/flipper-ui/src/reducers/__tests__/sandydeviceplugins.node.tsx +++ b/desktop/flipper-ui/src/reducers/__tests__/sandydeviceplugins.node.tsx @@ -37,8 +37,8 @@ function devicePlugin(client: DevicePluginClient) { initialized = true; return { - activateStub: activateStub, - deactivateStub: deactivateStub, + activateStub, + deactivateStub, destroyStub, }; } diff --git a/desktop/flipper-ui/src/reducers/connections.tsx b/desktop/flipper-ui/src/reducers/connections.tsx index 10f11c178b7..23b0904b5b3 100644 --- a/desktop/flipper-ui/src/reducers/connections.tsx +++ b/desktop/flipper-ui/src/reducers/connections.tsx @@ -91,6 +91,10 @@ export type Action = type: 'REGISTER_DEVICE'; payload: BaseDevice; } + | { + type: 'UNREGISTER_DEVICE'; + payload: BaseDevice; + } | { type: 'SELECT_DEVICE'; payload: BaseDevice; @@ -259,6 +263,40 @@ export default (state: State = INITAL_STATE, action: Actions): State => { }; } + case 'UNREGISTER_DEVICE': { + const {payload} = action; + + const newDevices = state.devices.slice(); + const existing = state.devices.findIndex( + (device) => device.serial === payload.serial, + ); + if (existing !== -1) { + const d = newDevices[existing]; + if (d.connected.get()) { + throw new Error( + `Cannot unregister, '${d.serial}' as is still connected`, + ); + } + newDevices.splice(existing, 1); + } + + let selectedNewDevice: BaseDevice | null = null; + let selectedNewAppId: null | string = null; + if (newDevices.length > 0) { + selectedNewDevice = newDevices[0]; + selectedNewAppId = + getAllClients(state).find((c) => c.device === selectedNewDevice) + ?.id ?? null; + } + + return { + ...state, + devices: newDevices, + selectedDevice: selectedNewDevice, + selectedAppId: selectedNewAppId, + }; + } + case 'SELECT_PLUGIN': { const {selectedPlugin, selectedAppId, deepLinkPayload} = action.payload; @@ -293,7 +331,7 @@ export default (state: State = INITAL_STATE, action: Actions): State => { state.userPreferredApp, selectedPlugin, userPreferredPlugin: selectedPlugin, - deepLinkPayload: deepLinkPayload, + deepLinkPayload, }; } diff --git a/desktop/flipper-ui/src/reducers/pluginDownloads.tsx b/desktop/flipper-ui/src/reducers/pluginDownloads.tsx index 795377105eb..f1a3f76b51f 100644 --- a/desktop/flipper-ui/src/reducers/pluginDownloads.tsx +++ b/desktop/flipper-ui/src/reducers/pluginDownloads.tsx @@ -78,7 +78,7 @@ export default function reducer( return produce(state, (draft) => { draft[installationDir] = { plugin, - startedByUser: startedByUser, + startedByUser, status: PluginDownloadStatus.QUEUED, }; }); @@ -130,5 +130,5 @@ export const pluginDownloadFinished = (payload: { }): Action => ({type: 'PLUGIN_DOWNLOAD_FINISHED', payload}); function getDownloadKey(name: string, version: string) { - return name.replace('/', '__') + '@' + version; + return `${name.replace('/', '__')}@${version}`; } diff --git a/desktop/flipper-ui/src/reducers/pluginMessageQueue.tsx b/desktop/flipper-ui/src/reducers/pluginMessageQueue.tsx index f41ca77da89..eb6cf90aecd 100644 --- a/desktop/flipper-ui/src/reducers/pluginMessageQueue.tsx +++ b/desktop/flipper-ui/src/reducers/pluginMessageQueue.tsx @@ -14,6 +14,8 @@ export const DEFAULT_MAX_QUEUE_SIZE = 10000; export type Message = { method: string; + /** raw size of message in bytes */ + rawSize: number; params?: any; }; diff --git a/desktop/flipper-ui/src/sandy-chrome/ContentContainer.tsx b/desktop/flipper-ui/src/sandy-chrome/ContentContainer.tsx index 6bcbd52b2bc..8f7cabd897a 100644 --- a/desktop/flipper-ui/src/sandy-chrome/ContentContainer.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/ContentContainer.tsx @@ -14,7 +14,6 @@ export const ContentContainer = styled(Layout.Container)({ flex: 1, overflow: 'hidden', background: theme.backgroundDefault, - border: `1px solid ${theme.dividerColor}`, borderRadius: theme.containerBorderRadius, boxShadow: `0px 0px 5px rgba(0, 0, 0, 0.05), 0px 0px 1px rgba(0, 0, 0, 0.05)`, }); diff --git a/desktop/flipper-ui/src/sandy-chrome/DesignComponentDemos.tsx b/desktop/flipper-ui/src/sandy-chrome/DesignComponentDemos.tsx index 7749393752f..13762567732 100644 --- a/desktop/flipper-ui/src/sandy-chrome/DesignComponentDemos.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/DesignComponentDemos.tsx @@ -90,7 +90,7 @@ const demos: PreviewProps[] = [ ['rounded', 'boolean (false)', 'Make the corners rounded'], [ 'padv / padh / pad', - Object.keys(theme.space).join(' | ') + ' | number | true', + `${Object.keys(theme.space).join(' | ')} | number | true`, 'Short-hand to set the horizontal, vertical or both paddings. The keys correspond to the theme space settings. Using `true` picks the default horizontal / vertical padding for inline elements.', ], [ diff --git a/desktop/flipper-ui/src/sandy-chrome/DetailSidebarImpl.tsx b/desktop/flipper-ui/src/sandy-chrome/DetailSidebarImpl.tsx index 8de6509ef3d..830b0ed1eba 100644 --- a/desktop/flipper-ui/src/sandy-chrome/DetailSidebarImpl.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/DetailSidebarImpl.tsx @@ -18,6 +18,7 @@ export type DetailSidebarProps = { children: any; width?: number; minWidth?: number; + onResize?: (width: number, height: number) => void; }; /* eslint-disable react-hooks/rules-of-hooks */ @@ -25,6 +26,7 @@ export function DetailSidebarImpl({ children, width, minWidth, + onResize, }: DetailSidebarProps) { const [domNode, setDomNode] = useState( document.getElementById('detailsSidebar'), @@ -70,6 +72,7 @@ export function DetailSidebarImpl({ domNode && ReactDOM.createPortal( <_Sidebar + onResize={onResize} minWidth={minWidth} width={width || 300} position="right" diff --git a/desktop/flipper-ui/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui/src/sandy-chrome/Navbar.tsx index 36a0e8edac5..90125e0576b 100644 --- a/desktop/flipper-ui/src/sandy-chrome/Navbar.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/Navbar.tsx @@ -9,6 +9,7 @@ import { Dialog, + getFlipperLib, Layout, NUX, theme, @@ -52,11 +53,9 @@ import { ExportEverythingEverywhereAllAtOnceStatus, startFileImport, startFileExport, - startLinkExport, } from '../utils/exportData'; import UpdateIndicator from '../chrome/UpdateIndicator'; import {css} from '@emotion/css'; -import constants from '../fb-stubs/constants'; import {setStaticView} from '../reducers/connections'; import {StyleGuide} from './StyleGuide'; import {openDeeplinkDialog} from '../deeplink'; @@ -73,9 +72,11 @@ import {FlipperDevTools} from '../chrome/FlipperDevTools'; import {TroubleshootingHub} from '../chrome/TroubleshootingHub'; import {Notification} from './notification/Notification'; import {SandyRatingButton} from './RatingButton'; -import {getFlipperServerConfig} from '../flipperServer'; +import {getFlipperServer, getFlipperServerConfig} from '../flipperServer'; import {showChangelog} from '../chrome/ChangelogSheet'; import {FlipperSetupWizard} from '../chrome/FlipperSetupWizard'; +// eslint-disable-next-line no-restricted-imports +import {ItemType} from 'antd/lib/menu/hooks/useItems'; export const Navbar = withTrackingScope(function Navbar() { return ( @@ -389,7 +390,7 @@ export function NavbarButton({ if (count !== undefined) { return ( + { + getFlipperServer().exec('ios-idb-kill'); + }}> + Restart IDB (iOS connections) + + { + getFlipperServer().exec('android-adb-kill'); + }}> + Restart ADB (Android connections) + + { + getFlipperServer().exec('restart'); + }}> + Restart Flipper Server + @@ -614,11 +636,6 @@ function ExtrasMenu() { () => startFileExport(store.dispatch), [store.dispatch], ); - const startLinkExportTracked = useTrackedCallback( - 'Link export', - () => startLinkExport(store.dispatch), - [store.dispatch], - ); const startFileImportTracked = useTrackedCallback( 'File import', () => startFileImport(store), @@ -631,6 +648,95 @@ function ExtrasMenu() { const [welcomeVisible, setWelcomeVisible] = useState(false); const loggedIn = useValue(currentUser()); + const menuItems: ItemType[] = [ + { + key: 'extras', + popupOffset: [-50, 50], + label: , + className: submenu, + children: [ + { + key: 'addplugins', + label: 'Add plugins', + onClick: () => { + Dialog.showModal((onHide) => ); + }, + }, + { + key: 'importFlipperFile', + label: 'Import Flipper file', + onClick: startFileImportTracked, + }, + { + key: 'exportFlipperFile', + label: 'Export Flipper file', + onClick: startFileExportTracked, + }, + { + type: 'divider', + }, + { + key: 'plugin developers', + label: 'Plugin developers', + children: [ + { + key: 'styleguide', + label: 'Flipper Style Guide', + onClick: () => { + store.dispatch(setStaticView(StyleGuide)); + }, + }, + { + key: 'triggerDeeplink', + label: 'Trigger deeplink', + onClick: () => openDeeplinkDialog(store), + }, + ], + }, + { + type: 'divider', + }, + { + key: 'settings', + label: 'Settings', + onClick: () => store.dispatch(toggleSettingsModal(true)), + }, + { + key: 'setupWizard', + label: 'Setup Wizard', + onClick: () => { + Dialog.showModal((onHide) => ( + + )); + }, + }, + { + key: 'help', + label: 'Help', + onClick: () => { + setWelcomeVisible(true); + }, + }, + { + key: 'changelog', + label: 'Changelog', + onClick: showChangelog, + }, + ...(config.showLogin && loggedIn + ? [ + { + key: 'logout', + label: 'Log out', + onClick: () => { + logoutUser(); + }, + }, + ] + : []), + ] satisfies ItemType[], + }, + ]; + return ( <> - } - className={submenu}> - { - Dialog.showModal((onHide) => ); - }}> - Add Plugins - - - Import Flipper file - - - Export Flipper file - - {constants.ENABLE_SHAREABLE_LINK ? ( - - Export shareable link - - ) : null} - - - { - store.dispatch(setStaticView(StyleGuide)); - }}> - Flipper Style Guide - - openDeeplinkDialog(store)}> - Trigger deeplink - - - - store.dispatch(toggleSettingsModal(true))}> - Settings - - { - Dialog.showModal((onHide) => ( - - )); - }}> - Setup wizard - - setWelcomeVisible(true)}> - Help - - - Changelog - - {config.showLogin && loggedIn && ( - await logoutUser()}> - Logout - - )} - - + style={{backgroundColor: theme.backgroundDefault}} + items={menuItems} + /> {isSettingModalOpen && ( store.dispatch(toggleSettingsModal())} + isFB={getFlipperLib().isFB} /> )} { @@ -165,7 +166,7 @@ export function SandyApp() { ) : ( {React.createElement(staticView, { - logger: logger, + logger, })} )} diff --git a/desktop/flipper-ui/src/sandy-chrome/SetupDoctorScreen.tsx b/desktop/flipper-ui/src/sandy-chrome/SetupDoctorScreen.tsx index bb1953d9cd7..f33e4d76f7f 100644 --- a/desktop/flipper-ui/src/sandy-chrome/SetupDoctorScreen.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/SetupDoctorScreen.tsx @@ -154,10 +154,28 @@ function CollapsableCategory(props: { header={check.label} extra={}> {check.result.message != null ? ( - + <> + {check.result.subchecks ? ( +
    + {check.result.subchecks.map((subcheck, i) => ( +
  • + {subcheck.status === 'ok' ? ( + + ) : ( + + )}{' '} + {subcheck.title} +
    • + ))} +
+ ) : null} + + ) : null} ))} diff --git a/desktop/flipper-ui/src/sandy-chrome/appinspect/AppSelector.tsx b/desktop/flipper-ui/src/sandy-chrome/appinspect/AppSelector.tsx index 34d3b44dcd3..610ab5528cd 100644 --- a/desktop/flipper-ui/src/sandy-chrome/appinspect/AppSelector.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/appinspect/AppSelector.tsx @@ -251,7 +251,7 @@ function computeEntries( Currently connecting... , ...uninitializedClients.map((client) => ( - + {`${client.appName} (${client.deviceName})`} )), diff --git a/desktop/flipper-ui/src/sandy-chrome/appinspect/LaunchEmulator.tsx b/desktop/flipper-ui/src/sandy-chrome/appinspect/LaunchEmulator.tsx index c95224ba455..94e79da7a0f 100644 --- a/desktop/flipper-ui/src/sandy-chrome/appinspect/LaunchEmulator.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/appinspect/LaunchEmulator.tsx @@ -24,6 +24,7 @@ import { withTrackingScope, useLocalStorageState, theme, + getFlipperLib, } from 'flipper-plugin'; import {Provider} from 'react-redux'; import {DeviceTarget} from 'flipper-common'; @@ -39,15 +40,11 @@ const COLD_BOOT = 'cold-boot'; export function showEmulatorLauncher(store: Store) { renderReactRoot((unmount) => ( - + ; )); } -function LaunchEmulatorContainer({onClose}: {onClose: () => void}) { - return ; -} - function NoSDKsEnabledAlert({onClose}: {onClose: () => void}) { const [showSettings, setShowSettings] = useState(false); const footer = ( @@ -74,12 +71,18 @@ function NoSDKsEnabledAlert({onClose}: {onClose: () => void}) { setShowSettings(false)} + isFB={getFlipperLib().isFB} /> )} ); } +type IOSState = { + type: 'loading' | 'error' | 'ready' | 'empty'; + message?: string; +}; + export const LaunchEmulatorDialog = withTrackingScope( function LaunchEmulatorDialog({onClose}: {onClose: () => void}) { const iosEnabled = useStore((state) => state.settingsState.enableIOS); @@ -92,7 +95,7 @@ export const LaunchEmulatorDialog = withTrackingScope( const [waitingForIos, setWaitingForIos] = useState(iosEnabled); const [waitingForAndroid, setWaitingForAndroid] = useState(androidEnabled); - const [iOSMessage, setiOSMessage] = useState('Loading...'); + const [iOSMessage, setiOSMessage] = useState({type: 'loading'}); const [androidMessage, setAndroidMessage] = useState('Loading...'); const [favoriteVirtualDevices, setFavoriteVirtualDevices] = @@ -126,11 +129,14 @@ export const LaunchEmulatorDialog = withTrackingScope( setWaitingForIos(false); setIosEmulators(nonPhysical); if (nonPhysical.length === 0) { - setiOSMessage('No simulators found'); + setiOSMessage({type: 'empty'}); } } catch (error) { console.warn('Failed to find iOS simulators', error); - setiOSMessage(`Error: ${error.message ?? error} \nRetrying...`); + setiOSMessage({ + type: 'error', + message: `Error: ${error.message ?? error} \nRetrying...`, + }); setTimeout(getiOSSimulators, 1000); } }; @@ -199,7 +205,7 @@ export const LaunchEmulatorDialog = withTrackingScope( onClose(); } catch (e) { console.error('Failed to start emulator: ', e); - message.error('Failed to start emulator: ' + e); + message.error(`Failed to start emulator: ${e}`); } finally { setPendingEmulators( produce((draft) => { @@ -247,9 +253,7 @@ export const LaunchEmulatorDialog = withTrackingScope( items.push( , iosEmulators.length == 0 ? ( - <Typography.Paragraph style={{textAlign: 'center'}}> - {iOSMessage} - </Typography.Paragraph> + <IOSPlaceholder kind={iOSMessage.type} message={iOSMessage.message} /> ) : null, ...chain(iosEmulators) .map((device) => ({ @@ -282,8 +286,24 @@ export const LaunchEmulatorDialog = withTrackingScope( ); onClose(); } catch (e) { - console.warn('Failed to start simulator: ', e); - message.error('Failed to start simulator: ' + e); + if ( + // definitely a server error + typeof e === 'string' && + e.includes('command timeout') + ) { + message.warn( + 'Launching simulator may take up to 2 minutes for the first time. Please wait.', + // seconds + 20, + ); + } else { + console.warn('Failed to start simulator: ', e); + message.error( + `Failed to start simulator: ${e}`, + // seconds + 20, + ); + } } finally { setPendingEmulators( produce((draft) => { @@ -337,6 +357,42 @@ export const LaunchEmulatorDialog = withTrackingScope( }, ); +function IOSPlaceholder({ + kind, + message, +}: { + kind: IOSState['type']; + message: string | undefined; +}) { + switch (kind) { + case 'error': + return ( + <Typography.Paragraph style={{textAlign: 'center'}}> + {message} + </Typography.Paragraph> + ); + case 'empty': + return ( + <> + <Typography.Paragraph style={{textAlign: 'center'}}> + No iOS simulators found. This is likely because because{' '} + <code>xcode-select</code> is pointing at a wrong Xcode installation. + See setup doctor for help. Run{' '} + <code>sudo xcode-select -switch /Applications/Xcode_xxxxx.app</code>{' '} + to select the correct Xcode installation (you need to update path to + Xcode.app in the command). + </Typography.Paragraph> + <Typography.Paragraph style={{textAlign: 'center'}}> + Alternatevely, Simulator app may not have any simulators created. + {message} + </Typography.Paragraph> + </> + ); + default: + return null; + } +} + const FavIconStyle = {fontSize: 16, color: theme.primaryColor}; function Title({name}: {name: string}) { diff --git a/desktop/flipper-ui/src/sandy-chrome/appinspect/PluginList.tsx b/desktop/flipper-ui/src/sandy-chrome/appinspect/PluginList.tsx index 46ce98f42e2..2fb95f5b1d4 100644 --- a/desktop/flipper-ui/src/sandy-chrome/appinspect/PluginList.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/appinspect/PluginList.tsx @@ -35,6 +35,7 @@ import {reportUsage} from 'flipper-common'; import ConnectivityStatus from './fb-stubs/ConnectivityStatus'; import {useSelector} from 'react-redux'; import {getPluginLists} from '../../selectors/connections'; +import {PluginMemoryWarning} from './PluginMemoryWarning'; const {SubMenu} = Menu; const {Text} = Typography; @@ -201,6 +202,7 @@ export const PluginList = memo(function PluginList({ connections.selectedPlugin ? [connections.selectedPlugin] : [] } mode="inline"> + <PluginMemoryWarning /> <PluginGroup key="enabled" title="Enabled"> {allEnabledPlugins} </PluginGroup> diff --git a/desktop/flipper-ui/src/sandy-chrome/appinspect/PluginMemoryWarning.tsx b/desktop/flipper-ui/src/sandy-chrome/appinspect/PluginMemoryWarning.tsx new file mode 100644 index 00000000000..f6412f3af72 --- /dev/null +++ b/desktop/flipper-ui/src/sandy-chrome/appinspect/PluginMemoryWarning.tsx @@ -0,0 +1,261 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import {WarningOutlined} from '@ant-design/icons'; +import {Button, Modal, Table, Typography, TableColumnType} from 'antd'; +import {Layout, theme} from 'flipper-plugin'; +import Client from 'flipper-ui/src/Client'; +import {getPluginKey} from 'flipper-ui/src/deprecated-exports'; +import {PluginDefinition} from 'flipper-ui/src/plugin'; +import {switchPlugin} from 'flipper-ui/src/reducers/pluginManager'; +import {getStore} from 'flipper-ui/src/store'; +import React, {useEffect, useState} from 'react'; +import {useDispatch} from '../../utils/useStore'; +import {Dispatch} from 'redux'; +import {clearMessageQueue} from 'flipper-ui/src/reducers/pluginMessageQueue'; + +const PluginQueueMemoryUsageScanInterval = 2500; + +export function PluginMemoryWarning() { + const [_, rerender] = useState(0); + + const [isModalOpen, setIsModalOpen] = useState(false); + useEffect(() => { + const handle = setInterval(() => { + rerender((x) => x + 1); + }, PluginQueueMemoryUsageScanInterval); + + return () => { + clearInterval(handle); + }; + }, []); + + const totalSizeMb = getQueuedMessagedConsumption(); + + if (totalSizeMb < 50 && !isModalOpen) { + return null; + } + + const color = totalSizeMb < 150 ? theme.warningColor : theme.errorColor; + + return ( + <Layout.Container pad="small"> + <Button + style={{padding: 4}} + type="ghost" + onClick={() => { + setIsModalOpen(true); + }} + icon={ + <WarningOutlined style={{color, fontSize: theme.fontSize.large}} /> + }> + {totalSizeMb.toFixed(0)}Mb queued messages + </Button> + + {isModalOpen && ( + <Modal + open={isModalOpen} + destroyOnClose + onCancel={() => setIsModalOpen(false)} + width="100%" + footer={null} + style={{ + top: '5vh', + }}> + <PluginMemoryDetails + totalMb={totalSizeMb} + rerender={() => rerender((x) => x + 1)} + /> + </Modal> + )} + </Layout.Container> + ); +} + +function columns( + rerender: () => void, + dispatch: Dispatch, +): TableColumnType<PluginMemoryStats>[] { + return [ + { + title: 'Plugin name', + dataIndex: 'name', + key: 'name', + render: (value) => <Typography.Text strong>{value}</Typography.Text>, + }, + { + title: 'Application', + dataIndex: 'app', + key: 'app', + }, + + { + title: 'Device', + dataIndex: 'device', + key: 'device', + }, + + { + title: 'Queued messages count', + dataIndex: 'count', + key: 'count', + }, + { + title: 'Queued messages consumption (Mb)', + dataIndex: 'messagesmb', + key: 'messagesmb', + defaultSortOrder: 'descend', + sorter: (a, b) => a.messagesmb - b.messagesmb, + render: (value) => value.toFixed(0), + }, + { + title: 'Actions', + dataIndex: 'actions', + key: 'actions', + render: (_, record) => { + return ( + <Layout.Horizontal gap="small"> + <Button + type="primary" + onClick={() => { + dispatch( + switchPlugin({ + plugin: record.pluginDef, + selectedApp: record.app, + }), + ); + rerender(); + }}> + Deactivate + </Button> + <Button + type="primary" + onClick={() => { + const pluginKey = getPluginKey( + record.client.id, + {serial: record.client.query.device_id}, + record.pluginDef.id, + ); + dispatch(clearMessageQueue(pluginKey)); + rerender(); + }}> + Clear queue + </Button> + </Layout.Horizontal> + ); + }, + }, + ]; +} +type PluginMemoryStats = { + name: string; + app: string; + count: number; + device: string; + messagesmb: number; + pluginId: string; + pluginDef: PluginDefinition; + client: Client; +}; +function PluginMemoryDetails({ + rerender, + totalMb, +}: { + totalMb: number; + rerender: () => void; +}) { + const clients = getStore().getState().connections.clients; + const pluginQueue = getStore().getState().pluginMessageQueue; + const dispatch = useDispatch(); + + const pluginStats = Object.keys(pluginQueue).map((pluginKey) => { + const [pluginDef, client] = matchPluginKeyToClient(pluginKey, clients) ?? [ + null, + null, + ]; + + return { + pluginId: pluginDef?.id, + name: pluginDef?.title ?? pluginDef?.id, + app: client?.query.app ?? 'Unknown', + client, + count: pluginQueue[pluginKey].length, + pluginDef, + device: client?.query.device ?? 'Unknown', + messagesmb: + pluginQueue[pluginKey].reduce((acc, value) => value.rawSize + acc, 0) / + 1000000, + } as PluginMemoryStats; + }); + + return ( + <Layout.Container + style={{minHeight: '80vh', width: '100%', display: 'flex'}}> + <Typography.Title level={2}> + Background plugin memory usage + </Typography.Title> + <br /> + <Typography.Text> + Background plugins do not consume messages untill you select them in the + UI, they are buffered in memory instead. + <br /> To free up memory, you can deactivate plugins you do not need in + this session. Alternatively you can purge a plugins message queue + without deactivating it. + <br /> + <br /> + Total usage:{' '} + <Typography.Text strong>{totalMb.toFixed(0)}Mb</Typography.Text> + <br /> + <br /> + </Typography.Text> + <Table + columns={columns(rerender, dispatch)} + dataSource={pluginStats} + pagination={false} + /> + </Layout.Container> + ); +} + +function getQueuedMessagedConsumption() { + const messageQueues = getStore().getState().pluginMessageQueue; + let totalSize = 0; + for (const queue of Object.values(messageQueues)) { + for (const message of queue) { + totalSize += message.rawSize; + } + } + + const totalSizeMb = totalSize / 1000000; + return totalSizeMb; +} +function matchPluginKeyToClient( + pluginKey: string, + clients: Map<string, Client>, +): [PluginDefinition, Client] | null { + for (const client of clients.values()) { + for (const plugin of [ + ...client.plugins.values(), + ...client.backgroundPlugins.values(), + ]) { + const candidateKey = getPluginKey( + client.id, + {serial: client.query.device_id}, + plugin, + ); + if (candidateKey === pluginKey) { + const pluginDef = [ + ...getStore().getState().plugins.clientPlugins.values(), + ].find((pluginDef) => pluginDef.id === plugin); + return ([pluginDef, client] as [PluginDefinition, Client]) ?? null; + } + } + } + return null; +} diff --git a/desktop/flipper-ui/src/sandy-chrome/appinspect/__tests__/LaunchEmulator.spec.tsx b/desktop/flipper-ui/src/sandy-chrome/appinspect/__tests__/LaunchEmulator.spec.tsx index 9705f6036fa..4373ddabcf1 100644 --- a/desktop/flipper-ui/src/sandy-chrome/appinspect/__tests__/LaunchEmulator.spec.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/appinspect/__tests__/LaunchEmulator.spec.tsx @@ -18,7 +18,7 @@ import {sleep} from 'flipper-plugin'; import {last} from 'lodash'; import {getFlipperServer} from '../../../flipperServer'; -test('Can render and launch android apps - no emulators', async () => { +test.skip('Can render and launch android apps - no emulators', async () => { const store = createStore(createRootReducer()); store.dispatch({ type: 'UPDATE_SETTINGS', diff --git a/desktop/flipper-ui/src/sandy-chrome/doctor/index.tsx b/desktop/flipper-ui/src/sandy-chrome/doctor/index.tsx index 3e91b47b1b6..6a362c01f0e 100644 --- a/desktop/flipper-ui/src/sandy-chrome/doctor/index.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/doctor/index.tsx @@ -33,6 +33,16 @@ const CommonOpenSSLInstalled = ( <CodeBlock>{props.output}</CodeBlock> </div> ); +const XcodeSelectSwitch = ({ + availableXcode, +}: { + availableXcode: string | null; +}) => ( + <CliCommand + title="Select Xcode version foo bar baz" + command={`sudo xcode-select -switch ${availableXcode ?? '<path/to/>/Xcode.app'}`} + /> +); const CommonOpenSSLNotInstalled = ( props: PropsFor<'common.openssl--not_installed'>, @@ -162,27 +172,32 @@ const XcodeSelectSet = (props: PropsFor<'ios.xcode-select--set'>) => ( <CodeBlock>{props.selected}</CodeBlock> </Typography.Paragraph> ); -const XcodeSelectNotSet = (_props: PropsFor<'ios.xcode-select--not_set'>) => ( +const XcodeSelectNotSet = (props: PropsFor<'ios.xcode-select--not_set'>) => ( <Typography.Paragraph> xcode-select path not selected. <code>xcode-select -p</code> failed. To fix it run this command: - <CliCommand - title="Select Xcode version foo bar baz" - // TODO provide latest path to installed xcode from /Applications - command={`sudo xcode-select -switch <path/to/>/Xcode.app`} - /> + <XcodeSelectSwitch availableXcode={props.availableXcode} /> </Typography.Paragraph> ); const XcodeSelectNoXcode = ( - _props: PropsFor<'ios.xcode-select--no_xcode_selected'>, + props: PropsFor<'ios.xcode-select--no_xcode_selected'>, ) => ( <Typography.Paragraph> xcode-select has no Xcode selected. To fix it it run this command: + <XcodeSelectSwitch availableXcode={props.availableXcode} /> + </Typography.Paragraph> +); + +const XcodeSelectCustomPath = ( + props: PropsFor<'ios.xcode-select--custom_path'>, +) => ( + <Typography.Paragraph> + Selected path is not a Xcode application: + <CodeBlock size="s">{props.selectedPath}</CodeBlock> <CliCommand - title="Select Xcode version foo bar baz" - // TODO provide latest path to installed xcode from /Applications - command={`sudo xcode-select -switch <path/to/>/Xcode.app`} + title="Select existing Xcode application" + command={`sudo xcode-select -switch ${props.availableXcode ?? '<path/to/>/Xcode.app'}`} /> </Typography.Paragraph> ); @@ -193,11 +208,7 @@ const XcodeSelectNonExistingSelected = ( <Typography.Paragraph> xcode-select is pointing at a path that does not exist: <CodeBlock size="s">{props.selected}</CodeBlock> - <CliCommand - title="Select existing Xcode application" - // TODO provide latest path to installed xcode from /Applications - command={`sudo xcode-select -switch <path/to/>/Xcode.app`} - /> + <XcodeSelectSwitch availableXcode={props.availableXcode} /> </Typography.Paragraph> ); @@ -226,6 +237,28 @@ const IosSdkInstalled = (props: PropsFor<'ios.sdk--installed'>) => ( </div> ); +const HasSimulatorsOk = (props: PropsFor<'ios.has-simulators--ok'>) => ( + <Typography.Paragraph> + You have {props.count} simulators available. + </Typography.Paragraph> +); +const HasSimulatorsIdbFailed = ( + props: PropsFor<'ios.has-simulators--idb-failed'>, +) => ( + <Typography.Paragraph> + Command to list devices failed, make sure idb is installed. + <CodeBlock>{props.message}</CodeBlock> + </Typography.Paragraph> +); +const HasSimulatorsNoDevices = ( + _props: PropsFor<'ios.has-simulators--no-devices'>, +) => ( + <Typography.Paragraph> + No available simulators found. This can happen because{' '} + <code>xcode-select</code> points to a wrong Xcode installation. + </Typography.Paragraph> +); + const IosXctraceInstalled = (props: PropsFor<'ios.xctrace--installed'>) => ( <Typography.Paragraph> xctrace is installed. @@ -267,6 +300,20 @@ const Skipped = (props: PropsFor<'skipped'>) => ( <Typography.Paragraph>{props.reason}</Typography.Paragraph> ); +const DoctorFailed = (props: PropsFor<'doctor-failed'>) => { + const error = + typeof props.error === 'object' + ? JSON.stringify(props.error, null, 2) + : props.error.toString(); + + return ( + <> + <b>Doctor failed</b> + <CodeBlock>{error}</CodeBlock> + </> + ); +}; + const messageToComp: { [K in keyof FlipperDoctor.HealthcheckResultMessageMapping]: React.FC< PropsFor<K> @@ -299,12 +346,16 @@ const messageToComp: { 'ios.xcode-select--no_xcode_selected': XcodeSelectNoXcode, 'ios.xcode-select--nonexisting_selected': XcodeSelectNonExistingSelected, 'ios.xcode-select--noop': Noop, - 'ios.xcode-select--custom_path': Noop, + 'ios.xcode-select--custom_path': XcodeSelectCustomPath, 'ios.xcode-select--old_version_selected': Noop, 'ios.sdk--installed': IosSdkInstalled, 'ios.sdk--not_installed': IosSdkNotInstalled, + 'ios.has-simulators--ok': HasSimulatorsOk, + 'ios.has-simulators--no-devices': HasSimulatorsNoDevices, + 'ios.has-simulators--idb-failed': HasSimulatorsIdbFailed, + 'ios.xctrace--installed': IosXctraceInstalled, 'ios.xctrace--not_installed': IosXctraceNotInstalled, @@ -314,7 +365,7 @@ const messageToComp: { 'ios.idb--not_installed': Noop, 'ios.idb--installed': IosIdbInstalled, - 'doctor-failed': Noop, + 'doctor-failed': DoctorFailed, skipped: Skipped, }; diff --git a/desktop/flipper-ui/src/sandy-chrome/notification/Notification.tsx b/desktop/flipper-ui/src/sandy-chrome/notification/Notification.tsx index 6b4f1a590a8..7ef53268adf 100644 --- a/desktop/flipper-ui/src/sandy-chrome/notification/Notification.tsx +++ b/desktop/flipper-ui/src/sandy-chrome/notification/Notification.tsx @@ -296,7 +296,11 @@ export function Notification() { return ( <LeftSidebar> <Layout.Top> - <Layout.Container gap="tiny" padv="tiny" borderBottom> + <Layout.Container + gap="tiny" + padv="tiny" + borderBottom + style={{paddingRight: 24}}> <SidebarTitle actions={actions}>notifications</SidebarTitle> <Layout.Container padh="medium" padv="small"> <Input diff --git a/desktop/flipper-ui/src/startFlipperDesktop.tsx b/desktop/flipper-ui/src/startFlipperDesktop.tsx index 43a0c96098b..3af34748e6d 100644 --- a/desktop/flipper-ui/src/startFlipperDesktop.tsx +++ b/desktop/flipper-ui/src/startFlipperDesktop.tsx @@ -131,7 +131,7 @@ class AppFrame extends React.Component< console.error( `Flipper chrome crash: ${error}`, error, - '\nComponents: ' + errorInfo?.componentStack, + `\nComponents: ${errorInfo?.componentStack}`, ); this.setState({ error, diff --git a/desktop/flipper-ui/src/ui/components/Sidebar.tsx b/desktop/flipper-ui/src/ui/components/Sidebar.tsx index 9f45105c8ce..6069366de0e 100644 --- a/desktop/flipper-ui/src/ui/components/Sidebar.tsx +++ b/desktop/flipper-ui/src/ui/components/Sidebar.tsx @@ -21,7 +21,7 @@ SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer'; type SidebarPosition = 'left' | 'top' | 'right' | 'bottom'; -const borderStyle = '1px solid ' + theme.dividerColor; +const borderStyle = `1px solid ${theme.dividerColor}`; const SidebarContainer = styled(FlexColumn)<{ position: 'right' | 'top' | 'left' | 'bottom'; diff --git a/desktop/flipper-ui/src/ui/components/Tabs.tsx b/desktop/flipper-ui/src/ui/components/Tabs.tsx index 359ff184fe8..891deb0d4c0 100644 --- a/desktop/flipper-ui/src/ui/components/Tabs.tsx +++ b/desktop/flipper-ui/src/ui/components/Tabs.tsx @@ -266,7 +266,7 @@ export default function Tabs(props: { 'Tabs', 'onTabClick', scope as any, - 'tab:' + key + ':' + comp.props.label, + `tab:${key}:${comp.props.label}`, ) : undefined }> diff --git a/desktop/flipper-ui/src/ui/components/TooltipProvider.tsx b/desktop/flipper-ui/src/ui/components/TooltipProvider.tsx index 71ebaf3fe2d..c9d08e4c356 100644 --- a/desktop/flipper-ui/src/ui/components/TooltipProvider.tsx +++ b/desktop/flipper-ui/src/ui/components/TooltipProvider.tsx @@ -149,7 +149,7 @@ const TooltipProvider: React.FC<{}> = memo(function TooltipProvider({ setTooltip({ rect: node.getBoundingClientRect(), title, - options: options, + options, }); }, options.delay); return; @@ -157,7 +157,7 @@ const TooltipProvider: React.FC<{}> = memo(function TooltipProvider({ setTooltip({ rect: node.getBoundingClientRect(), title, - options: options, + options, }); }, close() { diff --git a/desktop/flipper-ui/src/ui/components/searchable/Searchable.tsx b/desktop/flipper-ui/src/ui/components/searchable/Searchable.tsx index bd5ba529c08..96f256f6772 100644 --- a/desktop/flipper-ui/src/ui/components/searchable/Searchable.tsx +++ b/desktop/flipper-ui/src/ui/components/searchable/Searchable.tsx @@ -222,7 +222,7 @@ export default function Searchable( ? this.props.defaultSearchTerm : savedState.searchTerm || this.state.searchTerm; this.setState({ - searchTerm: searchTerm, + searchTerm, filters: savedState.filters || this.state.filters, regexEnabled: savedState.regexEnabled || this.state.regexEnabled, contentSearchEnabled: @@ -291,10 +291,9 @@ export default function Searchable( } else if (this.props.columns) { // if we have a table, we are using it's colums to uniquely identify // the table (in case there is more than one table rendered at a time) - return ( - 'TABLE_COLUMNS_' + - Object.keys(this.props.columns).join('_').toUpperCase() - ); + return `TABLE_COLUMNS_${Object.keys(this.props.columns) + .join('_') + .toUpperCase()}`; } }; diff --git a/desktop/flipper-ui/src/ui/components/table/ManagedTable.tsx b/desktop/flipper-ui/src/ui/components/table/ManagedTable.tsx index 9c9afd88751..9a1e762a72f 100644 --- a/desktop/flipper-ui/src/ui/components/table/ManagedTable.tsx +++ b/desktop/flipper-ui/src/ui/components/table/ManagedTable.tsx @@ -175,9 +175,7 @@ export class ManagedTable extends React.Component< }; getTableKey = (): string => { - return ( - 'TABLE_COLUMNS_' + Object.keys(this.props.columns).join('_').toUpperCase() - ); + return `TABLE_COLUMNS_${Object.keys(this.props.columns).join('_').toUpperCase()}`; }; tableRef = React.createRef<List>(); diff --git a/desktop/flipper-ui/src/utils/__tests__/exportData.node.tsx b/desktop/flipper-ui/src/utils/__tests__/exportData.node.tsx index 7a91589341e..7af1ea69534 100644 --- a/desktop/flipper-ui/src/utils/__tests__/exportData.node.tsx +++ b/desktop/flipper-ui/src/utils/__tests__/exportData.node.tsx @@ -95,7 +95,7 @@ function generateClientIdentifierWithSalt( ): string { const array = identifier.split('#'); const serial = array.pop(); - return array.join('#') + '#' + salt + '-' + serial; + return `${array.join('#')}#${salt}-${serial}`; } function generateClientFromClientWithSalt( @@ -108,9 +108,10 @@ function generateClientFromClientWithSalt( id: identifier, query: { app, + app_id: `com.facebook.flipper.${app}`, os, device, - device_id: salt + '-' + device_id, + device_id: `${salt}-${device_id}`, medium: client.query.medium, }, }; @@ -121,7 +122,14 @@ function generateClientFromDevice(device: Device, app: string): ClientExport { const identifier = generateClientIdentifier(device, app); return { id: identifier, - query: {app, os, device: deviceType, device_id: serial, medium: 'NONE'}, + query: { + app, + app_id: `com.facebook.flipper.${app}`, + os, + device: deviceType, + device_id: serial, + medium: 'NONE', + }, }; } @@ -154,6 +162,7 @@ test('test generateClientFromClientWithSalt helper function', () => { query: { app: 'app', os: 'iOS', + app_id: 'com.facebook.flipper.app', device: 'emulator', device_id: 'salt-serial', medium: 'NONE', @@ -164,6 +173,7 @@ test('test generateClientFromClientWithSalt helper function', () => { query: { app: 'app', os: 'iOS', + app_id: 'com.facebook.flipper.app', device: 'emulator', device_id: 'serial', medium: 'NONE', @@ -185,6 +195,7 @@ test('test generateClientFromDevice helper function', () => { query: { app: 'app', os: 'iOS', + app_id: 'com.facebook.flipper.app', device: 'emulator', device_id: 'serial', medium: 'NONE', @@ -734,6 +745,7 @@ test('test determinePluginsToProcess for mutilple clients having plugins present generateClientIdentifier(device1, 'app'), { app: 'app', + app_id: 'com.facebook.flipper.app', os: 'iOS', device: 'TestiPhone', device_id: 'serial1', @@ -750,6 +762,7 @@ test('test determinePluginsToProcess for mutilple clients having plugins present generateClientIdentifier(device1, 'app2'), { app: 'app2', + app_id: 'com.facebook.flipper.app2', os: 'iOS', device: 'TestiPhone', device_id: 'serial1', @@ -766,6 +779,7 @@ test('test determinePluginsToProcess for mutilple clients having plugins present generateClientIdentifier(device1, 'app3'), { app: 'app3', + app_id: 'com.facebook.flipper.app3', os: 'iOS', device: 'TestiPhone', device_id: 'serial1', @@ -826,6 +840,7 @@ test('test determinePluginsToProcess for no selected plugin present in any clien generateClientIdentifier(device1, 'app'), { app: 'app', + app_id: 'com.facebook.flipper.app', os: 'iOS', device: 'TestiPhone', device_id: 'serial1', @@ -842,6 +857,7 @@ test('test determinePluginsToProcess for no selected plugin present in any clien generateClientIdentifier(device1, 'app2'), { app: 'app2', + app_id: 'com.facebook.flipper.app2', os: 'iOS', device: 'TestiPhone', device_id: 'serial1', @@ -885,6 +901,7 @@ test('test determinePluginsToProcess for multiple clients on same device', async generateClientIdentifier(device1, 'app'), { app: 'app', + app_id: 'com.facebook.flipper.app', os: 'iOS', device: 'TestiPhone', device_id: 'serial1', @@ -901,6 +918,7 @@ test('test determinePluginsToProcess for multiple clients on same device', async generateClientIdentifier(device1, 'app2'), { app: 'app2', + app_id: 'com.facebook.flipper.app2', os: 'iOS', device: 'TestiPhone', device_id: 'serial1', @@ -949,6 +967,7 @@ test('test determinePluginsToProcess for multiple clients on different device', generateClientIdentifier(device1, 'app'), { app: 'app', + app_id: 'com.facebook.flipper.app', os: 'iOS', device: 'TestiPhone', device_id: 'serial1', @@ -965,6 +984,7 @@ test('test determinePluginsToProcess for multiple clients on different device', generateClientIdentifier(device1, 'app2'), { app: 'app1', + app_id: 'com.facebook.flipper.app1', os: 'iOS', device: 'TestiPhone', device_id: 'serial1', @@ -981,6 +1001,7 @@ test('test determinePluginsToProcess for multiple clients on different device', generateClientIdentifier(device2, 'app'), { app: 'app', + app_id: 'com.facebook.flipper.app', os: 'iOS', device: 'TestiPhone', device_id: 'serial2', @@ -997,6 +1018,7 @@ test('test determinePluginsToProcess for multiple clients on different device', generateClientIdentifier(device2, 'app2'), { app: 'app1', + app_id: 'com.facebook.flipper.app1', os: 'iOS', device: 'TestiPhone', device_id: 'serial2', @@ -1069,6 +1091,7 @@ test('test determinePluginsToProcess to ignore archived clients', async () => { generateClientIdentifier(selectedDevice, 'app'), { app: 'app', + app_id: 'com.facebook.flipper.app', os: 'iOS', device: 'TestiPhone', device_id: 'serial', @@ -1085,6 +1108,7 @@ test('test determinePluginsToProcess to ignore archived clients', async () => { generateClientIdentifier(archivedDevice, 'app'), { app: 'app', + app_id: 'com.facebook.flipper.app', os: 'iOS', device: 'TestiPhone', device_id: 'serial-archived', @@ -1125,7 +1149,7 @@ test('test determinePluginsToProcess to ignore archived clients', async () => { pluginKey: `${client.id}#TestPlugin`, pluginId: 'TestPlugin', pluginName: 'TestPlugin', - client: client, + client, }, ]); }); diff --git a/desktop/flipper-ui/src/utils/__tests__/messageQueueSandy.node.tsx b/desktop/flipper-ui/src/utils/__tests__/messageQueueSandy.node.tsx index 99daaf8c42f..8833781b014 100644 --- a/desktop/flipper-ui/src/utils/__tests__/messageQueueSandy.node.tsx +++ b/desktop/flipper-ui/src/utils/__tests__/messageQueueSandy.node.tsx @@ -142,6 +142,7 @@ test('queue - events are NOT processed immediately if plugin is NOT selected (bu "api": "TestPlugin", "method": "inc", "params": {}, + "rawSize": 154, }, ], } @@ -154,6 +155,7 @@ test('queue - events are NOT processed immediately if plugin is NOT selected (bu "api": "TestPlugin", "method": "inc", "params": {}, + "rawSize": 154, }, { "api": "TestPlugin", @@ -161,6 +163,7 @@ test('queue - events are NOT processed immediately if plugin is NOT selected (bu "params": { "delta": 2, }, + "rawSize": 172, }, { "api": "TestPlugin", @@ -168,6 +171,7 @@ test('queue - events are NOT processed immediately if plugin is NOT selected (bu "params": { "delta": 3, }, + "rawSize": 172, }, ], } @@ -210,7 +214,9 @@ test('queue - events are NOT processed immediately if plugin is NOT selected (bu client.flushMessageBuffer(); expect(store.getState().pluginMessageQueue).toEqual({ - [pluginKey]: [{api: 'TestPlugin', method: 'inc', params: {delta: 5}}], + [pluginKey]: [ + {api: 'TestPlugin', method: 'inc', params: {delta: 5}, rawSize: 172}, + ], }); }); @@ -282,6 +288,7 @@ test('queue - events are queued for plugins that are favorite when app is not se "params": { "delta": 2, }, + "rawSize": 172, }, ], } @@ -315,6 +322,7 @@ test('queue - events are queued for plugins that are favorite when app is select "params": { "delta": 2, }, + "rawSize": 172, }, ], "TestApp#Android#MockAndroidDevice#serial2#TestPlugin": [ @@ -324,6 +332,7 @@ test('queue - events are queued for plugins that are favorite when app is select "params": { "delta": 3, }, + "rawSize": 172, }, ], } @@ -359,7 +368,9 @@ test('queue - events processing will be paused', async () => { }); expect(store.getState().pluginMessageQueue).toEqual({ - [pluginKey]: [{api: 'TestPlugin', method: 'inc', params: {delta: 5}}], + [pluginKey]: [ + {api: 'TestPlugin', method: 'inc', params: {delta: 5}, rawSize: 172}, + ], }); await idler.next(); @@ -514,6 +525,7 @@ test('client - incoming messages are buffered and flushed together', async () => api: 'StubPlugin', method: 'log', params: {line: 'suff'}, + rawSize: 180, }, }), ); @@ -527,6 +539,7 @@ test('client - incoming messages are buffered and flushed together', async () => "api": "TestPlugin", "method": "inc", "params": {}, + "rawSize": 154, }, ], } @@ -541,6 +554,7 @@ test('client - incoming messages are buffered and flushed together', async () => "params": { "line": "suff", }, + "rawSize": 208, }, ], "plugin": "[SandyPluginInstance]", @@ -553,6 +567,7 @@ test('client - incoming messages are buffered and flushed together', async () => "params": { "delta": 2, }, + "rawSize": 172, }, { "api": "TestPlugin", @@ -560,6 +575,7 @@ test('client - incoming messages are buffered and flushed together', async () => "params": { "delta": 3, }, + "rawSize": 172, }, ], "plugin": "[SandyPluginInstance]", @@ -580,6 +596,7 @@ test('client - incoming messages are buffered and flushed together', async () => "params": { "line": "suff", }, + "rawSize": 208, }, ], "TestApp#Android#MockAndroidDevice#serial#TestPlugin": [ @@ -587,6 +604,7 @@ test('client - incoming messages are buffered and flushed together', async () => "api": "TestPlugin", "method": "inc", "params": {}, + "rawSize": 154, }, { "api": "TestPlugin", @@ -594,6 +612,7 @@ test('client - incoming messages are buffered and flushed together', async () => "params": { "delta": 2, }, + "rawSize": 172, }, { "api": "TestPlugin", @@ -601,6 +620,7 @@ test('client - incoming messages are buffered and flushed together', async () => "params": { "delta": 3, }, + "rawSize": 172, }, ], } @@ -638,6 +658,7 @@ test('client - incoming messages are buffered and flushed together', async () => "api": "TestPlugin", "method": "inc", "params": {}, + "rawSize": 154, }, { "api": "TestPlugin", @@ -645,6 +666,7 @@ test('client - incoming messages are buffered and flushed together', async () => "params": { "delta": 2, }, + "rawSize": 172, }, { "api": "TestPlugin", @@ -652,6 +674,7 @@ test('client - incoming messages are buffered and flushed together', async () => "params": { "delta": 3, }, + "rawSize": 172, }, ], } @@ -676,6 +699,7 @@ test('queue - messages that have not yet flushed be lost when disabling the plug "params": { "delta": 2, }, + "rawSize": 172, }, ], "plugin": "[SandyPluginInstance]", @@ -689,6 +713,7 @@ test('queue - messages that have not yet flushed be lost when disabling the plug "api": "TestPlugin", "method": "inc", "params": {}, + "rawSize": 154, }, ], } @@ -718,20 +743,33 @@ test('queue will be cleaned up when it exceeds maximum size', () => { for (i = 0; i < queueSize; i++) { state = pluginMessageQueue( state, - queueMessages(pluginKey, [{method: 'test', params: {i}}], queueSize), + queueMessages( + pluginKey, + [{method: 'test', params: {i}, rawSize: 10}], + queueSize, + ), ); } // almost full - expect(state[pluginKey][0]).toEqual({method: 'test', params: {i: 0}}); + expect(state[pluginKey][0]).toEqual({ + method: 'test', + params: {i: 0}, + rawSize: 10, + }); expect(state[pluginKey].length).toBe(queueSize); // ~5000 expect(state[pluginKey][queueSize - 1]).toEqual({ method: 'test', params: {i: queueSize - 1}, // ~4999 + rawSize: 10, }); state = pluginMessageQueue( state, - queueMessages(pluginKey, [{method: 'test', params: {i: ++i}}], queueSize), + queueMessages( + pluginKey, + [{method: 'test', params: {i: ++i}, rawSize: 10}], + queueSize, + ), ); const newLength = Math.ceil(0.9 * queueSize) + 1; // ~4500 @@ -739,9 +777,11 @@ test('queue will be cleaned up when it exceeds maximum size', () => { expect(state[pluginKey][0]).toEqual({ method: 'test', params: {i: queueSize - newLength + 1}, // ~500 + rawSize: 10, }); expect(state[pluginKey][newLength - 1]).toEqual({ method: 'test', - params: {i: i}, // ~50001 + params: {i}, // ~50001 + rawSize: 10, }); }); diff --git a/desktop/flipper-ui/src/utils/__tests__/pluginUtils.node.tsx b/desktop/flipper-ui/src/utils/__tests__/pluginUtils.node.tsx index cb692db8ac4..49c4bc4fccd 100644 --- a/desktop/flipper-ui/src/utils/__tests__/pluginUtils.node.tsx +++ b/desktop/flipper-ui/src/utils/__tests__/pluginUtils.node.tsx @@ -119,7 +119,7 @@ test('getActivePersistentPlugins, with message queue', async () => { state.pluginMessageQueue = { [getPluginKey(client.id, device, 'ClientPlugin3')]: [ - {method: 'msg', params: {msg: 'ClientPlugin3'}}, + {method: 'msg', params: {msg: 'ClientPlugin3'}, rawSize: 10}, ], }; diff --git a/desktop/flipper-ui/src/utils/createSandyPluginWrapper.tsx b/desktop/flipper-ui/src/utils/createSandyPluginWrapper.tsx index 7d355ef94e9..27128fcb7e3 100644 --- a/desktop/flipper-ui/src/utils/createSandyPluginWrapper.tsx +++ b/desktop/flipper-ui/src/utils/createSandyPluginWrapper.tsx @@ -149,7 +149,7 @@ export function createSandyPluginWrapper<S, A extends BaseAction, P>( ); } catch (e) { console.error( - 'Failed to compute notifications for plugin ' + Plugin.id, + `Failed to compute notifications for plugin ${Plugin.id}`, e, ); } diff --git a/desktop/flipper-ui/src/utils/exportData.tsx b/desktop/flipper-ui/src/utils/exportData.tsx index f028d4e7fa6..4ae11306bc4 100644 --- a/desktop/flipper-ui/src/utils/exportData.tsx +++ b/desktop/flipper-ui/src/utils/exportData.tsx @@ -28,7 +28,6 @@ import {processMessageQueue} from './messageQueue'; import {getPluginTitle} from './pluginUtils'; import {Dialog, getFlipperLib, Idler} from 'flipper-plugin'; import {ClientQuery} from 'flipper-common'; -import ShareSheetExportUrl from '../chrome/ShareSheetExportUrl'; import ShareSheetExportFile from '../chrome/ShareSheetExportFile'; import ExportDataPluginSheet from '../chrome/ExportDataPluginSheet'; import {exportLogs} from '../chrome/ConsoleLogs'; @@ -171,7 +170,7 @@ async function exportSandyPluginStates( .get(pluginId)! .exportState(idler, statusUpdate); } catch (error) { - console.error('Error while serializing plugin ' + pluginId, error); + console.error(`Error while serializing plugin ${pluginId}`, error); throw new Error(`Failed to serialize plugin ${pluginId}: ${error}`); } } @@ -205,7 +204,7 @@ async function addSaltToDeviceSerial({ devicePluginStates, }: AddSaltToDeviceSerialOptions): Promise<ExportType> { const {serial} = device; - const newSerial = salt + '-' + serial; + const newSerial = `${salt}-${serial}`; const newDevice = new ArchivedDevice({ serial: newSerial, deviceType: device.deviceType, @@ -252,7 +251,7 @@ async function addSaltToDeviceSerial({ flipperReleaseRevision: revision, clients: updatedClients, device: {...newDevice.toJSON(), pluginStates: devicePluginStates}, - deviceScreenshot: deviceScreenshot, + deviceScreenshot, store: { activeNotifications: updatedPluginNotifications, }, @@ -456,7 +455,7 @@ async function getStoreExport( export async function exportStore( store: MiddlewareAPI, - includeSupportDetails?: boolean, + _includeSupportDetails?: boolean, idler: Idler = new TestIdler(true), statusUpdate: (msg: string) => void = () => {}, ): Promise<{ @@ -755,23 +754,12 @@ export async function startFileExport(dispatch: Store['dispatch']) { )); } -export async function startLinkExport(dispatch: Store['dispatch']) { - const plugins = await selectPlugins(); - if (plugins === false) { - return; // cancelled - } - // TODO: no need to put this in the store, - // need to be cleaned up later in combination with SupportForm - dispatch(selectedPlugins(plugins)); - Dialog.showModal((onHide) => ( - <ShareSheetExportUrl onHide={onHide} logger={getLogger()} /> - )); -} - async function selectPlugins() { return await Dialog.select<string[]>({ title: 'Select plugins to export', defaultValue: [], + onValidate: (plugins) => + plugins.length === 0 ? 'Please select at least one plugin.' : '', renderer: (value, onChange, onCancel) => ( <ExportDataPluginSheet onHide={onCancel} diff --git a/desktop/flipper-ui/src/utils/flipperLibImplementation/index.tsx b/desktop/flipper-ui/src/utils/flipperLibImplementation/index.tsx index 8ae07da8b76..c02b442996a 100644 --- a/desktop/flipper-ui/src/utils/flipperLibImplementation/index.tsx +++ b/desktop/flipper-ui/src/utils/flipperLibImplementation/index.tsx @@ -127,6 +127,13 @@ export function initializeFlipperLibImplementation( isConnected, isLoggedIn: () => getFlipperServer().exec('is-logged-in'), }, + runDeviceAction(cmd, ...params) { + if (!(cmd.startsWith('ios-') || cmd.startsWith('android-'))) { + throw new Error(`Unsupported device action "${cmd}"`); + } + + return getFlipperServer().exec(cmd, ...params); + }, enableMenuEntries(entries) { store.dispatch(setMenuEntries(entries)); }, diff --git a/desktop/flipper-ui/src/utils/registerShortcut.tsx b/desktop/flipper-ui/src/utils/registerShortcut.tsx index d0f994e7d07..316fb70fea5 100644 --- a/desktop/flipper-ui/src/utils/registerShortcut.tsx +++ b/desktop/flipper-ui/src/utils/registerShortcut.tsx @@ -16,10 +16,10 @@ export function registerShortcut( // Normalize shortcuts format. // split acceleratos like Shift+CmdOrCtrl+Z into Shift+Cmd+Z,Shift+Control+Z if (accelerator.includes('CmdOrCtrl')) { - accelerator = - accelerator.replace('CmdOrCtrl', 'Cmd') + - ',' + - accelerator.replace('CmdOrCtrl', 'Ctrl'); + accelerator = `${accelerator.replace( + 'CmdOrCtrl', + 'Cmd', + )},${accelerator.replace('CmdOrCtrl', 'Ctrl')}`; } hotkeys(accelerator, handler); return () => { diff --git a/desktop/flipper-ui/src/utils/runHealthchecks.tsx b/desktop/flipper-ui/src/utils/runHealthchecks.tsx index 977562b3a57..8fcb3da14f7 100644 --- a/desktop/flipper-ui/src/utils/runHealthchecks.tsx +++ b/desktop/flipper-ui/src/utils/runHealthchecks.tsx @@ -40,8 +40,12 @@ export type HealthcheckOptions = HealthcheckEventsHandler & HealthcheckSettings; async function launchHealthchecks(options: HealthcheckOptions): Promise<void> { const flipperServer = getFlipperServer(); + + const envInfo = await flipperServer.exec('environment-info'); + const healthchecks = await flipperServer.exec('doctor-get-healthchecks', { settings: options.settings, + isProduction: envInfo.isProduction, }); options.startHealthchecks(healthchecks); let hasProblems = false; @@ -56,7 +60,10 @@ async function launchHealthchecks(options: HealthcheckOptions): Promise<void> { await flipperServer .exec( 'doctor-run-healthcheck', - {settings: options.settings}, + { + settings: options.settings, + isProduction: envInfo.isProduction, + }, categoryKey as keyof FlipperDoctor.Healthchecks, h.key, ) diff --git a/desktop/flipper-ui/src/utils/testUtils.tsx b/desktop/flipper-ui/src/utils/testUtils.tsx index 294ee3e0002..03a2325b681 100644 --- a/desktop/flipper-ui/src/utils/testUtils.tsx +++ b/desktop/flipper-ui/src/utils/testUtils.tsx @@ -44,7 +44,7 @@ export function createMockDownloadablePluginDetails( const name = params.name || `flipper-plugin-${lowercasedID}`; const details: DownloadablePluginDetails = { name: name || `flipper-plugin-${lowercasedID}`, - id: id, + id, buildId, bugs: { email: 'bugs@localhost', @@ -63,9 +63,9 @@ export function createMockDownloadablePluginDetails( specVersion: 2, pluginType: 'client', title: title ?? id, - version: version, + version, downloadUrls: [`http://localhost/${lowercasedID}/${version}`], - lastUpdated: lastUpdated, + lastUpdated, isActivatable: false, isEnabledByDefault: false, }; diff --git a/desktop/jest.config.js b/desktop/jest.config.js index 4b0aa921902..3926aa8616c 100644 --- a/desktop/jest.config.js +++ b/desktop/jest.config.js @@ -19,7 +19,7 @@ module.exports = { '^flipper-plugin$': '<rootDir>/flipper-plugin/src', '^flipper-(server-core|ui-core|frontend-core|common)$': '<rootDir>/flipper-$1/src', - '^flipper-(pkg|pkg-lib|doctor|test-utils)$': '<rootDir>/$1/src', + '^flipper-(pkg|pkg-lib|test-utils)$': '<rootDir>/$1/src', '^.+\\.(css|scss)$': '<rootDir>/scripts/jest-css-stub.js', }, clearMocks: true, diff --git a/desktop/package.json b/desktop/package.json index 142c9702f2f..20343ea5d2a 100644 --- a/desktop/package.json +++ b/desktop/package.json @@ -101,7 +101,8 @@ "rimraf": "^3.0.2", "ts-jest": "^29.1.0", "ts-node": "^10.9.1", - "typescript": "^4.9.5" + "tsx": "^4.15.7", + "typescript": "^5.4.2" }, "homepage": "https://fbflipper.com/", "icon": "icon.png", @@ -119,32 +120,32 @@ }, "scripts": { "build": "yarn build:flipper-server", - "build-plugin": "./ts-node scripts/build-plugin.tsx", + "build-plugin": "tsx scripts/build-plugin.tsx", "build:eslint": "cd eslint-plugin-flipper && yarn build", - "build:flipper-server": "yarn build:tsc && ./ts-node scripts/build-flipper-server-release.tsx", + "build:flipper-server": "yarn build:tsc && tsx scripts/build-flipper-server-release.tsx", "build:themes": "lessc --js themes/light.less static/themes/light.css && lessc --js themes/dark.less static/themes/dark.css", - "build:tsc": "tsc -b tsc-root/tsconfig.json && ./ts-node ./scripts/compute-package-checksum.tsx -d ./babel-transformer -o ./lib/checksum.txt", - "bump-versions": "./ts-node scripts/bump-versions.tsx", - "bundle-all-plugins": "./ts-node scripts/bundle-all-plugins.tsx", + "build:tsc": "tsc -b tsc-root/tsconfig.json && tsx ./scripts/compute-package-checksum.tsx -d ./babel-transformer -o ./lib/checksum.txt", + "bump-versions": "tsx scripts/bump-versions.tsx", + "bundle-all-plugins": "tsx scripts/bundle-all-plugins.tsx", "docs": "cd ../website && yarn start", "fix": "eslint . --fix --ext .js,.ts,.tsx", - "flipper-server": "cross-env NODE_ENV=development ./ts-node scripts/start-flipper-server-dev.tsx", + "flipper-server": "cross-env NODE_ENV=development tsx scripts/start-flipper-server-dev.tsx", "lint": "yarn lint:eslint && yarn lint:tsc && yarn tsc-plugins && yarn run lint:types-deps", "lint:eslint": "eslint . --ext .js,.ts,.tsx", "lint:tsc": "tsc && tsc -p tsc-root/tsconfig.json --noemit", - "lint:types-deps": "./ts-node ./scripts/verify-types-dependencies.tsx", - "list-plugins": "./ts-node scripts/list-plugins.tsx", + "lint:types-deps": "tsx ./scripts/verify-types-dependencies.tsx", + "list-plugins": "tsx scripts/list-plugins.tsx", "open-dist": "open ../dist/mac/Flipper.app --args --launcher=false --inspect=9229", - "postinstall": "patch-package && yarn --cwd plugins install --mutex network:30331 && yarn tsc -b pkg-lib/tsconfig.json && ./ts-node scripts/remove-plugin-entry-points.tsx && yarn build:tsc && yarn build:themes", + "postinstall": "patch-package && yarn --cwd plugins install --mutex network:30331 && yarn tsc -b pkg-lib/tsconfig.json && tsx scripts/remove-plugin-entry-points.tsx && yarn build:tsc && yarn build:themes", "prebuild": "yarn build:tsc && yarn rm-dist && yarn build:themes", "predev-server": "yarn build:tsc", "preflipper-server": "yarn build:tsc", "preinstall": "node scripts/prepare-watchman-config.js && yarn config set ignore-engines", "prelint:eslint": "yarn build:eslint", "pretest": "yarn build:tsc", - "publish-packages": "./ts-node scripts/publish-packages.tsx", + "publish-packages": "tsx scripts/publish-packages.tsx", "reset": "yarn rm-dist && yarn rm-temp && yarn rm-metro-cache && yarn cache clean && yarn rm-bundle && yarn rm-modules", - "resolve-plugin-dir": "./ts-node scripts/resolve-plugin-dir.tsx", + "resolve-plugin-dir": "tsx scripts/resolve-plugin-dir.tsx", "rm-bundle": "rimraf static/main.bundle.* **/dist/bundle.* **/lib **/*.tsbuildinfo", "rm-dist": "rimraf ../dist", "rm-metro-cache": "rimraf $TMPDIR/metro-cache*", @@ -156,7 +157,7 @@ "start:no-bundled-plugins": "yarn start --no-bundled-plugins", "test": "cross-env TZ=Pacific/Pohnpei jest", "test:debug": "yarn build:tsc && cross-env TZ=Pacific/Pohnpei node --inspect node_modules/.bin/jest --runInBand", - "tsc-plugins": "./ts-node scripts/tsc-plugins.tsx", + "tsc-plugins": "tsx scripts/tsc-plugins.tsx", "watch": "cross-env TZ=Pacific/Pohnpei node --expose-gc --stack-trace-limit=40 ./node_modules/.bin/jest --watch" }, "engines": { @@ -164,12 +165,11 @@ "npm": "use yarn instead", "yarn": "^1.16" }, - "version": "0.246.0", + "version": "0.259.0", "workspaces": { "packages": [ "scripts", "babel-transformer", - "doctor", "pkg", "pkg-lib", "flipper-common", @@ -177,7 +177,6 @@ "flipper-server-client", "flipper-ui", "flipper-server", - "e2e", "plugin-lib", "test-utils", "eslint-plugin-flipper", @@ -188,5 +187,6 @@ }, "dependencies": { "js-flipper": "^0.182.0" - } + }, + "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610" } diff --git a/desktop/pkg-lib/src/__tests__/getWatchFolders.node.tsx b/desktop/pkg-lib/src/__tests__/getWatchFolders.node.tsx index 61ce26869d0..56a4db0178e 100644 --- a/desktop/pkg-lib/src/__tests__/getWatchFolders.node.tsx +++ b/desktop/pkg-lib/src/__tests__/getWatchFolders.node.tsx @@ -85,7 +85,7 @@ describe('getWatchFolders', () => { mockfs(files); const readJsonMock = async (file: string) => { if (!file.startsWith(rootDir)) { - throw new Error('File not found: ' + file); + throw new Error(`File not found: ${file}`); } const parts = file.substring(rootDir.length + 1).split(path.sep); let cur = files[rootDir] as any; diff --git a/desktop/pkg-lib/src/runBuild.tsx b/desktop/pkg-lib/src/runBuild.tsx index 4f300af8abd..e07e14b4b86 100644 --- a/desktop/pkg-lib/src/runBuild.tsx +++ b/desktop/pkg-lib/src/runBuild.tsx @@ -154,6 +154,8 @@ export default async function bundlePlugin( const bundleConfigs: RunBuildConfig[] = []; + await fs.remove(path.dirname(plugin.entry)); + await fs.ensureDir(path.dirname(plugin.entry)); bundleConfigs.push({ pluginDir, diff --git a/desktop/pkg/package.json b/desktop/pkg/package.json index 96e965dae26..9bee7c22f32 100644 --- a/desktop/pkg/package.json +++ b/desktop/pkg/package.json @@ -15,7 +15,7 @@ "@oclif/command": "^1.8.36", "@oclif/config": "^1.18.17", "@oclif/parser": "^3.8.17", - "@oclif/plugin-help": "^5.2.20", + "@oclif/plugin-help": "^3.3.1", "@oclif/plugin-warn-if-update-available": "^2.1.1", "ajv": "^6.12.2", "ajv-errors": "^1.0.1", diff --git a/desktop/pkg/src/commands/init.tsx b/desktop/pkg/src/commands/init.tsx index 77502f13bc1..b2c6e381a2c 100644 --- a/desktop/pkg/src/commands/init.tsx +++ b/desktop/pkg/src/commands/init.tsx @@ -139,7 +139,7 @@ export default class Init extends Command { } function getPackageNameFromId(id: string): string { - return 'flipper-plugin-' + id.toLowerCase().replace(/[^a-zA-Z0-9\-_]+/g, '-'); + return `flipper-plugin-${id.toLowerCase().replace(/[^a-zA-Z0-9\-_]+/g, '-')}`; } export async function initTemplate( diff --git a/desktop/pkg/src/utils/runMigrate.tsx b/desktop/pkg/src/utils/runMigrate.tsx index 17a97beeef1..cbf142f9fa3 100644 --- a/desktop/pkg/src/utils/runMigrate.tsx +++ b/desktop/pkg/src/utils/runMigrate.tsx @@ -112,12 +112,13 @@ export default async function ( } packageJson.scripts = { ...packageJson.scripts, - prepack: - (packageJson.scripts?.prepack + prepack: `${ + packageJson.scripts?.prepack ? // TODO: Fix this the next time the file is edited. // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - packageJson.scripts!.prepack! + ' && ' - : '') + 'flipper-pkg lint && flipper-pkg bundle', + `${packageJson.scripts!.prepack!} && ` + : '' + }flipper-pkg lint && flipper-pkg bundle`, }; } diff --git a/desktop/pkg/src/utils/yarn.tsx b/desktop/pkg/src/utils/yarn.tsx index e324a0de083..c75166e265f 100644 --- a/desktop/pkg/src/utils/yarn.tsx +++ b/desktop/pkg/src/utils/yarn.tsx @@ -12,7 +12,7 @@ import {exec as execImport} from 'child_process'; const exec = util.promisify(execImport); const WINDOWS = /^win/.test(process.platform); -const YARN_PATH = 'yarn' + (WINDOWS ? '.cmd' : ''); +const YARN_PATH = `yarn${WINDOWS ? '.cmd' : ''}`; export async function install(pkgDir: string) { const {stderr} = await exec(YARN_PATH, { diff --git a/desktop/plugin-lib/src/__tests__/pluginInstaller.node.tsx b/desktop/plugin-lib/src/__tests__/pluginInstaller.node.tsx index c8a666e4da2..bdec573d19b 100644 --- a/desktop/plugin-lib/src/__tests__/pluginInstaller.node.tsx +++ b/desktop/plugin-lib/src/__tests__/pluginInstaller.node.tsx @@ -163,7 +163,7 @@ describe('pluginInstaller', () => { expect(plugins).toHaveLength(0); }); - test('moveInstalledPluginsFromLegacyDir', async () => { + test.skip('moveInstalledPluginsFromLegacyDir', async () => { await moveInstalledPluginsFromLegacyDir(); expect( fs.pathExistsSync( diff --git a/desktop/plugins/package.json b/desktop/plugins/package.json index cb40f1649c6..1084f25c842 100644 --- a/desktop/plugins/package.json +++ b/desktop/plugins/package.json @@ -9,7 +9,8 @@ "devDependencies": { "fs-extra": "^9.0.1", "p-map": "^4.0.0", - "promisify-child-process": "^4.1.1" + "promisify-child-process": "^4.1.1", + "tsx": "^4.16.2" }, "peerDependencies": { "@ant-design/icons": "*", @@ -24,6 +25,6 @@ "react-dom": "*" }, "scripts": { - "postinstall": "cd .. && ./ts-node ./plugins/postinstall.tsx" + "postinstall": "tsx postinstall.tsx" } } diff --git a/desktop/plugins/public/cookies/index.tsx b/desktop/plugins/public/cookies/index.tsx new file mode 100644 index 00000000000..050decfab41 --- /dev/null +++ b/desktop/plugins/public/cookies/index.tsx @@ -0,0 +1,38 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import {DataTableColumn, createTablePlugin} from 'flipper-plugin'; + +type Row = { + id: number; + Name: string; + Expires: string; + Value: string; +}; + +const columns: DataTableColumn<Row>[] = [ + { + key: 'Name', + width: 250, + }, + { + key: 'Expires', + width: 250, + }, + { + key: 'Value', + }, +]; + +module.exports = createTablePlugin<Row>({ + columns, + key: 'id', + method: 'addCookie', + resetMethod: 'resetCookies', +}); diff --git a/desktop/plugins/public/cookies/package.json b/desktop/plugins/public/cookies/package.json new file mode 100644 index 00000000000..954b0320471 --- /dev/null +++ b/desktop/plugins/public/cookies/package.json @@ -0,0 +1,28 @@ +{ + "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json", + "name": "flipper-plugin-cookies", + "id": "cookies", + "pluginType": "client", + "version": "0.0.0", + "flipperBundlerEntry": "index.tsx", + "main": "dist/bundle.js", + "license": "MIT", + "title": "Cookies", + "icon": "apps", + "keywords": [ + "flipper-plugin", + "cookies" + ], + "description": "Flipper plugin to monitor NSHTTPCookieStorage", + "peerDependencies": { + "flipper-plugin": "*", + "antd": "*", + "react": "*", + "react-dom": "*", + "@emotion/styled": "*", + "@ant-design/icons": "*", + "@types/react": "*", + "@types/react-dom": "*", + "@types/node": "*" + } +} diff --git a/desktop/plugins/public/cpu/index.tsx b/desktop/plugins/public/cpu/index.tsx index 40e0516d344..00fbf8d757f 100644 --- a/desktop/plugins/public/cpu/index.tsx +++ b/desktop/plugins/public/cpu/index.tsx @@ -64,9 +64,9 @@ function formatFrequency(freq: number) { } else if (freq == -2) { return 'off'; } else if (freq > 1000 * 1000) { - return (freq / 1000 / 1000).toFixed(2) + ' GHz'; + return `${(freq / 1000 / 1000).toFixed(2)} GHz`; } else { - return freq / 1000 + ' MHz'; + return `${freq / 1000} MHz`; } } @@ -92,7 +92,7 @@ export function devicePlugin(client: PluginClient<{}, {}>) { type: string, ) => Promise<void> = async (core: number, type: string) => { const output = await executeShell( - 'cat /sys/devices/system/cpu/cpu' + core + '/cpufreq/' + type, + `cat /sys/devices/system/cpu/cpu${core}/cpufreq/${type}`, ); cpuState.update((draft) => { const newFreq = isNormalInteger(output) ? parseInt(output, 10) : -1; @@ -111,9 +111,7 @@ export function devicePlugin(client: PluginClient<{}, {}>) { core: number, ) => { const output = await executeShell( - 'cat /sys/devices/system/cpu/cpu' + - core + - '/cpufreq/scaling_available_frequencies', + `cat /sys/devices/system/cpu/cpu${core}/cpufreq/scaling_available_frequencies`, ); cpuState.update((draft) => { const freqs = output.split(' ').map((num: string) => { @@ -131,7 +129,7 @@ export function devicePlugin(client: PluginClient<{}, {}>) { core: number, ) => { const output = await executeShell( - 'cat /sys/devices/system/cpu/cpu' + core + '/cpufreq/scaling_governor', + `cat /sys/devices/system/cpu/cpu${core}/cpufreq/scaling_governor`, ); cpuState.update((draft) => { if (output.toLowerCase().includes('no such file')) { @@ -146,9 +144,7 @@ export function devicePlugin(client: PluginClient<{}, {}>) { core: number, ) => { const output = await executeShell( - 'cat /sys/devices/system/cpu/cpu' + - core + - '/cpufreq/scaling_available_governors', + `cat /sys/devices/system/cpu/cpu${core}/cpufreq/scaling_available_governors`, ); return output.split(' '); }; @@ -176,25 +172,25 @@ export function devicePlugin(client: PluginClient<{}, {}>) { output.startsWith('apq') || output.startsWith('sdm') ) { - hwInfo = 'QUALCOMM ' + output.toUpperCase(); + hwInfo = `QUALCOMM ${output.toUpperCase()}`; } else if (output.startsWith('exynos')) { const chipname = await executeShell('getprop ro.chipname'); if (chipname != null) { cpuState.update((draft) => { - draft.hardwareInfo = 'SAMSUMG ' + chipname.toUpperCase(); + draft.hardwareInfo = `SAMSUMG ${chipname.toUpperCase()}`; }); } return; } else if (output.startsWith('mt')) { - hwInfo = 'MEDIATEK ' + output.toUpperCase(); + hwInfo = `MEDIATEK ${output.toUpperCase()}`; } else if (output.startsWith('sc')) { - hwInfo = 'SPREADTRUM ' + output.toUpperCase(); + hwInfo = `SPREADTRUM ${output.toUpperCase()}`; } else if (output.startsWith('hi') || output.startsWith('kirin')) { - hwInfo = 'HISILICON ' + output.toUpperCase(); + hwInfo = `HISILICON ${output.toUpperCase()}`; } else if (output.startsWith('rk')) { - hwInfo = 'ROCKCHIP ' + output.toUpperCase(); + hwInfo = `ROCKCHIP ${output.toUpperCase()}`; } else if (output.startsWith('bcm')) { - hwInfo = 'BROADCOM ' + output.toUpperCase(); + hwInfo = `BROADCOM ${output.toUpperCase()}`; } cpuState.update((draft) => { draft.hardwareInfo = hwInfo; @@ -204,7 +200,7 @@ export function devicePlugin(client: PluginClient<{}, {}>) { const readThermalZones = async () => { const thermal_dir = '/sys/class/thermal/'; const map = {}; - const output = await executeShell('ls ' + thermal_dir); + const output = await executeShell(`ls ${thermal_dir}`); if (output.toLowerCase().includes('permission denied')) { cpuState.update((draft) => { draft.thermalAccessible = false; @@ -232,11 +228,11 @@ export function devicePlugin(client: PluginClient<{}, {}>) { }; const readThermalZone = async (path: string, dir: string, map: any) => { - const type = await executeShell('cat ' + path + '/type'); + const type = await executeShell(`cat ${path}/type`); if (type.length == 0) { return; } - const temp = await executeShell('cat ' + path + '/temp'); + const temp = await executeShell(`cat ${path}/temp`); if (Number.isNaN(Number(temp))) { return; } @@ -345,7 +341,7 @@ export function devicePlugin(client: PluginClient<{}, {}>) { } cpuState.set({ cpuCount: count, - cpuFreq: cpuFreq, + cpuFreq, monitoring: false, hardwareInfo: '', temperatureMap: {}, @@ -414,8 +410,7 @@ export function Component() { let availableFreqTitle = 'Scaling Available Frequencies'; const selected = cpuState.cpuFreq[id]; if (selected.scaling_available_freqs.length > 0) { - availableFreqTitle += - ' (' + selected.scaling_available_freqs.length.toString() + ')'; + availableFreqTitle += ` (${selected.scaling_available_freqs.length.toString()})`; } const keys = [availableFreqTitle, 'Scaling Available Governors']; @@ -525,7 +520,7 @@ function buildAvailableGovList(freq: CPUFrequency): string { function buildSidebarRow(key: string, val: any) { return { - key: key, + key, value: val, }; } diff --git a/desktop/plugins/public/crash_reporter/crash-utils.tsx b/desktop/plugins/public/crash_reporter/crash-utils.tsx index 11820b06afc..637d4eced08 100644 --- a/desktop/plugins/public/crash_reporter/crash-utils.tsx +++ b/desktop/plugins/public/crash_reporter/crash-utils.tsx @@ -18,7 +18,7 @@ function truncate(baseString: string, numOfChars: number): string { return baseString; } const truncated_string = unicodeSubstring(baseString, 0, numOfChars - 1); - return truncated_string + '\u2026'; + return `${truncated_string}\u2026`; } function trimCallStackIfPossible(callstack: string): string { @@ -38,11 +38,11 @@ export function showCrashNotification( return; } - let title: string = 'CRASH: ' + truncate(crash.name || crash.reason, 50); + let title: string = `CRASH: ${truncate(crash.name || crash.reason, 50)}`; title = `${ crash.name == crash.reason ? title - : title + 'Reason: ' + truncate(crash.reason, 50) + : `${title}Reason: ${truncate(crash.reason, 50)}` }`; const callstack = crash.callstack ? trimCallStackIfPossible(crash.callstack) @@ -53,7 +53,7 @@ export function showCrashNotification( id: crash.notificationID, message: msg, severity: 'error', - title: title, + title, action: crash.notificationID, category: crash.reason || 'Unknown reason', }); diff --git a/desktop/plugins/public/databases/DatabasesPlugin.tsx b/desktop/plugins/public/databases/DatabasesPlugin.tsx index f1c07510252..805a3d49fef 100644 --- a/desktop/plugins/public/databases/DatabasesPlugin.tsx +++ b/desktop/plugins/public/databases/DatabasesPlugin.tsx @@ -122,7 +122,7 @@ const QueryHistory = React.memo(({history}: {history: Array<Query>}) => { const value = query.value; rows.push({ key: `${i}`, - columns: {time: {value: time}, query: {value: value}}, + columns: {time: {value: time}, query: {value}}, }); } } @@ -445,7 +445,7 @@ export function Component() { const onGoToRow = useCallback( (row: number, _count: number) => { - instance.goToRow({row: row}); + instance.goToRow({row}); }, [instance], ); diff --git a/desktop/plugins/public/databases/index.tsx b/desktop/plugins/public/databases/index.tsx index df381daf6ca..4774cc0edf8 100644 --- a/desktop/plugins/public/databases/index.tsx +++ b/desktop/plugins/public/databases/index.tsx @@ -132,7 +132,7 @@ export function plugin(client: PluginClient<Events, Methods>) { ...state, databases, outdatedDatabaseList: false, - selectedDatabase: selectedDatabase, + selectedDatabase, selectedDatabaseTable: selectedTable, pageRowNumber: 0, currentPage: sameTableSelected ? state.currentPage : null, @@ -402,13 +402,13 @@ export function plugin(client: PluginClient<Events, Methods>) { databaseId: newState.selectedDatabase, order: newState.currentSort?.key, reverse: (newState.currentSort?.direction || 'up') === 'down', - table: table, + table, start: newState.pageRowNumber, }) .then((data) => { updatePage({ - databaseId: databaseId, - table: table, + databaseId, + table, columns: data.columns, rows: data.values, start: data.start, @@ -426,13 +426,13 @@ export function plugin(client: PluginClient<Events, Methods>) { if (newState.currentStructure === null && databaseId && table) { client .send('getTableStructure', { - databaseId: databaseId, - table: table, + databaseId, + table, }) .then((data) => { updateStructure({ - databaseId: databaseId, - table: table, + databaseId, + table, columns: data.structureColumns, rows: data.structureValues, indexesColumns: data.indexesColumns, @@ -453,8 +453,8 @@ export function plugin(client: PluginClient<Events, Methods>) { ) { client .send('getTableInfo', { - databaseId: databaseId, - table: table, + databaseId, + table, }) .then((data) => { updateTableInfo({ diff --git a/desktop/plugins/public/databases/utils.tsx b/desktop/plugins/public/databases/utils.tsx index 2873c20668f..9801f06d2c5 100644 --- a/desktop/plugins/public/databases/utils.tsx +++ b/desktop/plugins/public/databases/utils.tsx @@ -20,7 +20,7 @@ export function getStringFromErrorLike(e: any): string { } catch (e) { // Stringify might fail on arbitrary structures // Last resort: toString it. - return '' + e; + return `${e}`; } } } diff --git a/desktop/plugins/public/example/index.tsx b/desktop/plugins/public/example/index.tsx index 4200c5e349a..7fda7404b83 100644 --- a/desktop/plugins/public/example/index.tsx +++ b/desktop/plugins/public/example/index.tsx @@ -54,10 +54,10 @@ export function plugin(client: PluginClient<Events, Methods>) { */ client.onMessage('triggerNotification', ({id}) => { client.showNotification({ - id: 'test-notification:' + id, + id: `test-notification:${id}`, message: 'Example Notification', severity: 'warning' as 'warning', - title: 'Notification: ' + id, + title: `Notification: ${id}`, }); }); @@ -78,7 +78,7 @@ export function plugin(client: PluginClient<Events, Methods>) { nextMessage.set(''); } catch (e) { console.warn('Error returned from client', e); - message.error('Failed to get response from client ' + e); + message.error(`Failed to get response from client ${e}`); } } } diff --git a/desktop/plugins/public/fresco/ImagesCacheOverview.tsx b/desktop/plugins/public/fresco/ImagesCacheOverview.tsx index 593858494fa..bfd438170c5 100644 --- a/desktop/plugins/public/fresco/ImagesCacheOverview.tsx +++ b/desktop/plugins/public/fresco/ImagesCacheOverview.tsx @@ -35,11 +35,11 @@ export function toKB(bytes: number) { } export function formatMB(bytes: number) { - return toMB(bytes) + 'MB'; + return `${toMB(bytes)}MB`; } export function formatKB(bytes: number) { - return Math.floor(bytes / 1024) + 'KB'; + return `${Math.floor(bytes / 1024)}KB`; } type ToggleProps = { @@ -204,7 +204,7 @@ export default class ImagesCacheOverview extends PureComponent< {this.props.images.map((data: CacheInfo, index: number) => { const maxSize = data.maxSizeBytes; const subtitle = maxSize - ? formatMB(data.sizeBytes) + ' / ' + formatMB(maxSize) + ? `${formatMB(data.sizeBytes)} / ${formatMB(maxSize)}` : formatMB(data.sizeBytes); const onClear = data.clearKey !== undefined diff --git a/desktop/plugins/public/fresco/ImagesMemoryOverview.tsx b/desktop/plugins/public/fresco/ImagesMemoryOverview.tsx index f9e35ae9b75..511c219309a 100644 --- a/desktop/plugins/public/fresco/ImagesMemoryOverview.tsx +++ b/desktop/plugins/public/fresco/ImagesMemoryOverview.tsx @@ -64,7 +64,7 @@ export default class ImagesMemoryOverview extends PureComponent<ImagesMemoryOver this.filterCachesToDisplay(this.props.images).forEach((cache) => { if (cache.maxSizeBytes) { imagesList.push({ - cacheType: 'Free space - ' + cache.cacheType, + cacheType: `Free space - ${cache.cacheType}`, sizeBytes: cache.maxSizeBytes - cache.sizeBytes, imageIds: [], }); @@ -84,8 +84,7 @@ export default class ImagesMemoryOverview extends PureComponent<ImagesMemoryOver return { size: toKB(cacheInfo.sizeBytes), style: STYLE, - title: - cacheInfo.cacheType + ' (' + formatMB(cacheInfo.sizeBytes) + ')', + title: `${cacheInfo.cacheType} (${formatMB(cacheInfo.sizeBytes)})`, value: toKB(cacheInfo.sizeBytes), children: cacheInfo.imageIds .filter((imageId) => this.props.imagesMap[imageId] != null) diff --git a/desktop/plugins/public/fresco/ImagesSidebar.tsx b/desktop/plugins/public/fresco/ImagesSidebar.tsx index 7ac35dfc8a1..4c0ae937e5d 100644 --- a/desktop/plugins/public/fresco/ImagesSidebar.tsx +++ b/desktop/plugins/public/fresco/ImagesSidebar.tsx @@ -134,7 +134,7 @@ class EventDetails extends Component<{ <span key="sep">: </span> <DataDescription type="string" - value={viewport.width + 'x' + viewport.height} + value={`${viewport.width}x${viewport.height}`} setValue={null} /> </p> @@ -145,9 +145,9 @@ class EventDetails extends Component<{ function requestHeader(event: ImageEventWithId) { const date = new Date(event.startTime); - const dateString = `${date.toTimeString().split(' ')[0]}.${( - '000' + date.getMilliseconds() - ).substr(-3)}`; + const dateString = `${date.toTimeString().split(' ')[0]}.${`000${date.getMilliseconds()}`.substr( + -3, + )}`; - return (event.viewport ? 'Request' : 'Prefetch') + ' at ' + dateString; + return `${event.viewport ? 'Request' : 'Prefetch'} at ${dateString}`; } diff --git a/desktop/plugins/public/fresco/index.tsx b/desktop/plugins/public/fresco/index.tsx index cf5796bb13a..0ad847de396 100644 --- a/desktop/plugins/public/fresco/index.tsx +++ b/desktop/plugins/public/fresco/index.tsx @@ -168,7 +168,7 @@ export function plugin(client: PluginClient<Events, Methods>) { }); imageDataList.push(imageData); } catch (e) { - console.error('[fresco] getImage failed:', e); + console.warn('[fresco] getImage failed:', e); } } @@ -237,11 +237,11 @@ export function plugin(client: PluginClient<Events, Methods>) { debugLog(`Cannot fetch image ${imageId}: disconnected`); return; } - debugLog('<- getImage requested for ' + imageId); + debugLog(`<- getImage requested for ${imageId}`); client .send('getImage', {imageId}) .then((image: ImageData) => { - debugLog('-> getImage ' + imageId + ' returned'); + debugLog(`-> getImage ${imageId} returned`); imagePool.get()?._fetchCompleted(image); }) .catch((e) => console.error('[fresco] getImage failed:', e)); @@ -351,7 +351,7 @@ export function plugin(client: PluginClient<Events, Methods>) { } function updateCaches(reason: string) { - debugLog('Requesting images list (reason=' + reason + ')'); + debugLog(`Requesting images list (reason=${reason})`); client .send('listImages', { showDiskImages: showDiskImages.get(), diff --git a/desktop/plugins/public/hermesdebuggerrn/ChromeDevTools.tsx b/desktop/plugins/public/hermesdebuggerrn/ChromeDevTools.tsx index b59282a6dd0..430f68a1686 100644 --- a/desktop/plugins/public/hermesdebuggerrn/ChromeDevTools.tsx +++ b/desktop/plugins/public/hermesdebuggerrn/ChromeDevTools.tsx @@ -57,7 +57,7 @@ function createDevToolsNode( } function findDevToolsNode(url: string): HTMLElement | null { - return document.querySelector('#' + devToolsNodeId(url)); + return document.querySelector(`#${devToolsNodeId(url)}`); } function attachDevTools(devToolsNode: HTMLElement) { diff --git a/desktop/plugins/public/kaios-ram/index.tsx b/desktop/plugins/public/kaios-ram/index.tsx index 06c77b0ed81..7c1bc7f18d8 100644 --- a/desktop/plugins/public/kaios-ram/index.tsx +++ b/desktop/plugins/public/kaios-ram/index.tsx @@ -177,11 +177,11 @@ export default class KaiOSGraphs extends FlipperDevicePlugin<State, any, any> { if (name !== 'b2g') { const ussString = fields[appInfoSectionFieldToIndex['USS']]; const uss = ussString ? parseFloat(ussString) : -1; - appInfoData[name + ' USS'] = uss; + appInfoData[`${name} USS`] = uss; } else { const rssString = fields[appInfoSectionFieldToIndex['RSS']]; const rss = rssString ? parseFloat(rssString) : -1; - appInfoData[name + ' RSS'] = rss; + appInfoData[`${name} RSS`] = rss; } } if (line.startsWith('NAME')) { diff --git a/desktop/plugins/public/layout/InspectorSidebar.tsx b/desktop/plugins/public/layout/InspectorSidebar.tsx index 76c29cf0992..a5ea21b2ab3 100644 --- a/desktop/plugins/public/layout/InspectorSidebar.tsx +++ b/desktop/plugins/public/layout/InspectorSidebar.tsx @@ -129,7 +129,7 @@ const Sidebar: React.FC<Props> = (props: Props) => { sectionDefs.push({ key: extraSection, id: extraSection, - data: data, + data, }); } } else { @@ -156,7 +156,7 @@ const Sidebar: React.FC<Props> = (props: Props) => { name: props.element?.name, }) .then((response) => { - setElementSnapshot({element: element, snapshot: response.snapshot}); + setElementSnapshot({element, snapshot: response.snapshot}); }) .catch((e) => { console.log( @@ -208,7 +208,7 @@ const Sidebar: React.FC<Props> = (props: Props) => { marginRight: 'auto', width: '100%', }} - src={'data:image/png;base64,' + elementSnapshot?.snapshot} + src={`data:image/png;base64,${elementSnapshot?.snapshot}`} /> </Panel> ) : null; diff --git a/desktop/plugins/public/layout/Search.tsx b/desktop/plugins/public/layout/Search.tsx index 6a8345a6ef3..ee3ec959b0d 100644 --- a/desktop/plugins/public/layout/Search.tsx +++ b/desktop/plugins/public/layout/Search.tsx @@ -165,7 +165,7 @@ export default class Search extends Component<Props, State> { matches: new Set( searchResults.filter((x) => x.isMatch).map((x) => x.element.id), ), - query: query, + query, }); } diff --git a/desktop/plugins/public/layout/docs/setup.mdx b/desktop/plugins/public/layout/docs/setup.mdx index d0712cf4c30..268d3e63451 100644 --- a/desktop/plugins/public/layout/docs/setup.mdx +++ b/desktop/plugins/public/layout/docs/setup.mdx @@ -27,7 +27,7 @@ You also need to compile in the `litho-annotations` package, as Flipper reflects ```groovy dependencies { - debugImplementation 'com.facebook.flipper:flipper-litho-plugin:0.246.0' + debugImplementation 'com.facebook.flipper:flipper-litho-plugin:0.259.0' debugImplementation 'com.facebook.litho:litho-annotations:0.19.0' // ... } diff --git a/desktop/plugins/public/layout/index.tsx b/desktop/plugins/public/layout/index.tsx index fad35a025c7..e17bf59a532 100644 --- a/desktop/plugins/public/layout/index.tsx +++ b/desktop/plugins/public/layout/index.tsx @@ -298,7 +298,7 @@ export default class LayoutPlugin extends FlipperPlugin< this.client .call('setResolvedPath', { className: params.className, - resolvedPath: resolvedPath, + resolvedPath, }) .catch((e) => { console.warn('[Layout] setResolvePath failed with error', e); @@ -451,10 +451,10 @@ export default class LayoutPlugin extends FlipperPlugin< this.setState({visualizerWindow: null}); }; visualizerWindow.onresize = () => { - this.setState({visualizerWindow: visualizerWindow}); + this.setState({visualizerWindow}); }; visualizerWindow.onload = () => { - this.setState({visualizerWindow: visualizerWindow}); + this.setState({visualizerWindow}); }; } }; diff --git a/desktop/plugins/public/leak_canary/docs/setup.mdx b/desktop/plugins/public/leak_canary/docs/setup.mdx index 5a555a3b635..406238b2917 100644 --- a/desktop/plugins/public/leak_canary/docs/setup.mdx +++ b/desktop/plugins/public/leak_canary/docs/setup.mdx @@ -8,7 +8,7 @@ To setup the <Link to={useBaseUrl("/docs/features/plugins/leak-canary")}>LeakCan ```groovy dependencies { - debugImplementation 'com.facebook.flipper:flipper-leakcanary2-plugin:0.246.0' + debugImplementation 'com.facebook.flipper:flipper-leakcanary2-plugin:0.259.0' debugImplementation 'com.squareup.leakcanary:leakcanary-android:2.8.1' } ``` diff --git a/desktop/plugins/public/leak_canary/index.tsx b/desktop/plugins/public/leak_canary/index.tsx index 86f19de43ad..39cadbbbf06 100644 --- a/desktop/plugins/public/leak_canary/index.tsx +++ b/desktop/plugins/public/leak_canary/index.tsx @@ -109,7 +109,7 @@ export default class LeakCanary<PersistedState> extends FlipperPlugin< } this.setState({ - leaks: leaks, + leaks, leaksCount: leaks.length, }); }; @@ -159,7 +159,7 @@ export default class LeakCanary<PersistedState> extends FlipperPlugin< elementSimple.expanded = !elementSimple.expanded; this.setState({ - leaks: leaks, + leaks, }); }; @@ -172,13 +172,13 @@ export default class LeakCanary<PersistedState> extends FlipperPlugin< _: number, // depth ): {mutable: boolean; type: DataDescriptionType; value: any} { if (!isNaN(value)) { - return {mutable: false, type: 'number', value: value}; + return {mutable: false, type: 'number', value}; } else if (value == 'true' || value == 'false') { - return {mutable: false, type: 'boolean', value: value}; + return {mutable: false, type: 'boolean', value}; } else if (value == 'null') { - return {mutable: false, type: 'null', value: value}; + return {mutable: false, type: 'null', value}; } - return {mutable: false, type: 'enum', value: value}; + return {mutable: false, type: 'enum', value}; } renderSidebar() { diff --git a/desktop/plugins/public/leak_canary/processLeakString.tsx b/desktop/plugins/public/leak_canary/processLeakString.tsx index 523803ccf4e..ee23d7e44b5 100644 --- a/desktop/plugins/public/leak_canary/processLeakString.tsx +++ b/desktop/plugins/public/leak_canary/processLeakString.tsx @@ -250,7 +250,7 @@ function processLeak(output: Leak[], leakInfo: string): Leak[] { elementsSimple: toObjectMap(elementsSimple), staticFields: toObjectMap(staticFields, true), instanceFields: toObjectMap(instanceFields, true), - retainedSize: retainedSize, + retainedSize, }); return output; } diff --git a/desktop/plugins/public/logs/index.tsx b/desktop/plugins/public/logs/index.tsx index 241ece6e7dd..8192bcfbf3a 100644 --- a/desktop/plugins/public/logs/index.tsx +++ b/desktop/plugins/public/logs/index.tsx @@ -159,7 +159,7 @@ export function devicePlugin(client: DevicePluginClient) { client.onDeepLink((payload: unknown) => { if (typeof payload === 'string') { tableManagerRef.current?.setSearchExpression(powerSearchInitialState); - // timeout as we want to await restoring any previous scroll positin first, then scroll to the + // timeout as we want to await restoring any previous scroll position first, then scroll to them setTimeout(() => { let hasMatch = false; rows.view.output(0, rows.view.size).forEach((row, index) => { @@ -275,12 +275,13 @@ export function Component() { plugin.isConnected ? ( <> <Button + type="ghost" title={`Click to ${paused ? 'resume' : 'pause'} the log stream`} danger={paused} onClick={plugin.resumePause}> {paused ? <PlayCircleOutlined /> : <PauseCircleOutlined />} </Button> - <Button title="Clear logs" onClick={plugin.clearLogs}> + <Button type="ghost" title="Clear logs" onClick={plugin.clearLogs}> <DeleteOutlined /> </Button> </> diff --git a/desktop/plugins/public/navigation/util/appMatchPatterns.tsx b/desktop/plugins/public/navigation/util/appMatchPatterns.tsx index ca50a3ee6fa..1bc043deca0 100644 --- a/desktop/plugins/public/navigation/util/appMatchPatterns.tsx +++ b/desktop/plugins/public/navigation/util/appMatchPatterns.tsx @@ -43,7 +43,7 @@ export const getAppMatchPatterns = ( await getFlipperLib().remoteServerContext.fs.readFile(patternsFilePath); return JSON.parse(patternsFileContentString); } else if (appName != null) { - console.log('No rule for app ' + appName); + console.log(`No rule for app ${appName}`); resolve([]); } else { reject(new Error('selectedApp was null')); diff --git a/desktop/plugins/public/navigation/util/autoCompleteProvider.tsx b/desktop/plugins/public/navigation/util/autoCompleteProvider.tsx index 7f86f4ac550..03f32f4b1fa 100644 --- a/desktop/plugins/public/navigation/util/autoCompleteProvider.tsx +++ b/desktop/plugins/public/navigation/util/autoCompleteProvider.tsx @@ -30,7 +30,7 @@ export const bookmarksToAutoCompleteProvider = ( matchPatterns: new Map<string, URI>(), } as AutoCompleteProvider; bookmarks.forEach((bookmark, uri) => { - const matchPattern = bookmark.commonName + ' - ' + uri; + const matchPattern = `${bookmark.commonName} - ${uri}`; autoCompleteProvider.matchPatterns.set(matchPattern, uri); }); return autoCompleteProvider; @@ -44,8 +44,7 @@ export const appMatchPatternsToAutoCompleteProvider = ( matchPatterns: new Map<string, URI>(), }; appMatchPatterns.forEach((appMatchPattern) => { - const matchPattern = - appMatchPattern.className + ' - ' + appMatchPattern.pattern; + const matchPattern = `${appMatchPattern.className} - ${appMatchPattern.pattern}`; autoCompleteProvider.matchPatterns.set( matchPattern, appMatchPattern.pattern, diff --git a/desktop/plugins/public/network/ProtobufDefinitionsRepository.tsx b/desktop/plugins/public/network/ProtobufDefinitionsRepository.tsx index 794420ba193..99356ad6b8d 100644 --- a/desktop/plugins/public/network/ProtobufDefinitionsRepository.tsx +++ b/desktop/plugins/public/network/ProtobufDefinitionsRepository.tsx @@ -30,7 +30,7 @@ export class ProtobufDefinitionsRepository { public addDefinitions(baseUrl: string, definitions: ProtobufDefinition[]) { for (const d of definitions) { if (!baseUrl.endsWith('/') && d.path.substr(0, 1) != '/') { - this.rawDefinitions[this.key(d.method, baseUrl + '/' + d.path)] = d; + this.rawDefinitions[this.key(d.method, `${baseUrl}/${d.path}`)] = d; } else { this.rawDefinitions[this.key(d.method, baseUrl + d.path)] = d; } @@ -84,7 +84,7 @@ export class ProtobufDefinitionsRepository { } private key(method: string, path: string): string { - return method + '::' + path.split('?')[0]; + return `${method}::${path.split('?')[0]}`; } } diff --git a/desktop/plugins/public/network/RequestDataDB.tsx b/desktop/plugins/public/network/RequestDataDB.tsx new file mode 100644 index 00000000000..d4d31428429 --- /dev/null +++ b/desktop/plugins/public/network/RequestDataDB.tsx @@ -0,0 +1,113 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import {openDB, deleteDB, DBSchema, IDBPDatabase} from 'idb'; +import {Request, RequestWithData} from './types'; +interface RequestDBSchema extends DBSchema { + requests: { + key: string; + value: string | Uint8Array | undefined; + }; + responses: { + key: string; + value: string | Uint8Array | undefined; + }; +} +export type Data = string | Uint8Array | undefined; + +let shouldWipeDB = true; +let instanceId = 0; + +const dbName = 'network-plugin-data'; + +export class RequestDataDB { + private dbPromise: Promise<IDBPDatabase<RequestDBSchema>> | null = null; + private instanceId: string; + constructor() { + this.instanceId = (instanceId++).toString(); + } + private async initializeDB(): Promise<IDBPDatabase<RequestDBSchema>> { + if (this.dbPromise) { + return this.dbPromise; + } + + this.dbPromise = (async () => { + if (shouldWipeDB) { + shouldWipeDB = false; + console.log('[network] Deleting database'); + + try { + await this.deleteDBWithTimeout(); + console.log('[network] Database deleted successfully'); + } catch (e) { + console.warn('[network] Failed to delete database', e); + } + } + return openDB<RequestDBSchema>(dbName, 1, { + upgrade(db) { + db.createObjectStore('requests'); + db.createObjectStore('responses'); + console.log('[network] Created db object stores', dbName); + }, + }); + })(); + return this.dbPromise; + } + deleteDBWithTimeout(timeout = 5000): Promise<void> { + return new Promise((resolve, reject) => { + const timeoutId = setTimeout(() => { + reject( + new Error( + '[network] Timeout: Unable to delete database, probably due to open connections', + ), + ); + }, timeout); + deleteDB(dbName) + .then(() => { + clearTimeout(timeoutId); + resolve(); + }) + .catch(reject); + }); + } + async storeRequestData(id: string, data: Data) { + const db = await this.initializeDB(); + return db.put('requests', data, id + this.instanceId); + } + async getRequestData(id: string): Promise<Data> { + const db = await this.initializeDB(); + return db.get('requests', id + this.instanceId); + } + async storeResponseData(id: string, data: Data) { + const db = await this.initializeDB(); + return db.put('responses', data, id + this.instanceId); + } + async getResponseData(id: string): Promise<Data> { + const db = await this.initializeDB(); + return db.get('responses', id + this.instanceId); + } + + async closeConnection() { + const db = await this.initializeDB(); + db.close(); + this.dbPromise = null; + console.log( + `[network] Closed Connection to db for instance ${this.instanceId}`, + ); + } + async addDataToRequest(request: Request): Promise<RequestWithData> { + const requestData = await this.getRequestData(request.id); + const responseData = await this.getResponseData(request.id); + return { + ...request, + requestData, + responseData, + }; + } +} diff --git a/desktop/plugins/public/network/RequestDetails.tsx b/desktop/plugins/public/network/RequestDetails.tsx index f627c540cd4..085ebac8880 100644 --- a/desktop/plugins/public/network/RequestDetails.tsx +++ b/desktop/plugins/public/network/RequestDetails.tsx @@ -27,18 +27,20 @@ import { bodyAsString, formatBytes, getHeaderValue, + parseJsonWithBigInt, queryToObj, } from './utils'; -import {Request, Header, Insights, RetryInsights} from './types'; +import {Header, Insights, RetryInsights, RequestWithData} from './types'; import {BodyOptions} from './index'; import {ProtobufDefinitionsRepository} from './ProtobufDefinitionsRepository'; import {KeyValueItem, KeyValueTable} from './KeyValueTable'; import {CopyOutlined} from '@ant-design/icons'; +import {stringify} from 'lossless-json'; const {Text} = Typography; type RequestDetailsProps = { - request: Request; + request: RequestWithData; bodyFormat: string; onSelectFormat: (bodyFormat: string) => void; onCopyText(test: string): void; @@ -131,7 +133,7 @@ export default class RequestDetails extends Component<RequestDetailsProps> { typeof request.responseData === 'string' && request.responseData ? ( <CopyOutlined - title="Copy response body" + title="Copy raw response body" onClick={(e) => { e.stopPropagation(); onCopyText(request.responseData as string); @@ -208,12 +210,12 @@ class HeaderInspector extends Component< } type BodyFormatter = { - formatRequest?: (request: Request) => any; - formatResponse?: (request: Request) => any; + formatRequest?: (request: RequestWithData) => any; + formatResponse?: (request: RequestWithData) => any; }; class RequestBodyInspector extends Component<{ - request: Request; + request: RequestWithData; formattedText: boolean; }> { render() { @@ -238,7 +240,7 @@ class RequestBodyInspector extends Component<{ } } catch (e) { console.warn( - 'BodyFormatter exception from ' + formatter.constructor.name, + `BodyFormatter exception from ${formatter.constructor.name}`, e.message, ); } @@ -249,7 +251,7 @@ class RequestBodyInspector extends Component<{ } class ResponseBodyInspector extends Component<{ - request: Request; + request: RequestWithData; formattedText: boolean; }> { render() { @@ -274,7 +276,7 @@ class ResponseBodyInspector extends Component<{ } } catch (e) { console.warn( - 'BodyFormatter exception from ' + formatter.constructor.name, + `BodyFormatter exception from ${formatter.constructor.name}`, e.message, ); } @@ -298,7 +300,7 @@ const Empty = () => ( </Layout.Container> ); -function renderRawBody(request: Request, mode: 'request' | 'response') { +function renderRawBody(request: RequestWithData, mode: 'request' | 'response') { const data = mode === 'request' ? request.requestData : request.responseData; return ( <Layout.Container gap> @@ -357,7 +359,7 @@ class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> { } class ImageFormatter { - formatResponse(request: Request) { + formatResponse(request: RequestWithData) { if ( getHeaderValue(request.responseHeaders, 'content-type').startsWith( 'image/', @@ -387,7 +389,7 @@ class VideoFormatter { maxHeight: 500, }); - formatResponse = (request: Request) => { + formatResponse = (request: RequestWithData) => { const contentType = getHeaderValue(request.responseHeaders, 'content-type'); if (contentType.startsWith('video/')) { return ( @@ -406,7 +408,7 @@ class JSONText extends Component<{children: any}> { const jsonObject = this.props.children; return ( <CodeBlock> - {JSON.stringify(jsonObject, null, 2)} + {stringify(jsonObject, null, 2)} {'\n'} </CodeBlock> ); @@ -426,14 +428,14 @@ class XMLText extends Component<{body: any}> { } class JSONTextFormatter { - formatRequest(request: Request) { + formatRequest(request: RequestWithData) { return this.format( bodyAsString(request.requestData), getHeaderValue(request.requestHeaders, 'content-type'), ); } - formatResponse(request: Request) { + formatResponse(request: RequestWithData) { return this.format( bodyAsString(request.responseData), getHeaderValue(request.responseHeaders, 'content-type'), @@ -448,7 +450,7 @@ class JSONTextFormatter { contentType.startsWith('application/x-fb-flatbuffer') ) { try { - const data = JSON.parse(body); + const data = parseJsonWithBigInt(body); return <JSONText>{data}</JSONText>; } catch (SyntaxError) { // Multiple top level JSON roots, map them one by one @@ -462,14 +464,14 @@ class JSONTextFormatter { } class XMLTextFormatter { - formatRequest(request: Request) { + formatRequest(request: RequestWithData) { return this.format( bodyAsString(request.requestData), getHeaderValue(request.requestHeaders, 'content-type'), ); } - formatResponse(request: Request) { + formatResponse(request: RequestWithData) { return this.format( bodyAsString(request.responseData), getHeaderValue(request.responseHeaders, 'content-type'), @@ -488,14 +490,14 @@ class XMLTextFormatter { } class JSONFormatter { - formatRequest(request: Request) { + formatRequest(request: RequestWithData) { return this.format( bodyAsString(request.requestData), getHeaderValue(request.requestHeaders, 'content-type'), ); } - formatResponse(request: Request) { + formatResponse(request: RequestWithData) { return this.format( bodyAsString(request.responseData), getHeaderValue(request.responseHeaders, 'content-type'), @@ -528,7 +530,7 @@ class JSONFormatter { } class LogEventFormatter { - formatRequest(request: Request) { + formatRequest(request: RequestWithData) { if (request.url.indexOf('logging_client_event') > 0) { const data = queryToObj(bodyAsString(request.requestData)); if (typeof data.message === 'string') { @@ -540,7 +542,7 @@ class LogEventFormatter { } class GraphQLBatchFormatter { - formatRequest(request: Request) { + formatRequest(request: RequestWithData) { if (request.url.indexOf('graphqlbatch') > 0) { const data = queryToObj(bodyAsString(request.requestData)); if (typeof data.queries === 'string') { @@ -571,12 +573,13 @@ class GraphQLFormatter { const timeAtFlushMs = serverMetadata['time_at_flush_ms']; return ( <Text type="secondary"> - {'Server wall time for initial response (ms): ' + - (timeAtFlushMs - requestStartMs)} + {`Server wall time for initial response (ms): ${ + timeAtFlushMs - requestStartMs + }`} </Text> ); } - formatRequest(request: Request) { + formatRequest(request: RequestWithData) { if (request.url.indexOf('graphql') > 0) { const decoded = request.requestData; if (!decoded) { @@ -593,7 +596,7 @@ class GraphQLFormatter { } } - formatResponse(request: Request) { + formatResponse(request: RequestWithData) { return this.format( // TODO: Fix this the next time the file is edited. // eslint-disable-next-line @typescript-eslint/no-non-null-assertion @@ -611,7 +614,8 @@ class GraphQLFormatter { contentType.startsWith('application/x-fb-flatbuffer') ) { try { - const data = JSON.parse(body); + const data = parseJsonWithBigInt(body); + return ( <div> {this.parsedServerTimeForFirstFlush(data)} @@ -637,7 +641,7 @@ class GraphQLFormatter { } class FormUrlencodedFormatter { - formatRequest = (request: Request) => { + formatRequest = (request: RequestWithData) => { const contentType = getHeaderValue(request.requestHeaders, 'content-type'); if (contentType.startsWith('application/x-www-form-urlencoded')) { const decoded = request.requestData; @@ -652,7 +656,7 @@ class FormUrlencodedFormatter { } class BinaryFormatter { - formatRequest(request: Request) { + formatRequest(request: RequestWithData) { if ( getHeaderValue(request.requestHeaders, 'content-type') === 'application/octet-stream' @@ -662,7 +666,7 @@ class BinaryFormatter { return undefined; } - formatResponse(request: Request) { + formatResponse(request: RequestWithData) { if ( getHeaderValue(request.responseHeaders, 'content-type') === 'application/octet-stream' @@ -677,7 +681,7 @@ class ProtobufFormatter { private protobufDefinitionRepository = ProtobufDefinitionsRepository.getInstance(); - formatRequest(request: Request) { + formatRequest(request: RequestWithData) { if ( getHeaderValue(request.requestHeaders, 'content-type') === 'application/x-protobuf' @@ -712,7 +716,7 @@ class ProtobufFormatter { return undefined; } - formatResponse(request: Request) { + formatResponse(request: RequestWithData) { if ( getHeaderValue(request.responseHeaders, 'content-type') === 'application/x-protobuf' || diff --git a/desktop/plugins/public/network/__tests__/chunks.node.tsx b/desktop/plugins/public/network/__tests__/chunks.node.tsx index bdc5bc02491..d8c2fc6189c 100644 --- a/desktop/plugins/public/network/__tests__/chunks.node.tsx +++ b/desktop/plugins/public/network/__tests__/chunks.node.tsx @@ -7,6 +7,8 @@ * @format */ +import 'core-js/stable/structured-clone'; +import 'fake-indexeddb/auto'; import {combineBase64Chunks} from '../chunks'; import {TestUtils, path} from 'flipper-plugin'; import * as NetworkPlugin from '../index'; @@ -84,7 +86,7 @@ test('Reducer correctly adds followup chunk', () => { `); }); -test('Reducer correctly combines initial response and followup chunk', () => { +test('Reducer correctly combines initial response and followup chunk', async () => { const {instance, sendEvent} = TestUtils.startPlugin(NetworkPlugin); sendEvent('newRequest', { data: btoa('x'), @@ -137,7 +139,6 @@ test('Reducer correctly combines initial response and followup chunk', () => { } `); expect(instance.requests.records()[0]).toMatchObject({ - requestData: 'x', requestHeaders: [ {key: 'y', value: 'z'}, { @@ -165,7 +166,6 @@ test('Reducer correctly combines initial response and followup chunk', () => { insights: undefined, method: 'GET', reason: 'nothing', - requestData: 'x', requestHeaders: [ { key: 'y', @@ -176,13 +176,17 @@ test('Reducer correctly combines initial response and followup chunk', () => { value: 'text/plain', }, ], - responseData: 'hello', responseHeaders: [{key: 'Content-Type', value: 'text/plain'}], responseIsMock: false, responseLength: 5, status: '200', url: 'http://test.com', }); + + const persistedRequestData = await instance.db.getRequestData('1'); + expect(persistedRequestData).toEqual('x'); + const persistedResponseData = await instance.db.getResponseData('1'); + expect(persistedResponseData).toEqual('hello'); }); async function readJsonFixture(filename: string) { diff --git a/desktop/plugins/public/network/__tests__/customheaders.node.tsx b/desktop/plugins/public/network/__tests__/customheaders.node.tsx index 0751e478ec2..d8f43d7496f 100644 --- a/desktop/plugins/public/network/__tests__/customheaders.node.tsx +++ b/desktop/plugins/public/network/__tests__/customheaders.node.tsx @@ -7,6 +7,8 @@ * @format */ +import 'core-js/stable/structured-clone'; +import 'fake-indexeddb/auto'; import {TestUtils} from 'flipper-plugin'; import * as NetworkPlugin from '../index'; @@ -118,11 +120,10 @@ test('Can handle custom headers', async () => { }, ]); - renderer.unmount(); - // after import, columns should be visible and restored { const snapshot = await exportStateAsync(); + renderer.unmount(); // Note: snapshot is set in the previous test const {instance: instance2, renderer: renderer2} = TestUtils.renderPlugin( NetworkPlugin, diff --git a/desktop/plugins/public/network/__tests__/encoding.node.tsx b/desktop/plugins/public/network/__tests__/encoding.node.tsx index 2df48b125fb..37916cdca6e 100644 --- a/desktop/plugins/public/network/__tests__/encoding.node.tsx +++ b/desktop/plugins/public/network/__tests__/encoding.node.tsx @@ -7,6 +7,8 @@ * @format */ +import 'core-js/stable/structured-clone'; +import 'fake-indexeddb/auto'; import {readFile} from 'fs'; import {decodeBody, isTextual} from '../utils'; import {ResponseInfo} from '../types'; @@ -195,14 +197,12 @@ test('binary data gets serialized correctly', async () => { value: 'text/plain', }, ], - requestData: donatingExpected, responseHeaders: [ { key: 'Content-Type', value: 'image/png', }, ], - responseData: new Uint8Array(tinyLogoExpected), }); const snapshot = await exportStateAsync(); @@ -255,8 +255,7 @@ test('binary data gets serialized correctly', async () => { value: 'text/plain', }, ], - requestData: donatingExpected, - responseData: new Uint8Array(tinyLogoExpected), + responseHeaders: [ { key: 'Content-Type', @@ -268,4 +267,8 @@ test('binary data gets serialized correctly', async () => { status: '200', url: 'http://www.fbflipper.com', }); + const persistedRequestData2 = await instance2.db.getRequestData('0'); + expect(persistedRequestData2).toEqual(donatingExpected); + const persistedResponseData2 = await instance2.db.getResponseData('0'); + expect(persistedResponseData2).toEqual(new Uint8Array(tinyLogoExpected)); }); diff --git a/desktop/plugins/public/network/docs/setup.mdx b/desktop/plugins/public/network/docs/setup.mdx index 76c4787b9f6..02c2c0782c2 100644 --- a/desktop/plugins/public/network/docs/setup.mdx +++ b/desktop/plugins/public/network/docs/setup.mdx @@ -11,7 +11,7 @@ The network plugin is shipped as a separate Maven artifact, as follows: ```groovy dependencies { - debugImplementation 'com.facebook.flipper:flipper-network-plugin:0.246.0' + debugImplementation 'com.facebook.flipper:flipper-network-plugin:0.259.0' } ``` diff --git a/desktop/plugins/public/network/index.tsx b/desktop/plugins/public/network/index.tsx index ee498c6ba80..6d40113ab3e 100644 --- a/desktop/plugins/public/network/index.tsx +++ b/desktop/plugins/public/network/index.tsx @@ -7,7 +7,7 @@ * @format */ -import React, {createRef} from 'react'; +import React, {createRef, useEffect, useState} from 'react'; import { Button, Form, @@ -16,6 +16,7 @@ import { message, Modal, Radio, + Spin, Typography, } from 'antd'; @@ -44,6 +45,7 @@ import { AddProtobufEvent, PartialResponses, SerializedRequest, + RequestWithData, } from './types'; import {ProtobufDefinitionsRepository} from './ProtobufDefinitionsRepository'; import { @@ -55,7 +57,6 @@ import { formatDuration, requestsToText, decodeBody, - formatOperationName, } from './utils'; import RequestDetails from './RequestDetails'; import {assembleChunksIfResponseIsComplete} from './chunks'; @@ -71,6 +72,7 @@ import { computeMockRoutes, } from './request-mocking/NetworkRouteManager'; import {Base64} from 'js-base64'; +import {RequestDataDB} from './RequestDataDB'; const LOCALSTORAGE_MOCK_ROUTE_LIST_KEY = '__NETWORK_CACHED_MOCK_ROUTE_LIST'; const LOCALSTORAGE_RESPONSE_BODY_FORMAT_KEY = @@ -131,6 +133,12 @@ export function plugin(client: PluginClient<Events, Methods>) { }); const columns = createState<DataTableColumn<Request>[]>(baseColumns); // not persistable + const db = new RequestDataDB(); + + client.onDeactivate(() => { + db.closeConnection(); + }); + client.onDeepLink((payload: unknown) => { const searchTermDelim = 'searchTerm='; if (typeof payload !== 'string') { @@ -167,6 +175,7 @@ export function plugin(client: PluginClient<Events, Methods>) { console.warn(`Ignoring duplicate request with id ${data.id}:`, data); } else { requests.append(createRequestFromRequestInfo(data, customColumns.get())); + db.storeRequestData(data.id, decodeBody(data.headers, data.data)); } }); @@ -179,6 +188,10 @@ export function plugin(client: PluginClient<Events, Methods>) { requests.upsert( updateRequestWithResponseInfo(request, response, customColumns.get()), ); + db.storeResponseData( + response.id, + decodeBody(response.headers, response.data), + ); } client.onMessage('newResponse', (data) => { @@ -277,6 +290,7 @@ export function plugin(client: PluginClient<Events, Methods>) { routes, informClientMockChange, tableManagerRef, + db, ), ); } @@ -365,18 +379,19 @@ export function plugin(client: PluginClient<Events, Methods>) { const serializedRequests: SerializedRequest[] = []; for (let i = 0; i < requests.size; i++) { const request = requests.get(i); + const requestWithData = await db.addDataToRequest(request); serializedRequests.push({ ...request, requestTime: request.requestTime.getTime(), responseTime: request.responseTime?.getTime(), requestData: - request.requestData instanceof Uint8Array - ? [Base64.fromUint8Array(request.requestData)] - : request.requestData, + requestWithData.requestData instanceof Uint8Array + ? [Base64.fromUint8Array(requestWithData.requestData)] + : requestWithData.requestData, responseData: - request.responseData instanceof Uint8Array - ? [Base64.fromUint8Array(request.responseData)] - : request.responseData, + requestWithData.responseData instanceof Uint8Array + ? [Base64.fromUint8Array(requestWithData.responseData)] + : requestWithData.responseData, }); if (idler.isCancelled()) { return; @@ -399,6 +414,16 @@ export function plugin(client: PluginClient<Events, Methods>) { isMockResponseSupported.set(data.isMockResponseSupported); customColumns.set(data.customColumns); data.requests2.forEach((request) => { + const requestData = Array.isArray(request.requestData) + ? Base64.toUint8Array(request.requestData[0]) + : request.requestData; + + db.storeRequestData(request.id, requestData); + const responseData = Array.isArray(request.responseData) + ? Base64.toUint8Array(request.responseData[0]) + : request.responseData; + + db.storeResponseData(request.id, responseData); requests.append({ ...request, requestTime: new Date(request.requestTime), @@ -406,17 +431,12 @@ export function plugin(client: PluginClient<Events, Methods>) { request.responseTime != null ? new Date(request.responseTime) : undefined, - requestData: Array.isArray(request.requestData) - ? Base64.toUint8Array(request.requestData[0]) - : request.requestData, - responseData: Array.isArray(request.responseData) - ? Base64.toUint8Array(request.responseData[0]) - : request.responseData, }); }); }); return { + db, columns, routes, nextRouteId, @@ -448,11 +468,12 @@ export function plugin(client: PluginClient<Events, Methods>) { <> <Menu.Item key="curl" - onClick={() => { + onClick={async () => { if (!request) { return; } - const command = convertRequestToCurlCommand(request); + const requestWithData = await db.addDataToRequest(request); + const command = convertRequestToCurlCommand(requestWithData); client.writeTextToClipboard(command); }}> Copy cURL command @@ -541,14 +562,14 @@ function createRequestFromRequestInfo( method: data.method, url: data.url ?? '', domain, + requestLength: getRequestLength(data.headers, data.data), requestHeaders: data.headers, - requestData: decodeBody(data.headers, data.data), status: '...', }; customColumns .filter((c) => c.type === 'request') .forEach(({header}) => { - (res as any)['request_header_' + header] = getHeaderValue( + (res as any)[`request_header_${header}`] = getHeaderValue( data.headers, header, ); @@ -570,14 +591,13 @@ function updateRequestWithResponseInfo( responseData: decodeBody(response.headers, response.data), responseIsMock: response.isMock, responseLength: getResponseLength(response), - requestLength: getRequestLength(request), duration: response.timestamp - request.requestTime.getTime(), insights: response.insights ?? undefined, }; customColumns .filter((c) => c.type === 'response') .forEach(({header}) => { - (res as any)['response_header_' + header] = getHeaderValue( + (res as any)[`response_header_${header}`] = getHeaderValue( response.headers, header, ); @@ -611,11 +631,16 @@ export function Component() { enableAutoScroll extraActions={ <Layout.Horizontal gap> - <Button title="Clear logs" onClick={instance.clearLogs}> + <Button + type="ghost" + title="Clear logs" + onClick={instance.clearLogs}> <DeleteOutlined /> </Button> {isMockResponseSupported && ( - <Button onClick={instance.onMockButtonPressed}>Mock</Button> + <Button type="ghost" onClick={instance.onMockButtonPressed}> + Mock + </Button> )} </Layout.Horizontal> } @@ -636,14 +661,32 @@ export function Component() { ); } +const NOT_FETCHED = Symbol('not fetched'); + function Sidebar() { const instance = usePlugin(plugin); const selectedId = useValue(instance.selectedId); const detailBodyFormat = useValue(instance.detailBodyFormat); + const [requestWithData, setRequestWithData] = useState< + RequestWithData | typeof NOT_FETCHED + >(NOT_FETCHED); + const db = instance.db; // TODO: Fix this the next time the file is edited. // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const request = instance.requests.getById(selectedId!); + + useEffect(() => { + async function fetchDataFromDB() { + if (!request) { + return; + } + const requestWithData = await db.addDataToRequest(request); + setRequestWithData(requestWithData); + } + fetchDataFromDB(); + }, [db, request, setRequestWithData]); + if (!request) { return ( <Layout.Container pad grow center> @@ -652,10 +695,12 @@ function Sidebar() { ); } - return ( + return requestWithData === NOT_FETCHED ? ( + <Spin /> + ) : ( <RequestDetails key={selectedId} - request={request} + request={requestWithData} bodyFormat={detailBodyFormat} onSelectFormat={instance.onSelectFormat} onCopyText={instance.onCopyText} @@ -677,14 +722,6 @@ const baseColumns: DataTableColumn<Request>[] = [ visible: false, powerSearchConfig: {type: 'dateTime'}, }, - { - key: 'requestData', - title: 'GraphQL operation name', - width: 120, - visible: false, - formatters: formatOperationName, - powerSearchConfig: {type: 'object'}, - }, { key: 'domain', powerSearchConfig: {type: 'string'}, @@ -753,8 +790,8 @@ function getRowStyle(row: Request) { ? mockingStyle : row.status && row.status !== '...' && - parseInt(row.status, 10) >= 400 && - parseInt(row.status, 10) < 600 + ((parseInt(row.status, 10) >= 400 && parseInt(row.status, 10) < 600) || + parseInt(row.status, 10) === -1) ? errorStyle : undefined; } diff --git a/desktop/plugins/public/network/package.json b/desktop/plugins/public/network/package.json index 2821132b0ff..ea5bc731d12 100644 --- a/desktop/plugins/public/network/package.json +++ b/desktop/plugins/public/network/package.json @@ -21,7 +21,9 @@ "lodash": "^4.17.21", "pako": "^2.0.3", "protobufjs": "^6.10.2", - "xml-beautifier": "^0.4.0" + "xml-beautifier": "^0.4.0", + "lossless-json": "^4.0.1", + "idb": "^8.0.0" }, "peerDependencies": { "flipper": "*", @@ -30,6 +32,9 @@ "devDependencies": { "@types/brotli": "^1.3.1", "@types/pako": "^2.0.0", - "js-base64": "^3.6.0" + "@types/core-js": "^2.5.8", + "js-base64": "^3.6.0", + "fake-indexeddb": "^6.0.0", + "core-js": "^3.37.1" } } diff --git a/desktop/plugins/public/network/request-mocking/NetworkRouteManager.tsx b/desktop/plugins/public/network/request-mocking/NetworkRouteManager.tsx index 9322d0bc840..2980f36c47b 100644 --- a/desktop/plugins/public/network/request-mocking/NetworkRouteManager.tsx +++ b/desktop/plugins/public/network/request-mocking/NetworkRouteManager.tsx @@ -10,6 +10,7 @@ import {Atom, DataTableManager, getFlipperLib} from 'flipper-plugin'; import {createContext} from 'react'; import {Header, Request} from '../types'; +import {RequestDataDB} from '../RequestDataDB'; export type Route = { requestUrl: string; @@ -34,7 +35,7 @@ export interface NetworkRouteManager { modifyRoute(id: string, routeChange: Partial<Route>): void; removeRoute(id: string): void; enableRoute(id: string): void; - copySelectedCalls(): void; + copySelectedCalls(): Promise<void>; importRoutes(): void; exportRoutes(): void; clearRoutes(): void; @@ -47,7 +48,7 @@ export const nullNetworkRouteManager: NetworkRouteManager = { modifyRoute(_id: string, _routeChange: Partial<Route>) {}, removeRoute(_id: string) {}, enableRoute(_id: string) {}, - copySelectedCalls() {}, + async copySelectedCalls() {}, importRoutes() {}, exportRoutes() {}, clearRoutes() {}, @@ -62,6 +63,7 @@ export function createNetworkManager( routes: Atom<{[id: string]: any}>, informClientMockChange: (routes: {[id: string]: any}) => Promise<void>, tableManagerRef: React.RefObject<DataTableManager<Request> | undefined>, + requestDB: RequestDataDB, ): NetworkRouteManager { return { addRoute(): string | undefined { @@ -104,18 +106,18 @@ export function createNetworkManager( } informClientMockChange(routes.get()); }, - copySelectedCalls() { - tableManagerRef.current?.getSelectedItems().forEach((request) => { - // convert headers + + async copySelectedCalls() { + const selectedItems = tableManagerRef.current?.getSelectedItems() || []; + const promises = selectedItems.map(async (request) => { + // Convert headers const headers: {[id: string]: Header} = {}; request.responseHeaders?.forEach((e) => { headers[e.key] = e; }); // no need to convert data, already converted when real call was created - const responseData = - request && request.responseData ? request.responseData : ''; - + const responseData = await requestDB.getResponseData(request.id); const newNextRouteId = nextRouteId.get(); routes.update((draft) => { draft[newNextRouteId.toString()] = { @@ -129,7 +131,7 @@ export function createNetworkManager( }); nextRouteId.set(newNextRouteId + 1); }); - + await Promise.all(promises); informClientMockChange(routes.get()); }, importRoutes() { diff --git a/desktop/plugins/public/network/types.tsx b/desktop/plugins/public/network/types.tsx index 1eef07226de..d1f4166be9c 100644 --- a/desktop/plugins/public/network/types.tsx +++ b/desktop/plugins/public/network/types.tsx @@ -20,13 +20,12 @@ export interface Request { url: string; domain: string; requestHeaders: Array<Header>; - requestData: string | Uint8Array | undefined; + // response responseTime?: Date; status: string; reason?: string; responseHeaders?: Array<Header>; - responseData?: string | Uint8Array | undefined; responseLength?: number; requestLength?: number; responseIsMock?: boolean; @@ -34,6 +33,11 @@ export interface Request { insights?: Insights; } +export interface RequestWithData extends Request { + requestData: string | Uint8Array | undefined; + responseData?: string | Uint8Array | undefined; +} + export type Requests = DataSource<Request, never>; export type SerializedRequest = Omit< diff --git a/desktop/plugins/public/network/utils.tsx b/desktop/plugins/public/network/utils.tsx index 6f65d775d6f..00240c67dac 100644 --- a/desktop/plugins/public/network/utils.tsx +++ b/desktop/plugins/public/network/utils.tsx @@ -10,8 +10,9 @@ import {Buffer} from 'buffer'; import decompress from 'brotli/decompress'; import pako from 'pako'; -import {Request, Header, ResponseInfo} from './types'; +import {Header, ResponseInfo, RequestWithData} from './types'; import {Base64} from 'js-base64'; +import {isInteger, parse} from 'lossless-json'; export function getHeaderValue( headers: Array<Header> | undefined, @@ -117,7 +118,7 @@ export function decodeBody( // on iOS, the stream send to flipper is already inflated, so the content-encoding will not // match the actual data anymore, and we should skip inflating. // In that case, we intentionally fall-through - if (!('' + e).includes('incorrect header check')) { + if (!`${e}`.includes('incorrect header check')) { throw e; } break; @@ -156,7 +157,10 @@ export function decodeBody( } export function convertRequestToCurlCommand( - request: Pick<Request, 'method' | 'url' | 'requestHeaders' | 'requestData'>, + request: Pick< + RequestWithData, + 'method' | 'url' | 'requestHeaders' | 'requestData' + >, ): string { let command: string = `curl -v -X ${request.method}`; command += ` ${escapedString(request.url)}`; @@ -201,7 +205,7 @@ export const queryToObj = (query: string) => { function escapeCharacter(x: string) { const code = x.charCodeAt(0); - return code < 16 ? '\\u0' + code.toString(16) : '\\u' + code.toString(16); + return code < 16 ? `\\u0${code.toString(16)}` : `\\u${code.toString(16)}`; } const needsEscapingRegex = /[\u0000-\u001f\u007f-\u009f!]/g; @@ -210,20 +214,16 @@ const needsEscapingRegex = /[\u0000-\u001f\u007f-\u009f!]/g; // based systems. function escapedString(str: string) { if (needsEscapingRegex.test(str) || str.includes("'")) { - return ( - "$'" + - str - .replace(/\\/g, '\\\\') - .replace(/\'/g, "\\'") - .replace(/\n/g, '\\n') - .replace(/\r/g, '\\r') - .replace(needsEscapingRegex, escapeCharacter) + - "'" - ); + return `$'${str + .replace(/\\/g, '\\\\') + .replace(/\'/g, "\\'") + .replace(/\n/g, '\\n') + .replace(/\r/g, '\\r') + .replace(needsEscapingRegex, escapeCharacter)}'`; } // Simply use singly quoted string. - return "'" + str + "'"; + return `'${str}'`; } export function getResponseLength(response: ResponseInfo): number { @@ -238,20 +238,23 @@ export function getResponseLength(response: ResponseInfo): number { return 0; } -export function getRequestLength(request: Request): number { - const lengthString = request.requestHeaders - ? getHeaderValue(request.requestHeaders, 'content-length') +export function getRequestLength( + headers: Array<Header>, + data: string | null | undefined, +): number { + const lengthString = headers + ? getHeaderValue(headers, 'content-length') : undefined; if (lengthString) { return parseInt(lengthString, 10); - } else if (request.requestData) { - return Buffer.byteLength(request.requestData, 'base64'); + } else if (data) { + return Buffer.byteLength(data, 'base64'); } return 0; } export function formatDuration(duration: number | undefined) { - if (typeof duration === 'number') return duration + 'ms'; + if (typeof duration === 'number') return `${duration}ms`; return ''; } @@ -260,12 +263,20 @@ export function formatBytes(count: number | undefined): string { return ''; } if (count > 1024 * 1024) { - return (count / (1024.0 * 1024)).toFixed(1) + ' MB'; + return `${(count / (1024.0 * 1024)).toFixed(1)} MB`; } if (count > 1024) { - return (count / 1024.0).toFixed(1) + ' kB'; + return `${(count / 1024.0).toFixed(1)} kB`; } - return count + ' B'; + return `${count} B`; +} + +function customNumberParser(value: string) { + return isInteger(value) ? BigInt(value) : parseFloat(value); +} + +export function parseJsonWithBigInt(jsonStr: string) { + return parse(jsonStr, null, customNumberParser); } export function formatOperationName(requestData: string): string { @@ -277,7 +288,7 @@ export function formatOperationName(requestData: string): string { } } -export function requestsToText(requests: Request[]): string { +export function requestsToText(requests: RequestWithData[]): string { const request = requests[0]; if (!request || !request.url) { return '<empty request>'; diff --git a/desktop/plugins/public/reactdevtools/DevToolsEmbedder.tsx b/desktop/plugins/public/reactdevtools/DevToolsEmbedder.tsx index ebb4e765c2c..5870bf0203e 100644 --- a/desktop/plugins/public/reactdevtools/DevToolsEmbedder.tsx +++ b/desktop/plugins/public/reactdevtools/DevToolsEmbedder.tsx @@ -47,7 +47,7 @@ function createDevToolsNode(nodeId: string): HTMLElement { } function findDevToolsNode(nodeId: string): HTMLElement | null { - return document.querySelector('#' + nodeId); + return document.querySelector(`#${nodeId}`); } function attachDevTools(devToolsNode: HTMLElement, offset: number = 0) { diff --git a/desktop/plugins/public/reactdevtools/index.tsx b/desktop/plugins/public/reactdevtools/index.tsx index 95c9761e200..6739e620fcc 100644 --- a/desktop/plugins/public/reactdevtools/index.tsx +++ b/desktop/plugins/public/reactdevtools/index.tsx @@ -257,15 +257,15 @@ export function devicePlugin(client: DevicePluginClient<Events, Methods>) { startPollForConnection(); } catch (e) { - console.error('Failed to initalize React DevTools' + e); - setStatus(ConnectionStatus.Error, 'Failed to initialize DevTools: ' + e); + console.error(`Failed to initalize React DevTools${e}`); + setStatus(ConnectionStatus.Error, `Failed to initialize DevTools: ${e}`); } } function setStatus(cs: ConnectionStatus, status: string) { connectionStatus.set(cs); if (status.startsWith('The server is listening on')) { - statusMessage.set(status + ' Waiting for connection...'); + statusMessage.set(`${status} Waiting for connection...`); } else { statusMessage.set(status); } diff --git a/desktop/plugins/public/reactdevtools/package.json b/desktop/plugins/public/reactdevtools/package.json index 32139443acb..17effa230f7 100644 --- a/desktop/plugins/public/reactdevtools/package.json +++ b/desktop/plugins/public/reactdevtools/package.json @@ -21,8 +21,8 @@ "dependencies": { "@rollup/plugin-commonjs": "^21.0.3", "@rollup/plugin-node-resolve": "^13.1.3", - "react-devtools-core": "^4.28.0", - "react-devtools-inline": "^4.28.0", + "react-devtools-core": "^5.3.1", + "react-devtools-inline": "^5.3.1", "rollup": "^2.70.1", "ws": "^8.5.0" }, diff --git a/desktop/plugins/public/reactdevtools/serverAddOn.tsx b/desktop/plugins/public/reactdevtools/serverAddOn.tsx index 5fd2c986482..143b5a508d3 100644 --- a/desktop/plugins/public/reactdevtools/serverAddOn.tsx +++ b/desktop/plugins/public/reactdevtools/serverAddOn.tsx @@ -41,7 +41,7 @@ async function findGlobalDevTools( await flipperServer.exec('node-api-fs-stat', devToolsPath); return devToolsPath; } catch (error) { - console.warn('Failed to find globally installed React DevTools: ' + error); + console.warn(`Failed to find globally installed React DevTools: ${error}`); return undefined; } } diff --git a/desktop/doctor/.eslintrc.js b/desktop/plugins/public/sandbox/fb-stubs/internBox.tsx similarity index 76% rename from desktop/doctor/.eslintrc.js rename to desktop/plugins/public/sandbox/fb-stubs/internBox.tsx index cabcfb08b3c..f34662e194d 100644 --- a/desktop/doctor/.eslintrc.js +++ b/desktop/plugins/public/sandbox/fb-stubs/internBox.tsx @@ -7,8 +7,4 @@ * @format */ -module.exports = { - rules: { - 'node/no-sync': 'off', - }, -}; +export const InternBox = () => null; diff --git a/desktop/plugins/public/sandbox/index.tsx b/desktop/plugins/public/sandbox/index.tsx index 137bc70e05f..a2ce90d9067 100644 --- a/desktop/plugins/public/sandbox/index.tsx +++ b/desktop/plugins/public/sandbox/index.tsx @@ -15,7 +15,9 @@ import { usePlugin, useValue, Layout, + getFlipperLib, } from 'flipper-plugin'; +import {InternBox} from './fb-stubs/internBox'; export type Sandbox = { name: string; @@ -55,9 +57,8 @@ export function plugin(client: PluginClient<{}, ClientMethods>) { sandbox, }) .then((result: SetSandboxResult) => { - if (result.result) - displaySuccess('Update to ' + sandbox + ' successful'); - else displayError('Update to ' + sandbox + ' failed'); + if (result.result) displaySuccess(`Update to ${sandbox} successful`); + else displayError(`Update to ${sandbox} failed`); }) .catch((e) => { console.error('[sandbox] setSandbox call failed:', e); @@ -101,43 +102,49 @@ export function Component() { style={{ width: '350px', }}> - <Typography.Text type="secondary"> - Select the environment: - </Typography.Text> - <Spin spinning={isLoadingSandboxes} /> - {sandboxes.map((sandbox) => ( - <Button - key={sandbox.value} - onClick={() => instance.onSendSandboxEnvironment(sandbox.value)} - style={{ - width: '100%', - }}> - {sandbox.name} - </Button> - ))} - <Typography.Text type="secondary"> - Provide custom Sandbox URL - </Typography.Text> - <Input.Group compact> - <Input - style={{ - width: 'calc(100% - 80px)', - }} - placeholder="e.g. unixname.sb.facebook.com" - onChange={instance.onChangeSandbox} - onKeyPress={(event) => { - if (event.key === 'Enter') { - instance.onSendSandboxEnvironment(customSandbox); - } - }} - /> - <Button - type="primary" - onClick={() => instance.onSendSandboxEnvironment(customSandbox)} - disabled={customSandbox == null}> - Submit - </Button> - </Input.Group> + {getFlipperLib().isFB ? ( + <InternBox /> + ) : ( + <> + <Typography.Text type="secondary"> + Select the environment: + </Typography.Text> + <Spin spinning={isLoadingSandboxes} /> + {sandboxes.map((sandbox) => ( + <Button + key={sandbox.value} + onClick={() => instance.onSendSandboxEnvironment(sandbox.value)} + style={{ + width: '100%', + }}> + {sandbox.name} + </Button> + ))} + <Typography.Text type="secondary"> + Provide custom Sandbox URL + </Typography.Text> + <Input.Group compact> + <Input + style={{ + width: 'calc(100% - 80px)', + }} + placeholder="e.g. unixname.sb.facebook.com" + onChange={instance.onChangeSandbox} + onKeyPress={(event) => { + if (event.key === 'Enter') { + instance.onSendSandboxEnvironment(customSandbox); + } + }} + /> + <Button + type="primary" + onClick={() => instance.onSendSandboxEnvironment(customSandbox)} + disabled={customSandbox == null}> + Submit + </Button> + </Input.Group> + </> + )} </Layout.Container> </Layout.Container> ); diff --git a/desktop/plugins/public/seamammals/src/index_custom.tsx b/desktop/plugins/public/seamammals/src/index_custom.tsx index e614383e085..cbbab1c4049 100644 --- a/desktop/plugins/public/seamammals/src/index_custom.tsx +++ b/desktop/plugins/public/seamammals/src/index_custom.tsx @@ -62,7 +62,7 @@ export function plugin(client: PluginClient<Events, {}>) { }); function setSelection(id: number) { - selectedID.set('' + id); + selectedID.set(`${id}`); } return { diff --git a/desktop/plugins/public/shared_preferences/src/index.tsx b/desktop/plugins/public/shared_preferences/src/index.tsx index 6bd5b34314a..d120bcdcb1e 100644 --- a/desktop/plugins/public/shared_preferences/src/index.tsx +++ b/desktop/plugins/public/shared_preferences/src/index.tsx @@ -131,7 +131,7 @@ export function plugin(client: PluginClient<Events, Methods>) { const name = selectedPreferences.get(); if (name != null) { updateSharedPreferences({ - name: name, + name, preferences: preferences.preferences, }); @@ -171,7 +171,7 @@ export function plugin(client: PluginClient<Events, Methods>) { client.onConnect(async () => { const results = await client.send('getAllSharedPreferences', {}); Object.entries(results).forEach(([name, prefs]) => - updateSharedPreferences({name: name, preferences: prefs}), + updateSharedPreferences({name, preferences: prefs}), ); }); diff --git a/desktop/plugins/public/ui-debugger/ClientTypes.tsx b/desktop/plugins/public/ui-debugger/ClientTypes.tsx index f9364cfc174..e9b5ccb73a3 100644 --- a/desktop/plugins/public/ui-debugger/ClientTypes.tsx +++ b/desktop/plugins/public/ui-debugger/ClientTypes.tsx @@ -27,6 +27,15 @@ export type Methods = { metadataIdPath: MetadataId[]; compoundTypeHint?: CompoundTypeHint; }): Promise<void>; + onCustomAction<T extends boolean | undefined>(params: { + customActionGroupIndex: number; + customActionIndex: number; + value: T; + }): Promise<{result: T}>; + additionalNodeInspectionChange(params: { + changeType: 'Add' | 'Remove'; + nodeId: Id; + }): Promise<void>; }; export type CompoundTypeHint = @@ -107,6 +116,38 @@ export type InitEvent = { frameworkEventMetadata?: FrameworkEventMetadata[]; supportedTraversalModes?: TraversalMode[]; currentTraversalMode?: TraversalMode; + customActionGroups?: CustomActionGroup[]; +}; + +type LocalIcon = { + type: 'Local'; + iconPath: string; +}; + +type IconPackIcon = { + type: 'Fb' | 'Antd'; + iconName: string; +}; + +export type BooleanAction = { + type: 'BooleanAction'; + title: string; + value: boolean; +}; + +export type UnitAction = { + type: 'UnitAction'; + title: string; +}; + +export type CustomAction = BooleanAction | UnitAction; + +export type ActionIcon = LocalIcon | IconPackIcon; + +export type CustomActionGroup = { + title: string; + actionIcon: ActionIcon; + actions: CustomAction[]; }; export type PerformanceStatsEvent = { @@ -142,6 +183,7 @@ export type ClientNode = { parent?: Id; qualifiedName: string; //this is the name of the component plus qualification so myles has a chance of finding it. E.g com.facebook.MyView lineNumber?: number; + boxData?: BoxData; name: string; attributes: Record<MetadataId, Inspectable>; inlineAttributes: Record<string, string>; @@ -150,6 +192,19 @@ export type ClientNode = { bounds: Bounds; tags: Tag[]; activeChild?: Id; + additionalDataCollection?: boolean; +}; + +/** + * Space efficient representation of a box, order is: + * Left, Right, Top, Bottom, + */ +type CompactBox = [number, number, number, number]; + +export type BoxData = { + margin: CompactBox; + border: CompactBox; + padding: CompactBox; }; export type Metadata = { @@ -218,6 +273,7 @@ export type Tag = | 'iOS' | 'BloksBoundTree' | 'BloksDerived' + | 'BloksRootHost' | 'TreeRoot' | 'Warning'; diff --git a/desktop/plugins/public/ui-debugger/DesktopTypes.tsx b/desktop/plugins/public/ui-debugger/DesktopTypes.tsx index 36a4fc64355..567a53e20e0 100644 --- a/desktop/plugins/public/ui-debugger/DesktopTypes.tsx +++ b/desktop/plugins/public/ui-debugger/DesktopTypes.tsx @@ -34,6 +34,7 @@ export type Color = string; export type UIState = { viewMode: Atom<ViewMode>; wireFrameMode: Atom<WireFrameMode>; + boxVisualiserEnabled: Atom<boolean>; isConnected: Atom<boolean>; isPaused: Atom<boolean>; streamState: Atom<StreamState>; @@ -45,13 +46,24 @@ export type UIState = { focusedNode: Atom<Id | undefined>; expandedNodes: Atom<Set<Id>>; visualiserWidth: Atom<number>; + nodeLevelFrameworkEventFilters: Atom<NodeLevelFrameworkEventFilters>; frameworkEventMonitoring: Atom<Map<FrameworkEventType, boolean>>; filterMainThreadMonitoring: Atom<boolean>; - + referenceImage: Atom<ReferenceImageState | null>; supportedTraversalModes: Atom<TraversalMode[]>; traversalMode: Atom<TraversalMode>; }; +type NodeLevelFrameworkEventFilters = { + threads: Set<string>; + eventTypes: Set<string>; +}; + +export type ReferenceImageState = { + url: string; + opacity: number; +}; + //enumerates the keys of input type and casts each to ReadOnlyAtom, this is so we only expose read only atoms to the UI //and all writes come through UIActions type TransformToReadOnly<T> = { @@ -59,6 +71,7 @@ type TransformToReadOnly<T> = { }; export type WireFrameMode = 'All' | 'SelectedAndChildren' | 'SelectedOnly'; +export type ReferenceImageAction = 'Import' | 'Clear' | number; //number is a change opacity export type ReadOnlyUIState = TransformToReadOnly<UIState>; @@ -81,6 +94,7 @@ export type ViewMode = | {mode: 'frameworkEventsTable'; nodeId: Id | null; isTree: boolean | null}; export type NodeSelection = { + /** This node may be stale, look up from node map via id to check if it is still in frame*/ node: ClientNode; source: SelectionSource; }; @@ -95,6 +109,8 @@ export type OnSelectNode = ( source: SelectionSource, ) => void; +export type Operation = 'add' | 'remove'; + export type UIActions = { onHoverNode: (...node: Id[]) => void; onFocusNode: (focused?: Id) => void; @@ -105,6 +121,7 @@ export type UIActions = { setVisualiserWidth: (width: number) => void; onSetFilterMainThreadMonitoring: (toggled: boolean) => void; onSetViewMode: (viewMode: ViewMode) => void; + onSetBoxVisualiserEnabled: (enabled: boolean) => void; onSetFrameworkEventMonitored: ( eventType: FrameworkEventType, monitored: boolean, @@ -117,6 +134,9 @@ export type UIActions = { onCollapseAllRecursively: (nodeId: Id) => void; ensureAncestorsExpanded: (nodeId: Id) => void; onSetTraversalMode: (mode: TraversalMode) => void; + onReferenceImageAction: (action: ReferenceImageAction) => Promise<void>; + onChangeNodeLevelThreadFilter: (thread: string, op: Operation) => void; + onChangeNodeLevelEventTypeFilter: (eventType: string, op: Operation) => void; editClientAttribute: ( nodeId: Id, value: any, diff --git a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx index 21d61e6bdf6..592e4e3ddec 100644 --- a/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx +++ b/desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx @@ -7,7 +7,7 @@ * @format */ -import {DeleteOutlined, PartitionOutlined} from '@ant-design/icons'; +import {CloseOutlined, DeleteOutlined} from '@ant-design/icons'; import { DataTable, DataTableColumn, @@ -121,14 +121,16 @@ export function FrameworkEventsTable({ <> <Tooltip title="Back to tree"> <Button + type="ghost" onClick={() => { instance.uiActions.onFocusNode(undefined); instance.uiActions.onSetViewMode({mode: 'default'}); }} - icon={<PartitionOutlined />}></Button> + icon={<CloseOutlined />}></Button> </Tooltip> <Tooltip title="Delete all events"> <Button + type="ghost" onClick={() => { instance.frameworkEvents.clear(); managerRef.current?.clearSelection(); diff --git a/desktop/plugins/public/ui-debugger/components/shared/CustomDropDown.tsx b/desktop/plugins/public/ui-debugger/components/shared/CustomDropDown.tsx new file mode 100644 index 00000000000..7c556002960 --- /dev/null +++ b/desktop/plugins/public/ui-debugger/components/shared/CustomDropDown.tsx @@ -0,0 +1,17 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import {Layout, styled} from 'flipper-plugin'; +import {theme} from 'flipper-plugin'; + +export const CustomDropDown = styled(Layout.Container)({ + backgroundColor: theme.white, + borderRadius: theme.borderRadius, + boxShadow: `0 0 4px 1px rgba(0,0,0,0.10)`, +}); diff --git a/desktop/plugins/public/ui-debugger/components/shared/MultiSelectableDropDownItem.tsx b/desktop/plugins/public/ui-debugger/components/shared/MultiSelectableDropDownItem.tsx index e499f89c4b2..e92cf1cd8d5 100644 --- a/desktop/plugins/public/ui-debugger/components/shared/MultiSelectableDropDownItem.tsx +++ b/desktop/plugins/public/ui-debugger/components/shared/MultiSelectableDropDownItem.tsx @@ -26,7 +26,6 @@ export function MultiSelectableDropDownItem<T>({ return ( <StyledMultiSelectDropDownItem center - padv="small" gap="small" onClick={(e) => { e.stopPropagation(); @@ -47,5 +46,9 @@ export const StyledMultiSelectDropDownItem = styled(Layout.Horizontal)({ ':hover': { backgroundColor: theme.backgroundWash, }, - height: 32, + cursor: 'pointer', + height: 38, + userSelect: 'none', + paddingLeft: theme.space.medium, + paddingRight: theme.space.medium, }); diff --git a/desktop/plugins/public/ui-debugger/components/shared/createDropDownItem.tsx b/desktop/plugins/public/ui-debugger/components/shared/createDropDownItem.tsx new file mode 100644 index 00000000000..ca92babd29d --- /dev/null +++ b/desktop/plugins/public/ui-debugger/components/shared/createDropDownItem.tsx @@ -0,0 +1,16 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +export function createDropDownItem<T>( + wireframeMode: T, + label: string, + icon?: React.ReactNode, +) { + return {key: wireframeMode, label, icon}; +} diff --git a/desktop/plugins/public/ui-debugger/components/sidebarV2/SidebarV2.tsx b/desktop/plugins/public/ui-debugger/components/sidebarV2/SidebarV2.tsx index 3326bf1330d..ed4bd5e8d32 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebarV2/SidebarV2.tsx +++ b/desktop/plugins/public/ui-debugger/components/sidebarV2/SidebarV2.tsx @@ -45,6 +45,8 @@ export function SidebarV2({ }) : []; + //when select node not in frame, dont show data as its stale + const actualNode = getNode(nodeSelection.node.id, nodes); return ( <Layout.Container gap pad> <Tabs @@ -53,14 +55,10 @@ export function SidebarV2({ centered key={nodeSelection?.node?.id}> <Tab tab={<Tooltip title="Attributes">Attributes</Tooltip>}> - {getNode(nodeSelection.node.id, nodes) == null ? ( - //when select node not in frame, dont show data as its stale + {actualNode == null ? ( <NoData message="Node is no longer on screen" /> ) : ( - <AttributesInspector - node={nodeSelection.node} - metadata={metadata} - /> + <AttributesInspector node={actualNode} metadata={metadata} /> )} </Tab> {selectedFrameworkEvents?.length > 0 && ( diff --git a/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/AttributesInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/AttributesInspector.tsx index 13980185843..1456e84c024 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/AttributesInspector.tsx +++ b/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/AttributesInspector.tsx @@ -53,6 +53,7 @@ import { import {StyledTextArea} from './TextInput'; import {ColorInspector} from './ColorInput'; import {SelectInput} from './SelectInput'; +import {MultiSelectableDropDownItem} from '../../shared/MultiSelectableDropDownItem'; type ModalData = { data: unknown; @@ -77,6 +78,7 @@ export function AttributesInspector({ node: ClientNode; metadata: MetadataMap; }) { + const instance = usePlugin(plugin); const [modalData, setModalData] = useState<ModalData | null>(null); const [attributeFilter, setAttributeFilter] = useLocalStorageState( @@ -143,6 +145,21 @@ export function AttributesInspector({ placeholder="Filter attributes" prefix={<SearchOutlined />} /> + {node.additionalDataCollection != null && ( + <MultiSelectableDropDownItem + text="Collect additional data" + value={node.id} + selectedValues={ + new Set(node.additionalDataCollection ? [node.id] : []) + } + onSelect={(_, selected) => + instance.onAdditionalDataCollectionChanged( + node.id, + selected ? 'Add' : 'Remove', + ) + } + /> + )} {sections.length === 0 ? ( <NoData message="No attributes match filter " /> @@ -217,7 +234,7 @@ function AttributeSection( if (attributeValue.type === 'object') { return ( <SubSection - key={'subsection_' + attributeName} + key={`subsection_${attributeName}`} nodeId={nodeId} onDisplayModal={onDisplayModal} attributeName={attributeName} diff --git a/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/ColorInput.tsx b/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/ColorInput.tsx index 4f6cb12d0e8..c07cde32bbb 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/ColorInput.tsx +++ b/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/ColorInput.tsx @@ -67,7 +67,7 @@ export function ColorInspector({ { value: inspectable.value.r, addonText: 'R', - mutable: mutable, + mutable, hint: 'COLOR', min: 0, max: 255, @@ -76,7 +76,7 @@ export function ColorInspector({ { value: inspectable.value.g, addonText: 'G', - mutable: mutable, + mutable, hint: 'COLOR', min: 0, max: 255, @@ -85,7 +85,7 @@ export function ColorInspector({ { value: inspectable.value.b, addonText: 'B', - mutable: mutable, + mutable, hint: 'COLOR', min: 0, max: 255, @@ -96,7 +96,7 @@ export function ColorInspector({ addonText: 'A', min: 0, max: 1, - mutable: mutable, + mutable, hint: 'COLOR', onChange: (updated) => onChange({...inspectable.value, a: updated}), }, @@ -123,5 +123,5 @@ const RGBAtoHEX = (color: Color) => { (color.g | (1 << 8)).toString(16).slice(1) + (color.b | (1 << 8)).toString(16).slice(1); - return '#' + hex.toUpperCase(); + return `#${hex.toUpperCase()}`; }; diff --git a/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/SelectInput.tsx b/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/SelectInput.tsx index 49bc8e6f7b9..484d043408e 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/SelectInput.tsx +++ b/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/SelectInput.tsx @@ -39,7 +39,7 @@ export function SelectInput({ value={optimisticValue.value} options={options} style={{ - color: color, + color, height: rowHeight, ...opactity(optimisticValue), }} diff --git a/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/TextInput.tsx b/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/TextInput.tsx index 9785d277b85..83ece5af115 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/TextInput.tsx +++ b/desktop/plugins/public/ui-debugger/components/sidebarV2/attributes/TextInput.tsx @@ -32,7 +32,7 @@ export function StyledTextArea({ autoSize className={cx(inputBase, !mutable && readOnlyInput)} bordered - style={{color: color, ...pendingStyle(optimisticValue)}} + style={{color, ...pendingStyle(optimisticValue)}} readOnly={!mutable} value={optimisticValue.value} onChange={(event) => optimisticValue.onChange(event.target.value)} diff --git a/desktop/plugins/public/ui-debugger/components/sidebarV2/frameworkevents/FrameworkEventsInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebarV2/frameworkevents/FrameworkEventsInspector.tsx index 2012c76acf4..b2c2a30dc8e 100644 --- a/desktop/plugins/public/ui-debugger/components/sidebarV2/frameworkevents/FrameworkEventsInspector.tsx +++ b/desktop/plugins/public/ui-debugger/components/sidebarV2/frameworkevents/FrameworkEventsInspector.tsx @@ -10,9 +10,10 @@ import { DataInspector, Layout, - produce, theme, TimelineDataDescription, + usePlugin, + useValue, } from 'flipper-plugin'; import { FrameworkEvent, @@ -20,7 +21,7 @@ import { FrameworkEventType, FrameworkEventMetadata, } from '../../../ClientTypes'; -import React, {ReactNode, useState} from 'react'; +import React, {ReactNode} from 'react'; import {StackTraceInspector} from './StackTraceInspector'; import { Badge, @@ -32,12 +33,14 @@ import { Typography, } from 'antd'; import {frameworkEventSeparator} from '../../shared/FrameworkEventsTreeSelect'; -import {startCase, uniqBy} from 'lodash'; +import {startCase, uniq} from 'lodash'; import {DeleteOutlined, FilterOutlined, TableOutlined} from '@ant-design/icons'; import {ViewMode} from '../../../DesktopTypes'; import {MultiSelectableDropDownItem} from '../../shared/MultiSelectableDropDownItem'; import {formatDuration, formatTimestampMillis} from '../../../utils/timeUtils'; import {tracker} from '../../../utils/tracker'; +import {plugin} from '../../../index'; +import {CustomDropDown} from '../../shared/CustomDropDown'; type Props = { node: ClientNode; @@ -56,26 +59,28 @@ export const FrameworkEventsInspector: React.FC<Props> = ({ onSetViewMode, clearAllEvents, }) => { - const allThreads = uniqBy(events, 'thread').map((event) => event.thread); - const [filteredThreads, setFilteredThreads] = useState<Set<string>>( - new Set(), - ); + const instance = usePlugin(plugin); + const filters = useValue(instance.uiState.nodeLevelFrameworkEventFilters); - const allEventTypes = uniqBy(events, 'type').map((event) => event.type); - const [filteredEventTypes, setFilteredEventTypes] = useState<Set<string>>( - new Set(), - ); + const allThreads = uniq([ + ...events.map((e) => e.thread), + ...filters.threads.values(), + ]); + + const allEventTypes = uniq([ + ...events.map((e) => e.type), + ...filters.eventTypes.values(), + ]); const filteredEvents = events .filter( (event) => - filteredEventTypes.size === 0 || filteredEventTypes.has(event.type), + filters.eventTypes.size === 0 || filters.eventTypes.has(event.type), ) .filter( (event) => - // TODO: Fix this the next time the file is edited. - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - filteredThreads.size === 0 || filteredThreads.has(event.thread!), + filters.threads.size === 0 || + filters.threads.has(event.thread ?? 'nothread'), ); const showThreadsSection = allThreads.length > 1; @@ -118,31 +123,23 @@ export const FrameworkEventsInspector: React.FC<Props> = ({ } }} dropdownRender={() => ( - <Layout.Container - gap="small" - pad="small" - style={{ - backgroundColor: theme.white, - borderRadius: theme.borderRadius, - boxShadow: `0 0 4px 1px rgba(0,0,0,0.10)`, - }}> + <CustomDropDown> {showThreadsSection && ( <> - <Typography.Text strong>By thread</Typography.Text> + <Typography.Text + style={{padding: theme.space.small}} + strong> + By thread + </Typography.Text> {allThreads.map((thread) => ( <MultiSelectableDropDownItem onSelect={(thread, selected) => { - setFilteredThreads((cur) => - produce(cur, (draft) => { - if (selected) { - draft.add(thread); - } else { - draft.delete(thread); - } - }), + instance.uiActions.onChangeNodeLevelThreadFilter( + thread, + selected ? 'add' : 'remove', ); }} - selectedValues={filteredThreads} + selectedValues={filters.threads} key={thread} value={thread as string} text={startCase(thread) as string} @@ -153,21 +150,20 @@ export const FrameworkEventsInspector: React.FC<Props> = ({ {showEventTypesSection && ( <> - <Typography.Text strong>By event type</Typography.Text> + <Typography.Text + strong + style={{padding: theme.space.small}}> + By event type + </Typography.Text> {allEventTypes.map((eventType) => ( <MultiSelectableDropDownItem onSelect={(eventType, selected) => { - setFilteredEventTypes((cur) => - produce(cur, (draft) => { - if (selected) { - draft.add(eventType); - } else { - draft.delete(eventType); - } - }), + instance.uiActions.onChangeNodeLevelEventTypeFilter( + eventType, + selected ? 'add' : 'remove', ); }} - selectedValues={filteredEventTypes} + selectedValues={filters.eventTypes} key={eventType} value={eventType as string} text={eventTypeToName(eventType)} @@ -175,7 +171,7 @@ export const FrameworkEventsInspector: React.FC<Props> = ({ ))} </> )} - </Layout.Container> + </CustomDropDown> )}> <Button shape="circle" @@ -183,7 +179,7 @@ export const FrameworkEventsInspector: React.FC<Props> = ({ <Badge offset={[8, -8]} size="small" - count={filteredEventTypes.size + filteredThreads.size}> + count={filters.eventTypes.size + filters.threads.size}> <FilterOutlined style={{}} /> </Badge> } diff --git a/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx b/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx index 98da0d05856..a02080e0a79 100644 --- a/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx +++ b/desktop/plugins/public/ui-debugger/components/tree/ContextMenu.tsx @@ -162,7 +162,7 @@ export const ContextMenu: React.FC<{ }, ...Object.entries(hoveredNode.inlineAttributes).map( ([key, value]) => ({ - key: key, + key, label: `Copy ${key}`, icon: <SnippetsOutlined />, onClick: () => { diff --git a/desktop/plugins/public/ui-debugger/components/tree/CustomActions.tsx b/desktop/plugins/public/ui-debugger/components/tree/CustomActions.tsx new file mode 100644 index 00000000000..8553f7df01f --- /dev/null +++ b/desktop/plugins/public/ui-debugger/components/tree/CustomActions.tsx @@ -0,0 +1,134 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import React from 'react'; +import { + ActionIcon, + CustomAction, + CustomActionGroup, +} from '../../../ui-debugger/ClientTypes'; +import {Button, Dropdown, Typography} from 'antd'; +// eslint-disable-next-line rulesdir/no-restricted-imports-clone +import {Glyph} from 'flipper'; +import { + MultiSelectableDropDownItem, + StyledMultiSelectDropDownItem, +} from '../shared/MultiSelectableDropDownItem'; +import {CustomDropDown} from '../shared/CustomDropDown'; +import {styled, theme, usePlugin} from 'flipper-plugin'; +import {plugin} from '../../../ui-debugger'; + +function getIcon(icon: ActionIcon) { + switch (icon.type) { + case 'Local': + return ( + <img + src={icon.iconPath} + style={{height: 16, width: 16, marginTop: -2}} + /> + ); + case 'Fb': + return <Glyph name={icon.iconName} size={16} />; + case 'Antd': + throw new Error('Antd Icon Not implemented'); + } +} + +function DropDownItems({ + customActions, + groupIdx, +}: { + groupIdx: number; + customActions: CustomAction[]; +}) { + const instance = usePlugin(plugin); + + const selecteditems = customActions + .filter((items) => items.type === 'BooleanAction' && items.value === true) + .map((item) => item.title); + + return ( + <> + {customActions.map((action, actionIdx) => { + switch (action.type) { + case 'BooleanAction': + return ( + <MultiSelectableDropDownItem + onSelect={(_, selected) => { + instance.onCustomAction(groupIdx, actionIdx, selected); + }} + text={action.title} + value={action.title} + key={action.title} + selectedValues={new Set(selecteditems)} + /> + ); + case 'UnitAction': + return ( + <ClickableDropdownItem + gap="small" + center + onClick={() => + instance.onCustomAction(groupIdx, actionIdx, undefined) + }> + <Glyph + name="send" + variant="outline" + size={16} + color={theme.primaryColor} + /> + <Typography.Text>{action.title}</Typography.Text> + </ClickableDropdownItem> + ); + } + })} + </> + ); +} + +const ClickableDropdownItem = styled(StyledMultiSelectDropDownItem)({ + ':active': { + opacity: 0.7, + }, +}); + +export function CustomActionGroupDropDown({ + customActionGroup, + groupIdx, +}: { + customActionGroup: CustomActionGroup; + groupIdx: number; +}) { + return ( + <Dropdown + dropdownRender={() => { + return ( + <CustomDropDown> + <Typography.Text + style={{ + userSelect: 'none', + color: theme.textColorSecondary, + padding: theme.space.small, + }}> + {customActionGroup.title} + </Typography.Text> + <DropDownItems + customActions={customActionGroup.actions} + groupIdx={groupIdx} + /> + </CustomDropDown> + ); + }}> + <Button + type="default" + shape="circle" + icon={getIcon(customActionGroup.actionIcon)}></Button> + </Dropdown> + ); +} diff --git a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx index c6cb367f5f2..c8be774172a 100644 --- a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx +++ b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx @@ -7,7 +7,14 @@ * @format */ -import {Id, ClientNode, NodeMap, MetadataId, Metadata} from '../../ClientTypes'; +import { + Id, + ClientNode, + NodeMap, + MetadataId, + Metadata, + BoxData, +} from '../../ClientTypes'; import {Color, OnSelectNode} from '../../DesktopTypes'; import React, { CSSProperties, @@ -39,7 +46,11 @@ import { useKeyboardControlsCallback, } from './useKeyboardControls'; import {toTreeList} from './toTreeList'; -import {CaretDownOutlined, WarningOutlined} from '@ant-design/icons'; +import { + BorderOutlined, + CaretDownOutlined, + WarningOutlined, +} from '@ant-design/icons'; const {Text} = Typography; @@ -74,6 +85,9 @@ export function Tree2({ const nodeSelection = useValue(instance.uiState.nodeSelection); const isContextMenuOpen = useValue(instance.uiState.isContextMenuOpen); const hoveredNode = head(useValue(instance.uiState.hoveredNodes)); + const isBoxVisualiserEnabled = useValue( + instance.uiState.boxVisualiserEnabled, + ); const filterMainThreadMonitoring = useValue( instance.uiState.filterMainThreadMonitoring, @@ -290,6 +304,7 @@ export function Tree2({ innerRef={refs[virtualRow.index]} key={virtualRow.index} treeNode={treeNodes[virtualRow.index]} + boxVisualiserEnabled={isBoxVisualiserEnabled} highlightedNodes={highlightedNodes} selectedNode={nodeSelection?.node.id} hoveredNode={hoveredNode} @@ -386,7 +401,7 @@ const IndentGuides = React.memo( props.isSelected === nextProps.isSelected, ); -function TreeNodeRow({ +export function TreeNodeRow({ transform, innerRef, treeNode, @@ -399,12 +414,14 @@ function TreeNodeRow({ onExpandNode, onCollapseNode, onHoverNode, + boxVisualiserEnabled, }: { transform: string; innerRef: Ref<any>; treeNode: TreeNode; highlightedNodes: Map<Id, Color>; selectedNode?: Id; + boxVisualiserEnabled: boolean; hoveredNode?: Id; isUsingKBToScroll: RefObject<MillisSinceEpoch>; isContextMenuOpen: boolean; @@ -430,7 +447,7 @@ function TreeNodeRow({ top: 0, left: 0, height: TreeItemHeight, - transform: transform, + transform, //Due to absolute positioning width is set outside of react via a useLayoutEffect in parent }}> <IndentGuides @@ -470,19 +487,42 @@ function TreeNodeRow({ {nodeIcon(treeNode)} <TreeNodeTextContent treeNode={treeNode} /> + {boxVisualiserEnabled && boxDataHasData(treeNode.boxData) && ( + <Tooltip title="This element has padding, margin or border"> + <BorderOutlined style={{padding: theme.space.medium}} /> + </Tooltip> + )} {treeNode.frameworkEvents && ( - <Badge - count={treeNode.frameworkEvents} - style={{ - backgroundColor: theme.primaryColor, - marginLeft: theme.space.small, - }} - /> + <Tooltip + title={`${treeNode.frameworkEvents} monitored framework events`}> + <Badge + count={treeNode.frameworkEvents} + style={{ + backgroundColor: theme.primaryColor, + marginLeft: theme.space.small, + }} + /> + </Tooltip> )} </TreeNodeContent> </div> ); } +function boxDataHasData(boxData?: BoxData) { + if (boxData == null) { + return false; + } + for (let i = 0; i < boxData.border.length - 1; i++) { + if ( + boxData.border[i] > 0 || + boxData.padding[i] > 0 || + boxData.margin[i] > 0 + ) { + return true; + } + } + return false; +} function TreeNodeTextContent({treeNode}: {treeNode: TreeNode}) { const isZero = treeNode.bounds.width === 0 && treeNode.bounds.height === 0; diff --git a/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx b/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx index 8332168cef3..9d0d5697697 100644 --- a/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx +++ b/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx @@ -18,6 +18,8 @@ import { Space, Switch, Badge, + Dropdown, + Divider, } from 'antd'; // TODO: Fix this the next time the file is edited. // eslint-disable-next-line rulesdir/no-restricted-imports-clone, prettier/prettier @@ -28,6 +30,7 @@ import { PlayCircleOutlined, SearchOutlined, TableOutlined, + BellOutlined, } from '@ant-design/icons'; import {usePlugin, useValue, Layout, theme} from 'flipper-plugin'; import {FrameworkEventMetadata, FrameworkEventType} from '../../ClientTypes'; @@ -35,6 +38,30 @@ import { buildTreeSelectData, FrameworkEventsTreeSelect, } from '../shared/FrameworkEventsTreeSelect'; +import {createDropDownItem} from '../shared/createDropDownItem'; +import {TreeNodeRow} from './Tree'; +import {CustomActionGroupDropDown} from './CustomActions'; + +type FrameworkEventsDropDownItems = 'OpenTable' | 'Monitoring'; +const frameworkEventsDropDownItems = [ + { + key: 'group', + type: 'group', + label: 'Framework Events', + children: [ + createDropDownItem<FrameworkEventsDropDownItems>( + 'OpenTable', + 'Open global table', + <TableOutlined />, + ), + createDropDownItem<FrameworkEventsDropDownItems>( + 'Monitoring', + 'Real time monitoring', + <EyeOutlined />, + ), + ], + }, +]; export const TreeControls: React.FC = () => { const instance = usePlugin(plugin); @@ -60,6 +87,8 @@ export const TreeControls: React.FC = () => { const isConnected = useValue(instance.uiState.isConnected); + const customActionGroups = useValue(instance.customActionGroups); + return ( <Layout.Horizontal gap="medium" pad="medium"> <Input @@ -107,35 +136,47 @@ export const TreeControls: React.FC = () => { </Button> </Tooltip> )} + {customActionGroups.map((group, idx) => ( + <CustomActionGroupDropDown + key={group.title} + groupIdx={idx} + customActionGroup={group} + /> + ))} {frameworkEventMonitoring.size > 0 && ( <> - <Badge - size="small" - count={ - [...frameworkEventMonitoring.values()].filter( - (val) => val === true, - ).length - }> - <Button - type="default" - shape="circle" - onClick={() => { - setShowFrameworkEventsModal(true); - }} - icon={ - <Tooltip title="Framework event monitoring"> - <EyeOutlined /> - </Tooltip> - }></Button> - </Badge> + <Dropdown + menu={{ + selectable: false, + items: frameworkEventsDropDownItems, + onClick: (event) => { + const key: FrameworkEventType = event.key; + if (key === 'Monitoring') { + setShowFrameworkEventsModal(true); + } else if (key === 'OpenTable') { + instance.uiActions.onSetViewMode({ + mode: 'frameworkEventsTable', + isTree: false, + nodeId: null, + }); + } + }, + }}> + <Badge + size="small" + count={ + [...frameworkEventMonitoring.values()].filter( + (val) => val === true, + ).length + }> + <Button + type="default" + shape="circle" + icon={<BellOutlined />}></Button> + </Badge> + </Dropdown> + <FrameworkEventsMonitoringModal - showTable={() => { - instance.uiActions.onSetViewMode({ - mode: 'frameworkEventsTable', - isTree: false, - nodeId: null, - }); - }} metadata={frameworkEventMetadata} filterMainThreadMonitoring={filterMainThreadMonitoring} onSetFilterMainThreadMonitoring={ @@ -155,7 +196,6 @@ export const TreeControls: React.FC = () => { }; function FrameworkEventsMonitoringModal({ - showTable, visible, onCancel, onSetEventMonitored, @@ -164,7 +204,6 @@ function FrameworkEventsMonitoringModal({ frameworkEventTypes, metadata, }: { - showTable: () => void; metadata: Map<FrameworkEventType, FrameworkEventMetadata>; visible: boolean; onCancel: () => void; @@ -188,43 +227,75 @@ function FrameworkEventsMonitoringModal({ return ( <Modal title={ - <Layout.Horizontal center gap="large"> - <Typography.Title level={2}> - Framework event monitoring - </Typography.Title> - <Button icon={<TableOutlined />} onClick={showTable}> - Show Table - </Button> - </Layout.Horizontal> + <Typography.Title level={2}> + Real time event monitoring + </Typography.Title> } open={visible} footer={null} onCancel={onCancel}> <Space direction="vertical" size="large"> - <Typography.Text> - Monitoring an event will cause the relevant node in the visualizer and - tree to highlight briefly. Additionally counter will show the number - of matching events in the tree - </Typography.Text> - - <FrameworkEventsTreeSelect - placeholder="Select node types to monitor" - onSetEventSelected={onSetEventMonitored} - selected={selectedFrameworkEvents} - treeData={treeData} - /> - - <Layout.Horizontal gap="medium"> - <Switch - checked={filterMainThreadMonitoring} - onChange={(event) => { - onSetFilterMainThreadMonitoring(event); - }} + <Layout.Container gap="large"> + <FrameworkEventsTreeSelect + placeholder="Select event types to real time monitor" + onSetEventSelected={onSetEventMonitored} + selected={selectedFrameworkEvents} + treeData={treeData} /> - <Typography.Text> - Only highlight events that occured on the main thread - </Typography.Text> - </Layout.Horizontal> + + <Layout.Horizontal gap="medium"> + <Switch + checked={filterMainThreadMonitoring} + onChange={(event) => { + onSetFilterMainThreadMonitoring(event); + }} + /> + <Typography.Text> + Only highlight events that occured on the main thread + </Typography.Text> + </Layout.Horizontal> + + <Divider style={{margin: 0}} /> + + <Layout.Container gap="small"> + <Typography.Text style={{fontStyle: 'italic'}}> + When monitoring an event type, any components that fired this + event will highlight in the visualizer briefly. Additionally a + counter will show the total number of monitored events per + component in the tree view like so + </Typography.Text> + + <div style={{position: 'relative', height: 26, marginTop: 16}}> + <TreeNodeRow + boxVisualiserEnabled={false} + transform="" + onCollapseNode={() => {}} + onExpandNode={() => {}} + onHoverNode={() => {}} + onSelectNode={() => {}} + highlightedNodes={new Map()} + isContextMenuOpen={false} + innerRef={React.createRef<HTMLLIElement>()} + isUsingKBToScroll={React.createRef<number>()} + treeNode={{ + attributes: {}, + bounds: {x: 0, y: 0, width: 10, height: 10}, + children: [], + depth: 0, + frameworkEvents: 4, + id: '12', + idx: 0, + indentGuides: [], + inlineAttributes: {}, + isExpanded: true, + name: 'Example mountable component', + qualifiedName: '', + tags: ['Litho'], + }} + /> + </div> + </Layout.Container> + </Layout.Container> </Space> </Modal> ); diff --git a/desktop/plugins/public/ui-debugger/components/tree/toTreeList.tsx b/desktop/plugins/public/ui-debugger/components/tree/toTreeList.tsx index 1608d0c62f6..a0ee71a1d9c 100644 --- a/desktop/plugins/public/ui-debugger/components/tree/toTreeList.tsx +++ b/desktop/plugins/public/ui-debugger/components/tree/toTreeList.tsx @@ -6,6 +6,7 @@ * * @format */ + import { FrameworkEvent, FrameworkEventType, @@ -135,8 +136,8 @@ export function toTreeList( stackItem.parentIndentGuideDepths, depth, ), - isChildOfSelectedNode: isChildOfSelectedNode, - selectedNodeDepth: selectedNodeDepth, + isChildOfSelectedNode, + selectedNodeDepth, }); } } diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/VisualiserOverlays.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/VisualiserOverlays.tsx new file mode 100644 index 00000000000..e4c26e9b91b --- /dev/null +++ b/desktop/plugins/public/ui-debugger/components/visualizer/VisualiserOverlays.tsx @@ -0,0 +1,324 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import React from 'react'; +import {Coordinate, Id, ClientNode, NodeMap} from '../../ClientTypes'; +import {NodeSelection} from '../../DesktopTypes'; +import {styled, theme, usePlugin, useValue} from 'flipper-plugin'; +import {plugin} from '../../index'; +import {useDelay} from '../../hooks/useDelay'; +import {Tooltip} from 'antd'; +import {TargetModeState} from './VisualizerControls'; +import {getNode} from '../../utils/map'; +import {filterOutFalsy} from '../../utils/array'; +import {head} from 'lodash'; + +export const pxScaleFactorCssVar = '--pxScaleFactor'; + +export function toPx(n: number) { + return `calc(${n}px / var(${pxScaleFactorCssVar}))`; +} + +/** + * Most interactivity is moved to overlays, this makes the drawing of the wireframe itself simpler + * and can be memo'd more effectively since it changes less often e.g changing hovered / selected noded + * only rerenders overlays not all of the wireframe boxes + */ +export function VisualiserOverlays({ + snapshotNode, + nodeSelection, + nodes, + targetMode, + setTargetMode, + alignmentModeEnabled, + boxVisualiserEnabled, +}: { + snapshotNode: ClientNode; + nodeSelection?: NodeSelection; + nodes: NodeMap; + targetMode: TargetModeState; + setTargetMode: (state: TargetModeState) => void; + alignmentModeEnabled: boolean; + boxVisualiserEnabled: boolean; +}) { + const instance = usePlugin(plugin); + const hoveredNodes = useValue(instance.uiState.hoveredNodes); + const hoveredNodeId = head(hoveredNodes); + + const hoveredNode = getNode(hoveredNodeId, nodes); + //make sure to resolve the stale node + const selectedNode = getNode(nodeSelection?.node.id, nodes); + + const selectedNodeGlobalOffset = getGlobalOffset(selectedNode?.id, nodes); + const hoveredNodeGlobalOffset = getGlobalOffset(hoveredNodeId, nodes); + const overlayCursor = + targetMode.state === 'disabled' ? 'pointer' : 'crosshair'; + + const onClickHoveredOverlay = () => { + const selectedNode = getNode(hoveredNodeId, nodes); + if (selectedNode != null) { + instance.uiActions.onSelectNode(selectedNode, 'visualiser'); + instance.uiActions.ensureAncestorsExpanded(selectedNode.id); + } else { + instance.uiActions.onSelectNode(undefined, 'visualiser'); + } + + if (targetMode.state !== 'disabled') { + setTargetMode({ + state: 'selected', + targetedNodes: filterOutFalsy( + hoveredNodes + .slice() + .reverse() + .map((n) => getNode(n, nodes)), + ), + sliderPosition: hoveredNodes.length - 1, + }); + } + }; + + return ( + <> + {alignmentModeEnabled && selectedNode != null && ( + <AlignmentOverlay + globalOffset={selectedNodeGlobalOffset} + selectedNode={selectedNode} + nodes={nodes} + snapshotHeight={snapshotNode.bounds.height} + snapshotWidth={snapshotNode.bounds.width} + /> + )} + + {boxVisualiserEnabled && selectedNode != null && ( + <BoxModelOverlay + selectedNode={selectedNode} + globalOffset={selectedNodeGlobalOffset} + /> + )} + {hoveredNode != null && ( + <DelayedHoveredToolTip + key={hoveredNode.id} + node={hoveredNode} + nodes={nodes}> + <WireframeOverlay + borderWidth={alignmentModeEnabled ? MediumBorder : ThickBorder} + cursor={overlayCursor} + onClick={onClickHoveredOverlay} + globalOffset={hoveredNodeGlobalOffset} + node={hoveredNode} + type="hovered" + /> + </DelayedHoveredToolTip> + )} + + {selectedNode != null && ( + <WireframeOverlay + node={selectedNode} + globalOffset={selectedNodeGlobalOffset} + borderWidth={ + alignmentModeEnabled || boxVisualiserEnabled + ? ThinBorder + : ThickBorder + } + cursor={overlayCursor} + type="selected" + /> + )} + </> + ); +} + +const ThickBorder = 3; +const MediumBorder = 2; +const ThinBorder = 1; +const longHoverDelay = 500; + +const DelayedHoveredToolTip: React.FC<{ + node: ClientNode; + nodes: Map<Id, ClientNode>; + children: JSX.Element; +}> = ({node, children}) => { + const isVisible = useDelay(longHoverDelay); + + return ( + <Tooltip + open={isVisible} + key={node.id} + placement="top" + zIndex={100} + trigger={[]} + title={node.name} + align={{ + offset: [0, 7], + }}> + {children} + </Tooltip> + ); +}; + +const marginColor = 'rgba(248, 51, 60, 0.75)'; +const paddingColor = 'rgba(252, 171, 16, 0.75)'; +const borderColor = 'rgba(68, 175, 105)'; + +const BoxModelOverlay: React.FC<{ + selectedNode: ClientNode; + globalOffset: Coordinate; +}> = ({selectedNode, globalOffset}) => { + const boxData = selectedNode.boxData; + if (boxData == null) return null; + + return ( + <div + style={{ + position: 'absolute', + zIndex: 99, + left: toPx(globalOffset.x), + top: toPx(globalOffset.y), + width: toPx(selectedNode.bounds.width), + height: toPx(selectedNode.bounds.height), + }}> + <OuterBoxOverlay boxdata={boxData.margin} color={marginColor}> + <InnerBoxOverlay boxdata={boxData.border} color={borderColor}> + <InnerBoxOverlay boxdata={boxData.padding} color={paddingColor} /> + </InnerBoxOverlay> + </OuterBoxOverlay> + </div> + ); +}; + +/** + * Draws outwards from parent to simulate margin + */ +const OuterBoxOverlay = styled.div<{ + boxdata: [number, number, number, number]; + color: string; +}>(({boxdata, color}) => { + const [left, right, top, bottom] = boxdata; + return { + position: 'absolute', + top: toPx(-top), + bottom: toPx(-bottom), + left: toPx(-left), + right: toPx(-right), + borderLeft: toPx(left), + borderRightWidth: toPx(right), + borderTopWidth: toPx(top), + borderBottomWidth: toPx(bottom), + borderStyle: 'solid', + borderColor: color, + }; +}); + +/** + * Draws inside parent to simulate border and padding + */ +const InnerBoxOverlay = styled.div<{ + boxdata: [number, number, number, number]; + color: string; +}>(({boxdata, color}) => { + const [left, right, top, bottom] = boxdata; + return { + width: '100%', + height: '100%', + borderLeftWidth: toPx(left), + borderRightWidth: toPx(right), + borderTopWidth: toPx(top), + borderBottomWidth: toPx(bottom), + borderStyle: 'solid', + borderColor: color, + }; +}); + +const alignmentOverlayBorder = `1px dashed ${theme.primaryColor}`; + +const AlignmentOverlay: React.FC<{ + selectedNode: ClientNode; + nodes: Map<Id, ClientNode>; + snapshotWidth: number; + snapshotHeight: number; + globalOffset: Coordinate; +}> = ({selectedNode, snapshotHeight, snapshotWidth, globalOffset}) => { + return ( + <> + <div + style={{ + position: 'absolute', + zIndex: 99, + borderLeft: alignmentOverlayBorder, + borderRight: alignmentOverlayBorder, + width: toPx(selectedNode.bounds.width), + height: toPx(snapshotHeight), + left: toPx(globalOffset.x), + }} + /> + <div + style={{ + position: 'absolute', + zIndex: 99, + borderTop: alignmentOverlayBorder, + borderBottom: alignmentOverlayBorder, + width: toPx(snapshotWidth), + height: toPx(selectedNode.bounds.height), + top: toPx(globalOffset.y), + }} + /> + </> + ); +}; + +/** + * Used to indicate hovered and selected states + */ +const WireframeOverlay = styled.div<{ + borderWidth: number; + cursor: 'pointer' | 'crosshair'; + type: 'selected' | 'hovered'; + node: ClientNode; + globalOffset: Coordinate; +}>(({type, node, globalOffset, cursor, borderWidth}) => { + return { + zIndex: 100, + pointerEvents: type === 'selected' ? 'none' : 'auto', + cursor, + position: 'absolute', + top: toPx(globalOffset.y), + left: toPx(globalOffset.x), + width: toPx(node.bounds.width), + height: toPx(node.bounds.height), + boxSizing: 'border-box', + borderWidth, + borderStyle: 'solid', + color: 'transparent', + borderColor: + type === 'selected' ? theme.primaryColor : theme.textColorPlaceholder, + }; +}); + +/** + * computes the x,y offset of a given node from the root of the visualization + * in node coordinates + */ +function getGlobalOffset( + id: Id | undefined, + nodes: Map<Id, ClientNode>, +): Coordinate { + const offset = {x: 0, y: 0}; + let curId: Id | undefined = id; + + while (curId != null) { + const cur = nodes.get(curId); + if (cur != null) { + offset.x += cur.bounds.x; + offset.y += cur.bounds.y; + } + curId = cur?.parent; + } + + return offset; +} diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx index e6c769d6f0f..41cbd016d3f 100644 --- a/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx +++ b/desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx @@ -32,12 +32,13 @@ import { Layout, } from 'flipper-plugin'; import {plugin} from '../../index'; -import {head, isEqual, throttle} from 'lodash'; -import {useDelay} from '../../hooks/useDelay'; -import {Tooltip} from 'antd'; +import {isEqual, throttle} from 'lodash'; import {TargetModeState, VisualiserControls} from './VisualizerControls'; -import {getNode} from '../../utils/map'; -import {filterOutFalsy} from '../../utils/array'; +import { + VisualiserOverlays, + pxScaleFactorCssVar, + toPx, +} from './VisualiserOverlays'; export const Visualization2D: React.FC< { @@ -52,6 +53,8 @@ export const Visualization2D: React.FC< const focusedNodeId = useValue(instance.uiState.focusedNode); const nodeSelection = useValue(instance.uiState.nodeSelection); const wireFrameMode = useValue(instance.uiState.wireFrameMode); + const boxVisualiserEnabled = useValue(instance.uiState.boxVisualiserEnabled); + const [alignmentModeEnabled, setAlignmentModeEnabled] = useState(false); const [targetMode, setTargetMode] = useState<TargetModeState>({ state: 'disabled', @@ -76,6 +79,10 @@ export const Visualization2D: React.FC< selectedNode={nodeSelection?.node} setTargetMode={setTargetMode} targetMode={targetMode} + alignmentModeEnabled={alignmentModeEnabled} + setAlignmentModeEnabled={setAlignmentModeEnabled} + boxVisualiserEnabled={boxVisualiserEnabled} + setBoxVisualiserEnabled={instance.uiActions.onSetBoxVisualiserEnabled} /> )} <Visualization2DContent @@ -88,12 +95,14 @@ export const Visualization2D: React.FC< setTargetMode={setTargetMode} wireframeMode={wireFrameMode} nodeSelection={nodeSelection} + alignmentModeEnabled={alignmentModeEnabled} + boxVisualiserEnabled={boxVisualiserEnabled} /> </Layout.Container> ); }; -const horizontalPadding = 16; //allows space for vertical scroll bar +const horizontalPadding = 8; //allows space for vertical scroll bar function Visualization2DContent({ disableInteractivity, @@ -105,10 +114,11 @@ function Visualization2DContent({ setTargetMode, wireframeMode, nodeSelection, + alignmentModeEnabled, + boxVisualiserEnabled, }: { targetMode: TargetModeState; setTargetMode: (targetMode: TargetModeState) => void; - wireframeMode: WireFrameMode; nodeSelection?: NodeSelection; focusState: FocusState; @@ -116,15 +126,17 @@ function Visualization2DContent({ snapshotNode: ClientNode; snapshotInfo: SnapshotInfo; disableInteractivity: boolean; + alignmentModeEnabled: boolean; + boxVisualiserEnabled: boolean; }) { const instance = usePlugin(plugin); - const hoveredNodes = useValue(instance.uiState.hoveredNodes); - const hoveredNodeId = head(hoveredNodes); const rootNodeRef = useRef<HTMLDivElement>(); const containerRef = useRef<HTMLDivElement>(null); const traversalMode = useValue(instance.uiState.traversalMode); + const referenceImage = useValue(instance.uiState.referenceImage); + const measuredWidth = useMeasuredWidth(containerRef); const availableWidthConsideringPadding = @@ -205,37 +217,13 @@ function Visualization2DContent({ availableWidthConsideringPadding, ); - const overlayCursor = - targetMode.state === 'disabled' ? 'pointer' : 'crosshair'; - - const onClickOverlay = () => { - const selectedNode = getNode(hoveredNodeId, nodes); - if (selectedNode != null) { - instance.uiActions.onSelectNode(selectedNode, 'visualiser'); - instance.uiActions.ensureAncestorsExpanded(selectedNode.id); - } else { - instance.uiActions.onSelectNode(undefined, 'visualiser'); - } - - if (targetMode.state !== 'disabled') { - setTargetMode({ - state: 'selected', - targetedNodes: filterOutFalsy( - hoveredNodes - .slice() - .reverse() - .map((n) => getNode(n, nodes)), - ), - sliderPosition: hoveredNodes.length - 1, - }); - } - }; - return ( <Layout.ScrollContainer ref={containerRef} style={{ paddingLeft: horizontalPadding, + overflowY: 'scroll', + scrollbarWidth: 'thin', }} vertical> <div @@ -264,28 +252,15 @@ function Visualization2DContent({ height: toPx(focusState.actualRoot.bounds.height), } as React.CSSProperties }> - {hoveredNodeId != null && ( - <DelayedHoveredToolTip - key={hoveredNodeId} - nodeId={hoveredNodeId} - nodes={nodes}> - <OverlayBorder - cursor={overlayCursor} - onClick={onClickOverlay} - nodeId={hoveredNodeId} - nodes={nodes} - type="hovered" - /> - </DelayedHoveredToolTip> - )} - {nodeSelection != null && ( - <OverlayBorder - cursor={overlayCursor} - type="selected" - nodeId={nodeSelection.node.id} - nodes={nodes} - /> - )} + <VisualiserOverlays + nodes={nodes} + nodeSelection={nodeSelection} + targetMode={targetMode} + setTargetMode={setTargetMode} + snapshotNode={snapshotNode} + alignmentModeEnabled={alignmentModeEnabled} + boxVisualiserEnabled={boxVisualiserEnabled} + /> <div ref={rootNodeRef as any} style={{ @@ -305,10 +280,22 @@ function Visualization2DContent({ height: toPx(focusState.focusedRoot.bounds.height), overflow: 'hidden', }}> - {snapshotNode && ( + <img + src={`data:image/png;base64,${snapshotInfo.data}`} + style={{ + position: 'absolute', + marginLeft: toPx(-focusState.focusedRootGlobalOffset.x), + marginTop: toPx(-focusState.focusedRootGlobalOffset.y), + width: toPx(snapshotNode.bounds.width), + height: toPx(snapshotNode.bounds.height), + }} + /> + {referenceImage != null && ( <img - src={'data:image/png;base64,' + snapshotInfo.data} + src={referenceImage.url} style={{ + position: 'absolute', + opacity: referenceImage.opacity, marginLeft: toPx(-focusState.focusedRootGlobalOffset.x), marginTop: toPx(-focusState.focusedRootGlobalOffset.y), width: toPx(snapshotNode.bounds.width), @@ -316,7 +303,8 @@ function Visualization2DContent({ }} /> )} - <MemoedVisualizationNode2D + + <MemoedVisualizationWireframeNode wireframeMode={wireframeMode} isSelectedOrChildOrSelected={false} selectedNodeId={nodeSelection?.node.id} @@ -330,8 +318,8 @@ function Visualization2DContent({ ); } -const MemoedVisualizationNode2D = React.memo( - Visualization2DNode, +const MemoedVisualizationWireframeNode = React.memo( + VisualizationWireframeNode, (prev, next) => { if (prev.node != next.node || prev.wireframeMode != next.wireframeMode) { return false; @@ -347,7 +335,7 @@ const MemoedVisualizationNode2D = React.memo( }, ); -function Visualization2DNode({ +function VisualizationWireframeNode({ wireframeMode, isSelectedOrChildOrSelected, selectedNodeId, @@ -382,7 +370,7 @@ function Visualization2DNode({ } const children = nestedChildren.map((child, index) => ( - <Visualization2DNode + <VisualizationWireframeNode wireframeMode={wireframeMode} selectedNodeId={selectedNodeId} isSelectedOrChildOrSelected={isSelected || isSelectedOrChildOrSelected} @@ -446,77 +434,6 @@ function Visualization2DNode({ ); } -const DelayedHoveredToolTip: React.FC<{ - nodeId: Id; - nodes: Map<Id, ClientNode>; - children: JSX.Element; -}> = ({nodeId, nodes, children}) => { - const node = nodes.get(nodeId); - - const isVisible = useDelay(longHoverDelay); - - return ( - <Tooltip - open={isVisible} - key={nodeId} - placement="top" - zIndex={100} - trigger={[]} - title={node?.name} - align={{ - offset: [0, 7], - }}> - {children} - </Tooltip> - ); -}; - -const OverlayBorder = styled.div<{ - cursor: 'pointer' | 'crosshair'; - type: 'selected' | 'hovered'; - nodeId: Id; - nodes: Map<Id, ClientNode>; -}>(({type, nodeId, nodes, cursor}) => { - const offset = getTotalOffset(nodeId, nodes); - const node = nodes.get(nodeId); - return { - zIndex: 100, - pointerEvents: type === 'selected' ? 'none' : 'auto', - cursor: cursor, - position: 'absolute', - top: toPx(offset.y), - left: toPx(offset.x), - width: toPx(node?.bounds?.width ?? 0), - height: toPx(node?.bounds?.height ?? 0), - boxSizing: 'border-box', - borderWidth: 3, - borderStyle: 'solid', - color: 'transparent', - borderColor: - type === 'selected' ? theme.primaryColor : theme.textColorPlaceholder, - }; -}); - -/** - * computes the x,y offset of a given node from the root of the visualization - * in node coordinates - */ -function getTotalOffset(id: Id, nodes: Map<Id, ClientNode>): Coordinate { - const offset = {x: 0, y: 0}; - let curId: Id | undefined = id; - - while (curId != null) { - const cur = nodes.get(curId); - if (cur != null) { - offset.x += cur.bounds.x; - offset.y += cur.bounds.y; - } - curId = cur?.parent; - } - - return offset; -} - /** * this is the border that shows the green or blue line, it is implemented as a sibling to the * node itself so that it has the same size but the border doesnt affect the sizing of its children @@ -535,14 +452,8 @@ const NodeBorder = styled.div({ borderColor: theme.disabledColor, }); -const longHoverDelay = 500; -const pxScaleFactorCssVar = '--pxScaleFactor'; const MouseThrottle = 32; -function toPx(n: number) { - return `calc(${n}px / var(${pxScaleFactorCssVar}))`; -} - function toNestedNode( rootId: Id, nodes: Map<Id, ClientNode>, @@ -578,7 +489,7 @@ function toNestedNode( ), bounds: node.bounds, tags: node.tags, - activeChildIdx: activeChildIdx, + activeChildIdx, }; } @@ -650,7 +561,14 @@ function hitTest(node: NestedNode, mouseCoordinate: Coordinate): NestedNode[] { let children = node.children; if (node.activeChildIdx != null) { - children = [node.children[node.activeChildIdx]]; + const activeChild = node.children[node.activeChildIdx]; + if (activeChild == null) { + console.error( + `[ui-debugger] activeChildIdx not found for ${node.name}: ${node.activeChildIdx} not within ${node.children.length}`, + ); + } else { + children = [activeChild]; + } } const offsetMouseCoord = offsetCoordinate(mouseCoordinate, nodeBounds); let anyChildHitRecursive = false; diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx index 48141e56cf8..50c213f1406 100644 --- a/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx +++ b/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx @@ -8,19 +8,27 @@ */ import {Button, Dropdown, Slider, Tooltip, Typography} from 'antd'; -import {Layout, produce, theme, usePlugin} from 'flipper-plugin'; +import {Layout, produce, theme, usePlugin, useValue} from 'flipper-plugin'; import {ClientNode, Id} from '../../ClientTypes'; import {plugin} from '../../index'; import React from 'react'; import { AimOutlined, + AlignLeftOutlined, + BorderOutlined, FullscreenExitOutlined, FullscreenOutlined, PicCenterOutlined, + PictureOutlined, } from '@ant-design/icons'; import {tracker} from '../../utils/tracker'; import {debounce} from 'lodash'; -import {WireFrameMode} from '../../DesktopTypes'; +import { + ReferenceImageAction, + ReferenceImageState, + WireFrameMode, +} from '../../DesktopTypes'; +import {createDropDownItem} from '../shared/createDropDownItem'; export type TargetModeState = | { state: 'selected'; @@ -34,14 +42,28 @@ export type TargetModeState = state: 'disabled'; }; -function createItem(wireframeMode: WireFrameMode, label: string) { - return {key: wireframeMode, label: label}; -} - const wireFrameModeDropDownItems = [ - createItem('All', 'All'), - createItem('SelectedAndChildren', 'Selected and children'), - createItem('SelectedOnly', 'Selected only'), + createDropDownItem<WireFrameMode>('All', 'All'), + createDropDownItem<WireFrameMode>( + 'SelectedAndChildren', + 'Selected and children', + ), + createDropDownItem<WireFrameMode>('SelectedOnly', 'Selected only'), +]; + +const refernceImageItemsWithOutClear = [ + createDropDownItem<ReferenceImageAction>( + 'Import', + 'Load reference image from disk', + ), +]; + +const refernceImageItemsWithClear = [ + createDropDownItem<ReferenceImageAction>( + 'Import', + 'Load reference image from disk', + ), + createDropDownItem<ReferenceImageAction>('Clear', 'Clear reference image'), ]; export function VisualiserControls({ @@ -51,6 +73,10 @@ export function VisualiserControls({ focusedNode, wireFrameMode, onSetWireFrameMode, + alignmentModeEnabled, + setAlignmentModeEnabled, + boxVisualiserEnabled, + setBoxVisualiserEnabled, }: { wireFrameMode: WireFrameMode; onSetWireFrameMode: (mode: WireFrameMode) => void; @@ -58,9 +84,15 @@ export function VisualiserControls({ focusedNode?: Id; setTargetMode: (targetMode: TargetModeState) => void; targetMode: TargetModeState; + alignmentModeEnabled: boolean; + setAlignmentModeEnabled: (enabled: boolean) => void; + boxVisualiserEnabled: boolean; + setBoxVisualiserEnabled: (enabled: boolean) => void; }) { const instance = usePlugin(plugin); + const referenceImage = useValue(instance.uiState.referenceImage); + const focusDisabled = focusedNode == null && (selectedNode == null || selectedNode.children.length === 0); @@ -73,118 +105,245 @@ export function VisualiserControls({ const targetToolTip = targetMode.state === 'disabled' ? 'Target Mode' : 'Exit target mode'; + const boxModeDisabled = selectedNode?.boxData == null; return ( - <Layout.Right - style={{padding: theme.space.medium, flexGrow: 0}} - gap="medium" - center> - <Layout.Container style={{userSelect: 'none'}}> - {targetMode.state === 'active' && ( - <Typography.Text strong>Target mode: Select element</Typography.Text> - )} - {targetMode.state === 'disabled' && ( - <Typography.Text - strong - style={{ - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden', - }}> - Interactive Visualizer - </Typography.Text> - )} - {targetMode.state === 'selected' && ( - <Slider - min={0} - value={targetMode.sliderPosition} - max={targetMode.targetedNodes.length - 1} - onChange={(value) => { - setTargetMode( - produce(targetMode, (draft) => { - draft.sliderPosition = value; - }), - ); - instance.uiActions.onSelectNode( - targetMode.targetedNodes[value], - 'visualiser', - ); - - debouncedReportTargetAdjusted(); - }} - /> - )} - </Layout.Container> - - <Layout.Horizontal gap="medium" center> - <Dropdown - menu={{ - selectable: true, - selectedKeys: [wireFrameMode], - items: wireFrameModeDropDownItems, - onSelect: (event) => { - onSetWireFrameMode(event.selectedKeys[0] as WireFrameMode); - }, + <Layout.Container padh="large" gap="small" padv="medium"> + <Layout.Right style={{flexGrow: 0}} gap="medium" center> + <Typography.Text + strong + style={{ + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', }}> - <Tooltip title="Wireframe Mode"> - <Button shape="circle"> - <PicCenterOutlined /> - </Button> - </Tooltip> - </Dropdown> - <Tooltip title={targetToolTip}> - <Button - shape="circle" - onClick={() => { - if (targetMode.state === 'disabled') { - setTargetMode({state: 'active'}); - tracker.track('target-mode-switched', {on: true}); - } else { - setTargetMode({state: 'disabled'}); - tracker.track('target-mode-switched', {on: false}); - } - }} - icon={ - <AimOutlined - style={{ - color: - targetMode.state === 'disabled' - ? theme.black - : theme.primaryColor, - }} - /> - } - /> - </Tooltip> - <Tooltip title={focusToolTip}> - <Button - shape="circle" - disabled={focusDisabled} - onClick={() => { - if (focusedNode == null) { - instance.uiActions.onFocusNode(selectedNode?.id); - } else { - instance.uiActions.onFocusNode(); + Visualizer + </Typography.Text> + + <Layout.Horizontal gap="medium" center> + <Tooltip + title={ + boxModeDisabled + ? 'Box visualisation not available for this element type' + : 'Box model visualisation mode' + }> + <Button + disabled={boxModeDisabled} + shape="circle" + onClick={() => { + setBoxVisualiserEnabled(!boxVisualiserEnabled); + }} + icon={ + <BorderOutlined + style={{ + color: + boxVisualiserEnabled && !boxModeDisabled + ? theme.primaryColor + : theme.black, + }} + /> } - }} - icon={ - focusedNode == null ? ( - <FullscreenExitOutlined + /> + </Tooltip> + <Tooltip title="Alignment mode"> + <Button + shape="circle" + onClick={() => { + tracker.track('alignment-mode-switched', { + on: !alignmentModeEnabled, + }); + setAlignmentModeEnabled(!alignmentModeEnabled); + }} + icon={ + <AlignLeftOutlined style={{ - color: theme.black, + color: alignmentModeEnabled + ? theme.primaryColor + : theme.black, }} /> - ) : ( - <FullscreenOutlined + } + /> + </Tooltip> + <Dropdown + menu={{ + selectable: true, + selectedKeys: [wireFrameMode], + items: wireFrameModeDropDownItems, + onSelect: (event) => { + onSetWireFrameMode(event.selectedKeys[0] as WireFrameMode); + }, + }}> + <Tooltip title="Wireframe Mode"> + <Button shape="circle"> + <PicCenterOutlined /> + </Button> + </Tooltip> + </Dropdown> + <Dropdown + menu={{ + selectable: false, + items: + referenceImage == null + ? refernceImageItemsWithOutClear + : refernceImageItemsWithClear, + + onClick: async (event) => { + instance.uiActions.onReferenceImageAction( + event.key as ReferenceImageAction, + ); + }, + }}> + <Tooltip title="Reference image"> + <Button shape="circle"> + <PictureOutlined /> + </Button> + </Tooltip> + </Dropdown> + <Tooltip title={targetToolTip}> + <Button + shape="circle" + onClick={() => { + if (targetMode.state === 'disabled') { + setTargetMode({state: 'active'}); + tracker.track('target-mode-switched', {on: true}); + } else { + setTargetMode({state: 'disabled'}); + tracker.track('target-mode-switched', {on: false}); + } + }} + icon={ + <AimOutlined style={{ - color: theme.primaryColor, + color: + targetMode.state === 'disabled' + ? theme.black + : theme.primaryColor, }} /> - ) - } - /> - </Tooltip> - </Layout.Horizontal> - </Layout.Right> + } + /> + </Tooltip> + + <Tooltip title={focusToolTip}> + <Button + shape="circle" + disabled={focusDisabled} + onClick={() => { + if (focusedNode == null) { + instance.uiActions.onFocusNode(selectedNode?.id); + } else { + instance.uiActions.onFocusNode(); + } + }} + icon={ + focusedNode == null ? ( + <FullscreenExitOutlined + style={{ + color: theme.black, + }} + /> + ) : ( + <FullscreenOutlined + style={{ + color: theme.primaryColor, + }} + /> + ) + } + /> + </Tooltip> + </Layout.Horizontal> + </Layout.Right> + <SecondaryControlArea + referenceImage={referenceImage} + targetMode={targetMode} + setTargetMode={setTargetMode} + /> + </Layout.Container> + ); +} + +/** + * Panel below that shows additional controls when certain functions are active + */ +function SecondaryControlArea({ + targetMode, + setTargetMode, + referenceImage, +}: { + referenceImage: ReferenceImageState | null; + targetMode: TargetModeState; + setTargetMode: (state: TargetModeState) => void; +}) { + const instance = usePlugin(plugin); + + let textContent: string | null = ''; + let additionalContent: React.ReactElement | null = null; + + if (targetMode.state !== 'disabled') { + textContent = + targetMode.state === 'active' + ? 'Target mode: Select overlapping elements' + : targetMode.targetedNodes.length === 1 + ? 'No overlapping elements detected' + : 'Pick element'; + + if ( + targetMode.state === 'selected' && + targetMode.targetedNodes.length > 1 + ) { + additionalContent = ( + <Slider + min={0} + value={targetMode.sliderPosition} + max={targetMode.targetedNodes.length - 1} + tooltip={{ + formatter: (number) => + number != null ? targetMode.targetedNodes[number].name : '', + }} + onChange={(value) => { + setTargetMode( + produce(targetMode, (draft) => { + draft.sliderPosition = value; + }), + ); + instance.uiActions.onSelectNode( + targetMode.targetedNodes[value], + 'visualiser', + ); + + debouncedReportTargetAdjusted(); + }} + /> + ); + } + } else if (referenceImage != null) { + textContent = 'Opacity'; + additionalContent = ( + <Slider + min={0} + max={1} + step={0.05} + value={referenceImage.opacity} + onChange={(value) => { + instance.uiActions.onReferenceImageAction(value); + }} + /> + ); + } else { + return null; + } + + return ( + <Layout.Horizontal center style={{paddingTop: theme.space.tiny}}> + <Typography.Text style={{flexGrow: 1}}>{textContent}</Typography.Text> + <div + style={{ + flexGrow: 3.5, + }}> + {additionalContent} + </div> + </Layout.Horizontal> ); } diff --git a/desktop/plugins/public/ui-debugger/index.tsx b/desktop/plugins/public/ui-debugger/index.tsx index 25bd811231c..61f19e1afef 100644 --- a/desktop/plugins/public/ui-debugger/index.tsx +++ b/desktop/plugins/public/ui-debugger/index.tsx @@ -25,6 +25,7 @@ import { ClientNode, FrameworkEventMetadata, Methods, + CustomActionGroup, } from './ClientTypes'; import { UIState, @@ -74,6 +75,8 @@ export function plugin(client: PluginClient<Events, Methods>) { Map<FrameworkEventType, FrameworkEventMetadata> >(new Map()); + const customActionGroups = createState<CustomActionGroup[]>([]); + const uiState: UIState = createUIState(); //this is the client data is what drives all of desktop UI @@ -107,6 +110,10 @@ export function plugin(client: PluginClient<Events, Methods>) { draft.set(frameworkEventMeta.type, false); }); }); + + if (event.customActionGroups != null) { + customActionGroups.set(event.customActionGroups); + } if ( event.supportedTraversalModes && event.supportedTraversalModes.length > 1 @@ -169,7 +176,7 @@ export function plugin(client: PluginClient<Events, Methods>) { streamInterceptor.emit('frameReceived', { frameTime: frameScan.frameTime, snapshot: frameScan.snapshot, - nodes: nodes, + nodes, }); applyFrameworkEvents(frameScan, nodes); }; @@ -178,9 +185,6 @@ export function plugin(client: PluginClient<Events, Methods>) { if (frame.frameTime > lastProcessedFrameTime.get()) { applyFrameData(frame.nodes, frame.snapshot); lastProcessedFrameTime.set(frame.frameTime); - const selectedNode = uiState.nodeSelection.get(); - if (selectedNode != null) - _uiActions.ensureAncestorsExpanded(selectedNode.node.id); } }); @@ -275,8 +279,45 @@ export function plugin(client: PluginClient<Events, Methods>) { }); client.onMessage('frameScan', processFrame); + async function onCustomAction<T extends boolean | undefined>( + customActionGroupIndex: number, + customActionIndex: number, + value: T, + ) { + try { + const response = await client.send('onCustomAction', { + customActionGroupIndex, + customActionIndex, + value, + }); + + customActionGroups.update((draft) => { + const action = draft[customActionGroupIndex].actions[customActionIndex]; + + switch (action.type) { + case 'UnitAction': + return; + case 'BooleanAction': + action.value = response.result as boolean; + } + }); + } catch (e) { + console.warn('onCustomAction failed', e); + } + } + + async function onAdditionalDataCollectionChanged( + nodeId: Id, + changeType: 'Add' | 'Remove', + ) { + client.send('additionalNodeInspectionChange', {nodeId, changeType}); + } + return { rootId, + customActionGroups, + onAdditionalDataCollectionChanged, + onCustomAction, currentFrameTime: lastProcessedFrameTime as _ReadOnlyAtom<number>, uiState: uiState as ReadOnlyUIState, uiActions: _uiActions, @@ -299,7 +340,7 @@ export * from './ClientTypes'; function createUIState(): UIState { return { isConnected: createState(false), - + boxVisualiserEnabled: createState(false), viewMode: createState({mode: 'default'}), //used to disabled hover effects which cause rerenders and mess up the existing context menu @@ -324,6 +365,11 @@ function createUIState(): UIState { //The nodes are sorted by area since you most likely want to select the smallest node under your cursor hoveredNodes: createState<Id[]>([]), + nodeLevelFrameworkEventFilters: createState({ + threads: new Set(), + eventTypes: new Set(), + }), + searchTerm: createState<string>(''), focusedNode: createState<Id | undefined>(undefined), expandedNodes: createState<Set<Id>>(new Set()), @@ -332,5 +378,7 @@ function createUIState(): UIState { // view-hierarchy is the default state so we start with it until we fetch supported modes from the client supportedTraversalModes: createState<TraversalMode[]>(['view-hierarchy']), traversalMode: createState<TraversalMode>('view-hierarchy'), + + referenceImage: createState(null), }; } diff --git a/desktop/plugins/public/ui-debugger/package.json b/desktop/plugins/public/ui-debugger/package.json index 8326f56f844..03128a41c04 100644 --- a/desktop/plugins/public/ui-debugger/package.json +++ b/desktop/plugins/public/ui-debugger/package.json @@ -19,7 +19,7 @@ "react-query": "^3.39.1", "async": "2.3.0", "@tanstack/react-virtual": "3.0.0-beta.54", - "ts-retry-promise": "^0.7.0", + "ts-retry-promise": "^0.8.1", "memoize-weak": "^1.0.2", "eventemitter3": "^4.0.7" }, diff --git a/desktop/plugins/public/ui-debugger/plugin/uiActions.tsx b/desktop/plugins/public/ui-debugger/plugin/uiActions.tsx index dfe67b1c739..c39a338feeb 100644 --- a/desktop/plugins/public/ui-debugger/plugin/uiActions.tsx +++ b/desktop/plugins/public/ui-debugger/plugin/uiActions.tsx @@ -7,7 +7,7 @@ * @format */ -import {Atom, PluginClient} from 'flipper-plugin'; +import {Atom, PluginClient, getFlipperLib} from 'flipper-plugin'; import {debounce, last} from 'lodash'; import { ClientNode, @@ -28,6 +28,8 @@ import { UIState, ViewMode, WireFrameMode, + ReferenceImageAction, + Operation, } from '../DesktopTypes'; import {tracker} from '../utils/tracker'; import {checkFocusedNodeStillActive} from './ClientDataUtils'; @@ -58,7 +60,7 @@ export function uiActions( } else { uiState.nodeSelection.set({ source, - node: node, //last known state of the node, may be offscreen + node, //last known state of the node, may be offscreen }); } @@ -66,7 +68,7 @@ export function uiActions( tracker.track('node-selected', { name: node.name, tags: node.tags, - source: source, + source, }); let current = node.parent; @@ -253,11 +255,11 @@ export function uiActions( ); tracker.track('attribute-editted', { - nodeId: nodeId, + nodeId, nodeName: node?.name ?? 'Unknown', attributeName: last(attributePath) ?? 'Unknown', attributePath, - value: value, + value, attributeType: (typeof value).toString(), tags: node?.tags ?? [], }); @@ -265,9 +267,61 @@ export function uiActions( 100, ); + const onReferenceImageAction = async (action: ReferenceImageAction) => { + if (action === 'Import') { + const fileDescriptor = await getFlipperLib().importFile({ + title: 'Select a reference image', + extensions: ['.png'], + encoding: 'binary', + }); + + if (fileDescriptor?.data != null) { + const blob = new Blob([fileDescriptor.data], {type: 'image/png'}); + const imageUrl = URL.createObjectURL(blob); + uiState.referenceImage.set({url: imageUrl, opacity: 0.7}); + tracker.track('reference-image-switched', {on: true}); + } + } else if (action === 'Clear') { + uiState.referenceImage.set(null); + tracker.track('reference-image-switched', {on: false}); + } else if (typeof action === 'number') { + uiState.referenceImage.update((draft) => { + if (draft != null) draft.opacity = action; + }); + } + }; + + const onChangeNodeLevelEventTypeFilter = (thread: string, op: Operation) => { + uiState.nodeLevelFrameworkEventFilters.update((draft) => { + if (op === 'add') { + draft.eventTypes.add(thread); + } else { + draft.eventTypes.delete(thread); + } + }); + }; + + const onChangeNodeLevelThreadFilter = (eventType: string, op: Operation) => { + uiState.nodeLevelFrameworkEventFilters.update((draft) => { + if (op === 'add') { + draft.threads.add(eventType); + } else { + draft.threads.delete(eventType); + } + }); + }; + + const onSetBoxVisualiserEnabled = (enabled: boolean) => { + uiState.boxVisualiserEnabled.set(enabled); + tracker.track('box-visualiser-switched', { + on: enabled, + }); + }; + return { onExpandNode, onCollapseNode, + onSetBoxVisualiserEnabled, onHoverNode, onSelectNode, onContextMenuOpen, @@ -284,6 +338,9 @@ export function uiActions( onCollapseAllRecursively, ensureAncestorsExpanded, onSetTraversalMode, + onReferenceImageAction, + onChangeNodeLevelEventTypeFilter, + onChangeNodeLevelThreadFilter, editClientAttribute, }; } diff --git a/desktop/plugins/public/ui-debugger/utils/tracker.tsx b/desktop/plugins/public/ui-debugger/utils/tracker.tsx index b7440bc8d92..a45a4422a8c 100644 --- a/desktop/plugins/public/ui-debugger/utils/tracker.tsx +++ b/desktop/plugins/public/ui-debugger/utils/tracker.tsx @@ -72,6 +72,15 @@ type TrackerEvents = { 'target-mode-switched': { on: boolean; }; + 'box-visualiser-switched': { + on: boolean; + }; + 'alignment-mode-switched': { + on: boolean; + }; + 'reference-image-switched': { + on: boolean; + }; 'target-mode-adjusted': {}; 'context-menu-expand-recursive': {}; 'context-menu-collapse-recursive': {}; diff --git a/desktop/plugins/public/yarn.lock b/desktop/plugins/public/yarn.lock index 183e460c3ef..87f3cf1f818 100644 --- a/desktop/plugins/public/yarn.lock +++ b/desktop/plugins/public/yarn.lock @@ -251,6 +251,11 @@ dependencies: "@types/node" "*" +"@types/core-js@^2.5.8": + version "2.5.8" + resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-2.5.8.tgz#d5c6ec44f2f3328653dce385ae586bd8261f8e85" + integrity sha512-VgnAj6tIAhJhZdJ8/IpxdatM8G4OD3VWGlp6xIxUGENZlpbob9Ty4VVdC1FIEp0aK6DBscDDjyzy5FB60TuNqg== + "@types/d3-path@^1": version "1.0.9" resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-1.0.9.tgz#73526b150d14cd96e701597cbf346cfd1fd4a58c" @@ -686,6 +691,11 @@ core-js-pure@^3.0.0: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813" integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA== +core-js@^3.37.1: + version "3.37.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9" + integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw== + create-require@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333" @@ -1028,6 +1038,11 @@ extglob@^2.0.4: snapdragon "^0.8.1" to-regex "^3.0.1" +fake-indexeddb@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/fake-indexeddb/-/fake-indexeddb-6.0.0.tgz#3173d5ad141436dace95f8de6e9ecdc3d9787d5d" + integrity sha512-YEboHE5VfopUclOck7LncgIqskAqnv4q0EWbYCaxKKjAvO93c+TJIaBuGy8CBFdbg9nKdpN3AuPRwVBJ4k7NrQ== + fast-equals@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.0.tgz#bef2c423af3939f2c54310df54c57e64cd2adefc" @@ -1246,6 +1261,11 @@ hotkeys-js@3.9.4: resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.9.4.tgz#ce1aa4c3a132b6a63a9dd5644fc92b8a9b9cbfb9" integrity sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q== +idb@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/idb/-/idb-8.0.0.tgz#33d7ed894ed36e23bcb542fb701ad579bfaad41f" + integrity sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw== + ieee754@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" @@ -1529,6 +1549,11 @@ loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" +lossless-json@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/lossless-json/-/lossless-json-4.0.1.tgz#d45229e3abb213a0235812780ca894ea8c5b2c6b" + integrity sha512-l0L+ppmgPDnb+JGxNLndPtJZGNf6+ZmVaQzoxQm3u6TXmhdnsA+YtdVR8DjzZd/em58686CQhOFDPewfJ4l7MA== + lz-string@^1.4.4: version "1.4.4" resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26" @@ -1864,18 +1889,18 @@ react-color@^2.19.3: reactcss "^1.2.0" tinycolor2 "^1.4.1" -react-devtools-core@^4.28.0: - version "4.28.0" - resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.28.0.tgz#3fa18709b24414adddadac33b6b9cea96db60f2f" - integrity sha512-E3C3X1skWBdBzwpOUbmXG8SgH6BtsluSMe+s6rRcujNKG1DGi8uIfhdhszkgDpAsMoE55hwqRUzeXCmETDBpTg== +react-devtools-core@^5.3.1: + version "5.3.1" + resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-5.3.1.tgz#d57f5b8f74f16e622bd6a7bc270161e4ba162666" + integrity sha512-7FSb9meX0btdBQLwdFOwt6bGqvRPabmVMMslv8fgoSPqXyuGpgQe36kx8gR86XPw7aV1yVouTp6fyZ0EH+NfUw== dependencies: shell-quote "^1.6.1" ws "^7" -react-devtools-inline@^4.28.0: - version "4.28.0" - resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.28.0.tgz#0156c8b74b1f2f4953d6d10f7cebf9f453838b9b" - integrity sha512-WNHNgBJ0YUzCfErtIltx4DVur6RAq07z597Xv1lHPyretv8a0p+/B3GMiIlqQibR8TiJpMQAN+9UV++Sb0tYwQ== +react-devtools-inline@^5.3.1: + version "5.3.1" + resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-5.3.1.tgz#91aba25796804cc0993320f93805ed291ced0ee7" + integrity sha512-f5DJJg4p+3SvUQt/Yw5KiZinOBOGwF1yumWla875lO5qch1m/IFNkZqRRcmboPQKp2L4aqtVd/hyyEJVu642Xw== dependencies: source-map-js "^0.6.2" sourcemap-codec "^1.4.8" @@ -2351,10 +2376,10 @@ ts-node@^10.9.1: v8-compile-cache-lib "^3.0.1" yn "3.1.1" -ts-retry-promise@^0.7.0: - version "0.7.0" - resolved "https://registry.yarnpkg.com/ts-retry-promise/-/ts-retry-promise-0.7.0.tgz#08f2dcbbf5d2981495841cb63389a268324e8147" - integrity sha512-x6yWZXC4BfXy4UyMweOFvbS1yJ/Y5biSz/mEPiILtJZLrqD3ZxIpzVOGGgifHHdaSe3WxzFRtsRbychI6zofOg== +ts-retry-promise@^0.8.1: + version "0.8.1" + resolved "https://registry.yarnpkg.com/ts-retry-promise/-/ts-retry-promise-0.8.1.tgz#ba90eb07cb03677fcbf78fe38e94c9183927e154" + integrity sha512-+AHPUmAhr5bSRRK5CurE9kNH8gZlEHnCgusZ0zy2bjfatUBDX0h6vGQjiT0YrGwSDwRZmU+bapeX6mj55FOPvg== tslib@^2.1.0: version "2.6.2" diff --git a/desktop/plugins/yarn.lock b/desktop/plugins/yarn.lock index 0991cc6a77c..cc47c48ba0e 100644 --- a/desktop/plugins/yarn.lock +++ b/desktop/plugins/yarn.lock @@ -2,6 +2,121 @@ # yarn lockfile v1 +"@esbuild/aix-ppc64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f" + integrity sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ== + +"@esbuild/android-arm64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz#09d9b4357780da9ea3a7dfb833a1f1ff439b4052" + integrity sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A== + +"@esbuild/android-arm@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz#9b04384fb771926dfa6d7ad04324ecb2ab9b2e28" + integrity sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg== + +"@esbuild/android-x64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz#29918ec2db754cedcb6c1b04de8cd6547af6461e" + integrity sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA== + +"@esbuild/darwin-arm64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz#e495b539660e51690f3928af50a76fb0a6ccff2a" + integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ== + +"@esbuild/darwin-x64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz#c13838fa57372839abdddc91d71542ceea2e1e22" + integrity sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw== + +"@esbuild/freebsd-arm64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz#646b989aa20bf89fd071dd5dbfad69a3542e550e" + integrity sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g== + +"@esbuild/freebsd-x64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz#aa615cfc80af954d3458906e38ca22c18cf5c261" + integrity sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ== + +"@esbuild/linux-arm64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz#70ac6fa14f5cb7e1f7f887bcffb680ad09922b5b" + integrity sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q== + +"@esbuild/linux-arm@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz#fc6fd11a8aca56c1f6f3894f2bea0479f8f626b9" + integrity sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA== + +"@esbuild/linux-ia32@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz#3271f53b3f93e3d093d518d1649d6d68d346ede2" + integrity sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg== + +"@esbuild/linux-loong64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz#ed62e04238c57026aea831c5a130b73c0f9f26df" + integrity sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg== + +"@esbuild/linux-mips64el@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz#e79b8eb48bf3b106fadec1ac8240fb97b4e64cbe" + integrity sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg== + +"@esbuild/linux-ppc64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz#5f2203860a143b9919d383ef7573521fb154c3e4" + integrity sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w== + +"@esbuild/linux-riscv64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz#07bcafd99322d5af62f618cb9e6a9b7f4bb825dc" + integrity sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA== + +"@esbuild/linux-s390x@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz#b7ccf686751d6a3e44b8627ababc8be3ef62d8de" + integrity sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A== + +"@esbuild/linux-x64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz#6d8f0c768e070e64309af8004bb94e68ab2bb3b0" + integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ== + +"@esbuild/netbsd-x64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz#bbe430f60d378ecb88decb219c602667387a6047" + integrity sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg== + +"@esbuild/openbsd-x64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz#99d1cf2937279560d2104821f5ccce220cb2af70" + integrity sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow== + +"@esbuild/sunos-x64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz#08741512c10d529566baba837b4fe052c8f3487b" + integrity sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg== + +"@esbuild/win32-arm64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz#675b7385398411240735016144ab2e99a60fc75d" + integrity sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A== + +"@esbuild/win32-ia32@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz#1bfc3ce98aa6ca9a0969e4d2af72144c59c1193b" + integrity sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA== + +"@esbuild/win32-x64@0.21.5": + version "0.21.5" + resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c" + integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw== + aggregate-error@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a" @@ -20,6 +135,35 @@ clean-stack@^2.0.0: resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b" integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A== +esbuild@~0.21.5: + version "0.21.5" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d" + integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw== + optionalDependencies: + "@esbuild/aix-ppc64" "0.21.5" + "@esbuild/android-arm" "0.21.5" + "@esbuild/android-arm64" "0.21.5" + "@esbuild/android-x64" "0.21.5" + "@esbuild/darwin-arm64" "0.21.5" + "@esbuild/darwin-x64" "0.21.5" + "@esbuild/freebsd-arm64" "0.21.5" + "@esbuild/freebsd-x64" "0.21.5" + "@esbuild/linux-arm" "0.21.5" + "@esbuild/linux-arm64" "0.21.5" + "@esbuild/linux-ia32" "0.21.5" + "@esbuild/linux-loong64" "0.21.5" + "@esbuild/linux-mips64el" "0.21.5" + "@esbuild/linux-ppc64" "0.21.5" + "@esbuild/linux-riscv64" "0.21.5" + "@esbuild/linux-s390x" "0.21.5" + "@esbuild/linux-x64" "0.21.5" + "@esbuild/netbsd-x64" "0.21.5" + "@esbuild/openbsd-x64" "0.21.5" + "@esbuild/sunos-x64" "0.21.5" + "@esbuild/win32-arm64" "0.21.5" + "@esbuild/win32-ia32" "0.21.5" + "@esbuild/win32-x64" "0.21.5" + fs-extra@^9.0.1: version "9.0.1" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc" @@ -30,6 +174,18 @@ fs-extra@^9.0.1: jsonfile "^6.0.1" universalify "^1.0.0" +fsevents@~2.3.3: + version "2.3.3" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== + +get-tsconfig@^4.7.5: + version "4.7.5" + resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.5.tgz#5e012498579e9a6947511ed0cd403272c7acbbaf" + integrity sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw== + dependencies: + resolve-pkg-maps "^1.0.0" + graceful-fs@^4.1.6, graceful-fs@^4.2.0: version "4.2.4" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb" @@ -61,6 +217,21 @@ promisify-child-process@^4.1.1: resolved "https://registry.yarnpkg.com/promisify-child-process/-/promisify-child-process-4.1.1.tgz#290659e079f9c7bd46708404d4488a1a6b802686" integrity sha512-/sRjHZwoXf1rJ+8s4oWjYjGRVKNK1DUnqfRC1Zek18pl0cN6k3yJ1cCbqd0tWNe4h0Gr+SY4vR42N33+T82WkA== +resolve-pkg-maps@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f" + integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw== + +tsx@^4.16.2: + version "4.16.2" + resolved "https://registry.yarnpkg.com/tsx/-/tsx-4.16.2.tgz#8722be119ae226ef0b4c6210d5ee90f3ba823f19" + integrity sha512-C1uWweJDgdtX2x600HjaFaucXTilT7tgUZHbOE4+ypskZ1OP8CRCSDkCxG6Vya9EwaFIVagWwpaVAn5wzypaqQ== + dependencies: + esbuild "~0.21.5" + get-tsconfig "^4.7.5" + optionalDependencies: + fsevents "~2.3.3" + universalify@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d" diff --git a/desktop/scripts/build-flipper-server-release.tsx b/desktop/scripts/build-flipper-server-release.tsx index d32e6ea19bb..c0b455ca7d7 100644 --- a/desktop/scripts/build-flipper-server-release.tsx +++ b/desktop/scripts/build-flipper-server-release.tsx @@ -62,7 +62,7 @@ const WINDOWS_STARTUP_SCRIPT = `@echo off setlocal set "THIS_DIR=%~dp0" cd /d "%THIS_DIR%" -flipper-runtime server %* +flipper-runtime.exe ./server %* `; // eslint-disable-next-line node/no-sync @@ -126,13 +126,6 @@ const argv = yargs 'Unique build identifier to be used as the version patch part for the build', type: 'number', }, - // On intern we ship flipper-server with node_modules (no big internet behind the firewall). yarn.lock makes sure that a CI that builds flipper-server installs the same dependencies all the time. - 'generate-lock': { - describe: - 'Generate a new yarn.lock file for flipper-server prod build. It is used for reproducible builds of the final artifact for the intern.', - type: 'boolean', - default: false, - }, mac: { describe: 'Build arm64 and x64 bundles for MacOS.', type: 'boolean', @@ -276,7 +269,7 @@ async function linkLocalDeps(buildFolder: string) { const manifest = await fs.readJSON(path.resolve(serverDir, 'package.json')); const resolutions = { - 'flipper-doctor': `file:${rootDir}/doctor`, + ...manifest.resolutions, 'flipper-common': `file:${rootDir}/flipper-common`, 'flipper-server-client': `file:${rootDir}/flipper-server-client`, 'flipper-pkg-lib': `file:${rootDir}/pkg-lib`, @@ -284,7 +277,7 @@ async function linkLocalDeps(buildFolder: string) { }; manifest.resolutions = resolutions; - for (const depName of Object.keys(manifest.dependencies)) { + for (const depName in manifest.dependencies) { if (depName in resolutions) { manifest.dependencies[depName] = resolutions[depName as keyof typeof resolutions]; @@ -292,7 +285,6 @@ async function linkLocalDeps(buildFolder: string) { } delete manifest.scripts; - delete manifest.devDependencies; await fs.writeFile( path.join(buildFolder, 'package.json'), @@ -381,13 +373,6 @@ async function yarnInstall(dir: string) { )}`, ); - if (!argv['generate-lock']) { - await fs.copyFile( - path.resolve(rootDir, 'yarn.flipper-server.lock'), - path.resolve(dir, 'yarn.lock'), - ); - } - await spawn( 'yarn', [ @@ -401,15 +386,6 @@ async function yarnInstall(dir: string) { shell: true, }, ); - - if (argv['generate-lock']) { - await fs.copyFile( - path.resolve(dir, 'yarn.lock'), - path.resolve(rootDir, 'yarn.flipper-server.lock'), - ); - } - - await fs.rm(path.resolve(dir, 'yarn.lock')); } async function stripForwardingToolFromArchive(archive: string): Promise<void> { @@ -735,6 +711,34 @@ async function createMacDMG( }); } +async function createTar( + platform: BuildPlatform, + outputPath: string, + destPath: string, +) { + console.log(`⚙️ Create tar of: ${outputPath}`); + + const name = `flipper-server-${platform}.tar.gz`; + const temporaryDirectory = os.tmpdir(); + const tempTarPath = path.resolve(temporaryDirectory, name); + const finalTarPath = path.resolve(destPath, name); + + // Create a tar.gz based on the output path + await tar.c( + { + gzip: true, + file: tempTarPath, + cwd: outputPath, + }, + ['.'], + ); + + await fs.move(tempTarPath, finalTarPath); + await fs.remove(outputPath); + + console.log(`✅ Tar successfully created: ${finalTarPath}`); +} + async function setUpLinuxBundle(outputDir: string) { console.log(`⚙️ Creating Linux startup script in ${outputDir}/flipper`); await fs.writeFile(path.join(outputDir, 'flipper'), LINUX_STARTUP_SCRIPT); @@ -909,14 +913,25 @@ async function bundleServerReleaseForPlatform( } } else { const outputPaths = { - nodePath: path.join(outputDir, 'flipper-runtime'), + nodePath: path.join( + outputDir, + platform === BuildPlatform.WINDOWS + ? 'flipper-runtime.exe' + : 'flipper-runtime', + ), resourcesPath: outputDir, }; if (platform === BuildPlatform.LINUX) { await setUpLinuxBundle(outputDir); + if (argv.tar) { + await createTar(platform, outputDir, distDir); + } } else if (platform === BuildPlatform.WINDOWS) { await setUpWindowsBundle(outputDir); + if (argv.tar) { + await createTar(platform, outputDir, distDir); + } } console.log( diff --git a/desktop/scripts/build-icons.tsx b/desktop/scripts/build-icons.tsx index 171807ceed7..cf441240875 100644 --- a/desktop/scripts/build-icons.tsx +++ b/desktop/scripts/build-icons.tsx @@ -28,7 +28,7 @@ function getIconPartsFromName(icon: string): { const isOutlineVersion = icon.endsWith('-outline'); const trimmedName = isOutlineVersion ? icon.replace('-outline', '') : icon; const variant = isOutlineVersion ? 'outline' : 'filled'; - return {trimmedName: trimmedName, variant: variant}; + return {trimmedName, variant}; } export async function downloadIcons(buildFolder: string) { diff --git a/desktop/scripts/build-plugin.tsx b/desktop/scripts/build-plugin.tsx index b4be598407a..443b30befa1 100644 --- a/desktop/scripts/build-plugin.tsx +++ b/desktop/scripts/build-plugin.tsx @@ -94,7 +94,7 @@ async function buildPlugin() { : path.join( distDir, 'plugins', - path.relative(pluginsDir, pluginDir) + '.tgz', + `${path.relative(pluginsDir, pluginDir)}.tgz`, ); const outputUnpackedDir = outputUnpackedArg ? path.resolve(outputUnpackedArg) @@ -137,7 +137,7 @@ async function buildPlugin() { await fs.move(packageJsonBackupPath, packageJsonPath, {overwrite: true}); await fs.remove(tmpDir); } - await fs.writeFile(outputFile + '.hash', checksum); + await fs.writeFile(`${outputFile}.hash`, checksum); } } diff --git a/desktop/scripts/package.json b/desktop/scripts/package.json index 67edd948ded..53f601a1399 100644 --- a/desktop/scripts/package.json +++ b/desktop/scripts/package.json @@ -16,7 +16,6 @@ "@types/node": "^17.0.31", "@types/yargs": "^17.0.32", "ansi-to-html": "^0.7.2", - "app-builder-lib": "23.6.0", "chalk": "^4", "detect-port": "^1.1.1", "dotenv": "^14.2.0", diff --git a/desktop/scripts/start-flipper-server-dev.tsx b/desktop/scripts/start-flipper-server-dev.tsx index 721eed61591..b5074fe3f43 100644 --- a/desktop/scripts/start-flipper-server-dev.tsx +++ b/desktop/scripts/start-flipper-server-dev.tsx @@ -129,13 +129,7 @@ async function startWatchChanges() { // We only watch for changes that might affect the server. // For UI changes, Metro / hot module reloading / fast refresh take care of the changes await Promise.all( - [ - 'doctor', - 'pkg-lib', - 'plugin-lib', - 'flipper-common', - 'flipper-server', - ].map((dir) => + ['pkg-lib', 'plugin-lib', 'flipper-common', 'flipper-server'].map((dir) => watchman.startWatchFiles( dir, () => { diff --git a/desktop/scripts/verify-types-dependencies.tsx b/desktop/scripts/verify-types-dependencies.tsx index d68347d0ce0..e16035a4df8 100644 --- a/desktop/scripts/verify-types-dependencies.tsx +++ b/desktop/scripts/verify-types-dependencies.tsx @@ -33,6 +33,7 @@ const IGNORED_TYPES = new Set( 'inquirer', 'mock-fs', 'npm-packlist', + 'core-js', ].map((x) => `@types/${x}`), ); diff --git a/desktop/static/CHANGELOG.md b/desktop/static/CHANGELOG.md index bd54b9a6020..d346becf32c 100644 --- a/desktop/static/CHANGELOG.md +++ b/desktop/static/CHANGELOG.md @@ -1,3 +1,46 @@ +# 0.258.0 (16/7/2024) + + * [D59629955](https://github.com/facebook/flipper/search?q=D59629955&type=Commits) - Update offline message + + +# 0.257.0 (10/7/2024) + + * [D59001348](https://github.com/facebook/flipper/search?q=D59001348&type=Commits) - [Internal] + * [D59374023](https://github.com/facebook/flipper/search?q=D59374023&type=Commits) - [Internal] + + +# 0.255.0 (12/6/2024) + + * [D57865621](https://github.com/facebook/flipper/search?q=D57865621&type=Commits) - Network plugin: Store data in IndexedDB to reduce memory consumption + + +# 0.253.0 (15/5/2024) + + * [D55967421](https://github.com/facebook/flipper/search?q=D55967421&type=Commits) - BloksDebugger - Async component payload support (android only currently) + * [D56065247](https://github.com/facebook/flipper/search?q=D56065247&type=Commits) - [Internal] + * [D56420921](https://github.com/facebook/flipper/search?q=D56420921&type=Commits) - Bloks debugger, Refresh screen, Set sandbox & workplace feedback button moved to right of power search to increase available vertical space + * [D57157243](https://github.com/facebook/flipper/search?q=D57157243&type=Commits) - Added compose menu with ability to show / hide system nodes + + +# 0.252.0 (10/4/2024) + + * [D55696687](https://github.com/facebook/flipper/search?q=D55696687&type=Commits) - UIDebugger fix visualiser shaking + + +# 0.250.0 (13/3/2024) + + * [D54306266](https://github.com/facebook/flipper/search?q=D54306266&type=Commits) - UIDebugger framework event table given its own button in menu + * [D54306265](https://github.com/facebook/flipper/search?q=D54306265&type=Commits) - UIDebugger -> Component level framework event fitlers preseve between selection + * [D54679238](https://github.com/facebook/flipper/search?q=D54679238&type=Commits) - [Internal] + + +# 0.247.0 (7/2/2024) + + * [D53223203](https://github.com/facebook/flipper/search?q=D53223203&type=Commits) - Plugin marketplace downloads now expect a `downloadUrls: string[]` instead of a singular url for fallbacks + * [D53308772](https://github.com/facebook/flipper/search?q=D53308772&type=Commits) - UIDebugger add vertical scroll bar to visualiser when height exceeds viewport + * [D53352198](https://github.com/facebook/flipper/search?q=D53352198&type=Commits) - UIDebugger - Keep showing node level event timeline when node goes offscreen + + # 0.245.0 (17/1/2024) * [D52601498](https://github.com/facebook/flipper/search?q=D52601498&type=Commits) - Expose report* functions from flipper-plugin diff --git a/desktop/static/icons/vs_code_128_grey.png b/desktop/static/icons/vs_code_128_grey.png new file mode 100644 index 00000000000..ac2116f04e7 Binary files /dev/null and b/desktop/static/icons/vs_code_128_grey.png differ diff --git a/desktop/static/manifest.template.json b/desktop/static/manifest.template.json index adc08aacf63..9f1dd243b27 100644 --- a/desktop/static/manifest.template.json +++ b/desktop/static/manifest.template.json @@ -31,7 +31,7 @@ "protocol_handlers": [ { "protocol": "web+flipper", - "url": "/?open-plugin=%s" + "url": "/?deep-link=%s" } ] } diff --git a/desktop/static/offline.html b/desktop/static/offline.html index 3792addc6f9..705a4fc7cd0 100644 --- a/desktop/static/offline.html +++ b/desktop/static/offline.html @@ -6,7 +6,7 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> - <title>You are offline + Flipper Server not running