Merge pull request #10087 from druiz17/tablet-webView

Better webview handing for the tablet

interface/resources/qml/TabletBrowser.qml

@@ -0,0 +1,186 @@
+import QtQuick 2.5
+import QtQuick.Controls 1.2
+import QtWebChannel 1.0
+import QtWebEngine 1.2
+
+import "controls"
+import "styles" as HifiStyles
+import "styles-uit"
+import "windows"
+import HFWebEngineProfile 1.0
+
+Item {
+    id: root
+    HifiConstants { id: hifi }
+    HifiStyles.HifiConstants { id: hifistyles }
+    //width: parent.width
+    height: 600
+    property variant permissionsBar: {'securityOrigin':'none','feature':'none'}
+    property alias url: webview.url
+    property WebEngineView webView: webview
+    property alias eventBridge: eventBridgeWrapper.eventBridge
+    property bool canGoBack: webview.canGoBack
+    property bool canGoForward: webview.canGoForward
+
+
+    signal loadingChanged(int status)
+
+    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"
+            property var eventBridge;
+        }
+
+        WebEngineView {
+            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 {
+                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: webview.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
+                webview.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) {
+                    console.log("TabletBrowser");
+                    console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
+                });
+                
+                webview.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface";
+                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();
+                        }
+                    }
+                }
+            }
+
+            onActiveFocusOnPressChanged: {
+                console.log("on active focus changed");
+                setActiveFocusOnPress(true);
+            }
+
+            onNewViewRequested:{
+                // desktop is not defined for web-entities
+                if (stackRoot.isDesktop) {
+                    var component = Qt.createComponent("./Browser.qml");
+                    var newWindow = component.createObject(desktop); 
+                    request.openIn(newWindow.webView);
+                } else {
+                    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(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:
+            if (event.modifiers == Qt.ControlModifier) {
+                event.accepted = true
+                addressBar.selectAll()
+                addressBar.forceActiveFocus()
+            }
+            break;
+        }
+    }
+    
+   } // dialog

interface/resources/qml/controls/TabletWebView.qml

@@ -0,0 +1,268 @@
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import QtWebEngine 1.1
+import QtWebChannel 1.0
+import "../controls-uit" as HiFiControls
+import "../styles" as HifiStyles
+import "../styles-uit"
+import HFWebEngineProfile 1.0
+import "../"
+Item {
+    id: web
+    width: parent.width
+    height: parent.height
+    property var parentStackItem: null
+    property int headerHeight: 38
+    property alias url: root.url
+    property string address: url
+    property alias scriptURL: root.userScriptUrl
+    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
+
+
+    Row {
+        id: buttons
+        HifiConstants { id: hifi }
+        HifiStyles.HifiConstants { id: hifistyles }
+        height: headerHeight
+        spacing: 4
+        anchors.top: parent.top
+        anchors.topMargin: 8
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        HiFiGlyphs {
+            id: back;
+            enabled: true;
+            text: hifi.glyphs.backward
+            color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText
+            size: 48
+            MouseArea { anchors.fill: parent;  onClicked: stackRoot.goBack() }
+        }
+        
+        HiFiGlyphs {
+            id: forward;
+            enabled: stackRoot.currentItem.canGoForward;
+            text: hifi.glyphs.forward
+            color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText
+            size: 48
+            MouseArea { anchors.fill: parent;  onClicked: stackRoot.currentItem.goForward() }
+        }
+        
+        HiFiGlyphs {
+            id: reload;
+            enabled: true;
+            text: webview.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(); }
+        }
+        
+    }
+
+    TextField {
+        id: addressBar
+        height: 30
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.left: buttons.right
+        anchors.leftMargin: 0
+        anchors.verticalCenter: buttons.verticalCenter
+        focus: true
+        text: address
+        Component.onCompleted: ScriptDiscoveryService.scriptsModelFilter.filterRegExp = new RegExp("^.*$", "i")
+
+        Keys.onPressed: {
+            switch (event.key) {
+                case Qt.Key_Enter:
+                case Qt.Key_Return: 
+                    event.accepted = true;
+                    if (text.indexOf("http") != 0) {
+                        text = "http://" + text;
+                     }
+                    //root.hidePermissionsBar();
+                    web.keyboardRaised = false;
+                    stackRoot.currentItem.gotoPage(text);
+                    break;
+
+                
+            }
+        }
+    }
+
+        
+
+    StackView {
+        id: stackRoot
+        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 (currentItem.canGoBack) {
+                    currentItem.goBack();
+                } else {
+                    stackRoot.pop();
+                    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: HFWebEngineProfile {
+                //id: webviewProfile
+                //storageName: "qmlWebEngine"
+            //}
+            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("WebView.qml");
+                    console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
+                });
+
+                root.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)"
+
+            }
+
+            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:{
+                // desktop is not defined for web-entities
+                if (isDesktop) {
+                    var component = Qt.createComponent("../Browser.qml");
+                    var newWindow = component.createObject(desktop);
+                    request.openIn(newWindow.webView);
+                } else {
+                    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: {
+        stackRoot.isDesktop = (typeof desktop !== "undefined");
+        address = url;
+    }
+
+     Keys.onPressed: {
+        switch(event.key) {
+            case Qt.Key_L:
+                if (event.modifiers == Qt.ControlModifier) {
+                    event.accepted = true
+                    addressBar.selectAll()
+                    addressBar.forceActiveFocus()
+                }
+                break;
+        }
+    }
+}

interface/resources/qml/hifi/tablet/TabletAddressDialog.qml

@@ -27,7 +27,7 @@ StackView {
     initialItem: addressBarDialog
     width: parent.width
     height: parent.height
-
+    property var eventBridge;
     property var allStories: [];
     property int cardWidth: 460;
     property int cardHeight: 320;
@@ -59,6 +59,7 @@ StackView {
         if (0 !== targetString.indexOf('hifi://')) {
             var card = tabletStoryCard.createObject();
             card.setUrl(addressBarDialog.metaverseServerUrl + targetString);
+            card.eventBridge = root.eventBridge;
             root.push(card);
             return;
         }

interface/resources/qml/hifi/tablet/TabletStoryCard.qml

@@ -17,7 +17,8 @@ import "../../windows"
 import "../"
 import "../toolbars"
 import "../../styles-uit" as HifiStyles
-import "../../controls-uit" as HifiControls
+import "../../controls-uit" as HifiControlsUit
+import "../../controls" as HifiControls
 
 
 Rectangle {
@@ -26,104 +27,17 @@ Rectangle {
     width: parent.width
     height: parent.height
     property string address: ""
-
+    property alias eventBridge: webview.eventBridge
     function setUrl(url) {
         cardRoot.address = url;
         webview.url = url;
     }
-
+    
-    function goBack() {
+    HifiControls.TabletWebView {
-    }
-
-    function visit() {
-    }
-
-    Rectangle {
-        id: header
-        anchors {
-            left: parent.left
-            right: parent.right
-            top: parent.top
-        }
-        
-        width: parent.width
-        height: 50
-        color: hifi.colors.white
-
-        Row {
-            anchors.fill: parent
-            spacing: 80
-
-            Item {
-                id: backButton
-                anchors {
-                    top: parent.top
-                    left: parent.left
-                    leftMargin: 100
-                }
-                height: parent.height
-                width: parent.height
-
-                HifiStyles.FiraSansSemiBold {
-                    text: "BACK"
-                    elide: Text.ElideRight
-                    anchors.fill: parent
-                    size: 16
-
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-
-                    color: hifi.colors.lightGray
-
-                    MouseArea {
-                        id: backButtonMouseArea
-                        anchors.fill: parent
-                        hoverEnabled: enabled
-
-                        onClicked: {
-                            webview.goBack();
-                        }
-                    }
-                }
-            }
-
-            Item {
-                id: closeButton
-                anchors {
-                    top: parent.top
-                    right: parent.right
-                    rightMargin: 100
-                }
-                height: parent.height
-                width: parent.height
-
-                HifiStyles.FiraSansSemiBold {
-                    text: "CLOSE"
-                    elide: Text.ElideRight
-                    anchors.fill: parent
-                    size: 16
-
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-
-                    color: hifi.colors.lightGray
-
-                    MouseArea {
-                        id: closeButtonMouseArea
-                        anchors.fill: parent
-                        hoverEnabled: enabled
-
-                        onClicked: root.pop();
-                    }
-                }
-            }
-        }
-    }
-
-    HifiControls.WebView {
         id: webview
+        parentStackItem: root
         anchors {
-            top: header.bottom
+            top: parent.top
             right: parent.right
             left: parent.left
             bottom: parent.bottom