From 56dedea66cb970ef3aa9fc7a6fd0174003db1b1c Mon Sep 17 00:00:00 2001 From: vladest Date: Sun, 20 Aug 2017 17:57:03 +0200 Subject: [PATCH 01/13] 1st experimental approach --- .../qml/controls/TabletWebScreen.qml | 165 +++++++++++------- .../resources/qml/controls/TabletWebView.qml | 162 +++++++++-------- interface/resources/qml/controls/WebView.qml | 160 ++++++++++------- 3 files changed, 279 insertions(+), 208 deletions(-) diff --git a/interface/resources/qml/controls/TabletWebScreen.qml b/interface/resources/qml/controls/TabletWebScreen.qml index 1de31aba41..e1615e1442 100644 --- a/interface/resources/qml/controls/TabletWebScreen.qml +++ b/interface/resources/qml/controls/TabletWebScreen.qml @@ -1,5 +1,5 @@ -import QtQuick 2.5 -import QtWebEngine 1.1 +import QtQuick 2.7 +import QtWebEngine 1.5 import QtWebChannel 1.0 import "../controls-uit" as HiFiControls @@ -23,91 +23,124 @@ Item { property alias viewProfile: root.profile - WebEngineView { - id: root - objectName: "webEngineView" + Flickable { + id: flick x: 0 y: 0 width: parent.width height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height - profile: HFWebEngineProfile; + WebEngineView { + id: root + objectName: "webEngineView" + anchors.fill: parent - property string userScriptUrl: "" + profile: HFWebEngineProfile; - // creates a global EventBridge object. - WebEngineScript { - id: createGlobalEventBridge - sourceCode: eventBridgeJavaScriptToInject - injectionPoint: WebEngineScript.DocumentCreation - worldId: WebEngineScript.MainWorld - } + property string userScriptUrl: "" - // detects when to raise and lower virtual keyboard - WebEngineScript { - id: raiseAndLowerKeyboard - injectionPoint: WebEngineScript.Deferred - sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js" - worldId: WebEngineScript.MainWorld - } + // creates a global EventBridge object. + WebEngineScript { + id: createGlobalEventBridge + sourceCode: eventBridgeJavaScriptToInject + injectionPoint: WebEngineScript.DocumentCreation + 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 - } - - property string urlTag: "noDownload=false"; + // detects when to raise and lower virtual keyboard + WebEngineScript { + id: raiseAndLowerKeyboard + injectionPoint: WebEngineScript.Deferred + sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js" + worldId: WebEngineScript.MainWorld + } - userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] + // User script. + WebEngineScript { + id: userScript + sourceUrl: root.userScriptUrl + injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. + worldId: WebEngineScript.MainWorld + } - property string newUrl: "" - + property string urlTag: "noDownload=false"; - Component.onCompleted: { - webChannel.registerObject("eventBridge", eventBridge); - webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); - // 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); - }); + userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - root.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)"; - } + property string newUrl: "" - onFeaturePermissionRequested: { - grantFeaturePermission(securityOrigin, feature, true); - } + onContentsSizeChanged: { + console.log("WebView contentsSize", contentsSize) + flick.contentWidth = Math.max(contentsSize.width, flick.width) + flick.contentHeight = Math.max(contentsSize.height, flick.height) + } - onLoadingChanged: { - keyboardRaised = false; - punctuationMode = false; - keyboard.resetShiftMode(false); + Component.onCompleted: { + webChannel.registerObject("eventBridge", eventBridge); + webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); + // 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); + }); - // Required to support clicking on "hifi://" links - if (WebEngineView.LoadStartedStatus == loadRequest.status) { - var url = loadRequest.url.toString(); - url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; - if (urlHandler.canHandleUrl(url)) { - if (urlHandler.handleUrl(url)) { - root.stop(); + root.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)"; + } + + onFeaturePermissionRequested: { + grantFeaturePermission(securityOrigin, feature, true); + } + + onLoadingChanged: { + console.log("loading changed", loadRequest.status) + keyboardRaised = false; + punctuationMode = false; + keyboard.resetShiftMode(false); + + // Required to support clicking on "hifi://" links + if (WebEngineView.LoadStartedStatus == loadRequest.status) { + flick.contentWidth = -1 + flick.contentHeight = -1 + var url = loadRequest.url.toString(); + url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; + if (urlHandler.canHandleUrl(url)) { + if (urlHandler.handleUrl(url)) { + root.stop(); + } } } - } - } + if (WebEngineView.LoadSucceededStatus == loadRequest.status) { +// flick.contentWidth = Math.max(contentsSize.width, flick.width) +// flick.contentHeight = Math.max(contentsSize.height, flick.height) + root.runJavaScript( + "document.body.scrollHeight;", + function (i_actualPageHeight) { + console.log("on reloaded documentElement.scrollHeigh:", i_actualPageHeight) +// flick.contentHeight = Math.max ( +// i_actualPageHeight, flick.height); + }) + root.runJavaScript( + "document.body.scrollWidth;", + function (i_actualPageWidth) { + console.log("on reloaded documentElement.scrollWidth:", i_actualPageWidth) - onNewViewRequested:{ - // desktop is not defined for web-entities or tablet - if (typeof desktop !== "undefined") { - desktop.openBrowserWindow(request, profile); - } else { - tabletRoot.openBrowserWindow(request, profile); +// flick.contentWidth = Math.max ( +// i_actualPageWidth, flick.width); + }) + console.log("on reloaded content size:", contentsSize) + } } - } - HiFiControls.WebSpinner { } + onNewViewRequested:{ + // desktop is not defined for web-entities or tablet + if (typeof desktop !== "undefined") { + desktop.openBrowserWindow(request, profile); + } else { + tabletRoot.openBrowserWindow(request, profile); + } + } + + HiFiControls.WebSpinner { } + } } HiFiControls.Keyboard { diff --git a/interface/resources/qml/controls/TabletWebView.qml b/interface/resources/qml/controls/TabletWebView.qml index 8547f67468..6fafab81a9 100644 --- a/interface/resources/qml/controls/TabletWebView.qml +++ b/interface/resources/qml/controls/TabletWebView.qml @@ -1,6 +1,6 @@ -import QtQuick 2.5 +import QtQuick 2.7 import QtQuick.Controls 1.4 -import QtWebEngine 1.2 +import QtWebEngine 1.5 import QtWebChannel 1.0 import "../controls-uit" as HiFiControls import "../styles" as HifiStyles @@ -136,99 +136,107 @@ Item { loadUrl(url); } - WebEngineView { - id: webview - objectName: "webEngineView" + Flickable { + id: flick x: 0 y: 0 width: parent.width height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height - web.headerHeight : parent.height - web.headerHeight anchors.top: buttons.bottom - profile: HFWebEngineProfile; - property string userScriptUrl: "" + WebEngineView { + id: webview + objectName: "webEngineView" + anchors.fill: parent - // creates a global EventBridge object. - WebEngineScript { - id: createGlobalEventBridge - sourceCode: eventBridgeJavaScriptToInject - injectionPoint: WebEngineScript.DocumentCreation - worldId: WebEngineScript.MainWorld - } + profile: HFWebEngineProfile; - // detects when to raise and lower virtual keyboard - WebEngineScript { - id: raiseAndLowerKeyboard - injectionPoint: WebEngineScript.Deferred - sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js" - worldId: WebEngineScript.MainWorld - } + property string userScriptUrl: "" - // User script. - WebEngineScript { - id: userScript - sourceUrl: webview.userScriptUrl - injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. - worldId: WebEngineScript.MainWorld - } - - property string urlTag: "noDownload=false"; - userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - - property string newUrl: "" - - Component.onCompleted: { - webChannel.registerObject("eventBridge", eventBridge); - webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); - // 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); - }); - } - - onFeaturePermissionRequested: { - grantFeaturePermission(securityOrigin, feature, true); - } - - onUrlChanged: { - // Record history, skipping null and duplicate items. - var urlString = url + ""; - urlString = urlString.replace(/\//g, "%2F"); // Consistent representation of "/"s to avoid false differences. - if (urlString.length > 0 && (historyIndex === -1 || urlString !== history[historyIndex])) { - historyIndex++; - history = history.slice(0, historyIndex); - history.push(urlString); + // creates a global EventBridge object. + WebEngineScript { + id: createGlobalEventBridge + sourceCode: eventBridgeJavaScriptToInject + injectionPoint: WebEngineScript.DocumentCreation + worldId: WebEngineScript.MainWorld } - } - 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(); - } + // 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 + } + + property string urlTag: "noDownload=false"; + userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] + + property string newUrl: "" + + Component.onCompleted: { + webChannel.registerObject("eventBridge", eventBridge); + webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); + // 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); + }); + } + + onFeaturePermissionRequested: { + grantFeaturePermission(securityOrigin, feature, true); + } + + onUrlChanged: { + // Record history, skipping null and duplicate items. + var urlString = url + ""; + urlString = urlString.replace(/\//g, "%2F"); // Consistent representation of "/"s to avoid false differences. + if (urlString.length > 0 && (historyIndex === -1 || urlString !== history[historyIndex])) { + historyIndex++; + history = history.slice(0, historyIndex); + history.push(urlString); } } - if (WebEngineView.LoadFailedStatus == loadRequest.status) { - console.log(" Tablet WebEngineView failed to load url: " + loadRequest.url.toString()); + 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(); + } + } + } + + if (WebEngineView.LoadFailedStatus == loadRequest.status) { + console.log(" Tablet WebEngineView failed to load url: " + loadRequest.url.toString()); + } + + if (WebEngineView.LoadSucceededStatus == loadRequest.status) { + flick.contentWidth = Math.max(contentsSize.width, flick.width) + flick.contentHeight = Math.max(contentsSize.height, flick.height) + webview.forceActiveFocus(); + } } - if (WebEngineView.LoadSucceededStatus == loadRequest.status) { - webview.forceActiveFocus(); + onNewViewRequested: { + request.openIn(webview); } - } - - onNewViewRequested: { - request.openIn(webview); - } - HiFiControls.WebSpinner { } + HiFiControls.WebSpinner { } + } } HiFiControls.Keyboard { diff --git a/interface/resources/qml/controls/WebView.qml b/interface/resources/qml/controls/WebView.qml index 3f2ac6363b..2013de4ef9 100644 --- a/interface/resources/qml/controls/WebView.qml +++ b/interface/resources/qml/controls/WebView.qml @@ -1,5 +1,5 @@ -import QtQuick 2.5 -import QtWebEngine 1.1 +import QtQuick 2.7 +import QtWebEngine 1.5 import QtWebChannel 1.0 import "../controls-uit" as HiFiControls @@ -23,89 +23,119 @@ Item { property alias viewProfile: root.profile - WebEngineView { - id: root - objectName: "webEngineView" + Flickable { + id: flick x: 0 y: 0 width: parent.width height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height - profile: HFWebEngineProfile; - property string userScriptUrl: "" + WebEngineView { + id: root + objectName: "webEngineView" + anchors.fill: parent - // creates a global EventBridge object. - WebEngineScript { - id: createGlobalEventBridge - sourceCode: eventBridgeJavaScriptToInject - injectionPoint: WebEngineScript.DocumentCreation - worldId: WebEngineScript.MainWorld - } + profile: HFWebEngineProfile; - // detects when to raise and lower virtual keyboard - WebEngineScript { - id: raiseAndLowerKeyboard - injectionPoint: WebEngineScript.Deferred - sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js" - worldId: WebEngineScript.MainWorld - } + property string userScriptUrl: "" - // User script. - WebEngineScript { - id: userScript - sourceUrl: root.userScriptUrl - injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. - worldId: WebEngineScript.MainWorld - } - - property string urlTag: "noDownload=false"; + // creates a global EventBridge object. + WebEngineScript { + id: createGlobalEventBridge + sourceCode: eventBridgeJavaScriptToInject + injectionPoint: WebEngineScript.DocumentCreation + worldId: WebEngineScript.MainWorld + } - userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] + // detects when to raise and lower virtual keyboard + WebEngineScript { + id: raiseAndLowerKeyboard + injectionPoint: WebEngineScript.Deferred + sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js" + worldId: WebEngineScript.MainWorld + } - property string newUrl: "" + // User script. + WebEngineScript { + id: userScript + sourceUrl: root.userScriptUrl + injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. + worldId: WebEngineScript.MainWorld + } - Component.onCompleted: { - webChannel.registerObject("eventBridge", eventBridge); - webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); - // 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); - }); + property string urlTag: "noDownload=false"; - } + userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - onFeaturePermissionRequested: { - grantFeaturePermission(securityOrigin, feature, true); - } + property string newUrl: "" - onLoadingChanged: { - keyboardRaised = false; - punctuationMode = false; - keyboard.resetShiftMode(false); + Component.onCompleted: { + webChannel.registerObject("eventBridge", eventBridge); + webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); + // 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); + }); - // Required to support clicking on "hifi://" links - if (WebEngineView.LoadStartedStatus == loadRequest.status) { - var url = loadRequest.url.toString(); - url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; - if (urlHandler.canHandleUrl(url)) { - if (urlHandler.handleUrl(url)) { - root.stop(); + } + + onFeaturePermissionRequested: { + grantFeaturePermission(securityOrigin, feature, true); + } + + onContentsSizeChanged: { + console.log("WebView contentsSize", contentsSize) + flick.contentWidth = Math.max(contentsSize.width, flick.width) + flick.contentHeight = Math.max(contentsSize.height, flick.height) + } + + 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(); + url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; + if (urlHandler.canHandleUrl(url)) { + if (urlHandler.handleUrl(url)) { + root.stop(); + } } } - } - } + if (WebEngineView.LoadSucceededStatus == loadRequest.status) { - onNewViewRequested:{ - // desktop is not defined for web-entities or tablet - if (typeof desktop !== "undefined") { - desktop.openBrowserWindow(request, profile); - } else { - tabletRoot.openBrowserWindow(request, profile); - } - } +// flick.contentWidth = Math.max(contentsSize.width, flick.width) +// flick.contentHeight = Math.max(contentsSize.height, flick.height) + root.runJavaScript( + "document.body.scrollHeight;", + function (i_actualPageHeight) { + flick.contentHeight = Math.max ( + i_actualPageHeight, flick.height); + }) + root.runJavaScript( + "document.body.scrollWidth;", + function (i_actualPageWidth) { + flick.contentWidth = Math.max ( + i_actualPageWidth, flick.width); + }) - HiFiControls.WebSpinner { } + } + } + + onNewViewRequested:{ + // desktop is not defined for web-entities or tablet + if (typeof desktop !== "undefined") { + desktop.openBrowserWindow(request, profile); + } else { + tabletRoot.openBrowserWindow(request, profile); + } + } + + HiFiControls.WebSpinner { } + } } HiFiControls.Keyboard { From 78e9bb6020bf874410f9c59dad5d37f84c128a85 Mon Sep 17 00:00:00 2001 From: vladest Date: Sun, 20 Aug 2017 23:06:23 +0200 Subject: [PATCH 02/13] almost works for marketplace --- .../qml/controls/TabletWebScreen.qml | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/interface/resources/qml/controls/TabletWebScreen.qml b/interface/resources/qml/controls/TabletWebScreen.qml index e1615e1442..4ed71282d4 100644 --- a/interface/resources/qml/controls/TabletWebScreen.qml +++ b/interface/resources/qml/controls/TabletWebScreen.qml @@ -91,15 +91,16 @@ Item { } onLoadingChanged: { - console.log("loading changed", loadRequest.status) keyboardRaised = false; punctuationMode = false; keyboard.resetShiftMode(false); // Required to support clicking on "hifi://" links if (WebEngineView.LoadStartedStatus == loadRequest.status) { - flick.contentWidth = -1 - flick.contentHeight = -1 + flick.contentWidth = 0 + flick.contentHeight = 0 + flick.contentX = 0 + flick.contentY = 0 var url = loadRequest.url.toString(); url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; if (urlHandler.canHandleUrl(url)) { @@ -109,24 +110,17 @@ Item { } } if (WebEngineView.LoadSucceededStatus == loadRequest.status) { -// flick.contentWidth = Math.max(contentsSize.width, flick.width) -// flick.contentHeight = Math.max(contentsSize.height, flick.height) - root.runJavaScript( - "document.body.scrollHeight;", + root.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { console.log("on reloaded documentElement.scrollHeigh:", i_actualPageHeight) -// flick.contentHeight = Math.max ( -// i_actualPageHeight, flick.height); + flick.contentHeight = Math.max(i_actualPageHeight, flick.height); }) - root.runJavaScript( - "document.body.scrollWidth;", + root.runJavaScript("document.body.scrollWidth;", function (i_actualPageWidth) { console.log("on reloaded documentElement.scrollWidth:", i_actualPageWidth) -// flick.contentWidth = Math.max ( -// i_actualPageWidth, flick.width); + flick.contentWidth = Math.max(i_actualPageWidth, flick.width); }) - console.log("on reloaded content size:", contentsSize) } } From 3be684b9732531fd43ce66daf0870d63ad97c50b Mon Sep 17 00:00:00 2001 From: vladest Date: Mon, 21 Aug 2017 16:31:25 +0200 Subject: [PATCH 03/13] Fixed spinner in center. Flicking only vertically --- .../resources/qml/controls-uit/WebSpinner.qml | 3 +- .../qml/controls/TabletWebScreen.qml | 60 +++++++++---------- .../resources/qml/controls/TabletWebView.qml | 29 +++++++-- 3 files changed, 53 insertions(+), 39 deletions(-) diff --git a/interface/resources/qml/controls-uit/WebSpinner.qml b/interface/resources/qml/controls-uit/WebSpinner.qml index 6323bff1a7..3e7ca6ec22 100644 --- a/interface/resources/qml/controls-uit/WebSpinner.qml +++ b/interface/resources/qml/controls-uit/WebSpinner.qml @@ -11,8 +11,9 @@ import QtQuick 2.5 AnimatedImage { + property Item webroot: parent source: "../../icons/loader-snake-64-w.gif" - visible: parent.loading && /^(http.*|)$/i.test(parent.url.toString()) + visible: webroot.loading && /^(http.*|)$/i.test(webroot.url.toString()) z: 10000 anchors { horizontalCenter: parent.horizontalCenter diff --git a/interface/resources/qml/controls/TabletWebScreen.qml b/interface/resources/qml/controls/TabletWebScreen.qml index 4ed71282d4..eeb211a16d 100644 --- a/interface/resources/qml/controls/TabletWebScreen.qml +++ b/interface/resources/qml/controls/TabletWebScreen.qml @@ -4,11 +4,12 @@ import QtWebChannel 1.0 import "../controls-uit" as HiFiControls Item { - property alias url: root.url - property alias scriptURL: root.userScriptUrl - property alias canGoBack: root.canGoBack; - property var goBack: root.goBack; - property alias urlTag: root.urlTag + id: root + property alias url: webroot.url + property alias scriptURL: webroot.userScriptUrl + property alias canGoBack: webroot.canGoBack; + property var goBack: webroot.goBack; + property alias urlTag: webroot.urlTag property bool keyboardEnabled: true // FIXME - Keyboard HMD only: Default to false property bool keyboardRaised: false property bool punctuationMode: false @@ -21,17 +22,15 @@ Item { } */ - property alias viewProfile: root.profile + property alias viewProfile: webroot.profile Flickable { id: flick - x: 0 - y: 0 width: parent.width height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height WebEngineView { - id: root + id: webroot objectName: "webEngineView" anchors.fill: parent @@ -58,7 +57,7 @@ Item { // User script. WebEngineScript { id: userScript - sourceUrl: root.userScriptUrl + sourceUrl: webroot.userScriptUrl injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. worldId: WebEngineScript.MainWorld } @@ -69,21 +68,25 @@ Item { property string newUrl: "" + //disable popup + onContextMenuRequested: { + request.accepted = true; + } + onContentsSizeChanged: { - console.log("WebView contentsSize", contentsSize) - flick.contentWidth = Math.max(contentsSize.width, flick.width) - flick.contentHeight = Math.max(contentsSize.height, flick.height) + flick.contentHeight = Math.max(contentsSize.height, flick.height); + flick.contentWidth = flick.width } Component.onCompleted: { webChannel.registerObject("eventBridge", eventBridge); webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); // Ensure the JS from the web-engine makes it to our logging - root.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) { + webroot.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) { console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " + message); }); - root.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)"; + webroot.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)"; } onFeaturePermissionRequested: { @@ -99,28 +102,19 @@ Item { if (WebEngineView.LoadStartedStatus == loadRequest.status) { flick.contentWidth = 0 flick.contentHeight = 0 - flick.contentX = 0 - flick.contentY = 0 var url = loadRequest.url.toString(); url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; if (urlHandler.canHandleUrl(url)) { if (urlHandler.handleUrl(url)) { - root.stop(); + webroot.stop(); } } } if (WebEngineView.LoadSucceededStatus == loadRequest.status) { - root.runJavaScript("document.body.scrollHeight;", - function (i_actualPageHeight) { - console.log("on reloaded documentElement.scrollHeigh:", i_actualPageHeight) - flick.contentHeight = Math.max(i_actualPageHeight, flick.height); - }) - root.runJavaScript("document.body.scrollWidth;", - function (i_actualPageWidth) { - console.log("on reloaded documentElement.scrollWidth:", i_actualPageWidth) - - flick.contentWidth = Math.max(i_actualPageWidth, flick.width); - }) + webroot.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { + flick.contentHeight = Math.max(i_actualPageHeight, flick.height); + }) + flick.contentWidth = flick.width } } @@ -132,11 +126,14 @@ Item { tabletRoot.openBrowserWindow(request, profile); } } - - HiFiControls.WebSpinner { } } } + HiFiControls.WebSpinner { + anchors.centerIn: parent + webroot: webroot + } + HiFiControls.Keyboard { id: keyboard raised: parent.keyboardEnabled && parent.keyboardRaised @@ -147,5 +144,4 @@ Item { bottom: parent.bottom } } - } diff --git a/interface/resources/qml/controls/TabletWebView.qml b/interface/resources/qml/controls/TabletWebView.qml index 6fafab81a9..cf8cdb1773 100644 --- a/interface/resources/qml/controls/TabletWebView.qml +++ b/interface/resources/qml/controls/TabletWebView.qml @@ -138,8 +138,6 @@ Item { Flickable { id: flick - x: 0 - y: 0 width: parent.width height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height - web.headerHeight : parent.height - web.headerHeight anchors.top: buttons.bottom @@ -206,12 +204,23 @@ Item { } } + onContentsSizeChanged: { + flick.contentHeight = Math.max(contentsSize.height, flick.height); + flick.contentWidth = flick.width//Math.max(contentsSize.width, flick.width); + } + //disable popup + onContextMenuRequested: { + request.accepted = true; + } + onLoadingChanged: { keyboardRaised = false; punctuationMode = false; keyboard.resetShiftMode(false); // Required to support clicking on "hifi://" links if (WebEngineView.LoadStartedStatus == loadRequest.status) { + flick.contentWidth = 0 + flick.contentHeight = 0 var url = loadRequest.url.toString(); if (urlHandler.canHandleUrl(url)) { if (urlHandler.handleUrl(url)) { @@ -225,8 +234,13 @@ Item { } if (WebEngineView.LoadSucceededStatus == loadRequest.status) { - flick.contentWidth = Math.max(contentsSize.width, flick.width) - flick.contentHeight = Math.max(contentsSize.height, flick.height) + webroot.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { + flick.contentHeight = Math.max(i_actualPageHeight, flick.height); + }) +// webroot.runJavaScript("document.body.scrollWidth;", function (i_actualPageWidth) { + flick.contentWidth = flick.width//Math.max(i_actualPageWidth, flick.width); +// }) + webview.forceActiveFocus(); } } @@ -234,11 +248,14 @@ Item { onNewViewRequested: { request.openIn(webview); } - - HiFiControls.WebSpinner { } } } + HiFiControls.WebSpinner { + webroot: webview + anchors.centerIn: parent + } + HiFiControls.Keyboard { id: keyboard raised: parent.keyboardEnabled && parent.keyboardRaised From 9fd2a742a925d2fb973731b541345a351c23517e Mon Sep 17 00:00:00 2001 From: vladest Date: Mon, 21 Aug 2017 16:45:47 +0200 Subject: [PATCH 04/13] Fix QML warning. Fix AddressBar info scroll --- interface/resources/qml/controls/TabletWebView.qml | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/interface/resources/qml/controls/TabletWebView.qml b/interface/resources/qml/controls/TabletWebView.qml index cf8cdb1773..12e4a87438 100644 --- a/interface/resources/qml/controls/TabletWebView.qml +++ b/interface/resources/qml/controls/TabletWebView.qml @@ -11,8 +11,8 @@ import "." Item { id: web HifiConstants { id: hifi } - width: parent.width - height: parent.height + width: parent !== null ? parent.width : undefined + height: parent !== null ? parent.height : undefined property var parentStackItem: null property int headerHeight: 70 property string url @@ -206,7 +206,7 @@ Item { onContentsSizeChanged: { flick.contentHeight = Math.max(contentsSize.height, flick.height); - flick.contentWidth = flick.width//Math.max(contentsSize.width, flick.width); + flick.contentWidth = flick.width } //disable popup onContextMenuRequested: { @@ -234,12 +234,10 @@ Item { } if (WebEngineView.LoadSucceededStatus == loadRequest.status) { - webroot.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { + webview.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { flick.contentHeight = Math.max(i_actualPageHeight, flick.height); }) -// webroot.runJavaScript("document.body.scrollWidth;", function (i_actualPageWidth) { - flick.contentWidth = flick.width//Math.max(i_actualPageWidth, flick.width); -// }) + flick.contentWidth = flick.width webview.forceActiveFocus(); } From 43d3544a0d6fadabd387dfe8085e8ab5ff26ae45 Mon Sep 17 00:00:00 2001 From: vladest Date: Mon, 21 Aug 2017 17:07:24 +0200 Subject: [PATCH 05/13] Fix width of html pages in Create mode --- interface/resources/qml/controls/WebView.qml | 41 +++++++++----------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/interface/resources/qml/controls/WebView.qml b/interface/resources/qml/controls/WebView.qml index 2013de4ef9..91f204bd78 100644 --- a/interface/resources/qml/controls/WebView.qml +++ b/interface/resources/qml/controls/WebView.qml @@ -4,6 +4,9 @@ import QtWebChannel 1.0 import "../controls-uit" as HiFiControls Item { + width: parent !== null ? parent.width : undefined + height: parent !== null ? parent.height : undefined + property alias url: root.url property alias scriptURL: root.userScriptUrl property alias canGoBack: root.canGoBack; @@ -25,12 +28,9 @@ Item { Flickable { id: flick - x: 0 - y: 0 width: parent.width height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height - WebEngineView { id: root objectName: "webEngineView" @@ -86,9 +86,13 @@ Item { onContentsSizeChanged: { console.log("WebView contentsSize", contentsSize) - flick.contentWidth = Math.max(contentsSize.width, flick.width) + flick.contentWidth = flick.width flick.contentHeight = Math.max(contentsSize.height, flick.height) } + //disable popup + onContextMenuRequested: { + request.accepted = true; + } onLoadingChanged: { keyboardRaised = false; @@ -97,6 +101,8 @@ Item { // Required to support clicking on "hifi://" links if (WebEngineView.LoadStartedStatus == loadRequest.status) { + flick.contentWidth = 0 + flick.contentHeight = 0 var url = loadRequest.url.toString(); url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; if (urlHandler.canHandleUrl(url)) { @@ -106,22 +112,10 @@ Item { } } if (WebEngineView.LoadSucceededStatus == loadRequest.status) { - -// flick.contentWidth = Math.max(contentsSize.width, flick.width) -// flick.contentHeight = Math.max(contentsSize.height, flick.height) - root.runJavaScript( - "document.body.scrollHeight;", - function (i_actualPageHeight) { - flick.contentHeight = Math.max ( - i_actualPageHeight, flick.height); - }) - root.runJavaScript( - "document.body.scrollWidth;", - function (i_actualPageWidth) { - flick.contentWidth = Math.max ( - i_actualPageWidth, flick.width); - }) - + root.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { + flick.contentHeight = Math.max(i_actualPageHeight, flick.height); + }) + flick.contentWidth = flick.width } } @@ -133,11 +127,14 @@ Item { tabletRoot.openBrowserWindow(request, profile); } } - - HiFiControls.WebSpinner { } } } + HiFiControls.WebSpinner { + anchors.centerIn: parent + webroot: root + } + HiFiControls.Keyboard { id: keyboard raised: parent.keyboardEnabled && parent.keyboardRaised From c7fe845403720c3f175b8f1ca4deb6e8f24e328d Mon Sep 17 00:00:00 2001 From: vladest Date: Thu, 24 Aug 2017 21:35:47 +0200 Subject: [PATCH 06/13] Move common webview flickable code to separate core file --- interface/resources/qml/TabletBrowser.qml | 4 +- .../qml/controls-uit/BaseWebView.qml | 2 +- .../resources/qml/controls-uit/WebSpinner.qml | 6 +- .../qml/controls/TabletWebScreen.qml | 230 ++++++++------- .../resources/qml/controls/TabletWebView.qml | 271 ++++++++++-------- interface/resources/qml/controls/WebView.qml | 236 ++++++++------- 6 files changed, 409 insertions(+), 340 deletions(-) diff --git a/interface/resources/qml/TabletBrowser.qml b/interface/resources/qml/TabletBrowser.qml index 0b06a6e2a1..ce74ae8c6e 100644 --- a/interface/resources/qml/TabletBrowser.qml +++ b/interface/resources/qml/TabletBrowser.qml @@ -1,7 +1,7 @@ import QtQuick 2.5 import QtQuick.Controls 1.4 import QtWebChannel 1.0 -import QtWebEngine 1.2 +import QtWebEngine 1.5 import "controls" import "controls-uit" as HifiControls @@ -17,7 +17,7 @@ Item { height: 600 property variant permissionsBar: {'securityOrigin':'none','feature':'none'} property alias url: webview.url - property WebEngineView webView: webview + //property WebEngineView webView: webview property bool canGoBack: webview.canGoBack property bool canGoForward: webview.canGoForward diff --git a/interface/resources/qml/controls-uit/BaseWebView.qml b/interface/resources/qml/controls-uit/BaseWebView.qml index 3ca57f03bf..660f52d529 100644 --- a/interface/resources/qml/controls-uit/BaseWebView.qml +++ b/interface/resources/qml/controls-uit/BaseWebView.qml @@ -9,7 +9,7 @@ // import QtQuick 2.5 -import QtWebEngine 1.2 +import QtWebEngine 1.5 WebEngineView { id: root diff --git a/interface/resources/qml/controls-uit/WebSpinner.qml b/interface/resources/qml/controls-uit/WebSpinner.qml index 3e7ca6ec22..e8e01c4865 100644 --- a/interface/resources/qml/controls-uit/WebSpinner.qml +++ b/interface/resources/qml/controls-uit/WebSpinner.qml @@ -9,11 +9,13 @@ // import QtQuick 2.5 +import QtWebEngine 1.5 AnimatedImage { - property Item webroot: parent + property WebEngineView webview: parent source: "../../icons/loader-snake-64-w.gif" - visible: webroot.loading && /^(http.*|)$/i.test(webroot.url.toString()) + visible: webview.loading && /^(http.*|)$/i.test(webview.url.toString()) + playing: visible z: 10000 anchors { horizontalCenter: parent.horizontalCenter diff --git a/interface/resources/qml/controls/TabletWebScreen.qml b/interface/resources/qml/controls/TabletWebScreen.qml index eeb211a16d..665ce7ea27 100644 --- a/interface/resources/qml/controls/TabletWebScreen.qml +++ b/interface/resources/qml/controls/TabletWebScreen.qml @@ -1,6 +1,4 @@ import QtQuick 2.7 -import QtWebEngine 1.5 -import QtWebChannel 1.0 import "../controls-uit" as HiFiControls Item { @@ -8,7 +6,7 @@ Item { property alias url: webroot.url property alias scriptURL: webroot.userScriptUrl property alias canGoBack: webroot.canGoBack; - property var goBack: webroot.goBack; + property var goBack: webroot.webViewCore.goBack; property alias urlTag: webroot.urlTag property bool keyboardEnabled: true // FIXME - Keyboard HMD only: Default to false property bool keyboardRaised: false @@ -22,117 +20,139 @@ Item { } */ - property alias viewProfile: webroot.profile + property alias viewProfile: webroot.webViewCoreProfile - Flickable { - id: flick + FlickableWebViewCore { + id: webroot width: parent.width height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height - WebEngineView { - id: webroot - objectName: "webEngineView" - anchors.fill: parent + onLoadingChangedCallback: { + keyboardRaised = false; + punctuationMode = false; + keyboard.resetShiftMode(false); + } - profile: HFWebEngineProfile; - - 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: webroot.userScriptUrl - injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. - worldId: WebEngineScript.MainWorld - } - - property string urlTag: "noDownload=false"; - - userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - - property string newUrl: "" - - //disable popup - onContextMenuRequested: { - request.accepted = true; - } - - onContentsSizeChanged: { - flick.contentHeight = Math.max(contentsSize.height, flick.height); - flick.contentWidth = flick.width - } - - Component.onCompleted: { - webChannel.registerObject("eventBridge", eventBridge); - webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); - // Ensure the JS from the web-engine makes it to our logging - webroot.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) { - console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " + message); - }); - - webroot.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) { - flick.contentWidth = 0 - flick.contentHeight = 0 - var url = loadRequest.url.toString(); - url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; - if (urlHandler.canHandleUrl(url)) { - if (urlHandler.handleUrl(url)) { - webroot.stop(); - } - } - } - if (WebEngineView.LoadSucceededStatus == loadRequest.status) { - webroot.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { - flick.contentHeight = Math.max(i_actualPageHeight, flick.height); - }) - flick.contentWidth = flick.width - } - } - - onNewViewRequested:{ - // desktop is not defined for web-entities or tablet - if (typeof desktop !== "undefined") { - desktop.openBrowserWindow(request, profile); - } else { - tabletRoot.openBrowserWindow(request, profile); - } + onNewViewRequestedCallback: { + // desktop is not defined for web-entities or tablet + if (typeof desktop !== "undefined") { + desktop.openBrowserWindow(request, profile); + } else { + tabletRoot.openBrowserWindow(request, profile); } } + } - HiFiControls.WebSpinner { - anchors.centerIn: parent - webroot: webroot - } +// Flickable { +// id: flick +// width: parent.width +// height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height + +// WebEngineView { +// id: webroot +// objectName: "webEngineView" +// anchors.fill: parent + +// profile: HFWebEngineProfile; + +// 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: webroot.userScriptUrl +// injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. +// worldId: WebEngineScript.MainWorld +// } + +// property string urlTag: "noDownload=false"; + +// userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] + +// property string newUrl: "" + +// //disable popup +// onContextMenuRequested: { +// request.accepted = true; +// } + +// onContentsSizeChanged: { +// flick.contentHeight = Math.max(contentsSize.height, flick.height); +// flick.contentWidth = flick.width +// } + +// Component.onCompleted: { +// webChannel.registerObject("eventBridge", eventBridge); +// webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); +// // Ensure the JS from the web-engine makes it to our logging +// webroot.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) { +// console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " + message); +// }); + +// webroot.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) { +// flick.contentWidth = 0 +// flick.contentHeight = 0 +// var url = loadRequest.url.toString(); +// url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; +// if (urlHandler.canHandleUrl(url)) { +// if (urlHandler.handleUrl(url)) { +// webroot.stop(); +// } +// } +// } +// if (WebEngineView.LoadSucceededStatus == loadRequest.status) { +// webroot.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { +// flick.contentHeight = Math.max(i_actualPageHeight, flick.height); +// }) +// flick.contentWidth = flick.width +// } +// } + +// onNewViewRequested:{ +// // desktop is not defined for web-entities or tablet +// if (typeof desktop !== "undefined") { +// desktop.openBrowserWindow(request, profile); +// } else { +// tabletRoot.openBrowserWindow(request, profile); +// } +// } +// } +// } + +// HiFiControls.WebSpinner { +// anchors.centerIn: parent +// webroot: webroot +// } HiFiControls.Keyboard { id: keyboard diff --git a/interface/resources/qml/controls/TabletWebView.qml b/interface/resources/qml/controls/TabletWebView.qml index 12e4a87438..626773907c 100644 --- a/interface/resources/qml/controls/TabletWebView.qml +++ b/interface/resources/qml/controls/TabletWebView.qml @@ -1,15 +1,15 @@ import QtQuick 2.7 -import QtQuick.Controls 1.4 +//import QtQuick.Controls 1.4 import QtWebEngine 1.5 -import QtWebChannel 1.0 +//import QtWebChannel 1.0 import "../controls-uit" as HiFiControls import "../styles" as HifiStyles import "../styles-uit" -import "../" -import "." +//import "../" +//import "." Item { - id: web + id: root HifiConstants { id: hifi } width: parent !== null ? parent.width : undefined height: parent !== null ? parent.height : undefined @@ -21,8 +21,8 @@ Item { property bool keyboardRaised: false property bool punctuationMode: false property bool isDesktop: false - property alias webView: webview - property alias profile: webview.profile + property alias webView: web.webViewCore + property alias profile: web.webViewCoreProfile property bool remove: false property bool closeButtonVisible: true @@ -79,7 +79,7 @@ Item { color: hifi.colors.baseGray font.pixelSize: 12 verticalAlignment: Text.AlignLeft - text: webview.url + text: root.url anchors { top: nav.bottom horizontalCenter: parent.horizontalCenter; @@ -104,13 +104,13 @@ Item { function closeWebEngine() { if (remove) { - web.destroy(); + root.destroy(); return; } if (parentStackItem) { parentStackItem.pop(); } else { - web.visible = false; + root.visible = false; } } @@ -128,131 +128,160 @@ Item { } function loadUrl(url) { - webview.url = url - web.url = webview.url; + web.webViewCore.url = url + root.url = web.webViewCore.url; } onUrlChanged: { loadUrl(url); } - Flickable { - id: flick + FlickableWebViewCore { + id: web width: parent.width - height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height - web.headerHeight : parent.height - web.headerHeight + height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height - root.headerHeight : parent.height - root.headerHeight anchors.top: buttons.bottom - WebEngineView { - id: webview - objectName: "webEngineView" - anchors.fill: parent - - profile: HFWebEngineProfile; - - property string userScriptUrl: "" - - // creates a global EventBridge object. - WebEngineScript { - id: createGlobalEventBridge - sourceCode: eventBridgeJavaScriptToInject - injectionPoint: WebEngineScript.DocumentCreation - worldId: WebEngineScript.MainWorld + onUrlChanged: { + // Record history, skipping null and duplicate items. + var urlString = url + ""; + urlString = urlString.replace(/\//g, "%2F"); // Consistent representation of "/"s to avoid false differences. + if (urlString.length > 0 && (historyIndex === -1 || urlString !== history[historyIndex])) { + historyIndex++; + history = history.slice(0, historyIndex); + history.push(urlString); } + } - // detects when to raise and lower virtual keyboard - WebEngineScript { - id: raiseAndLowerKeyboard - injectionPoint: WebEngineScript.Deferred - sourceUrl: resourceDirectoryUrl + "/html/raiseAndLowerKeyboard.js" - worldId: WebEngineScript.MainWorld - } + onLoadingChangedCallback: { + keyboardRaised = false; + punctuationMode = false; + keyboard.resetShiftMode(false); + webViewCore.forceActiveFocus(); + } - // User script. - WebEngineScript { - id: userScript - sourceUrl: webview.userScriptUrl - injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. - worldId: WebEngineScript.MainWorld - } - - property string urlTag: "noDownload=false"; - userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - - property string newUrl: "" - - Component.onCompleted: { - webChannel.registerObject("eventBridge", eventBridge); - webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); - // 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); - }); - } - - onFeaturePermissionRequested: { - grantFeaturePermission(securityOrigin, feature, true); - } - - onUrlChanged: { - // Record history, skipping null and duplicate items. - var urlString = url + ""; - urlString = urlString.replace(/\//g, "%2F"); // Consistent representation of "/"s to avoid false differences. - if (urlString.length > 0 && (historyIndex === -1 || urlString !== history[historyIndex])) { - historyIndex++; - history = history.slice(0, historyIndex); - history.push(urlString); - } - } - - onContentsSizeChanged: { - flick.contentHeight = Math.max(contentsSize.height, flick.height); - flick.contentWidth = flick.width - } - //disable popup - onContextMenuRequested: { - request.accepted = true; - } - - onLoadingChanged: { - keyboardRaised = false; - punctuationMode = false; - keyboard.resetShiftMode(false); - // Required to support clicking on "hifi://" links - if (WebEngineView.LoadStartedStatus == loadRequest.status) { - flick.contentWidth = 0 - flick.contentHeight = 0 - var url = loadRequest.url.toString(); - if (urlHandler.canHandleUrl(url)) { - if (urlHandler.handleUrl(url)) { - root.stop(); - } - } - } - - if (WebEngineView.LoadFailedStatus == loadRequest.status) { - console.log(" Tablet WebEngineView failed to load url: " + loadRequest.url.toString()); - } - - if (WebEngineView.LoadSucceededStatus == loadRequest.status) { - webview.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { - flick.contentHeight = Math.max(i_actualPageHeight, flick.height); - }) - flick.contentWidth = flick.width - - webview.forceActiveFocus(); - } - } - - onNewViewRequested: { - request.openIn(webview); - } + onNewViewRequestedCallback: { + request.openIn(webViewCore); } } - HiFiControls.WebSpinner { - webroot: webview - anchors.centerIn: parent - } +// Flickable { +// id: flick +// width: parent.width +// height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height - web.headerHeight : parent.height - web.headerHeight +// anchors.top: buttons.bottom + +// WebEngineView { +// id: webview +// objectName: "webEngineView" +// anchors.fill: parent + +// profile: HFWebEngineProfile; + +// 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 +// } + +// property string urlTag: "noDownload=false"; +// userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] + +// property string newUrl: "" + +// Component.onCompleted: { +// webChannel.registerObject("eventBridge", eventBridge); +// webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); +// // 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); +// }); +// } + +// onFeaturePermissionRequested: { +// grantFeaturePermission(securityOrigin, feature, true); +// } + +// onUrlChanged: { +// // Record history, skipping null and duplicate items. +// var urlString = url + ""; +// urlString = urlString.replace(/\//g, "%2F"); // Consistent representation of "/"s to avoid false differences. +// if (urlString.length > 0 && (historyIndex === -1 || urlString !== history[historyIndex])) { +// historyIndex++; +// history = history.slice(0, historyIndex); +// history.push(urlString); +// } +// } + +// onContentsSizeChanged: { +// flick.contentHeight = Math.max(contentsSize.height, flick.height); +// flick.contentWidth = flick.width +// } +// //disable popup +// onContextMenuRequested: { +// request.accepted = true; +// } + +// onLoadingChanged: { +// keyboardRaised = false; +// punctuationMode = false; +// keyboard.resetShiftMode(false); +// // Required to support clicking on "hifi://" links +// if (WebEngineView.LoadStartedStatus == loadRequest.status) { +// flick.contentWidth = 0 +// flick.contentHeight = 0 +// var url = loadRequest.url.toString(); +// if (urlHandler.canHandleUrl(url)) { +// if (urlHandler.handleUrl(url)) { +// root.stop(); +// } +// } +// } + +// if (WebEngineView.LoadFailedStatus == loadRequest.status) { +// console.log(" Tablet WebEngineView failed to load url: " + loadRequest.url.toString()); +// } + +// if (WebEngineView.LoadSucceededStatus == loadRequest.status) { +// webview.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { +// flick.contentHeight = Math.max(i_actualPageHeight, flick.height); +// }) +// flick.contentWidth = flick.width + +// webview.forceActiveFocus(); +// } +// } + +// onNewViewRequested: { +// request.openIn(webview); +// } +// } +// } + +// HiFiControls.WebSpinner { +// webview: webview +// anchors.centerIn: parent +// } HiFiControls.Keyboard { id: keyboard @@ -267,7 +296,7 @@ Item { } Component.onCompleted: { - web.isDesktop = (typeof desktop !== "undefined"); + root.isDesktop = (typeof desktop !== "undefined"); keyboardEnabled = HMD.active; } diff --git a/interface/resources/qml/controls/WebView.qml b/interface/resources/qml/controls/WebView.qml index 91f204bd78..b4ec41ec9c 100644 --- a/interface/resources/qml/controls/WebView.qml +++ b/interface/resources/qml/controls/WebView.qml @@ -1,17 +1,15 @@ import QtQuick 2.7 -import QtWebEngine 1.5 -import QtWebChannel 1.0 import "../controls-uit" as HiFiControls Item { width: parent !== null ? parent.width : undefined height: parent !== null ? parent.height : undefined - property alias url: root.url - property alias scriptURL: root.userScriptUrl - property alias canGoBack: root.canGoBack; - property var goBack: root.goBack; - property alias urlTag: root.urlTag + property alias url: webroot.url + property alias scriptURL: webroot.userScriptUrl + property alias canGoBack: webroot.canGoBack; + property var goBack: webroot.webViewCore.goBack; + property alias urlTag: webroot.urlTag property bool keyboardEnabled: true // FIXME - Keyboard HMD only: Default to false property bool keyboardRaised: false property bool punctuationMode: false @@ -24,116 +22,137 @@ Item { } */ - property alias viewProfile: root.profile + property alias viewProfile: webroot.webViewCoreProfile - Flickable { - id: flick + FlickableWebViewCore { + id: webroot width: parent.width height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height - WebEngineView { - id: root - objectName: "webEngineView" - anchors.fill: parent + onLoadingChangedCallback: { + keyboardRaised = false; + punctuationMode = false; + keyboard.resetShiftMode(false); + } - profile: HFWebEngineProfile; - - 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 - } - - property string urlTag: "noDownload=false"; - - userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - - property string newUrl: "" - - Component.onCompleted: { - webChannel.registerObject("eventBridge", eventBridge); - webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); - // 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); - }); - - } - - onFeaturePermissionRequested: { - grantFeaturePermission(securityOrigin, feature, true); - } - - onContentsSizeChanged: { - console.log("WebView contentsSize", contentsSize) - flick.contentWidth = flick.width - flick.contentHeight = Math.max(contentsSize.height, flick.height) - } - //disable popup - onContextMenuRequested: { - request.accepted = true; - } - - onLoadingChanged: { - keyboardRaised = false; - punctuationMode = false; - keyboard.resetShiftMode(false); - - // Required to support clicking on "hifi://" links - if (WebEngineView.LoadStartedStatus == loadRequest.status) { - flick.contentWidth = 0 - flick.contentHeight = 0 - var url = loadRequest.url.toString(); - url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; - if (urlHandler.canHandleUrl(url)) { - if (urlHandler.handleUrl(url)) { - root.stop(); - } - } - } - if (WebEngineView.LoadSucceededStatus == loadRequest.status) { - root.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { - flick.contentHeight = Math.max(i_actualPageHeight, flick.height); - }) - flick.contentWidth = flick.width - } - } - - onNewViewRequested:{ - // desktop is not defined for web-entities or tablet - if (typeof desktop !== "undefined") { - desktop.openBrowserWindow(request, profile); - } else { - tabletRoot.openBrowserWindow(request, profile); - } + onNewViewRequestedCallback: { + // desktop is not defined for web-entities or tablet + if (typeof desktop !== "undefined") { + desktop.openBrowserWindow(request, profile); + } else { + tabletRoot.openBrowserWindow(request, profile); } } } - HiFiControls.WebSpinner { - anchors.centerIn: parent - webroot: root - } +// Flickable { +// id: flick +// width: parent.width +// height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height + +// WebEngineView { +// id: root +// objectName: "webEngineView" +// anchors.fill: parent + +// profile: HFWebEngineProfile; + +// 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 +// } + +// property string urlTag: "noDownload=false"; + +// userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] + +// property string newUrl: "" + +// Component.onCompleted: { +// webChannel.registerObject("eventBridge", eventBridge); +// webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); +// // 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); +// }); + +// } + +// onFeaturePermissionRequested: { +// grantFeaturePermission(securityOrigin, feature, true); +// } + +// onContentsSizeChanged: { +// console.log("WebView contentsSize", contentsSize) +// flick.contentWidth = flick.width +// flick.contentHeight = Math.max(contentsSize.height, flick.height) +// } +// //disable popup +// onContextMenuRequested: { +// request.accepted = true; +// } + +// onLoadingChanged: { +// keyboardRaised = false; +// punctuationMode = false; +// keyboard.resetShiftMode(false); + +// // Required to support clicking on "hifi://" links +// if (WebEngineView.LoadStartedStatus == loadRequest.status) { +// flick.contentWidth = 0 +// flick.contentHeight = 0 +// var url = loadRequest.url.toString(); +// url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; +// if (urlHandler.canHandleUrl(url)) { +// if (urlHandler.handleUrl(url)) { +// root.stop(); +// } +// } +// } +// if (WebEngineView.LoadSucceededStatus == loadRequest.status) { +// root.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { +// flick.contentHeight = Math.max(i_actualPageHeight, flick.height); +// }) +// flick.contentWidth = flick.width +// } +// } + +// onNewViewRequested:{ +// // desktop is not defined for web-entities or tablet +// if (typeof desktop !== "undefined") { +// desktop.openBrowserWindow(request, profile); +// } else { +// tabletRoot.openBrowserWindow(request, profile); +// } +// } +// } +// } + +// HiFiControls.WebSpinner { +// anchors.centerIn: parent +// webroot: root +// } HiFiControls.Keyboard { id: keyboard @@ -145,5 +164,4 @@ Item { bottom: parent.bottom } } - } From d6079e70fbcd4a1a708cbb624a94199ad7fb1a00 Mon Sep 17 00:00:00 2001 From: vladest Date: Thu, 24 Aug 2017 23:44:53 +0200 Subject: [PATCH 07/13] Binding to width to make sure it will follow Tablet with when rotating --- .../qml/controls/FlickableWebViewCore.qml | 124 ++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 interface/resources/qml/controls/FlickableWebViewCore.qml diff --git a/interface/resources/qml/controls/FlickableWebViewCore.qml b/interface/resources/qml/controls/FlickableWebViewCore.qml new file mode 100644 index 0000000000..7706eb1102 --- /dev/null +++ b/interface/resources/qml/controls/FlickableWebViewCore.qml @@ -0,0 +1,124 @@ +import QtQuick 2.7 +import QtWebEngine 1.5 +import QtWebChannel 1.0 + +Flickable { + id: flick + + property alias url: _webview.url + property alias canGoBack: _webview.canGoBack + property alias webViewCore: _webview + property alias webViewCoreProfile: _webview.profile + + property string userScriptUrl: "" + property string urlTag: "noDownload=false"; + + signal newViewRequestedCallback(var request) + signal loadingChangedCallback(var loadRequest) + + function onLoadingChanged(loadRequest) { + // Required to support clicking on "hifi://" links + if (WebEngineView.LoadStartedStatus === loadRequest.status) { + flick.contentWidth = 0 + flick.contentHeight = 0 + var url = loadRequest.url.toString(); + if (urlHandler.canHandleUrl(url)) { + if (urlHandler.handleUrl(url)) { + _webview.stop(); + } + } + } + + if (WebEngineView.LoadFailedStatus === loadRequest.status) { + console.log(" Tablet WebEngineView failed to load url: " + loadRequest.url.toString()); + } + + if (WebEngineView.LoadSucceededStatus === loadRequest.status) { + _webview.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { + flick.contentHeight = Math.max(i_actualPageHeight, flick.height); + }) + flick.contentWidth = flick.width + } + } + + WebEngineView { + id: _webview + + height: parent.height + + profile: HFWebEngineProfile; + + // 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: flick.userScriptUrl + injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. + worldId: WebEngineScript.MainWorld + } + + userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] + + property string newUrl: "" + + Component.onCompleted: { + width = Qt.binding(function() { return flick.width; }); + + webChannel.registerObject("eventBridge", eventBridge); + webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); + // 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 Chrome (HighFidelityInterface)"; + + } + + onFeaturePermissionRequested: { + grantFeaturePermission(securityOrigin, feature, true); + } + + onContentsSizeChanged: { + flick.contentHeight = Math.max(contentsSize.height, flick.height); + flick.contentWidth = flick.width + } + //disable popup + onContextMenuRequested: { + request.accepted = true; + } + + onNewViewRequested: { + newViewRequestedCallback(request) + } + + onLoadingChanged: { + flick.onLoadingChanged(loadRequest) + loadingChangedCallback(loadRequest) + } + } + + AnimatedImage { + //anchoring doesnt works here when changing content size + x: flick.width/2 - width/2 + y: flick.height/2 - height/2 + source: "../../icons/loader-snake-64-w.gif" + visible: _webview.loading && /^(http.*|)$/i.test(_webview.url.toString()) + playing: visible + z: 10000 + } +} From 36879f83eb6df2a0337a6d45f0f0e5ef8d3334a7 Mon Sep 17 00:00:00 2001 From: vladest Date: Fri, 25 Aug 2017 15:44:07 +0200 Subject: [PATCH 08/13] Added scroll bar. Cleanup --- .../qml/controls/FlickableWebViewCore.qml | 19 +++ .../qml/controls/TabletWebScreen.qml | 110 ---------------- .../resources/qml/controls/TabletWebView.qml | 118 ------------------ interface/resources/qml/controls/WebView.qml | 109 ---------------- 4 files changed, 19 insertions(+), 337 deletions(-) diff --git a/interface/resources/qml/controls/FlickableWebViewCore.qml b/interface/resources/qml/controls/FlickableWebViewCore.qml index 7706eb1102..91e3f2482c 100644 --- a/interface/resources/qml/controls/FlickableWebViewCore.qml +++ b/interface/resources/qml/controls/FlickableWebViewCore.qml @@ -2,6 +2,10 @@ import QtQuick 2.7 import QtWebEngine 1.5 import QtWebChannel 1.0 +import QtQuick.Controls 2.2 + +import "../styles-uit" as StylesUIt + Flickable { id: flick @@ -16,6 +20,21 @@ Flickable { signal newViewRequestedCallback(var request) signal loadingChangedCallback(var loadRequest) + StylesUIt.HifiConstants { + id: hifi + } + + ScrollBar.vertical: ScrollBar { + id: scrollBar + + contentItem: Rectangle { + opacity: 0.75 + implicitWidth: hifi.dimensions.scrollbarHandleWidth + radius: height / 2 + color: hifi.colors.tableScrollHandleDark + } + } + function onLoadingChanged(loadRequest) { // Required to support clicking on "hifi://" links if (WebEngineView.LoadStartedStatus === loadRequest.status) { diff --git a/interface/resources/qml/controls/TabletWebScreen.qml b/interface/resources/qml/controls/TabletWebScreen.qml index 665ce7ea27..e06ff51569 100644 --- a/interface/resources/qml/controls/TabletWebScreen.qml +++ b/interface/resources/qml/controls/TabletWebScreen.qml @@ -44,116 +44,6 @@ Item { } -// Flickable { -// id: flick -// width: parent.width -// height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height - -// WebEngineView { -// id: webroot -// objectName: "webEngineView" -// anchors.fill: parent - -// profile: HFWebEngineProfile; - -// 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: webroot.userScriptUrl -// injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. -// worldId: WebEngineScript.MainWorld -// } - -// property string urlTag: "noDownload=false"; - -// userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - -// property string newUrl: "" - -// //disable popup -// onContextMenuRequested: { -// request.accepted = true; -// } - -// onContentsSizeChanged: { -// flick.contentHeight = Math.max(contentsSize.height, flick.height); -// flick.contentWidth = flick.width -// } - -// Component.onCompleted: { -// webChannel.registerObject("eventBridge", eventBridge); -// webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); -// // Ensure the JS from the web-engine makes it to our logging -// webroot.javaScriptConsoleMessage.connect(function(level, message, lineNumber, sourceID) { -// console.log("Web Entity JS message: " + sourceID + " " + lineNumber + " " + message); -// }); - -// webroot.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) { -// flick.contentWidth = 0 -// flick.contentHeight = 0 -// var url = loadRequest.url.toString(); -// url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; -// if (urlHandler.canHandleUrl(url)) { -// if (urlHandler.handleUrl(url)) { -// webroot.stop(); -// } -// } -// } -// if (WebEngineView.LoadSucceededStatus == loadRequest.status) { -// webroot.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { -// flick.contentHeight = Math.max(i_actualPageHeight, flick.height); -// }) -// flick.contentWidth = flick.width -// } -// } - -// onNewViewRequested:{ -// // desktop is not defined for web-entities or tablet -// if (typeof desktop !== "undefined") { -// desktop.openBrowserWindow(request, profile); -// } else { -// tabletRoot.openBrowserWindow(request, profile); -// } -// } -// } -// } - -// HiFiControls.WebSpinner { -// anchors.centerIn: parent -// webroot: webroot -// } - HiFiControls.Keyboard { id: keyboard raised: parent.keyboardEnabled && parent.keyboardRaised diff --git a/interface/resources/qml/controls/TabletWebView.qml b/interface/resources/qml/controls/TabletWebView.qml index 626773907c..9bb5000d7e 100644 --- a/interface/resources/qml/controls/TabletWebView.qml +++ b/interface/resources/qml/controls/TabletWebView.qml @@ -165,124 +165,6 @@ Item { } } -// Flickable { -// id: flick -// width: parent.width -// height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height - web.headerHeight : parent.height - web.headerHeight -// anchors.top: buttons.bottom - -// WebEngineView { -// id: webview -// objectName: "webEngineView" -// anchors.fill: parent - -// profile: HFWebEngineProfile; - -// 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 -// } - -// property string urlTag: "noDownload=false"; -// userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - -// property string newUrl: "" - -// Component.onCompleted: { -// webChannel.registerObject("eventBridge", eventBridge); -// webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); -// // 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); -// }); -// } - -// onFeaturePermissionRequested: { -// grantFeaturePermission(securityOrigin, feature, true); -// } - -// onUrlChanged: { -// // Record history, skipping null and duplicate items. -// var urlString = url + ""; -// urlString = urlString.replace(/\//g, "%2F"); // Consistent representation of "/"s to avoid false differences. -// if (urlString.length > 0 && (historyIndex === -1 || urlString !== history[historyIndex])) { -// historyIndex++; -// history = history.slice(0, historyIndex); -// history.push(urlString); -// } -// } - -// onContentsSizeChanged: { -// flick.contentHeight = Math.max(contentsSize.height, flick.height); -// flick.contentWidth = flick.width -// } -// //disable popup -// onContextMenuRequested: { -// request.accepted = true; -// } - -// onLoadingChanged: { -// keyboardRaised = false; -// punctuationMode = false; -// keyboard.resetShiftMode(false); -// // Required to support clicking on "hifi://" links -// if (WebEngineView.LoadStartedStatus == loadRequest.status) { -// flick.contentWidth = 0 -// flick.contentHeight = 0 -// var url = loadRequest.url.toString(); -// if (urlHandler.canHandleUrl(url)) { -// if (urlHandler.handleUrl(url)) { -// root.stop(); -// } -// } -// } - -// if (WebEngineView.LoadFailedStatus == loadRequest.status) { -// console.log(" Tablet WebEngineView failed to load url: " + loadRequest.url.toString()); -// } - -// if (WebEngineView.LoadSucceededStatus == loadRequest.status) { -// webview.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { -// flick.contentHeight = Math.max(i_actualPageHeight, flick.height); -// }) -// flick.contentWidth = flick.width - -// webview.forceActiveFocus(); -// } -// } - -// onNewViewRequested: { -// request.openIn(webview); -// } -// } -// } - -// HiFiControls.WebSpinner { -// webview: webview -// anchors.centerIn: parent -// } - HiFiControls.Keyboard { id: keyboard raised: parent.keyboardEnabled && parent.keyboardRaised diff --git a/interface/resources/qml/controls/WebView.qml b/interface/resources/qml/controls/WebView.qml index b4ec41ec9c..bf4b40e7c5 100644 --- a/interface/resources/qml/controls/WebView.qml +++ b/interface/resources/qml/controls/WebView.qml @@ -45,115 +45,6 @@ Item { } } -// Flickable { -// id: flick -// width: parent.width -// height: keyboardEnabled && keyboardRaised ? parent.height - keyboard.height : parent.height - -// WebEngineView { -// id: root -// objectName: "webEngineView" -// anchors.fill: parent - -// profile: HFWebEngineProfile; - -// 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 -// } - -// property string urlTag: "noDownload=false"; - -// userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - -// property string newUrl: "" - -// Component.onCompleted: { -// webChannel.registerObject("eventBridge", eventBridge); -// webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); -// // 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); -// }); - -// } - -// onFeaturePermissionRequested: { -// grantFeaturePermission(securityOrigin, feature, true); -// } - -// onContentsSizeChanged: { -// console.log("WebView contentsSize", contentsSize) -// flick.contentWidth = flick.width -// flick.contentHeight = Math.max(contentsSize.height, flick.height) -// } -// //disable popup -// onContextMenuRequested: { -// request.accepted = true; -// } - -// onLoadingChanged: { -// keyboardRaised = false; -// punctuationMode = false; -// keyboard.resetShiftMode(false); - -// // Required to support clicking on "hifi://" links -// if (WebEngineView.LoadStartedStatus == loadRequest.status) { -// flick.contentWidth = 0 -// flick.contentHeight = 0 -// var url = loadRequest.url.toString(); -// url = (url.indexOf("?") >= 0) ? url + urlTag : url + "?" + urlTag; -// if (urlHandler.canHandleUrl(url)) { -// if (urlHandler.handleUrl(url)) { -// root.stop(); -// } -// } -// } -// if (WebEngineView.LoadSucceededStatus == loadRequest.status) { -// root.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { -// flick.contentHeight = Math.max(i_actualPageHeight, flick.height); -// }) -// flick.contentWidth = flick.width -// } -// } - -// onNewViewRequested:{ -// // desktop is not defined for web-entities or tablet -// if (typeof desktop !== "undefined") { -// desktop.openBrowserWindow(request, profile); -// } else { -// tabletRoot.openBrowserWindow(request, profile); -// } -// } -// } -// } - -// HiFiControls.WebSpinner { -// anchors.centerIn: parent -// webroot: root -// } - HiFiControls.Keyboard { id: keyboard raised: parent.keyboardEnabled && parent.keyboardRaised From e38075f7bad8e708a06b4d778411ac6d5c639240 Mon Sep 17 00:00:00 2001 From: vladest Date: Mon, 28 Aug 2017 16:27:33 +0200 Subject: [PATCH 09/13] Disable web engine scrollbars --- interface/resources/qml/controls/FlickableWebViewCore.qml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/interface/resources/qml/controls/FlickableWebViewCore.qml b/interface/resources/qml/controls/FlickableWebViewCore.qml index 91e3f2482c..24d9cb9184 100644 --- a/interface/resources/qml/controls/FlickableWebViewCore.qml +++ b/interface/resources/qml/controls/FlickableWebViewCore.qml @@ -53,6 +53,9 @@ Flickable { } if (WebEngineView.LoadSucceededStatus === loadRequest.status) { + //disable Chromium's scroll bars + _webview.runJavaScript("document.body.style.overflow = 'hidden';"); + //calculate page height _webview.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { flick.contentHeight = Math.max(i_actualPageHeight, flick.height); }) From 88b045e3a97b71e8703807498b246898fafc88cb Mon Sep 17 00:00:00 2001 From: vladest Date: Wed, 30 Aug 2017 20:17:11 +0200 Subject: [PATCH 10/13] Switched off overboundings. More accurate calculate height --- .../qml/controls/FlickableWebViewCore.qml | 34 ++++++++++++++++--- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/interface/resources/qml/controls/FlickableWebViewCore.qml b/interface/resources/qml/controls/FlickableWebViewCore.qml index 24d9cb9184..0460b5b16a 100644 --- a/interface/resources/qml/controls/FlickableWebViewCore.qml +++ b/interface/resources/qml/controls/FlickableWebViewCore.qml @@ -20,12 +20,23 @@ Flickable { signal newViewRequestedCallback(var request) signal loadingChangedCallback(var loadRequest) + boundsBehavior: Flickable.StopAtBounds + StylesUIt.HifiConstants { id: hifi } + onHeightChanged: { + if (height > 0) { + //reload page since window dimentions changed, + //so web engine should recalculate page render dimentions + reloadTimer.start() + } + } + ScrollBar.vertical: ScrollBar { id: scrollBar + visible: flick.contentHeight > flick.height contentItem: Rectangle { opacity: 0.75 @@ -36,10 +47,11 @@ Flickable { } function onLoadingChanged(loadRequest) { - // Required to support clicking on "hifi://" links if (WebEngineView.LoadStartedStatus === loadRequest.status) { - flick.contentWidth = 0 - flick.contentHeight = 0 + flick.contentWidth = flick.width + flick.contentHeight = flick.height + + // Required to support clicking on "hifi://" links var url = loadRequest.url.toString(); if (urlHandler.canHandleUrl(url)) { if (urlHandler.handleUrl(url)) { @@ -57,12 +69,25 @@ Flickable { _webview.runJavaScript("document.body.style.overflow = 'hidden';"); //calculate page height _webview.runJavaScript("document.body.scrollHeight;", function (i_actualPageHeight) { - flick.contentHeight = Math.max(i_actualPageHeight, flick.height); + if (i_actualPageHeight !== undefined) { + flick.contentHeight = i_actualPageHeight + } else { + flick.contentHeight = flick.height; + } }) flick.contentWidth = flick.width } } + Timer { + id: reloadTimer + interval: 100 + repeat: false + onTriggered: { + _webview.reload() + } + } + WebEngineView { id: _webview @@ -100,7 +125,6 @@ Flickable { Component.onCompleted: { width = Qt.binding(function() { return flick.width; }); - webChannel.registerObject("eventBridge", eventBridge); webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); // Ensure the JS from the web-engine makes it to our logging From a80d9a22df59ad1692713f3214f3c0f90811967f Mon Sep 17 00:00:00 2001 From: vladest Date: Thu, 31 Aug 2017 12:20:20 +0200 Subject: [PATCH 11/13] Added option to disable flickable for web view --- interface/resources/qml/controls/WebView.qml | 1 + interface/resources/qml/hifi/tablet/EditTabView.qml | 2 ++ 2 files changed, 3 insertions(+) diff --git a/interface/resources/qml/controls/WebView.qml b/interface/resources/qml/controls/WebView.qml index bf4b40e7c5..c38c5df9cf 100644 --- a/interface/resources/qml/controls/WebView.qml +++ b/interface/resources/qml/controls/WebView.qml @@ -13,6 +13,7 @@ Item { property bool keyboardEnabled: true // FIXME - Keyboard HMD only: Default to false property bool keyboardRaised: false property bool punctuationMode: false + property alias flickable: webroot.interactive // FIXME - Keyboard HMD only: Make Interface either set keyboardRaised property directly in OffscreenQmlSurface // or provide HMDinfo object to QML in RenderableWebEntityItem and do the following. diff --git a/interface/resources/qml/hifi/tablet/EditTabView.qml b/interface/resources/qml/hifi/tablet/EditTabView.qml index e94325f399..5379e88f8d 100644 --- a/interface/resources/qml/hifi/tablet/EditTabView.qml +++ b/interface/resources/qml/hifi/tablet/EditTabView.qml @@ -181,6 +181,7 @@ TabView { WebView { id: entityListToolWebView url: Paths.defaultScripts + "/system/html/entityList.html" + flickable: false anchors.fill: parent enabled: true } @@ -209,6 +210,7 @@ TabView { WebView { id: gridControlsWebView url: Paths.defaultScripts + "/system/html/gridControls.html" + flickable: false anchors.fill: parent enabled: true } From 6faab9fb1c8360dec61d76d24dd43efe466a5c07 Mon Sep 17 00:00:00 2001 From: vladest Date: Thu, 31 Aug 2017 19:21:38 +0200 Subject: [PATCH 12/13] Switch flickable on by default for list and grid tabs --- interface/resources/qml/hifi/tablet/EditTabView.qml | 2 -- 1 file changed, 2 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/EditTabView.qml b/interface/resources/qml/hifi/tablet/EditTabView.qml index 5379e88f8d..e94325f399 100644 --- a/interface/resources/qml/hifi/tablet/EditTabView.qml +++ b/interface/resources/qml/hifi/tablet/EditTabView.qml @@ -181,7 +181,6 @@ TabView { WebView { id: entityListToolWebView url: Paths.defaultScripts + "/system/html/entityList.html" - flickable: false anchors.fill: parent enabled: true } @@ -210,7 +209,6 @@ TabView { WebView { id: gridControlsWebView url: Paths.defaultScripts + "/system/html/gridControls.html" - flickable: false anchors.fill: parent enabled: true } From 85a3771a98ff790717c2c6d5139e3f472b85b98c Mon Sep 17 00:00:00 2001 From: vladest Date: Tue, 5 Sep 2017 22:19:38 +0200 Subject: [PATCH 13/13] Remove commented out code --- interface/resources/qml/TabletBrowser.qml | 5 ++--- interface/resources/qml/controls/TabletWebView.qml | 4 ---- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/interface/resources/qml/TabletBrowser.qml b/interface/resources/qml/TabletBrowser.qml index ce74ae8c6e..8dbcc8f4f8 100644 --- a/interface/resources/qml/TabletBrowser.qml +++ b/interface/resources/qml/TabletBrowser.qml @@ -13,11 +13,11 @@ 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 bool canGoBack: webview.canGoBack property bool canGoForward: webview.canGoForward @@ -123,5 +123,4 @@ Item { break; } } - } diff --git a/interface/resources/qml/controls/TabletWebView.qml b/interface/resources/qml/controls/TabletWebView.qml index 9bb5000d7e..23143db3ba 100644 --- a/interface/resources/qml/controls/TabletWebView.qml +++ b/interface/resources/qml/controls/TabletWebView.qml @@ -1,12 +1,8 @@ import QtQuick 2.7 -//import QtQuick.Controls 1.4 import QtWebEngine 1.5 -//import QtWebChannel 1.0 import "../controls-uit" as HiFiControls import "../styles" as HifiStyles import "../styles-uit" -//import "../" -//import "." Item { id: root