From 7189d4d7fafc77536661623c70ee657c1d1af7bd Mon Sep 17 00:00:00 2001 From: Dante Ruiz Date: Fri, 14 Apr 2017 17:01:23 +0100 Subject: [PATCH 1/3] daving web work --- .../qml/controls/TabletWebButton.qml | 53 ++++ .../resources/qml/controls/TabletWebView.qml | 272 +++++++++++------- .../qml/hifi/tablet/TabletAddressDialog.qml | 10 +- .../HFTabletWebEngineRequestInterceptor.cpp | 12 +- 4 files changed, 236 insertions(+), 111 deletions(-) create mode 100644 interface/resources/qml/controls/TabletWebButton.qml diff --git a/interface/resources/qml/controls/TabletWebButton.qml b/interface/resources/qml/controls/TabletWebButton.qml new file mode 100644 index 0000000000..a5876d08dd --- /dev/null +++ b/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 + } +} diff --git a/interface/resources/qml/controls/TabletWebView.qml b/interface/resources/qml/controls/TabletWebView.qml index 93e693ab2f..7e2e6d0a26 100644 --- a/interface/resources/qml/controls/TabletWebView.qml +++ b/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,22 @@ 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}) + } + console.log("-------------> is time running " + timer.running + " <--------------"); + if (currentPage === -1 || (pagesModel.get(currentPage).webUrl !== lurl && !timer.running)) { + console.log("---------> appending the url ----------> " + lurl); + 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 +158,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; } } } diff --git a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml index 356ff92664..ab28b84a3d 100644 --- a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml +++ b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml @@ -35,8 +35,8 @@ StackView { property var tablet: null; property bool isDesktop: false; - - Component { id: tabletStoryCard; TabletStoryCard {} } + + Component { id: tabletWebView; TabletWebView {} } Component.onCompleted: { root.currentItem.focus = true; root.currentItem.forceActiveFocus(); @@ -68,9 +68,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; } diff --git a/interface/src/networking/HFTabletWebEngineRequestInterceptor.cpp b/interface/src/networking/HFTabletWebEngineRequestInterceptor.cpp index 7282fb5e3d..fd79fc1cb6 100644 --- a/interface/src/networking/HFTabletWebEngineRequestInterceptor.cpp +++ b/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()); + } } From 863d64b2fd915d2a9ff51ca99bd7020ebb8714e2 Mon Sep 17 00:00:00 2001 From: Dante Ruiz Date: Fri, 14 Apr 2017 18:06:44 +0100 Subject: [PATCH 2/3] removed comments and non-needed files --- .../resources/qml/controls/TabletWebView.qml | 2 - .../qml/hifi/tablet/TabletStoryCard.qml | 46 ------------------- 2 files changed, 48 deletions(-) delete mode 100644 interface/resources/qml/hifi/tablet/TabletStoryCard.qml diff --git a/interface/resources/qml/controls/TabletWebView.qml b/interface/resources/qml/controls/TabletWebView.qml index 7e2e6d0a26..9a08e8b866 100644 --- a/interface/resources/qml/controls/TabletWebView.qml +++ b/interface/resources/qml/controls/TabletWebView.qml @@ -132,9 +132,7 @@ Item { if (lurl[lurl.length - 1] !== "/") { lurl = lurl + "/" } - console.log("-------------> is time running " + timer.running + " <--------------"); if (currentPage === -1 || (pagesModel.get(currentPage).webUrl !== lurl && !timer.running)) { - console.log("---------> appending the url ----------> " + lurl); timer.start(); pagesModel.append({webUrl: lurl}); } diff --git a/interface/resources/qml/hifi/tablet/TabletStoryCard.qml b/interface/resources/qml/hifi/tablet/TabletStoryCard.qml deleted file mode 100644 index 1d57c8a083..0000000000 --- a/interface/resources/qml/hifi/tablet/TabletStoryCard.qml +++ /dev/null @@ -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 - } - } -} From 31b61c3225ed4609fc4abfdc385b68df046ce902 Mon Sep 17 00:00:00 2001 From: Dante Ruiz Date: Tue, 18 Apr 2017 00:24:34 +0100 Subject: [PATCH 3/3] removed white space --- interface/resources/qml/hifi/tablet/TabletAddressDialog.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml index ece00bd0dd..bed1f82ac2 100644 --- a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml +++ b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml @@ -36,7 +36,7 @@ StackView { property string metaverseBase: addressBarDialog.metaverseServerUrl + "/api/v1/"; property var tablet: null; - + Component { id: tabletWebView; TabletWebView {} } Component.onCompleted: { fillDestinations();