QmlDesigner: Controls 1 cleanup

* Replace ScrollView Controls 1 with ScrollView Controls 2
* Replace TabView with TabBar and StackLayout
* Remove unused styles
* Replace Controls 1 imports
* Remove print statement in FontSection
* Fix layout width by correcting CheckBox width
* Remove TabView from QtObjectPane

Task-number: QDS-2454
Task-number: QDS-2455
Task-number: QDS-2456
Change-Id: I913d326afb012375dd5b804171cb8cd67681514c
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

28 files changed, 836 insertions, 807 deletions

diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml
index cd3ddef34d..1cbec5d802 100644
--- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml
+++ b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemDelegate.qml
@@ -23,9 +23,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.0
+import QtQuick 2.15
+import QtQuick.Controls 2.15
 import QtQuickDesignerTheme 1.0
 import HelperWidgets 2.0
 
@@ -76,8 +75,6 @@ Item {
             id: mouseRegion
             anchors.fill: parent
             tooltip: itemName
-
-
             onPressed: {
                 rootView.startDragAndDrop(mouseRegion, itemLibraryEntry)
             }
diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
index 30b741f99d..c761952693 100644
--- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
+++ b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
@@ -23,15 +23,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.0
-import "../common"
-
-import QtQuick.Layouts 1.0
-import HelperWidgets 2.0
-
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
 
 /* The view displaying the item grid.
 
@@ -65,9 +61,6 @@ ScrollView {
 
     Item {
         id: styleConstants
-        readonly property color backgroundColor: Theme.qmlDesignerBackgroundColorDarkAlternate()
-        readonly property color lighterBackgroundColor: Theme.color(Theme.FancyToolBarSeparatorColor)
-
         property int textWidth: 58
         property int textHeight: Theme.smallFontPixelSize() * 2
 
@@ -81,48 +74,37 @@ ScrollView {
         2 * cellVerticalMargin + cellVerticalSpacing
     }
 
-    Rectangle {
-        id: background
-        anchors.fill: parent
-        color: styleConstants.backgroundColor
-    }
-
-    style: DesignerScrollViewStyle {
-
-    }
-
-    Flickable {
-        contentHeight: column.height
-        Column {
-            id: column
-            Repeater {
-                model: itemLibraryModel  // to be set in Qml context
-                delegate: Section {
-                    width: itemsView.viewport.width
-                    caption: sectionName // to be set by model
-                    visible: sectionVisible
-                    topPadding: 2
-                    leftPadding: 2
-                    rightPadding: 1
-                    expanded: sectionExpanded
-                    onExpandedChanged: itemLibraryModel.setExpanded(expanded, sectionName);
-                    Grid {
-                        id: itemGrid
-
-                        columns: parent.width / styleConstants.cellWidth
-                        property int flexibleWidth: (parent.width - styleConstants.cellWidth * columns) / columns
-
-                        Repeater {
-                            model: sectionEntries
-                            delegate: ItemDelegate {
-                                visible: itemVisible
-                                width: styleConstants.cellWidth + itemGrid.flexibleWidth
-                                height: styleConstants.cellHeight
-                            }
+    Column {
+        id: column
+        Repeater {
+            model: itemLibraryModel  // to be set in Qml context
+            delegate: Section {
+                width: itemsView.width -
+                       (itemsView.verticalScrollBarVisible ? StudioTheme.Values.scrollBarThickness : 0)
+                caption: sectionName // to be set by model
+                visible: sectionVisible
+                topPadding: 2
+                leftPadding: 2
+                rightPadding: 1
+                expanded: sectionExpanded
+                onExpandedChanged: itemLibraryModel.setExpanded(expanded, sectionName);
+                Grid {
+                    id: itemGrid
+
+                    columns: parent.width / styleConstants.cellWidth
+                    property int flexibleWidth: (parent.width - styleConstants.cellWidth * columns) / columns
+
+                    Repeater {
+                        model: sectionEntries
+                        delegate: ItemDelegate {
+                            visible: itemVisible
+                            width: styleConstants.cellWidth + itemGrid.flexibleWidth
+                            height: styleConstants.cellHeight
                         }
                     }
                 }
             }
         }
     }
+
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml
index 5434e4705b..22a14efa53 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml
@@ -33,7 +33,7 @@ Section {
     caption: qsTr("Advanced")
 
     SectionLayout {
-        rows: 4
+        columns: 2
 
         Label {
             text: qsTr("Origin")
@@ -171,7 +171,6 @@ Section {
                 backendValue: backendValues.focus
                 text: backendValues.focus.valueToString
                 enabled: backendValues.focus.isAvailable
-                implicitWidth: 180
             }
             ExpandingSpacer {
             }
@@ -187,7 +186,6 @@ Section {
                 backendValue: backendValues.activeFocusOnTab
                 text: backendValues.activeFocusOnTab.valueToString
                 enabled: backendValues.activeFocusOnTab.isAvailable
-                implicitWidth: 180
             }
             ExpandingSpacer {
             }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AlignDistributeSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AlignDistributeSection.qml
index 36f4c02642..e21879057b 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AlignDistributeSection.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AlignDistributeSection.qml
@@ -32,10 +32,10 @@ import StudioTheme 1.0 as StudioTheme
 Section {
     anchors.left: parent.left
     anchors.right: parent.right
+
     caption: qsTr("Align")
 
-    ColumnLayout {
-        width: parent.width
+    SectionLayout {
         enabled: alignDistribute.multiSelection &&
                  !alignDistribute.selectionHasAnchors &&
                  alignDistribute.selectionExclusivlyItems &&
@@ -49,8 +49,11 @@ Section {
         Label {
             text: qsTr("Align objects")
             width: 120
+            Layout.columnSpan: 2
         }
+
         RowLayout {
+            Layout.columnSpan: 2
             Row {
                 spacing: -StudioTheme.Values.border
                 AbstractButton {
@@ -105,8 +108,11 @@ Section {
         Label {
             text: qsTr("Distribute objects")
             width: 120
+            Layout.columnSpan: 2
         }
+
         RowLayout {
+            Layout.columnSpan: 2
             Row {
                 spacing: -StudioTheme.Values.border
                 AbstractButton {
@@ -161,8 +167,11 @@ Section {
         Label {
             text: qsTr("Distribute spacing")
             width: 120
+            Layout.columnSpan: 2
         }
+
         RowLayout {
+            Layout.columnSpan: 2
             Row {
                 spacing: -StudioTheme.Values.border
                 AbstractButton {
@@ -242,18 +251,16 @@ Section {
             }
         }
 
-        SectionLayout {
-            columns: 2
-
-            ItemFilterModel {
-                id: itemFilterModel
-                modelNodeBackendProperty: modelNodeBackend
-                selectionOnly: true
-            }
+        ItemFilterModel {
+            id: itemFilterModel
+            modelNodeBackendProperty: modelNodeBackend
+            selectionOnly: true
+        }
 
-            Label {
-                text: qsTr("Align to")
-            }
+        Label {
+            text: qsTr("Align to")
+        }
+        SecondColumnLayout {
             ComboBox {
                 id: alignToComboBox
                 Layout.fillWidth: true
@@ -267,9 +274,14 @@ Section {
                 }
             }
 
-            Label {
-                text: qsTr("Key object")
+            ExpandingSpacer {
             }
+        }
+
+        Label {
+            text: qsTr("Key object")
+        }
+        SecondColumnLayout {
             ComboBox {
                 id: keyObjectComboBox
                 enabled: alignToComboBox.currentIndex === 2
@@ -285,11 +297,15 @@ Section {
                         lastSelectedItem = "" // TODO
                 }
             }
+
+            ExpandingSpacer {
+            }
         }
 
         SectionLayout {
             columns: 1
             Layout.topMargin: 30
+            Layout.columnSpan: 2
             visible: alignDistribute.multiSelection &&
                      (alignDistribute.selectionHasAnchors ||
                      !alignDistribute.selectionExclusivlyItems ||
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml
index 7d18d6a1f9..406e5af011 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml
@@ -23,9 +23,9 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import QtQuick.Layouts 1.15
 import QtQuickDesignerTheme 1.0
 
 import StudioControls 1.0 as StudioControls
@@ -34,11 +34,9 @@ import StudioTheme 1.0 as StudioTheme
 RowLayout {
     id: anchorRow
 
-    anchors.left: parent.left
-    anchors.right: parent.right
     opacity: enabled ? 1 : 0.5
 
-    property alias iconSource: icon.source
+    property alias iconSource: iconLabel.icon
 
     property variant anchorMargin
 
@@ -64,8 +62,10 @@ RowLayout {
     readonly property color __defaultTextColor: StudioTheme.Values.themeTextColor
 
     IconLabel {
-        id: icon
+        id: iconLabel
         Layout.alignment: Qt.AlignTop
+        Layout.topMargin: 4
+        Layout.leftMargin: 4
     }
 
     GridLayout {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml
index d66b50da0b..77af9247cf 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml
@@ -23,10 +23,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
@@ -35,14 +36,15 @@ Rectangle {
     width: 320
     height: 400
     color: Theme.qmlDesignerBackgroundColorDarkAlternate()
+
     MouseArea {
         anchors.fill: parent
         onClicked: forceActiveFocus()
     }
 
     ScrollView {
+        clip: true
         anchors.fill: parent
-        horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
 
         Column {
             y: -1
@@ -57,7 +59,6 @@ Rectangle {
                 SectionLayout {
                     Label {
                         text: qsTr("Type")
-
                     }
 
                     SecondColumnLayout {
@@ -280,7 +281,6 @@ Rectangle {
                         Item {
                             width: 10
                             height: 10
-
                         }
 
                         CheckBox {
@@ -319,88 +319,92 @@ Rectangle {
                 width: 4
             }
 
-            TabView {
+            StudioControls.TabBar {
+                id: tabBar
+
                 anchors.left: parent.left
                 anchors.right: parent.right
-                frameVisible: false
 
-                id: tabView
+                StudioControls.TabButton {
+                    text: backendValues.className.value
+                }
+                StudioControls.TabButton {
+                    text: qsTr("Layout")
+                }
+                StudioControls.TabButton {
+                    text: qsTr("Advanced")
+                }
+            }
 
-                height: currentHeight + extraHeight
+            StackLayout {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                currentIndex: tabBar.currentIndex
 
-                property int currentHeight: getTab(currentIndex).item.implicitHeight
+                property int currentHeight: children[currentIndex].implicitHeight
                 property int extraHeight: 40
 
-                Tab {
-                    title: backendValues.className.value
+                height: currentHeight + extraHeight
+
+                Column {
+                    anchors.left: parent.left
+                    anchors.right: parent.right
 
-                    component: Column {
+                    Loader {
                         anchors.left: parent.left
                         anchors.right: parent.right
+                        visible: theSource !== ""
 
-                        Loader {
-                            anchors.left: parent.left
-                            anchors.right: parent.right
-                            visible: theSource !== ""
+                        id: specificsTwo;
+                        sourceComponent: specificQmlComponent
 
-                            id: specificsTwo;
-                            sourceComponent: specificQmlComponent
+                        property string theSource: specificQmlData
 
-                            property string theSource: specificQmlData
-
-                            onTheSourceChanged: {
-                                active = false
-                                active = true
-                            }
+                        onTheSourceChanged: {
+                            active = false
+                            active = true
                         }
+                    }
 
-                        Loader {
-                            anchors.left: parent.left
-                            anchors.right: parent.right
+                    Loader {
+                        anchors.left: parent.left
+                        anchors.right: parent.right
 
-                            id: specificsOne;
-                            source: specificsUrl;
+                        id: specificsOne;
+                        source: specificsUrl;
 
-                            property int loaderHeight: specificsOne.item.height + tabView.extraHeight
-                        }
+                        property int loaderHeight: specificsOne.item.height + tabView.extraHeight
                     }
                 }
 
-                Tab {
-                    title: qsTr("Layout")
-                    component: Column {
-                        anchors.left: parent.left
-                        anchors.right: parent.right
+                Column {
+                    anchors.left: parent.left
+                    anchors.right: parent.right
 
-                        LayoutSection {
-                        }
+                    LayoutSection {
+                    }
 
-                        MarginSection {
-                            visible: anchorBackend.isInLayout
-                            backendValueTopMargin: backendValues.Layout_topMargin
-                            backendValueBottomMargin: backendValues.Layout_bottomMargin
-                            backendValueLeftMargin: backendValues.Layout_leftMargin
-                            backendValueRightMargin: backendValues.Layout_rightMargin
-                            backendValueMargins: backendValues.Layout_margins
-                        }
+                    MarginSection {
+                        visible: anchorBackend.isInLayout
+                        backendValueTopMargin: backendValues.Layout_topMargin
+                        backendValueBottomMargin: backendValues.Layout_bottomMargin
+                        backendValueLeftMargin: backendValues.Layout_leftMargin
+                        backendValueRightMargin: backendValues.Layout_rightMargin
+                        backendValueMargins: backendValues.Layout_margins
+                    }
 
-                        AlignDistributeSection {
-                            visible: !anchorBackend.isInLayout
-                        }
+                    AlignDistributeSection {
+                        visible: !anchorBackend.isInLayout
                     }
                 }
 
-                Tab {
-                    anchors.fill: parent
-                    title: qsTr("Advanced")
-                    component: Column {
-                        anchors.left: parent.left
-                        anchors.right: parent.right
+                Column {
+                    anchors.left: parent.left
+                    anchors.right: parent.right
 
-                        AdvancedSection {
-                        }
-                        LayerSection {
-                        }
+                    AdvancedSection {
+                    }
+                    LayerSection {
                     }
                 }
             }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml
index 7eeb8d2285..458e394fbf 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml
@@ -50,8 +50,8 @@ Section {
         }
 
         AnchorRow {
-            visible: anchorBackend.topAnchored;
-            iconSource: "image://icons/anchor-top"
+            visible: anchorBackend.topAnchored
+            iconSource: StudioTheme.Constants.anchorTop
             anchorMargin: backendValues.anchors_topMargin
             targetName: anchorBackend.topTarget
             onTargetChanged: {
@@ -73,8 +73,8 @@ Section {
         }
 
         AnchorRow {
-            visible: anchorBackend.bottomAnchored;
-            iconSource: "image://icons/anchor-bottom"
+            visible: anchorBackend.bottomAnchored
+            iconSource: StudioTheme.Constants.anchorBottom
             anchorMargin: backendValues.anchors_bottomMargin
             targetName: anchorBackend.bottomTarget
             onTargetChanged: {
@@ -97,8 +97,8 @@ Section {
         }
 
         AnchorRow {
-            visible: anchorBackend.leftAnchored;
-            iconSource: "image://icons/anchor-left"
+            visible: anchorBackend.leftAnchored
+            iconSource: StudioTheme.Constants.anchorLeft
             anchorMargin: backendValues.anchors_leftMargin
             targetName: anchorBackend.leftTarget
             onTargetChanged: {
@@ -120,8 +120,8 @@ Section {
         }
 
         AnchorRow {
-            visible: anchorBackend.rightAnchored;
-            iconSource: "image://icons/anchor-right"
+            visible: anchorBackend.rightAnchored
+            iconSource: StudioTheme.Constants.anchorRight
             anchorMargin: backendValues.anchors_rightMargin
             targetName: anchorBackend.rightTarget
             onTargetChanged: {
@@ -145,8 +145,8 @@ Section {
 
         AnchorRow {
             showAlternativeTargets: false
-            visible: anchorBackend.horizontalCentered;
-            iconSource: "image://icons/anchor-horizontal"
+            visible: anchorBackend.horizontalCentered
+            iconSource: StudioTheme.Constants.centerHorizontal
             anchorMargin: backendValues.anchors_horizontalCenterOffset
             targetName: anchorBackend.horizontalTarget
             onTargetChanged: {
@@ -158,8 +158,8 @@ Section {
 
         AnchorRow {
             showAlternativeTargets: false
-            visible: anchorBackend.verticalCentered;
-            iconSource: "image://icons/anchor-vertical"
+            visible: anchorBackend.verticalCentered
+            iconSource: StudioTheme.Constants.centerVertical
             anchorMargin: backendValues.anchors_verticalCenterOffset
             targetName: anchorBackend.verticalTarget
             onTargetChanged: {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml
index 99efa75c1e..5b3a641f4c 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml
@@ -23,10 +23,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
-import HelperWidgets 2.0
+import QtQuick 2.15
 import QtQuick.Layouts 1.0
 import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
 
 Rectangle {
     id: itemPane
@@ -43,6 +43,7 @@ Rectangle {
         anchors.fill: parent
 
         Column {
+            id: rootColumn
             y: -1
             width: itemPane.width
             Section {
@@ -54,7 +55,6 @@ Rectangle {
                 SectionLayout {
                     Label {
                         text: qsTr("Type")
-
                     }
 
                     SecondColumnLayout {
@@ -148,69 +148,30 @@ Rectangle {
                 width: 4
             }
 
-            TabView {
+            Column {
                 anchors.left: parent.left
                 anchors.right: parent.right
-                frameVisible: false
-
-                id: tabView
-                height: Math.max(layoutSectionHeight, specficsHeight)
-
-                property int layoutSectionHeight: 400
-                property int specficsOneHeight: 0
-                property int specficsTwoHeight: 0
-
-                property int specficsHeight: Math.max(specficsOneHeight, specficsTwoHeight)
-
-                property int extraHeight: 40
-
-                Tab {
-                    id: tab
-                    title: backendValues.className.value
-
-                    component: Column {
-                        anchors.left: parent.left
-                        anchors.right: parent.right
-                        Loader {
-                            anchors.left: parent.left
-                            anchors.right: parent.right
-
-                            visible: theSource !== ""
-
-                            id: specificsTwo;
-                            sourceComponent: specificQmlComponent
-
-                            property string theSource: specificQmlData
-
-                            onTheSourceChanged: {
-                                active = false
-                                active = true
-                            }
-
-                            property int loaderHeight: specificsTwo.item.height + tabView.extraHeight
-                            onLoaderHeightChanged: tabView.specficsTwoHeight = loaderHeight
-
-                            onLoaded: {
-                                tabView.specficsTwoHeight = loaderHeight
-                            }
-                        }
-
-                        Loader {
-                            anchors.left: parent.left
-                            anchors.right: parent.right
-
-                            id: specificsOne;
-                            source: specificsUrl;
-
-                            property int loaderHeight: specificsOne.item.height + tabView.extraHeight
-                            onLoaderHeightChanged: tabView.specficsHeight = loaderHeight
-
-                            onLoaded: {
-                                tabView.specficsOneHeight = loaderHeight
-                            }
-                        }
+                Loader {
+                    id: specificsTwo
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    visible: theSource !== ""
+                    sourceComponent: specificQmlComponent
+
+                    property string theSource: specificQmlData
+
+                    onTheSourceChanged: {
+                        active = false
+                        active = true
                     }
                 }
+
+                Loader {
+                    id: specificsOne
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    source: specificsUrl
+                }
             }
         }
     }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml
index 84d5090125..483c4947f0 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml
@@ -156,7 +156,7 @@ StudioControls.ButtonRow {
         buttonIcon: StudioTheme.Constants.centerVertical
         tooltip: qsTr("Anchor item vertically.")
 
-        property bool verticalCentered: anchorBackend.verticalCentered;
+        property bool verticalCentered: anchorBackend.verticalCentered
         onVerticalCenteredChanged: {
             checked = verticalCentered
         }
@@ -179,7 +179,7 @@ StudioControls.ButtonRow {
         buttonIcon: StudioTheme.Constants.centerHorizontal
         tooltip: qsTr("Anchor item horizontally.")
 
-        property bool horizontalCentered: anchorBackend.horizontalCentered;
+        property bool horizontalCentered: anchorBackend.horizontalCentered
         onHorizontalCenteredChanged: {
             checked = horizontalCentered
         }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Button.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Button.qml
index 5f989d7e5f..a20469966a 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Button.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Button.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,48 +23,79 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
-import QtQuick.Controls 1.1 as Controls
-import QtQuick.Controls.Styles 1.1
-import "Constants.js" as Constants
+import QtQuick 2.15
+import QtQuick.Templates 2.15 as T
+import StudioTheme 1.0 as StudioTheme
 
-Controls.Button {
-    property color borderColor: "#222"
-    property color highlightColor: "orange"
-    property color textColor: "#eee"
-    style: ButtonStyle {
-        label: Text {
-            color: Constants.colorsDefaultText
-            anchors.fill: parent
-            renderType: Text.NativeRendering
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignHCenter
-            text: control.text
-            opacity: enabled ? 1 : 0.7
-        }
-        background: Rectangle {
-            implicitWidth: 100
-            implicitHeight: 23
-            radius: 3
-            gradient: control.pressed ? pressedGradient : gradient
-            Gradient{
-                id: pressedGradient
-                GradientStop{color: "#333" ; position: 0}
+T.AbstractButton {
+    id: myButton
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    background: Rectangle {
+        id: buttonBackground
+        implicitWidth: 100
+        implicitHeight: 23
+        radius: 3
+        color: StudioTheme.Values.themeControlBackground
+        border.color: StudioTheme.Values.themeControlOutline
+        border.width: StudioTheme.Values.border
+    }
+
+    contentItem: Text {
+        id: buttonText
+        color: StudioTheme.Values.themeTextColor
+        font.family: StudioTheme.Constants.font.family
+        font.pixelSize: StudioTheme.Values.myFontSize
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        anchors.fill: parent
+        renderType: Text.QtRendering
+        text: myButton.text
+    }
+
+    states: [
+        State {
+            name: "default"
+            when: myButton.enabled && !myButton.hovered && !myButton.pressed
+                  && !myButton.checked
+            PropertyChanges {
+                target: buttonBackground
+                color: StudioTheme.Values.themeControlBackground
+            }
+        },
+        State {
+            name: "hovered"
+            when: myButton.hovered && !myButton.pressed
+            PropertyChanges {
+                target: buttonBackground
+                color: StudioTheme.Values.themeHoverHighlight
             }
-            Gradient {
-                id: gradient
-                GradientStop {color: "#606060" ; position: 0}
-                GradientStop {color: "#404040" ; position: 0.07}
-                GradientStop {color: "#303030" ; position: 1}
+        },
+        State {
+            name: "pressed"
+            when: myButton.hovered && myButton.pressed
+            PropertyChanges {
+                target: buttonBackground
+                color: StudioTheme.Values.themeControlBackgroundPressed
+                border.color: StudioTheme.Values.themeInteraction
             }
-            Rectangle {
-                anchors.fill: parent
-                anchors.margins: -1
-                color: "transparent"
-                radius: 4
-                opacity: 0.3
-                visible: control.activeFocus
+        },
+        State {
+            name: "disabled"
+            when: !myButton.enabled
+            PropertyChanges {
+                target: buttonBackground
+                color: StudioTheme.Values.themeControlBackgroundDisabled
+                border.color: StudioTheme.Values.themeControlOutlineDisabled
+            }
+            PropertyChanges {
+                target: buttonText
+                color: StudioTheme.Values.themeTextColorDisabled
             }
         }
-    }
+    ]
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ButtonRowButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ButtonRowButton.qml
index 6ba9957cd5..a893a12529 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ButtonRowButton.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ButtonRowButton.qml
@@ -23,10 +23,8 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
-import QtQuick.Controls 1.0 as Controls
-import QtQuick.Layouts 1.0
-import QtQuick.Controls.Private 1.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import QtQuickDesignerTheme 1.0
 
 Item {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
index 8c12d37bb5..3d8291e7e7 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
@@ -38,7 +38,7 @@ Column {
 
     property bool supportGradient: false
 
-    property string caption: "Color"
+    property string caption: qsTr("Color")
 
     property variant backendValue
 
@@ -47,7 +47,6 @@ Column {
             return Qt.rgba(backendValue.value.x, backendValue.value.y, backendValue.value.z, 1);
         else
             return backendValue.value;
-
     }
 
     property alias gradientPropertyName: gradientLine.gradientPropertyName
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml
index 8f1c130089..1261f2ee5e 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml
@@ -73,7 +73,6 @@ Section {
             Layout.fillWidth: true
             width: 160
             property string familyName: backendValue.value
-            onFamilyNameChanged: print(styleNamesForFamily(familyName))
         }
 
         Label {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
index d756b53fe6..4a0665076a 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
@@ -23,12 +23,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.11
-import QtQuick.Layouts 1.12
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import QtQuick.Dialogs 1.3
-
-import HelperWidgets 2.0
 import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
@@ -76,49 +75,52 @@ Dialog {
             anchors.margins: 13
             anchors.bottomMargin: 71
 
-            TabView {
-                id: presetTabView
-                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
-                Layout.fillHeight: true
-                Layout.fillWidth: true
+            StudioControls.TabBar {
+                id: presetTabBar
 
-                Tab {
-                    title: qsTr("System Presets")
-                    anchors.fill: parent
+                anchors.left: parent.left
+                anchors.right: parent.right
 
-                    GradientPresetTabContent {
-                        id: defaultTabContent
-                        viewModel: defaultPresetListModel
-                        editableName: false
-                    }
+                StudioControls.TabButton {
+                    text: qsTr("System Presets")
                 }
+                StudioControls.TabButton {
+                    text: qsTr("User Presets")
+                }
+            }
+
+            StackLayout {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                currentIndex: presetTabBar.currentIndex
+
+                GradientPresetTabContent {
+                    id: defaultTabContent
+                    viewModel: defaultPresetListModel
+                    editableName: false
+                }
+
+                GradientPresetTabContent {
+                    id: customTabContent
+                    viewModel: customPresetListModel
+                    editableName: true
+                    onPresetNameChanged: customPresetListModel.changePresetName(id, name)
+
+                    property int deleteId
+
+                    onDeleteButtonClicked: {
+                        deleteId = id
+                        deleteDialog.open()
+                    }
 
-                Tab {
-                    title: qsTr("User Presets")
-                    anchors.fill: parent
-
-                    GradientPresetTabContent {
-                        id: customTabContent
-                        viewModel: customPresetListModel
-                        editableName: true
-                        onPresetNameChanged: customPresetListModel.changePresetName(id, name)
-
-                        property int deleteId
-
-                        onDeleteButtonClicked: {
-                            deleteId = id
-                            deleteDialog.open()
-                        }
-
-                        MessageDialog {
-                            id: deleteDialog
-                            visible: false
-                            modality: Qt.WindowModal
-                            standardButtons: Dialog.No | Dialog.Yes
-                            title: qsTr("Delete preset?")
-                            text: qsTr("Are you sure you want to delete this preset?")
-                            onAccepted: customPresetListModel.deletePreset(customTabContent.deleteId)
-                        }
+                    MessageDialog {
+                        id: deleteDialog
+                        visible: false
+                        modality: Qt.WindowModal
+                        standardButtons: Dialog.No | Dialog.Yes
+                        title: qsTr("Delete preset?")
+                        text: qsTr("Are you sure you want to delete this preset?")
+                        onAccepted: customPresetListModel.deletePreset(customTabContent.deleteId)
                     }
                 }
             }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
index f26064dd21..fd0fee4cf7 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
@@ -23,12 +23,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.11
-import QtQuick.Layouts 1.12
-import QtQuick.Dialogs 1.3
-
-import HelperWidgets 2.0
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
@@ -48,271 +47,277 @@ Rectangle {
     property real delegateHeight: 178
     property real gridCellWidth: 160
 
-    ScrollView {
+    GridView {
+        id: gradientTable
         Layout.fillWidth: true
         Layout.fillHeight: true
         anchors.fill: parent
+        anchors.leftMargin: 10
+        clip: true
+        delegate: gradientDelegate
+
+        property int gridColumns: width / tabBackground.gridCellWidth;
+        cellWidth: width / gridColumns
+        cellHeight: 185
+
+        property bool bothVisible: horizontal.scrollBarVisible && vertical.scrollBarVisible
+
+        ScrollBar.horizontal: HorizontalScrollBar {
+            id: horizontal
+            parent: gradientTable
+        }
+
+        ScrollBar.vertical: VerticalScrollBar {
+            id: vertical
+            parent: gradientTable
+        }
+
+        Component {
+            id: gradientDelegate
+
+            Rectangle {
+                id: backgroundCard
+                color: StudioTheme.Values.themeControlOutline
+                clip: true
 
-        GridView {
-            id: gradientTable
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            anchors.fill: parent
-            anchors.leftMargin: 10
-            clip: true
-            delegate: gradientDelegate
-
-            property int gridColumns: width / tabBackground.gridCellWidth;
-            cellWidth: width / gridColumns
-            cellHeight: 185
-
-            Component {
-                id: gradientDelegate
-
-                Rectangle {
-                    id: backgroundCard
-                    color: StudioTheme.Values.themeControlOutline
-                    clip: true
-
-                    property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns
-                    property bool isSelected: false
-
-                    width: gradientTable.cellWidth + flexibleWidth - 8
-                    height: tabBackground.delegateHeight
-                    radius: 16
-
-                    function selectPreset(index) {
-                        gradientTable.currentIndex = index
-                        gradientData.stops = stopsPosList
-                        gradientData.colors = stopsColorList
-                        gradientData.stopsCount = stopListSize
-                        gradientData.presetID = presetID
-                        gradientData.presetType = presetTabView.currentIndex
-
-                        if (gradientData.selectedItem != null)
-                            gradientData.selectedItem.isSelected = false
-
-                        backgroundCard.isSelected = true
-                        gradientData.selectedItem = backgroundCard
+                property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns
+                property bool isSelected: false
+
+                width: gradientTable.cellWidth + flexibleWidth - 8
+                height: tabBackground.delegateHeight
+                radius: 16
+
+                function selectPreset(index) {
+                    gradientTable.currentIndex = index
+                    gradientData.stops = stopsPosList
+                    gradientData.colors = stopsColorList
+                    gradientData.stopsCount = stopListSize
+                    gradientData.presetID = presetID
+                    gradientData.presetType = presetTabBar.currentIndex
+
+                    if (gradientData.selectedItem != null)
+                        gradientData.selectedItem.isSelected = false
+
+                    backgroundCard.isSelected = true
+                    gradientData.selectedItem = backgroundCard
+                }
+
+                MouseArea {
+                    id: rectMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onClicked: {
+                        presetNameBox.edit = false
+                        nameInput.focus = false
+                        backgroundCard.selectPreset(index)
                     }
+                }
 
-                    MouseArea {
-                        id: rectMouseArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        onClicked: {
-                            presetNameBox.edit = false
-                            nameInput.focus = false
-                            backgroundCard.selectPreset(index)
+                states: [
+                    State {
+                        name: "default"
+                        when: !(rectMouseArea.containsMouse || removeButton.hovered ||
+                              (nameMouseArea.containsMouse && !tabBackground.editableName)) &&
+                              !backgroundCard.isSelected
+                        PropertyChanges {
+                            target: backgroundCard
+                            color: StudioTheme.Values.themeControlOutline
+                            border.width: 0
+                        }
+                    },
+                    State {
+                        name: "hovered"
+                        when: (rectMouseArea.containsMouse || removeButton.hovered ||
+                              (nameMouseArea.containsMouse && !tabBackground.editableName)) &&
+                              !backgroundCard.isSelected
+                        PropertyChanges {
+                            target: backgroundCard
+                            color: StudioTheme.Values.themeControlBackgroundPressed
+                            border.width: 1
+                            border.color: StudioTheme.Values.themeInteraction
+                        }
+                    },
+                    State {
+                        name: "selected"
+                        when: backgroundCard.isSelected
+                        PropertyChanges {
+                            target: backgroundCard
+                            color:StudioTheme.Values.themeInteraction
+                            border.width: 1
+                            border.color: StudioTheme.Values.themeControlBackgroundPressed
                         }
                     }
+                ]
+
+                ColumnLayout {
+                    spacing: 2
+                    anchors.fill: parent
+
+                    Rectangle {
+                        id: gradientRect
+                        width: 150
+                        height: 150
+                        radius: 16
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                        Layout.topMargin: 2
+
+                        gradient: Gradient {
+                            id: showGr
+                        }
 
-                    states: [
-                        State {
-                            name: "default"
-                            when: !(rectMouseArea.containsMouse || removeButton.hovered ||
-                                  (nameMouseArea.containsMouse && !tabBackground.editableName)) &&
-                                  !backgroundCard.isSelected
-                            PropertyChanges {
-                                target: backgroundCard
-                                color: StudioTheme.Values.themeControlOutline
-                                border.width: 0
-                            }
-                        },
-                        State {
-                            name: "hovered"
-                            when: (rectMouseArea.containsMouse || removeButton.hovered ||
-                                  (nameMouseArea.containsMouse && !tabBackground.editableName)) &&
-                                  !backgroundCard.isSelected
-                            PropertyChanges {
-                                target: backgroundCard
-                                color: StudioTheme.Values.themeControlBackgroundPressed
-                                border.width: 1
-                                border.color: StudioTheme.Values.themeInteraction
-                            }
-                        },
-                        State {
-                            name: "selected"
-                            when: backgroundCard.isSelected
-                            PropertyChanges {
-                                target: backgroundCard
-                                color:StudioTheme.Values.themeInteraction
-                                border.width: 1
-                                border.color: StudioTheme.Values.themeControlBackgroundPressed
+                        Component {
+                            id: stopComponent
+                            GradientStop {}
+                        }
+
+                        Component.onCompleted: {
+                            var stopsAmount = stopListSize;
+                            var newStops = [];
+                            for (var i = 0; i < stopsAmount; i++) {
+                                newStops.push( stopComponent.createObject(showGr, { "position": stopsPosList[i], "color": stopsColorList[i] }) );
                             }
+                            showGr.stops = newStops;
                         }
-                    ]
 
-                    ColumnLayout {
-                        spacing: 2
-                        anchors.fill: parent
+                        AbstractButton {
+                            id: removeButton
+                            visible: editableName && (rectMouseArea.containsMouse || removeButton.hovered)
+                            backgroundRadius: StudioTheme.Values.smallRectWidth
+                            anchors.right: parent.right
+                            anchors.rightMargin: 5
+                            anchors.top: parent.top
+                            anchors.topMargin: 5
+                            width: Math.round(StudioTheme.Values.smallRectWidth)
+                            height: Math.round(StudioTheme.Values.smallRectWidth)
+                            buttonIcon: StudioTheme.Constants.closeCross
+                            onClicked: tabBackground.deleteButtonClicked(index)
+                        }
+                    }
+
+                    Item {
+                        id: presetNameBox
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                        Layout.preferredWidth: backgroundCard.width - 2
+                        Layout.preferredHeight: backgroundCard.height - gradientRect.height - 4
+                        Layout.bottomMargin: 4
+
+                        property bool edit: false
 
                         Rectangle {
-                            id: gradientRect
-                            width: 150
-                            height: 150
+                            id: nameBackgroundColor
+                            enabled: tabBackground.editableName
+                            color: "transparent"
                             radius: 16
-                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                            Layout.topMargin: 2
-
-                            gradient: Gradient {
-                                id: showGr
-                            }
+                            visible: true
+                            anchors.fill: parent
+                        }
 
-                            Component {
-                                id: stopComponent
-                                GradientStop {}
-                            }
+                        ToolTipArea {
+                            id: nameMouseArea
+                            anchors.fill: parent
+                            tooltip: nameText.text
+                            propagateComposedEvents: true
 
-                            Component.onCompleted: {
-                                var stopsAmount = stopListSize;
-                                var newStops = [];
-                                for (var i = 0; i < stopsAmount; i++) {
-                                    newStops.push( stopComponent.createObject(showGr, { "position": stopsPosList[i], "color": stopsColorList[i] }) );
+                            onClicked: {
+                                if (!tabBackground.editableName) {
+                                    backgroundCard.selectPreset(index)
+                                    return
                                 }
-                                showGr.stops = newStops;
-                            }
 
-                            AbstractButton {
-                                id: removeButton
-                                visible: editableName && (rectMouseArea.containsMouse || removeButton.hovered)
-                                backgroundRadius: StudioTheme.Values.smallRectWidth
-                                anchors.right: parent.right
-                                anchors.rightMargin: 5
-                                anchors.top: parent.top
-                                anchors.topMargin: 5
-                                width: Math.round(StudioTheme.Values.smallRectWidth)
-                                height: Math.round(StudioTheme.Values.smallRectWidth)
-                                buttonIcon: StudioTheme.Constants.closeCross
-                                onClicked: tabBackground.deleteButtonClicked(index)
+                                presetNameBox.edit = true
+                                nameInput.forceActiveFocus()
+                                // have to select text like this, otherwise there is an issue with long names
+                                nameInput.cursorPosition = 0
+                                nameInput.cursorPosition = nameInput.length
+                                nameInput.selectAll()
                             }
                         }
 
-                        Item {
-                            id: presetNameBox
-                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                            Layout.preferredWidth: backgroundCard.width - 2
-                            Layout.preferredHeight: backgroundCard.height - gradientRect.height - 4
-                            Layout.bottomMargin: 4
-
-                            property bool edit: false
-
-                            Rectangle {
-                                id: nameBackgroundColor
-                                enabled: tabBackground.editableName
-                                color: "transparent"
-                                radius: 16
-                                visible: true
-                                anchors.fill: parent
-                            }
-
-                            ToolTipArea {
-                                id: nameMouseArea
-                                anchors.fill: parent
-                                tooltip: nameText.text
-                                propagateComposedEvents: true
-
-                                onClicked: {
-                                    if (!tabBackground.editableName) {
-                                        backgroundCard.selectPreset(index)
-                                        return
-                                    }
-
-                                    presetNameBox.edit = true
-                                    nameInput.forceActiveFocus()
-                                    // have to select text like this, otherwise there is an issue with long names
-                                    nameInput.cursorPosition = 0
-                                    nameInput.cursorPosition = nameInput.length
-                                    nameInput.selectAll()
-                                }
-                            }
+                        Text {
+                            id: nameText
+                            text: presetName
+                            anchors.fill: parent
+                            horizontalAlignment: Text.AlignHCenter
+                            verticalAlignment: Text.AlignVCenter
+                            color: StudioTheme.Values.themeTextColor
+                            elide: Text.ElideMiddle
+                            maximumLineCount: 1
+                        }
 
-                            Text {
-                                id: nameText
-                                text: presetName
-                                anchors.fill: parent
-                                horizontalAlignment: Text.AlignHCenter
-                                verticalAlignment: Text.AlignVCenter
-                                color: StudioTheme.Values.themeTextColor
-                                elide: Text.ElideMiddle
-                                maximumLineCount: 1
+                        TextInput {
+                            id: nameInput
+                            enabled: tabBackground.editableName
+                            visible: false
+                            text: presetName
+                            anchors.fill: parent
+                            anchors.leftMargin: 5
+                            anchors.rightMargin: 5
+                            horizontalAlignment: TextInput.AlignHCenter
+                            verticalAlignment: TextInput.AlignVCenter
+                            color: StudioTheme.Values.themeTextColor
+                            selectionColor: StudioTheme.Values.themeInteraction
+                            selectByMouse: true
+                            activeFocusOnPress: true
+                            wrapMode: TextInput.NoWrap
+                            clip: true
+
+                            onEditingFinished: {
+                                nameText.text = text
+                                tabBackground.presetNameChanged(index, text)
+                                presetNameBox.edit = false
                             }
 
-                            TextInput {
-                                id: nameInput
-                                enabled: tabBackground.editableName
-                                visible: false
-                                text: presetName
-                                anchors.fill: parent
-                                anchors.leftMargin: 5
-                                anchors.rightMargin: 5
-                                horizontalAlignment: TextInput.AlignHCenter
-                                verticalAlignment: TextInput.AlignVCenter
-                                color: StudioTheme.Values.themeTextColor
-                                selectionColor: StudioTheme.Values.themeInteraction
-                                selectByMouse: true
-                                activeFocusOnPress: true
-                                wrapMode: TextInput.NoWrap
-                                clip: true
-
-                                onEditingFinished: {
-                                    nameText.text = text
-                                    tabBackground.presetNameChanged(index, text)
-                                    presetNameBox.edit = false
+                            Keys.onPressed: {
+                                if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
+                                    event.accepted = true
+                                    nameInput.editingFinished()
+                                    nameInput.focus = false
                                 }
 
-                                Keys.onPressed: {
-                                    if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
-                                        event.accepted = true
-                                        nameInput.editingFinished()
-                                        nameInput.focus = false
-                                    }
-
-                                    if (event.key === Qt.Key_Escape) {
-                                        event.accepted = true
-                                        nameInput.text = nameText.text
-                                        nameInput.focus = false
-                                    }
+                                if (event.key === Qt.Key_Escape) {
+                                    event.accepted = true
+                                    nameInput.text = nameText.text
+                                    nameInput.focus = false
                                 }
                             }
+                        }
 
-                            states: [
-                                State {
-                                    name: "default"
-                                    when: tabBackground.editableName && !nameMouseArea.containsMouse && !presetNameBox.edit
-                                    PropertyChanges {
-                                        target: nameBackgroundColor
-                                        color: "transparent"
-                                        border.width: 0
-                                    }
-                                    PropertyChanges { target: nameText; visible: true }
-                                    PropertyChanges { target: nameInput; visible: false }
-                                },
-                                State {
-                                    name: "hovered"
-                                    when: tabBackground.editableName && nameMouseArea.containsMouse && !presetNameBox.edit
-                                    PropertyChanges {
-                                        target: nameBackgroundColor
-                                        color: StudioTheme.Values.themeControlBackgroundPressed
-                                        border.width: 0
-                                    }
-                                    PropertyChanges { target: nameText; visible: true }
-                                    PropertyChanges { target: nameInput; visible: false }
-                                },
-                                State {
-                                    name: "edit"
-                                    when: tabBackground.editableName && presetNameBox.edit
-                                    PropertyChanges {
-                                        target: nameBackgroundColor
-                                        color: StudioTheme.Values.themeControlBackgroundPressed
-                                        border.color: StudioTheme.Values.themeInteraction
-                                        border.width: 1
-                                    }
-                                    PropertyChanges { target: nameText; visible: false }
-                                    PropertyChanges { target: nameInput; visible: true }
+                        states: [
+                            State {
+                                name: "default"
+                                when: tabBackground.editableName && !nameMouseArea.containsMouse && !presetNameBox.edit
+                                PropertyChanges {
+                                    target: nameBackgroundColor
+                                    color: "transparent"
+                                    border.width: 0
                                 }
-                            ]
-                        }
+                                PropertyChanges { target: nameText; visible: true }
+                                PropertyChanges { target: nameInput; visible: false }
+                            },
+                            State {
+                                name: "hovered"
+                                when: tabBackground.editableName && nameMouseArea.containsMouse && !presetNameBox.edit
+                                PropertyChanges {
+                                    target: nameBackgroundColor
+                                    color: StudioTheme.Values.themeControlBackgroundPressed
+                                    border.width: 0
+                                }
+                                PropertyChanges { target: nameText; visible: true }
+                                PropertyChanges { target: nameInput; visible: false }
+                            },
+                            State {
+                                name: "edit"
+                                when: tabBackground.editableName && presetNameBox.edit
+                                PropertyChanges {
+                                    target: nameBackgroundColor
+                                    color: StudioTheme.Values.themeControlBackgroundPressed
+                                    border.color: StudioTheme.Values.themeInteraction
+                                    border.width: 1
+                                }
+                                PropertyChanges { target: nameText; visible: false }
+                                PropertyChanges { target: nameInput; visible: true }
+                            }
+                        ]
                     }
                 }
             }
diff --git a/share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerTextFieldStyle.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HorizontalScrollBar.qml
index 64a8835db7..12111f7e1c 100644
--- a/share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerTextFieldStyle.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HorizontalScrollBar.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,25 +23,29 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.2
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.1
-import QtQuickDesignerTheme 1.0
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import StudioTheme 1.0 as StudioTheme
 
-TextFieldStyle {
-    selectionColor: Theme.color(Theme.PanelTextColorLight)
-    selectedTextColor: Theme.color(Theme.PanelTextColorDark)
-    textColor: Theme.color(Theme.PanelTextColorLight)
-    placeholderTextColor: Theme.color(Theme.PanelTextColorMid)
+ScrollBar {
+    id: scrollBar
 
-    padding.top: 4
-    padding.bottom: 4
+    property bool scrollBarVisible: parent.childrenRect.width > parent.width
+
+    orientation: Qt.Horizontal
+    policy: scrollBar.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
+    x: 0
+    y: parent.height - height
+    width: parent.availableWidth
+           - (parent.bothVisible ? parent.verticalThickness : 0)
+    padding: 0
 
     background: Rectangle {
-        implicitWidth: 100
-        implicitHeight: font.pixelSize + padding.top + padding.bottom
-        color: Theme.color(Theme.FancyToolButtonSelectedColor)
-        border.color: Theme.qmlDesignerBackgroundColorDarker()
+        color: StudioTheme.Values.themeSectionHeadBackground
+    }
+
+    contentItem: Rectangle {
+        implicitHeight: StudioTheme.Values.scrollBarThickness
+        color: StudioTheme.Values.themeScrollBarHandle
     }
-    renderType: Text.NativeRendering
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconLabel.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconLabel.qml
index f61a057ae0..85ed936a6b 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconLabel.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconLabel.qml
@@ -23,31 +23,16 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
-import QtQuick.Controls 2.0 as Controls
-import QtQuick.Layouts 1.0
+import QtQuick 2.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
 
-Item {
-    id: label
-    width:  parent.width < 300 ? 80 : Math.min(140, parent.width - 220)
-    height: 16
-    property alias source: image.source
+Label {
+    id: myLabel
 
-    Item {
-        width: 16
-        height: 16
-        Image {
-            id: image
-            anchors.fill: parent
-        }
+    property alias icon: myLabel.text
 
-    }
-
-    Layout.preferredWidth: width
-    Layout.minimumWidth: width
-    Layout.maximumWidth: width
-
-//    Component.onCompleted: {
-//        label.Layout.preferredWidth = width
-//    }
+    text: StudioTheme.Constants.actionIcon
+    font.family: StudioTheme.Constants.iconFont.family
+    font.pixelSize: StudioTheme.Values.myIconFontSize
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml
index 7dc4a0e395..c101bff09c 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml
@@ -23,13 +23,37 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
-import QtQuick.Controls 1.0 as Controls
-import "../../../common/"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import StudioTheme 1.0 as StudioTheme
 
-Controls.ScrollView {
-    style: DesignerScrollViewStyle {
+Flickable {
+    id: flickable
 
+    property alias horizontalThickness: horizontalScrollBar.height
+    property alias verticalThickness: verticalScrollBar.width
+    property bool bothVisible: verticalScrollBar.scrollBarVisible
+                               && horizontalScrollBar.scrollBarVisible
+
+    contentWidth: areaItem.childrenRect.width
+    contentHeight: areaItem.childrenRect.height
+    boundsBehavior: Flickable.StopAtBounds
+
+    default property alias content: areaItem.children
+
+    Item {
+        id: areaItem
+    }
+
+    ScrollBar.horizontal: HorizontalScrollBar {
+        id: horizontalScrollBar
+        parent: flickable
+        scrollBarVisible: areaItem.childrenRect.width > flickable.width
+    }
+
+    ScrollBar.vertical: VerticalScrollBar {
+        id: verticalScrollBar
+        parent: flickable
+        scrollBarVisible: areaItem.childrenRect.height > flickable.height
     }
-    frameVisible: false
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Tab.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/VerticalScrollBar.qml
index 79806d2bcc..97234524d4 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Tab.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/VerticalScrollBar.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,9 +23,29 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
-import QtQuick.Controls 1.0 as Controls
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import StudioTheme 1.0 as StudioTheme
 
-Controls.Tab {
+ScrollBar {
+    id: scrollBar
 
+    property bool scrollBarVisible: parent.childrenRect.height > parent.height
+
+    orientation: Qt.Vertical
+    policy: scrollBar.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
+    x: parent.width - width
+    y: 0
+    height: parent.availableHeight
+            - (parent.bothVisible ? parent.horizontalThickness : 0)
+    padding: 0
+
+    background: Rectangle {
+        color: StudioTheme.Values.themeSectionHeadBackground
+    }
+
+    contentItem: Rectangle {
+        implicitWidth: StudioTheme.Values.scrollBarThickness
+        color: StudioTheme.Values.themeScrollBarHandle
+    }
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir
index f77c9e1934..59573217c5 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir
@@ -39,11 +39,11 @@ SimpleColorPalette 2.0 SimpleColorPalette.qml
 DoubleSpinBox 2.0 DoubleSpinBox.qml
 SpinBox 2.0 SpinBox.qml
 StandardTextSection 2.0 StandardTextSection.qml
-Tab 2.0 Tab.qml
-TabView 2.0 TabView.qml
 ToolTipArea 2.0 ToolTipArea.qml
 UrlChooser 2.0 UrlChooser.qml
 PaddingSection 2.0 PaddingSection.qml
 RoundedPanel 2.0 RoundedPanel.qml
 ExpressionTextField 2.0 ExpressionTextField.qml
 MarginSection 2.0 MarginSection.qml
+HorizontalScrollBar 2.0 HorizontalScrollBar.qml
+VerticalScrollBar 2.0 VerticalScrollBar.qml
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml
index 908f2274e6..a055447d96 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml
@@ -116,7 +116,6 @@ Rectangle {
                 color: StudioTheme.Values.themeHoverHighlight
                 border.color: StudioTheme.Values.themeControlOutline
             }
-
         },
         State {
             name: "edit"
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml
index 0faaf7e0a8..5e55a4855b 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml
@@ -46,8 +46,7 @@ T.CheckBox {
 
     implicitWidth: Math.max(
                        implicitBackgroundWidth + leftInset + rightInset,
-                       implicitContentWidth + leftPadding + rightPadding
-                       + implicitIndicatorWidth + spacing + actionIndicator.width)
+                       implicitContentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(
                         implicitBackgroundHeight + topInset + bottomInset,
                         implicitContentHeight + topPadding + bottomPadding,
diff --git a/share/qtcreator/qmldesigner/common/DesignerScrollViewStyle.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml
index b8284e7d4d..1b71f1f4de 100644
--- a/share/qtcreator/qmldesigner/common/DesignerScrollViewStyle.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,38 +23,33 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.2
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.1
-import QtQuickDesignerTheme 1.0
+import QtQuick 2.15
+import QtQuick.Templates 2.15 as T
+import StudioTheme 1.0 as StudioTheme
 
-ScrollViewStyle {
-    readonly property color scrollbarColor: Theme.color(Theme.BackgroundColorDark)
-    readonly property color scrollBarHandleColor: Theme.color(Theme.QmlDesigner_ScrollBarHandleColor)
+T.TabBar {
+    id: myButton
 
-    padding {left: 0; top: 0; right: 0; bottom: 0}
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
 
-    scrollBarBackground: Rectangle {
-        height: 10
-        width: 10
-        color: scrollbarColor
-    }
-    handle: Item {
-        implicitWidth: 10
-        implicitHeight: 10
-        Rectangle {
-            anchors.fill: parent
-            color: scrollBarHandleColor
-        }
-    }
+    spacing: 0
+    bottomPadding: 4
 
-    decrementControl: Item {}
-    incrementControl: Item {}
-    corner: Item {}
+    contentItem: ListView {
+        model: myButton.contentModel
+        currentIndex: myButton.currentIndex
+
+        spacing: myButton.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+    }
 
-    //Even if the platform style reports touch support a scrollview should not be flickable.
-    Component.onCompleted: {
-        control.flickableItem.interactive = false
+    background: Rectangle {
+        color: StudioTheme.Values.themeTabLight
     }
-    transientScrollBars: false
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TabView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml
index b5e0ac0221..3b8efdfe55 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TabView.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2020 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,40 +23,38 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
-import QtQuick.Controls 1.0 as Controls
-import QtQuick.Controls.Styles 1.1
-import QtQuickDesignerTheme 1.0
+import QtQuick 2.15
+import QtQuick.Templates 2.15 as T
 import StudioTheme 1.0 as StudioTheme
 
-Controls.TabView {
-    id: root
+T.TabButton {
+    id: myButton
 
-    frameVisible: false
-    style: TabViewStyle {
-        frameOverlap: 0
-        frame: Item { }
-        tab: Rectangle {
-            color: styleData.selected ? Theme.qmlDesignerTabLight() : Theme.qmlDesignerTabDark()
-            implicitWidth: root.width/root.count + 2
-            implicitHeight: 28
-            Text {
-                id: text
-                font.bold: true
-                font.pixelSize: StudioTheme.Values.myFontSize
-                anchors.centerIn: parent
-                anchors.verticalCenterOffset: -1
-                text: styleData.title
-                renderType: Text.NativeRendering
-                color: styleData.selected ? Theme.qmlDesignerTabDark() : Theme.qmlDesignerTabLight()
-            }
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
 
-            Rectangle {
-                color:Theme.qmlDesignerTabLight()
-                width: parent.width
-                height: 4
-                anchors.bottom: parent.bottom
-            }
-        }
+    padding: 1
+
+    background: Rectangle {
+        id: buttonBackground
+        color: myButton.checked ? StudioTheme.Values.themeTabLight : StudioTheme.Values.themeTabDark
+        border.color: StudioTheme.Values.themeControlOutline
+        border.width: 0
+    }
+
+    contentItem: T.Label {
+        id: buttonIcon
+        color: myButton.checked ? StudioTheme.Values.themeTabDark : StudioTheme.Values.themeTabLight
+        font.weight: Font.Bold
+        //font.family: StudioTheme.Constants.font.family
+        font.pixelSize: StudioTheme.Values.myFontSize
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        anchors.fill: parent
+        renderType: Text.QtRendering
+
+        text: myButton.text
     }
 }
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir
index ee876cc935..75cf4f0cfa 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir
@@ -28,6 +28,8 @@ SliderPopup 1.0 SliderPopup.qml
 SpinBox 1.0 SpinBox.qml
 SpinBoxIndicator 1.0 SpinBoxIndicator.qml
 SpinBoxInput 1.0 SpinBoxInput.qml
+TabBar 1.0 TabBar.qml
+TabButton 1.0 TabButton.qml
 TextArea 1.0 TextArea.qml
 TextField 1.0 TextField.qml
 TranslationIndicator 1.0 TranslationIndicator.qml
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
index 9f04812af9..65cc7f3cfc 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
@@ -79,6 +79,8 @@ QtObject {
 
     property real inputHorizontalPadding: Math.round(4 * values.scaleFactor)
 
+    property real scrollBarThickness: 10
+
     // Theme Colors
 
     // COLORS NOW COME FROM THE THEME FILES
@@ -117,6 +119,9 @@ QtObject {
     property string themeTranslationIndicatorBorder: Theme.color(Theme.DStranlsationIndicatorBorder)
     property string themeSectionHeadBackground: Theme.color(Theme.DSsectionHeadBackground)
 
+    property string themeTabDark: Theme.color(Theme.QmlDesigner_TabDark)
+    property string themeTabLight: Theme.color(Theme.QmlDesigner_TabLight)
+
     // Taken out of Constants.js
     property string themeChangedStateText: Theme.color(Theme.DSchangedStateText)
 }
diff --git a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml b/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml
index e6e5be7523..29f019e6c6 100644
--- a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml
+++ b/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml
@@ -23,13 +23,15 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.2
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.1
-import HelperWidgets 2.0
+import QtQuick 2.15
 import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Rectangle {
+    id: myRoot
+
     border.width: 1
     property bool isBaseState
     property bool isCurrentState
@@ -41,6 +43,8 @@ Rectangle {
     property string delegateWhenConditionString
     readonly property bool isDefaultState: isDefault
 
+    signal delegateInteraction
+
     color: baseColor
     border.color: Theme.qmlDesignerBorderColor()
 
@@ -50,38 +54,28 @@ Rectangle {
     }
 
     MouseArea {
+        id: mouseArea
         anchors.fill: parent
 
         acceptedButtons: Qt.LeftButton
         onClicked: {
             focus = true
             root.currentStateInternalId = internalNodeId
+            contextMenu.dismiss() // close potentially open context menu
+            myRoot.delegateInteraction()
         }
     }
 
-    ToolButton {
+    StudioControls.AbstractButton {
         id: removeStateButton
-
-        style: ButtonStyle {
-            background: Rectangle {
-                color: control.hovered ? Qt.lighter(baseColor, 1.2)  : "transparent"
-                Image {
-                    source: "image://icons/close"
-                    height: 16
-                    width: 16
-                }
-            }
-        }
-
-
+        buttonIcon: StudioTheme.Constants.closeCross
         anchors.right: parent.right
-        anchors.rightMargin: 2
+        anchors.rightMargin: 4
         anchors.verticalCenter: stateNameField.verticalCenter
-        height: 16
-        width: 16
         visible: !isBaseState
 
         onClicked: {
+            myRoot.delegateInteraction()
             if (isDefaultState)
                 statesEditorModel.resetDefaultState()
 
@@ -89,86 +83,78 @@ Rectangle {
         }
     }
 
-    Image {
-        id: whenButton
-        visible: !isBaseState || (isBaseState && modelHasDefaultState)
-        width: 14
-        height: 14
-        x: 4
-        y: 6
-        source: {
-            if (whenMouseArea.containsMouse)
-                return "image://icons/submenu"
-
-            return delegateHasWhenCondition ? "image://icons/expression" : "image://icons/placeholder"
+    StudioControls.Menu {
+        id: contextMenu
 
+        StudioControls.MenuItem {
+            enabled: !isBaseState
+            text: qsTr("Set when Condition")
+            onTriggered: {
+                bindingEditor.showWidget()
+                bindingEditor.text = delegateWhenConditionString
+                bindingEditor.prepareBindings()
+            }
         }
 
-        MouseArea {
-            id: whenMouseArea
-            hoverEnabled: true
-            anchors.fill: parent
-            onClicked: contextMenu.popup()
-        }
-        Menu {
-            id: contextMenu
-
-            MenuItem {
-                visible: !isBaseState
-                text: qsTr("Set when Condition")
-                onTriggered: {
-                    bindingEditor.showWidget()
-                    bindingEditor.text = delegateWhenConditionString
-                    bindingEditor.prepareBindings()
-                }
+        StudioControls.MenuItem {
+            enabled: !isBaseState && delegateHasWhenCondition
+            text: qsTr("Reset when Condition")
+            onTriggered: {
+               statesEditorModel.resetWhenCondition(internalNodeId)
             }
+        }
 
-            MenuItem {
-                visible: !isBaseState && delegateHasWhenCondition
-                text: qsTr("Reset when Condition")
-                onTriggered: {
-                   statesEditorModel.resetWhenCondition(internalNodeId)
-                }
+        StudioControls.MenuItem {
+            enabled: !isBaseState && !isDefaultState
+            text: qsTr("Set as Default")
+            onTriggered: {
+                statesEditorModel.setStateAsDefault(internalNodeId)
             }
+        }
 
-            MenuItem {
-                visible: !isBaseState && !isDefaultState
-                text: qsTr("Set as Default")
-                onTriggered: {
-                    statesEditorModel.setStateAsDefault(internalNodeId)
-                }
+        StudioControls.MenuItem {
+            enabled: (!isBaseState && isDefaultState) || (isBaseState && modelHasDefaultState)
+            text: qsTr("Reset Default")
+            onTriggered: {
+                statesEditorModel.resetDefaultState()
             }
+        }
 
-            MenuItem {
-                visible: (!isBaseState && isDefaultState) || (isBaseState && modelHasDefaultState)
-                text: qsTr("Reset Default")
-                onTriggered: {
-                    statesEditorModel.resetDefaultState()
-                }
-            }
+        onClosed: {
+            stateNameField.actionIndicator.forceVisible = false
+        }
+
+        onOpened: {
+            myRoot.delegateInteraction()
         }
     }
 
-    TextField {
+
+    StudioControls.TextField {
         id: stateNameField
+        actionIndicatorVisible: !isBaseState || (isBaseState && modelHasDefaultState)
+
+        actionIndicator.onClicked: {
+            stateNameField.actionIndicator.forceVisible = true
+            contextMenu.popup()
+        }
+
+        onEditChanged: {
+            if (contextMenu.open && stateNameField.edit)
+                contextMenu.dismiss()
+        }
+
+        actionIndicator.icon.text: delegateHasWhenCondition
+                              ? StudioTheme.Constants.actionIconBinding : StudioTheme.Constants.actionIcon
+
+        translationIndicatorVisible: false
         y: 4
-        font.pixelSize: Theme.smallFontPixelSize()
-        anchors.left: whenButton.right
+        anchors.left: parent.left
         // use the spacing which the image to the delegate rectangle has
-        anchors.leftMargin: 4
+        anchors.leftMargin: (isBaseState ? StudioTheme.Values.height : 0) + 4
         anchors.right: removeStateButton.left
-        anchors.rightMargin: 4
-        style: DesignerTextFieldStyle {
-            background: Rectangle {
-                implicitWidth: 100
-                implicitHeight: font.pixelSize + padding.top + padding.bottom
-                color: ((isBaseState && modelHasDefaultState) ? "transparent"
-                         : Theme.color(Theme.FancyToolButtonSelectedColor))
-                border.color: ((isBaseState && !modelHasDefaultState) || isDefaultState) ? "#ffd700"
-                                : (isBaseState && modelHasDefaultState) ? "transparent"
-                                : Theme.qmlDesignerBackgroundColorDarker()
-            }
-        }
+        anchors.rightMargin: 2
+
         readOnly: isBaseState
 
         onActiveFocusChanged: {
@@ -188,7 +174,7 @@ Rectangle {
 
             stateNameField.oldValue = stateNameField.text
 
-            if (stateNameField.text != delegateStateName)
+            if (stateNameField.text !== delegateStateName)
                 statesEditorModel.renameState(internalNodeId, stateNameField.text)
         }
     }
@@ -220,8 +206,8 @@ Rectangle {
 
     Text {
         id: stateDefaultIndicator
-        anchors.left: whenButton.left
-        anchors.leftMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: StudioTheme.Values.height
         anchors.right: removeStateButton.left
         anchors.rightMargin: 4
         anchors.bottom: parent.bottom
diff --git a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml b/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml
index c512b7098a..8eb80fbfc6 100644
--- a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml
+++ b/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml
@@ -23,32 +23,33 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.2
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.1
-import "../common"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
 import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 FocusScope {
     id: root
 
-    height: expanded ? 192 : 40
+    height: (root.expanded ? 192 : 40) + StudioTheme.Values.scrollBarThickness
     signal createNewState
     signal deleteState(int internalNodeId)
     signal duplicateCurrentState
 
     property int stateImageSize: 180
-    property int delegateWidth: stateImageSize + 44
     property int padding: 2
-    property int delegateHeight: root.height - padding * 2 + 1
+    property int delegateWidth: root.stateImageSize + 44
+    property int delegateHeight: root.height - StudioTheme.Values.scrollBarThickness - root.padding * 2 + 1
     property int innerSpacing: 0
-    property int currentStateInternalId : 0
+    property int currentStateInternalId: 0
 
     property bool expanded: true
 
     Connections {
         target: statesEditorModel
-        onChangedToState: root.currentStateInternalId = n
+        function onChangedToState(n) { root.currentStateInternalId = n }
     }
 
     SystemPalette {
@@ -66,35 +67,41 @@ FocusScope {
         acceptedButtons: Qt.LeftButton | Qt.RightButton
 
         onClicked: {
-            if (mouse.button === Qt.LeftButton)
+            if (mouse.button === Qt.LeftButton) {
+                contextMenu.dismiss()
                 focus = true
-            else if (mouse.button === Qt.RightButton)
+            } else if (mouse.button === Qt.RightButton) {
                 contextMenu.popup()
+            }
         }
 
-        Menu {
+        StudioControls.Menu {
             id: contextMenu
 
-            MenuItem {
+            StudioControls.MenuItem {
                 text: root.expanded ? qsTr("Collapse") : qsTr("Expand")
                 onTriggered: {
                     root.expanded = !root.expanded
                 }
-
             }
         }
     }
 
+    function closeContextMenu() {
+        if (contextMenu.open)
+            contextMenu.dismiss()
+    }
+
     Item {
         id: addStateItem
 
-        property int buttonLeftSpacing: 8 * (expanded ?  1 : 2)
+        property int buttonLeftSpacing: 8 * (root.expanded ?  1 : 2)
 
         anchors.right: parent.right
-        width: delegateHeight / 2 + buttonLeftSpacing
-        height: delegateHeight
+        width: root.delegateHeight / 2 + buttonLeftSpacing
+        height: root.delegateHeight
 
-        Button {
+        AbstractButton {
             id: addStateButton
             visible: canAddNewStates
 
@@ -106,56 +113,69 @@ FocusScope {
             width: Math.max(parent.height / 2 - 8, 18)
             height: width
 
-            onClicked: root.createNewState()
-
-            style: ButtonStyle {
-                background: Rectangle {
-                    property color buttonBaseColor: Qt.darker(Theme.qmlDesignerBackgroundColorDarkAlternate(), 1.1)
-                    color: control.hovered ? Qt.lighter(buttonBaseColor, 1.2)  : buttonBaseColor
-                    border.color: Theme.qmlDesignerBorderColor()
-                    border.width: 1
-                    Image {
-                        source: "image://icons/plus"
-                        width: 16
-                        height: 16
-                        anchors.centerIn: parent
-                        smooth: false
-                    }
+            onClicked: {
+                root.closeContextMenu()
+                root.createNewState()
+            }
+
+            background: Rectangle {
+                property color buttonBaseColor: Qt.darker(Theme.qmlDesignerBackgroundColorDarkAlternate(), 1.1)
+                color: addStateButton.hovered ? Qt.lighter(buttonBaseColor, 1.2) : buttonBaseColor
+                border.color: Theme.qmlDesignerBorderColor()
+                border.width: 1
+                Image {
+                    source: "image://icons/plus"
+                    width: 16
+                    height: 16
+                    anchors.centerIn: parent
+                    smooth: false
                 }
             }
         }
     }
 
-    ScrollView {
+    ListView {
+        id: flickable
+
+        boundsBehavior: Flickable.StopAtBounds
+        clip: true
+
         anchors.left: parent.left
         anchors.right: addStateItem.left
-        height: delegateHeight
-        y: padding
-        anchors.leftMargin: padding
-        anchors.rightMargin: padding
+        height: root.delegateHeight + StudioTheme.Values.scrollBarThickness
+        y: root.padding
+        anchors.leftMargin: root.padding
+        anchors.rightMargin: root.padding
+
+        model: statesEditorModel
+        orientation: ListView.Horizontal
+        spacing: root.innerSpacing
+
+        delegate: StatesDelegate {
+            id: statesDelegate
+            width: root.delegateWidth
+            height: root.delegateHeight
+            isBaseState: 0 == internalNodeId
+            isCurrentState: root.currentStateInternalId == internalNodeId
+            baseColor: isCurrentState ? Theme.color(Theme.QmlDesigner_HighlightColor) : background.color
+            delegateStateName: stateName
+            delegateStateImageSource: stateImageSource
+            delegateStateImageSize: stateImageSize
+            delegateHasWhenCondition: hasWhenCondition
+            delegateWhenConditionString: whenConditionString
+            onDelegateInteraction: root.closeContextMenu()
+        }
 
-        style: DesignerScrollViewStyle {
+        property bool bothVisible: horizontal.scrollBarVisible && vertical.scrollBarVisible
+
+        ScrollBar.horizontal: HorizontalScrollBar {
+            id: horizontal
+            parent: flickable
         }
 
-        ListView {
-            anchors.fill: parent
-            model: statesEditorModel
-            orientation: ListView.Horizontal
-            spacing: innerSpacing
-
-            delegate: StatesDelegate {
-                id: statesDelegate
-                width: delegateWidth
-                height: delegateHeight
-                isBaseState: 0 == internalNodeId
-                isCurrentState: root.currentStateInternalId == internalNodeId
-                baseColor: isCurrentState ? Theme.color(Theme.QmlDesigner_HighlightColor) : background.color
-                delegateStateName: stateName
-                delegateStateImageSource: stateImageSource
-                delegateStateImageSize: stateImageSize
-                delegateHasWhenCondition: hasWhenCondition
-                delegateWhenConditionString: whenConditionString
-            }
+        ScrollBar.vertical: VerticalScrollBar {
+            id: vertical
+            parent: flickable
         }
     }
 }