fix(android): match iframe size to visual viewport

I've been testing Collabora Online with Nextcloud on Android, and I've
noticed some content displaying behind the onscreen keyboard as follows:

There are two viewports on the web, the "visual" viewport (what you
actually see) and the "layout" viewport (how the browser draws the
page). The onscreen keyboard popping up used to resize the layout
viewport. In newer Android versions, the onscreen keyboard by default
resizes the visual viewport rather than the layout viewport.

Unfortunately, the visual viewport isn't propagated through iframes, as
per MDN docs which state:

> Only the top-level window has a visual viewport that's distinct from
> the layout viewport. Therefore, it's generally only the VisualViewport
> object of the top-level window that's useful. For an <iframe>, visual
> viewport metrics like VisualViewport.width always correspond to layout
> viewport metrics like document.documentElement.clientWidth.

(Quote from [VisualViewport page on MDN Docs][VV], by Mozilla
Contributors under [CC-BY-SA v2.5][VVLICENSE])

[VV]: https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport
[VVLICENSE]: https://creativecommons.org/licenses/by-sa/2.5/

This leads to Collabora Online seeing the viewport as the size of its
iframe in all cases. When the onscreen keyboard is up, this causes some
parts of the app (the bottom toolbar) to be hidden as they are behind
the keyboard. The intention is for this toolbar to instead float above
the keyboard.

I've done some investigation and this would be a problem on
iOS/iPadOS too... it would be, except Julius has already written
code to fix it (thanks Julius!). The code I'm talking about was
in `src/helpers/safariFixer.js`, part of its job was to resize the
richdocuments frame in place of the browser. It was previously gated to
only running on iOS, but we can make it broader so it encompasses all
browsers - including those running on Android devices.

If we change that code to fix things other than Safari, the name no
longer makes sense. Therefore, let's rename it to `mobileFixer.js` as
well

Finally, it's worth noting that this doesn't work in every browser
I tested. Notably [Fennec][FENNEC] doesn't appear to correctly
resize the visual viewport so this fix doesn't work over there.
Notwithstanding, this fix does appear to work in both Play Store
Chrome and Play Store Firefox which is a lot better than not
working at all. Potential fixes for Fennec were considered possibly
too risky: we could set a meta tag with `name="viewport"` and
`content="interactive-widget=resizes-content"` but this would need
to be set even when richdocuments isn't in use (or isn't installed!).
Therefore, we'll have to cope with the state of things as they are for
now...

[FENNEC]: https://f-droid.org/en/packages/org.mozilla.fennec_fdroid/

Signed-off-by: Skyler Grey <[email protected]>

Author: Minion3665

src/document.js

@@ -9,7 +9,7 @@ import { getRequestToken } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import Config from './services/config.tsx'
 import { getUIDefaults, generateCSSVarTokens, getCollaboraTheme } from './helpers/coolParameters.js'
-import { enableScrollLock } from './helpers/safariFixer.js'
+import { enableScrollLock } from './helpers/mobileFixer.js'
 import PostMessageService from './services/postMessage.tsx'
 import { getCapabilities } from './services/capabilities.ts'
 import {

src/helpers/safariFixer.js renamed to src/helpers/mobileFixer.js

@@ -21,8 +21,9 @@ const handleScrollReset = () => {
 	document.scrollingElement.scrollTop = 0
 }
 
-// Workaround for Safari to resize the iframe to the proper height
-// as 100vh is not the proper viewport height there
+// Workaround for mobile browsers to resize the iframe to the visual viewport height
+// as visual viewport area - which includes OSK, say - is not propagated to iframes
+// see https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport
 const handleResize = () => {
 	const expectedHeight = window.visualViewport.height ?? document.documentElement.clientHeight
 	const frame = document.getElementById('richdocumentsframe')
@@ -36,20 +37,21 @@ const handleResize = () => {
 }
 
 const fixThemAll = () => {
-	if (!isiOS) {
-		return
-	}
 	if (!scrollLock) {
 		return
 	}
-	handleScrollReset()
+
+	if (isiOS) {
+		handleScrollReset()
+	}
+
 	handleResize()
 }
 
 const preventDefault = (e) => e.preventDefault()
 
 export const enableScrollLock = () => {
-	if (scrollLock || !isiOS) {
+	if (scrollLock) {
 		return
 	}
 
@@ -65,7 +67,7 @@ export const enableScrollLock = () => {
 }
 
 export const disableScrollLock = () => {
-	if (!scrollLock || !isiOS) {
+	if (!scrollLock) {
 		return
 	}
 

src/view/Office.vue

@@ -99,7 +99,7 @@ import {
 import PostMessageService from '../services/postMessage.tsx'
 import FilesAppIntegration from './FilesAppIntegration.js'
 import { LOADING_ERROR, checkCollaboraConfiguration, checkProxyStatus } from '../services/collabora.js'
-import { enableScrollLock, disableScrollLock } from '../helpers/safariFixer.js'
+import { enableScrollLock, disableScrollLock } from '../helpers/mobileFixer.js'
 import axios from '@nextcloud/axios'
 import {
 	generateUrl,