Sharing code between a GTK/GJS App and a Gnome Shell Extension

Question

I am developing a GTK application in GJS and like to reuse parts of the GTK code inside a Gnome Shell extension. However, I did not find a way to add a Gtk.Widget to the menu of my Gnome Shell panel icon.

I tried to use GtkClutter.Actor from clutter-gtk, but the library seems to be out-dated and does neither work in a Wayland or X11 Gnome Shell, since it requires Clutter 1.0 but sees 7 already loaded. When importing imports.gi.GtkClutter in an extension, Gnome Shell yields this error:

Requiring GtkClutter, version none: Requiring namespace 'Clutter' version '1.0', but '7' is already loaded.

Here is some code to demonstrate that clutter-gtk actually works, if directly running it via gjs; probably because I can enforce GTK 3.0 here.

gtkclutter.js:

imports.gi.versions.Gtk = '3.0'  // fails if set to 4.0

const { Gtk, GLib, Clutter, GtkClutter } = imports.gi

// gtkUI returns a Gtk.Widget tree. This should be the reusable code.
function gtkUI() {
    return new Gtk.Label({
        label: '<span size="100000">🎉</span>',
        use_markup: true,
    })
}

// embedClutterActor returns a Gtk.Widget with an embedded Clutter.Actor.
function embedClutterActor(clutter_actor) {
    let embed = new GtkClutter.Embed()
    embed.get_stage().add_child(clutter_actor)
    return embed
}

// embedGtkWidget returns a Clutter.Actor with an embedded Gtk.Widget.
function embedGtkWidget(gtk_widget) {
    return new GtkClutter.Actor({ contents: gtk_widget })
}

class App {
    constructor() {
        this.title = 'GtkClutter'
        GLib.set_prgname(this.title)
    }
    onActivate() { this.window.show_all() }
    onStartup()  { this.buildUI() }

    run(ARGV=[]) {
        this.app = new Gtk.Application()
        this.app.connect('activate', () => this.onActivate())
        this.app.connect('startup',  () => this.onStartup())
        this.app.run(ARGV)
    }

    buildUI() {
        let w = this.window = new Gtk.ApplicationWindow({
            application: this.app, title: this.title, icon_name: 'face-smile',
            default_height: 160, default_width: 160, window_position: Gtk.WindowPosition.CENTER,
        })

        // Just to demonstrate that GtkClutter embedding works, we use both embeds here to create
        // a Gtk.Widget from a Clutter.Actor from the actual Gtk.Widget that we want to show.
        GtkClutter.init(null)
        Clutter.init(null)
        w.add(embedClutterActor(embedGtkWidget(gtkUI())))

        // In the actual GTK App, we would just have used `w.add(gtkUI())`
        // and not imported Clutter and GtkClutter at all.
    }
}

new App().run(ARGV)

Here is the companion extension to the GTK app, trying (and failing) to reuse the GTK code as contents of a GtkClutter.Actor.

extension.js:

const { Clutter, Gtk, Gio, St } = imports.gi

let GtkClutter = null  // lazy import for debugging

const Main = imports.ui.main
const PanelMenu = imports.ui.panelMenu
const PopupMenu = imports.ui.popupMenu

const Me = imports.misc.extensionUtils.getCurrentExtension()
const VERSION = 'dev-version' // filled during install
const NAME = 'GtkClutterExt'

// gtkUI returns a Gtk.Widget tree. This should be the reusable code.
function gtkUI() {
    return new Gtk.Button({ child: Gtk.Label({
        label: `<span size="100000">🎉</span>`,
        use_markup: true,
    })})
}

// stUI returns an Gnome Shell widget tree that works only in Gnome Shell.
function stUI(icon_name='face-sad') {
    return new St.Icon({ icon_name })
}

function statusIcon(icon_name) {
    let box = new St.BoxLayout()
    let icon = new St.Icon({ icon_name, style_class: 'system-status-icon emotes-icon' })
    box.add_child(icon)
    box.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM))
    return box
}

class Ext {
    constructor() { this.panel_widget = null }

    enable() {
        log(`enabling extension ${Me.uuid}`)
        try {
            // Use St only for the status icon and the menu container (not the menu content).
            let btn = this.panel_widget = new PanelMenu.Button(0.0, NAME, false)
            let item = new PopupMenu.PopupBaseMenuItem({ reactive: false, can_focus: false })
            btn.menu.addMenuItem(item)
            Main.panel.addToStatusArea(NAME, btn)

            try       { GtkClutter = imports.gi.GtkClutter }
            catch (e) { log(`failed to load clutter-gtk, err=${e.message}`) }

            if (GtkClutter) {
                // Using St for the status icon is OK, since it is only used by the extension.
                btn.add_child(statusIcon('face-happy'))
                // But for the menu, I like to reuse my GTK code from the GTK app.
                // That is what GtkClutter was designed for, I believe.
                item.actor.add_child(new GtkClutter.Actor({ contents: gtkUI() }))
            } else {
                // As fallback we show our mood regarding GtkClutter support in Gnome Shell ;)
                btn.add_child(statusIcon('face-sad'))
                item.actor.add_child(stUI('face-angry'))
            }
        } catch (e) {
            log(`failed to enable ${Me.uuid}, err=${e.message}`)
        }
    }

    disable() {
        debug(`disabling extension ${Me.uuid}`)
        if (this.panel_widget == null) return
        this.panel_widget.destroy()
        this.panel_widget = null
    }
}

function init() { return new Ext() }

I know that clutter-gtk is quite dated (see https://gitlab.gnome.org/GNOME/clutter-gtk), but I did not find a better way to lift GTK into my extension.

Questions

1. Does Gnome Shell provide something similar to GtkClutter.Actor that allows extension programmers to reuse their GJS/GTK code?
2. Which alternative way to reuse GTK/GJS code do you see?
3. If GTK is such a universal and cross-platform library, why does Gnome Shell not support it out-of-the box? (Bonus question 😉, more out of curiosity)

Answer 1

TL;DR You can not use GTK widgets in a GNOME Shell extension.

The toolkit used in GNOME Shell is Clutter, not GTK. Clutter is an internal library of Mutter, while GTK3 is only used in GNOME Shell for a handful of utilities.

Clutter used to be a standalone library, but is now developed specifically as a compositor toolkit for Mutter. GTK is an application toolkit, not suited for use in a compositor.

The standalone Clutter project is effectively unmaintained now, making GtkClutter pretty much the same.