🎉 Add a preview button to each effect page

prefs.js

@@ -13,7 +13,7 @@
 
 'use strict';
 
-const {Gio, Gtk, Gdk} = imports.gi;
+const {Gio, Gtk, Gdk, GLib, GObject} = imports.gi;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
@@ -31,6 +31,9 @@ const ALL_EFFECTS = [
   Me.imports.src.Wisps.Wisps,
 ];
 
+// This template widget class is defined at the bottom of this file.
+var BurnMyWindowsEffectPage = null;
+
 //////////////////////////////////////////////////////////////////////////////////////////
 // The preferences dialog is organized in pages, each of which is loaded from a         //
 // separate ui file. There's one page with general options, all other paged are loaded  //
@@ -66,6 +69,9 @@ var PreferencesDialog = class PreferencesDialog {
       Gtk.IconTheme.get_default().add_resource_path('/img');
     }
 
+    // Register the template widgets used in the settings dialog.
+    this._registerCustomClasses();
+
     // Store a reference to the settings object.
     this._settings = ExtensionUtils.getSettings();
 
@@ -82,10 +88,16 @@ var PreferencesDialog = class PreferencesDialog {
     ALL_EFFECTS.forEach(Effect => {
       const [minMajor, minMinor] = Effect.getMinShellVersion();
       if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
-        const page = Effect.getPreferences(this);
-        if (page) {
-          stack.add_titled(page, Effect.getNick(), Effect.getLabel());
+
+        const page = new BurnMyWindowsEffectPage(Effect, this);
+
+        // Add the Effect's preferences (if any).
+        const preferences = Effect.getPreferences(this);
+        if (preferences) {
+          this.gtkBoxAppend(page, preferences);
         }
+
+        stack.add_titled(page, Effect.getNick(), Effect.getLabel());
       }
     });
 
@@ -228,6 +240,17 @@ var PreferencesDialog = class PreferencesDialog {
     this._bindResetButton(settingsKey);
   }
 
+  // ----------------------------------------------------------------- GTK3 / GTK4 helpers
+
+  // Appends the given child widget to the given Gtk.Box.
+  gtkBoxAppend(box, child) {
+    if (utils.isGTK4()) {
+      box.append(child);
+    } else {
+      box.pack_start(child, false, false, 0);
+    }
+  }
+
   // ----------------------------------------------------------------------- private stuff
 
   // Searches for a reset button for the given settings key and make it reset the settings
@@ -252,6 +275,91 @@ var PreferencesDialog = class PreferencesDialog {
 
     this._bindResetButton(settingsKey);
   }
+
+  // Initializes template widgets used by the preferences dialog.
+  _registerCustomClasses() {
+
+    // Each effect page is based on a template widget. This template contains the title
+    // and the preview button.
+    // clang-format off
+    BurnMyWindowsEffectPage =
+      GObject.registerClass({
+        GTypeName: 'BurnMyWindowsEffectPage',
+        Template: `resource:///ui/${utils.getGTKString()}/effectPage.ui`,
+        InternalChildren: ['label', 'button'],
+      },
+      class BurnMyWindowsEffectPage extends Gtk.Box {
+        _init(Effect, dialog) {
+          super._init();
+
+          // Set the effect's name as label.
+          this._label.label = Effect.getLabel();
+
+          // Open the preview window once the preview button is clicked.
+          this._button.connect('clicked', () => {
+            // Create a list of all currently enabled effects.
+            const enabledEffects = ALL_EFFECTS.filter(Effect => {
+              return dialog.getSettings().get_boolean(`${Effect.getNick()}-close-effect`);
+            });
+
+            // Disable all enabled effects temporarily.
+            enabledEffects.forEach(Effect => {
+              dialog.getSettings().set_boolean(`${Effect.getNick()}-close-effect`, false);
+            });
+
+            // Enable the to-be-previewed effect.
+            dialog.getSettings().set_boolean(`${Effect.getNick()}-close-effect`, true);
+
+            // Create the preview-window.
+            const window = new Gtk.Window({
+              title: `Preview for ${Effect.getLabel()}`,
+              default_width: 800,
+              default_height: 450,
+              modal: true,
+              transient_for: utils.isGTK4() ? this._button.get_root() :
+                                              this._button.get_toplevel()
+            });
+
+            const box = new Gtk.Box({
+              orientation: Gtk.Orientation.VERTICAL,
+              valign: Gtk.Align.CENTER,
+              spacing: 10,
+            });
+
+            const label = Gtk.Label.new('Close this Window to Preview the Effect!');
+            label.get_style_context().add_class('large-title');
+
+            const image = new Gtk.Image({
+              icon_name: 'burn-my-windows-symbolic',
+              pixel_size: 128,
+            });
+
+            dialog.gtkBoxAppend(box, image);
+            dialog.gtkBoxAppend(box, label);
+
+            if (utils.isGTK4()) {
+              window.set_child(box);
+            } else {
+              window.add(box);
+            }
+
+            window.show();
+
+            // Restore settings when the window gets closed.
+            window.connect('unrealize', () => {
+              // Disable the to-be-previewed effect again.
+              dialog.getSettings().set_boolean(`${Effect.getNick()}-close-effect`, false);
+
+              // Enable all previously enabled effects again.
+              enabledEffects.forEach(Effect => {
+                dialog.getSettings().set_boolean(`${Effect.getNick()}-close-effect`, true);
+              });
+            });
+          });
+        }
+      });
+    // clang-format on
+  }
 }
 
 // Nothing to do for now...