fix(statusbar): restore StatusBarOverlaysWebView support in non-edge-to-edge mode

[GitToTheHub]

Platforms affected

Motivation and Context

• When using the plugin cordova-plugin-statusbar with cordova-android@14.0.1, the status bar overlays the web view by default and a translucent color can be set. Also the setting can be controlled by the preference StatusBarOverlaysWebView in config.xml. This PR restores the behaviour. StatusBarOverlaysWebView will be only applied, when the status bar plugin is added or the app is not in edge-to-edge mode

Notes

@dpogue mentioned, that this should be done by <meta name="viewport" content="viewport-fit=cover|contain"> by a MutationObserver in JavaScript. On iOS this behaviour can already be obtained by using <meta name="viewport" content="viewport-fit=cover“>. @dpogue opened PR #2010 on cordova-android which would resolve this.

Sample

Configuration:

• Add cordova-plugin-statusbar
• Set <preference name="StatusBarBackgroundColor" value="#22ff0000" /> in config.xml
• Test on Android 10 Emulator

cordova-android 14.0.1	cordova-android 15.1.0

Restored behaviour in this PR:

Description

Testing

Checklist

• I've run the tests to see all new and existing tests pass
• I added automated test coverage as appropriate for this change
• Commit is prefixed with (platform) if this change only applies to one platform (e.g. (android))
• 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)
• I've updated the documentation if necessary

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 63.20%. Comparing base (919cd76) to head (35a56ab).
⚠️ Report is 18 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1991   +/-   ##
=======================================
  Coverage   63.20%   63.20%           
=======================================
  Files          24       24           
  Lines        4922     4922           
=======================================
  Hits         3111     3111           
  Misses       1811     1811           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[dpogue]

As previously mentioned, this should really be controlled by <meta name="viewport" content="viewport-fit=contain"> or <meta name="viewport" content="viewport-fit=cover"> in the HTML content rather than through config.xml, to match behaviour on iOS.

Currently, the Android WebView doesn't expose the viewport-fit value to us, so what we'd need to do is set up a MutationObserver in JavaScript to observe the value and toggle things in platform code using an internal API.

[GitToTheHub]

I try to understand something about the status bar.

When I set StatusBarOverlaysWebView to true on iOS and set a translucent background color to the status bar e.g. <preference name="StatusBarBackgroundColor" value="#22ff0000" />, the status bar background color is not applied when plugin cordova-plugin-statusbar is installed. Is this a bug? The readme says:

If StatusBarOverlaysWebView is set to true, then a 8 digit hex (#AARRGGBB) string can optionally be used to define the transparency.

This is the same behaviour without the plugin when viewport-fit=cover is set. When I remove viewport-fit=cover the status bar overlays the web view, the translucent background color is applied and the web content is visible behind the status bar.

[GitToTheHub]

As previously mentioned, this should really be controlled by or in the HTML content rather than through config.xml, to match behaviour on iOS.

I understand. But since we support for iOS the config.xml preference StatusBarBackgroundColor and the html meta theme-color, we could support StatusBarOverlaysWebView as a workaround for Android since viewport-fit=cover and viewport-fit=cover is not supported currently by Android. For iOS the plugin documentation of cordova-plugin-statusbar already states that viewport-fit=cover is needed to let the status bar overlay the web view, so there is no code change needed for cordova-ios.