Ideas for UI/UX improvements

[fleytman]

The inspector's appium window is divided into 3 parts. On the left is a screenshot of the device, in the middle the App Source, and on the right the Selected element. The problem occurs when you start scrolling down App Source, because the whole window is scrolled. Because of this, I constantly have to scroll up to see what is highlighted in the screenshot and down to examine the structure of the xml. An illogical situation with the Selected element section. I propose to divide these sections so that scrolling works for each of them separately. UPD. fixed in 2023.3.1+ version

Screenshot

Also inconvenient that the size of these sections can not change itself, you can only change the size of the window itself. I think that there are a few solutions here

1. Add delimiters, which will allow you to change the size of sections.
2. To add a possibility to make the screenshot smaller
3. Add the ability to collapse a section
4. Move the right section down, which gives more space for the middle section
5. Minimize information in the middle section, add buttons for collapsing, full-text search

For inspiration, let's see how Layout Inspector looks like in Android studio

Environment

• I am running Appium Inspector Version: 2023.2.1
• I am on (pick one): Mac

[eglitise]

The App Source scrolling issue is fixed in version 2023.3.1.
I do like the suggestions. Not sure how easy it would be to implement them though...

[jlipps]

Yes, I don't see this issue anymore @fleytman. Try the latest release? https://github.com/appium/appium-inspector/releases/tag/v2023.4.1

[fleytman]

I didn't realize from the list of changes that I had to update to 2023.3.1 and the newer 2023.4.1 wasn't there yet. Tried it, it works - it makes it very easy to work and takes the frustration out of using it.

Updated the original post. The other improvements I suggested, I'm sure can improve the user experience too.

[jlipps]

OK, I updated the title here to reflect the enhancement requests

[idebenone]

@jlipps Any noise on revamping the UI? 👀
I would love to get my hands dirty!

[jlipps]

It would be great to have you get to know the project @idebenone! Maybe @eglitise has some ideas for a good start?

[idebenone]

@eglitise I'm all ears!

[eglitise]

@idebenone there's quite a lot of room for improvements and enhancements in this project.
As a first step I would suggest checking out the brief docs page on Contributing. It helps a lot if you already have experience with React and/or Electron development (I'm not that closely familiar with them myself).
As far as UI improvements go, anything in this issue, or most other issues with the enhancement label, is up for grabs - whatever you feel more comfortable with. Something like #1241 could be a good starting point.
I myself am focusing on refactors, since the currently used build tool (Parcel v1) is greatly outdated and blocks many dependency upgrades. I've been trying various options (see #1444) and eventually settled on Vite, though migrating is still a non-trivial task. If you're familiar with Vite+Electron, any assistance would be greatly appreciated 🙏

[idebenone]

@eglitise Sure, I can assist you with the refactoring. Have you looked into electron-vite?

[eglitise]

@idebenone let's continue the refactoring discussion in #1453