TabletWebView redesigned to single WebView instance

interface/resources/qml/TabletBrowser.qml

@@ -1,5 +1,5 @@
 import QtQuick 2.5
-import QtQuick.Controls 1.2
+import QtQuick.Controls 1.4
 import QtWebChannel 1.0
 import QtWebEngine 1.2
 
@@ -7,7 +7,7 @@ import "controls"
 import "styles" as HifiStyles
 import "styles-uit"
 import "windows"
-import HFWebEngineProfile 1.0
+import HFTabletWebEngineProfile 1.0
 
 Item {
     id: root
@@ -27,138 +27,103 @@ Item {
 
     x: 0
     y: 0
-    
-    function goBack() {
-        webview.goBack();
-    }
-    
-    function goForward() {
-        webview.goForward();
-    }
-    
-    function gotoPage(url) {
-        webview.url = url;
-    }
 
     function setProfile(profile) {
         webview.profile = profile;
     }
 
-    function reloadPage() {
+    QtObject {
-        webview.reloadAndBypassCache();
+        id: eventBridgeWrapper
-        webview.setActiveFocusOnPress(true);
+        WebChannel.id: "eventBridgeWrapper"
-        webview.setEnabled(true);
+        property var eventBridge;
     }
 
-    Item {
+    WebEngineView {
-        id:item
+        id: webview
+        objectName: "webEngineView"
+        x: 0
+        y: 0
         width: parent.width
-        implicitHeight: parent.height
+        height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height
 
-        
+        profile: HFTabletWebEngineProfile {
-        QtObject {
+            id: webviewTabletProfile
-            id: eventBridgeWrapper
+            storageName: "qmlTabletWebEngine"
-            WebChannel.id: "eventBridgeWrapper"
-            property var eventBridge;
         }
 
-        WebEngineView {
+        property string userScriptUrl: ""
-            id: webview
-            objectName: "webEngineView"
-            x: 0
-            y: 0
-            width: parent.width
-            height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height
-            
-            profile: HFWebEngineProfile {
-                id: webviewProfile
-                storageName: "qmlWebEngine"
-            }
 
-            property string userScriptUrl: ""
+        // creates a global EventBridge object.
-            
+        WebEngineScript {
-            // creates a global EventBridge object.
+            id: createGlobalEventBridge
-            WebEngineScript {
+            sourceCode: eventBridgeJavaScriptToInject
-                id: createGlobalEventBridge
+            injectionPoint: WebEngineScript.DocumentCreation
-                sourceCode: eventBridgeJavaScriptToInject
+            worldId: WebEngineScript.MainWorld
-                injectionPoint: WebEngineScript.DocumentCreation
+        }
-                worldId: WebEngineScript.MainWorld
-            }
-            
-            // detects when to raise and lower virtual keyboard
-            WebEngineScript {
-                id: raiseAndLowerKeyboard
-                injectionPoint: WebEngineScript.Deferred
-                sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js"
-                worldId: WebEngineScript.MainWorld
-            }
-            
-            // User script.
-            WebEngineScript {
-                id: userScript
-                sourceUrl: webview.userScriptUrl
-                injectionPoint: WebEngineScript.DocumentReady  // DOM ready but page load may not be finished.
-                worldId: WebEngineScript.MainWorld
-            }
 
-            userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ]
+        // detects when to raise and lower virtual keyboard
-            
+        WebEngineScript {
-            property string newUrl: ""
+            id: raiseAndLowerKeyboard
-            
+            injectionPoint: WebEngineScript.Deferred
-            webChannel.registeredObjects: [eventBridgeWrapper]
+            sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js"
+            worldId: WebEngineScript.MainWorld
+        }
 
-            Component.onCompleted: {
+        // User script.
-                // Ensure the JS from the web-engine makes it to our logging
+        WebEngineScript {
-                webview.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
+            id: userScript
-                    console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
+            sourceUrl: webview.userScriptUrl
-                });
+            injectionPoint: WebEngineScript.DocumentReady  // DOM ready but page load may not be finished.
-                
+            worldId: WebEngineScript.MainWorld
-                webview.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface";
+        }
-                web.address = url;
-            }
-            
-            onFeaturePermissionRequested: {
-                grantFeaturePermission(securityOrigin, feature, true);
-            }
 
-            onLoadingChanged: {
+        userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ]
-                keyboardRaised = false;
+
-                punctuationMode = false;
+        property string newUrl: ""
-                keyboard.resetShiftMode(false);
+
-                
+        webChannel.registeredObjects: [eventBridgeWrapper]
-                // Required to support clicking on "hifi://" links
+
-                if (WebEngineView.LoadStartedStatus == loadRequest.status) {
+        Component.onCompleted: {
-                    var url = loadRequest.url.toString();
+            // Ensure the JS from the web-engine makes it to our logging
-                    if (urlHandler.canHandleUrl(url)) {
+            webview.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
-                        if (urlHandler.handleUrl(url)) {
+                console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
-                            root.stop();
+            });
-                        }
+
+            webview.profile.httpUserAgent = "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Mobile Safari/537.36";
+            web.address = url;
+        }
+
+        onFeaturePermissionRequested: {
+            grantFeaturePermission(securityOrigin, feature, true);
+        }
+
+        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();
+                if (urlHandler.canHandleUrl(url)) {
+                    if (urlHandler.handleUrl(url)) {
+                        root.stop();
                     }
                 }
             }
+        }
 
-            onNewViewRequested: {
+        onNavigationRequested: {
-                var component = Qt.createComponent("./TabletBrowser.qml");
+            if (request.navigationType == WebEngineNavigationRequest.LinkClickedNavigation) {
-                
+                pagesModel.append({webUrl: request.url.toString()})
-                if (component.status != Component.Ready) {
-                    if (component.status == Component.Error) {
-                        console.log("Error: " + component.errorString());
-                    }
-                    return;
-                }
-                var newWindow = component.createObject();
-                newWindow.setProfile(webview.profile);
-                request.openIn(newWindow.webView);
-                newWindow.eventBridge = web.eventBridge;
-                stackRoot.push(newWindow);
-                newWindow.webView.forceActiveFocus();
-                
             }
         }
-        
+
-    } // item
+        onNewViewRequested: {
-    
+            request.openIn(webView);
-    
+        }
+    }
+
     Keys.onPressed: {
         switch(event.key) {
         case Qt.Key_L:
@@ -171,4 +136,4 @@ Item {
         }
     }
     
-   } // dialog
+}

interface/resources/qml/controls/TabletWebView.qml

@@ -1,6 +1,6 @@
 import QtQuick 2.5
 import QtQuick.Controls 1.4
-import QtWebEngine 1.1
+import QtWebEngine 1.2
 import QtWebChannel 1.0
 import "../controls-uit" as HiFiControls
 import "../styles" as HifiStyles
@@ -14,17 +14,20 @@ Item {
     height: parent.height
     property var parentStackItem: null
     property int headerHeight: 38
-    property alias url: root.url
+    property string url
-    property string address: url
+    property string address: url //for compatibility
-    property alias scriptURL: root.userScriptUrl
+    property string scriptURL
     property alias eventBridge: eventBridgeWrapper.eventBridge
     property bool keyboardEnabled: HMD.active
     property bool keyboardRaised: false
     property bool punctuationMode: false
     property bool isDesktop: false
-    property WebEngineView view: root
+    property WebEngineView view: loader.currentView
 
     
+    property int currentPage: -1 // used as a model for repeater
+    property alias pagesModel: pagesModel
+
     Row {
         id: buttons
         HifiConstants { id: hifi }
@@ -37,29 +40,29 @@ Item {
         anchors.leftMargin: 8
         HiFiGlyphs {
             id: back;
-            enabled: true;
+            enabled: currentPage > 0
             text: hifi.glyphs.backward
             color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText
             size: 48
-            MouseArea { anchors.fill: parent;  onClicked: stackRoot.goBack() }
+            MouseArea { anchors.fill: parent;  onClicked: goBack() }
         }
         
         HiFiGlyphs {
             id: forward;
-            enabled: stackRoot.currentItem.canGoForward;
+            enabled: currentPage < pagesModel.count - 1
             text: hifi.glyphs.forward
             color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText
             size: 48
-            MouseArea { anchors.fill: parent;  onClicked: stackRoot.currentItem.goForward() }
+            MouseArea { anchors.fill: parent;  onClicked: goForward() }
         }
         
         HiFiGlyphs {
             id: reload;
-            enabled: true;
+            enabled: view != null;
-            text: webview.loading ? hifi.glyphs.close : hifi.glyphs.reload
+            text: (view !== null && view.loading) ? hifi.glyphs.close : hifi.glyphs.reload
             color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText
             size: 48
-            MouseArea { anchors.fill: parent;  onClicked: stackRoot.currentItem.reloadPage(); }
+            MouseArea { anchors.fill: parent;  onClicked: reloadPage(); }
         }
         
     }
@@ -86,7 +89,7 @@ Item {
                      }
                     //root.hidePermissionsBar();
                     web.keyboardRaised = false;
-                    stackRoot.currentItem.gotoPage(text);
+                    gotoPage(text);
                     break;
 
                 
@@ -94,157 +97,78 @@ Item {
         }
     }
 
+    ListModel {
+        id: pagesModel
+        onCountChanged: {
+            currentPage = count - 1
+        }
+    }
         
+    function goBack() {
+        if (currentPage > 0) {
+            currentPage--;
+        }
+    }
+
+    function goForward() {
+        if (currentPage < pagesModel.count - 1) {
+            currentPage++;
+        }
+    }
+
+    function gotoPage(url) {
+        pagesModel.append({webUrl: url})
+    }
+
+    function reloadPage() {
+        view.reloadAndBypassCache()
+        view.setActiveFocusOnPress(true);
+        view.setEnabled(true);
+    }
+
+    onCurrentPageChanged: {
+        if (currentPage >= 0 && currentPage < pagesModel.count && loader.item !== null) {
+            loader.item.url = pagesModel.get(currentPage).webUrl
+        }
+    }
+
+    onUrlChanged: {
+        gotoPage(url)
+    }
+
+    QtObject {
+        id: eventBridgeWrapper
+        WebChannel.id: "eventBridgeWrapper"
+        property var eventBridge;
+    }
+
+    Loader {
+        id: loader
+
+        property WebEngineView currentView: null
 
-    StackView {
-        id: stackRoot
         width: parent.width
         height: parent.height - web.headerHeight
+        asynchronous: true
         anchors.top: buttons.bottom
-        //property var goBack: currentItem.goBack();
+        active: false
-        property WebEngineView view: root
+        source: "../TabletBrowser.qml"
-        
+        onStatusChanged: {
-        initialItem: root;
+            if (loader.status === Loader.Ready) {
-        
+                currentView = item.webView
-        function goBack() {
+                item.webView.userScriptUrl = web.scriptURL
-            if (depth > 1 ) {
+                if (currentPage >= 0) {
-                if (currentItem.canGoBack) {
+                    //we got something to load already
-                    currentItem.goBack();
+                    item.url = pagesModel.get(currentPage).webUrl
-                } else {
-                    stackRoot.pop();
-                    currentItem.webView.focus = true;
-                    currentItem.webView.forceActiveFocus();
-                    web.address = currentItem.webView.url;
-                }
-            } else {
-                if (currentItem.canGoBack) {
-                    currentItem.goBack();
-                } else if (parentStackItem) {
-                    web.parentStackItem.pop();
                 }
             }
         }
-
-        QtObject {
-            id: eventBridgeWrapper
-            WebChannel.id: "eventBridgeWrapper"
-            property var eventBridge;
-        }
-
-        WebEngineView {
-            id: root
-            objectName: "webEngineView"
-            x: 0
-            y: 0
-            width: parent.width
-            height: keyboardEnabled && keyboardRaised ? (parent.height - keyboard.height) : parent.height
-            profile: HFTabletWebEngineProfile {
-                id: webviewTabletProfile
-                storageName: "qmlTabletWebEngine"
-            }
-            
-            property WebEngineView webView: root
-            function reloadPage() {
-                root.reload();
-            }
-
-            function gotoPage(url) {
-                root.url = url;
-            }
-            
-            property string userScriptUrl: ""
-
-            // creates a global EventBridge object.
-            WebEngineScript {
-                id: createGlobalEventBridge
-                sourceCode: eventBridgeJavaScriptToInject
-                injectionPoint: WebEngineScript.DocumentCreation
-                worldId: WebEngineScript.MainWorld
-            }
-
-            // detects when to raise and lower virtual keyboard
-            WebEngineScript {
-                id: raiseAndLowerKeyboard
-                injectionPoint: WebEngineScript.Deferred
-                sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js"
-                worldId: WebEngineScript.MainWorld
-            }
-
-            // 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 newUrl: ""
-
-            webChannel.registeredObjects: [eventBridgeWrapper]
-
-            Component.onCompleted: {
-                // 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);
-                });
-
-                root.profile.httpUserAgent = "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Mobile Safari/537.36"   
-
-            }
-
-            onFeaturePermissionRequested: {
-                grantFeaturePermission(securityOrigin, feature, true);
-            }
-
-            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();
-                    if (urlHandler.canHandleUrl(url)) {
-                        if (urlHandler.handleUrl(url)) {
-                            root.stop();
-                        }
-                    }
-                }
-            }
-
-            onNewViewRequested:{
-                var component = Qt.createComponent("../TabletBrowser.qml");
-                if (component.status != Component.Ready) {
-                    if (component.status == Component.Error) {
-                        console.log("Error: " + component.errorString());
-                    }
-                    return;
-                }
-                var newWindow = component.createObject();
-                newWindow.setProfile(root.profile);
-                request.openIn(newWindow.webView);
-                newWindow.eventBridge = web.eventBridge;
-                stackRoot.push(newWindow);
-            }
-        }
-        
-        HiFiControls.Keyboard {
-            id: keyboard
-            raised: web.keyboardEnabled && web.keyboardRaised
-            numeric: web.punctuationMode
-            anchors {
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-        }
-
     }
 
     Component.onCompleted: {
         web.isDesktop = (typeof desktop !== "undefined");
         address = url;
+        loader.active = true
     }
 
      Keys.onPressed: {