feat: add functionality to search through app source tree

[sudharsan-selvaraj]

Fixes #1004

Demo

appium-app-source-search.mp4

[eglitise]

Thank you! Will test this a bit later.
Similarly to your other PR, would it be possible to also update the documentation? I am referring to this page: https://appium.github.io/appium-inspector/latest/session-inspector/source/

• Update the top two images
• Add a new section in Application Source (between Refreshing the Source and Toggle Attributes Button)

[sudharsan-selvaraj]

Thank you! Will test this a bit later. Similarly to your other PR, would it be possible to also update the documentation? I am referring to this page: https://appium.github.io/appium-inspector/latest/session-inspector/source/

• Update the top two images
• Add a new section in Application Source (between Refreshing the Source and Toggle Attributes Button)

Thanks for pointing out to the docs. I have updated all relevant images and added a new section with the gist of search functionality. Do let me know for any improvements.

[jlipps]

cool feature!

[eglitise]

It seems to work well in the browser, but not so much in the Electron version :(

[eglitise]

This does not look good at the minimum window width:

Although I'm not sure how to best scale this. Ideally it should shrink without affecting the card title, but the actual behavior is the opposite.

[eglitise]

Also I would suggest defining a class for the searchbar if you intend to change its CSS. This particular line is rather long and it's not obvious what it's meant to affect.

[sudharsan-selvaraj]

I just tweaked a bit to make it better for smaller screens. Do let me know if it looks good.

[eglitise]

It is better in that there's no linebreak, but ideally the search bar and icons should not hide the 'App Source' title - instead the title should hide the search bar/buttons. Not sure how possible this is.

[mykola-mokhnach]

@sudharsan-selvaraj Would you have some time to finish this PR?

[sudharsan-selvaraj]

@sudharsan-selvaraj Would you have some time to finish this PR?

@mykola-mokhnach Yup, I will be able to close the pending items.

[eglitise]

The good thing is that it does work in the Electron version now :) But I have some issues with the tree node text extraction:

• It uses renderToString which is imported from react-dom/server, and as per React docs, it 'unnecessarily increases your bundle size and should be avoided'. There do seem to be alternatives but I haven't checked them in detail.
• The converted node titles have additional wrapper text, which is unfortunately also taken into account when searching. For example, a node <android.widget.LinearLayout> would be converted to <span>&lt;<b class="_sourcetag_zwtnd_433">android.widget.linearlayout</b>&gt;</span>. Meaning, if I search for span, the entire DOM tree will be unwrapped, and potentially not a single node will be highlighted.

[eglitise]

I would also suggest exploring the idea of not converting the entire DOM upon every change in the search string. Maybe the raw title of each node can be calculated as part of recursive, or at least the DOM should be converted only once upon starting search.