📝 Add some more comments

extension.js

@@ -138,8 +138,7 @@ class Extension {
 
       // Create a list of all currently enabled effects.
       const enabledEffects = ALL_EFFECTS.filter(Effect => {
-        const prefix = Effect.getSettingsPrefix();
-        return this._settings.get_boolean(`${prefix}-close-effect`);
+        return this._settings.get_boolean(`${Effect.getNick()}-close-effect`);
       });
 
       // Nothing is enabled...

prefs.js

@@ -115,9 +115,9 @@ var PreferencesDialog = class PreferencesDialog {
         ALL_EFFECTS.forEach(Effect => {
           const [minMajor, minMinor] = Effect.getMinShellVersion();
           if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
-            const prefix     = Effect.getSettingsPrefix();
+            const nick       = Effect.getNick();
             const label      = Effect.getLabel();
-            const actionName = prefix + '-close-effect';
+            const actionName = nick + '-close-effect';
             const fullName   = 'close-effects.' + actionName;
 
             const action = this._settings.create_action(actionName);

src/FireEffect.js

@@ -27,26 +27,31 @@ const utils          = Me.imports.src.utils;
 // there are a couple of moving gradients which fade-in or fade-out the fire effect.    //
 //////////////////////////////////////////////////////////////////////////////////////////
 
+// The shader class for this effect is registered further down in this file.
 let FireShader = null;
 
 var FireEffect = class FireEffect {
 
   // ---------------------------------------------------------------------- static methods
 
+  // The effect is available on all GNOME Shell versions supported by this extension.
   static getMinShellVersion() {
     return [3, 36];
   }
 
-  static getSettingsPrefix() {
+  static getNick() {
     return 'fire';
   }
 
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
   static getLabel() {
     return 'Fire';
   }
 
   static initPreferences(dialog) {
 
+    // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(
         `/ui/${utils.isGTK4() ? 'gtk4' : 'gtk3'}/firePage.ui`);
 
@@ -73,8 +78,11 @@ var FireEffect = class FireEffect {
     // Initialize the fire-preset dropdown.
     FireEffect._createFirePresets(dialog);
 
+    // Finally, append the settings page to the main stack.
     const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(dialog.getBuilder().get_object('fire-prefs'), 'fire', 'Fire');
+    stack.add_titled(
+        dialog.getBuilder().get_object('fire-prefs'), FireEffect.getNick(),
+        FireEffect.getLabel());
   }
 
   static createShader(settings) {
@@ -190,6 +198,12 @@ var FireEffect = class FireEffect {
 }
 
 
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
 if (utils.isInShellProcess()) {
 
   const Clutter        = imports.gi.Clutter;

src/MatrixEffect.js

@@ -27,27 +27,31 @@ const utils          = Me.imports.src.utils;
 // documentation of vfunc_paint_target further down in this file.                       //
 //////////////////////////////////////////////////////////////////////////////////////////
 
-
+// The shader class for this effect is registered further down in this file.
 let MatrixShader = null;
 
 var MatrixEffect = class MatrixEffect {
 
   // ---------------------------------------------------------------------- static methods
 
+  // This effect is only available on GNOME Shell 40+.
   static getMinShellVersion() {
     return [40, 0];
   }
 
-  static getSettingsPrefix() {
+  static getNick() {
     return 'matrix';
   }
 
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
   static getLabel() {
     return 'Matrix';
   }
 
   static initPreferences(dialog) {
 
+    // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource('/ui/gtk4/matrixPage.ui');
 
     // Bind all properties.
@@ -57,8 +61,11 @@ var MatrixEffect = class MatrixEffect {
     dialog.bindColorButton('matrix-trail-color');
     dialog.bindColorButton('matrix-tip-color');
 
+    // Finally, append the settings page to the main stack.
     const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(dialog.getBuilder().get_object('matrix-prefs'), 'matrix', 'Matrix');
+    stack.add_titled(
+        dialog.getBuilder().get_object('matrix-prefs'), MatrixEffect.getNick(),
+        MatrixEffect.getLabel());
   }
 
   static createShader(settings) {
@@ -85,6 +92,12 @@ var MatrixEffect = class MatrixEffect {
 }
 
 
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
 if (utils.isInShellProcess()) {
 
   const {Clutter, GdkPixbuf, Cogl} = imports.gi;
@@ -155,7 +168,7 @@ if (utils.isInShellProcess()) {
           float speed = fract(cos(coords.x)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
 
           float distToDrop  = (uProgress*2-delay)*speed - fragCoord.y;
-          
+
           float rainAlpha   = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
           float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
 

src/TRexEffect.js

@@ -25,26 +25,31 @@ const utils          = Me.imports.src.utils;
 // documentation of vfunc_paint_target further down in this file.                       //
 //////////////////////////////////////////////////////////////////////////////////////////
 
+// The shader class for this effect is registered further down in this file.
 let TRexShader = null;
 
 var TRexEffect = class TRexEffect {
 
   // ---------------------------------------------------------------------- static methods
 
+  // This effect is only available on GNOME Shell 40+.
   static getMinShellVersion() {
     return [40, 0];
   }
 
-  static getSettingsPrefix() {
+  static getNick() {
     return 'trex';
   }
 
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
   static getLabel() {
     return 'T-Rex Attack';
   }
 
   static initPreferences(dialog) {
 
+    // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource('/ui/gtk4/trexPage.ui');
 
     // Bind all properties.
@@ -54,9 +59,11 @@ var TRexEffect = class TRexEffect {
     dialog.bindAdjustment('claw-scratch-count');
     dialog.bindAdjustment('claw-scratch-warp');
 
+    // Finally, append the settings page to the main stack.
     const stack = dialog.getBuilder().get_object('main-stack');
     stack.add_titled(
-        dialog.getBuilder().get_object('trex-prefs'), 'trex', 'T-Rex Attack');
+        dialog.getBuilder().get_object('trex-prefs'), TRexEffect.getNick(),
+        TRexEffect.getLabel());
   }
 
   static createShader(settings) {
@@ -85,6 +92,12 @@ var TRexEffect = class TRexEffect {
 }
 
 
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
 if (utils.isInShellProcess()) {
 
   const {Clutter, GdkPixbuf, Cogl} = imports.gi;

src/TVEffect.js

@@ -25,28 +25,31 @@ const utils          = Me.imports.src.utils;
 // towards the center.                                                                  //
 //////////////////////////////////////////////////////////////////////////////////////////
 
-
+// The shader class for this effect is registered further down in this file.
 let TVShader = null;
 
-
 var TVEffect = class TVEffect {
 
   // ---------------------------------------------------------------------- static methods
 
+  // The effect is available on all GNOME Shell versions supported by this extension.
   static getMinShellVersion() {
     return [3, 36];
   }
 
-  static getSettingsPrefix() {
+  static getNick() {
     return 'tv';
   }
 
+  // This will be shown in the sidebar of the preferences dialog as well as in the
+  // drop-down menus where the user can choose the effect.
   static getLabel() {
     return 'TV Effect';
   }
 
   static initPreferences(dialog) {
 
+    // Add the settings page to the builder.
     dialog.getBuilder().add_from_resource(
         `/ui/${utils.isGTK4() ? 'gtk4' : 'gtk3'}/tvPage.ui`);
 
@@ -54,8 +57,11 @@ var TVEffect = class TVEffect {
     dialog.bindAdjustment('tv-animation-time');
     dialog.bindColorButton('tv-effect-color');
 
+    // Finally, append the settings page to the main stack.
     const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(dialog.getBuilder().get_object('tv-prefs'), 'tv', 'TV Effect');
+    stack.add_titled(
+        dialog.getBuilder().get_object('tv-prefs'), TVEffect.getNick(),
+        TVEffect.getLabel());
   }
 
   static createShader(settings) {
@@ -82,6 +88,12 @@ var TVEffect = class TVEffect {
 }
 
 
+//////////////////////////////////////////////////////////////////////////////////////////
+// The shader class for this effect will only be registered in GNOME Shell's process    //
+// (not in the preferences process). It's done this way as Clutter may not be installed //
+// on the system and therefore the preferences would crash.                             //
+//////////////////////////////////////////////////////////////////////////////////////////
+
 if (utils.isInShellProcess()) {
 
   const Clutter        = imports.gi.Clutter;