Skip to content

Instantly share code, notes, and snippets.

@pojntfx
Created May 26, 2024 03:59
Show Gist options
  • Save pojntfx/fbcd794ed1eba148ceec9134d09aad6b to your computer and use it in GitHub Desktop.
Save pojntfx/fbcd794ed1eba148ceec9134d09aad6b to your computer and use it in GitHub Desktop.
Transparent WebView & GTK4/libadwaita Windows
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([]);
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([]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment