Wasm: Fix displaying frameless QWasmWindow with transparent content

Currently we render shadow and default background-color even for
frameless windows with transparent content.
This behavior is not consistent comparing to other platforms.

An example of such window is InputSelectionHandle from
VirtualKeyboard module.

This commit disables shadow-box and provides transparent
background-color for QWasmWindow which are frameless.
It also provides distinction between "frame" as logic property
of window and "border" as visual decoration.

Change-Id: I902692ea561a2e88e2e6ab7faad8e3eeb536a26b
Reviewed-by: Aleksandr Reviakin <aleksandr.reviakin@qt.io>
Reviewed-by: Mikołaj Boc <Mikolaj.Boc@qt.io>

src/plugins/platforms/wasm/qwasmcssstyle.cpp

@@ -43,11 +43,15 @@ const char *Style = R"css(
     box-shadow: rgb(0 0 0 / 20%) 0px 10px 16px 0px, rgb(0 0 0 / 19%) 0px 6px 20px 0px;
 }
 
-.qt-window.has-frame {
+.qt-window.has-border {
     border: var(--border-width) solid lightgray;
     caret-color: transparent;
 }
 
+.qt-window.frameless {
+    background-color: transparent;
+}
+
 .resize-outline {
     position: absolute;
     display: none;
@@ -55,7 +59,7 @@ const char *Style = R"css(
 
 .qt-window.no-resize > .resize-outline { display: none; }
 
-.qt-window.has-frame:not(.maximized):not(.no-resize) .resize-outline {
+.qt-window.has-border:not(.maximized):not(.no-resize) .resize-outline {
     display: block;
 }
 
@@ -131,7 +135,7 @@ const char *Style = R"css(
     padding-bottom: 4px;
 }
 
-.qt-window.has-frame .title-bar {
+.qt-window.has-border .title-bar {
     display: flex;
 }
 

src/plugins/platforms/wasm/qwasmwindow.cpp

@@ -374,9 +374,10 @@ void QWasmWindow::setWindowFlags(Qt::WindowFlags flags)
     if (flags.testFlag(Qt::WindowStaysOnTopHint) != m_flags.testFlag(Qt::WindowStaysOnTopHint))
         m_compositor->windowPositionPreferenceChanged(this, flags);
     m_flags = flags;
-    dom::syncCSSClassWith(m_qtWindow, "has-frame", hasFrame());
-    dom::syncCSSClassWith(m_qtWindow, "has-shadow", !flags.testFlag(Qt::NoDropShadowWindowHint));
+    dom::syncCSSClassWith(m_qtWindow, "has-border", hasBorder());
+    dom::syncCSSClassWith(m_qtWindow, "has-shadow", hasShadow());
     dom::syncCSSClassWith(m_qtWindow, "has-title", flags.testFlag(Qt::WindowTitleHint));
+    dom::syncCSSClassWith(m_qtWindow, "frameless", flags.testFlag(Qt::FramelessWindowHint));
     dom::syncCSSClassWith(m_qtWindow, "transparent-for-input",
                           flags.testFlag(Qt::WindowTransparentForInput));
 
@@ -442,7 +443,7 @@ void QWasmWindow::applyWindowState()
     else
         newGeom = normalGeometry();
 
-    dom::syncCSSClassWith(m_qtWindow, "has-frame", hasFrame());
+    dom::syncCSSClassWith(m_qtWindow, "has-border", hasBorder());
     dom::syncCSSClassWith(m_qtWindow, "maximized", isMaximized);
 
     m_nonClientArea->titleBar()->setRestoreVisible(isMaximized);
@@ -559,12 +560,18 @@ void QWasmWindow::requestUpdate()
     m_compositor->requestUpdateWindow(this, QWasmCompositor::UpdateRequestDelivery);
 }
 
-bool QWasmWindow::hasFrame() const
+bool QWasmWindow::hasBorder() const
 {
     return !m_state.testFlag(Qt::WindowFullScreen) && !m_flags.testFlag(Qt::FramelessWindowHint)
             && !windowIsPopupType(m_flags);
 }
 
+bool QWasmWindow::hasShadow() const
+{
+    return !m_flags.testFlag(Qt::NoDropShadowWindowHint)
+            && !m_flags.testFlag(Qt::FramelessWindowHint);
+}
+
 bool QWasmWindow::hasMaximizeButton() const
 {
     return !m_state.testFlag(Qt::WindowMaximized) && m_flags.testFlag(Qt::WindowMaximizeButtonHint);

src/plugins/platforms/wasm/qwasmwindow.h

@@ -96,7 +96,8 @@ private:
     static constexpr auto minSizeForRegularWindows = 100;
 
     void invalidate();
-    bool hasFrame() const;
+    bool hasBorder() const;
+    bool hasShadow() const;
     bool hasMaximizeButton() const;
     void applyWindowState();