🔧 Implicitely load effect preferences

docs/how-to-create-new-effects.md

@@ -196,7 +196,8 @@ var SimpleFade = class {
   // This will be called in various places where a unique identifier for this effect is
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
-  // (e.g. '*-animation-time').
+  // (e.g. '*-animation-time'). Also, the shader file and the settings UI files should be
+  // named likes this.
   getNick() {
     return 'simple-fade';
   }
@@ -209,10 +210,9 @@ var SimpleFade = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // binds all properties to the settings and appends the page to the main stack of the
+  // binds all user interface elements to the respective settings keys of the profile.
-  // preferences dialog.
+  bindPreferences(dialog) {
-  getPreferences(dialog) {
     // Empty for now... Code is added here later in the tutorial!
     return null;
   }
@@ -265,9 +265,9 @@ There should be two sliders in this example: The animation duration and the widt
 If your effect supports GNOME Shell 3.3x _and_ GNOME Shell 40+, you will have to provide three `*.ui` files for this.
 This is because starting with GNOME Shell 40, the preference dialog uses GTK4, before it used to use GTK3.
 Starting with GNOME Shell 42, it uses `libadwaita` which requires different UI files again.
-We will load the respective file in the `getPreferences()` method of your new effect class.
+We will load the respective file in the `bindPreferences()` method of your new effect class.
 
-Just save the code below to `resources/ui/gtk3/SimpleFade.ui`, `resources/ui/gtk4/SimpleFade.ui`, and `resources/ui/adw/SimpleFade.ui` respectively.
+Just save the code below to `resources/ui/gtk3/simple-fade.ui`, `resources/ui/gtk4/simple-fade.ui`, and `resources/ui/adw/simple-fade.ui` respectively.
 Remember to replace any occurrence of `simple-fade` with your effect's nick-name!
 
 <details>
@@ -641,21 +641,14 @@ SPDX-License-Identifier: GPL-3.0-or-later
 
 ### Loading the Preferences Page
 
-In order to load the above `*.ui` files, add the following code to your effect's `getPreferences()` method.
+In order to load the above `*.ui` files, add the following code to your effect's `bindPreferences()` method.
 
 ```javascript
-static getPreferences(dialog) {
+bindPreferences(dialog) {
-
-  // Add the settings page to the builder.
-  dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/SimpleFade.ui`);
-
   // These connect the settings to the UI elements. Have a look at prefs.js
   // on how to bind other types of UI elements.
   dialog.bindAdjustment('simple-fade-animation-time');
   dialog.bindAdjustment('simple-fade-width');
-
-  // Finally, return the new settings page.
-  return dialog.getBuilder().get_object('simple-fade-prefs');
 }
 ```
 

prefs.js

@@ -107,8 +107,6 @@ var PreferencesDialog = class PreferencesDialog {
       this._loadActiveProfile();
       this._updateProfileButton();
     });
-    this._loadActiveProfile();
-    this._updateProfileButton();
 
     // Check whether the power profiles daemon is available - if not, we hide the
     // corresponding settings row.
@@ -144,7 +142,20 @@ var PreferencesDialog = class PreferencesDialog {
       this._ALL_EFFECTS.forEach(effect => {
         const [minMajor, minMinor] = effect.getMinShellVersion();
         if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
-          const row = effect.getPreferences(this);
+
+          const uiFile     = `/ui/${utils.getUIDir()}/${effect.getNick()}.ui`;
+          const [hasPrefs] = Gio.resources_get_info(uiFile, 0);
+
+          let row;
+          if (hasPrefs) {
+            // Add the settings page to the builder.
+            this._builder.add_from_resource(uiFile);
+
+            // Add the effect's preferences (if any).
+            row = this._builder.get_object(`${effect.getNick()}-prefs`);
+          } else {
+            row = Adw.ActionRow.new();
+          }
 
           // On older versions of Adw (e.g. on GNOME Shell <43), the set_use_markup() does
           // not yet exist.
@@ -157,15 +168,17 @@ var PreferencesDialog = class PreferencesDialog {
 
           // Un-expand any previously expanded effect row. This way we ensure that there
           // is only one expanded row at any time.
-          row.connect('notify::expanded', currentRow => {
+          if (hasPrefs) {
-            if (currentRow.get_expanded()) {
+            row.connect('notify::expanded', currentRow => {
-              this._effectRows.forEach(row => {
+              if (currentRow.get_expanded()) {
-                if (row != currentRow) {
+                this._effectRows.forEach(row => {
-                  row.set_expanded(false);
+                  if (row != currentRow && row.set_expanded) {
-                }
+                    row.set_expanded(false);
-              });
+                  }
-            }
+                });
-          });
+              }
+            });
+          }
 
           // The preview button.
           const previewButton = Gtk.Button.new_from_icon_name('bmw-preview-symbolic');
@@ -179,11 +192,11 @@ var PreferencesDialog = class PreferencesDialog {
             this._previewEffect(effect);
           });
 
-          // Now add the two toggle buttons for enabling and disabling the effect.
+          // Now add the toggle button for enabling and disabling the effect.
           const button = Gtk.Switch.new();
-          button.set_action_name(`prefs.${effect.getNick()}-enable-effect`);
           button.set_tooltip_text(_('Use this effect'));
           button.set_valign(Gtk.Align.CENTER);
+          this._builder.expose_object(`${effect.getNick()}-enable-effect`, button);
 
           row.add_prefix(button);
           group.add(row);
@@ -225,10 +238,18 @@ var PreferencesDialog = class PreferencesDialog {
           page.margin_top    = 60;
           page.margin_bottom = 60;
 
-          // Add the effect's preferences (if any).
+          const uiFile     = `/ui/${utils.getUIDir()}/${effect.getNick()}.ui`;
-          const preferences = effect.getPreferences(this);
+          const [hasPrefs] = Gio.resources_get_info(uiFile);
-          if (preferences) {
+          if (hasPrefs) {
-            this.gtkBoxAppend(page, preferences);
+
+            // Add the settings page to the builder.
+            this._builder.add_from_resource(uiFile);
+
+            // Add the effect's preferences (if any).
+            const prefs = this._builder.get_object(`${effect.getNick()}-prefs`);
+            if (prefs) {
+              this.gtkBoxAppend(page, prefs);
+            }
           }
 
           stack.add_titled(page, effect.getNick(), effect.getLabel());
@@ -244,6 +265,9 @@ var PreferencesDialog = class PreferencesDialog {
       // Show the version number in the title bar.
       window.set_title(`Burn-My-Windows ${Me.metadata.version}`);
 
+      this._loadActiveProfile();
+      this._updateProfileButton();
+
       // Populate the menu with actions.
       const group = Gio.SimpleActionGroup.new();
       window.insert_action_group('prefs', group);
@@ -391,21 +415,8 @@ var PreferencesDialog = class PreferencesDialog {
         group.add_action(aboutAction);
       }
 
-      // Bind all the profile-related actions.
+      // Setup all the profile-related actions.
       {
-        const setupProfileOption = (settingsKey) => {
-          this.bindComboRow(settingsKey);
-          this._profileSettings.connect('changed::' + settingsKey,
-                                        () => this._updateProfileButton());
-        };
-
-        setupProfileOption('profile-animation-type');
-        setupProfileOption('profile-window-type');
-        setupProfileOption('profile-desktop-style');
-        setupProfileOption('profile-power-mode');
-        setupProfileOption('profile-power-profile');
-
-
         const profileAction = this._settings.create_action('active-profile');
         group.add_action(profileAction);
 
@@ -415,7 +426,6 @@ var PreferencesDialog = class PreferencesDialog {
           this._settings.set_string('active-profile', profile);
           this._builder.get_object('edit-profile-button').active = true;
         });
-
         group.add_action(newProfileAction);
 
         const deleteProfileAction = Gio.SimpleAction.new('profile-delete', null);
@@ -437,26 +447,6 @@ var PreferencesDialog = class PreferencesDialog {
 
         group.add_action(deleteProfileAction);
       }
-
-      // Populate the enabled-effects drop-down menu.
-      {
-        this._ALL_EFFECTS.forEach(effect => {
-          const [minMajor, minMinor] = effect.getMinShellVersion();
-          if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
-            const actionName = effect.getNick() + '-enable-effect';
-            const action     = this._profileSettings.create_action(actionName);
-            group.add_action(action);
-
-            // The menu only exists if not using libadwaita. With libadwaita, individual
-            // ToggleButtons are used for triggering the above actions.
-            if (!utils.isADW()) {
-              const menu  = this._builder.get_object('enabled-effects-menu');
-              const label = effect.getLabel();
-              menu.append_item(Gio.MenuItem.new(label, 'prefs.' + actionName));
-            }
-          }
-        });
-      }
     });
 
     // As we do not have something like a destructor, we just listen for the destroy
@@ -567,6 +557,29 @@ var PreferencesDialog = class PreferencesDialog {
     utils.debug('loading ' + activeProfile);
 
     this._profileSettings = utils.getProfileSettings(activeProfile);
+
+    // Bind all the profile-related settings.
+    {
+      const setupProfileOption = (settingsKey) => {
+        this.bindComboRow(settingsKey);
+        this._profileSettings.connect('changed::' + settingsKey,
+                                      () => this._updateProfileButton());
+      };
+
+      setupProfileOption('profile-animation-type');
+      setupProfileOption('profile-window-type');
+      setupProfileOption('profile-desktop-style');
+      setupProfileOption('profile-power-mode');
+      setupProfileOption('profile-power-profile');
+    }
+
+    this._ALL_EFFECTS.forEach(effect => {
+      const [minMajor, minMinor] = effect.getMinShellVersion();
+      if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
+        this.bindSwitch(`${effect.getNick()}-enable-effect`);
+        effect.bindPreferences(this);
+      }
+    });
   }
 
   _updateProfileButton() {

schemas/org.gnome.shell.extensions.burn-my-windows-profile.gschema.xml

@@ -602,22 +602,16 @@ SPDX-License-Identifier: CC0-1.0
     <!-- TV Glitch Options                                                             -->
     <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
-    <key name="tv-glitch-close-effect" type="b">
+    <key name="tv-glitch-enable-effect" type="b">
       <default>false</default>
-      <summary>TV Glitch Close Effect</summary>
+      <summary>TV Glitch Enable Effect</summary>
-      <description>Use the Glitch effect for window closing.</description>
+      <description>Use the TV Glitch effect.</description>
-    </key>
-
-    <key name="tv-glitch-open-effect" type="b">
-      <default>false</default>
-      <summary>TV Glitch Open Effect</summary>
-      <description>Use the Glitch effect for window opening.</description>
     </key>
 
     <key name="tv-glitch-animation-time" type="i">
       <default>750</default>
       <summary>TV Glitch Animation Time</summary>
-      <description>The time the Glitch effect takes.</description>
+      <description>The time the TV Glitch effect takes.</description>
     </key>
 
     <key name="tv-glitch-scale" type="d">

src/Apparition.js

@@ -83,22 +83,14 @@ var Apparition = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Apparition.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('apparition-randomness');
     dialog.bindAdjustment('apparition-animation-time');
     dialog.bindAdjustment('apparition-twirl-intensity');
     dialog.bindAdjustment('apparition-shake-intensity');
     dialog.bindAdjustment('apparition-suction-intensity');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('apparition-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/BrokenGlass.js

@@ -128,7 +128,8 @@ var BrokenGlass = class {
   // This will be called in various places where a unique identifier for this effect is
   // required. It should match the prefix of the settings keys which store whether the
   // effect is enabled currently (e.g. '*-enable-effect'), and its animation time
-  // (e.g. '*-animation-time').
+  // (e.g. '*-animation-time'). Also, the shader file and the settings UI files should be
+  // named likes this.
   getNick() {
     return 'broken-glass';
   }
@@ -141,22 +142,14 @@ var BrokenGlass = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/BrokenGlass.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('broken-glass-animation-time');
     dialog.bindAdjustment('broken-glass-scale');
     dialog.bindAdjustment('broken-glass-gravity');
     dialog.bindAdjustment('broken-glass-blow-force');
     dialog.bindSwitch('broken-glass-use-pointer');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('broken-glass-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/Doom.js

@@ -90,21 +90,13 @@ var Doom = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Doom.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('doom-animation-time');
     dialog.bindAdjustment('doom-horizontal-scale');
     dialog.bindAdjustment('doom-vertical-scale');
     dialog.bindAdjustment('doom-pixel-size');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('doom-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/EnergizeA.js

@@ -82,20 +82,12 @@ var EnergizeA = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/EnergizeA.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('energize-a-animation-time');
     dialog.bindAdjustment('energize-a-scale');
     dialog.bindColorButton('energize-a-color');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('energize-a-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/EnergizeB.js

@@ -83,20 +83,12 @@ var EnergizeB = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/EnergizeB.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('energize-b-animation-time');
     dialog.bindAdjustment('energize-b-scale');
     dialog.bindColorButton('energize-b-color');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('energize-b-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/Fire.js

@@ -102,12 +102,9 @@ var Fire = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Fire.ui`);
 
     // Bind all properties.
     dialog.bindAdjustment('fire-animation-time');
@@ -131,9 +128,6 @@ var Fire = class {
 
     // Initialize the fire-preset dropdown.
     this._createFirePresets(dialog);
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('fire-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/Glide.js

@@ -80,22 +80,14 @@ var Glide = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Glide.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('glide-animation-time');
     dialog.bindAdjustment('glide-scale');
     dialog.bindAdjustment('glide-squish');
     dialog.bindAdjustment('glide-tilt');
     dialog.bindAdjustment('glide-shift');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('glide-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/Glitch.js

@@ -91,22 +91,14 @@ var Glitch = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Glitch.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('glitch-animation-time');
     dialog.bindAdjustment('glitch-scale');
     dialog.bindAdjustment('glitch-speed');
     dialog.bindAdjustment('glitch-strength');
     dialog.bindColorButton('glitch-color');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('glitch-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/Hexagon.js

@@ -100,23 +100,15 @@ var Hexagon = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Hexagon.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('hexagon-animation-time');
     dialog.bindAdjustment('hexagon-scale');
     dialog.bindAdjustment('hexagon-line-width');
     dialog.bindColorButton('hexagon-line-color');
     dialog.bindColorButton('hexagon-glow-color');
     dialog.bindSwitch('hexagon-additive-blending');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('hexagon-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/Incinerate.js

@@ -133,22 +133,14 @@ var Incinerate = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Incinerate.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('incinerate-animation-time');
     dialog.bindAdjustment('incinerate-scale');
     dialog.bindAdjustment('incinerate-turbulence');
     dialog.bindSwitch('incinerate-use-pointer');
     dialog.bindColorButton('incinerate-color');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('incinerate-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/Matrix.js

@@ -116,23 +116,15 @@ var Matrix = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Matrix.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('matrix-animation-time');
     dialog.bindAdjustment('matrix-scale');
     dialog.bindAdjustment('matrix-randomness');
     dialog.bindAdjustment('matrix-overshoot');
     dialog.bindColorButton('matrix-trail-color');
     dialog.bindColorButton('matrix-tip-color');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('matrix-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/PixelWheel.js

@@ -76,20 +76,12 @@ var PixelWheel = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/PixelWheel.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('pixel-wheel-animation-time');
     dialog.bindAdjustment('pixel-wheel-pixel-size');
     dialog.bindAdjustment('pixel-wheel-spoke-count');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('pixel-wheel-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/PixelWipe.js

@@ -102,19 +102,11 @@ var PixelWipe = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/PixelWipe.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('pixel-wipe-animation-time');
     dialog.bindAdjustment('pixel-wipe-pixel-size');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('pixel-wipe-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/Pixelate.js

@@ -76,20 +76,12 @@ var Pixelate = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Pixelate.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('pixelate-animation-time');
     dialog.bindAdjustment('pixelate-noise');
     dialog.bindAdjustment('pixelate-pixel-size');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('pixelate-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/Portal.js

@@ -93,22 +93,14 @@ var Portal = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Portal.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('portal-animation-time');
     dialog.bindAdjustment('portal-rotation-speed');
     dialog.bindAdjustment('portal-whirling');
     dialog.bindAdjustment('portal-details');
     dialog.bindColorButton('portal-color');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('portal-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/SnapOfDisintegration.js

@@ -120,21 +120,12 @@ var SnapOfDisintegration = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(
-      `/ui/${utils.getUIDir()}/SnapOfDisintegration.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('snap-animation-time');
     dialog.bindAdjustment('snap-scale');
     dialog.bindColorButton('snap-color');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('snap-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/TRexAttack.js

@@ -118,22 +118,14 @@ var TRexAttack = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/TRexAttack.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('trex-animation-time');
     dialog.bindColorButton('claw-scratch-color');
     dialog.bindAdjustment('claw-scratch-scale');
     dialog.bindAdjustment('claw-scratch-count');
     dialog.bindAdjustment('claw-scratch-warp');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('trex-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/TVEffect.js

@@ -80,19 +80,11 @@ var TVEffect = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/TVEffect.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('tv-animation-time');
     dialog.bindColorButton('tv-effect-color');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('tv-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/TVGlitch.js

@@ -92,22 +92,14 @@ var TVGlitch = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/TVGlitch.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('tv-glitch-animation-time');
     dialog.bindAdjustment('tv-glitch-scale');
     dialog.bindAdjustment('tv-glitch-speed');
     dialog.bindAdjustment('tv-glitch-strength');
     dialog.bindColorButton('tv-glitch-color');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('tv-glitch-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js

src/Wisps.js

@@ -88,20 +88,12 @@ var Wisps = class {
 
   // -------------------------------------------------------------------- API for prefs.js
 
-  // This is called by the preferences dialog. It loads the settings page for this effect,
+  // This is called by the preferences dialog whenever a new effect profile is loaded. It
-  // and binds all properties to the settings.
+  // binds all user interface elements to the respective settings keys of the profile.
-  getPreferences(dialog) {
+  bindPreferences(dialog) {
-
-    // Add the settings page to the builder.
-    dialog.getBuilder().add_from_resource(`/ui/${utils.getUIDir()}/Wisps.ui`);
-
-    // Bind all properties.
     dialog.bindAdjustment('wisps-animation-time');
     dialog.bindAdjustment('wisps-scale');
     dialog.bindColorButton('wisps-color');
-
-    // Finally, return the new settings page.
-    return dialog.getBuilder().get_object('wisps-prefs');
   }
 
   // ---------------------------------------------------------------- API for extension.js