Breaking: Make preferences usable again and support Gnome Shell 42

Make the preferences usable again (and look good) by using an
`AdwPreferencesPage` as well as various other libadwaita features (like
`AdwPreferencesGroup`, style classes, ...).
Also get rid of some code, which now doesn't seem to be necessary
anymore (making sure no horizontal scrollbar shows and setting a default
size for the preferences window).

This change is marked as "Breaking", since I assume `AdwPreferencesPage`
doesn't work in Gnome Shell 40 and because I changed the supported Gnome
Shell version to 42 accordingly.

src/metadata.json

@@ -3,7 +3,7 @@
     "name": "Top Bar Organizer",
     "description": "Organize the items of the top (menu)bar.",
     "version": 3,
-    "shell-version": [ "40" ],
+    "shell-version": [ "42" ],
     "settings-schema": "org.gnome.shell.extensions.top-bar-organizer",
     "url": "https://gitlab.gnome.org/julianschacher/top-bar-organizer"
 }

src/prefs-box-order-item-row.ui

@@ -2,7 +2,7 @@
 <!--
   This file is part of Top-Bar-Organizer (a Gnome Shell Extension for
   organizing your Gnome Shell top bar).
-  Copyright (C) 2021 Julian Schacher
+  Copyright (C) 2021-2022 Julian Schacher
 
   Top-Bar-Organizer is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
@@ -18,30 +18,28 @@
   along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 <interface>
-    <template class="PrefsBoxOrderItemRow" parent="GtkListBoxRow">
+    <template class="PrefsBoxOrderItemRow" parent="AdwActionRow">
-        <child>
+        <child type="prefix">
-            <object class="GtkBox">
+            <object class="GtkLabel" id="item-name-display-label">
-                <property name="spacing">10</property>
+                <property name="halign">start</property>
-                <property name="margin-top">10</property>
+                <property name="hexpand">True</property>
-                <property name="margin-bottom">10</property>
+            </object>
-                <property name="margin-start">10</property>
+        </child>
-                <property name="margin-end">10</property>
+        <child type="prefix">
-                <child>
+            <object class="GtkImage">
-                    <object class="GtkImage">
+                <property name="icon-name">list-drag-handle-symbolic</property>
-                        <property name="icon-name">list-drag-handle-symbolic</property>
+                <style>
-                    </object>
+                    <class name="drag-handle"/>
-                </child>
+                </style>
-                <child>
+            </object>
-                    <object class="GtkLabel" id="item-name-display-label">
+        </child>
-                        <property name="halign">start</property>
+        <child type="suffix">
-                        <property name="hexpand">True</property>
+            <object class="GtkMenuButton" id="menu-button">
-                    </object>
+                <property name="valign">center</property>
-                </child>
+                <property name="icon-name">view-more-symbolic</property>
-                <child>
+                <style>
-                    <object class="GtkMenuButton" id="menu-button">
+                    <class name="flat"/>
-                        <property name="icon-name">view-more-symbolic</property>
+                </style>
-                    </object>
-                </child>
             </object>
         </child>
     </template>

src/prefs-box-order-list-box.ui

@@ -2,7 +2,7 @@
 <!--
   This file is part of Top-Bar-Organizer (a Gnome Shell Extension for
   organizing your Gnome Shell top bar).
-  Copyright (C) 2021 Julian Schacher
+  Copyright (C) 2021-2022 Julian Schacher
 
   Top-Bar-Organizer is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
@@ -21,5 +21,8 @@
     <template class="PrefsBoxOrderListBox" parent="GtkListBox">
         <property name="selection-mode">none</property>
         <property name="show-separators">True</property>
+        <style>
+            <class name="boxed-list"/>
+        </style>
     </template>
 </interface>

src/prefs-page.ui

@@ -2,7 +2,7 @@
 <!--
   This file is part of Top-Bar-Organizer (a Gnome Shell Extension for
   organizing your Gnome Shell top bar).
-  Copyright (C) 2021 Julian Schacher
+  Copyright (C) 2021-2022 Julian Schacher
 
   Top-Bar-Organizer is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
@@ -18,24 +18,11 @@
   along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 <interface>
-    <template class="PrefsWidget" parent="GtkScrolledWindow">
+    <template class="PrefsPage" parent="AdwPreferencesPage">
         <child>
-            <object class="GtkBox">
+            <object class="AdwPreferencesGroup">
-                <property name="orientation">vertical</property>
+                <property name="title">Item Order</property>
-                <property name="spacing">24</property>
+                <property name="description">Simply use drag and drop to order the items any way you want.</property>
-                <property name="margin-top">36</property>
-                <property name="margin-bottom">36</property>
-                <property name="margin-start">36</property>
-                <property name="margin-end">36</property>
-                <child>
-                    <object class="GtkLabel">
-                        <property name="label">Simply use drag and drop to order the items any way you want.</property>
-                        <property name="halign">start</property>
-                        <style>
-                            <class name="dim-label"/>
-                        </style>
-                    </object>
-                </child>
                 <child>
                     <object class="GtkBox" id="left-box">
                         <property name="orientation">vertical</property>
@@ -44,9 +31,6 @@
                                 <property name="label">Left Top Bar Box</property>
                                 <property name="halign">start</property>
                                 <property name="margin-bottom">12</property>
-                                <attributes>
-                                    <attribute name="weight" value="bold"/>
-                                </attributes>
                             </object>
                         </child>
                     </object>
@@ -58,10 +42,8 @@
                             <object class="GtkLabel">
                                 <property name="label">Center Top Bar Box</property>
                                 <property name="halign">start</property>
+                                <property name="margin-top">12</property>
                                 <property name="margin-bottom">12</property>
-                                <attributes>
-                                    <attribute name="weight" value="bold"/>
-                                </attributes>
                             </object>
                         </child>
                     </object>
@@ -73,10 +55,8 @@
                             <object class="GtkLabel">
                                 <property name="label">Right Top Bar Box</property>
                                 <property name="halign">start</property>
+                                <property name="margin-top">12</property>
                                 <property name="margin-bottom">12</property>
-                                <attributes>
-                                    <attribute name="weight" value="bold"/>
-                                </attributes>
                             </object>
                         </child>
                     </object>

src/prefs.js

@@ -1,7 +1,7 @@
 /*
  * This file is part of Top-Bar-Organizer (a Gnome Shell Extension for
  * organizing your Gnome Shell top bar).
- * Copyright (C) 2021 Julian Schacher
+ * Copyright (C) 2021-2022 Julian Schacher
  *
  * Top-Bar-Organizer is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -21,6 +21,7 @@
 
 const Gtk = imports.gi.Gtk;
 const GObject = imports.gi.GObject;
+const Adw = imports.gi.Adw;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me = ExtensionUtils.getCurrentExtension();
@@ -30,45 +31,27 @@ const PrefsBoxOrderListEmptyPlaceholder = Me.imports.prefsModules.PrefsBoxOrderL
 const PrefsBoxOrderItemRow = Me.imports.prefsModules.PrefsBoxOrderItemRow;
 const ScrollManager = Me.imports.prefsModules.ScrollManager;
 
-var PrefsWidget = GObject.registerClass({
+var PrefsPage = GObject.registerClass({
-    GTypeName: "PrefsWidget",
+    GTypeName: "PrefsPage",
-    Template: Me.dir.get_child("prefs-widget.ui").get_uri(),
+    Template: Me.dir.get_child("prefs-page.ui").get_uri(),
     InternalChildren: [
         "left-box",
         "center-box",
         "right-box"
     ]
-}, class PrefsWidget extends Gtk.ScrolledWindow {
+}, class PrefsPage extends Adw.PreferencesPage {
     _init(params = {}) {
         super._init(params);
 
         this._settings = ExtensionUtils.getSettings();
 
-        // Never show a horizontal scrollbar.
-        // Achieved by setting the hscrollbar_policy to 2, while setting the
-        // vscrollbar_policy to 1 (the default value).
-        this.set_policy(2, 1);
-
-        // Set the default size of the preferences window to a sensible value on
-        // realize.
-        this.connect("realize", () => {
-            // Get the window.
-            const window = this.get_root();
-
-            // Use 500 and 750 for the default size.
-            // Those are the same values the Just Perfection Gnome Shell
-            // extension uses.
-            // It seems like those values only get used the first time the
-            // preferences window gets opened in a session. On all consecutive
-            // opens, the window is a bit larger than those values.
-            window.default_width = 500;
-            window.default_height = 750;
-        });
-
         // Scroll up or down, when a Drag-and-Drop operation is in progress and
         // the user has their cursor either in the upper or lower 10% of this
         // widget respectively.
-        this._scrollManager = new ScrollManager.ScrollManager(this);
+        // Pass `this.get_first_child()` to the ScrollManager, since this
+        // `PrefsPage` extends an `Adw.PreferencesPage` and the first child of
+        // an `Adw.PreferencesPage` is the built-in `Gtk.ScrolledWindow`.
+        this._scrollManager = new ScrollManager.ScrollManager(this.get_first_child());
         let controller = new Gtk.DropControllerMotion();
         controller.connect("motion", (_, x, y) => {
             // If the pointer is currently in the upper ten percent of this
@@ -115,7 +98,7 @@ var PrefsWidget = GObject.registerClass({
 });
 
 function buildPrefsWidget() {
-    return new PrefsWidget();
+    return new PrefsPage();
 }
 
 function init() {

src/prefsModules/PrefsBoxOrderItemRow.js

@@ -1,7 +1,7 @@
 /*
  * This file is part of Top-Bar-Organizer (a Gnome Shell Extension for
  * organizing your Gnome Shell top bar).
- * Copyright (C) 2021 Julian Schacher
+ * Copyright (C) 2021-2022 Julian Schacher
  *
  * Top-Bar-Organizer is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -23,6 +23,7 @@ const Gtk = imports.gi.Gtk;
 const Gdk = imports.gi.Gdk;
 const Gio = imports.gi.Gio;
 const GObject = imports.gi.GObject;
+const Adw = imports.gi.Adw;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me = ExtensionUtils.getCurrentExtension();
@@ -34,7 +35,7 @@ var PrefsBoxOrderItemRow = GObject.registerClass({
         "item-name-display-label",
         "menu-button"
     ]
-}, class PrefsBoxOrderItemRow extends Gtk.ListBoxRow {
+}, class PrefsBoxOrderItemRow extends Adw.ActionRow {
     _init(params = {}, scrollManager, item) {
         super._init(params);