QmlDesigner: Add checkerboard background in navigator preview tooltip

Checkerboard helps visualizing alpha channel in previewed images.

Fixes: QDS-7060
Change-Id: Idb0139f8d8fcbf595bbfba3b333cd3d49f18d8af
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>

5 files changed, 91 insertions, 24 deletions

diff --git a/src/plugins/qmldesigner/components/navigator/checkers.png b/src/plugins/qmldesigner/components/navigator/checkers.png
new file mode 100644
index 0000000000..72cb9f0350
--- /dev/null
+++ b/src/plugins/qmldesigner/components/navigator/checkers.png
diff --git a/src/plugins/qmldesigner/components/navigator/navigator.qrc b/src/plugins/qmldesigner/components/navigator/navigator.qrc
index fca836a09b..e595bae0f9 100644
--- a/src/plugins/qmldesigner/components/navigator/navigator.qrc
+++ b/src/plugins/qmldesigner/components/navigator/navigator.qrc
@@ -13,5 +13,6 @@
         <file>export_unchecked.png</file>
         <file>export_unchecked@2x.png</file>
         <file>tooltip_placeholder.png</file>
+        <file>checkers.png</file>
     </qresource>
 </RCC>
diff --git a/src/plugins/qmldesigner/components/navigator/previewtooltip.cpp b/src/plugins/qmldesigner/components/navigator/previewtooltip.cpp
index 800104bfb3..b352f1daa2 100644
--- a/src/plugins/qmldesigner/components/navigator/previewtooltip.cpp
+++ b/src/plugins/qmldesigner/components/navigator/previewtooltip.cpp
@@ -28,7 +28,8 @@
 
 #include <utils/theme/theme.h>
 
-#include <QtGui/qpixmap.h>
+#include <QPainter>
+#include <QPixmap>
 
 namespace QmlDesigner {
 
@@ -43,6 +44,17 @@ PreviewToolTip::PreviewToolTip(QWidget *parent)
     m_ui->typeLabel->setElideMode(Qt::ElideLeft);
     m_ui->infoLabel->setElideMode(Qt::ElideLeft);
     setStyleSheet(QString("QWidget { background-color: %1 }").arg(Utils::creatorTheme()->color(Utils::Theme::BackgroundColorNormal).name()));
+    m_ui->imageLabel->setStyleSheet("background-color: rgba(0, 0, 0, 0)");
+
+    static QPixmap checkers;
+    if (checkers.isNull()) {
+        checkers = {150, 150};
+        QPainter painter(&checkers);
+        painter.setBrush(QPixmap(":/navigator/icon/checkers.png"));
+        painter.drawRect(0, 0, 150, 150);
+    }
+    m_ui->labelBackground->setPixmap(checkers);
+
 }
 
 PreviewToolTip::~PreviewToolTip()
diff --git a/src/plugins/qmldesigner/components/navigator/previewtooltip.ui b/src/plugins/qmldesigner/components/navigator/previewtooltip.ui
index 1c06a248f0..c8520751a8 100644
--- a/src/plugins/qmldesigner/components/navigator/previewtooltip.ui
+++ b/src/plugins/qmldesigner/components/navigator/previewtooltip.ui
@@ -81,28 +81,72 @@
        <number>6</number>
       </property>
       <item>
-       <widget class="QLabel" name="imageLabel">
-        <property name="sizePolicy">
-         <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
-          <horstretch>0</horstretch>
-          <verstretch>0</verstretch>
-         </sizepolicy>
-        </property>
-        <property name="minimumSize">
-         <size>
-          <width>150</width>
-          <height>150</height>
-         </size>
-        </property>
-        <property name="frameShape">
-         <enum>QFrame::Box</enum>
-        </property>
-        <property name="frameShadow">
-         <enum>QFrame::Plain</enum>
-        </property>
-        <property name="alignment">
-         <set>Qt::AlignCenter</set>
-        </property>
+       <widget class="QWidget" name="imageContainer" native="true">
+        <widget class="QLabel" name="labelBackground">
+         <property name="geometry">
+          <rect>
+           <x>0</x>
+           <y>0</y>
+           <width>150</width>
+           <height>150</height>
+          </rect>
+         </property>
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="minimumSize">
+          <size>
+           <width>150</width>
+           <height>150</height>
+          </size>
+         </property>
+         <property name="frameShape">
+          <enum>QFrame::Box</enum>
+         </property>
+         <property name="frameShadow">
+          <enum>QFrame::Plain</enum>
+         </property>
+         <property name="scaledContents">
+          <bool>false</bool>
+         </property>
+         <property name="alignment">
+          <set>Qt::AlignCenter</set>
+         </property>
+        </widget>
+        <widget class="QLabel" name="imageLabel">
+         <property name="geometry">
+          <rect>
+           <x>0</x>
+           <y>0</y>
+           <width>150</width>
+           <height>150</height>
+          </rect>
+         </property>
+         <property name="sizePolicy">
+          <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
+           <horstretch>0</horstretch>
+           <verstretch>0</verstretch>
+          </sizepolicy>
+         </property>
+         <property name="minimumSize">
+          <size>
+           <width>150</width>
+           <height>150</height>
+          </size>
+         </property>
+         <property name="frameShape">
+          <enum>QFrame::Box</enum>
+         </property>
+         <property name="frameShadow">
+          <enum>QFrame::Plain</enum>
+         </property>
+         <property name="alignment">
+          <set>Qt::AlignCenter</set>
+         </property>
+        </widget>
        </widget>
       </item>
       <item>
diff --git a/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp b/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp
index 29bf14d026..db22d27fc3 100644
--- a/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp
+++ b/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp
@@ -103,6 +103,7 @@
 #include <utils/algorithm.h>
 #include <utils/qtcassert.h>
 #include <utils/qtcprocess.h>
+#include <utils/theme/theme.h>
 
 #include <qtsupport/qtkitinformation.h>
 
@@ -1756,7 +1757,16 @@ void NodeInstanceView::timerEvent(QTimerEvent *event)
 
 QVariant NodeInstanceView::modelNodePreviewImageDataToVariant(const ModelNodePreviewImageData &imageData)
 {
-    static const QPixmap placeHolder(":/navigator/icon/tooltip_placeholder.png");
+    static QPixmap placeHolder;
+    if (placeHolder.isNull()) {
+        QPixmap placeHolderSrc(":/navigator/icon/tooltip_placeholder.png");
+        placeHolder = {150, 150};
+        // Placeholder has transparency, but we don't want to show the checkerboard, so
+        // paint in the correct background color
+        placeHolder.fill(Utils::creatorTheme()->color(Utils::Theme::BackgroundColorNormal));
+        QPainter painter(&placeHolder);
+        painter.drawPixmap(0, 0, 150, 150, placeHolderSrc);
+    }
 
     QVariantMap map;
     map.insert("type", imageData.type);