dbusServides/extensions: Use Adw.PreferencesWindow

Adapt the new GNOME platform API for the upcoming 42. This makes
sure that we get the latest version of the stylesheet, as well as
support for the new dark mode.

Using the dedicated preference API also gives extensions with more
complex preferences an easier and standardized way for implementing
multi-page preferences.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2012>

js/dbusServices/extensions/css/application.css

@@ -1,3 +1,5 @@
+.error-page preferencespage { margin: 30px; }
+
 .expander { padding: 12px; }
 .expander.expanded { border: 0 solid @borders; border-bottom-width: 1px; }
 .expander-toolbar {

js/dbusServices/extensions/extensionPrefsDialog.js

@@ -1,20 +1,20 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported ExtensionPrefsDialog */
 
-const { Gdk, Gio, GObject, Gtk } = imports.gi;
+const { Adw, Gdk, Gio, GLib, GObject, Gtk } = imports.gi;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 
 var ExtensionPrefsDialog = GObject.registerClass({
     GTypeName: 'ExtensionPrefsDialog',
-}, class ExtensionPrefsDialog extends Gtk.Window {
+}, class ExtensionPrefsDialog extends Adw.PreferencesWindow {
     _init(extension) {
         super._init({
             title: extension.metadata.name,
             default_width: 600,
             default_height: 400,
+            search_enabled: false,
         });
-        this.set_titlebar(new Gtk.HeaderBar());
 
         try {
             ExtensionUtils.installImporter(extension);
@@ -26,12 +26,52 @@ var ExtensionPrefsDialog = GObject.registerClass({
             prefsModule.init(extension.metadata);
 
             const widget = prefsModule.buildPrefsWidget();
-            this.set_child(widget);
+            const page = this._wrapWidget(widget);
+            this.add(page);
         } catch (e) {
-            this.set_child(new ExtensionPrefsErrorPage(extension, e));
+            this._showErrorPage(e);
             logError(e, 'Failed to open preferences');
         }
     }
+
+    set titlebar(w) {
+        this.set_titlebar(w);
+    }
+
+    // eslint-disable-next-line camelcase
+    set_titlebar() {
+        // intercept fatal libadwaita error, show error page instead
+        GLib.idle_add(GLib.PRIORITY_DEFAULT, () => {
+            this._showErrorPage(
+                new Error('set_titlebar() is not supported for Adw.Window'));
+            return GLib.SOURCE_REMOVE;
+        });
+    }
+
+    _showErrorPage(e) {
+        while (this.visible_page)
+            this.remove(this.visible_page);
+
+        const extension = ExtensionUtils.getCurrentExtension();
+        this.add(new ExtensionPrefsErrorPage(extension, e));
+    }
+
+    _wrapWidget(widget) {
+        if (widget instanceof Adw.PreferencesPage)
+            return widget;
+
+        const page = new Adw.PreferencesPage();
+        if (widget instanceof Adw.PreferencesGroup) {
+            page.add(widget);
+            return page;
+        }
+
+        const group = new Adw.PreferencesGroup();
+        group.add(widget);
+        page.add(group);
+
+        return page;
+    }
 });
 
 const ExtensionPrefsErrorPage = GObject.registerClass({
@@ -43,7 +83,7 @@ const ExtensionPrefsErrorPage = GObject.registerClass({
         'revealer',
         'errorView',
     ],
-}, class ExtensionPrefsErrorPage extends Gtk.Widget {
+}, class ExtensionPrefsErrorPage extends Adw.PreferencesPage {
     static _classInit(klass) {
         super._classInit(klass);
 
@@ -61,9 +101,8 @@ const ExtensionPrefsErrorPage = GObject.registerClass({
     }
 
     _init(extension, error) {
-        super._init({
-            layout_manager: new Gtk.BinLayout(),
-        });
+        super._init();
+
         this._addCustomStylesheet();
 
         this._uuid = extension.uuid;

js/dbusServices/extensions/main.js

@@ -3,14 +3,14 @@
 imports.gi.versions.Gdk = '4.0';
 imports.gi.versions.Gtk = '4.0';
 
-const { GObject, Gtk } = imports.gi;
+const { Adw, GObject } = imports.gi;
 const pkg = imports.package;
 
 const { DBusService } = imports.dbusService;
 const { ExtensionsService } = imports.extensionsService;
 
 function main() {
-    Gtk.init();
+    Adw.init();
     pkg.initFormat();
 
     GObject.gtypeNameBasedOnJSPath = true;

js/dbusServices/extensions/ui/extension-error-page.ui

@@ -1,19 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <template class="ExtensionPrefsErrorPage" parent="GtkWidget">
+  <template class="ExtensionPrefsErrorPage" parent="AdwPreferencesPage">
+    <style>
+      <class name="error-page"/>
+    </style>
     <child>
-      <object class="GtkScrolledWindow">
-        <property name="hscrollbar-policy">never</property>
-        <property name="propagate-natural-height">True</property>
-        <child>
-          <object class="GtkViewport">
+      <object class="AdwPreferencesGroup">
         <child>
           <object class="GtkBox">
             <property name="orientation">vertical</property>
-                <property name="margin-start">100</property>
-                <property name="margin-end">100</property>
-                <property name="margin-top">100</property>
-                <property name="margin-bottom">60</property>
             <property name="spacing">12</property>
             <child>
               <object class="GtkLabel">
@@ -116,7 +111,5 @@
         </child>
       </object>
     </child>
-      </object>
-    </child>
   </template>
 </interface>