Refactor: Add PrefsBoxOrderListBoxes via UI file a. let them self-init

Add the `PrefsBoxOrderListBox`es to the `PrefsPage` via the
`PrefsPage`es UI file.
Also let the `PrefsBoxOrderListBox`es initialize themselves based on the
given box order.

data/ui/prefs-page.ui

@@ -15,6 +15,11 @@
                                 <property name="margin-bottom">12</property>
                             </object>
                         </child>
+                        <child>
+                            <object class="PrefsBoxOrderListBox">
+                                <property name="box-order">left-box-order</property>
+                            </object>
+                        </child>
                     </object>
                 </child>
                 <child>
@@ -28,6 +33,11 @@
                                 <property name="margin-bottom">12</property>
                             </object>
                         </child>
+                        <child>
+                            <object class="PrefsBoxOrderListBox">
+                                <property name="box-order">center-box-order</property>
+                            </object>
+                        </child>
                     </object>
                 </child>
                 <child>
@@ -41,6 +51,11 @@
                                 <property name="margin-bottom">12</property>
                             </object>
                         </child>
+                        <child>
+                            <object class="PrefsBoxOrderListBox">
+                                <property name="box-order">right-box-order</property>
+                            </object>
+                        </child>
                     </object>
                 </child>
             </object>

src/prefsModules/PrefsBoxOrderListBox.js

@@ -7,19 +7,50 @@ const GObject = imports.gi.GObject;
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me = ExtensionUtils.getCurrentExtension();
 
+const PrefsBoxOrderItemRow = Me.imports.prefsModules.PrefsBoxOrderItemRow;
+const PrefsBoxOrderListEmptyPlaceholder = Me.imports.prefsModules.PrefsBoxOrderListEmptyPlaceholder;
+
 var PrefsBoxOrderListBox = GObject.registerClass({
     GTypeName: "PrefsBoxOrderListBox",
-    Template: Me.dir.get_child("ui").get_child("prefs-box-order-list-box.ui").get_uri()
+    Template: Me.dir.get_child("ui").get_child("prefs-box-order-list-box.ui").get_uri(),
+    Properties: {
+        BoxOrder: GObject.ParamSpec.string(
+            "box-order",
+            "Box Order",
+            "The box order this PrefsBoxOrderListBox is associated with.",
+            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY,
+            ""
+        )
+    }
 }, class PrefsBoxOrderListBox extends Gtk.ListBox {
     /**
      * @param {Object} params
-     * @param {String} boxOrder - The box order this PrefsBoxOrderListBox is
-     * associated with.
      */
-    constructor(params = {}, boxOrder) {
+    constructor(params = {}) {
         super(params);
 
-        this.boxOrder = boxOrder;
+        // Add a placeholder widget for the case, where no GtkListBoxRows are
+        // present.
+        this.set_placeholder(new PrefsBoxOrderListEmptyPlaceholder.PrefsBoxOrderListEmptyPlaceholder());
+    }
+
+    get boxOrder() {
+        return this._boxOrder;
+    }
+
+    set boxOrder(value) {
+        this._boxOrder = value;
+
+        // Get the actual box order for the given box order name from settings.
+        const boxOrder = settings.get_strv(this._boxOrder);
+        // Populate this GtkListBox with GtkListBoxRows for the items of the
+        // given configured box order.
+        for (const item of boxOrder) {
+            const listBoxRow = new PrefsBoxOrderItemRow.PrefsBoxOrderItemRow({}, item);
+            this.append(listBoxRow);
+        }
+
+        this.notify("box-order");
     }
 
     /**

src/prefsModules/PrefsPage.js

@@ -48,31 +48,5 @@ var PrefsPage = GObject.registerClass({
             scrollManager.stopScrollAll();
         });
         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
-            // GtkListBoxRows.
-            for (const item of boxOrder) {
-                const listBoxRow = new PrefsBoxOrderItemRow.PrefsBoxOrderItemRow({}, item);
-                gtkListBox.append(listBoxRow);
-            }
-
-            // Add a placeholder widget for the case, where `gtkListBox` doesn't
-            // have any GtkListBoxRows.
-            gtkListBox.set_placeholder(new PrefsBoxOrderListEmptyPlaceholder.PrefsBoxOrderListEmptyPlaceholder());
-        };
-
-        initializeGtkListBox(settings.get_strv("left-box-order"), this._left_box_order);
-        initializeGtkListBox(settings.get_strv("center-box-order"), this._center_box_order);
-        initializeGtkListBox(settings.get_strv("right-box-order"), this._right_box_order);
     }
 });