QmlDesigner: Implement Material Editor

Task-number: QDS-6438
Task-number: QDS-6439
Change-Id: I04e899a68aea665f0df8b65e21523632174ec76b
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Samuel Ghinet <samuel.ghinet@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

24 files changed, 1003 insertions, 191 deletions

diff --git a/share/qtcreator/qml/qmlpuppet/commands/requestmodelnodepreviewimagecommand.h b/share/qtcreator/qml/qmlpuppet/commands/requestmodelnodepreviewimagecommand.h
index 91ef0eddba..773656048c 100644
--- a/share/qtcreator/qml/qmlpuppet/commands/requestmodelnodepreviewimagecommand.h
+++ b/share/qtcreator/qml/qmlpuppet/commands/requestmodelnodepreviewimagecommand.h
@@ -55,6 +55,20 @@ private:
     qint32 m_renderItemId;
 };
 
+inline bool operator==(const RequestModelNodePreviewImageCommand &first,
+                       const RequestModelNodePreviewImageCommand &second)
+{
+    return first.instanceId() == second.instanceId()
+        && first.size() == second.size()
+        && first.componentPath() == second.componentPath()
+        && first.renderItemId() == second.renderItemId();
+}
+
+inline size_t qHash(const RequestModelNodePreviewImageCommand &key, size_t seed)
+{
+    return qHashMulti(seed, key.instanceId(), key.size(), key.componentPath(), key.renderItemId());
+}
+
 QDataStream &operator<<(QDataStream &out, const RequestModelNodePreviewImageCommand &command);
 QDataStream &operator>>(QDataStream &in, RequestModelNodePreviewImageCommand &command);
 
diff --git a/share/qtcreator/qml/qmlpuppet/editor3d_qt5.qrc b/share/qtcreator/qml/qmlpuppet/editor3d_qt5.qrc
index 6f1aa104f9..7e023c127b 100644
--- a/share/qtcreator/qml/qmlpuppet/editor3d_qt5.qrc
+++ b/share/qtcreator/qml/qmlpuppet/editor3d_qt5.qrc
@@ -13,6 +13,7 @@
         <file>mockfiles/images/directional@2x.png</file>
         <file>mockfiles/images/point.png</file>
         <file>mockfiles/images/point@2x.png</file>
+        <file>mockfiles/images/floor_tex.png</file>
         <file>mockfiles/images/spot.png</file>
         <file>mockfiles/images/spot@2x.png</file>
         <file>mockfiles/qt5/AdjustableArrow.qml</file>
diff --git a/share/qtcreator/qml/qmlpuppet/editor3d_qt6.qrc b/share/qtcreator/qml/qmlpuppet/editor3d_qt6.qrc
index 9831bec4be..e8d66548c3 100644
--- a/share/qtcreator/qml/qmlpuppet/editor3d_qt6.qrc
+++ b/share/qtcreator/qml/qmlpuppet/editor3d_qt6.qrc
@@ -15,6 +15,7 @@
         <file>mockfiles/images/directional@2x.png</file>
         <file>mockfiles/images/point.png</file>
         <file>mockfiles/images/point@2x.png</file>
+        <file>mockfiles/images/floor_tex.png</file>
         <file>mockfiles/images/spot.png</file>
         <file>mockfiles/images/spot@2x.png</file>
         <file>mockfiles/qt6/AdjustableArrow.qml</file>
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/floor_tex.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/floor_tex.png
new file mode 100644
index 0000000000..d8550f8044
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/floor_tex.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/MaterialNodeView.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/MaterialNodeView.qml
index 48ed09cba7..06320524bf 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/MaterialNodeView.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/MaterialNodeView.qml
@@ -45,20 +45,48 @@ View3D {
 
     Node {
         DirectionalLight {
-            eulerRotation.x: -30
-            eulerRotation.y: -30
+            shadowMapQuality: Light.ShadowMapQualityMedium
+            shadowFilter: 20
+            shadowFactor: 21
+            castsShadow: true
+            eulerRotation.x: -26
+            eulerRotation.y: -57
         }
 
         PerspectiveCamera {
+            y: 125.331
             z: 120
-            clipFar: 1000
+            eulerRotation.x: -31
             clipNear: 1
+            clipFar: 1000
         }
 
         Model {
             id: model
+
+            y: 50
             source: "#Sphere"
             materials: previewMaterial
         }
+
+        Model {
+            id: floorModel
+            source: "#Rectangle"
+            scale.y: 8
+            scale.x: 8
+            eulerRotation.x: -90
+            materials: floorMaterial
+            DefaultMaterial {
+                id: floorMaterial
+                diffuseMap: floorTex
+
+                Texture {
+                    id: floorTex
+                    source: "../images/floor_tex.png"
+                    scaleU: floorModel.scale.x
+                    scaleV: floorModel.scale.y
+                }
+            }
+        }
     }
 }
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/MaterialNodeView.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/MaterialNodeView.qml
index 0b6c7bd214..aae5891e08 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/MaterialNodeView.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/MaterialNodeView.qml
@@ -45,21 +45,49 @@ View3D {
 
     Node {
         DirectionalLight {
-            eulerRotation.x: -30
-            eulerRotation.y: -30
+            shadowMapQuality: Light.ShadowMapQualityMedium
+            shadowFilter: 20
+            shadowFactor: 21
+            castsShadow: true
+            eulerRotation.x: -26
+            eulerRotation.y: -57
         }
 
         PerspectiveCamera {
+            y: 125.331
             z: 120
-            clipFar: 1000
+            eulerRotation.x: -31
             clipNear: 1
+            clipFar: 1000
         }
 
         Model {
             id: model
             readonly property bool _edit3dLocked: true // Make this non-pickable
+
+            y: 50
             source: "#Sphere"
             materials: previewMaterial
         }
+
+        Model {
+            id: floorModel
+            source: "#Rectangle"
+            scale.y: 8
+            scale.x: 8
+            eulerRotation.x: -90
+            materials: floorMaterial
+            DefaultMaterial {
+                id: floorMaterial
+                diffuseMap: floorTex
+
+                Texture {
+                    id: floorTex
+                    source: "../images/floor_tex.png"
+                    scaleU: floorModel.scale.x
+                    scaleV: floorModel.scale.y
+                }
+            }
+        }
     }
 }
diff --git a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp
index 1d266353db..c3fc4d4e07 100644
--- a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp
+++ b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp
@@ -1030,27 +1030,32 @@ void Qt5InformationNodeInstanceServer::doRender3DEditView()
 void Qt5InformationNodeInstanceServer::renderModelNodeImageView()
 {
     if (!m_renderModelNodeImageViewTimer.isActive())
-        m_renderModelNodeImageViewTimer.start(0);
+        m_renderModelNodeImageViewTimer.start(17);
 }
 
 void Qt5InformationNodeInstanceServer::doRenderModelNodeImageView()
 {
     // This crashes on Qt 6.0.x due to QtQuick3D issue, so the preview generation is disabled
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0) || QT_VERSION >= QT_VERSION_CHECK(6, 1, 0)
+    RequestModelNodePreviewImageCommand cmd = *m_modelNodePreviewImageCommands.begin();
     ServerNodeInstance instance;
-    if (m_modelNodePreviewImageCommand.renderItemId() >= 0)
-        instance = instanceForId(m_modelNodePreviewImageCommand.renderItemId());
+    if (cmd.renderItemId() >= 0)
+        instance = instanceForId(cmd.renderItemId());
     else
-        instance = instanceForId(m_modelNodePreviewImageCommand.instanceId());
+        instance = instanceForId(cmd.instanceId());
 
     if (instance.isSubclassOf("QQuick3DObject"))
-        doRenderModelNode3DImageView();
+        doRenderModelNode3DImageView(cmd);
     else if (instance.isSubclassOf("QQuickItem"))
-        doRenderModelNode2DImageView();
+        doRenderModelNode2DImageView(cmd);
+
+    m_modelNodePreviewImageCommands.remove(cmd);
+    if (!m_modelNodePreviewImageCommands.isEmpty())
+        m_renderModelNodeImageViewTimer.start(17);
 #endif
 }
 
-void Qt5InformationNodeInstanceServer::doRenderModelNode3DImageView()
+void Qt5InformationNodeInstanceServer::doRenderModelNode3DImageView(const RequestModelNodePreviewImageCommand &cmd)
 {
 #ifdef QUICK3D_MODULE
     if (m_modelNode3DImageViewData.rootItem) {
@@ -1059,19 +1064,19 @@ void Qt5InformationNodeInstanceServer::doRenderModelNode3DImageView()
             m_modelNode3DImageViewData.contentItem = getContentItemForRendering(m_modelNode3DImageViewData.rootItem);
 
         QImage renderImage;
-        if (m_modelNodePreviewImageCache.contains(m_modelNodePreviewImageCommand.componentPath())) {
-            renderImage = m_modelNodePreviewImageCache[m_modelNodePreviewImageCommand.componentPath()];
+        if (m_modelNodePreviewImageCache.contains(cmd.componentPath())) {
+            renderImage = m_modelNodePreviewImageCache[cmd.componentPath()];
         } else {
             bool createdFromComponent = false;
             QObject *instanceObj = nullptr;
-            ServerNodeInstance instance = instanceForId(m_modelNodePreviewImageCommand.instanceId());
-            if (!m_modelNodePreviewImageCommand.componentPath().isEmpty()
+            ServerNodeInstance instance = instanceForId(cmd.instanceId());
+            if (!cmd.componentPath().isEmpty()
                     && instance.isSubclassOf("QQuick3DNode")) {
                 // Create a new instance for Node components, as using Nodes in multiple
                 // import scenes simultaneously isn't supported. And even if it was, we still
                 // wouldn't want the children of the Node to appear in the preview.
                 QQmlComponent component(engine());
-                component.loadUrl(QUrl::fromLocalFile(m_modelNodePreviewImageCommand.componentPath()));
+                component.loadUrl(QUrl::fromLocalFile(cmd.componentPath()));
                 instanceObj = qobject_cast<QQuick3DObject *>(component.create());
                 if (!instanceObj) {
                     qWarning() << "Could not create preview component: " << component.errors();
@@ -1081,7 +1086,7 @@ void Qt5InformationNodeInstanceServer::doRenderModelNode3DImageView()
             } else {
                 instanceObj = instance.internalObject();
             }
-            QSize renderSize = m_modelNodePreviewImageCommand.size();
+            QSize renderSize = cmd.size();
             if (Internal::QuickItemNodeInstance::unifiedRenderPathOrQt6()) {
                 // Requested size is already adjusted for target pixel ratio, so we have to adjust
                 // back if ratio is not default for our window.
@@ -1138,13 +1143,13 @@ void Qt5InformationNodeInstanceServer::doRenderModelNode3DImageView()
 
             if (createdFromComponent) {
                 // If component changes, puppet will need a reset anyway, so we can cache the image
-                m_modelNodePreviewImageCache.insert(m_modelNodePreviewImageCommand.componentPath(),
+                m_modelNodePreviewImageCache.insert(cmd.componentPath(),
                                                     renderImage);
                 delete instanceObj;
             }
         }
         // Key number is selected so that it is unlikely to conflict other ImageContainer use.
-        ImageContainer imgContainer(m_modelNodePreviewImageCommand.instanceId(), {}, 2100000001);
+        ImageContainer imgContainer(cmd.instanceId(), {}, 2100000001 + cmd.instanceId());
         imgContainer.setImage(renderImage);
 
         // send the rendered image to creator process
@@ -1175,23 +1180,23 @@ static QRectF itemBoundingRect(QQuickItem *item)
     return itemRect;
 }
 
-void Qt5InformationNodeInstanceServer::doRenderModelNode2DImageView()
+void Qt5InformationNodeInstanceServer::doRenderModelNode2DImageView(const RequestModelNodePreviewImageCommand &cmd)
 {
     if (m_modelNode2DImageViewData.rootItem) {
         if (!m_modelNode2DImageViewData.contentItem)
             m_modelNode2DImageViewData.contentItem = getContentItemForRendering(m_modelNode2DImageViewData.rootItem);
 
         // Key number is the same as in 3D case as they produce image for same purpose
-        auto imgContainer = ImageContainer(m_modelNodePreviewImageCommand.instanceId(), {}, 2100000001);
+        auto imgContainer = ImageContainer(cmd.instanceId(), {}, 2100000001 + cmd.instanceId());
         QImage renderImage;
-        if (m_modelNodePreviewImageCache.contains(m_modelNodePreviewImageCommand.componentPath())) {
-            renderImage = m_modelNodePreviewImageCache[m_modelNodePreviewImageCommand.componentPath()];
+        if (m_modelNodePreviewImageCache.contains(cmd.componentPath())) {
+            renderImage = m_modelNodePreviewImageCache[cmd.componentPath()];
         } else {
             QQuickItem *instanceItem = nullptr;
 
-            if (!m_modelNodePreviewImageCommand.componentPath().isEmpty()) {
+            if (!cmd.componentPath().isEmpty()) {
                 QQmlComponent component(engine());
-                component.loadUrl(QUrl::fromLocalFile(m_modelNodePreviewImageCommand.componentPath()));
+                component.loadUrl(QUrl::fromLocalFile(cmd.componentPath()));
                 instanceItem = qobject_cast<QQuickItem *>(component.create());
                 if (!instanceItem) {
                     qWarning() << "Could not create preview component: " << component.errors();
@@ -1207,7 +1212,7 @@ void Qt5InformationNodeInstanceServer::doRenderModelNode2DImageView()
             // Some component may expect to always be shown at certain size, so their layouts may
             // not support scaling, so let's always render at the default size if item has one and
             // scale the resulting image instead.
-            QSize finalSize = m_modelNodePreviewImageCommand.size();
+            QSize finalSize = cmd.size();
             QRectF renderRect = itemBoundingRect(instanceItem);
             QSize renderSize = renderRect.size().toSize();
             if (renderSize.isEmpty()) {
@@ -1247,7 +1252,7 @@ void Qt5InformationNodeInstanceServer::doRenderModelNode2DImageView()
             delete instanceItem;
 
             // If component changes, puppet will need a reset anyway, so we can cache the image
-            m_modelNodePreviewImageCache.insert(m_modelNodePreviewImageCommand.componentPath(), renderImage);
+            m_modelNodePreviewImageCache.insert(cmd.componentPath(), renderImage);
         }
 
         if (!renderImage.isNull()) {
@@ -2229,7 +2234,7 @@ void Qt5InformationNodeInstanceServer::view3DAction(const View3DActionCommand &c
 
 void Qt5InformationNodeInstanceServer::requestModelNodePreviewImage(const RequestModelNodePreviewImageCommand &command)
 {
-    m_modelNodePreviewImageCommand = command;
+    m_modelNodePreviewImageCommands.insert(command);
     renderModelNodeImageView();
 }
 
diff --git a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.h b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.h
index a86ce2a461..b6375076b6 100644
--- a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.h
+++ b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.h
@@ -139,8 +139,8 @@ private:
     void doRender3DEditView();
     void renderModelNodeImageView();
     void doRenderModelNodeImageView();
-    void doRenderModelNode3DImageView();
-    void doRenderModelNode2DImageView();
+    void doRenderModelNode3DImageView(const RequestModelNodePreviewImageCommand &cmd);
+    void doRenderModelNode2DImageView(const RequestModelNodePreviewImageCommand &cmd);
     void updateLockedAndHiddenStates(const QSet<ServerNodeInstance> &instances);
     void handleInputEvents();
     void resolveImportSupport();
@@ -159,7 +159,7 @@ private:
     RenderViewData m_modelNode2DImageViewData;
 
     bool m_editView3DSetupDone = false;
-    RequestModelNodePreviewImageCommand m_modelNodePreviewImageCommand;
+    QSet<RequestModelNodePreviewImageCommand> m_modelNodePreviewImageCommands;
     QHash<QString, QImage> m_modelNodePreviewImageCache;
     QSet<QObject *> m_view3Ds;
     QMultiHash<QObject *, QObject *> m_3DSceneMap; // key: scene root, value: node
diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml
index a90dfa50f1..a8d0a53381 100644
--- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml
+++ b/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml
@@ -442,10 +442,12 @@ Item {
                 width: parent.width - addAssetButton.width - 5
             }
 
-            PlusButton {
+            IconButton {
                 id: addAssetButton
                 anchors.verticalCenter: parent.verticalCenter
                 tooltip: qsTr("Add a new asset to the project.")
+                icon: StudioTheme.Constants.plus
+                buttonSize: parent.height
 
                 onClicked: rootView.handleAddAsset()
             }
diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
index bc0dc79ef2..4771127ab8 100644
--- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
+++ b/share/qtcreator/qmldesigner/itemLibraryQmlSources/ItemsView.qml
@@ -218,12 +218,15 @@ Item {
             SearchBox {
                 id: searchBox
 
-                width: parent.width - addAssetButton.width - 5
+                width: parent.width - addModuleButton.width - 5
             }
 
-            PlusButton {
-                id: addAssetButton
+            IconButton {
+                id: addModuleButton
+                anchors.verticalCenter: parent.verticalCenter
                 tooltip: qsTr("Add a module.")
+                icon: StudioTheme.Constants.plus
+                buttonSize: parent.height
 
                 onClicked: isAddModuleView = true
             }
diff --git a/share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml b/share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml
new file mode 100644
index 0000000000..3fdc9cffda
--- /dev/null
+++ b/share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml
@@ -0,0 +1,221 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 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
+
+Item {
+    id: root
+
+    readonly property int cellWidth: 100
+    readonly property int cellHeight: 120
+
+    property var currentMaterial: null
+    property int currentMaterialIdx: 0
+
+    // Called also from C++ to close context menu on focus out
+    function closeContextMenu()
+    {
+        contextMenu.close()
+    }
+
+    // Called from C++ to refresh a preview material after it changes
+    function refreshPreview(idx)
+    {
+        var item = gridRepeater.itemAt(idx);
+        if (item)
+            item.refreshPreview();
+    }
+
+    // Called from C++
+    function clearSearchFilter()
+    {
+        searchBox.clearSearchFilter();
+    }
+
+    MouseArea {
+        id: rootMouseArea
+
+        anchors.fill: parent
+
+        acceptedButtons: Qt.RightButton
+
+        onClicked: {
+            root.currentMaterial = null
+            contextMenu.popup()
+        }
+    }
+
+    Connections {
+        target: materialBrowserModel
+
+        function onSelectedIndexChanged() {
+            // commit rename upon changing selection
+            var item = gridRepeater.itemAt(currentMaterialIdx);
+            if (item)
+                item.commitRename();
+
+            currentMaterialIdx = materialBrowserModel.selectedIndex;
+        }
+    }
+
+    StudioControls.Menu {
+        id: contextMenu
+
+        closePolicy: StudioControls.Menu.CloseOnEscape | StudioControls.Menu.CloseOnPressOutside
+
+        StudioControls.MenuItem {
+            text: qsTr("Apply to selected (replace)")
+            enabled: currentMaterial
+            onTriggered: materialBrowserModel.applyToSelected(currentMaterial.materialInternalId, false)
+        }
+
+        StudioControls.MenuItem {
+            text: qsTr("Apply to selected (add)")
+            enabled: currentMaterial
+            onTriggered: materialBrowserModel.applyToSelected(currentMaterial.materialInternalId, true)
+        }
+
+        StudioControls.MenuItem {
+            text: qsTr("Rename")
+            enabled: currentMaterial
+            onTriggered: {
+                var item = gridRepeater.itemAt(currentMaterialIdx);
+                if (item)
+                    item.startRename();
+            }
+        }
+
+        StudioControls.MenuItem {
+            text: qsTr("Delete")
+            enabled: currentMaterial
+
+            onTriggered: materialBrowserModel.deleteMaterial(currentMaterial.materialInternalId)
+        }
+
+        StudioControls.MenuSeparator {}
+
+        StudioControls.MenuItem {
+            text: qsTr("New Material")
+
+            onTriggered: materialBrowserModel.addNewMaterial()
+        }
+    }
+
+    Column {
+        id: col
+        y: 5
+        spacing: 5
+
+        Row {
+            width: root.width
+
+            SearchBox {
+                id: searchBox
+
+                width: root.width - addMaterialButton.width
+            }
+
+            IconButton {
+                id: addMaterialButton
+
+                tooltip: qsTr("Add a material.")
+
+                icon: StudioTheme.Constants.plus
+                anchors.verticalCenter: parent.verticalCenter
+                buttonSize: searchBox.height
+                onClicked: materialBrowserModel.addNewMaterial()
+            }
+        }
+
+        Text {
+            text: qsTr("No match found.");
+            color: StudioTheme.Values.themeTextColor
+            font.pixelSize: StudioTheme.Values.baseFontSize
+            leftPadding: 10
+            visible: materialBrowserModel.hasQuick3DImport && materialBrowserModel.isEmpty && !searchBox.isEmpty()
+        }
+
+        Text {
+            text: qsTr("No materials yet.");
+            color: StudioTheme.Values.themeTextColor
+            font.pixelSize: StudioTheme.Values.mediumFontSize
+            topPadding: 30
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: materialBrowserModel.hasQuick3DImport && materialBrowserModel.isEmpty && searchBox.isEmpty()
+        }
+
+        Text {
+            text: qsTr("Add QtQuick3D module using the Components view to enable the Material Browser.");
+            color: StudioTheme.Values.themeTextColor
+            font.pixelSize: StudioTheme.Values.mediumFontSize
+            topPadding: 30
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.WordWrap
+            width: root.width
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: !materialBrowserModel.hasQuick3DImport
+        }
+
+        ScrollView {
+            id: scrollView
+
+            width: root.width
+            height: root.height - searchBox.height
+            clip: true
+
+            Grid {
+                id: grid
+
+                width: scrollView.width
+                leftPadding: 5
+                rightPadding: 5
+                bottomPadding: 5
+                columns: root.width / root.cellWidth
+
+                Repeater {
+                    id: gridRepeater
+
+                    model: materialBrowserModel
+                    delegate: MaterialItem {
+                        width: root.cellWidth
+                        height: root.cellHeight
+
+                        onShowContextMenu: {
+                            if (searchBox.isEmpty()) {
+                                root.currentMaterial = model
+                                contextMenu.popup()
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialItem.qml b/share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialItem.qml
new file mode 100644
index 0000000000..4eeb120b27
--- /dev/null
+++ b/share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialItem.qml
@@ -0,0 +1,134 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Rectangle {
+    id: root
+
+    signal showContextMenu()
+
+    function refreshPreview()
+    {
+        img.source = ""
+        img.source = "image://materialBrowser/" + materialInternalId
+    }
+
+    function startRename()
+    {
+        matName.readOnly = false
+        matName.selectAll()
+        matName.forceActiveFocus()
+        nameMouseArea.enabled = false
+    }
+
+    function commitRename()
+    {
+        if (matName.readOnly)
+            return;
+
+        matName.readOnly = true
+        nameMouseArea.enabled = true
+
+        materialBrowserModel.renameMaterial(index, matName.text);
+    }
+
+    border.width: materialBrowserModel.selectedIndex === index ? 1 : 0
+    border.color: materialBrowserModel.selectedIndex === index
+                        ? StudioTheme.Values.themeControlOutlineInteraction
+                        : "transparent"
+    color: "transparent"
+    visible: materialVisible
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+
+        onClicked: (mouse) => {
+            materialBrowserModel.selectMaterial(index)
+            if (mouse.button === Qt.RightButton)
+                root.showContextMenu()
+        }
+
+        onDoubleClicked: materialBrowserModel.openMaterialEditor();
+    }
+
+    Column {
+        anchors.fill: parent
+        spacing: 1
+
+        Item { width: 1; height: 5 } // spacer
+
+        Image {
+            id: img
+
+            width: root.width - 10
+            height: img.width
+            anchors.horizontalCenter: parent.horizontalCenter
+            source: "image://materialBrowser/" + materialInternalId
+            cache: false
+        }
+
+        TextInput {
+            id: matName
+
+            text: materialName
+
+            width: img.width
+            clip: true
+            anchors.horizontalCenter: parent.horizontalCenter
+            horizontalAlignment: TextInput.AlignHCenter
+
+            font.pixelSize: StudioTheme.Values.myFontSize
+
+            readOnly: true
+            selectByMouse: !matName.readOnly
+
+            color: StudioTheme.Values.themeTextColor
+            selectionColor: StudioTheme.Values.themeTextSelectionColor
+            selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor
+
+            // allow only alphanumeric characters, underscores, no space at start, and 1 space between words
+            validator: RegExpValidator { regExp: /^(\w+\s)*\w+$/ }
+
+            onEditingFinished: root.commitRename()
+
+            MouseArea {
+                id: nameMouseArea
+
+                anchors.fill: parent
+
+                onClicked: materialBrowserModel.selectMaterial(index)
+                onDoubleClicked: root.startRename()
+            }
+        }
+    }
+}
diff --git a/share/qtcreator/qmldesigner/materialEditorQmlSources/EmptyMaterialEditorPane.qml b/share/qtcreator/qmldesigner/materialEditorQmlSources/EmptyMaterialEditorPane.qml
new file mode 100644
index 0000000000..2e812dcd66
--- /dev/null
+++ b/share/qtcreator/qmldesigner/materialEditorQmlSources/EmptyMaterialEditorPane.qml
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+PropertyEditorPane {
+    id: root
+
+    signal toolBarAction(int action)
+
+    Column {
+        id: col
+
+        MaterialEditorToolBar {
+            width: root.width
+
+            onToolBarAction: (action) => root.toolBarAction(action)
+        }
+
+        Item {
+            width: root.width - 2 * col.padding
+            height: 150
+
+            Text {
+                text: hasQuick3DImport ? qsTr("No materials yet.\nClick 'Add new material' above to start.")
+                                       : qsTr("Add QtQuick3D module using the Components view to enable the Material Editor.")
+                color: StudioTheme.Values.themeTextColor
+                font.pixelSize: StudioTheme.Values.baseFontSize
+                horizontalAlignment: Text.AlignHCenter
+                wrapMode: Text.WordWrap
+                width: root.width
+                anchors.centerIn: parent
+            }
+        }
+    }
+}
diff --git a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml
new file mode 100644
index 0000000000..cfc037bc24
--- /dev/null
+++ b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
+
+PropertyEditorPane {
+    id: itemPane
+
+    signal toolBarAction(int action)
+
+    // invoked from C++ to refresh material preview image
+    function refreshPreview()
+    {
+        topSection.refreshPreview()
+    }
+
+    MaterialEditorTopSection {
+        id: topSection
+
+        onToolBarAction: (action) => itemPane.toolBarAction(action)
+    }
+
+    Item { width: 1; height: 10 }
+
+    Loader {
+        id: specificsOne
+        anchors.left: parent.left
+        anchors.right: parent.right
+        source: specificsUrl
+    }
+}
diff --git a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorToolBar.qml b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorToolBar.qml
new file mode 100644
index 0000000000..028957c882
--- /dev/null
+++ b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorToolBar.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuickDesignerTheme 1.0
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+import ToolBarAction 1.0
+
+Rectangle {
+    id: root
+
+    color: StudioTheme.Values.themeSectionHeadBackground
+    width: row.width
+    height: 40
+
+    signal toolBarAction(int action)
+
+    Row {
+        id: row
+
+        anchors.verticalCenter: parent.verticalCenter
+        leftPadding: 6
+
+        IconButton {
+            icon: StudioTheme.Constants.applyMaterialToSelected
+
+            normalColor: "transparent"
+            iconSize: StudioTheme.Values.bigIconFontSize
+            buttonSize: root.height
+            enabled: hasMaterial && hasQuick3DImport
+            onClicked: root.toolBarAction(ToolBarAction.ApplyToSelected)
+            tooltip: qsTr("Apply material to selected model.")
+        }
+
+        IconButton {
+            icon: StudioTheme.Constants.newMaterial
+
+            normalColor: "transparent"
+            iconSize: StudioTheme.Values.bigIconFontSize
+            buttonSize: root.height
+            enabled: hasQuick3DImport
+            onClicked: root.toolBarAction(ToolBarAction.AddNewMaterial)
+            tooltip: qsTr("Add a new material.")
+        }
+
+        IconButton {
+            icon: StudioTheme.Constants.deleteMaterial
+
+            normalColor: "transparent"
+            iconSize: StudioTheme.Values.bigIconFontSize
+            buttonSize: root.height
+            enabled: hasMaterial && hasQuick3DImport
+            onClicked: root.toolBarAction(ToolBarAction.DeleteCurrentMaterial)
+            tooltip: qsTr("Delete current material.")
+        }
+
+        IconButton {
+            icon: StudioTheme.Constants.openMaterialBrowser
+
+            normalColor: "transparent"
+            iconSize: StudioTheme.Values.bigIconFontSize
+            buttonSize: root.height
+            enabled: hasMaterial && hasQuick3DImport
+            onClicked: root.toolBarAction(ToolBarAction.OpenMaterialBrowser)
+            tooltip: qsTr("Open material browser.")
+        }
+    }
+}
diff --git a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorTopSection.qml b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorTopSection.qml
new file mode 100644
index 0000000000..2e21d5814a
--- /dev/null
+++ b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorTopSection.qml
@@ -0,0 +1,125 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuickDesignerTheme 1.0
+import QtQuick.Templates 2.15 as T
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    id: root
+
+    signal toolBarAction(int action)
+
+    function refreshPreview()
+    {
+        materialPreview.source = ""
+        materialPreview.source = "image://materialEditor/preview"
+    }
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    MaterialEditorToolBar {
+        width: root.width
+
+        onToolBarAction: (action) => root.toolBarAction(action)
+    }
+
+    Item { width: 1; height: 10 } // spacer
+
+    Rectangle {
+        width: 152
+        height: 152
+        color: "#000000"
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        Image {
+            id: materialPreview
+            width: 150
+            height: 150
+            anchors.centerIn: parent
+            source: "image://materialEditor/preview"
+            cache: false
+        }
+    }
+
+    Section {
+        // Section with hidden header is used so properties are aligned with the other sections' properties
+        hideHeader: true
+        width: parent.width
+
+        SectionLayout {
+            PropertyLabel { text: qsTr("Name") }
+
+            SecondColumnLayout {
+                Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
+
+                LineEdit {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                    width: StudioTheme.Values.singleControlColumnWidth
+                    backendValue: backendValues.objectName
+                    placeholderText: qsTr("Material name")
+
+                    text: backendValues.id.value
+                    showTranslateCheckBox: false
+                    showExtendedFunctionButton: false
+
+                    // allow only alphanumeric characters, underscores, no space at start, and 1 space between words
+                    validator: RegExpValidator { regExp: /^(\w+\s)*\w+$/ }
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel { text: qsTr("Type") }
+
+            SecondColumnLayout {
+                Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
+
+                ComboBox {
+                    currentIndex: {
+                        if (backendValues.__classNamePrivateInternal.value === "CustomMaterial")
+                            return 2
+
+                        if (backendValues.__classNamePrivateInternal.value === "PrincipledMaterial")
+                            return 1
+
+                        return 0
+                    }
+
+                    model: ["DefaultMaterial", "PrincipledMaterial", "CustomMaterial"]
+                    showExtendedFunctionButton: false
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+
+                    onActivated: changeTypeName(currentValue)
+                }
+            }
+        }
+    }
+}
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml
index 1b2df5756b..48ec9fa470 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml
@@ -74,6 +74,29 @@ StudioControls.ComboBox {
 
     property alias colorLogic: colorLogic
 
+    DropArea {
+        id: dropArea
+
+        anchors.fill: parent
+
+        property string assetPath: ""
+
+        onEntered: (drag) => {
+            dropArea.assetPath = drag.getDataAsString(drag.keys[0]).split(",")[0]
+
+            drag.accepted = comboBox.backendValue !== undefined && comboBox.backendValue.isSupportedDrop(dropArea.assetPath)
+            comboBox.hasActiveDrag = drag.accepted
+        }
+
+        onExited: comboBox.hasActiveDrag = false
+
+        onDropped: {
+            comboBox.backendValue.commitDrop(dropArea.assetPath)
+            comboBox.hasActiveDrag = false
+        }
+
+    }
+
     ExtendedFunctionLogic {
         id: extFuncLogic
         backendValue: comboBox.backendValue
diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/PlusButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconButton.qml
index 31f69be996..2fc10b1855 100644
--- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/PlusButton.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconButton.qml
@@ -26,54 +26,58 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuickDesignerTheme 1.0
-import HelperWidgets 2.0 as HelperWidgets
-import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
 Rectangle {
     id: root
 
-    property string tooltip: ""
-
     signal clicked()
 
-    implicitWidth: 29
-    implicitHeight: 29
-    color: mouseArea.containsMouse && enabled
-           ? StudioTheme.Values.themeControlBackgroundHover
-           : StudioTheme.Values.themeControlBackground
+    property alias icon: icon.text
+    property alias enabled: mouseArea.enabled
+    property alias tooltip: toolTip.text
+    property alias iconSize: icon.font.pixelSize
+
+    property int buttonSize: StudioTheme.Values.height
+    property color normalColor: StudioTheme.Values.themeControlBackground
+    property color hoverColor: StudioTheme.Values.themeControlBackgroundHover
+    property color pressColor: StudioTheme.Values.themeControlBackgroundInteraction
+
+    width: buttonSize
+    height: buttonSize
+
+    color: mouseArea.pressed ? pressColor
+                             : mouseArea.containsMouse ? hoverColor
+                                                       : normalColor
 
     Behavior on color {
         ColorAnimation {
-            duration: StudioTheme.Values.hoverDuration
-            easing.type: StudioTheme.Values.hoverEasing
+            duration: 300
+            easing.type: Easing.OutQuad
         }
     }
 
-    Label { // + sign
-        text: StudioTheme.Constants.plus
-        font.family: StudioTheme.Constants.iconFont.family
-        font.pixelSize: StudioTheme.Values.myIconFontSize
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-        anchors.centerIn: parent
-        color: root.enabled ? StudioTheme.Values.themeIconColor
-                            : StudioTheme.Values.themeIconColorDisabled
-        scale: mouseArea.containsMouse ? 1.4 : 1
+    Text {
+        id: icon
 
-        Behavior on scale {
-            NumberAnimation {
-                duration: 300
-                easing.type: Easing.OutExpo
-            }
-        }
+        color: root.enabled ? StudioTheme.Values.themeTextColor : StudioTheme.Values.themeTextColorDisabled
+        font.family: StudioTheme.Constants.iconFont.family
+        font.pixelSize: StudioTheme.Values.baseIconFontSize
+        anchors.centerIn: root
     }
 
-    HelperWidgets.ToolTipArea {
+    MouseArea {
         id: mouseArea
+
         anchors.fill: parent
         hoverEnabled: true
         onClicked: root.clicked()
-        tooltip: root.tooltip
+    }
+
+    ToolTip {
+        id: toolTip
+
+        visible: mouseArea.containsMouse
+        delay: 1000
     }
 }
diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/SearchBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SearchBox.qml
index 81ed5c11e4..d1b6001bcf 100644
--- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/SearchBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SearchBox.qml
@@ -26,8 +26,6 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuickDesignerTheme 1.0
-import HelperWidgets 2.0 as HelperWidgets
-import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
 Item {
@@ -87,7 +85,7 @@ Item {
         Label {
             text: StudioTheme.Constants.search
             font.family: StudioTheme.Constants.iconFont.family
-            font.pixelSize: 16
+            font.pixelSize: StudioTheme.Values.myIconFontSize
             anchors.left: parent.left
             anchors.leftMargin: 7
             anchors.verticalCenter: parent.verticalCenter
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir
index 8b87f1ca79..9c1c873ceb 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir
@@ -37,6 +37,7 @@ GradientPropertySpinBox 2.0 GradientPropertySpinBox.qml
 HorizontalScrollBar 2.0 HorizontalScrollBar.qml
 HueSlider 2.0 HueSlider.qml
 IconIndicator 2.0 IconIndicator.qml
+IconButton 2.0 IconButton.qml
 IconLabel 2.0 IconLabel.qml
 ImagePreviewTooltipArea 2.0 ImagePreviewTooltipArea.qml
 ImageSection 2.0 ImageSection.qml
@@ -59,6 +60,7 @@ RoundedPanel 2.0 RoundedPanel.qml
 ScrollView 2.0 ScrollView.qml
 SecondColumnLayout 2.0 SecondColumnLayout.qml
 Section 2.0 Section.qml
+SearchBox 2.0 SearchBox.qml
 SectionLayout 2.0 SectionLayout.qml
 Spacer 2.0 Spacer.qml
 SpinBox 2.0 SpinBox.qml
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
index eb48ab6dc0..fbd4f53062 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml
@@ -39,6 +39,7 @@ T.ComboBox {
                          && myComboBox.enabled
     property bool edit: myComboBox.activeFocus && myComboBox.editable
     property bool open: comboBoxPopup.opened
+    property bool hasActiveDrag: false
 
     property bool dirty: false // user modification flag
 
@@ -251,7 +252,8 @@ T.ComboBox {
             PropertyChanges {
                 target: comboBoxBackground
                 color: StudioTheme.Values.themeControlBackground
-                border.color: StudioTheme.Values.themeControlOutline
+                border.color: hasActiveDrag ? StudioTheme.Values.themeInteraction
+                                            : StudioTheme.Values.themeControlOutline
             }
         },
         // This state is intended for ComboBoxes which aren't editable, but have focus e.g. via
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml
index db952d5286..5972e56e04 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml
@@ -64,125 +64,130 @@ QtObject {
     readonly property string animatedProperty: "\u003B"
     readonly property string annotationBubble: "\u003C"
     readonly property string annotationDecal: "\u003D"
-    readonly property string assign: "\u003E"
-    readonly property string bevelAll: "\u003F"
-    readonly property string bevelCorner: "\u0040"
-    readonly property string centerHorizontal: "\u0041"
-    readonly property string centerVertical: "\u0042"
-    readonly property string closeCross: "\u0043"
-    readonly property string colorPopupClose: "\u0044"
-    readonly property string columnsAndRows: "\u0045"
-    readonly property string copyStyle: "\u0046"
-    readonly property string cornerA: "\u0047"
-    readonly property string cornerB: "\u0048"
-    readonly property string cornersAll: "\u0049"
-    readonly property string curveDesigner: "\u004A"
-    readonly property string curveEditor: "\u004B"
-    readonly property string decisionNode: "\u004C"
-    readonly property string deleteColumn: "\u004D"
-    readonly property string deleteRow: "\u004E"
-    readonly property string deleteTable: "\u004F"
-    readonly property string detach: "\u0050"
-    readonly property string distributeBottom: "\u0051"
-    readonly property string distributeCenterHorizontal: "\u0052"
-    readonly property string distributeCenterVertical: "\u0053"
-    readonly property string distributeLeft: "\u0054"
-    readonly property string distributeOriginBottomRight: "\u0055"
-    readonly property string distributeOriginCenter: "\u0056"
-    readonly property string distributeOriginNone: "\u0057"
-    readonly property string distributeOriginTopLeft: "\u0058"
-    readonly property string distributeRight: "\u0059"
-    readonly property string distributeSpacingHorizontal: "\u005A"
-    readonly property string distributeSpacingVertical: "\u005B"
-    readonly property string distributeTop: "\u005C"
-    readonly property string download: "\u005D"
-    readonly property string downloadUnavailable: "\u005E"
-    readonly property string downloadUpdate: "\u005F"
-    readonly property string downloaded: "\u0060"
-    readonly property string edit: "\u0061"
-    readonly property string eyeDropper: "\u0062"
-    readonly property string favorite: "\u0063"
-    readonly property string flowAction: "\u0064"
-    readonly property string flowTransition: "\u0065"
-    readonly property string fontStyleBold: "\u0066"
-    readonly property string fontStyleItalic: "\u0067"
-    readonly property string fontStyleStrikethrough: "\u0068"
-    readonly property string fontStyleUnderline: "\u0069"
-    readonly property string gradient: "\u006A"
-    readonly property string gridView: "\u006B"
-    readonly property string idAliasOff: "\u006C"
-    readonly property string idAliasOn: "\u006D"
-    readonly property string infinity: "\u006E"
-    readonly property string keyframe: "\u006F"
-    readonly property string linkTriangle: "\u0070"
-    readonly property string linked: "\u0071"
-    readonly property string listView: "\u0072"
-    readonly property string lockOff: "\u0073"
-    readonly property string lockOn: "\u0074"
-    readonly property string mergeCells: "\u0075"
-    readonly property string minus: "\u0076"
-    readonly property string mirror: "\u0077"
-    readonly property string orientation: "\u0078"
-    readonly property string paddingEdge: "\u0079"
-    readonly property string paddingFrame: "\u007A"
-    readonly property string pasteStyle: "\u007B"
-    readonly property string pause: "\u007C"
-    readonly property string pin: "\u007D"
-    readonly property string play: "\u007E"
-    readonly property string plus: "\u007F"
-    readonly property string promote: "\u0080"
-    readonly property string readOnly: "\u0081"
-    readonly property string redo: "\u0082"
-    readonly property string rotationFill: "\u0083"
-    readonly property string rotationOutline: "\u0084"
-    readonly property string search: "\u0085"
-    readonly property string sectionToggle: "\u0086"
-    readonly property string splitColumns: "\u0087"
-    readonly property string splitRows: "\u0088"
-    readonly property string startNode: "\u0089"
-    readonly property string testIcon: "\u008A"
-    readonly property string textAlignBottom: "\u008B"
-    readonly property string textAlignCenter: "\u008C"
-    readonly property string textAlignJustified: "\u008D"
-    readonly property string textAlignLeft: "\u008E"
-    readonly property string textAlignMiddle: "\u008F"
-    readonly property string textAlignRight: "\u0090"
-    readonly property string textAlignTop: "\u0091"
-    readonly property string textBulletList: "\u0092"
-    readonly property string textFullJustification: "\u0093"
-    readonly property string textNumberedList: "\u0094"
-    readonly property string tickIcon: "\u0095"
-    readonly property string translationCreateFiles: "\u0096"
-    readonly property string translationCreateReport: "\u0097"
-    readonly property string translationExport: "\u0098"
-    readonly property string translationImport: "\u0099"
-    readonly property string translationSelectLanguages: "\u009A"
-    readonly property string translationTest: "\u009B"
-    readonly property string transparent: "\u009D"
-    readonly property string triState: "\u009E"
-    readonly property string triangleArcA: "\u009F"
-    readonly property string triangleArcB: "\u00A0"
-    readonly property string triangleCornerA: "\u00A1"
-    readonly property string triangleCornerB: "\u00A2"
-    readonly property string unLinked: "\u00A3"
-    readonly property string undo: "\u00A4"
-    readonly property string unpin: "\u00A5"
-    readonly property string upDownIcon: "\u00A6"
-    readonly property string upDownSquare2: "\u00A7"
-    readonly property string visibilityOff: "\u00A8"
-    readonly property string visibilityOn: "\u00A9"
-    readonly property string wildcard: "\u00AA"
-    readonly property string wizardsAutomotive: "\u00AB"
-    readonly property string wizardsDesktop: "\u00AC"
-    readonly property string wizardsGeneric: "\u00AE"
-    readonly property string wizardsMcuEmpty: "\u00AF"
-    readonly property string wizardsMcuGraph: "\u00B0"
-    readonly property string wizardsMobile: "\u00B1"
-    readonly property string wizardsUnknown: "\u00B2"
-    readonly property string zoomAll: "\u00B3"
-    readonly property string zoomIn: "\u00B4"
-    readonly property string zoomOut: "\u00B5"
-    readonly property string zoomSelection: "\u00B6"
+    readonly property string applyMaterialToSelected: "\u003E"
+    readonly property string assign: "\u003F"
+    readonly property string bevelAll: "\u0040"
+    readonly property string bevelCorner: "\u0041"
+    readonly property string centerHorizontal: "\u0042"
+    readonly property string centerVertical: "\u0043"
+    readonly property string closeCross: "\u0044"
+    readonly property string colorPopupClose: "\u0045"
+    readonly property string columnsAndRows: "\u0046"
+    readonly property string copyStyle: "\u0047"
+    readonly property string cornerA: "\u0048"
+    readonly property string cornerB: "\u0049"
+    readonly property string cornersAll: "\u004A"
+    readonly property string curveDesigner: "\u004B"
+    readonly property string curveEditor: "\u004C"
+    readonly property string customMaterialEditor: "\u004D"
+    readonly property string decisionNode: "\u004E"
+    readonly property string deleteColumn: "\u004F"
+    readonly property string deleteMaterial: "\u0050"
+    readonly property string deleteRow: "\u0051"
+    readonly property string deleteTable: "\u0052"
+    readonly property string detach: "\u0053"
+    readonly property string distributeBottom: "\u0054"
+    readonly property string distributeCenterHorizontal: "\u0055"
+    readonly property string distributeCenterVertical: "\u0056"
+    readonly property string distributeLeft: "\u0057"
+    readonly property string distributeOriginBottomRight: "\u0058"
+    readonly property string distributeOriginCenter: "\u0059"
+    readonly property string distributeOriginNone: "\u005A"
+    readonly property string distributeOriginTopLeft: "\u005B"
+    readonly property string distributeRight: "\u005C"
+    readonly property string distributeSpacingHorizontal: "\u005D"
+    readonly property string distributeSpacingVertical: "\u005E"
+    readonly property string distributeTop: "\u005F"
+    readonly property string download: "\u0060"
+    readonly property string downloadUnavailable: "\u0061"
+    readonly property string downloadUpdate: "\u0062"
+    readonly property string downloaded: "\u0063"
+    readonly property string edit: "\u0064"
+    readonly property string eyeDropper: "\u0065"
+    readonly property string favorite: "\u0066"
+    readonly property string flowAction: "\u0067"
+    readonly property string flowTransition: "\u0068"
+    readonly property string fontStyleBold: "\u0069"
+    readonly property string fontStyleItalic: "\u006A"
+    readonly property string fontStyleStrikethrough: "\u006B"
+    readonly property string fontStyleUnderline: "\u006C"
+    readonly property string gradient: "\u006D"
+    readonly property string gridView: "\u006E"
+    readonly property string idAliasOff: "\u006F"
+    readonly property string idAliasOn: "\u0070"
+    readonly property string infinity: "\u0071"
+    readonly property string keyframe: "\u0072"
+    readonly property string linkTriangle: "\u0073"
+    readonly property string linked: "\u0074"
+    readonly property string listView: "\u0075"
+    readonly property string lockOff: "\u0076"
+    readonly property string lockOn: "\u0077"
+    readonly property string mergeCells: "\u0078"
+    readonly property string minus: "\u0079"
+    readonly property string mirror: "\u007A"
+    readonly property string newMaterial: "\u007B"
+    readonly property string openMaterialBrowser: "\u007C"
+    readonly property string orientation: "\u007D"
+    readonly property string paddingEdge: "\u007E"
+    readonly property string paddingFrame: "\u007F"
+    readonly property string pasteStyle: "\u0080"
+    readonly property string pause: "\u0081"
+    readonly property string pin: "\u0082"
+    readonly property string play: "\u0083"
+    readonly property string plus: "\u0084"
+    readonly property string promote: "\u0085"
+    readonly property string readOnly: "\u0086"
+    readonly property string redo: "\u0087"
+    readonly property string rotationFill: "\u0088"
+    readonly property string rotationOutline: "\u0089"
+    readonly property string search: "\u008A"
+    readonly property string sectionToggle: "\u008B"
+    readonly property string splitColumns: "\u008C"
+    readonly property string splitRows: "\u008D"
+    readonly property string startNode: "\u008E"
+    readonly property string testIcon: "\u008F"
+    readonly property string textAlignBottom: "\u0090"
+    readonly property string textAlignCenter: "\u0091"
+    readonly property string textAlignJustified: "\u0092"
+    readonly property string textAlignLeft: "\u0093"
+    readonly property string textAlignMiddle: "\u0094"
+    readonly property string textAlignRight: "\u0095"
+    readonly property string textAlignTop: "\u0096"
+    readonly property string textBulletList: "\u0097"
+    readonly property string textFullJustification: "\u0098"
+    readonly property string textNumberedList: "\u0099"
+    readonly property string tickIcon: "\u009A"
+    readonly property string translationCreateFiles: "\u009B"
+    readonly property string translationCreateReport: "\u009D"
+    readonly property string translationExport: "\u009E"
+    readonly property string translationImport: "\u009F"
+    readonly property string translationSelectLanguages: "\u00A0"
+    readonly property string translationTest: "\u00A1"
+    readonly property string transparent: "\u00A2"
+    readonly property string triState: "\u00A3"
+    readonly property string triangleArcA: "\u00A4"
+    readonly property string triangleArcB: "\u00A5"
+    readonly property string triangleCornerA: "\u00A6"
+    readonly property string triangleCornerB: "\u00A7"
+    readonly property string unLinked: "\u00A8"
+    readonly property string undo: "\u00A9"
+    readonly property string unpin: "\u00AA"
+    readonly property string upDownIcon: "\u00AB"
+    readonly property string upDownSquare2: "\u00AC"
+    readonly property string visibilityOff: "\u00AE"
+    readonly property string visibilityOn: "\u00AF"
+    readonly property string wildcard: "\u00B0"
+    readonly property string wizardsAutomotive: "\u00B1"
+    readonly property string wizardsDesktop: "\u00B2"
+    readonly property string wizardsGeneric: "\u00B3"
+    readonly property string wizardsMcuEmpty: "\u00B4"
+    readonly property string wizardsMcuGraph: "\u00B5"
+    readonly property string wizardsMobile: "\u00B6"
+    readonly property string wizardsUnknown: "\u00B7"
+    readonly property string zoomAll: "\u00B8"
+    readonly property string zoomIn: "\u00B9"
+    readonly property string zoomOut: "\u00BA"
+    readonly property string zoomSelection: "\u00BB"
 
     readonly property font iconFont: Qt.font({
                                                  "family": controlIcons.name,
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
index f63aa36ab1..75d21a8e29 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
@@ -32,13 +32,21 @@ QtObject {
 
     property real baseHeight: 29
     property real baseFont: 12
+    property real mediumFont: 14
+    property real bigFont: 16
     property real baseIconFont: 12
+    property real bigIconFont: 26
 
     property real scaleFactor: 1.0
 
     property real height: Math.round(values.baseHeight * values.scaleFactor)
-    property real myFontSize: Math.round(values.baseFont * values.scaleFactor)
-    property real myIconFontSize: Math.round(values.baseIconFont * values.scaleFactor)
+    property real baseFontSize: Math.round(values.baseFont * values.scaleFactor)
+    property real myFontSize: values.baseFontSize // TODO: rename all refs to myFontSize -> baseFontSize then remove myFontSize
+    property real mediumFontSize: Math.round(values.mediumFont * values.scaleFactor)
+    property real bigFontSize: Math.round(values.bigFont * values.scaleFactor)
+    property real baseIconFontSize: Math.round(values.baseIconFont * values.scaleFactor)
+    property real myIconFontSize: values.baseIconFontSize;  // TODO: rename all refs to myIconFontSize -> baseIconFontSize then remove myIconFontSize
+    property real bigIconFontSize: Math.round(values.bigIconFont * values.scaleFactor)
 
     property real squareComponentWidth: values.height
     property real smallRectWidth: values.height / 2 * 1.5
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf
index 25c4b1e443..5a3e99d459 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf