Flutter-intellij: Flutter Inspector layout bug in IntelliJ

[llaenowyd]

Thanks for the feedback! If your issue is related to the Flutter framework itself,
please open an issue at
github.com/flutter/flutter.

Steps to Reproduce

If I open my project and start the android emulator, then run the project and display the Flutter Inspector by clicking on the "Flutter Inspector" tab at the right gutter in IntelliJ, (order of operations seems unimportant, it seems to happen invariably) the Flutter Inspector content is not fit properly to its panel in IntelliJ - it's shifted right (and clipped) and when the size of the Flutter Inspector panel is changed (by resizing IntelliJ or only the panel), the offset of the right shift changes at a different rate, moving the content further off the right side of that content pane.

I posted at the IntelliJ Issues tracker and was redirected here. I tried stopping and starting IntelliJ and looking for updates (none).

Version info

[√] Flutter (Channel beta, 1.23.0-18.1.pre, on Microsoft Windows [Version 10.0.18363.1139], locale en-US)
    • Flutter version 1.23.0-18.1.pre at d:\bin\flutter\flutter
    • Framework revision 198df796aa (3 weeks ago), 2020-10-15 12:04:33 -0700
    • Engine revision 1d12d82d9c
    • Dart version 2.11.0 (build 2.11.0-213.1.beta)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at D:\bin\android_sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: D:\bin\AndroidStudio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Android Studio (version 4.0)
    • Android Studio at D:\bin\AndroidStudio
    • Flutter plugin version 50.0.1
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] IntelliJ IDEA Ultimate Edition (version 2020.2)
    • IntelliJ at D:\bin\JetBrains\IntelliJ IDEA 2020.2.3
    • Flutter plugin installed
    • Dart plugin version 202.7319.5

[√] Connected device (1 available)
    • Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)

• No issues found!

[devoncarew]

Thanks for the report! cc @helin24 and @jacob314

@llaenowyd - can you also include the version of the Flutter IntelliJ plugin?

[llaenowyd]

Flutter 1.23.0-18.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 198df796aa (3 weeks ago) • 2020-10-15 12:04:33 -0700
Engine • revision 1d12d82d9c
Tools • Dart 2.11.0 (build 2.11.0-213.1.beta)

[devoncarew]

Thanks for the response, but I was referring to the version of the Flutter plugin in IntelliJ. You should be able to see it from the preferences dialog in the 'Plugins' page. I want to verify that you're on the latest version of the plugin.

[llaenowyd]

Ah sorry, ok I have 51.0.3

[helin24]

@llaenowyd I have seen something like this before because I had an unusual display setting on the Windows machine. Could you send your Display settings?

[llaenowyd]

What settings? The screenshot is one frame from a video I took of it. I usually run the IDE full screen at 2556x1440 but it didn't matter full screen or windowed for this bug, so it was easier to reproduce with the video snap controls also on screen.

I wonder if some version mismatch, since I'm not using Android Studio most of the time, but it's also installed and they share the same flutter and android sdk path, perhaps some incompatibility. I tried the same repro from Android Studio and had no problem. That is using flutter plugin version 51.0.1.

[helin24]

@llaenowyd I meant the Windows Display settings, e.g.

However, if this is working for you on Android Studio but not on IntelliJ it seems unlikely this is related to your computer settings. I'll look around and I'll probably also contact JxBrowser and see if they have any suggestions for debugging.

[llaenowyd]

I noticed after I picked up an update then it started happening in Android Studio also. Now it's at 51.0.2.

I think nothing special here,

[helin24]

@llaenowyd would you mind uploading or linking screen recordings of these things:

• Initial devtools browser opening in the wrong place
• Devtools browser moving at a different rate during resizing

The JxBrowser team is having trouble reproducing the issue, but they're hoping that viewing how the browser appears and changes may help to pinpoint a cause.

[llaenowyd]

Ok here is a video capture

Couple things to note:

• I open the inspector at about 0:25 - that is before the application has launched
• second time I opened the inspector near the end of the video, the application is launched in the emulator by then. the bug is reproduced no problems
• I restarted my pc entirely before making the video. The project is brand new for this video. obviously, though, there are more settings residual to the IntelliJ IDE's (I have several installed) and the Android Studio variant, Windows and SDK downloads, that persist between projects and reboots.

[vlad-lubenskyi]

@llaenowyd thanks for the video.

I have tried to reproduce this behavior and there was only one similar case. It's when I moved Android Studio between displays with different scale factors. The inspector was in the correct position, then the embedded browser "jumped out" as I moved the IDE to another display, and then it went back to normal when I returned the IDE. That's clearly not your case.

However, there is something different about your environment we don't know yet. Issues of such kind happen when we fail to correctly calculate the absolute position of the component and put the Chromium window somewhere else. Usually, this happens in HiDPI environment as we need to consider how Java, Chromium, and OS work in this regard. And that's the only idea I have so far (I'll discuss it with the colleagues tomorrow to have a second opinion)

Could you please show me what's in "Help" -> "Find Action" -> "Show HiDPI Info"?

[like-clockwork]

Hey I'm experiencing this too in Android Studio at the moment, as is this other user on StackOverflow

The user noted in a follow-up comment that when they changed Windows' scaling down to 100%, it began to display properly. I myself am experiencing the issue at 150% scaling, so I tried scaling down to 100% and restarting Android Studio and it now displays properly for me as well. Once Android Studio has restarted I can also re-scale Windows back up to 150% and the Flutter Inspector will continue displaying properly at 150%, so that's my workaround for the moment

[stevemessick]

@helin24 Is this fixed? If not, could you add the bug label?

[helin24]

I believe this should be fixed, since we changed to offscreen render mode for a similar issue: https://github.com/flutter/flutter-intellij/pull/5055

I'll close for now, but please comment again if this is still present in the latest release (v52).