1st experimental approach

interface/resources/qml/controls/TabletWebScreen.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.5
+import QtQuick 2.7
-import QtWebEngine 1.1
+import QtWebEngine 1.5
 import QtWebChannel 1.0
 import "../controls-uit" as HiFiControls
 
@@ -23,91 +23,124 @@ Item {
 
     property alias viewProfile: root.profile
 
-    WebEngineView {
+    Flickable {
-        id: root
+        id: flick
-        objectName: "webEngineView"
         x: 0
         y: 0
         width: parent.width
         height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height
 
-        profile: HFWebEngineProfile;
+        WebEngineView {
+            id: root
+            objectName: "webEngineView"
+            anchors.fill: parent
 
-        property string userScriptUrl: ""
+            profile: HFWebEngineProfile;
 
-        // creates a global EventBridge object.
+            property string userScriptUrl: ""
-        WebEngineScript {
-            id: createGlobalEventBridge
-            sourceCode: eventBridgeJavaScriptToInject
-            injectionPoint: WebEngineScript.DocumentCreation
-            worldId: WebEngineScript.MainWorld
-        }
 
-        // detects when to raise and lower virtual keyboard
+            // creates a global EventBridge object.
-        WebEngineScript {
+            WebEngineScript {
-            id: raiseAndLowerKeyboard
+                id: createGlobalEventBridge
-            injectionPoint: WebEngineScript.Deferred
+                sourceCode: eventBridgeJavaScriptToInject
-            sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js"
+                injectionPoint: WebEngineScript.DocumentCreation
-            worldId: WebEngineScript.MainWorld
+                worldId: WebEngineScript.MainWorld
-        }
+            }
 
-        // User script.
+            // detects when to raise and lower virtual keyboard
-        WebEngineScript {
+            WebEngineScript {
-            id: userScript
+                id: raiseAndLowerKeyboard
-            sourceUrl: root.userScriptUrl
+                injectionPoint: WebEngineScript.Deferred
-            injectionPoint: WebEngineScript.DocumentReady  // DOM ready but page load may not be finished.
+                sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js"
-            worldId: WebEngineScript.MainWorld
+                worldId: WebEngineScript.MainWorld
-        }
+            }
 
-        property string urlTag: "noDownload=false";
+            // User script.
+            WebEngineScript {
+                id: userScript
+                sourceUrl: root.userScriptUrl
+                injectionPoint: WebEngineScript.DocumentReady  // DOM ready but page load may not be finished.
+                worldId: WebEngineScript.MainWorld
+            }
 
-        userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ]
+            property string urlTag: "noDownload=false";
 
-        property string newUrl: ""
+            userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ]
 
+            property string newUrl: ""
 
-        Component.onCompleted: {
+            onContentsSizeChanged: {
-            webChannel.registerObject("eventBridge", eventBridge);
+                console.log("WebView contentsSize", contentsSize)
-            webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper);
+                flick.contentWidth = Math.max(contentsSize.width, flick.width)
-            // Ensure the JS from the web-engine makes it to our logging
+                flick.contentHeight = Math.max(contentsSize.height, flick.height)
-            root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
+            }
-                console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
-            });
 
-            root.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)";
+            Component.onCompleted: {
-        }
+                webChannel.registerObject("eventBridge", eventBridge);
+                webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper);
+                // Ensure the JS from the web-engine makes it to our logging
+                root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
+                    console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
+                });
 
-        onFeaturePermissionRequested: {
+                root.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)";
-            grantFeaturePermission(securityOrigin, feature, true);
+            }
-        }
 
-        onLoadingChanged: {
+            onFeaturePermissionRequested: {
-            keyboardRaised = false;
+                grantFeaturePermission(securityOrigin, feature, true);
-            punctuationMode = false;
+            }
-            keyboard.resetShiftMode(false);
 
-            // Required to support clicking on "hifi://" links
+            onLoadingChanged: {
-            if (WebEngineView.LoadStartedStatus == loadRequest.status) {
+                console.log("loading changed", loadRequest.status)
-                var url = loadRequest.url.toString();
+                keyboardRaised = false;
-                url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag;
+                punctuationMode = false;
-                if (urlHandler.canHandleUrl(url)) {
+                keyboard.resetShiftMode(false);
-                    if (urlHandler.handleUrl(url)) {
+
-                        root.stop();
+                // Required to support clicking on "hifi://" links
+                if (WebEngineView.LoadStartedStatus == loadRequest.status) {
+                    flick.contentWidth = -1
+                    flick.contentHeight = -1
+                    var url = loadRequest.url.toString();
+                    url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag;
+                    if (urlHandler.canHandleUrl(url)) {
+                        if (urlHandler.handleUrl(url)) {
+                            root.stop();
+                        }
                     }
                 }
-            }
+                if (WebEngineView.LoadSucceededStatus == loadRequest.status) {
-        }
+//                    flick.contentWidth = Math.max(contentsSize.width, flick.width)
+//                    flick.contentHeight = Math.max(contentsSize.height, flick.height)
+                    root.runJavaScript(
+                                "document.body.scrollHeight;",
+                                function (i_actualPageHeight) {
+                                    console.log("on reloaded documentElement.scrollHeigh:", i_actualPageHeight)
+//                                    flick.contentHeight = Math.max (
+//                                                i_actualPageHeight, flick.height);
+                                })
+                    root.runJavaScript(
+                                "document.body.scrollWidth;",
+                                function (i_actualPageWidth) {
+                                    console.log("on reloaded documentElement.scrollWidth:", i_actualPageWidth)
 
-        onNewViewRequested:{
+//                                    flick.contentWidth = Math.max (
-            // desktop is not defined for web-entities or tablet
+//                                                i_actualPageWidth, flick.width);
-            if (typeof desktop !== "undefined") {
+                                })
-                desktop.openBrowserWindow(request, profile);
+                    console.log("on reloaded content size:", contentsSize)
-            } else {
+                }
-                tabletRoot.openBrowserWindow(request, profile);
             }
-        }
 
-        HiFiControls.WebSpinner { }
+            onNewViewRequested:{
+                // desktop is not defined for web-entities or tablet
+                if (typeof desktop !== "undefined") {
+                    desktop.openBrowserWindow(request, profile);
+                } else {
+                    tabletRoot.openBrowserWindow(request, profile);
+                }
+            }
+
+            HiFiControls.WebSpinner { }
+        }
     }
 
     HiFiControls.Keyboard {

interface/resources/qml/controls/TabletWebView.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.5
+import QtQuick 2.7
 import QtQuick.Controls 1.4
-import QtWebEngine 1.2
+import QtWebEngine 1.5
 import QtWebChannel 1.0
 import "../controls-uit" as HiFiControls
 import "../styles" as HifiStyles
@@ -136,99 +136,107 @@ Item {
         loadUrl(url);
     }
 
-    WebEngineView {
+    Flickable {
-        id: webview
+        id: flick
-        objectName: "webEngineView"
         x: 0
         y: 0
         width: parent.width
         height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height - web.headerHeight : parent.height - web.headerHeight
         anchors.top: buttons.bottom
-        profile: HFWebEngineProfile;
 
-        property string userScriptUrl: ""
+        WebEngineView {
+            id: webview
+            objectName: "webEngineView"
+            anchors.fill: parent
 
-        // creates a global EventBridge object.
+            profile: HFWebEngineProfile;
-        WebEngineScript {
-            id: createGlobalEventBridge
-            sourceCode: eventBridgeJavaScriptToInject
-            injectionPoint: WebEngineScript.DocumentCreation
-            worldId: WebEngineScript.MainWorld
-        }
 
-        // detects when to raise and lower virtual keyboard
+            property string userScriptUrl: ""
-        WebEngineScript {
-            id: raiseAndLowerKeyboard
-            injectionPoint: WebEngineScript.Deferred
-            sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js"
-            worldId: WebEngineScript.MainWorld
-        }
 
-        // User script.
+            // creates a global EventBridge object.
-        WebEngineScript {
+            WebEngineScript {
-            id: userScript
+                id: createGlobalEventBridge
-            sourceUrl: webview.userScriptUrl
+                sourceCode: eventBridgeJavaScriptToInject
-            injectionPoint: WebEngineScript.DocumentReady  // DOM ready but page load may not be finished.
+                injectionPoint: WebEngineScript.DocumentCreation
-            worldId: WebEngineScript.MainWorld
+                worldId: WebEngineScript.MainWorld
-        }
-
-        property string urlTag: "noDownload=false";
-        userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ]
-
-        property string newUrl: ""
-
-        Component.onCompleted: {
-            webChannel.registerObject("eventBridge", eventBridge);
-            webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper);
-            // Ensure the JS from the web-engine makes it to our logging
-            webview.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
-                console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
-            });
-        }
-
-        onFeaturePermissionRequested: {
-            grantFeaturePermission(securityOrigin, feature, true);
-        }
-
-        onUrlChanged: {
-            // Record history, skipping null and duplicate items.
-            var urlString = url + "";
-            urlString = urlString.replace(/\//g, "%2F");  // Consistent representation of "/"s to avoid false differences.
-            if (urlString.length > 0 && (historyIndex === -1 || urlString !== history[historyIndex])) {
-                historyIndex++;
-                history = history.slice(0, historyIndex);
-                history.push(urlString);
             }
-        }
 
-        onLoadingChanged: {
+            // detects when to raise and lower virtual keyboard
-            keyboardRaised = false;
+            WebEngineScript {
-            punctuationMode = false;
+                id: raiseAndLowerKeyboard
-            keyboard.resetShiftMode(false);
+                injectionPoint: WebEngineScript.Deferred
-            // Required to support clicking on "hifi://" links
+                sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js"
-            if (WebEngineView.LoadStartedStatus == loadRequest.status) {
+                worldId: WebEngineScript.MainWorld
-                var url = loadRequest.url.toString();
+            }
-                if (urlHandler.canHandleUrl(url)) {
+
-                    if (urlHandler.handleUrl(url)) {
+            // User script.
-                        root.stop();
+            WebEngineScript {
-                    }
+                id: userScript
+                sourceUrl: webview.userScriptUrl
+                injectionPoint: WebEngineScript.DocumentReady  // DOM ready but page load may not be finished.
+                worldId: WebEngineScript.MainWorld
+            }
+
+            property string urlTag: "noDownload=false";
+            userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ]
+
+            property string newUrl: ""
+
+            Component.onCompleted: {
+                webChannel.registerObject("eventBridge", eventBridge);
+                webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper);
+                // Ensure the JS from the web-engine makes it to our logging
+                webview.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
+                    console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
+                });
+            }
+
+            onFeaturePermissionRequested: {
+                grantFeaturePermission(securityOrigin, feature, true);
+            }
+
+            onUrlChanged: {
+                // Record history, skipping null and duplicate items.
+                var urlString = url + "";
+                urlString = urlString.replace(/\//g, "%2F");  // Consistent representation of "/"s to avoid false differences.
+                if (urlString.length > 0 && (historyIndex === -1 || urlString !== history[historyIndex])) {
+                    historyIndex++;
+                    history = history.slice(0, historyIndex);
+                    history.push(urlString);
                 }
             }
 
-            if (WebEngineView.LoadFailedStatus == loadRequest.status) {
+            onLoadingChanged: {
-                console.log(" Tablet WebEngineView failed to load url: " + loadRequest.url.toString());
+                keyboardRaised = false;
+                punctuationMode = false;
+                keyboard.resetShiftMode(false);
+                // Required to support clicking on "hifi://" links
+                if (WebEngineView.LoadStartedStatus == loadRequest.status) {
+                    var url = loadRequest.url.toString();
+                    if (urlHandler.canHandleUrl(url)) {
+                        if (urlHandler.handleUrl(url)) {
+                            root.stop();
+                        }
+                    }
+                }
+
+                if (WebEngineView.LoadFailedStatus == loadRequest.status) {
+                    console.log(" Tablet WebEngineView failed to load url: " + loadRequest.url.toString());
+                }
+
+                if (WebEngineView.LoadSucceededStatus == loadRequest.status) {
+                    flick.contentWidth = Math.max(contentsSize.width, flick.width)
+                    flick.contentHeight = Math.max(contentsSize.height, flick.height)
+                    webview.forceActiveFocus();
+                }
             }
 
-            if (WebEngineView.LoadSucceededStatus == loadRequest.status) {
+            onNewViewRequested: {
-                webview.forceActiveFocus();
+                request.openIn(webview);
             }
-        }
 
-        onNewViewRequested: {
+            HiFiControls.WebSpinner { }
-            request.openIn(webview);
         }
-
-        HiFiControls.WebSpinner { }
     }
 
     HiFiControls.Keyboard {

interface/resources/qml/controls/WebView.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.5
+import QtQuick 2.7
-import QtWebEngine 1.1
+import QtWebEngine 1.5
 import QtWebChannel 1.0
 import "../controls-uit" as HiFiControls
 
@@ -23,89 +23,119 @@ Item {
 
     property alias viewProfile: root.profile
 
-    WebEngineView {
+    Flickable {
-        id: root
+        id: flick
-        objectName: "webEngineView"
         x: 0
         y: 0
         width: parent.width
         height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height
 
-        profile: HFWebEngineProfile;
 
-        property string userScriptUrl: ""
+        WebEngineView {
+            id: root
+            objectName: "webEngineView"
+            anchors.fill: parent
 
-        // creates a global EventBridge object.
+            profile: HFWebEngineProfile;
-        WebEngineScript {
-            id: createGlobalEventBridge
-            sourceCode: eventBridgeJavaScriptToInject
-            injectionPoint: WebEngineScript.DocumentCreation
-            worldId: WebEngineScript.MainWorld
-        }
 
-        // detects when to raise and lower virtual keyboard
+            property string userScriptUrl: ""
-        WebEngineScript {
-            id: raiseAndLowerKeyboard
-            injectionPoint: WebEngineScript.Deferred
-            sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js"
-            worldId: WebEngineScript.MainWorld
-        }
 
-        // User script.
+            // creates a global EventBridge object.
-        WebEngineScript {
+            WebEngineScript {
-            id: userScript
+                id: createGlobalEventBridge
-            sourceUrl: root.userScriptUrl
+                sourceCode: eventBridgeJavaScriptToInject
-            injectionPoint: WebEngineScript.DocumentReady  // DOM ready but page load may not be finished.
+                injectionPoint: WebEngineScript.DocumentCreation
-            worldId: WebEngineScript.MainWorld
+                worldId: WebEngineScript.MainWorld
-        }
+            }
 
-        property string urlTag: "noDownload=false";
+            // detects when to raise and lower virtual keyboard
+            WebEngineScript {
+                id: raiseAndLowerKeyboard
+                injectionPoint: WebEngineScript.Deferred
+                sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js"
+                worldId: WebEngineScript.MainWorld
+            }
 
-        userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ]
+            // User script.
+            WebEngineScript {
+                id: userScript
+                sourceUrl: root.userScriptUrl
+                injectionPoint: WebEngineScript.DocumentReady  // DOM ready but page load may not be finished.
+                worldId: WebEngineScript.MainWorld
+            }
 
-        property string newUrl: ""
+            property string urlTag: "noDownload=false";
 
-        Component.onCompleted: {
+            userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ]
-            webChannel.registerObject("eventBridge", eventBridge);
-            webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper);
-            // Ensure the JS from the web-engine makes it to our logging
-            root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
-                console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
-            });
 
-        }
+            property string newUrl: ""
 
-        onFeaturePermissionRequested: {
+            Component.onCompleted: {
-            grantFeaturePermission(securityOrigin, feature, true);
+                webChannel.registerObject("eventBridge", eventBridge);
-        }
+                webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper);
+                // Ensure the JS from the web-engine makes it to our logging
+                root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
+                    console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
+                });
 
-        onLoadingChanged: {
+            }
-            keyboardRaised = false;
-            punctuationMode = false;
-            keyboard.resetShiftMode(false);
 
-            // Required to support clicking on "hifi://" links
+            onFeaturePermissionRequested: {
-            if (WebEngineView.LoadStartedStatus == loadRequest.status) {
+                grantFeaturePermission(securityOrigin, feature, true);
-                var url = loadRequest.url.toString();
+            }
-                url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag;
+
-                if (urlHandler.canHandleUrl(url)) {
+            onContentsSizeChanged: {
-                    if (urlHandler.handleUrl(url)) {
+                console.log("WebView contentsSize", contentsSize)
-                        root.stop();
+                flick.contentWidth = Math.max(contentsSize.width, flick.width)
+                flick.contentHeight = Math.max(contentsSize.height, flick.height)
+            }
+
+            onLoadingChanged: {
+                keyboardRaised = false;
+                punctuationMode = false;
+                keyboard.resetShiftMode(false);
+
+                // Required to support clicking on "hifi://" links
+                if (WebEngineView.LoadStartedStatus == loadRequest.status) {
+                    var url = loadRequest.url.toString();
+                    url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag;
+                    if (urlHandler.canHandleUrl(url)) {
+                        if (urlHandler.handleUrl(url)) {
+                            root.stop();
+                        }
                     }
                 }
-            }
+                if (WebEngineView.LoadSucceededStatus == loadRequest.status) {
-        }
 
-        onNewViewRequested:{
+//                    flick.contentWidth = Math.max(contentsSize.width, flick.width)
-            // desktop is not defined for web-entities or tablet
+//                    flick.contentHeight = Math.max(contentsSize.height, flick.height)
-            if (typeof desktop !== "undefined") {
+                    root.runJavaScript(
-                desktop.openBrowserWindow(request, profile);
+                                   "document.body.scrollHeight;",
-            } else {
+                                   function (i_actualPageHeight) {
-                tabletRoot.openBrowserWindow(request, profile);
+                                       flick.contentHeight = Math.max (
-            }
+                                           i_actualPageHeight, flick.height);
-        }
+                                   })
+                               root.runJavaScript(
+                                   "document.body.scrollWidth;",
+                                   function (i_actualPageWidth) {
+                                       flick.contentWidth = Math.max (
+                                           i_actualPageWidth, flick.width);
+                                   })
 
-        HiFiControls.WebSpinner { }
+                }
+            }
+
+            onNewViewRequested:{
+                // desktop is not defined for web-entities or tablet
+                if (typeof desktop !== "undefined") {
+                    desktop.openBrowserWindow(request, profile);
+                } else {
+                    tabletRoot.openBrowserWindow(request, profile);
+                }
+            }
+
+            HiFiControls.WebSpinner { }
+        }
     }
 
     HiFiControls.Keyboard {