Add design mockups and update toolbar and styling

30 files changed, 296 insertions, 337 deletions

diff --git a/mockups/00_HomePage.png b/mockups/00_HomePage.png
new file mode 100644
index 0000000..cf7c69c
--- /dev/null
+++ b/mockups/00_HomePage.png
diff --git a/mockups/00_HomePage_DeleteBookmarks.png b/mockups/00_HomePage_DeleteBookmarks.png
new file mode 100644
index 0000000..95441e4
--- /dev/null
+++ b/mockups/00_HomePage_DeleteBookmarks.png
diff --git a/mockups/01_Browsing.png b/mockups/01_Browsing.png
new file mode 100644
index 0000000..d93a211
--- /dev/null
+++ b/mockups/01_Browsing.png
diff --git a/mockups/01_Browsing_NoKb.png b/mockups/01_Browsing_NoKb.png
new file mode 100644
index 0000000..e330c6c
--- /dev/null
+++ b/mockups/01_Browsing_NoKb.png
diff --git a/mockups/01_URLbox.png b/mockups/01_URLbox.png
new file mode 100644
index 0000000..eec1ae1
--- /dev/null
+++ b/mockups/01_URLbox.png
diff --git a/mockups/02_Selection_Link.png b/mockups/02_Selection_Link.png
new file mode 100644
index 0000000..7edffa0
--- /dev/null
+++ b/mockups/02_Selection_Link.png
diff --git a/mockups/02_Selection_Text.png b/mockups/02_Selection_Text.png
new file mode 100644
index 0000000..476fcbc
--- /dev/null
+++ b/mockups/02_Selection_Text.png
diff --git a/mockups/02_Selection_URL.png b/mockups/02_Selection_URL.png
new file mode 100644
index 0000000..861e774
--- /dev/null
+++ b/mockups/02_Selection_URL.png
diff --git a/mockups/03_Tabs_1.png b/mockups/03_Tabs_1.png
new file mode 100644
index 0000000..80a9a77
--- /dev/null
+++ b/mockups/03_Tabs_1.png
diff --git a/mockups/03_Tabs_2.png b/mockups/03_Tabs_2.png
new file mode 100644
index 0000000..f4da8ae
--- /dev/null
+++ b/mockups/03_Tabs_2.png
diff --git a/mockups/03_Tabs_3.png b/mockups/03_Tabs_3.png
new file mode 100644
index 0000000..4d89730
--- /dev/null
+++ b/mockups/03_Tabs_3.png
diff --git a/mockups/03_Tabs_4.png b/mockups/03_Tabs_4.png
new file mode 100644
index 0000000..c4c74a0
--- /dev/null
+++ b/mockups/03_Tabs_4.png
diff --git a/mockups/03_Tabs_5.png b/mockups/03_Tabs_5.png
new file mode 100644
index 0000000..451dec4
--- /dev/null
+++ b/mockups/03_Tabs_5.png
diff --git a/mockups/LightWebBrowserFunctions.xlsx b/mockups/LightWebBrowserFunctions.xlsx
new file mode 100644
index 0000000..037813a
--- /dev/null
+++ b/mockups/LightWebBrowserFunctions.xlsx
diff --git a/src/qml/BrowserWindow.qml b/src/qml/BrowserWindow.qml
index e7f8a8a..3b534eb 100644
--- a/src/qml/BrowserWindow.qml
+++ b/src/qml/BrowserWindow.qml
@@ -52,32 +52,27 @@ import "assets"
 Item {
     id: browserWindow
 
-    property alias currentWebView: tabs.currentWebView
+    property Item currentWebView: {
+        return tabs.get(tabs.currentIndex) ? tabs.get(tabs.currentIndex).item.webView : null
+    }
+
     property int visibility: Window.Windowed
     property int previousVisibility: Window.Windowed
 
+    property int toolBarHeight: 70
     property string uiColor: "#46a1da"
     property string uiBorderColor: "#7ebde5"
+    property string buttonHighlightColor: "#e6e6e6"
     property string uiSelectionColor: "#fad84a"
 
     property QtObject otrProfile: WebEngineProfile {
         offTheRecord: true
     }
 
-    property bool isFullScreen: visibility == Window.FullScreen
-    onIsFullScreenChanged: {
-        // This is for the case where the system forces us to leave fullscreen.
-        if (currentWebView && !isFullScreen) {
-            currentWebView.state = ""
-            if (currentWebView.isFullScreen)
-                currentWebView.fullScreenCancelled()
-        }
-    }
-
     width: 1024
     height: 600
     visible: true
-
+/*
     Settings {
         id : appSettings
         property alias autoLoadImages: loadImages.checked;
@@ -85,7 +80,7 @@ Item {
         property alias errorPageEnabled: errorPageEnabled.checked;
         property alias pluginsEnabled: pluginsEnabled.checked;
     }
-
+*/
     Action {
         shortcut: "Ctrl+D"
         onTriggered: {
@@ -97,8 +92,8 @@ Item {
         id: focus
         shortcut: "Ctrl+L"
         onTriggered: {
-            addressBar.forceActiveFocus();
-            addressBar.selectAll();
+            navigation.addressBar.forceActiveFocus();
+            navigation.addressBar.selectAll();
         }
     }
     Action {
@@ -113,181 +108,23 @@ Item {
         onTriggered: {
             tabs.createEmptyTab()
             tabs.currentIndex = tabs.count - 1
-            addressBar.forceActiveFocus();
-            addressBar.selectAll();
+            navigation.addressBar.forceActiveFocus();
+            navigation.addressBar.selectAll();
         }
     }
     Action {
         shortcut: "Ctrl+W"
-        onTriggered: {
-            if (tabs.count == 1) {
-                engine.rootWindow.close()
-            } else
-                tabs.remove(tabs.currentIndex)
-        }
+        onTriggered: tabs.remove(tabs.currentIndex)
     }
 
-    Action {
-        shortcut: "Escape"
-        onTriggered: {
-            if (browserWindow.isFullScreen)
-                browserWindow.visibility = browserWindow.previousVisibility
-        }
-    }
-
-    ToolBar {
-        id: navigationBar
-
-        style: ToolBarStyle {
-            background: Rectangle {
-                implicitWidth: 100
-                implicitHeight: 50
-                color: "#46a1da"
-            }
-        }
-
-        RowLayout {
-            anchors.fill: parent
-
-            UIButton {
-                id: backButton
-                source: "qrc:///previous.png"
-                color: uiColor
-                onClicked: tabs.currentWebView.goBack()
-                enabled: tabs.currentWebView && tabs.currentWebView.canGoBack
-            }
-            Rectangle {
-                width: 1
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                color: uiBorderColor
-            }
-            UIButton {
-                id: forwardButton
-                source: "qrc:///next.png"
-                color: uiColor
-                onClicked: tabs.currentWebView.goForward()
-                enabled: tabs.currentWebView && tabs.currentWebView.canGoForward
-            }
-            Rectangle {
-                width: 1
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                color: uiBorderColor
-            }
-            URLBar {
-                id: addressBar
-                Layout.fillWidth: true
-                text: tabs.currentWebView ? tabs.currentWebView.url : "about:blank"
-                onAccepted: {
-                    tabs.get(tabs.currentIndex).item.webView.url = engine.fromUserInput(text)
-                    tabs.viewState = "page"
-                }
-            }
-            Rectangle {
-                width: 1
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                color: uiBorderColor
-            }
-            UIButton {
-                id: pageViewButton
-                source: "qrc:///tabs.png"
-                color: uiColor
-                onClicked: {
-                    if (tabs.viewState == "list") {
-                        tabs.viewState = "page"
-                    } else {
-                        tabs.viewState = "list"
-                    }
-                }
-            }
-            Rectangle {
-                width: 1
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                color: uiBorderColor
-            }
-            ToolButton {
-                id: settingsMenuButton
-                menu: Menu {
-                    MenuItem {
-                        id: loadImages
-                        text: "Autoload images"
-                        checkable: true
-                        checked: true
-                    }
-                    MenuItem {
-                        id: javaScriptEnabled
-                        text: "JavaScript On"
-                        checkable: true
-                        checked: true
-                    }
-                    MenuItem {
-                        id: errorPageEnabled
-                        text: "ErrorPage On"
-                        checkable: true
-                        checked: true
-                    }
-                    MenuItem {
-                        id: pluginsEnabled
-                        text: "Plugins On"
-                        checkable: true
-                        checked: true
-                    }
-                    MenuItem {
-                        id: offTheRecordEnabled
-                        text: "Off The Record"
-                        checkable: true
-                        checked: currentWebView ? currentWebView.profile.offTheRecord : true
-                        onToggled: {
-                            if (!currentWebView)
-                                return
-                            if (checked)
-                                currentWebView.profile = otrProfile
-                            else
-                                currentWebView.profile = engine.rootWindow.defaultProfile();
-
-                        }
-                    }
-                    MenuItem {
-                        id: httpDiskCacheEnabled
-                        text: "HTTP Disk Cache"
-                        checkable: currentWebView && !currentWebView.profile.offTheRecord
-                        checked: currentWebView && (currentWebView.profile.httpCacheType == WebEngineProfile.DiskHttpCache)
-                        onToggled: currentWebView.profile.httpCacheType = checked ? WebEngineProfile.DiskHttpCache : WebEngineProfile.MemoryHttpCache;
-                    }
-                }
-            }
-        }
-        ProgressBar {
-            id: progressBar
-            height: 3
-            anchors {
-                left: parent.left
-                top: parent.bottom
-                right: parent.right
-                leftMargin: -parent.leftMargin
-                rightMargin: -parent.rightMargin
-            }
-            style: ProgressBarStyle {
-                background: Item {}
-            }
-            z: -2;
-            minimumValue: 0
-            maximumValue: 100
-            value: (currentWebView && currentWebView.loadProgress < 100) ? currentWebView.loadProgress : 0
+    NavigationBar {
+        id: navigation
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
         }
     }
-
     PageView {
         id: tabs
 
@@ -295,7 +132,7 @@ Item {
         itemHeight: browserWindow.height / 2
 
         anchors {
-            top: navigationBar.bottom
+            top: navigation.bottom
             left: parent.left
             right: parent.right
             bottom: parent.bottom
@@ -303,12 +140,18 @@ Item {
 
         Component.onCompleted: {
             var tab = createEmptyTab()
+            navigation.webView = tab.webView
             tab.webView.url = engine.fromUserInput("qt.io")
         }
+        onCurrentIndexChanged: {
+            if (!tabs.get(tabs.currentIndex))
+                return
+            navigation.webView = tabs.get(tabs.currentIndex).item.webView
+        }
     }
 
     QtObject{
-        id:acceptedCertificates
+        id: acceptedCertificates
 
         property var acceptedUrls : []
 
diff --git a/src/qml/LoadIndicator.qml b/src/qml/LoadIndicator.qml
deleted file mode 100644
index 43af34c..0000000
--- a/src/qml/LoadIndicator.qml
+++ /dev/null
@@ -1,59 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2015 The Qt Company Ltd.
-** Contact: http://www.qt.io/licensing/
-**
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of The Qt Company Ltd nor the names of its
-**     contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Rectangle {
-    id: container
-
-    property bool running: false
-    property string imageSource: "busy.png"
-
-    visible: running
-
-    Image {
-        id: image
-        anchors.centerIn: parent
-        source: container.imageSource
-        ParallelAnimation {
-            running: container.running
-            NumberAnimation { target: image; property: "rotation"; from: 0; to: 360; loops: Animation.Infinite; duration: 1200 }
-        }
-    }
-}
diff --git a/src/qml/MockTouchPoint.qml b/src/qml/MockTouchPoint.qml
index 4784ff7..6ca4d7e 100644
--- a/src/qml/MockTouchPoint.qml
+++ b/src/qml/MockTouchPoint.qml
@@ -44,7 +44,7 @@ Item {
     property int pointId: 0
 
     Image {
-        source: "qrc:///touchpoint.png"
+        source: "qrc:///touchpoint"
         x: -(width / 2)
         y: -(height / 2)
         height: parent.height
diff --git a/src/qml/NavigationBar.qml b/src/qml/NavigationBar.qml
new file mode 100644
index 0000000..59a5b39
--- /dev/null
+++ b/src/qml/NavigationBar.qml
@@ -0,0 +1,185 @@
+import QtQuick 2.5
+import QtQuick.Controls 1.5
+import QtQuick.Controls.Styles 1.4
+import QtQuick.Layouts 1.3
+
+import "assets"
+
+ToolBar {
+    id: root
+
+    property alias addressBar: urlBar
+
+    property Item webView: null
+
+    height: toolBarHeight
+
+    style: ToolBarStyle {
+        background: Rectangle {
+            color: uiColor
+        }
+    }
+
+    RowLayout {
+        anchors.fill: parent
+
+        UIButton {
+            id: backButton
+            source: enabled ? "qrc:///previous" : "qrc:///previous_inactive"
+            onClicked: webView.goBack()
+            enabled: webView && webView.canGoBack
+        }
+        Rectangle {
+            width: 1
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiBorderColor
+        }
+        UIButton {
+            id: forwardButton
+            source: enabled ? "qrc:///next" : "qrc:///next_inactive"
+            onClicked: webView.goForward()
+            enabled: webView && webView.canGoForward
+        }
+        Rectangle {
+            width: 1
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiBorderColor
+        }
+
+        TextField {
+            id: urlBar
+            Layout.fillWidth: true
+            text: webView.url
+            UIButton {
+                id: reloadButton
+                source: webView && webView.loading ? "qrc:///stop" : "qrc:///refresh"
+                height: parent.height - 15
+                width: height
+                color: "white"
+                radius: width / 2
+                highlightColor: buttonHighlightColor
+                anchors {
+                    rightMargin: 10
+                    right: parent.right
+                    verticalCenter: addressBar.verticalCenter;
+                }
+                onClicked: { webView.loading ? webView.stop() : webView.reload() }
+            }
+            style: TextFieldStyle {
+                textColor: "black"
+                font.family: "Helvetica"
+                font.pointSize: 16
+                selectionColor: uiSelectionColor
+                selectedTextColor: "black"
+                background: Rectangle {
+                    implicitWidth: 200
+                    implicitHeight: 50
+                    border.color: "#3881ae"
+                    border.width: 1
+                }
+                padding {
+                    right: 20 + reloadButton.width
+                    left: 10
+                }
+            }
+            onAccepted: {
+                webView.url = engine.fromUserInput(text)
+                tabs.viewState = "page"
+            }
+        }
+        Rectangle {
+            width: 1
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiBorderColor
+        }
+        UIButton {
+            id: homeButton
+            source: "qrc:///home"
+            onClicked: {
+                console.log("Home clicked")
+            }
+        }
+        Rectangle {
+            width: 1
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiBorderColor
+        }
+        UIButton {
+            id: pageViewButton
+            source: "qrc:///tabs"
+            onClicked: {
+                if (tabs.viewState == "list") {
+                    tabs.viewState = "page"
+                } else {
+                    tabs.get(tabs.currentIndex).item.webView.takeSnapshot()
+                    tabs.viewState = "list"
+                }
+            }
+        }
+        Rectangle {
+            width: 1
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiBorderColor
+        }
+        UIButton {
+            id: bookmarksButton
+            source: "qrc:///star"
+            onClicked: {
+                console.log("Bookmarks clicked")
+            }
+        }
+        Rectangle {
+            width: 1
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiBorderColor
+        }
+        UIButton {
+            id: settingsButton
+            source: "qrc:///settings"
+            checkable: true
+            checked: false
+            onClicked: tabs.interactive = !checked
+        }
+    }
+    ProgressBar {
+        id: progressBar
+        height: 2
+        anchors {
+            left: parent.left
+            top: parent.bottom
+            right: parent.right
+            leftMargin: -parent.leftMargin
+            rightMargin: -parent.rightMargin
+        }
+        style: ProgressBarStyle {
+            background: Rectangle {
+                color: uiBorderColor
+            }
+            progress: Rectangle {
+                color: uiSelectionColor
+            }
+        }
+        z: -2
+        minimumValue: 0
+        maximumValue: 100
+        value: (webView && webView.loadProgress < 100) ? webView.loadProgress : 0
+    }
+}
diff --git a/src/qml/PageView.qml b/src/qml/PageView.qml
index d8880cb..e6abf46 100644
--- a/src/qml/PageView.qml
+++ b/src/qml/PageView.qml
@@ -50,14 +50,12 @@ Rectangle {
     property int itemWidth: root.width / 2
     property int itemHeight: root.height / 2 - 50
 
+    property bool interactive: true
+
     property string background: "#83bfe5"
 
     property alias currentIndex: pathView.currentIndex
     property alias count: pathView.count
-    property Item currentWebView: {
-        return get(currentIndex) ? get(currentIndex).item.webView : null
-    }
-
 
     property string viewState: "page"
 
@@ -69,21 +67,10 @@ Rectangle {
             property alias title: webEngineView.title
 
             property var image: QtObject {
-                property string imageUrl: "qrc:///icon.png"
+                property string imageUrl: "qrc:///icon"
                 property string url: "about:blank"
             }
 
-            function grabImage() {
-                if (image.url == webEngineView.url)
-                    return
-
-                image.url = webEngineView.url
-                webEngineView.grabToImage(function(result) {
-                    image.imageUrl = result.url;
-                    console.log("grabImage("+result.url+")")
-                });
-            }
-
             visible: opacity != 0.0
 
             Behavior on opacity {
@@ -120,11 +107,24 @@ Rectangle {
                     top: permBar.bottom
                 }
 
+                function takeSnapshot() {
+                    console.log("takeSnapshot")
+                    if (tabItem.image.url == webEngineView.url)
+                        return
+
+                    tabItem.image.url = webEngineView.url
+                    blur.grabToImage(function(result) {
+                        tabItem.image.imageUrl = result.url;
+                        console.log("takeSnapshot("+result.url+")")
+                    });
+                }
+
+/*
                 settings.autoLoadImages: appSettings.autoLoadImages
                 settings.javascriptEnabled: appSettings.javaScriptEnabled
                 settings.errorPageEnabled: appSettings.errorPageEnabled
                 settings.pluginsEnabled: appSettings.pluginsEnabled
-
+*/
                 onCertificateError: {
                     if (!acceptedCertificates.shouldAutoAccept(error)){
                         error.defer()
@@ -171,13 +171,35 @@ Rectangle {
                     permBar.requestedFeature = feature;
                     permBar.visible = true;
                 }
+            }
+
+            Desaturate {
+                id: desaturate
+                visible: desaturation != 0.0
+                anchors.fill: webEngineView
+                source: webEngineView
+                desaturation: root.interactive ? 0.0 : 1.0
 
-                onLoadingChanged: {
-                    if (!loading && visible)
-                        grabImage()
+                Behavior on desaturation {
+                    NumberAnimation { duration: animationDuration }
                 }
             }
 
+            FastBlur {
+                id: blur
+                visible: radius != 0.0
+                anchors.fill: desaturate
+                source: desaturate
+                radius: desaturate.desaturation * 25
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                enabled: !root.interactive
+
+                onWheel: wheel.accepted = true
+            }
+
             Rectangle {
                 id: findBar
                 anchors.top: webEngineView.top
@@ -200,17 +222,17 @@ Rectangle {
                     }
                     ToolButton {
                         id: findBackwardButton
-                        iconSource: "qrc:///previous.png"
+                        iconSource: "qrc:///previous"
                         onClicked: webEngineView.findText(findTextField.text, WebEngineView.FindBackward)
                     }
                     ToolButton {
                         id: findForwardButton
-                        iconSource: "qrc:///next.png"
+                        iconSource: "qrc:///next"
                         onClicked: webEngineView.findText(findTextField.text)
                     }
                     ToolButton {
                         id: findCancelButton
-                        iconSource: "qrc:///stop.png"
+                        iconSource: "qrc:///stop"
                         onClicked: findBar.visible = false
                     }
                 }
@@ -224,7 +246,6 @@ Rectangle {
 
     function createEmptyTab() {
         var tab = add(tabComponent)
-        //timer.running = true
         return tab
     }
 
@@ -248,7 +269,6 @@ Rectangle {
 
     function remove(index) {
         listModel.remove(index)
-        pathView.model = listModel
         if (listModel.count == 0)
             engine.rootWindow.close()
     }
@@ -285,13 +305,10 @@ Rectangle {
             ]
 
             transitions: Transition {
-                SequentialAnimation {
-                    ParallelAnimation {
-                        ColorAnimation { property: "color"; duration: animationDuration }
-                        PropertyAnimation { properties: "x,y"; duration: animationDuration }
-                        PropertyAnimation { properties: "width,height"; duration: animationDuration}
-                        PropertyAnimation { properties: "visibility"; duration: animationDuration }
-                    }
+                ParallelAnimation {
+                    PropertyAnimation { property: "visibility"; duration: animationDuration }
+                    PropertyAnimation { properties: "x,y"; duration: animationDuration }
+                    PropertyAnimation { properties: "width,height"; duration: animationDuration}
                 }
             }
 
@@ -367,18 +384,21 @@ Rectangle {
                     height: wrapper.height
                     Rectangle {
                         visible: wrapper.isCurrentItem && !pathView.moving
-                        width: 40
-                        height: 40
+                        width: 45
+                        height: 45
                         radius: width / 2
-                        color: uiBorderColor
+                        color: closeButton.pressed ? buttonHighlightColor : "white"
+                        border.width: 1
+                        border.color: "black"
                         anchors {
                             horizontalCenter: parent.right
                             verticalCenter: parent.top
                         }
                         Image {
                             anchors.fill: parent
-                            source: "qrc:///stop.png"
+                            source: "qrc:///close"
                             MouseArea {
+                                id: closeButton
                                 anchors.fill: parent
                                 onClicked: {
                                     var index = indexForPosition(mouse.x, mouse.y)
@@ -393,7 +413,7 @@ Rectangle {
                     anchors.horizontalCenter: parent.horizontalCenter
                     text: item.title
                     font.pointSize: 12
-                    color: wrapper.PathView.isCurrentItem ? "black" : uiColor
+                    color: wrapper.isCurrentItem ? "black" : uiColor
                 }
             }
             Behavior on scale {
diff --git a/src/qml/URLBar.qml b/src/qml/URLBar.qml
deleted file mode 100644
index a3fed71..0000000
--- a/src/qml/URLBar.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-import QtQuick 2.5
-import QtQuick.Controls 1.5
-import QtQuick.Controls.Styles 1.2
-
-import "assets"
-
-TextField {
-    id: addressBar
-    UIButton {
-        id: reloadButton
-        source: currentWebView && currentWebView.loading ? "qrc:///stop.png" : "qrc:///refresh.png"
-        height: parent.height - 5
-        width: implicitWidth - 5
-        anchors {
-            rightMargin: 10
-            right: parent.right
-            verticalCenter: addressBar.verticalCenter;
-        }
-        onClicked: currentWebView.loading ? currentWebView.stop() : currentWebView.reload()
-    }
-    style: TextFieldStyle {
-        textColor: "black"
-        font.family: "Helvetica"
-        font.pointSize: 16
-        selectionColor: uiSelectionColor
-        selectedTextColor: "black"
-        background: Rectangle {
-            implicitWidth: 200
-            implicitHeight: 40
-            border.color: uiBorderColor
-            border.width: 1
-        }
-        padding {
-            right: 10
-            left: 10
-        }
-    }
-}
diff --git a/src/qml/assets/UIButton.qml b/src/qml/assets/UIButton.qml
index 5792a89..feb5dcd 100644
--- a/src/qml/assets/UIButton.qml
+++ b/src/qml/assets/UIButton.qml
@@ -7,16 +7,21 @@ import QtQuick.Layouts 1.3
 ToolButton {
     id: root
 
-    property string source;
-    property string color: "white"
+    property string source
+    property real radius: 0.0
+    property string color: uiColor
+    property string highlightColor: uiBorderColor
     style: ButtonStyle {
         background: Rectangle {
-            implicitWidth: 40
-            implicitHeight: 40
-            color: root.color
+            implicitWidth: 60
+            implicitHeight: 60
+            color: root.pressed ? root.highlightColor : root.color
+            radius: root.radius
             Image {
                 source: root.source
-                anchors.fill: parent
+                width: Math.min(50, parent.width)
+                height: Math.min(50, parent.width)
+                anchors.centerIn: parent
             }
         }
     }
diff --git a/src/qml/assets/icons/busy.png b/src/qml/assets/icons/busy.png
deleted file mode 100644
index 3b60d26..0000000
--- a/src/qml/assets/icons/busy.png
+++ /dev/null
diff --git a/src/qml/assets/icons/close.png b/src/qml/assets/icons/close.png
new file mode 100644
index 0000000..54351ab
--- /dev/null
+++ b/src/qml/assets/icons/close.png
diff --git a/src/qml/assets/icons/home.png b/src/qml/assets/icons/home.png
index 92d01d1..42b8cac 100644
--- a/src/qml/assets/icons/home.png
+++ b/src/qml/assets/icons/home.png
diff --git a/src/qml/assets/icons/next_inactive.png b/src/qml/assets/icons/next_inactive.png
new file mode 100644
index 0000000..1903032
--- /dev/null
+++ b/src/qml/assets/icons/next_inactive.png
diff --git a/src/qml/assets/icons/previous_incative.png b/src/qml/assets/icons/previous_incative.png
new file mode 100644
index 0000000..a790bfd
--- /dev/null
+++ b/src/qml/assets/icons/previous_incative.png
diff --git a/src/qml/assets/icons/settings.png b/src/qml/assets/icons/settings.png
new file mode 100644
index 0000000..fbea69d
--- /dev/null
+++ b/src/qml/assets/icons/settings.png
diff --git a/src/qml/assets/icons/star.png b/src/qml/assets/icons/star.png
new file mode 100644
index 0000000..3c4ead9
--- /dev/null
+++ b/src/qml/assets/icons/star.png
diff --git a/src/resources.qrc b/src/resources.qrc
index b7307b7..2667dad 100644
--- a/src/resources.qrc
+++ b/src/resources.qrc
@@ -3,19 +3,22 @@
         <file>qml/BrowserDialog.qml</file>
         <file>qml/BrowserWindow.qml</file>
         <file>qml/FeaturePermissionBar.qml</file>
-        <file>qml/LoadIndicator.qml</file>
         <file>qml/MockTouchPoint.qml</file>
         <file>qml/PageView.qml</file>
-        <file>qml/URLBar.qml</file>
+        <file>qml/NavigationBar.qml</file>
         <file>qml/assets/UIButton.qml</file>
-        <file alias="busy.png">qml/assets/icons/busy.png</file>
-        <file alias="home.png">qml/assets/icons/home.png</file>
-        <file alias="tabs.png">qml/assets/icons/tabs.png</file>
-        <file alias="next.png">qml/assets/icons/next.png</file>
-        <file alias="previous.png">qml/assets/icons/previous.png</file>
-        <file alias="refresh.png">qml/assets/icons/refresh.png</file>
-        <file alias="stop.png">qml/assets/icons/stop.png</file>
-        <file alias="touchpoint.png">qml/assets/icons/touchpoint.png</file>
-        <file alias="icon.png">qml/assets/icons/icon.png</file>
+        <file alias="home">qml/assets/icons/home.png</file>
+        <file alias="tabs">qml/assets/icons/tabs.png</file>
+        <file alias="next">qml/assets/icons/next.png</file>
+        <file alias="previous">qml/assets/icons/previous.png</file>
+        <file alias="refresh">qml/assets/icons/refresh.png</file>
+        <file alias="stop">qml/assets/icons/stop.png</file>
+        <file alias="touchpoint">qml/assets/icons/touchpoint.png</file>
+        <file alias="icon">qml/assets/icons/icon.png</file>
+        <file alias="close">qml/assets/icons/close.png</file>
+        <file alias="star">qml/assets/icons/star.png</file>
+        <file alias="settings">qml/assets/icons/settings.png</file>
+        <file alias="previous_inactive">qml/assets/icons/previous_incative.png</file>
+        <file alias="next_inactive">qml/assets/icons/next_inactive.png</file>
     </qresource>
 </RCC>
diff --git a/src/src.pro b/src/src.pro
index e285a77..e5fda04 100644
--- a/src/src.pro
+++ b/src/src.pro
@@ -21,7 +21,7 @@ OTHER_FILES = \
     qml/LoadIndicator.qml \
     qml/MockTouchPoint.qml \
     qml/PageView.qml \
-    qml/URLBar.qml \
+    qml/NavigationBar.qml \
 
 QT += qml quick webengine
 QT_PRIVATE += quick-private gui-private core-private