Add search drop-down menu with suggestions

This is still missing persistent history and a
QSortFilterProxyModel implementation to seach in
that history.

6 files changed, 229 insertions, 27 deletions

diff --git a/src/engine.cpp b/src/engine.cpp
index b6db85c..5768b5e 100644
--- a/src/engine.cpp
+++ b/src/engine.cpp
@@ -60,6 +60,17 @@ QUrl Engine::fromUserInput(const QString& userInput)
     return QUrl::fromUserInput(userInput);
 }
 
+bool Engine::isUrl(const QString& userInput)
+{
+    if (userInput.startsWith(QStringLiteral("www."))
+            || userInput.startsWith(QStringLiteral("http"))
+            || userInput.startsWith(QStringLiteral("ftp"))
+            || userInput.contains(QStringLiteral("://"))
+            || userInput.endsWith(QStringLiteral(".com")))
+        return true;
+    return false;
+}
+
 QString Engine::domainFromString(const QString& urlString)
 {
     return QUrl::fromUserInput(urlString).host();
diff --git a/src/engine.h b/src/engine.h
index 777dd74..49cbe24 100644
--- a/src/engine.h
+++ b/src/engine.h
@@ -89,6 +89,7 @@ public:
     }
     QString settingsPath();
 
+    Q_INVOKABLE bool isUrl(const QString& userInput);
     Q_INVOKABLE QUrl fromUserInput(const QString& userInput);
     Q_INVOKABLE QString domainFromString(const QString& urlString);
     Q_INVOKABLE QString fallbackColor();
diff --git a/src/qml/BrowserWindow.qml b/src/qml/BrowserWindow.qml
index 233d2dc..5b3f567 100644
--- a/src/qml/BrowserWindow.qml
+++ b/src/qml/BrowserWindow.qml
@@ -55,6 +55,8 @@ Item {
         return tabView.get(tabView.currentIndex) ? tabView.get(tabView.currentIndex).item.webView : null
     }
 
+    property string googleSearchQuery: "https://www.google.com/search?sourceid=qtbrowser&ie=UTF-8&q="
+
     property int toolBarSize: 80
     property string uiColor: settingsView.privateBrowsingEnabled ? "#26282a" : "#46a2da"
     property string uiSeparatorColor: settingsView.privateBrowsingEnabled ? "#717273" : "#7ebee5"
@@ -116,7 +118,6 @@ Item {
             if (!tab)
                 return
 
-            navigation.addressBar.forceActiveFocus();
             navigation.addressBar.selectAll();
             tabView.makeCurrent(tabView.count - 1)
             navigation.addressBar.forceActiveFocus()
@@ -159,7 +160,6 @@ Item {
 
         onDoneClicked: {
             settingsView.state = "disabled"
-            tabView.interactive = true
         }
     }
 
@@ -174,8 +174,11 @@ Item {
 
     PageView {
         id: tabView
-        interactive: !sslDialog.visible && homeScreen.state == "disabled"
-
+        interactive: {
+            if (sslDialog.visible || homeScreen.state != "disabled" || urlDropDown.state == "enabled" || settingsView.state == "enabled")
+                return false
+            return true
+        }
         height: parent.height
 
         anchors {
@@ -248,6 +251,158 @@ Item {
         }
     }
 
+    Rectangle {
+        id: urlDropDown
+        color: "white"
+        visible: navigation.visible
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: navigation.bottom
+        }
+
+        state: "disabled"
+
+        states: [
+            State {
+                name: "enabled"
+                PropertyChanges {
+                    target: homeScreen
+                    state: "disabled"
+                }
+                PropertyChanges {
+                    target: urlDropDown
+                    height: Math.min(3 * toolBarSize, historyList.childrenRect.height)
+                }
+            },
+            State {
+                name: "disabled"
+                PropertyChanges {
+                    target: urlDropDown
+                    height: 0
+                }
+            }
+        ]
+
+        ListView {
+            id: historyList
+            model: navigation.webView.navigationHistory.items
+            clip: true
+            visible: urlDropDown.state == "enabled"
+            footerPositioning: ListView.OverlayFooter
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
+            }
+            height: Math.min(childrenRect.height, parent.height)
+            delegate: Rectangle {
+                id: wrapper
+                width: historyList.width
+                height: toolBarSize
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        if (!url)
+                            return
+                        navigation.addressBar.text = url
+                        navigation.addressBar.accepted()
+                    }
+                }
+
+                Column {
+                    width: parent.width - 60
+                    height: parent.height
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        horizontalCenter: parent.horizontalCenter
+                    }
+                    Text {
+                        height: wrapper.height / 2
+                        width: parent.width
+                        elide: Text.ElideRight
+                        verticalAlignment: Text.AlignBottom
+                        anchors{
+                            leftMargin: 30
+                            rightMargin: 30
+                        }
+                        id: titleLabel
+                        font.family: defaultFontFamily
+                        font.pixelSize: 23
+                        color: "black"
+                        text: title ? title : ""
+                    }
+                    Text {
+                        height: wrapper.height / 2 - 1
+                        width: parent.width
+                        elide: Text.ElideRight
+                        verticalAlignment: Text.AlignTop
+                        font.family: defaultFontFamily
+                        font.pixelSize: 23
+                        color: uiColor
+                        text: url ? url : ""
+                    }
+                    Rectangle {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        width: historyList.width
+                        height: 1
+                        color: iconStrokeColor
+                    }
+                }
+            }
+            footer: Rectangle {
+                z: 5
+                width: historyList.width
+                height: toolBarSize
+                border.color: iconStrokeColor
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        var string = searchText.text
+                        var constructedUrl = ""
+                        if (engine.isUrl(string)) {
+                            constructedUrl = engine.fromUserInput(string)
+                        } else {
+                            constructedUrl = engine.fromUserInput(googleSearchQuery + string)
+                        }
+                        navigation.addressBar.text = constructedUrl
+                        navigation.addressBar.accepted()
+                    }
+                }
+                Row {
+                    height: parent.height
+                    Rectangle {
+                        id: searchIcon
+                        height: parent.height
+                        width: height
+                        color: "transparent"
+                        Image {
+                            anchors.centerIn: parent
+                            source: "qrc:///search"
+                        }
+                    }
+                    Text {
+                        id: searchText
+                        height: parent.height
+                        width: historyList.width - searchIcon.width - 30
+                        elide: Text.ElideRight
+                        text: navigation.addressBar.text
+                        verticalAlignment: Text.AlignVCenter
+                        font.family: defaultFontFamily
+                        font.pixelSize: 23
+                        color: "black"
+                    }
+                }
+            }
+        }
+
+
+        transitions: Transition {
+            PropertyAnimation { property: "height"; duration: animationDuration; easing.type : Easing.InSine }
+        }
+    }
+
     HomeScreen {
         id: homeScreen
         height: parent.height - toolBarSize
diff --git a/src/qml/HomeScreen.qml b/src/qml/HomeScreen.qml
index 793589e..580a3ef 100644
--- a/src/qml/HomeScreen.qml
+++ b/src/qml/HomeScreen.qml
@@ -93,10 +93,6 @@ Rectangle {
     states: [
         State {
             name: "enabled"
-            PropertyChanges {
-                target: tabView
-                interactive: false
-            }
             AnchorChanges {
                 target: homeScreen
                 anchors.top: navigation.bottom
@@ -111,10 +107,6 @@ Rectangle {
         },
         State {
             name: "edit"
-            PropertyChanges {
-                target: tabView
-                interactive: false
-            }
         }
     ]
 
diff --git a/src/qml/NavigationBar.qml b/src/qml/NavigationBar.qml
index d926b67..9071ead 100644
--- a/src/qml/NavigationBar.qml
+++ b/src/qml/NavigationBar.qml
@@ -167,15 +167,38 @@ ToolBar {
             placeholderText: qsTr("Search or type a URL")
 
             onActiveFocusChanged: {
-                if (activeFocus)
+                if (activeFocus) {
+                    urlBar.selectAll()
                     root.state = "enabled"
-                else
+                    urlDropDown.state = "enabled"
+                } else {
+                    urlDropDown.state = "disabled"
                     root.state = "tracking"
+                }
             }
 
             UIButton {
                 id: reloadButton
-                source: webView && webView.loading ? "qrc:///stop" : "qrc:///refresh"
+                state: cancelButton.visible ? "edit" : "load"
+                states: [
+                    State {
+                        name: "load"
+                        PropertyChanges {
+                            target: reloadButton
+                            source: webView && webView.loading ? "qrc:///stop" : "qrc:///refresh"
+                            height: 54
+                        }
+                    },
+                    State {
+                        name: "edit"
+                        PropertyChanges {
+                            target: reloadButton
+                            source: "qrc:///stop"
+                            height: 45
+                            visible: urlBar.text != ""
+                        }
+                    }
+                ]
                 height: 54
                 width: height
                 color: "transparent"
@@ -186,7 +209,14 @@ ToolBar {
                     right: parent.right
                     verticalCenter: addressBar.verticalCenter;
                 }
-                onClicked: { webView.loading ? webView.stop() : webView.reload() }
+                onClicked: {
+                    if (state == "load") {
+                        webView.loading ? webView.stop() : webView.reload()
+                        return
+                    }
+                    urlBar.selectAll()
+                    urlBar.remove(urlBar.selectionStart, urlBar.selectionEnd)
+                }
             }
             style: TextFieldStyle {
                 textColor: "black"
@@ -213,18 +243,13 @@ ToolBar {
             }
 
             onTextChanged: refresh()
-            onEditingFinished: selectAll()
-            onFocusChanged: {
-                if (focus) {
-                    forceActiveFocus()
-                    selectAll()
-                } else {
-                    urlBar.cursorPosition = 0
-                    deselect()
-                }
+            onEditingFinished: {
+                selectAll()
+                webView.forceActiveFocus()
             }
         }
         Rectangle {
+            visible: !cancelButton.visible
             Layout.fillWidth: true
             implicitWidth: 10
             anchors {
@@ -233,6 +258,25 @@ ToolBar {
             }
             color: uiColor
         }
+
+        UIButton {
+            id: cancelButton
+            color: uiColor
+            visible: urlDropDown.state === "enabled"
+            highlightColor: buttonPressedColor
+            Text {
+                color: "white"
+                anchors.centerIn: parent
+                text: "Cancel"
+                font.family: defaultFontFamily
+                font.pixelSize: 28
+            }
+            implicitWidth: 120
+            onClicked: {
+                urlDropDown.state = "disabled"
+                webView.forceActiveFocus()
+            }
+        }
         Rectangle {
             width: 1
             anchors {
@@ -334,7 +378,6 @@ ToolBar {
             color: uiColor
             highlightColor: buttonPressedColor
             onClicked: {
-                tabView.interactive = false
                 settingsView.state = "enabled"
             }
         }
diff --git a/src/qml/PageView.qml b/src/qml/PageView.qml
index 279f9d8..fb6ac12 100644
--- a/src/qml/PageView.qml
+++ b/src/qml/PageView.qml
@@ -594,7 +594,7 @@ Rectangle {
 
         dragMargin: itemHeight
 
-        focus: interactive
+        focus: pathView.interactive
 
         property real offset: 30