Merge pull request #10395 from ctrlaltdavid/21319

Fix browser "back" button in tablet snapshot and goto "i" pages

interface/resources/qml/controls/TabletWebButton.qml

@@ -17,19 +17,20 @@ Rectangle {
     property alias pixelSize: label.font.pixelSize;
     property bool selected: false
     property bool hovered: false
-    property bool enabled: false
     property int spacing: 2
     property var action: function () {}
     property string enabledColor: hifi.colors.blueHighlight
     property string disabledColor: hifi.colors.blueHighlight
-    property string highlightColor: hifi.colors.blueHighlight;
     width: label.width + 64
     height: 32
     color: hifi.colors.white
+    enabled: false
+
     HifiConstants { id: hifi }
+
     RalewaySemiBold {
         id: label;
-        color: enabledColor
+        color: enabled ? enabledColor : disabledColor
         font.pixelSize: 15;
         anchors {
             horizontalCenter: parent.horizontalCenter;
@@ -37,7 +38,6 @@ Rectangle {
         }
     }
         
-        
     Rectangle {
         id: indicator
         width: parent.width

interface/resources/qml/controls/TabletWebView.qml

@@ -8,6 +8,7 @@ import "../styles" as HifiStyles
 import "../styles-uit"
 import "../"
 import "."
+
 Item {
     id: web
     HifiConstants { id: hifi }
@@ -22,17 +23,14 @@ Item {
     property bool keyboardRaised: false
     property bool punctuationMode: false
     property bool isDesktop: false
-    property string initialPage: ""
-    property bool startingUp: true
     property alias webView: webview
     property alias profile: webview.profile
     property bool remove: false
-    property var urlList: []
-    property var forwardList: []
 
-    
+    // Manage own browse history because WebEngineView history is wiped when a new URL is loaded via
-    property int currentPage: -1 // used as a model for repeater
+    // onNewViewRequested, e.g., as happens when a social media share button is clicked.
-    property alias pagesModel: pagesModel
+    property var history: []
+    property int historyIndex: -1
 
     Rectangle {
         id: buttons
@@ -51,21 +49,22 @@ Item {
             
             TabletWebButton {
                 id: back
-                enabledColor: hifi.colors.baseGray
+                enabledColor: hifi.colors.darkGray
-                enabled: false
+                disabledColor: hifi.colors.lightGrayText
+                enabled: historyIndex > 0
                 text: "BACK"
 
                 MouseArea {
                     anchors.fill: parent
                     onClicked: goBack()
-                    hoverEnabled: true
-                    
                 }
             }
 
             TabletWebButton {
                 id: close
                 enabledColor: hifi.colors.darkGray
+                disabledColor: hifi.colors.lightGrayText
+                enabled: true
                 text: "CLOSE"
 
                 MouseArea {
@@ -75,7 +74,6 @@ Item {
             }
         }
 
-
         RalewaySemiBold {
             id: displayUrl
             color: hifi.colors.baseGray
@@ -90,7 +88,6 @@ Item {
             }
         }
 
-
         MouseArea {
             anchors.fill: parent
             preventStealing: true
@@ -98,29 +95,10 @@ Item {
         }
     }
 
-    ListModel {
-        id: pagesModel
-        onCountChanged: {
-            currentPage = count - 1;
-            if (currentPage > 0) {
-                back.enabledColor = hifi.colors.darkGray;
-            } else {
-                back.enabledColor = hifi.colors.baseGray;
-            }
-        }
-    }
-        
     function goBack() {
-        if (webview.canGoBack) {
+        if (historyIndex > 0) {
-            forwardList.push(webview.url);
+            historyIndex--;
-            webview.goBack();
+            loadUrl(history[historyIndex]);
-        } else if (web.urlList.length > 0) {
-            var url = web.urlList.pop();
-            loadUrl(url);
-        } else if (web.forwardList.length > 0) {
-            var url = web.forwardList.pop();
-            loadUrl(url);
-            web.forwardList = [];
         }
     }
 
@@ -137,19 +115,12 @@ Item {
     }
 
     function goForward() {
-        if (currentPage < pagesModel.count - 1) {
+        if (historyIndex < history.length - 1) {
-            currentPage++;
+            historyIndex++;
+            loadUrl(history[historyIndex]);
         }
     }
 
-    function gotoPage(url) {
-        urlAppend(url)
-    }
-
-    function isUrlLoaded(url) {
-        return (pagesModel.get(currentPage).webUrl === url);
-    }
-    
     function reloadPage() {
         view.reloadAndBypassCache()
         view.setActiveFocusOnPress(true);
@@ -161,36 +132,8 @@ Item {
         web.url = webview.url;
     }
 
-    function onInitialPage(url) {
-        return (url === webview.url);
-    }
-        
-    
-    function urlAppend(url) {
-        var lurl = decodeURIComponent(url)
-        if (lurl[lurl.length - 1] !== "/") {
-            lurl = lurl + "/"
-        }
-        web.urlList.push(url);
-        setBackButtonStatus();
-    }
-
-    function setBackButtonStatus() {
-        if (web.urlList.length > 0 || webview.canGoBack) {
-            back.enabledColor = hifi.colors.darkGray;
-            back.enabled = true;
-        } else {
-            back.enabledColor = hifi.colors.baseGray;
-            back.enabled = false;
-        }
-    }
-
     onUrlChanged: {
         loadUrl(url);
-        if (startingUp) {
-            web.initialPage = webview.url;
-            startingUp = false;
-        }
     }
 
     QtObject {
@@ -258,6 +201,17 @@ Item {
             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);
+            }
+        }
+
         onLoadingChanged: {
             keyboardRaised = false;
             punctuationMode = false;
@@ -277,17 +231,11 @@ Item {
             }
 
             if (WebEngineView.LoadSucceededStatus == loadRequest.status) {
-                if (startingUp) {
-                    web.initialPage = webview.url;
-                    startingUp = false;
-                }
                 webview.forceActiveFocus();
             }
         }
         
         onNewViewRequested: {
-            var currentUrl = webview.url;
-            urlAppend(currentUrl);
             request.openIn(webview);
         }
     }