Add error page when tab and bookmark limits are reached

Currently the limit for bookmarks is 24
and the limit for tabs is 10.

4 files changed, 175 insertions, 26 deletions

diff --git a/src/qml/BrowserWindow.qml b/src/qml/BrowserWindow.qml
index 5577d8d..7cd67df 100644
--- a/src/qml/BrowserWindow.qml
+++ b/src/qml/BrowserWindow.qml
@@ -69,6 +69,9 @@ Item {
     property string iconStrokeColor: "#d6d6d6"
     property string defaultFontFamily: "Open Sans"
 
+    property int gridViewPageItemCount: 8
+    property int gridViewMaxBookmarks: 3 * gridViewPageItemCount
+    property int tabViewMaxTabs: 10
     property int animationDuration: 200
     property int velocityThreshold: 400
     property int velocityY: 0
@@ -116,7 +119,11 @@ Item {
         shortcut: "Ctrl+T"
         onTriggered: {
             tabView.get(tabView.currentIndex).item.webView.takeSnapshot()
-            tabView.createEmptyTab()
+            var tab = tabView.createEmptyTab()
+
+            if (!tab)
+                return
+
             navigation.addressBar.forceActiveFocus();
             navigation.addressBar.selectAll();
             tabView.makeCurrent(tabView.count - 1)
@@ -251,6 +258,10 @@ Item {
 
         Component.onCompleted: {
             var tab = createEmptyTab()
+
+            if (!tab)
+                return
+
             navigation.webView = tab.webView
             tab.webView.url = engine.fromUserInput("qt.io")
         }
diff --git a/src/qml/HomeScreen.qml b/src/qml/HomeScreen.qml
index 9251169..ae568b3 100644
--- a/src/qml/HomeScreen.qml
+++ b/src/qml/HomeScreen.qml
@@ -43,20 +43,28 @@ Rectangle {
 
     property int padding: 60
     property int cellSize: width / 5 - padding
+    property alias messageBox: messageBox
     property alias count: gridView.count
     property alias currentIndex: gridView.currentIndex
 
-    function set(index) {
-        currentIndex = index
-        gridView.snapToPage()
+    function set(i) {
+        var p = (i - i % gridViewPageItemCount) / gridViewPageItemCount
+        gridView.contentX = p * gridView.page
     }
 
     state: "disabled"
 
     signal add(string title, string url, string iconUrl, string fallbackColor)
     onAdd: {
+        if (listModel.count === gridViewMaxBookmarks) {
+            navigation.refresh()
+            messageBox.state = "full"
+            state = "enabled"
+            return
+        }
         var element = { "title": title, "url": url, "iconUrl": iconUrl, "fallbackColor": fallbackColor }
         listModel.append(element)
+        set(listModel.count - 1)
     }
 
     signal remove(string url, int idx)
@@ -133,6 +141,13 @@ Rectangle {
     GridView {
         id: gridView
 
+        onCountChanged: {
+            if (!count)
+                messageBox.state = "empty"
+            else
+                messageBox.state = "disabled"
+        }
+
         property real dragStart: 0
         property real page: 4 * cellWidth
 
@@ -154,7 +169,7 @@ Rectangle {
 
         rightMargin: {
             var margin = (parent.width - 4 * gridView.cellWidth - homeScreen.padding) / 2
-            var padding = gridView.page - Math.round(gridView.count % 8 / 2) * gridView.cellWidth
+            var padding = gridView.page - Math.round(gridView.count % gridViewPageItemCount / 2) * gridView.cellWidth
 
             if (padding == gridView.page)
                 return margin
@@ -449,19 +464,133 @@ Rectangle {
     }
 
     Rectangle {
-        visible: gridView.count == 0
-        color: "transparent"
-        anchors.centerIn: parent
-        width: 500
-        height: 300
+        id: messageBox
+        color: "white"
+        anchors.fill: parent
+
+        Rectangle {
+            id: error
+            visible: messageBox.state != "empty"
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
+            }
+            height: homeScreen.height / 2
+            Image {
+                id: errorIcon
+                source: "qrc:///error"
+                anchors.centerIn: parent
+            }
+            Text {
+                anchors {
+                    topMargin: 10
+                    top: errorIcon.bottom
+                    horizontalCenter: parent.horizontalCenter
+                }
+                font.family: defaultFontFamily
+                font.pixelSize: message.font.pixelSize
+                text: "Oops!..."
+            }
+        }
+
         Text {
-            anchors.centerIn: parent
-            color: placeholderColor
+            id: message
+            anchors {
+                top: error.bottom
+                horizontalCenter: parent.horizontalCenter
+            }
+            color: iconOverlayColor
             font.family: defaultFontFamily
             font.pixelSize: 28
-            text: "No bookmarks have been saved so far."
             verticalAlignment: Text.AlignVCenter
             horizontalAlignment: Text.AlignHCenter
         }
+
+        Rectangle {
+            height: 2 * toolBarSize
+            anchors {
+                bottom: parent.bottom
+                top: message.bottom
+                left: parent.left
+                right: parent.right
+                bottomMargin: toolBarSize
+            }
+            UIButton {
+                color: uiColor
+                implicitWidth: 160
+                implicitHeight: 65
+                visible: messageBox.state != "empty"
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    bottom: parent.bottom
+                }
+                Text {
+                    color: "white"
+                    anchors.centerIn: parent
+                    text: "OK"
+                    font.family: defaultFontFamily
+                    font.pixelSize: 28
+                }
+                onClicked: {
+                    if (messageBox.state == "tabsfull") {
+                        homeScreen.state = "disabled"
+                        tabView.viewState = "list"
+                        return
+                    }
+                    if (messageBox.state == "full") {
+                        messageBox.state = "disabled"
+                        homeScreen.state = "edit"
+                        return
+                    }
+                }
+            }
+        }
+
+        state: "disabled"
+
+        states: [
+            State {
+                name: "disabled"
+                PropertyChanges {
+                    target: messageBox
+                    visible: false
+                }
+            },
+            State {
+                name: "empty"
+                PropertyChanges {
+                    target: message
+                    text: qsTr("No bookmarks have been saved so far.")
+                }
+                PropertyChanges {
+                    target: messageBox
+                    color: "transparent"
+                    visible: true
+                }
+            },
+            State {
+                name: "full"
+                PropertyChanges {
+                    target: message
+                    text: qsTr("24 bookmarks is the maximum limit.\nTo bookmark a new page you must delete a bookmark first.")
+                }
+                PropertyChanges {
+                    target: messageBox
+                    visible: true
+                }
+            },
+            State {
+                name: "tabsfull"
+                PropertyChanges {
+                    target: message
+                    text: qsTr("10 open tabs is the maximum limit.\nTo open a new tab you must close another one first.")
+                }
+                PropertyChanges {
+                    target: messageBox
+                    visible: true
+                }
+            }
+        ]
     }
 }
diff --git a/src/qml/NavigationBar.qml b/src/qml/NavigationBar.qml
index 867a037..2b8018a 100644
--- a/src/qml/NavigationBar.qml
+++ b/src/qml/NavigationBar.qml
@@ -235,9 +235,10 @@ ToolBar {
             id: homeButton
             source: "qrc:///home"
             onClicked: {
-                if (homeScreen.state == "disabled" || homeScreen.state == "edit")
+                if (homeScreen.state == "disabled" || homeScreen.state == "edit") {
+                    homeScreen.messageBox.state = "disabled"
                     homeScreen.state = "enabled"
-                else if (homeScreen.state != "disabled")
+                } else if (homeScreen.state != "disabled")
                     homeScreen.state = "disabled"
             }
         }
@@ -289,7 +290,7 @@ ToolBar {
                 if (!webView)
                     return
                 var icon = webView.loading ? "" : webView.icon
-                homeScreen.add(webView.title, webView.url, icon, engine.randomColor())
+                homeScreen.add(webView.title, webView.url, icon, engine.fallbackColor())
                 enabled = false
             }
             Component.onCompleted: refresh()
diff --git a/src/qml/PageView.qml b/src/qml/PageView.qml
index 5406a1d..6e00186 100644
--- a/src/qml/PageView.qml
+++ b/src/qml/PageView.qml
@@ -160,23 +160,27 @@ Rectangle {
                 onNewViewRequested: {
                     webEngineView.takeSnapshot()
                     var tab
-                    if (!request.userInitiated)
+                    if (!request.userInitiated) {
                         print("Warning: Blocked a popup window.")
-                    else if (request.destination == WebEngineView.NewViewInTab) {
-                        tab = tabView.createEmptyTab()
+                        return
+                    }
+
+                    tab = tabView.createEmptyTab()
+
+                    if (!tab)
+                        return
+
+                    if (request.destination == WebEngineView.NewViewInTab) {
                         pathView.positionViewAtIndex(tabView.count - 1, PathView.Center)
                         request.openIn(tab.webView)
                     } else if (request.destination == WebEngineView.NewViewInBackgroundTab) {
                         var index = pathView.currentIndex
-                        tab = tabView.createEmptyTab()
                         request.openIn(tab.webView)
                         pathView.positionViewAtIndex(index, PathView.Center)
                     } else if (request.destination == WebEngineView.NewViewInDialog) {
-                        var dialog = tabView.createEmptyTab()
-                        request.openIn(dialog.webView)
+                        request.openIn(tab.webView)
                     } else {
-                        var window = tabView.createEmptyTab()
-                        request.openIn(window.webView)
+                        request.openIn(tab.webView)
                     }
                 }
 
@@ -289,13 +293,17 @@ Rectangle {
     }
 
     function createEmptyTab() {
-        if (listModel.count == 10)
-            return null
         var tab = add(tabComponent)
         return tab
     }
 
     function add(component) {
+        if (listModel.count === tabViewMaxTabs) {
+            homeScreen.messageBox.state = "tabsfull"
+            homeScreen.state = "enabled"
+            return null
+        }
+
         var element = {"item": null }
         element.item = component.createObject(root, { "width": root.width, "height": root.height, "opacity": 0.0 })