(ios & android) Reduce IAB Web View height from the bottom

[PDLMobileApps]

Platforms affected

iOS & Android

Motivation and Context

This change is needed in situations where the main app has some content on the bottom of the screen that should be visible even when the IAB web view is shown. For instance, clickable footer, ad content, etc.

This change addresses a similar issue to PR #490, which is limited to Android only. This solution also includes iOS. This change implements the modifications for Android suggested in bug #409.

Description

This change adds a new setting in both Android and iOS named: bottomreduceheightby which takes an integer as value. It defaults to 0 to maintain backward compatibility. When a value different than 0 is specified, the IAB web view height is reduced by that amount of pixels and aligned to the top of the screen. That results in a portion of the underlying Cordova window to be shown (as much as the value assigned to the setting) so that its content is fully visible and accessible.

NOTE: if needed, a similar option can be added for the top of the IAB web view.

Testing

Testing was done manually as I am not sure on how to automate it.

1. Created a new Cordova test app using cordova-plugin-inappbrowser.

2. Executed: cordova.InAppBrowser.open(url, "_blank", ""); and verified the web view is occupying the entire screen (default behavior).

3. Executed: cordova.InAppBrowser.open(url, "_blank", "bottomreduceheightby=0"); and verified the web view is occupying the entire screen (default behavior).

4. Executed: cordova.InAppBrowser.open(url, "_blank", "bottomreduceheightby=60"); and verified the web view is occupying the entire screen minus 60 pixels at the bottom. Also, verified the possibility to interact with the content in the underlying Cordova window.

We repeated the above tests with both Android and iOS.

Checklist

• [x] I've run the tests to see all new and existing tests pass
• [ ] I added automated test coverage as appropriate for this change
• [x] Commit is prefixed with (platform) if this change only applies to one platform (e.g. (android))
• [x] If this Pull Request resolves an issue, I linked to the issue in the text above (and used the correct keyword to close issues using keywords)
• [x] I've updated the documentation if necessary

[rajasekarsp]

May i know when this can be merged. Its a very useful feature

[MykytaPereverziev]

Hi! Please, tell me is there any feature for changing the top border in InappBrowser? If it is already implemented how can I use it? I tried to use this branch. Footer works excellent, but designer told me that I have to move buttons block to the top.

[PDLMobileApps]

Hi! Please, tell me is there any feature for changing the top border in InappBrowser? If it is already implemented how can I use it? I tried to use this branch. Footer works excellent, but designer told me that I have to move buttons block to the top.

This PR only adds support to reduce IAB height from the bottom. The same idea can be extended to reduce the height from the top as well, but that's not part of this PR.

[Nida013]

Hi, @NiklasMerz Can you please include this commit in the upcoming release? It would be very helpful for us if you could add this, as it is a very useful feature.