extensionPrefs: Use template for ExtensionsWindow

As the window will become more complex, it makes sense to let GtkBuilder
construct the UI and focus on the actual implementation.

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

js/extensionPrefs/main.js

@@ -64,8 +64,15 @@ class Application extends Gtk.Application {
     }
 });
 
-var ExtensionsWindow = GObject.registerClass(
+var ExtensionsWindow = GObject.registerClass({
-class ExtensionsWindow extends Gtk.ApplicationWindow {
+    GTypeName: 'ExtensionsWindow',
+    Template: 'resource:///org/gnome/shell/ui/extensions-window.ui',
+    InternalChildren: [
+        'extensionsList',
+        'killSwitch',
+        'mainStack',
+    ],
+}, class ExtensionsWindow extends Gtk.ApplicationWindow {
     _init(params) {
         super._init(params);
 
@@ -73,15 +80,13 @@ class ExtensionsWindow extends Gtk.ApplicationWindow {
         this._loaded = false;
         this._prefsDialog = null;
 
-        this._buildUI();
-
         this._settings = new Gio.Settings({ schema_id: 'org.gnome.shell' });
         this._settings.bind('disable-user-extensions',
             this._killSwitch, 'active',
             Gio.SettingsBindFlags.DEFAULT | Gio.SettingsBindFlags.INVERT_BOOLEAN);
 
-        this._extensionSelector.set_sort_func(this._sortList.bind(this));
+        this._extensionsList.set_sort_func(this._sortList.bind(this));
-        this._extensionSelector.set_header_func(this._updateHeader.bind(this));
+        this._extensionsList.set_header_func(this._updateHeader.bind(this));
 
         this._shellProxy.connectSignal('ExtensionStateChanged',
             this._onExtensionStateChanged.bind(this));
@@ -104,7 +109,7 @@ class ExtensionsWindow extends Gtk.ApplicationWindow {
         if (this._prefsDialog)
             return false;
 
-        let row = this._extensionSelector.get_children().find(c => {
+        let row = this._extensionsList.get_children().find(c => {
             return c.uuid === uuid && c.hasPrefs;
         });
 
@@ -265,39 +270,6 @@ class ExtensionsWindow extends Gtk.ApplicationWindow {
         return scroll;
     }
 
-    _buildUI() {
-        this.set({
-            window_position: Gtk.WindowPosition.CENTER,
-            default_width: 800,
-            default_height: 500,
-        });
-
-        this._titlebar = new Gtk.HeaderBar({ show_close_button: true,
-                                             title: _("Shell Extensions") });
-        this.set_titlebar(this._titlebar);
-
-        this._killSwitch = new Gtk.Switch({ valign: Gtk.Align.CENTER });
-        this._titlebar.pack_end(this._killSwitch);
-
-        this._mainStack = new Gtk.Stack({
-            transition_type: Gtk.StackTransitionType.CROSSFADE,
-        });
-        this.add(this._mainStack);
-
-        let scroll = new Gtk.ScrolledWindow({ hscrollbar_policy: Gtk.PolicyType.NEVER });
-
-        this._extensionSelector = new Gtk.ListBox({ selection_mode: Gtk.SelectionMode.NONE });
-        this._extensionSelector.set_sort_func(this._sortList.bind(this));
-        this._extensionSelector.set_header_func(this._updateHeader.bind(this));
-
-        scroll.add(this._extensionSelector);
-
-        this._mainStack.add_named(scroll, 'listing');
-        this._mainStack.add_named(new EmptyPlaceholder(), 'placeholder');
-
-        this.show_all();
-    }
-
     _sortList(row1, row2) {
         return row1.name.localeCompare(row2.name);
     }
@@ -311,7 +283,7 @@ class ExtensionsWindow extends Gtk.ApplicationWindow {
     }
 
     _findExtensionRow(uuid) {
-        return this._extensionSelector.get_children().find(c => c.uuid === uuid);
+        return this._extensionsList.get_children().find(c => c.uuid === uuid);
     }
 
     _onExtensionStateChanged(proxy, senderName, [uuid, newState]) {
@@ -331,7 +303,6 @@ class ExtensionsWindow extends Gtk.ApplicationWindow {
             if (e) {
                 if (e instanceof Gio.DBusError) {
                     log(`Failed to connect to shell proxy: ${e}`);
-                    this._mainStack.add_named(new NoShellPlaceholder(), 'noshell');
                     this._mainStack.visible_child_name = 'noshell';
                 } else {
                     throw e;
@@ -355,12 +326,12 @@ class ExtensionsWindow extends Gtk.ApplicationWindow {
         });
 
         row.show_all();
-        this._extensionSelector.add(row);
+        this._extensionsList.add(row);
     }
 
     _extensionsLoaded() {
-        if (this._extensionSelector.get_children().length > 0)
+        if (this._extensionsList.get_children().length > 0)
-            this._mainStack.visible_child_name = 'listing';
+            this._mainStack.visible_child_name = 'main';
         else
             this._mainStack.visible_child_name = 'placeholder';
 
@@ -470,61 +441,6 @@ var Expander = GObject.registerClass({
     }
 });
 
-var EmptyPlaceholder = GObject.registerClass(
-class EmptyPlaceholder extends Gtk.Box {
-    _init() {
-        super._init({
-            orientation: Gtk.Orientation.VERTICAL,
-            spacing: 6,
-            margin: 32,
-            valign: Gtk.Align.CENTER,
-        });
-
-        let image = new Gtk.Image({
-            icon_name: 'application-x-addon-symbolic',
-            pixel_size: 96,
-            visible: true,
-        });
-        this.add(image);
-
-        let label = new Gtk.Label({
-            label: `<b><span size="x-large">${_('No Installed Extensions')}</span></b>`,
-            use_markup: true,
-            visible: true,
-        });
-        this.add(label);
-    }
-});
-
-var NoShellPlaceholder = GObject.registerClass(
-class NoShellPlaceholder extends Gtk.Box {
-    _init() {
-        super._init({
-            orientation: Gtk.Orientation.VERTICAL,
-            spacing: 12,
-            margin: 100,
-            margin_bottom: 60,
-        });
-
-        let label = new Gtk.Label({
-            label: '<span size="x-large">%s</span>'.format(
-                _("Something’s gone wrong")),
-            use_markup: true,
-        });
-        label.get_style_context().add_class(Gtk.STYLE_CLASS_DIM_LABEL);
-        this.add(label);
-
-        label = new Gtk.Label({
-            label: _("We’re very sorry, but it was not possible to get the list of installed extensions. Make sure you are logged into GNOME and try again."),
-            justify: Gtk.Justification.CENTER,
-            wrap: true,
-        });
-        this.add(label);
-
-        this.show_all();
-    }
-});
-
 var DescriptionLabel = GObject.registerClass(
 class DescriptionLabel extends Gtk.Label {
     vfunc_get_preferred_height_for_width(width) {

js/extensionPrefs/ui/extensions-window.ui

@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.0 -->
+<interface>
+  <requires lib="gtk+" version="3.20"/>
+  <template class="ExtensionsWindow" parent="GtkApplicationWindow">
+    <property name="default_width">800</property>
+    <property name="default_height">500</property>
+    <child type="titlebar">
+      <object class="GtkHeaderBar">
+        <property name="visible">True</property>
+        <property name="title" translatable="yes">Shell Extensions</property>
+        <property name="show_close_button">True</property>
+        <child>
+          <object class="GtkSwitch" id="killSwitch">
+            <property name="visible">True</property>
+          </object>
+          <packing>
+            <property name="pack_type">end</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkStack" id="mainStack">
+        <property name="visible">True</property>
+        <property name="transition_type">crossfade</property>
+        <child>
+          <object class="GtkScrolledWindow">
+            <property name="visible">True</property>
+            <property name="hscrollbar_policy">never</property>
+            <child>
+              <object class="GtkViewport">
+                <property name="visible">True</property>
+                <child>
+                  <object class="GtkListBox" id="extensionsList">
+                    <property name="visible">True</property>
+                    <property name="selection_mode">none</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="name">main</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkBox">
+            <property name="visible">True</property>
+            <property name="orientation">vertical</property>
+            <property name="margin">32</property>
+            <property name="spacing">6</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="pixel_size">96</property>
+                <property name="icon_name">application-x-addon-symbolic</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="visible">True</property>
+                <property name="label" translatable="yes">No Installed Extensions</property>
+                <attributes>
+                  <attribute name="weight" value="bold"/>
+                  <attribute name="scale" value="1.44"/>
+                </attributes>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="name">placeholder</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkBox">
+            <property name="visible">True</property>
+            <property name="margin_left">100</property>
+            <property name="margin_right">100</property>
+            <property name="margin_top">100</property>
+            <property name="margin_bottom">60</property>
+            <property name="orientation">vertical</property>
+            <property name="spacing">12</property>
+            <child>
+              <object class="GtkLabel">
+                <property name="visible">True</property>
+                <property name="label" translatable="yes">Something’s gone wrong</property>
+                <attributes>
+                  <attribute name="scale" value="1.44"/>
+                </attributes>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="visible">True</property>
+                <property name="label" translatable="yes">We’re very sorry, but it was not possible to get the list of installed extensions. Make sure you are logged into GNOME and try again.</property>
+                <property name="justify">center</property>
+                <property name="wrap">True</property>
+                <style>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="name">noshell</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>

js/prefs-resources.gresource.xml

@@ -7,5 +7,7 @@
     <file>misc/extensionUtils.js</file>
     <file>misc/fileUtils.js</file>
     <file>misc/params.js</file>
+
+    <file alias="ui/extensions-window.ui">extensionPrefs/ui/extensions-window.ui</file>
   </gresource>
 </gresources>

po/POTFILES.in

@@ -6,6 +6,7 @@ data/org.gnome.Shell.desktop.in.in
 data/org.gnome.shell.gschema.xml.in
 data/org.gnome.Shell.PortalHelper.desktop.in.in
 js/extensionPrefs/main.js
+js/extensionPrefs/ui/extensions-window.ui
 js/gdm/authPrompt.js
 js/gdm/loginDialog.js
 js/gdm/util.js