Refactor: Create custom class for prefs box order GtkListBoxes

Create a custom class (`PrefsBoxOrderListBox`) for GtkListBoxes, which
are used in the preferences window for holding box order settings.
Having a custom class for these GtkListBoxes is useful, since it can
hold logic related to box order settings. Future commits will bring more
of this logic into this class.

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

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  This file is part of Top-Bar-Organizer (a Gnome Shell Extension for
+  organizing your Gnome Shell top bar).
+  Copyright (C) 2021 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
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+<interface>
+    <template class="PrefsBoxOrderListBox" parent="GtkListBox">
+        <property name="selection-mode">none</property>
+        <property name="show-separators">True</property>
+    </template>
+</interface>

src/prefs-widget.ui

@@ -37,7 +37,7 @@
                     </object>
                 </child>
                 <child>
-                    <object class="GtkBox">
+                    <object class="GtkBox" id="left-box">
                         <property name="orientation">vertical</property>
                         <child>
                             <object class="GtkLabel">
@@ -49,16 +49,10 @@
                                 </attributes>
                             </object>
                         </child>
-                        <child>
-                            <object class="GtkListBox" id="left-box-order">
-                                <property name="selection-mode">none</property>
-                                <property name="show-separators">True</property>
-                            </object>
-                        </child>
                     </object>
                 </child>
                 <child>
-                    <object class="GtkBox">
+                    <object class="GtkBox" id="center-box">
                         <property name="orientation">vertical</property>
                         <child>
                             <object class="GtkLabel">
@@ -70,16 +64,10 @@
                                 </attributes>
                             </object>
                         </child>
-                        <child>
-                            <object class="GtkListBox" id="center-box-order">
-                                <property name="selection-mode">none</property>
-                                <property name="show-separators">True</property>
-                            </object>
-                        </child>
                     </object>
                 </child>
                 <child>
-                    <object class="GtkBox">
+                    <object class="GtkBox" id="right-box">
                         <property name="orientation">vertical</property>
                         <child>
                             <object class="GtkLabel">
@@ -91,12 +79,6 @@
                                 </attributes>
                             </object>
                         </child>
-                        <child>
-                            <object class="GtkListBox" id="right-box-order">
-                                <property name="selection-mode">none</property>
-                                <property name="show-separators">True</property>
-                            </object>
-                        </child>
                     </object>
                 </child>
             </object>

src/prefs.js

@@ -25,6 +25,7 @@ const GObject = imports.gi.GObject;
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me = ExtensionUtils.getCurrentExtension();
 
+const PrefsBoxOrderListBox = Me.imports.prefsModules.PrefsBoxOrderListBox;
 const PrefsBoxOrderListEmptyPlaceholder = Me.imports.prefsModules.PrefsBoxOrderListEmptyPlaceholder;
 const PrefsBoxOrderItemRow = Me.imports.prefsModules.PrefsBoxOrderItemRow;
 const ScrollManager = Me.imports.prefsModules.ScrollManager;
@@ -33,9 +34,9 @@ var PrefsWidget = GObject.registerClass({
     GTypeName: "PrefsWidget",
     Template: Me.dir.get_child("prefs-widget.ui").get_uri(),
     InternalChildren: [
-        "left-box-order",
+        "left-box",
-        "center-box-order",
+        "center-box",
-        "right-box-order"
+        "right-box"
     ]
 }, class PrefsWidget extends Gtk.ScrolledWindow {
     _init(params = {}) {
@@ -85,6 +86,14 @@ var PrefsWidget = GObject.registerClass({
         });
         this.add_controller(controller);
 
+        // Add custom GTKListBoxes (PrefsBoxOrderListBoxes).
+        this._left_box_order = new PrefsBoxOrderListBox.PrefsBoxOrderListBox({}, "left-box-order");
+        this._left_box.append(this._left_box_order);
+        this._center_box_order = new PrefsBoxOrderListBox.PrefsBoxOrderListBox({}, "center-box-order");
+        this._center_box.append(this._center_box_order);
+        this._right_box_order = new PrefsBoxOrderListBox.PrefsBoxOrderListBox({}, "right-box-order");
+        this._right_box.append(this._right_box_order);
+
         // Initialize the given `gtkListBox`.
         const initializeGtkListBox = (boxOrder, gtkListBox) => {
             // Add the items of the given configured box order as
@@ -114,13 +123,6 @@ var PrefsWidget = GObject.registerClass({
         initializeGtkListBox(this._settings.get_strv("left-box-order"), this._left_box_order);
         initializeGtkListBox(this._settings.get_strv("center-box-order"), this._center_box_order);
         initializeGtkListBox(this._settings.get_strv("right-box-order"), this._right_box_order);
-
-        // Set the box order each GtkListBox is associated with.
-        // This is needed by the reordering of the GtkListBoxRows, so that the
-        // updated box orders can be saved.
-        this._left_box_order.boxOrder = "left-box-order";
-        this._center_box_order.boxOrder = "center-box-order";
-        this._right_box_order.boxOrder = "right-box-order";
     }
 });
 

src/prefsModules/PrefsBoxOrderListBox.js

@@ -0,0 +1,42 @@
+/*
+ * This file is part of Top-Bar-Organizer (a Gnome Shell Extension for
+ * organizing your Gnome Shell top bar).
+ * Copyright (C) 2021 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
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/* exported PrefsBoxOrderListBox */
+"use strict";
+
+const Gtk = imports.gi.Gtk;
+const GObject = imports.gi.GObject;
+
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me = ExtensionUtils.getCurrentExtension();
+
+var PrefsBoxOrderListBox = GObject.registerClass({
+    GTypeName: "PrefsBoxOrderListBox",
+    Template: Me.dir.get_child("prefs-box-order-list-box.ui").get_uri()
+}, class PrefsBoxOrderListBox extends Gtk.ListBox {
+    /**
+     * @param {Object} params
+     * @param {String} boxOrder - The box order this PrefsBoxOrderListBox is
+     * associated with.
+     */
+    _init(params = {}, boxOrder) {
+        super._init(params);
+
+        this.boxOrder = boxOrder;
+    }
+});