GTK+ (GNOME) 3.20 の目玉は当然 GtkShortcutWindow です。

メニューバーの中に表示しなければいけないなんて誰も決めていないぞ。
まさか「メニューバーの中のほうが直感的に使える！」なんて言う無知はいないよね。
今だに Ctrl+C すら知らない人が大多数という事実をヲタは知らない。

って、それはどうでもよくて。
実際に GtkShortcutWindow を作ってみよう。

#!/usr/bin/gjs

const Gtk = imports.gi.Gtk;
const GLib = imports.gi.GLib;
const Gio = imports.gi.Gio;
const Lang = imports.lang;

const TestWindow = new Lang.Class({
    Name: 'TestWindow',
    Extends: Gtk.ApplicationWindow,

    _init: function(app) {
        this.parent({
            application: app
        });
        this.resize(300, 300);
        this.show_all();
    }
});

const ShortcutApp = new Lang.Class({
    Name: 'ShortcutApp',
    Extends: Gtk.Application,

    _init: function() {
        // TaskBar Title
        GLib.set_prgname("ShortcutApp");
        // property
        this.parent({
            application_id: 'org.sasakima.shortcutapp',
            flags: Gio.ApplicationFlags.FLAGS_NONE
        });
    },
    vfunc_startup: function() {
        this.parent();
        //
        // Create ShortcutWindow
        this.scwin = new Gtk.ShortcutsWindow();
        let sec = new Gtk.ShortcutsSection({
            visible: true,
            section_name: "Name"
        });
        let doc = new Gtk.ShortcutsGroup({
            title: "Document"
        });
        doc.add(new Gtk.ShortcutsShortcut({
            accelerator: "<ctl>Q",
            title: "Ctrl : <ctl>,  Shift : <shift>, Alt : <alt>"
        }));
        doc.add(new Gtk.ShortcutsShortcut({
            accelerator: "Escape",
            title: "Single Key"
        }));
        doc.add(new Gtk.ShortcutsShortcut({
            accelerator: "1",
            title: "Num Key"
        }));
        sec.add(doc);
        this.scwin.add(sec);
        //
        // Menu
        let menu = new Gio.Menu();
        menu.append("_Keyboard Shortcuts", "app.shortcut_action");
        menu.append("_Quit", "app.quit_action");
        this.set_app_menu(menu);
        // Accel
        this.set_accels_for_action("app.shortcut_action", ["<Control>F1", "question"]);
        this.set_accels_for_action("app.quit_action", ["<Control>Q"]);
        // Action
        let shortcut_action = new Gio.SimpleAction({
            name: "shortcut_action"
        });
        shortcut_action.connect("activate", Lang.bind(this, function(action) {
            this.scwin.show_all();
        }));
        let quit_action = new Gio.SimpleAction({
            name: "quit_action"
        });
        quit_action.connect("activate", Lang.bind(this, function(action) {
            this.quit();
        }));
        this.add_action(shortcut_action);
        this.add_action(quit_action);
    },
    vfunc_activate: function() {
        let w = new TestWindow(this);
        // Set ShortcutWindow Palent
        w.set_help_overlay(this.scwin);
    }
});
let application = new ShortcutApp();
application.run(ARGV);

アレ？と思ったのが GtkShortcutsGroup に配置が add だったこと。
GtkBox のようなパッキングだと思っていた。

ShortcutsSection に max_height プロパティがある。
この数を超える場合はグループを次ペインに全自動で移すようです。

gtk_application_window_set_help_overlay

は凄く重要、GtkApplicationWindow 指定を必ず行うこと。
実際に GNOME アプリで GtkShortcutWindow を出して移動してみよう。

後はこのブログを見ているような人なら説明不要かと。
スクリプト言語から最新 API を試せるって本当に面白いよね。