Rework using StackView. Now backward takes in account popups as well

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
+        webStack.currentItem.webEngineView.url = url
-        suggestionRequestTimer.stop()
+        suggestionRequestTimer.stop();
-        addressBar.popup.close()
+        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
+                        source: webStack.currentItem.webEngineView.icon
-                        onSourceChanged: console.log("web icon", source)
                     }
 
                     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) {
+                            if (webStack.currentItem.webEngineView.loading) {
-                                webEngineView.stop()
+                                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
+                editText: webStack.currentItem.webEngineView.url
-                onAccepted: goTo(addressBarInput.text)
+                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
+                property alias webEngineView: webEngineView
-                color: "white"
+                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
+                        webStack.pop();
-                        webDialog.request = null
+                    }
+
+                    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 {
+            Component.onCompleted: webStack.push(webViewComponent, {"webEngineView.url": "https://www.highfidelity.com"});
-                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)
-                    }
-                }
-            }
         }
     }