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
@@ -28,34 +28,10 @@ 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() {
-        webview.reloadAndBypassCache();
-        webview.setActiveFocusOnPress(true);
-        webview.setEnabled(true);
-    }
-
-    Item {
-        id:item
-        width: parent.width
-        implicitHeight: parent.height
-
-        
     QtObject {
         id: eventBridgeWrapper
         WebChannel.id: "eventBridgeWrapper"
@@ -70,9 +46,9 @@ Item {
         width: parent.width
         height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height
 
-            profile: HFWebEngineProfile {
+        profile: HFTabletWebEngineProfile {
-                id: webviewProfile
+            id: webviewTabletProfile
-                storageName: "qmlWebEngine"
+            storageName: "qmlTabletWebEngine"
         }
 
         property string userScriptUrl: ""
@@ -113,7 +89,7 @@ Item {
                 console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
             });
 
-                webview.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface";
+            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;
         }
 
@@ -137,28 +113,17 @@ Item {
             }
         }
 
+        onNavigationRequested: {
+            if (request.navigationType == WebEngineNavigationRequest.LinkClickedNavigation) {
+                pagesModel.append({webUrl: request.url.toString()})
+            }
+        }
+
         onNewViewRequested: {
-                var component = Qt.createComponent("./TabletBrowser.qml");
+            request.openIn(webView);
-                
-                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
-    
-    
     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,35 +97,43 @@ Item {
         }
     }
 
-        
+    ListModel {
-
+        id: pagesModel
-    StackView {
+        onCountChanged: {
-        id: stackRoot
+            currentPage = count - 1
-        width: parent.width
+        }
-        height: parent.height - web.headerHeight
+    }
-        anchors.top: buttons.bottom
-        //property var goBack: currentItem.goBack();
-        property WebEngineView view: root
-        
-        initialItem: root;
         
     function goBack() {
-            if (depth > 1 ) {
+        if (currentPage > 0) {
-                if (currentItem.canGoBack) {
+            currentPage--;
-                    currentItem.goBack();
-                } 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();
         }
     }
+
+    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 {
@@ -131,120 +142,33 @@ Item {
         property var eventBridge;
     }
 
-        WebEngineView {
+    Loader {
-            id: root
+        id: loader
-            objectName: "webEngineView"
+
-            x: 0
+        property WebEngineView currentView: null
-            y: 0
+
         width: parent.width
-            height: keyboardEnabled && keyboardRaised ? (parent.height - keyboard.height) : parent.height
+        height: parent.height - web.headerHeight
-            profile: HFTabletWebEngineProfile {
+        asynchronous: true
-                id: webviewTabletProfile
+        anchors.top: buttons.bottom
-                storageName: "qmlTabletWebEngine"
+        active: false
-            }
+        source: "../TabletBrowser.qml"
-            
+        onStatusChanged: {
-            property WebEngineView webView: root
+            if (loader.status === Loader.Ready) {
-            function reloadPage() {
+                currentView = item.webView
-                root.reload();
+                item.webView.userScriptUrl = web.scriptURL
-            }
+                if (currentPage >= 0) {
-
+                    //we got something to load already
-            function gotoPage(url) {
+                    item.url = pagesModel.get(currentPage).webUrl
-                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: {