Fix highlights for toolbar buttons to be more visible

app/gui/NavigableToolButton.qml

@@ -2,8 +2,27 @@ import QtQuick 2.0
 import QtQuick.Controls 2.2
 
 ToolButton {
+    property string iconSource
+
     activeFocusOnTab: true
 
+    // FIXME: We're using an Image here rather than icon.source because
+    // icons don't work on Qt 5.9 LTS.
+    Image {
+        id: image
+        source: iconSource
+        anchors.centerIn: parent.background
+        sourceSize {
+            width: parent.background.width * 1.10
+            height: parent.background.height * 1.10
+        }
+    }
+
+    // This determines the size of the Material highlight. We increase it
+    // from the default because we use larger than normal icons for TV readability.
+    background.width: (parent.height - parent.anchors.bottomMargin - parent.anchors.topMargin) * 0.60
+    background.height: (parent.height - parent.anchors.bottomMargin - parent.anchors.topMargin) * 0.60
+
     Keys.onReturnPressed: {
         clicked()
     }

app/gui/main.qml

@@ -175,28 +175,21 @@ ApplicationWindow {
 
     header: ToolBar {
         id: toolBar
+        height: 60
         anchors.topMargin: 5
         anchors.bottomMargin: 5
 
         RowLayout {
             spacing: 20
+            anchors.leftMargin: 10
+            anchors.rightMargin: 10
             anchors.fill: parent
 
             NavigableToolButton {
                 // Only make the button visible if the user has navigated somewhere.
                 visible: stackView.depth > 1
 
-                // FIXME: We're using an Image here rather than icon.source because
+                iconSource: "qrc:/res/arrow_left.svg"
-                // icons don't work on Qt 5.9 LTS.
-                Image {
-                    source: "qrc:/res/arrow_left.svg"
-                    anchors.centerIn: parent
-                    sourceSize {
-                        // The icon should be square so use the height as the width too
-                        width: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                        height: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                    }
-                }
 
                 onClicked: stackView.pop()
 
@@ -219,14 +212,7 @@ ApplicationWindow {
                 id: addPcButton
                 visible: stackView.currentItem.objectName === "Computers"
 
-                Image {
+                iconSource:  "qrc:/res/ic_add_to_queue_white_48px.svg"
-                    source: "qrc:/res/ic_add_to_queue_white_48px.svg"
-                    anchors.centerIn: parent
-                    sourceSize {
-                        width: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                        height: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                    }
-                }
 
                 ToolTip.delay: 1000
                 ToolTip.timeout: 3000
@@ -253,14 +239,7 @@ ApplicationWindow {
 
                 id: updateButton
 
-                Image {
+                iconSource: "qrc:/res/update.svg"
-                    source: "qrc:/res/update.svg"
-                    anchors.centerIn: parent
-                    sourceSize {
-                        width: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                        height: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                    }
-                }
 
                 ToolTip.delay: 1000
                 ToolTip.timeout: 3000
@@ -293,14 +272,7 @@ ApplicationWindow {
                 id: helpButton
                 visible: SystemProperties.hasBrowser
 
-                Image {
+                iconSource: "qrc:/res/question_mark.svg"
-                    source: "qrc:/res/question_mark.svg"
-                    anchors.centerIn: parent
-                    sourceSize {
-                        width: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                        height: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                    }
-                }
 
                 ToolTip.delay: 1000
                 ToolTip.timeout: 3000
@@ -330,14 +302,7 @@ ApplicationWindow {
                 ToolTip.visible: hovered
                 ToolTip.text: "Gamepad Mapper"
 
-                Image {
+                iconSource: "qrc:/res/ic_videogame_asset_white_48px.svg"
-                    source: "qrc:/res/ic_videogame_asset_white_48px.svg"
-                    anchors.centerIn: parent
-                    sourceSize {
-                        width: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                        height: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                    }
-                }
 
                 onClicked: navigateTo("qrc:/gui/GamepadMapper.qml", "Gamepad Mapping")
 
@@ -349,14 +314,7 @@ ApplicationWindow {
             NavigableToolButton {
                 id: settingsButton
 
-                Image {
+                iconSource:  "qrc:/res/settings.svg"
-                    source: "qrc:/res/settings.svg"
-                    anchors.centerIn: parent
-                    sourceSize {
-                        width: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                        height: toolBar.height - toolBar.anchors.bottomMargin - toolBar.anchors.topMargin
-                    }
-                }
 
                 onClicked: navigateTo("qrc:/gui/SettingsView.qml", "Settings")