Replace custom ColorDialog with QtQuick ColorDialog

Add fallback to custom implementation.
Add subdirectories of ControlsDelegates to import path.

Change-Id: I88224b267419664484cd0667456d9463d5c61bee
Reviewed-by: Peter Varga <pvarga@inf.u-szeged.hu>

4 files changed, 303 insertions, 277 deletions

diff --git a/src/webenginequick/ui/CMakeLists.txt b/src/webenginequick/ui/CMakeLists.txt
index 96dedf016..87e3a0f90 100644
--- a/src/webenginequick/ui/CMakeLists.txt
+++ b/src/webenginequick/ui/CMakeLists.txt
@@ -1,11 +1,16 @@
 # Copyright (C) 2022 The Qt Company Ltd.
 # SPDX-License-Identifier: BSD-3-Clause
 
+if (Qt6Quick_VERSION VERSION_GREATER_EQUAL "6.4.0")
+set(colorDialog "ColorDialog.qml")
+else()
+set(colorDialog "custom/ColorDialog.qml")
+endif()
+
 set(qml_files
     "AlertDialog.qml"
     "AuthenticationDialog.qml"
     "AutofillPopup.qml"
-    "ColorDialog.qml"
     "ConfirmDialog.qml"
     "DirectoryPicker.qml"
     "FilePicker.qml"
@@ -16,6 +21,7 @@ set(qml_files
     "ToolTip.qml"
     "TouchHandle.qml"
     "TouchSelectionMenu.qml"
+    ${colorDialog}
 )
 
 set(resource_files
diff --git a/src/webenginequick/ui/ColorDialog.qml b/src/webenginequick/ui/ColorDialog.qml
index 895c90198..f4d5b817b 100644
--- a/src/webenginequick/ui/ColorDialog.qml
+++ b/src/webenginequick/ui/ColorDialog.qml
@@ -1,285 +1,13 @@
 // Copyright (C) 2021 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
 
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
+import QtQuick.Dialogs
 
-Dialog {
+ColorDialog {
     id: colorDialog
-    title: qsTr("Color Picker Dialog")
-    modal: false
-    anchors.centerIn: parent
     objectName: "colorDialog"
 
-    property bool handled: false
-    property color color
-
     signal selectedColor(var color)
-    signal rejected()
-
-    function accept() {
-        handled = true;
-        selectedColor(colorDialog.color)
-        close();
-    }
-
-    function reject() {
-        handled = true;
-        rejected();
-        close();
-    }
-
-    // Handle the case where users simply closes or clicks out of the dialog.
-    onVisibleChanged: {
-        if (!visible && !handled) {
-            handled = true;
-            rejected();
-        } else {
-            handled = false;
-        }
-    }
-
-    function selectColorFromPalette(paletteColor) {
-        colorDialog.color = paletteColor;
-    }
-
-    function zeroPadding(text, length = 2) {
-        var textLength = text.length;
-
-        if (textLength >= length) {
-            return text;
-        }
-
-        for (var i = 0; i < length - textLength; i++) {
-            text = "0" + text;
-        }
-
-        return text;
-    }
-
-    function calculateRGBA() {
-
-        var rgbArray = [colorDialog.color.r, colorDialog.color.g, colorDialog.color.b]
-        if (colorDialog.color.a != 1) {
-            rgbArray.push(colorDialog.color.a);
-        }
-
-        for (var i = 0; i < rgbArray.length; i++) {
-            rgbArray[i] = Number(Math.round(rgbArray[i] * 255)).toString(16);
-            rgbArray[i] = zeroPadding(rgbArray[i]);
-        }
-
-        return "#" + rgbArray.join("");
-    }
-
-
-    function isNaNOrUndefined(value) {
-        return value == null || value == undefined || Number.isNaN(value);
-    }
-
-    function parseColorText(colorText) {
-        if (colorText[0] == '#') {
-            colorText = colorText.substring(1);
-        }
-
-        if (!(colorText.length == 6 || colorText.length == 8)) {
-            return undefined;
-        }
-
-        var rgbaValues = [parseInt("0x" + colorText.substring(0,2)),
-                          parseInt("0x" + colorText.substring(2,4)),
-                          parseInt("0x" + colorText.substring(4,6)),
-                          parseInt("0x" + (colorText.length > 6 ? colorText.substring(6,8) : "FF"))]
-
-        for (var i = 0; i < rgbaValues.length; i++) {
-            if (isNaNOrUndefined(rgbaValues[i])) {
-                return undefined;
-            }
-            rgbaValues[i] = rgbaValues[i] / 255;
-        }
-
-        return Qt.rgba(rgbaValues[0], rgbaValues[1], rgbaValues[2], rgbaValues[3]);
-    }
-
-    ListModel {
-        id: colorList
-        ListElement { rectangleColor: "red" }
-        ListElement { rectangleColor: "orangered" }
-        ListElement { rectangleColor: "orange" }
-        ListElement { rectangleColor: "gold" }
-        ListElement { rectangleColor: "yellow" }
-        ListElement { rectangleColor: "yellowgreen" }
-        ListElement { rectangleColor: "green" }
-        ListElement { rectangleColor: "lightskyblue" }
-        ListElement { rectangleColor: "blue" }
-        ListElement { rectangleColor: "blueviolet" }
-        ListElement { rectangleColor: "violet" }
-        ListElement { rectangleColor: "mediumvioletred" }
-        ListElement { rectangleColor: "black" }
-        ListElement { rectangleColor: "white" }
-    }
-
-    contentItem: GridLayout {
-        id: grid
-        columns: 7
-        rows: 5
-
-        Repeater {
-            model: colorList
-            delegate: Rectangle {
-                width: 50
-                height: 50
-                color: rectangleColor
-                border.color: "black"
-                border.width: 1
-
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: selectColorFromPalette(parent.color)
-                }
-            }
-        }
-        ColumnLayout {
-            id: colorTools
-            Layout.columnSpan: 4
-            Layout.rowSpan: 2
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-
-            Rectangle {
-                height: 100
-                width: 200
-                border.color: "black"
-                border.width: 1
-
-                Binding on color {
-                    when: colorDialog.color
-                    value: colorDialog.color
-                }
-            }
-            TextField {
-                id: colorTextField
-                width: 100
-                selectByMouse: true
-                Layout.alignment: Qt.AlignHCenter
-
-                Binding on text {
-                    when: colorDialog.color
-                    value: calculateRGBA()
-                    delayed: true
-                }
-
-                onTextEdited: {
-                    var parsedColor = parseColorText(colorTextField.text);
-                    if (parsedColor != undefined) {
-                        colorDialog.color = parsedColor;
-                    }
-                }
-
-                MouseArea {
-                    id: colorTextFieldMouseArea
-                    anchors.fill: parent
-                    acceptedButtons: Qt.RightButton
-                    onClicked: colorTextFieldContextMenu.open()
-                }
-
-                Menu {
-                    id: colorTextFieldContextMenu
-                    x: colorTextFieldMouseArea.mouseX
-                    y: colorTextFieldMouseArea.mouseY
-                    MenuItem {
-                        text: qsTr("Copy color")
-                        onTriggered: {
-                            colorTextField.selectAll();
-                            colorTextField.copy();
-                            colorTextField.deselect();
-                        }
-                    }
-                    MenuSeparator {}
-                    MenuItem {
-                        text: qsTr("Paste")
-                        onTriggered: {
-                            colorTextField.selectAll();
-                            colorTextField.paste();
-                        }
-                        enabled: colorTextField.canPaste
-                    }
-                }
-            }
-        }
-        ListModel {
-            id: sliderBoxElements
-            ListElement { labelText: "Red value"; colorChannel: 0 }
-            ListElement { labelText: "Green value"; colorChannel: 1 }
-            ListElement { labelText: "Blue value"; colorChannel: 2 }
-            ListElement { labelText: "Alpha value"; colorChannel: 3 }
-        }
-        ColumnLayout {
-            id: sliderBox
-            Layout.columnSpan: 3
-            Layout.rowSpan: 2
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            Repeater {
-                model: sliderBoxElements
-                delegate: ColumnLayout {
-                    Label {
-                        text: labelText
-                    }
-                    Slider {
-                        id: colorSlider
-                        property int channel: colorChannel
-                        from: 0
-                        to: 255
-                        stepSize: 1
-                        value: {
-                            if (colorSlider.channel == 0)
-                                return colorDialog.color.r * 255;
-                            else if (colorSlider.channel == 1)
-                                return colorDialog.color.g * 255;
-                            else if (colorSlider.channel == 2)
-                                return colorDialog.color.b * 255;
-                            else if (colorSlider.channel == 3)
-                                return colorDialog.color.a * 255;
-                        }
-
-                        Connections {
-                            function onMoved() {
-                                var redChannelValue = colorDialog.color.r;
-                                var greenChannelValue = colorDialog.color.g;
-                                var blueChannelValue = colorDialog.color.b;
-                                var alphaChannelValue = colorDialog.color.a;
-
-                                if (colorSlider.channel == 0)
-                                    redChannelValue = colorSlider.value / 255;
-                                else if (colorSlider.channel == 1)
-                                    greenChannelValue = colorSlider.value / 255;
-                                else if (colorSlider.channel == 2)
-                                    blueChannelValue = colorSlider.value / 255;
-                                else if (colorSlider.channel == 3)
-                                    alphaChannelValue = colorSlider.value / 255;
-
-                                colorDialog.color = Qt.rgba(redChannelValue, greenChannelValue, blueChannelValue, alphaChannelValue);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        DialogButtonBox {
-            id: dialogButtonBox
-            Layout.columnSpan: 7
-            Layout.alignment: Qt.AlignRight
 
-            Button {
-                text: qsTr("Apply")
-                onClicked: accept()
-            }
-            Button {
-                text: qsTr("Cancel")
-                onClicked: reject()
-            }
-        }
-    }
+    onAccepted : selectedColor(selectedColor)
 }
diff --git a/src/webenginequick/ui/custom/ColorDialog.qml b/src/webenginequick/ui/custom/ColorDialog.qml
new file mode 100644
index 000000000..895c90198
--- /dev/null
+++ b/src/webenginequick/ui/custom/ColorDialog.qml
@@ -0,0 +1,285 @@
+// Copyright (C) 2021 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Dialog {
+    id: colorDialog
+    title: qsTr("Color Picker Dialog")
+    modal: false
+    anchors.centerIn: parent
+    objectName: "colorDialog"
+
+    property bool handled: false
+    property color color
+
+    signal selectedColor(var color)
+    signal rejected()
+
+    function accept() {
+        handled = true;
+        selectedColor(colorDialog.color)
+        close();
+    }
+
+    function reject() {
+        handled = true;
+        rejected();
+        close();
+    }
+
+    // Handle the case where users simply closes or clicks out of the dialog.
+    onVisibleChanged: {
+        if (!visible && !handled) {
+            handled = true;
+            rejected();
+        } else {
+            handled = false;
+        }
+    }
+
+    function selectColorFromPalette(paletteColor) {
+        colorDialog.color = paletteColor;
+    }
+
+    function zeroPadding(text, length = 2) {
+        var textLength = text.length;
+
+        if (textLength >= length) {
+            return text;
+        }
+
+        for (var i = 0; i < length - textLength; i++) {
+            text = "0" + text;
+        }
+
+        return text;
+    }
+
+    function calculateRGBA() {
+
+        var rgbArray = [colorDialog.color.r, colorDialog.color.g, colorDialog.color.b]
+        if (colorDialog.color.a != 1) {
+            rgbArray.push(colorDialog.color.a);
+        }
+
+        for (var i = 0; i < rgbArray.length; i++) {
+            rgbArray[i] = Number(Math.round(rgbArray[i] * 255)).toString(16);
+            rgbArray[i] = zeroPadding(rgbArray[i]);
+        }
+
+        return "#" + rgbArray.join("");
+    }
+
+
+    function isNaNOrUndefined(value) {
+        return value == null || value == undefined || Number.isNaN(value);
+    }
+
+    function parseColorText(colorText) {
+        if (colorText[0] == '#') {
+            colorText = colorText.substring(1);
+        }
+
+        if (!(colorText.length == 6 || colorText.length == 8)) {
+            return undefined;
+        }
+
+        var rgbaValues = [parseInt("0x" + colorText.substring(0,2)),
+                          parseInt("0x" + colorText.substring(2,4)),
+                          parseInt("0x" + colorText.substring(4,6)),
+                          parseInt("0x" + (colorText.length > 6 ? colorText.substring(6,8) : "FF"))]
+
+        for (var i = 0; i < rgbaValues.length; i++) {
+            if (isNaNOrUndefined(rgbaValues[i])) {
+                return undefined;
+            }
+            rgbaValues[i] = rgbaValues[i] / 255;
+        }
+
+        return Qt.rgba(rgbaValues[0], rgbaValues[1], rgbaValues[2], rgbaValues[3]);
+    }
+
+    ListModel {
+        id: colorList
+        ListElement { rectangleColor: "red" }
+        ListElement { rectangleColor: "orangered" }
+        ListElement { rectangleColor: "orange" }
+        ListElement { rectangleColor: "gold" }
+        ListElement { rectangleColor: "yellow" }
+        ListElement { rectangleColor: "yellowgreen" }
+        ListElement { rectangleColor: "green" }
+        ListElement { rectangleColor: "lightskyblue" }
+        ListElement { rectangleColor: "blue" }
+        ListElement { rectangleColor: "blueviolet" }
+        ListElement { rectangleColor: "violet" }
+        ListElement { rectangleColor: "mediumvioletred" }
+        ListElement { rectangleColor: "black" }
+        ListElement { rectangleColor: "white" }
+    }
+
+    contentItem: GridLayout {
+        id: grid
+        columns: 7
+        rows: 5
+
+        Repeater {
+            model: colorList
+            delegate: Rectangle {
+                width: 50
+                height: 50
+                color: rectangleColor
+                border.color: "black"
+                border.width: 1
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: selectColorFromPalette(parent.color)
+                }
+            }
+        }
+        ColumnLayout {
+            id: colorTools
+            Layout.columnSpan: 4
+            Layout.rowSpan: 2
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            Rectangle {
+                height: 100
+                width: 200
+                border.color: "black"
+                border.width: 1
+
+                Binding on color {
+                    when: colorDialog.color
+                    value: colorDialog.color
+                }
+            }
+            TextField {
+                id: colorTextField
+                width: 100
+                selectByMouse: true
+                Layout.alignment: Qt.AlignHCenter
+
+                Binding on text {
+                    when: colorDialog.color
+                    value: calculateRGBA()
+                    delayed: true
+                }
+
+                onTextEdited: {
+                    var parsedColor = parseColorText(colorTextField.text);
+                    if (parsedColor != undefined) {
+                        colorDialog.color = parsedColor;
+                    }
+                }
+
+                MouseArea {
+                    id: colorTextFieldMouseArea
+                    anchors.fill: parent
+                    acceptedButtons: Qt.RightButton
+                    onClicked: colorTextFieldContextMenu.open()
+                }
+
+                Menu {
+                    id: colorTextFieldContextMenu
+                    x: colorTextFieldMouseArea.mouseX
+                    y: colorTextFieldMouseArea.mouseY
+                    MenuItem {
+                        text: qsTr("Copy color")
+                        onTriggered: {
+                            colorTextField.selectAll();
+                            colorTextField.copy();
+                            colorTextField.deselect();
+                        }
+                    }
+                    MenuSeparator {}
+                    MenuItem {
+                        text: qsTr("Paste")
+                        onTriggered: {
+                            colorTextField.selectAll();
+                            colorTextField.paste();
+                        }
+                        enabled: colorTextField.canPaste
+                    }
+                }
+            }
+        }
+        ListModel {
+            id: sliderBoxElements
+            ListElement { labelText: "Red value"; colorChannel: 0 }
+            ListElement { labelText: "Green value"; colorChannel: 1 }
+            ListElement { labelText: "Blue value"; colorChannel: 2 }
+            ListElement { labelText: "Alpha value"; colorChannel: 3 }
+        }
+        ColumnLayout {
+            id: sliderBox
+            Layout.columnSpan: 3
+            Layout.rowSpan: 2
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            Repeater {
+                model: sliderBoxElements
+                delegate: ColumnLayout {
+                    Label {
+                        text: labelText
+                    }
+                    Slider {
+                        id: colorSlider
+                        property int channel: colorChannel
+                        from: 0
+                        to: 255
+                        stepSize: 1
+                        value: {
+                            if (colorSlider.channel == 0)
+                                return colorDialog.color.r * 255;
+                            else if (colorSlider.channel == 1)
+                                return colorDialog.color.g * 255;
+                            else if (colorSlider.channel == 2)
+                                return colorDialog.color.b * 255;
+                            else if (colorSlider.channel == 3)
+                                return colorDialog.color.a * 255;
+                        }
+
+                        Connections {
+                            function onMoved() {
+                                var redChannelValue = colorDialog.color.r;
+                                var greenChannelValue = colorDialog.color.g;
+                                var blueChannelValue = colorDialog.color.b;
+                                var alphaChannelValue = colorDialog.color.a;
+
+                                if (colorSlider.channel == 0)
+                                    redChannelValue = colorSlider.value / 255;
+                                else if (colorSlider.channel == 1)
+                                    greenChannelValue = colorSlider.value / 255;
+                                else if (colorSlider.channel == 2)
+                                    blueChannelValue = colorSlider.value / 255;
+                                else if (colorSlider.channel == 3)
+                                    alphaChannelValue = colorSlider.value / 255;
+
+                                colorDialog.color = Qt.rgba(redChannelValue, greenChannelValue, blueChannelValue, alphaChannelValue);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        DialogButtonBox {
+            id: dialogButtonBox
+            Layout.columnSpan: 7
+            Layout.alignment: Qt.AlignRight
+
+            Button {
+                text: qsTr("Apply")
+                onClicked: accept()
+            }
+            Button {
+                text: qsTr("Cancel")
+                onClicked: reject()
+            }
+        }
+    }
+}
diff --git a/src/webenginequick/ui_delegates_manager.cpp b/src/webenginequick/ui_delegates_manager.cpp
index b4036c5ee..3d6eff649 100644
--- a/src/webenginequick/ui_delegates_manager.cpp
+++ b/src/webenginequick/ui_delegates_manager.cpp
@@ -14,6 +14,7 @@
 #include <touch_selection_menu_controller.h>
 #include <web_contents_adapter_client.h>
 
+#include <QtCore/qdiriterator.h>
 #include <QtCore/qfileinfo.h>
 #include <QtCore/qlist.h>
 #include <QtCore/qtimer.h>
@@ -731,8 +732,14 @@ bool UIDelegatesManager::initializeImportDirs(QStringList &dirs, QQmlEngine *eng
         }
 
         QFileInfo fi(controlsImportPath);
-        if (fi.exists())
+        if (fi.exists()) {
             dirs << fi.absolutePath();
+
+            // add subdirectories
+            QDirIterator it(controlsImportPath, QDir::AllDirs | QDir::NoDotAndDotDot, QDirIterator::Subdirectories);
+            while (it.hasNext())
+                dirs << QFileInfo(it.next()).absoluteFilePath();
+        }
     }
     return !dirs.isEmpty();
 }