Merge pull request #10234 from druiz17/webview-redesign

tablet webview navigation bar redesigned

interface/resources/qml/controls/TabletWebButton.qml

@@ -0,0 +1,53 @@
+//
+//  TabletWebButton.qml
+//
+//  Created by Dante Ruiz on 2017/4/13
+//  Copyright 2015 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import Hifi 1.0
+import QtQuick 2.4
+import "../styles-uit"
+
+Rectangle {
+    property alias text: label.text
+    property alias pixelSize: label.font.pixelSize;
+    property bool selected: false
+    property bool hovered: false
+    property bool enabled: false
+    property int spacing: 2
+    property var action: function () {}
+    property string enabledColor: hifi.colors.blueHighlight
+    property string disabledColor: hifi.colors.blueHighlight
+    property string highlightColor: hifi.colors.blueHighlight;
+    width: label.width + 64
+    height: 32
+    color: hifi.colors.white
+    HifiConstants { id: hifi }
+    RalewaySemiBold {
+        id: label;
+        color: enabledColor
+        font.pixelSize: 15;
+        anchors {
+            horizontalCenter: parent.horizontalCenter;
+            verticalCenter: parent.verticalCenter;
+        }
+    }
+
+        
+    Rectangle {
+        id: indicator
+        width: parent.width
+        height: selected ? 3 : 1
+        anchors {
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        color: hifi.colors.blueHighlight
+        visible: parent.selected || hovered
+    }
+}

interface/resources/qml/controls/TabletWebView.qml

@@ -2,97 +2,81 @@ import QtQuick 2.5
 import QtQuick.Controls 1.4
 import QtWebEngine 1.2
 import QtWebChannel 1.0
+import HFTabletWebEngineProfile 1.0
 import "../controls-uit" as HiFiControls
 import "../styles" as HifiStyles
 import "../styles-uit"
-import HFWebEngineProfile 1.0
-import HFTabletWebEngineProfile 1.0
 import "../"
+import "."
 Item {
     id: web
+    HifiConstants { id: hifi }
     width: parent.width
     height: parent.height
     property var parentStackItem: null
-    property int headerHeight: 38
+    property int headerHeight: 70
     property string url
-    property string address: url //for compatibility
+    property alias address: displayUrl.text //for compatibility
     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: loader.currentView
 
     
     property int currentPage: -1 // used as a model for repeater
     property alias pagesModel: pagesModel
 
-    Row {
+    Rectangle {
         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: currentPage >= 0
-            text: hifi.glyphs.backward
-            color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText
-            size: 48
-            MouseArea { anchors.fill: parent;  onClicked: goBack() }
-        }
-        
-        HiFiGlyphs {
-            id: forward;
-            enabled: currentPage < pagesModel.count - 1
-            text: hifi.glyphs.forward
-            color: enabled ? hifistyles.colors.text : hifistyles.colors.disabledText
-            size: 48
-            MouseArea { anchors.fill: parent;  onClicked: goForward() }
-        }
-        
-        HiFiGlyphs {
-            id: reload;
-            enabled: view != null;
-            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: reloadPage(); }
-        }
-        
-    }
+        width: parent.width
+        height: parent.headerHeight
+        color: hifi.colors.white
 
-    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")
+        Row {
+            id: nav
+            anchors {
+                top: parent.top
+                topMargin: 10
+                horizontalCenter: parent.horizontalCenter
+            }
+            spacing: 120
+            
+            TabletWebButton {
+                id: back
+                enabledColor: hifi.colors.baseGray
+                enabled: false
+                text: "BACK"
 
-        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;
-                    gotoPage(text);
-                    break;
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: goBack()
+                    hoverEnabled: true
+                    
+                }
+            }
 
-                
+            TabletWebButton {
+                id: close
+                enabledColor: hifi.colors.darkGray
+                text: "CLOSE"
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: closeWebEngine()
+                }
+            }
+        }
+
+
+        RalewaySemiBold {
+            id: displayUrl
+            color: hifi.colors.baseGray
+            font.pixelSize: 12
+            anchors {
+                top: nav.bottom
+                horizontalCenter: parent.horizontalCenter;
             }
         }
     }
@@ -100,15 +84,30 @@ Item {
     ListModel {
         id: pagesModel
         onCountChanged: {
-            currentPage = count - 1
+            currentPage = count - 1;
+            if (currentPage > 0) {
+                back.enabledColor = hifi.colors.darkGray;
+            } else {
+                back.enabledColor = hifi.colors.baseGray;
+            }
         }
     }
         
     function goBack() {
-        if (currentPage > 0) {
-            currentPage--;
-        } else if (parentStackItem) {
+        if (webview.canGoBack) {
+            pagesModel.remove(currentPage);
+            webview.goBack();
+        } else if (currentPage > 0) {
+            pagesModel.remove(currentPage);
+        }
+    }
+
+
+    function closeWebEngine() {
+        if (parentStackItem) {
             parentStackItem.pop();
+        } else {
+            web.visible = false;
         }
     }
 
@@ -130,18 +129,20 @@ Item {
 
     function urlAppend(url) {
         var lurl = decodeURIComponent(url)
-        if (lurl[lurl.length - 1] !== "/")
+        if (lurl[lurl.length - 1] !== "/") {
             lurl = lurl + "/"
-        if (currentPage === -1 || pagesModel.get(currentPage).webUrl !== lurl) {
-            pagesModel.append({webUrl: lurl})
+        }
+        if (currentPage === -1 || (pagesModel.get(currentPage).webUrl !== lurl && !timer.running)) {
+            timer.start();
+            pagesModel.append({webUrl: lurl});
         }
     }
 
     onCurrentPageChanged: {
-        if (currentPage >= 0 && currentPage < pagesModel.count && loader.item !== null) {
-            loader.item.url = pagesModel.get(currentPage).webUrl
-            web.url = loader.item.url
-            web.address = loader.item.url
+        if (currentPage >= 0 && currentPage < pagesModel.count) {
+            webview.url = pagesModel.get(currentPage).webUrl;
+            web.url = webview.url;
+            web.address = webview.url;
         }
     }
 
@@ -155,45 +156,110 @@ Item {
         property var eventBridge;
     }
 
-    Loader {
-        id: loader
+    Timer {
+        id: timer
+        interval: 100
+        running: false
+        repeat: false
+        onTriggered: timer.stop();
+    }
 
-        property WebEngineView currentView: null
+        
 
+
+    WebEngineView {
+        id: webview
+        objectName: "webEngineView"
+        x: 0
+        y: 0
         width: parent.width
-        height: parent.height - web.headerHeight
-        asynchronous: true
+        height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height - web.headerHeight : parent.height - web.headerHeight
         anchors.top: buttons.bottom
-        active: false
-        source: "../TabletBrowser.qml"
-        onStatusChanged: {
-            if (loader.status === Loader.Ready) {
-                currentView = item.webView
-                item.webView.userScriptUrl = web.scriptURL
-                if (currentPage >= 0) {
-                    //we got something to load already
-                    item.url = pagesModel.get(currentPage).webUrl
-                    web.address = loader.item.url
+        profile: HFTabletWebEngineProfile {
+            id: webviewTabletProfile
+            storageName: "qmlTabletWebEngine"
+        }
+
+        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("Web Entity JS message: " + sourceID + " " + lineNumber + " " +  message);
+            });
+
+            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) {
+                urlAppend(loadRequest.url.toString())
+                var url = loadRequest.url.toString();
+                if (urlHandler.canHandleUrl(url)) {
+                    if (urlHandler.handleUrl(url)) {
+                        root.stop();
+                    }
                 }
             }
         }
-    }
 
+        onNewViewRequested: {
+            request.openIn(webview);
+        }
+    }
+    
     Component.onCompleted: {
         web.isDesktop = (typeof desktop !== "undefined");
         address = url;
-        loader.active = true
     }
 
-     Keys.onPressed: {
+    Keys.onPressed: {
         switch(event.key) {
-            case Qt.Key_L:
-                if (event.modifiers == Qt.ControlModifier) {
-                    event.accepted = true
-                    addressBar.selectAll()
-                    addressBar.forceActiveFocus()
-                }
-                break;
+        case Qt.Key_L:
+            if (event.modifiers == Qt.ControlModifier) {
+                event.accepted = true
+            }
+            break;
         }
     }
 }

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

@@ -37,7 +37,7 @@ StackView {
 
     property var tablet: null;
 
-    Component { id: tabletStoryCard; TabletStoryCard {} }
+    Component { id: tabletWebView; TabletWebView {} }
     Component.onCompleted: {
         fillDestinations();
         updateLocationText(false);
@@ -62,9 +62,9 @@ StackView {
     }
     function goCard(targetString) {
         if (0 !== targetString.indexOf('hifi://')) {
-            var card = tabletStoryCard.createObject();
-            card.setUrl(addressBarDialog.metaverseServerUrl + targetString);
-            card.eventBridge = root.eventBridge;
+            var card = tabletWebView.createObject();
+            card.url = addressBarDialog.metaverseServerUrl + targetString;
+            card.parentStackItem = root;
             root.push(card);
             return;
         }

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

@@ -1,46 +0,0 @@
-//
-//  TabletAddressDialog.qml
-//
-//  Created by Dante Ruiz on 2017/04/24
-//  Copyright 2015 High Fidelity, Inc.
-//
-//  Distributed under the Apache License, Version 2.0.
-//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
-//
-
-import Hifi 1.0
-import QtQuick 2.4
-import QtGraphicalEffects 1.0
-import "../../controls"
-import "../../styles"
-import "../../windows"
-import "../"
-import "../toolbars"
-import "../../styles-uit" as HifiStyles
-import "../../controls-uit" as HifiControlsUit
-import "../../controls" as HifiControls
-
-
-Rectangle {
-    id: cardRoot
-    HifiStyles.HifiConstants { id: hifi }
-    width: parent.width
-    height: parent.height
-    property string address: ""
-    property alias eventBridge: webview.eventBridge
-    function setUrl(url) {
-        cardRoot.address = url;
-        webview.url = url;
-    }
-    
-    HifiControls.TabletWebView {
-        id: webview
-        parentStackItem: root
-        anchors {
-            top: parent.top
-            right: parent.right
-            left: parent.left
-            bottom: parent.bottom
-        }
-    }   
-}

interface/src/networking/HFTabletWebEngineRequestInterceptor.cpp

@@ -34,9 +34,13 @@ void HFTabletWebEngineRequestInterceptor::interceptRequest(QWebEngineUrlRequestI
             QString bearerTokenString = "Bearer " + accountManager->getAccountInfo().getAccessToken().token;
             info.setHttpHeader(OAUTH_AUTHORIZATION_HEADER.toLocal8Bit(), bearerTokenString.toLocal8Bit());
         }
-    }
 
-    static const QString USER_AGENT = "User-Agent";
-    QString tokenString = "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";
-    info.setHttpHeader(USER_AGENT.toLocal8Bit(), tokenString.toLocal8Bit());
+        static const QString USER_AGENT = "User-Agent";
+        QString tokenString = "Chrome/48.0 (HighFidelityInterface)";
+        info.setHttpHeader(USER_AGENT.toLocal8Bit(), tokenString.toLocal8Bit());
+    } else {
+        static const QString USER_AGENT = "User-Agent";
+        QString tokenString = "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";
+        info.setHttpHeader(USER_AGENT.toLocal8Bit(), tokenString.toLocal8Bit());
+    }
 }