scroll arrows when there are too many tabs

declarativeimports/plasmacomponents/qml/TabBar.qml

@@ -87,13 +87,14 @@ FocusScope {
         prefix: "sunken"
     }
 
+    clip: true
     PlasmaCore.FrameSvgItem {
         id: buttonFrame
 
         visible: currentTab !== null
-        x: currentTab.x + backgroundFrame.margins.left
+        x: tabBarLayout.x + currentTab.x + backgroundFrame.margins.left
         y: backgroundFrame.margins.top
-        width: currentTab.width + buttonFrame.margins.left + buttonFrame.margins.right
+        width: currentTab.width
         height: currentTab.height + buttonFrame.margins.top + buttonFrame.margins.bottom
         imagePath: "widgets/button"
         prefix: "normal"
@@ -105,14 +106,46 @@ FocusScope {
         }
     }
 
-    Private.TabBarLayout {
+    Item {
-        id: tabBarLayout
+        id: tabbarScroller
+        clip: true
         anchors {
             fill: parent
             leftMargin: backgroundFrame.margins.left + buttonFrame.margins.left
             topMargin: backgroundFrame.margins.top + buttonFrame.margins.top
-            rightMargin: backgroundFrame.margins.right + buttonFrame.margins.right
+            rightMargin: backgroundFrame.margins.right + buttonFrame.margins.right + (buttonsLayout.visible ? buttonsLayout.width : 0)
             bottomMargin: backgroundFrame.margins.bottom + buttonFrame.margins.bottom
         }
+        
+        Private.TabBarLayout {
+            id: tabBarLayout
+            width: Math.max(parent.width, implicitWidth)
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+        }
+    }
+    Row {
+        id: buttonsLayout
+        visible: tabBarLayout.width > root.width - backgroundFrame.margins.left - backgroundFrame.margins.right
+        height: Math.min(parent.height, theme.mediumIconSize)
+        anchors {
+            right: parent.right
+            verticalCenter: parent.verticalCenter
+            rightMargin: Math.min(y, backgroundFrame.margins.right)
+        }
+        ToolButton {
+            height: parent.height
+            width: height
+            iconSource: "go-previous"
+            onClicked: tabBarLayout.x = Math.min(0, tabBarLayout.x + tabBarLayout.height)
+        }
+        ToolButton {
+            height: parent.height
+            width: height
+            iconSource: "go-next"
+            onClicked: tabBarLayout.x = Math.max(-tabBarLayout.width + tabbarScroller.width, tabBarLayout.x - tabBarLayout.height)
+        }
     }
 }

declarativeimports/plasmacomponents/qml/TabButton.qml

@@ -83,7 +83,7 @@ Item {
 
     // Common Public API
     property Item tab
-    property bool checked: (internal.tabGroup == null) ? (root.parent.parent.currentTab == root) : (internal.tabGroup.currentTab == tab)
+    property bool checked: (internal.tabGroup == null) ? (internal.tabBar.currentTab == root) : (internal.tabGroup.currentTab == tab)
 
     property bool pressed: mouseArea.pressed == true && mouseArea.containsMouse
     property alias text: label.text
@@ -100,8 +100,8 @@ Item {
         target: root
         onPressedChanged: {
             //TabBar is the granparent
-            root.parent.parent.currentTab = root
+            internal.tabBar.currentTab = root
-            root.parent.parent.forceActiveFocus()
+            internal.tabBar.forceActiveFocus()
         }
         onVisibleChanged: root.parent.childrenChanged()
     }
@@ -109,6 +109,7 @@ Item {
     QtObject {
         id: internal
 
+        property Item tabBar: Utils.findParent(root, "currentTab")
         property Item tabGroup: Utils.findParent(tab, "currentTab")
         property bool portrait: root.height >= label.paintedHeight + 16
 
@@ -168,7 +169,7 @@ Item {
                 internal.tabGroup.currentTab = tab
             }
             //TabBar is the granparent, done here too in case of no tabgroup
-            root.parent.parent.currentTab = root
+            internal.tabBar.currentTab = root
         }
 
         anchors.fill: parent

declarativeimports/plasmacomponents/qml/private/TabBarLayout.qml

@@ -55,6 +55,7 @@ Properties:
 **/
 
 import QtQuick 1.1
+import "AppManager.js" as Utils
 
 Item {
     id: root
@@ -89,12 +90,13 @@ Item {
         property Item firstTab: firstButton ? (firstButton.tab != null ? firstButton.tab : null) : null
         property Item tabGroup: firstTab ? (firstTab.parent ? firstTab.parent.parent.parent : null) : null
         property bool mirrored: root.LayoutMirroring.enabled
+        property Item tabBar: Utils.findParent(root, "currentTab")
 
         onMirroredChanged: layoutChildren()
 
         function currentButtonIndex() {
             for (var i = 0; i < root.children.length; ++i) {
-                if (root.children[i] == root.parent.currentTab)
+                if (root.children[i] == priv.tabBar.currentTab)
                     return i
             }
             return -1
@@ -104,7 +106,7 @@ Item {
             if (tabGroup) {
                 tabGroup.currentTab = root.children[index].tab
             }
-            root.parent.currentTab = root.children[index]
+            priv.tabBar.currentTab = root.children[index]
         }
 
         function layoutChildren() {
@@ -146,12 +148,12 @@ Item {
             }
             root.implicitWidth = contentWidth
             root.implicitHeight = contentHeight
-            if (root.parent.currentTab === null) {
+            if (priv.tabBar.currentTab === null) {
                 //99% of the cases this loop will be length 1 but a tabbar can also have other children, such as Repeater
                 for (var i = 0; i < tabBarLayout.children.length; ++i) {
                     //anything with a checked property may act as tabbutton
                     if (tabBarLayout.children[i].checked !== undefined) {
-                        root.parent.currentTab = tabBarLayout.children[i]
+                        priv.tabBar.currentTab = tabBarLayout.children[i]
                         break;
                     }
                 }