From 320ab2e68211fc5753de3e1e3b9b4d74cc502db4 Mon Sep 17 00:00:00 2001 From: vladest Date: Thu, 26 Oct 2017 21:14:44 +0200 Subject: [PATCH] Rework using StackView. Now backward takes in account popups as well --- interface/resources/qml/hifi/WebBrowser.qml | 356 ++++++++++---------- 1 file changed, 174 insertions(+), 182 deletions(-) diff --git a/interface/resources/qml/hifi/WebBrowser.qml b/interface/resources/qml/hifi/WebBrowser.qml index c96d05d6a7..79932dbcdd 100644 --- a/interface/resources/qml/hifi/WebBrowser.qml +++ b/interface/resources/qml/hifi/WebBrowser.qml @@ -13,6 +13,7 @@ import QtQuick 2.7 import QtQuick.Controls 2.2 as QQControls import QtQuick.Layouts 1.3 +import QtGraphicalEffects 1.0 import QtWebEngine 1.5 import QtWebChannel 1.0 @@ -46,13 +47,13 @@ Rectangle { onSuggestions: { if (suggestions.length > 0) { suggestionsList = [] - suggestionsList.push(addressBarInput.text) //do not overwrite edit text + suggestionsList.push(addressBarInput.text); //do not overwrite edit text for(var i = 0; i < suggestions.length; i++) { - suggestionsList.push(suggestions[i]) + suggestionsList.push(suggestions[i]); } addressBar.model = suggestionsList if (!addressBar.popup.visible) { - addressBar.popup.open() + addressBar.popup.open(); } } } @@ -64,7 +65,7 @@ Rectangle { repeat: false onTriggered: { if (addressBar.editText !== "") { - searchEngine.requestSuggestions(addressBarInput.text) + searchEngine.requestSuggestions(addressBarInput.text); } } } @@ -83,9 +84,9 @@ Rectangle { } addressBar.model = [] - webEngineView.url = url - suggestionRequestTimer.stop() - addressBar.popup.close() + webStack.currentItem.webEngineView.url = url + suggestionRequestTimer.stop(); + addressBar.popup.close(); } Column { @@ -98,22 +99,26 @@ Rectangle { height: 48 HifiControls.WebGlyphButton { - enabled: webEngineView.canGoBack + enabled: webStack.currentItem.webEngineView.canGoBack || webStack.depth > 1 glyph: hifi.glyphs.backward; anchors.verticalCenter: parent.verticalCenter; size: 38; onClicked: { - webEngineView.goBack() + if (webStack.currentItem.webEngineView.canGoBack) { + webStack.currentItem.webEngineView.goBack(); + } else if (webStack.depth > 1) { + webStack.pop(); + } } } HifiControls.WebGlyphButton { - enabled: webEngineView.canGoForward + enabled: webStack.currentItem.webEngineView.canGoForward glyph: hifi.glyphs.forward; anchors.verticalCenter: parent.verticalCenter; size: 38; onClicked: { - webEngineView.goForward() + webStack.currentItem.webEngineView.goForward(); } } @@ -128,21 +133,21 @@ Rectangle { indicator: Item {} background: Item {} onActivated: { - goTo(textAt(index)) + goTo(textAt(index)); } - popup.height: webEngineView.height + popup.height: webStack.height onFocusChanged: { if (focus) { - addressBarInput.selectAll() + addressBarInput.selectAll(); } } contentItem: QQControls.TextField { id: addressBarInput leftPadding: 26 - rightPadding: hifi.dimensions.controlLineHeight + rightPadding: hifi.dimensions.controlLineHeight + 5 text: addressBar.editText placeholderText: qsTr("Enter URL") font: addressBar.font @@ -151,7 +156,7 @@ Rectangle { verticalAlignment: Text.AlignVCenter onFocusChanged: { if (focus) { - selectAll() + selectAll(); } } @@ -161,7 +166,7 @@ Rectangle { Keys.onPressed: { if (event.key === Qt.Key_Return) { - goTo(addressBarInput.text) + goTo(addressBarInput.text); event.accepted = true; } } @@ -173,58 +178,57 @@ Rectangle { id: faviconImage width: 16; height: 16 sourceSize: Qt.size(width, height) - source: webEngineView.icon - onSourceChanged: console.log("web icon", source) + source: webStack.currentItem.webEngineView.icon } HifiControls.WebGlyphButton { - glyph: webEngineView.loading ? hifi.glyphs.closeSmall : hifi.glyphs.reloadSmall; + glyph: webStack.currentItem.webEngineView.loading ? hifi.glyphs.closeSmall : hifi.glyphs.reloadSmall; anchors.verticalCenter: parent.verticalCenter; width: hifi.dimensions.controlLineHeight z: 2 x: addressBarInput.width - implicitWidth onClicked: { - if (webEngineView.loading) { - webEngineView.stop() + if (webStack.currentItem.webEngineView.loading) { + webStack.currentItem.webEngineView.stop(); } else { - reloadTimer.start() + webStack.currentItem.webEngineView.reloadTimer.start(); } } } } - Component.onCompleted: ScriptDiscoveryService.scriptsModelFilter.filterRegExp = new RegExp("^.*$", "i") + Component.onCompleted: ScriptDiscoveryService.scriptsModelFilter.filterRegExp = new RegExp("^.*$", "i"); Keys.onPressed: { if (event.key === Qt.Key_Return) { - goTo(addressBarInput.text) + goTo(addressBarInput.text); event.accepted = true; } } onEditTextChanged: { - if (addressBar.editText !== "" && addressBar.editText !== webEngineView.url.toString()) { + if (addressBar.editText !== "" && addressBar.editText !== webStack.currentItem.webEngineView.url.toString()) { suggestionRequestTimer.restart(); } else { addressBar.model = [] - addressBar.popup.close() + addressBar.popup.close(); } } Layout.fillWidth: true - editText: webEngineView.url - onAccepted: goTo(addressBarInput.text) + editText: webStack.currentItem.webEngineView.url + onAccepted: goTo(addressBarInput.text); } HifiControls.WebGlyphButton { checkable: true - checked: webEngineView.audioMuted + checked: webStack.currentItem.webEngineView.audioMuted glyph: checked ? hifi.glyphs.unmuted : hifi.glyphs.muted anchors.verticalCenter: parent.verticalCenter; width: hifi.dimensions.controlLineHeight onClicked: { - webEngineView.triggerWebAction(WebEngineView.ToggleMediaMute) + webStack.currentItem.webEngineView.triggerWebAction(WebEngineView.ToggleMediaMute); } } } @@ -249,18 +253,88 @@ Rectangle { width: parent.width; from: 0 to: 100 - value: webEngineView.loadProgress + value: webStack.currentItem.webEngineView.loadProgress height: 2 } Component { - id: webDialogComponent + id: webViewComponent Rectangle { - property alias webDialogView: webDialogView - color: "white" + property alias webEngineView: webEngineView + property WebEngineNewViewRequest request: null + + property bool isDialog: QQControls.StackView.index > 0 + property real margins: isDialog ? 10 : 0 + + color: "#d1d1d1" + + QQControls.StackView.onActivated: { + addressBar.editText = Qt.binding( function() { return webStack.currentItem.webEngineView.url; }); + } + + onRequestChanged: { + if (isDialog && request !== null && request !== undefined) {//is Dialog ? + request.openIn(webEngineView); + } + } + HifiControls.BaseWebView { - id: webDialogView + id: webEngineView anchors.fill: parent + anchors.margins: parent.margins + + layer.enabled: parent.isDialog + layer.effect: DropShadow { + verticalOffset: 8 + horizontalOffset: 8 + color: "#330066ff" + samples: 10 + spread: 0.5 + } + + focus: true + objectName: "tabletWebEngineView" + + //profile: HFWebEngineProfile; + + property string userScriptUrl: "" + + onLoadingChanged: { + if (!loading) { + suggestionRequestTimer.stop(); + addressBar.popup.close(); + } + } + + onLinkHovered: { + //TODO: change cursor shape? + } + + // 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: webEngineView.userScriptUrl + injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. + worldId: WebEngineScript.MainWorld + } + + userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] settings.autoLoadImages: true settings.javascriptEnabled: true @@ -270,162 +344,80 @@ Rectangle { settings.autoLoadIconsForPage: true settings.touchIconsEnabled: true + onCertificateError: { + error.defer(); + } + + Component.onCompleted: { + webChannel.registerObject("eventBridge", eventBridge); + webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); + //webEngineView.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)"; + } + + onFeaturePermissionRequested: { + grantFeaturePermission(securityOrigin, feature, true); + } + + onNewViewRequested: { + if (request.destination == WebEngineView.NewViewInDialog) { + webStack.push(webViewComponent, {"request": request}); + } else { + request.openIn(webEngineView); + } + } + + onRenderProcessTerminated: { + var status = ""; + switch (terminationStatus) { + case WebEngineView.NormalTerminationStatus: + status = "(normal exit)"; + break; + case WebEngineView.AbnormalTerminationStatus: + status = "(abnormal exit)"; + break; + case WebEngineView.CrashedTerminationStatus: + status = "(crashed)"; + break; + case WebEngineView.KilledTerminationStatus: + status = "(killed)"; + break; + } + + console.error("Render process exited with code " + exitCode + " " + status); + reloadTimer.running = true; + } + + onFullScreenRequested: { + if (request.toggleOn) { + webEngineView.state = "FullScreen"; + } else { + webEngineView.state = ""; + } + request.accept(); + } + onWindowCloseRequested: { - webDialog.active = false - webDialog.request = null + webStack.pop(); + } + + Timer { + id: reloadTimer + interval: 0 + running: false + repeat: false + onTriggered: webEngineView.reload() } } } } - Item { + QQControls.StackView { + id: webStack width: parent.width; property real webViewHeight: root.height - loadProgressBar.height - 48 - 4 height: keyboardEnabled && keyboardRaised ? webViewHeight - keyboard.height : webViewHeight - HifiControls.BaseWebView { - id: webEngineView - anchors.fill: parent - - focus: true - objectName: "tabletWebEngineView" - - url: "https://www.highfidelity.com" - - //profile: HFWebEngineProfile; - - property string userScriptUrl: "" - - onLoadingChanged: { - if (!loading) { - suggestionRequestTimer.stop() - addressBar.popup.close() - } - } - - onLinkHovered: { - //TODO: change cursor shape? - console.error("hoveredUrl:", hoveredUrl) - } - - // 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: webEngineView.userScriptUrl - injectionPoint: WebEngineScript.DocumentReady // DOM ready but page load may not be finished. - worldId: WebEngineScript.MainWorld - } - - userScripts: [ createGlobalEventBridge, raiseAndLowerKeyboard, userScript ] - - settings.autoLoadImages: true - settings.javascriptEnabled: true - settings.errorPageEnabled: true - settings.pluginsEnabled: true - settings.fullScreenSupportEnabled: true - settings.autoLoadIconsForPage: true - settings.touchIconsEnabled: true - - onCertificateError: { - error.defer(); - } - - Component.onCompleted: { - webChannel.registerObject("eventBridge", eventBridge); - webChannel.registerObject("eventBridgeWrapper", eventBridgeWrapper); - //webEngineView.profile.httpUserAgent = "Mozilla/5.0 Chrome (HighFidelityInterface)"; - } - - onFeaturePermissionRequested: { - grantFeaturePermission(securityOrigin, feature, true); - } - - onNewViewRequested: { - console.error("new view requested:", request.destination) - if (request.destination == WebEngineView.NewViewInDialog) { - webDialog.request = request - webDialog.active = true - } else { - request.openIn(webEngineView); - } - } - - onRenderProcessTerminated: { - var status = ""; - switch (terminationStatus) { - case WebEngineView.NormalTerminationStatus: - status = "(normal exit)"; - break; - case WebEngineView.AbnormalTerminationStatus: - status = "(abnormal exit)"; - break; - case WebEngineView.CrashedTerminationStatus: - status = "(crashed)"; - break; - case WebEngineView.KilledTerminationStatus: - status = "(killed)"; - break; - } - - console.error("Render process exited with code " + exitCode + " " + status); - reloadTimer.running = true; - } - - onFullScreenRequested: { - console.error("FS requested:", request.destination) - if (request.toggleOn) { - webEngineView.state = "FullScreen"; - } else { - webEngineView.state = ""; - } - request.accept(); - } - - onWindowCloseRequested: { - console.error("window close requested:", request.destination) - } - - Timer { - id: reloadTimer - interval: 0 - running: false - repeat: false - onTriggered: webEngineView.reload() - } - } - - Loader { - id: webDialog - property WebEngineNewViewRequest request: null - anchors.fill: parent - anchors.margins: 10 - - active: false - sourceComponent: webDialogComponent - onStatusChanged: { - if (Loader.Ready === status) { - focus = true - item.webDialogView.profile = webEngineView.profile - request.openIn(item.webDialogView) - } - } - } + Component.onCompleted: webStack.push(webViewComponent, {"webEngineView.url": "https://www.highfidelity.com"}); } }