Display AboutDialog from GNOME Shell Extension

Question

I'm trying to display a Gtk.AboutDialog from my GNOME Shell extension. I wrote the following function:

_showAbout: function() {
    var authors = ["Ralf"];
    // Create the About dialog
    let aboutDialog = new Gtk.AboutDialog({ title: "About AboutDialogTest",
        program_name: "MyExtension Version " + MySelf.metadata.version,
        copyright: "AboutDialogTest \xa9 2018",
        authors: authors,
        website: "https://...",
        website_label: "MyExtension Homepage",
        comments: "GNOME Shell extension to test AboutDialog"
    });
    // Connect the Close button to the destroy signal for the dialog
    aboutDialog.connect("response", function() {
        aboutDialog.destroy();
    });
    aboutDialog.show();
}

Well, the about dialog is displayed, but not correctly. I can get the dialog to the front by clicking, but clicking on [x] doesn't close the dialog. The dialog can be closed by hitting ESC.

In syslog I see the following messages:

org.gnome.Shell.desktop[4033]: Gtk-Message: GtkDialog mapped without a transient parent. This is discouraged.
org.gnome.Shell.desktop[4033]: Window manager warning: Buggy client sent a _NET_ACTIVE_WINDOW message with a timestamp of 0 for 0xe0022c (About Abou)

I'm in a extension, so I have no "transient parent". At least I don't know how to get one.

Any idea what I have to do to display it properly?

Answer 1

Ok, I'll answer my own question. From my understanding it is not possible to use a GTK dialog in a GNOME Shell extension. If a "About Dialog" is needed, roll your own using modaldialog.js. This is not as cool as the GTK stuff, but at least something.

const St = imports.gi.St;
const Lang = imports.lang;
const Gio = imports.gi.Gio;
const ModalDialog = imports.ui.modalDialog;
const Clutter = imports.gi.Clutter;

const ExtensionUtils = imports.misc.extensionUtils;
const MySelf = ExtensionUtils.getCurrentExtension();

const MyAboutDialog = new Lang.Class({
    Name: 'MyAboutDialog',
    Extends: ModalDialog.ModalDialog,

    _init: function() {
        this.parent({ styleClass: 'extension-dialog' });

        this.setButtons([{ label: "OK",
                           action: Lang.bind(this, this._onClose),
                           key:    Clutter.Escape
                         }]);

        let box = new St.BoxLayout({ vertical: true});
        this.contentLayout.add(box);

        let gicon = new Gio.FileIcon({ file: Gio.file_new_for_path(MySelf.path + "/icons/icon.png") });
        let icon = new St.Icon({ gicon: gicon });
        box.add(icon);

        box.add(new St.Label({ text: "AboutDialogTest Version " + MySelf.metadata.version, x_align: Clutter.ActorAlign.CENTER, style_class: "title-label" }));
        box.add(new St.Label({ text: "GNOME Shell extension to display an About Dialog.", x_align: Clutter.ActorAlign.CENTER }));
        box.add(new St.Label({ text: "This program comes with absolutely no warranty.", x_align: Clutter.ActorAlign.CENTER, style_class: "warn-label" }));
        box.add(new St.Label({ text: "Copyright © 2017-2018 BlahBlahBlah", x_align: Clutter.ActorAlign.CENTER, style_class: "copyright-label" }));
    },

    _onClose: function(button, event) {
        this.close(global.get_current_time());
    },

});

And call it like this:

_showAbout2: function() {
    let dialog = new MyAboutDialog();
    dialog.open(global.get_current_time());
},