QmlDesigner: Fix for ColorEditors Pickers Canvas

Task-number: QDS-12714
Change-Id: Ie8a6b8be88f4f020cbc82f66015dc7db76d14f56
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>
(cherry picked from commit 11802e70d3)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml

@@ -223,7 +223,10 @@ SecondColumnLayout {
 
             function open() {
                 popupDialog.ensureLoader()
+
                 popupDialog.show(preview)
+
+                popupDialog.loaderItem.aboutToBeShown() //need it for now
             }
 
             function determineActiveColorMode() {

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditorPopup.qml

@@ -12,6 +12,12 @@ import QtQuickDesignerColorPalette
 Column {
     id: root
 
+    // There seems to be an issue on Windows and MacOS with ColorPickers
+    // Canvases not being painted on initialization
+    // because ColorEditorPopup is invisible at init time,
+    // so we use this signal to explicitly pass visibility status
+    signal aboutToBeShown
+
     property bool eyeDropperActive: ColorPaletteBackend.eyeDropperActive
 
     property bool supportGradient: false
@@ -433,6 +439,13 @@ Column {
                 hsvValueSpinBox.value = colorPicker.value
                 hsvAlphaSpinBox.value = colorPicker.alpha
             }
+
+            Connections {
+                target: root
+                onAboutToBeShown: {
+                    colorPicker.aboutToBeShown()
+                }
+            }
         }
 
         Column {

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/impl/ColorPicker.qml

@@ -13,6 +13,8 @@ Column {
         HSLA
     }
 
+    signal aboutToBeShown
+
     property int mode: ColorPicker.Mode.HSVA
     property color color: "#303091"
 
@@ -206,6 +208,8 @@ Column {
                     target: root
                     function onHueChanged() { gradientOverlay.requestPaint() }
                     function onModeChanged() { gradientOverlay.requestPaint() }
+                    function onAlphaChanged() { gradientOverlay.requestPaint() }
+                    function onAboutToBeShown() { gradientOverlay.requestPaint() }
                 }
 
                 onPaint: {
@@ -249,6 +253,7 @@ Column {
                     function onColorInvalidated() { pickerCross.requestPaint() }
                     function onColorChanged() { pickerCross.requestPaint() }
                     function onModeChanged() { pickerCross.requestPaint() }
+                    function onAboutToBeShown() { pickerCross.requestPaint() }
                 }
 
                 onPaint: {