Display AboutDialog from GNOME Shell Extension - gnome-shell

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());
},