extensionPrefs: Use template for rows

Rows are already complex enough to justify a template, and we are
about to add more.

https://gitlab.gnome.org/GNOME/gnome-shell/issues/1968

js/extensionPrefs/main.js

@@ -3,7 +3,7 @@ imports.gi.versions.Gdk = '3.0';
 imports.gi.versions.Gtk = '3.0';
 
 const Gettext = imports.gettext;
-const { Gdk, GLib, Gio, GObject, Gtk, Pango } = imports.gi;
+const { Gdk, GLib, Gio, GObject, Gtk } = imports.gi;
 const Format = imports.format;
 
 const _ = Gettext.gettext;
@@ -471,8 +471,18 @@ var Expander = GObject.registerClass({
     }
 });
 
-var ExtensionRow = GObject.registerClass(
+var ExtensionRow = GObject.registerClass({
-class ExtensionRow extends Gtk.ListBoxRow {
+    GTypeName: 'ExtensionRow',
+    Template: 'resource:///org/gnome/shell/ui/extension-row.ui',
+    Children: [
+        'prefsButton',
+    ],
+    InternalChildren: [
+        'nameLabel',
+        'descriptionLabel',
+        'switch',
+    ],
+}, class ExtensionRow extends Gtk.ListBoxRow {
     _init(extension) {
         super._init();
 
@@ -480,9 +490,23 @@ class ExtensionRow extends Gtk.ListBoxRow {
         this._extension = extension;
         this._prefsModule = null;
 
-        this.connect('destroy', this._onDestroy.bind(this));
+        let name = GLib.markup_escape_text(this.name, -1);
+        this._nameLabel.label = name;
 
-        this._buildUI();
+        let desc = this._extension.metadata.description.split('\n')[0];
+        this._descriptionLabel.label = desc;
+
+        this.prefsButton.visible = this.hasPrefs;
+
+        this._notifyActiveId = this._switch.connect('notify::active', () => {
+            if (this._switch.active)
+                this._app.shellProxy.EnableExtensionRemote(this.uuid);
+            else
+                this._app.shellProxy.DisableExtensionRemote(this.uuid);
+        });
+        this._switch.connect('state-set', () => true);
+
+        this.connect('destroy', this._onDestroy.bind(this));
 
         this._extensionStateChangedId = this._app.shellProxy.connectSignal(
             'ExtensionStateChanged', (p, sender, [uuid, newState]) => {
@@ -490,14 +514,9 @@ class ExtensionRow extends Gtk.ListBoxRow {
                     return;
 
                 this._extension = ExtensionUtils.deserializeExtension(newState);
-                let state = this._extension.state == ExtensionState.ENABLED;
+                this._updateState();
-
-                this._switch.block_signal_handler(this._notifyActiveId);
-                this._switch.state = state;
-                this._switch.unblock_signal_handler(this._notifyActiveId);
-
-                this._switch.sensitive = this._canToggle();
             });
+        this._updateState();
     }
 
     get uuid() {
@@ -516,6 +535,16 @@ class ExtensionRow extends Gtk.ListBoxRow {
         return this._extension.metadata.url;
     }
 
+    _updateState() {
+        let state = this._extension.state === ExtensionState.ENABLED;
+
+        this._switch.block_signal_handler(this._notifyActiveId);
+        this._switch.state = state;
+        this._switch.unblock_signal_handler(this._notifyActiveId);
+
+        this._switch.sensitive = this._canToggle();
+    }
+
     _onDestroy() {
         if (!this._app.shellProxy)
             return;
@@ -525,58 +554,6 @@ class ExtensionRow extends Gtk.ListBoxRow {
         this._extensionStateChangedId = 0;
     }
 
-    _buildUI() {
-        let hbox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
-                                 hexpand: true, margin_end: 24, spacing: 24,
-                                 margin: 12 });
-        this.add(hbox);
-
-        let vbox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL,
-                                 spacing: 6, hexpand: true });
-        hbox.add(vbox);
-
-        let name = GLib.markup_escape_text(this.name, -1);
-        let label = new Gtk.Label({ label: '<b>' + name + '</b>',
-                                    use_markup: true,
-                                    halign: Gtk.Align.START });
-        vbox.add(label);
-
-        let desc = this._extension.metadata.description.split('\n')[0];
-        label = new Gtk.Label({
-            label: desc,
-            ellipsize: Pango.EllipsizeMode.END,
-            max_width_chars: 60,
-            xalign: 0,
-            yalign: 0,
-        });
-        vbox.add(label);
-
-        let button = new Gtk.Button({ valign: Gtk.Align.CENTER,
-                                      visible: this.hasPrefs,
-                                      no_show_all: true });
-        button.set_image(new Gtk.Image({ icon_name: 'emblem-system-symbolic',
-                                         icon_size: Gtk.IconSize.BUTTON,
-                                         visible: true }));
-        button.get_style_context().add_class('circular');
-        hbox.add(button);
-
-        this.prefsButton = button;
-
-        this._switch = new Gtk.Switch({
-            valign: Gtk.Align.CENTER,
-            sensitive: this._canToggle(),
-            state: this._extension.state === ExtensionState.ENABLED,
-        });
-        this._notifyActiveId = this._switch.connect('notify::active', () => {
-            if (this._switch.active)
-                this._app.shellProxy.EnableExtensionRemote(this.uuid);
-            else
-                this._app.shellProxy.DisableExtensionRemote(this.uuid);
-        });
-        this._switch.connect('state-set', () => true);
-        hbox.add(this._switch);
-    }
-
     _canToggle() {
         return this._extension.canChange;
     }

js/extensionPrefs/ui/extension-row.ui

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.0 -->
+<interface>
+  <requires lib="gtk+" version="3.20"/>
+  <template class="ExtensionRow" parent="GtkListBoxRow">
+    <property name="visible">True</property>
+    <property name="activatable">False</property>
+    <child>
+      <object class="GtkGrid">
+        <property name="visible">True</property>
+        <property name="margin_start">12</property>
+        <property name="margin_end">24</property>
+        <property name="margin_top">12</property>
+        <property name="margin_bottom">12</property>
+        <property name="row_spacing">6</property>
+        <property name="column_spacing">24</property>
+        <child>
+          <object class="GtkLabel" id="nameLabel">
+            <property name="visible">True</property>
+            <property name="hexpand">True</property>
+            <property name="halign">start</property>
+            <attributes>
+              <attribute name="weight" value="bold"/>
+            </attributes>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="prefsButton">
+            <property name="no_show_all">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="circular"/>>
+              <class name="image-button"/>>
+            </style>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="icon_name">emblem-system-symbolic</property>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="height">2</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkSwitch" id="switch">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="valign">center</property>
+          </object>
+          <packing>
+            <property name="height">2</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="descriptionLabel">
+            <property name="visible">True</property>
+            <property name="ellipsize">end</property>
+            <property name="max_width_chars">60</property>
+            <property name="xalign">0</property>
+            <property name="yalign">0</property>
+          </object>
+          <packing>
+            <property name="left_attach">0</property>
+            <property name="top_attach">1</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>

js/prefs-resources.gresource.xml

@@ -8,6 +8,7 @@
     <file>misc/fileUtils.js</file>
     <file>misc/params.js</file>
 
+    <file alias="ui/extension-row.ui">extensionPrefs/ui/extension-row.ui</file>
     <file alias="ui/extensions-window.ui">extensionPrefs/ui/extensions-window.ui</file>
   </gresource>
 </gresources>