Transparent WebView & GTK4/libadwaita Windows

main_csd.js

import Adw from "gi://Adw?version=1";
import Gtk from "gi://Gtk?version=4.0";
import Gdk from "gi://Gdk?version=4.0";
import WebKit from "gi://WebKit";

const application = new Adw.Application({
  application_id: "com.github.pojntfx.webviewTransparentDemo",
});

application.connect("activate", () => {
  const window = new Adw.Window({
    application,
    default_width: 1000,
    default_height: 700,
    name: "main-window",
    title: "Connmapper",
  });

  const overlay = new Gtk.Overlay();

  const windowHandle = new Gtk.WindowHandle({
    halign: Gtk.Align.END,
    valign: Gtk.Align.START,
  });

  const box = new Gtk.Box({
    halign: Gtk.Align.END,
    valign: Gtk.Align.START,
    margin_top: 6,
    margin_end: 6,
    margin_bottom: 6,
    margin_start: 6,
  });

  const controlsStart = new Gtk.WindowControls({
    side: Gtk.PackType.START,
  });

  const controlsEnd = new Gtk.WindowControls({
    side: Gtk.PackType.END,
  });

  box.append(controlsStart);
  box.append(controlsEnd);

  windowHandle.set_child(box);

  overlay.add_overlay(windowHandle);

  const webView = new WebKit.WebView({
    vexpand: true,
    hexpand: true,
  });
  webView.set_background_color(new Gdk.RGBA());

  overlay.set_child(webView);

  window.set_property("content", overlay);

  const css = new Gtk.CssProvider();
  css.load_from_string(`
    #main-window, #main-headerbar {
      background: transparent;
    }
  `);

  Gtk.StyleContext.add_provider_for_display(
    window.get_display(),
    css,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
  );

  window.show();

  webView.load_uri("http://localhost:1234");
});

application.run([]);

main_raw.js

import Adw from "gi://Adw?version=1";
import Gtk from "gi://Gtk?version=4.0";
import Gdk from "gi://Gdk?version=4.0";
import WebKit from "gi://WebKit";

const application = new Adw.Application({
  application_id: "com.github.pojntfx.webviewTransparentDemo",
});

application.connect("activate", () => {
  const window = new Adw.Window({
    application,
    default_width: 800,
    default_height: 600,
    name: "main-window",
    title: "Transparent WebView Example",
  });

  const webView = new WebKit.WebView({
    vexpand: true,
    hexpand: true,
  });
  webView.set_background_color(new Gdk.RGBA());

  window.set_property("content", webView);

  const css = new Gtk.CssProvider();
  css.load_from_string(`
    #main-window {
      background: transparent;
    }
  `);

  Gtk.StyleContext.add_provider_for_display(
    window.get_display(),
    css,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
  );

  window.show();

  webView.load_uri("http://localhost:1234");
});

application.run([]);