🚧 Start port to ESM

extension.js

@@ -14,11 +14,38 @@
 
 'use strict';
 
-const {Clutter, Gio, Meta} = imports.gi;
+import Gio from 'gi://Gio';
+import Meta from 'gi://Meta';
 
-const Main          = imports.ui.main;
-const Workspace     = imports.ui.workspace.Workspace;
-const WindowManager = imports.ui.windowManager.WindowManager;
+import {fromVersion26} from './src/migrate.js';
+import {ProfileManager} from './src/ProfileManager.js';
+import {WindowPicker} from './src/WindowPicker.js';
+import {getStringResource, shellVersionIs, shellVersionIsAtLeast} from './src/utils.js';
+
+import Apparition from './src/effects/Apparition.js';
+import BrokenGlass from './src/effects/BrokenGlass.js';
+import Doom from './src/effects/Doom.js';
+import EnergizeA from './src/effects/EnergizeA.js';
+import EnergizeB from './src/effects/EnergizeB.js';
+import Fire from './src/effects/Fire.js';
+import Glide from './src/effects/Glide.js';
+import Glitch from './src/effects/Glitch.js';
+import Hexagon from './src/effects/Hexagon.js';
+import Incinerate from './src/effects/Incinerate.js';
+import Matrix from './src/effects/Matrix.js';
+import PaintBrush from './src/effects/PaintBrush.js';
+import Pixelate from './src/effects/Pixelate.js';
+import PixelWheel from './src/effects/PixelWheel.js';
+import PixelWipe from './src/effects/PixelWipe.js';
+import Portal from './src/effects/Portal.js';
+import SnapOfDisintegration from './src/effects/SnapOfDisintegration.js';
+import TRexAttack from './src/effects/TRexAttack.js';
+import TVEffect from './src/effects/TVEffect.js';
+import TVGlitch from './src/effects/TVGlitch.js';
+import Wisps from './src/effects/Wisps.js';
+
+const Main      = imports.ui.main;
+const Workspace = imports.ui.workspace.Workspace;
 
 // The WindowPreview class is only available on GNOME Shell 3.38+;
 let WindowPreview = null;
@@ -30,10 +57,6 @@ try {
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const migrate        = Me.imports.src.migrate;
-const utils          = Me.imports.src.utils;
-const ProfileManager = Me.imports.src.ProfileManager.ProfileManager;
-const WindowPicker   = Me.imports.src.WindowPicker.WindowPicker;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This extensions modifies the window-close and window-open animations with all kinds  //
@@ -44,7 +67,7 @@ const WindowPicker   = Me.imports.src.WindowPicker.WindowPicker;
 // to get this working. For more details, read the other comments in this file...       //
 //////////////////////////////////////////////////////////////////////////////////////////
 
-class Extension {
+export default class Extension {
 
   // ------------------------------------------------------------------------ public stuff
 
@@ -54,27 +77,27 @@ class Extension {
 
     // New effects must be registered here and in prefs.js.
     this._ALL_EFFECTS = [
-      new Me.imports.src.effects.Apparition.Apparition(),
-      new Me.imports.src.effects.BrokenGlass.BrokenGlass(),
-      new Me.imports.src.effects.Doom.Doom(),
-      new Me.imports.src.effects.EnergizeA.EnergizeA(),
-      new Me.imports.src.effects.EnergizeB.EnergizeB(),
-      new Me.imports.src.effects.Fire.Fire(),
-      new Me.imports.src.effects.Glide.Glide(),
-      new Me.imports.src.effects.Glitch.Glitch(),
-      new Me.imports.src.effects.Hexagon.Hexagon(),
-      new Me.imports.src.effects.Incinerate.Incinerate(),
-      new Me.imports.src.effects.Matrix.Matrix(),
-      new Me.imports.src.effects.PaintBrush.PaintBrush(),
-      new Me.imports.src.effects.Pixelate.Pixelate(),
-      new Me.imports.src.effects.PixelWheel.PixelWheel(),
-      new Me.imports.src.effects.PixelWipe.PixelWipe(),
-      new Me.imports.src.effects.Portal.Portal(),
-      new Me.imports.src.effects.SnapOfDisintegration.SnapOfDisintegration(),
-      new Me.imports.src.effects.TRexAttack.TRexAttack(),
-      new Me.imports.src.effects.TVEffect.TVEffect(),
-      new Me.imports.src.effects.TVGlitch.TVGlitch(),
-      new Me.imports.src.effects.Wisps.Wisps(),
+      new Apparition(),
+      new BrokenGlass(),
+      new Doom(),
+      new EnergizeA(),
+      new EnergizeB(),
+      new Fire(),
+      new Glide(),
+      new Glitch(),
+      new Hexagon(),
+      new Incinerate(),
+      new Matrix(),
+      new PaintBrush(),
+      new Pixelate(),
+      new PixelWheel(),
+      new PixelWipe(),
+      new Portal(),
+      new SnapOfDisintegration(),
+      new TRexAttack(),
+      new TVEffect(),
+      new TVGlitch(),
+      new Wisps(),
     ];
 
     // Load all of our resources.
@@ -91,7 +114,7 @@ class Extension {
       if (lastVersion <= 26) {
         // If the profile migration fails for some reason, the callback will create a
         // default profile instead.
-        migrate.fromVersion26().finally(() => {
+        fromVersion26().finally(() => {
           this._loadProfiles();
           this._settings.set_int('last-extension-version', Me.metadata.version);
         });
@@ -122,14 +145,14 @@ class Extension {
 
     // This is used to get the battery state.
     const UPowerProxy = Gio.DBusProxy.makeProxyWrapper(
-      utils.getStringResource('/interfaces/org.freedesktop.UPower.xml'));
+      getStringResource('/interfaces/org.freedesktop.UPower.xml'));
     this._upowerProxy = new UPowerProxy(Gio.DBus.system, 'org.freedesktop.UPower',
                                         '/org/freedesktop/UPower');
 
     // This is used to get the current power profile.
     try {
       const PowerProfilesProxy = Gio.DBusProxy.makeProxyWrapper(
-        utils.getStringResource('/interfaces/net.hadess.PowerProfiles.xml'));
+        getStringResource('/interfaces/net.hadess.PowerProfiles.xml'));
       this._powerProfilesProxy = new PowerProfilesProxy(
         Gio.DBus.system, 'net.hadess.PowerProfiles', '/net/hadess/PowerProfiles');
     } catch (e) {
@@ -239,10 +262,10 @@ class Extension {
       // The parameters of this method changed a bit through the versions...
       let realWindow, container;
 
-      if (utils.shellVersionIs(3, 36)) {
+      if (shellVersionIs(3, 36)) {
         container  = clone[0];
         realWindow = container.realWindow;
-      } else if (utils.shellVersionIs(3, 38)) {
+      } else if (shellVersionIs(3, 38)) {
         container  = clone._windowContainer;
         realWindow = params[0].get_compositor_private();
       } else {
@@ -268,7 +291,7 @@ class Extension {
       // the overview window layout. Therefore we call this method in addition.
       // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/gnome-3-36/js/ui/workspace.js#L1877
       // https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/main/js/ui/workspace.js#L1363
-      if (utils.shellVersionIs(3, 36)) {
+      if (shellVersionIs(3, 36)) {
         container.connect('destroy', () => this._doRemoveWindow(container.metaWindow));
       }
 
@@ -501,7 +524,7 @@ class Extension {
         }
 
         // If the profile is still matching, we also check the color scheme.
-        if (matches && profileColorScheme != 0 && utils.shellVersionIsAtLeast(42, 0)) {
+        if (matches && profileColorScheme != 0 && shellVersionIsAtLeast(42, 0)) {
           const colorScheme = this._shellSettings.get_string('color-scheme');
           matches &= (profileColorScheme == 1 && colorScheme == 'default') ||
             (profileColorScheme == 2 && colorScheme == 'prefer-dark');
@@ -580,7 +603,7 @@ class Extension {
     // If we are in the overview, we have to enlarge the window's clone as well. We also
     // disable the clone's overlay (e.g. its icon, name, and close button) during the
     // animation.
-    if (actor._bmwOverviewClone && utils.shellVersionIsAtLeast(3, 38)) {
+    if (actor._bmwOverviewClone && shellVersionIsAtLeast(3, 38)) {
       actor._bmwOverviewClone.overlayEnabled = false;
       actor._bmwOverviewCloneContainer.set_pivot_point(0.5, 0.5);
       actor._bmwOverviewCloneContainer.scale_x = actorScale.x;
@@ -597,7 +620,7 @@ class Extension {
     const endID = shader.connect('end-animation', () => {
       shader.disconnect(endID);
 
-      if (actor._bmwOverviewClone && utils.shellVersionIsAtLeast(3, 38)) {
+      if (actor._bmwOverviewClone && shellVersionIsAtLeast(3, 38)) {
         actor._bmwOverviewClone.overlayEnabled   = true;
         actor._bmwOverviewCloneContainer.scale_x = 1.0;
         actor._bmwOverviewCloneContainer.scale_y = 1.0;
@@ -636,7 +659,7 @@ class Extension {
     }
 
     // This was called "realWindow" in GNOME 3.36.
-    const propertyName = utils.shellVersionIs(3, 36) ? 'realWindow' : '_windowActor';
+    const propertyName = shellVersionIs(3, 36) ? 'realWindow' : '_windowActor';
     const actor        = workspace._windows[index][propertyName];
     const shader       = actor.get_effect('burn-my-windows-effect');
 

metadata.json

@@ -10,13 +10,7 @@
     "gettext-domain": "burn-my-windows",
     "settings-schema": "org.gnome.shell.extensions.burn-my-windows",
     "shell-version": [
-        "3.36",
-        "3.38",
-        "40",
-        "41",
-        "42",
-        "43",
-        "44"
+        "45"
     ],
     "url": "https://github.com/Schneegans/Burn-My-Windows",
     "version": 36

prefs.js

@@ -14,12 +14,40 @@
 
 'use strict';
 
-const {Gio, Gtk, Gdk, GLib, GObject} = imports.gi;
+import Gio from 'gi://Gio';
+import Gtk from 'gi://Gtk';
+import GLib from 'gi://GLib';
+import Gdk from 'gi://Gdk';
+
+import {isADW, isGTK4, getUIDir, getStringResource, shellVersionIsAtLeast} from './utils.js';
+import {ProfileManager} from './ProfileManager.js';
+
+import Apparition from './src/effects/Apparition.js';
+import BrokenGlass from './src/effects/BrokenGlass.js';
+import Doom from './src/effects/Doom.js';
+import EnergizeA from './src/effects/EnergizeA.js';
+import EnergizeB from './src/effects/EnergizeB.js';
+import Fire from './src/effects/Fire.js';
+import Glide from './src/effects/Glide.js';
+import Glitch from './src/effects/Glitch.js';
+import Hexagon from './src/effects/Hexagon.js';
+import Incinerate from './src/effects/Incinerate.js';
+import Matrix from './src/effects/Matrix.js';
+import PaintBrush from './src/effects/PaintBrush.js';
+import Pixelate from './src/effects/Pixelate.js';
+import PixelWheel from './src/effects/PixelWheel.js';
+import PixelWipe from './src/effects/PixelWipe.js';
+import Portal from './src/effects/Portal.js';
+import SnapOfDisintegration from './src/effects/SnapOfDisintegration.js';
+import TRexAttack from './src/effects/TRexAttack.js';
+import TVEffect from './src/effects/TVEffect.js';
+import TVGlitch from './src/effects/TVGlitch.js';
+import Wisps from './src/effects/Wisps.js';
 
 // libadwaita is available starting with GNOME Shell 42.
 let Adw = null;
 try {
-  Adw = imports.gi.Adw;
+  Adw = await import('gi://Adw');
 } catch (e) {
   // Nothing to do.
 }
@@ -28,8 +56,6 @@ const _ = imports.gettext.domain('burn-my-windows').gettext;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ProfileManager = Me.imports.src.ProfileManager.ProfileManager;
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // The preferences dialog is organized in pages, each of which is loaded from a         //
@@ -37,35 +63,41 @@ const ProfileManager = Me.imports.src.ProfileManager.ProfileManager;
 // from the respective effects.                                                         //
 //////////////////////////////////////////////////////////////////////////////////////////
 
-var PreferencesDialog = class PreferencesDialog {
+export default class ExtensionPreferences {
 
   // ------------------------------------------------------------ constructor / destructor
 
+  // This is used for setting up the translations.
   constructor() {
+    ExtensionUtils.initTranslations();
+  }
+
+  fillPreferencesWindow(window) {
+    window.set_default_size(650, 750);
 
     // New effects must be registered here and in extension.js.
     this._ALL_EFFECTS = [
-      new Me.imports.src.effects.Apparition.Apparition(),
-      new Me.imports.src.effects.BrokenGlass.BrokenGlass(),
-      new Me.imports.src.effects.Doom.Doom(),
-      new Me.imports.src.effects.EnergizeA.EnergizeA(),
-      new Me.imports.src.effects.EnergizeB.EnergizeB(),
-      new Me.imports.src.effects.Fire.Fire(),
-      new Me.imports.src.effects.Glide.Glide(),
-      new Me.imports.src.effects.Glitch.Glitch(),
-      new Me.imports.src.effects.Hexagon.Hexagon(),
-      new Me.imports.src.effects.Incinerate.Incinerate(),
-      new Me.imports.src.effects.Matrix.Matrix(),
-      new Me.imports.src.effects.PaintBrush.PaintBrush(),
-      new Me.imports.src.effects.Pixelate.Pixelate(),
-      new Me.imports.src.effects.PixelWheel.PixelWheel(),
-      new Me.imports.src.effects.PixelWipe.PixelWipe(),
-      new Me.imports.src.effects.Portal.Portal(),
-      new Me.imports.src.effects.SnapOfDisintegration.SnapOfDisintegration(),
-      new Me.imports.src.effects.TRexAttack.TRexAttack(),
-      new Me.imports.src.effects.TVEffect.TVEffect(),
-      new Me.imports.src.effects.TVGlitch.TVGlitch(),
-      new Me.imports.src.effects.Wisps.Wisps(),
+      new Apparition(),
+      new BrokenGlass(),
+      new Doom(),
+      new EnergizeA(),
+      new EnergizeB(),
+      new Fire(),
+      new Glide(),
+      new Glitch(),
+      new Hexagon(),
+      new Incinerate(),
+      new Matrix(),
+      new PaintBrush(),
+      new Pixelate(),
+      new PixelWheel(),
+      new PixelWipe(),
+      new Portal(),
+      new SnapOfDisintegration(),
+      new TRexAttack(),
+      new TVEffect(),
+      new TVGlitch(),
+      new Wisps(),
     ];
 
     // Load all of our resources.
@@ -74,9 +106,9 @@ var PreferencesDialog = class PreferencesDialog {
 
     // Load the CSS file for the settings dialog. If using libadwaita, we do not need an
     // additional style sheet.
-    if (!utils.isADW()) {
+    if (!isADW()) {
       const provider = Gtk.CssProvider.new();
-      if (utils.isGTK4()) {
+      if (isGTK4()) {
         provider.load_from_resource('/css/gtk4.css');
         Gtk.StyleContext.add_provider_for_display(
           Gdk.Display.get_default(), provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
@@ -88,7 +120,7 @@ var PreferencesDialog = class PreferencesDialog {
     }
 
     // Make sure custom icons are found.
-    if (utils.isGTK4()) {
+    if (isGTK4()) {
       Gtk.IconTheme.get_for_display(Gdk.Display.get_default()).add_resource_path('/img');
     } else {
       Gtk.IconTheme.get_default().add_resource_path('/img');
@@ -97,7 +129,7 @@ var PreferencesDialog = class PreferencesDialog {
     // Load the general user interface files.
     this._builder = new Gtk.Builder();
     this._builder.add_from_resource(`/ui/common/menus.ui`);
-    this._builder.add_from_resource(`/ui/${utils.getUIDir()}/prefs.ui`);
+    this._builder.add_from_resource(`/ui/${getUIDir()}/prefs.ui`);
 
     // Store a reference to the general settings object.
     this._settings = ExtensionUtils.getSettings();
@@ -119,7 +151,7 @@ var PreferencesDialog = class PreferencesDialog {
     let hasPowerProfiles = false;
     try {
       const PowerProfilesProxy = Gio.DBusProxy.makeProxyWrapper(
-        utils.getStringResource('/interfaces/net.hadess.PowerProfiles.xml'));
+        getStringResource('/interfaces/net.hadess.PowerProfiles.xml'));
       let powerProfilesProxy = new PowerProfilesProxy(
         Gio.DBus.system, 'net.hadess.PowerProfiles', '/net/hadess/PowerProfiles');
 
@@ -129,7 +161,7 @@ var PreferencesDialog = class PreferencesDialog {
     }
 
     let powerProfileRow = this._builder.get_object('profile-power-profile');
-    if (!utils.isADW()) {
+    if (!isADW()) {
       powerProfileRow = powerProfileRow.get_parent().get_parent();
     }
     powerProfileRow.set_visible(hasPowerProfiles);
@@ -137,10 +169,10 @@ var PreferencesDialog = class PreferencesDialog {
     // The global color scheme is only available starting with GNOME Shell 42. We hide the
     // corresponding settings row on older versions.
     let colorSchemeRow = this._builder.get_object('profile-color-scheme');
-    if (!utils.isADW()) {
+    if (!isADW()) {
       colorSchemeRow = colorSchemeRow.get_parent().get_parent();
     }
-    colorSchemeRow.set_visible(utils.shellVersionIsAtLeast(42, 0));
+    colorSchemeRow.set_visible(shellVersionIsAtLeast(42, 0));
 
     // Wire up the window picker of the profile editor. Whenever the app-chooser button is
     // clicked, we call a method of the extension which will initiate the window picking.
@@ -181,7 +213,7 @@ var PreferencesDialog = class PreferencesDialog {
     // If using libadwaita, the visibility of the profile-editor Adw.Flap is controlled
     // using bindings in the ui file. On GTK3 and GTK4 we have to wire up this toggling
     // here since we are using a Gtk.Stack instead of an Adw.Flap.
-    if (!utils.isADW()) {
+    if (!isADW()) {
       const profileEditorButton = this._builder.get_object('edit-profile-button');
       profileEditorButton.connect('toggled', b => {
         if (b.active) {
@@ -204,7 +236,7 @@ var PreferencesDialog = class PreferencesDialog {
     // accordion-like behavior of the effect settings.
     this._effectRows = [];
 
-    if (!utils.isADW()) {
+    if (!isADW()) {
       group.connect('row-activated', (g, row) => {
         this._effectRows.forEach(r => {
           if (r == row) {
@@ -226,9 +258,9 @@ var PreferencesDialog = class PreferencesDialog {
     // Now add all the rows.
     this._ALL_EFFECTS.forEach(effect => {
       const [minMajor, minMinor] = effect.getMinShellVersion();
-      if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
+      if (shellVersionIsAtLeast(minMajor, minMinor)) {
 
-        const uiFile = `/ui/${utils.getUIDir()}/${effect.getNick()}.ui`;
+        const uiFile = `/ui/${getUIDir()}/${effect.getNick()}.ui`;
 
         // Is there a better way to test for the existence of a resource file?
         let hasPrefs = false;
@@ -246,7 +278,7 @@ var PreferencesDialog = class PreferencesDialog {
 
         // The preview button.
         let previewButton;
-        if (utils.isGTK4()) {
+        if (isGTK4()) {
           previewButton = Gtk.Button.new_from_icon_name('bmw-preview-symbolic');
         } else {
           previewButton = Gtk.Button.new_from_icon_name('bmw-preview-symbolic', 1);
@@ -264,14 +296,14 @@ var PreferencesDialog = class PreferencesDialog {
         button.set_valign(Gtk.Align.CENTER);
         this._builder.expose_object(`${effect.getNick()}-enable-effect`, button);
 
-        if (utils.isADW()) {
+        if (isADW()) {
 
           let row;
           if (hasPrefs) {
 
             // Add the effect's preferences (if any).
             row = this._builder.get_object(`${effect.getNick()}-prefs`);
-          } else if (utils.isADW()) {
+          } else if (isADW()) {
             row = Adw.ActionRow.new();
           }
 
@@ -341,7 +373,7 @@ var PreferencesDialog = class PreferencesDialog {
             row.set_activatable(false);
           }
 
-          if (utils.isGTK4()) {
+          if (isGTK4()) {
             row.set_child(container);
             group.append(row);
           } else {
@@ -355,7 +387,7 @@ var PreferencesDialog = class PreferencesDialog {
     // Some things can only be done once the widget is shown as we do not have access to
     // the toplevel widget before.
     this._widget.connect('realize', (widget) => {
-      const window = utils.isGTK4() ? widget.get_root() : widget.get_toplevel();
+      const window = isGTK4() ? widget.get_root() : widget.get_toplevel();
 
       // Show the version number in the title bar.
       window.set_title(`Burn-My-Windows ${Me.metadata.version}`);
@@ -371,7 +403,7 @@ var PreferencesDialog = class PreferencesDialog {
           GLib.timeout_add(GLib.PRIORITY_DEFAULT, 2000, () => {
             this._showUpdateInfoTimeout = 0;
 
-            if (utils.isADW()) {
+            if (isADW()) {
               const toast = Adw.Toast.new(_('Burn-My-Windows has been updated!'));
               toast.set_button_label(_('View Changelog'));
               toast.set_action_name('prefs.changelog');
@@ -436,7 +468,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
               }
             ]);
 
-          if (utils.isGTK4()) {
+          if (isGTK4()) {
             dialog.show();
           } else {
             dialog.show_all();
@@ -455,7 +487,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
 
         // Starting with GNOME Shell 42, we have to hack our way through the widget tree
         // of the Adw.PreferencesWindow...
-        if (utils.isADW()) {
+        if (isADW()) {
           const header = this._findWidgetByType(window.get_content(), Adw.HeaderBar);
           header.pack_start(menu);
           header.set_title_widget(this._builder.get_object('profile-button'));
@@ -479,7 +511,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
 
           flap.set_content(scrolledWindow);
 
-        } else if (utils.isGTK4()) {
+        } else if (isGTK4()) {
           window.get_titlebar().pack_start(menu);
           window.get_titlebar().set_title_widget(
             this._builder.get_object('profile-button'));
@@ -537,7 +569,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
           let dialog;
 
           // We try to use the special Adw.AboutWindow if it is available.
-          if (utils.isADW() && Adw.AboutWindow) {
+          if (isADW() && Adw.AboutWindow) {
             let formatSponsors = (sponsors) => {
               return sponsors.map(s => {
                 if (s.url == '')
@@ -608,7 +640,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
           dialog.set_website('https://github.com/Schneegans/Burn-My-Windows');
           dialog.set_license_type(Gtk.License.GPL_3_0);
 
-          if (utils.isGTK4()) {
+          if (isGTK4()) {
             dialog.show();
           } else {
             dialog.show_all();
@@ -698,9 +730,11 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
     });
 
     // Show the widgets on GTK3.
-    if (!utils.isGTK4()) {
+    if (!isGTK4()) {
       this._widget.show_all();
     }
+
+    window.add(this._widget);
   }
 
   // -------------------------------------------------------------------- public interface
@@ -716,11 +750,6 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
     return this._activeProfile.settings;
   }
 
-  // Returns the widget used for the settings of this extension.
-  getWidget() {
-    return this._widget;
-  }
-
   // Connects an Adw.ComboRow (or anything else which has an 'selected' property) to a
   // settings key. It also binds the corresponding reset button.
   bindComboRow(settingsKey) {
@@ -790,7 +819,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
 
   // Appends the given child widget to the given Gtk.Box.
   gtkBoxAppend(box, child) {
-    if (utils.isGTK4()) {
+    if (isGTK4()) {
       box.append(child);
     } else {
       box.pack_start(child, false, true, 0);
@@ -836,7 +865,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
 
     this.bindEntry('profile-app');
 
-    if (utils.isADW()) {
+    if (isADW()) {
       this.bindComboRow('profile-animation-type');
       this.bindComboRow('profile-window-type');
       this.bindComboRow('profile-color-scheme');
@@ -854,7 +883,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
     // Connect all effect settings.
     this._ALL_EFFECTS.forEach(effect => {
       const [minMajor, minMinor] = effect.getMinShellVersion();
-      if (utils.shellVersionIsAtLeast(minMajor, minMinor)) {
+      if (shellVersionIsAtLeast(minMajor, minMinor)) {
         this.bindSwitch(`${effect.getNick()}-enable-effect`);
         effect.bindPreferences(this);
       }
@@ -935,7 +964,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
   // Reads the contents of a JSON file contained in the global resources archive. The data
   // is parsed and returned as a JavaScript object / array.
   _getJSONResource(path) {
-    return JSON.parse(utils.getStringResource(path));
+    return JSON.parse(getStringResource(path));
   }
 
   // This traverses the widget tree below the given parent recursively and returns the
@@ -967,12 +996,11 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
       default_width: 800,
       default_height: 450,
       modal: true,
-      transient_for: utils.isGTK4() ? this._widget.get_root() :
-                                      this._widget.get_toplevel()
+      transient_for: isGTK4() ? this._widget.get_root() : this._widget.get_toplevel()
     });
 
     // Add a header bar to the window.
-    if (utils.isGTK4()) {
+    if (isGTK4()) {
       const header = Gtk.HeaderBar.new();
       window.set_titlebar(header);
     }
@@ -998,7 +1026,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
     this.gtkBoxAppend(box, image);
     this.gtkBoxAppend(box, label);
 
-    if (utils.isGTK4()) {
+    if (isGTK4()) {
       window.set_child(box);
       window.show();
     } else {
@@ -1015,7 +1043,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
   _createMessageDialog(title, message, window, buttons) {
     let dialog;
 
-    if (utils.isADW() && Adw.MessageDialog) {
+    if (isADW() && Adw.MessageDialog) {
       dialog = new Adw.MessageDialog({
         heading: title,
         body: message,
@@ -1056,7 +1084,7 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
       });
     }
 
-    if (utils.isGTK4()) {
+    if (isGTK4()) {
       dialog.set_hide_on_close(true);
     }
 
@@ -1078,25 +1106,3 @@ GitHub: <a href='https://github.com/sponsors/schneegans'>https://github.com/spon
     return dialog;
   }
 }
-
-// This is used for setting up the translations.
-function init() {
-  ExtensionUtils.initTranslations();
-}
-
-// This function is called when the preferences window is created to build and return a
-// Gtk widget. We create a new instance of the PreferencesDialog class each time this
-// method is called. This way we can actually open multiple settings windows and interact
-// with all of them properly.
-function buildPrefsWidget() {
-  var dialog = new PreferencesDialog();
-  return dialog.getWidget();
-}
-
-// If using libadwaita, this method is called. In this case, the primary widget of the
-// preferences dialog is an Adw.PreferencesPage, which we directly add to the window.
-function fillPreferencesWindow(window) {
-  window.set_default_size(650, 750);
-  var dialog = new PreferencesDialog();
-  window.add(dialog.getWidget());
-}

src/ProfileManager.js

@@ -12,15 +12,14 @@
 // SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
 // SPDX-License-Identifier: GPL-3.0-or-later
 
-'use strict';
+//'use strict';
 
-const {Gio, GLib, GObject} = imports.gi;
+import Gio from 'gi://Gio';
+import GLib from 'gi://GLib';
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
+const Me = imports.misc.extensionUtils.getCurrentExtension();
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // Burn-My-Windows allows applying different sets of effect settings under specific     //
@@ -31,7 +30,7 @@ const utils          = Me.imports.src.utils;
 // via Gio.Settings objects.                                                            //
 //////////////////////////////////////////////////////////////////////////////////////////
 
-var ProfileManager = class {
+export class ProfileManager {
   // ------------------------------------------------------------------------- constructor
 
   constructor() {

src/Shader.js

@@ -14,13 +14,13 @@
 
 'use strict';
 
-const {Gio, Shell, GObject, Clutter, Meta} = imports.gi;
-const ByteArray                            = imports.byteArray;
+import Gio from 'gi://Gio';
+import Shell from 'gi://Shell';
+import GObject from 'gi://GObject';
+import Clutter from 'gi://Clutter';
+import Meta from 'gi://Meta';
 
-const Main           = imports.ui.main;
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
+import {shellVersionIsAtLeast, getStringResource} from './utils.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This is the base class for all shaders of Burn-My-Windows. It automagically loads    //
@@ -47,7 +47,7 @@ const utils          = Me.imports.src.utils;
 //                         used to clean up any resources.
 //////////////////////////////////////////////////////////////////////////////////////////
 
-var Shader = GObject.registerClass(
+export var Shader = GObject.registerClass(
   {
     Signals: {
       'begin-animation': {
@@ -186,7 +186,7 @@ var Shader = GObject.registerClass(
       // to undo this. It is a pity that we have to do this here, as it is not really
       // required to be done each frame. But it's the only place where we can do it.
       // https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2650
-      if (utils.shellVersionIsAtLeast(44, 2)) {
+      if (shellVersionIsAtLeast(44, 2)) {
         this.get_pipeline().set_blend(
           'RGBA = ADD (SRC_COLOR * (SRC_COLOR[A]), DST_COLOR * (1-SRC_COLOR[A]))');
       }
@@ -197,18 +197,11 @@ var Shader = GObject.registerClass(
 
     // --------------------------------------------------------------------- private stuff
 
-    // This loads the file at 'path' contained in the extension's resources to a
-    // JavaScript string.
-    _loadStringResource(path) {
-      const data = Gio.resources_lookup_data(path, 0);
-      return ByteArray.toString(ByteArray.fromGBytes(data));
-    }
-
     // This loads a GLSL file from the extension's resources to a JavaScript string. The
     // code from "common.glsl" is prepended automatically.
     _loadShaderResource(path) {
-      let common = this._loadStringResource('/shaders/common.glsl');
-      let code   = this._loadStringResource(path);
+      let common = getStringResource('/shaders/common.glsl');
+      let code   = getStringResource(path);
 
       // Add a trailing newline. Else the GLSL compiler complains...
       return common + '\n' + code + '\n';

src/ShaderFactory.js

@@ -14,10 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
+import {Shader} from './Shader.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // Each effect of Burn-My-Windows owns an instance of this class. It is used to created //
@@ -25,7 +24,7 @@ const Me             = imports.misc.extensionUtils.getCurrentExtension();
 // possible in order to avoid memory leaks.                                             //
 //////////////////////////////////////////////////////////////////////////////////////////
 
-var ShaderFactory = class {
+export class ShaderFactory {
 
   // Creates a new ShaderFactory. Requires the nick of the effect and a callback function
   // which will be called whenever a new shader is created.
@@ -62,8 +61,7 @@ var ShaderFactory = class {
       // Only try to register the new type once.
       if (GObject.type_from_name(typeName) == null) {
         const outerThis = this;
-        GObject.registerClass({GTypeName: typeName},
-                              class Shader extends Me.imports.src.Shader.Shader {
+        GObject.registerClass({GTypeName: typeName}, class ShaderImp extends Shader {
           // This will actually load the GLSL source code from the resources.
           _init() {
             super._init(outerThis._nick);

src/WindowPicker.js

@@ -15,12 +15,13 @@
 
 'use strict';
 
-const {Gio, GLib}  = imports.gi;
+import Gio from 'gi://Gio';
+import GLib from 'gi://GLib';
+
 const Main         = imports.ui.main;
 const LookingGlass = imports.ui.lookingGlass;
 
-const Me    = imports.misc.extensionUtils.getCurrentExtension();
-const utils = Me.imports.src.utils;
+import {getStringResource} from './utils.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This is based on the window-picking functionality of the Blur-My-Shell extension.    //
@@ -29,12 +30,12 @@ const utils = Me.imports.src.utils;
 // picking.                                                                             //
 //////////////////////////////////////////////////////////////////////////////////////////
 
-var WindowPicker = class WindowPicker {
+export class WindowPicker {
   // ------------------------------------------------------------------------- constructor
 
   constructor() {
-    const iFace = utils.getStringResource(
-      '/interfaces/org.gnome.shell.extensions.burn-my-windows.xml');
+    const iFace =
+      getStringResource('/interfaces/org.gnome.shell.extensions.burn-my-windows.xml');
     this._dbus = Gio.DBusExportedObject.wrapJSObject(iFace, this);
   }
 

src/effects/Apparition.js

@@ -16,10 +16,7 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect hides the actor by violently sucking it into the void of magic.          //
@@ -28,7 +25,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Apparition = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/BrokenGlass.js

@@ -16,10 +16,7 @@
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect shatters the window into pieces. For an explanation how this works, look //
@@ -40,7 +37,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var BrokenGlass = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/Doom.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect melts your windows. Inspired by the legendary screen transitions of the  //
@@ -31,7 +26,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Doom = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/EnergizeA.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect looks a bit like the transporter effect from TOS.                        //
@@ -30,7 +25,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var EnergizeA = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/EnergizeB.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect looks a bit like the transporter effect from TNG.                        //
@@ -30,7 +25,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var EnergizeB = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/Fire.js

@@ -14,14 +14,11 @@
 
 'use strict';
 
-const {Gio} = imports.gi;
+import Gio from 'gi://Gio';
 
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect is a homage to the good old Compiz days. However, it is implemented      //
@@ -34,8 +31,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Fire = class {
-
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/Glide.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This very simple effect fades the window to transparency with subtle 3D effects.     //
@@ -30,7 +25,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Glide = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/Glitch.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect applies some intentional graphics issues to your windows.                //
@@ -30,7 +25,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Glitch = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/Hexagon.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect overlays a glowing hexagonal grid over the window. The grid cells then   //
@@ -31,7 +26,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Hexagon = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/Incinerate.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect burns windows to ashes. The fire starts at a random position at the      //
@@ -31,7 +26,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Incinerate = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/Matrix.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // The Matrix shader multiplies a grid of random letters with some gradients which are  //
@@ -34,7 +29,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Matrix = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/PaintBrush.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect paints your windows with a thick paint brush.                            //
@@ -32,7 +27,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var PaintBrush = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/PixelWheel.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This simple effect pixelates the window texture and hides the pixels in a wheel-like //
@@ -31,7 +26,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var PixelWheel = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/PixelWipe.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect pixelates the window texture and hides the pixels radially, starting     //
@@ -31,7 +26,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var PixelWipe = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/Pixelate.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This very simple effect pixelates the window texture and randomly hides pixels until //
@@ -31,7 +26,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Pixelate = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/Portal.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This ridiculous effect teleports your windows from and to alternative dimensions.    //
@@ -31,7 +26,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Portal = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/SnapOfDisintegration.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effects dissolves your windows into a cloud of dust. For this, it uses an       //
@@ -36,7 +31,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var SnapOfDisintegration = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/TRexAttack.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect tears your windows apart with a series of violent scratches!             //
@@ -32,7 +27,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var TRexAttack = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/TVEffect.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect hides the actor by making it first transparent from top and bottom       //
@@ -32,7 +27,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var TVEffect = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/TVGlitch.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect combines the Glitch and the TV Effect. Credits go to Kurt Wilson         //
@@ -31,7 +26,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var TVGlitch = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/effects/Wisps.js

@@ -14,14 +14,9 @@
 
 'use strict';
 
-const GObject = imports.gi.GObject;
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const utils          = Me.imports.src.utils;
-const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
+import {ShaderFactory} from '../ShaderFactory.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This effect lets your windows be carried to the realm of dreams by some little       //
@@ -31,7 +26,7 @@ const ShaderFactory  = Me.imports.src.ShaderFactory.ShaderFactory;
 // The effect class can be used to get some metadata (like the effect's name or supported
 // GNOME Shell versions), to initialize the respective page of the settings dialog, as
 // well as to create the actual shader for the effect.
-var Wisps = class {
+export default class Effect {
 
   // The constructor creates a ShaderFactory which will be used by extension.js to create
   // shader instances for this effect. The shaders will be automagically created using the

src/migrate.js

@@ -14,18 +14,15 @@
 
 'use strict';
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const ProfileManager = Me.imports.src.ProfileManager.ProfileManager;
-const utils          = Me.imports.src.utils;
+import {ProfileManager} from './ProfileManager.js';
+import {debug, executeCommand} from './utils.js';
 
 // Migrating from pre-27 versions is pretty involved. Before, all settings were stored in
 // the standard Gio.Settings backend. Now, there are effect profiles. Depending on the
 // settings one or two profiles may be required.
-async function fromVersion26() {
-  return utils
-    .executeCommand(['dconf', 'dump', '/org/gnome/shell/extensions/burn-my-windows/'])
-    .catch(r => utils.debug('Failed to get old settings for effect migration: ' + r))
+export async function fromVersion26() {
+  return executeCommand(['dconf', 'dump', '/org/gnome/shell/extensions/burn-my-windows/'])
+    .catch(r => debug('Failed to get old settings for effect migration: ' + r))
     .then(r => {
       // If there were no settings before, we do not have to migrate anything. Just use
       // the new defaults.
@@ -33,7 +30,7 @@ async function fromVersion26() {
         return;
       }
 
-      utils.debug('Starting Burn-My-Windows profile migration (old version <= 26)!');
+      debug('Starting Burn-My-Windows profile migration (old version <= 26)!');
 
       // We use this to write the new profiles.
       const profileManager = new ProfileManager();
@@ -41,19 +38,19 @@ async function fromVersion26() {
       // The default value of this was false, so not-present is equal to false.
       const destroyDialogs = r.includes('destroy-dialogs=true');
       if (!destroyDialogs) {
-        utils.debug('Only normal windows will be burned by the new profile(s).');
+        debug('Only normal windows will be burned by the new profile(s).');
       }
 
       // The default value of this was false, so not-present is equal to false.
       const disableOnBattery = r.includes('disable-on-battery=true');
       if (disableOnBattery) {
-        utils.debug('The new profile(s) will not be active on battery.');
+        debug('The new profile(s) will not be active on battery.');
       }
 
       // The default value of this was false, so not-present is equal to false.
       const disableOnPowerSave = r.includes('disable-on-power-save=true');
       if (disableOnPowerSave) {
-        utils.debug('The new profile(s) will not be active in power-save mode.');
+        debug('The new profile(s) will not be active in power-save mode.');
       }
 
       // Remove some unnecessary lines.
@@ -88,21 +85,21 @@ async function fromVersion26() {
       }
 
       // Print all effects we've found.
-      utils.debug('Enabled open effects: ' + openEffects);
-      utils.debug('Enabled close effects: ' + closeEffects);
+      debug('Enabled open effects: ' + openEffects);
+      debug('Enabled close effects: ' + closeEffects);
 
       // If the same effects were used for opening and closing windows or there is either
       // no opening or no closing animation configured, only one profile is required. Else
       // we have to create two new profiles.
       const numProfiles = openEffects.join() == closeEffects.join() ? 1 : 2;
       if (numProfiles == 1) {
-        utils.debug('Only one profile is required.');
+        debug('Only one profile is required.');
       } else if (closeEffects.length == 0) {
-        utils.debug('Only a window-open profile is required.');
+        debug('Only a window-open profile is required.');
       } else if (openEffects.length == 0) {
-        utils.debug('Only a window-close profile is required.');
+        debug('Only a window-close profile is required.');
       } else {
-        utils.debug('Two profiles are required.');
+        debug('Two profiles are required.');
       }
 
       // Remove all open / close lines.
@@ -143,8 +140,8 @@ async function fromVersion26() {
         // Print and save the new profile.
         const profile = profileLines.join('\n');
 
-        utils.debug('The new profile:');
-        utils.debug(profile);
+        debug('The new profile:');
+        debug(profile);
 
         profileManager.createProfile(profile);
 
@@ -165,8 +162,8 @@ async function fromVersion26() {
         // Print and save the new profile.
         const profile = profileLines.join('\n');
 
-        utils.debug('The new window-open profile:');
-        utils.debug(profile);
+        debug('The new window-open profile:');
+        debug(profile);
 
         profileManager.createProfile(profile);
 
@@ -187,8 +184,8 @@ async function fromVersion26() {
         // Print and save the new profile.
         const profile = profileLines.join('\n');
 
-        utils.debug('The new window-close profile:');
-        utils.debug(profile);
+        debug('The new window-close profile:');
+        debug(profile);
 
         profileManager.createProfile(profile);
 
@@ -216,14 +213,14 @@ async function fromVersion26() {
         const openProfile  = openProfileLines.join('\n');
         const closeProfile = closeProfileLines.join('\n');
 
-        utils.debug('The new open-window profile:');
-        utils.debug(openProfile);
-        utils.debug('The new close-window profile:');
-        utils.debug(closeProfile);
+        debug('The new open-window profile:');
+        debug(openProfile);
+        debug('The new close-window profile:');
+        debug(closeProfile);
 
         profileManager.createProfile(openProfile);
         profileManager.createProfile(closeProfile);
       }
     })
-    .catch(r => utils.debug('Failed to migrate settings: ' + r));
+    .catch(r => debug('Failed to migrate settings: ' + r));
 }

src/utils.js

@@ -14,13 +14,14 @@
 
 'use strict';
 
-const {Gtk, Gio} = imports.gi;
-const ByteArray  = imports.byteArray;
+import Gio from 'gi://Gio';
+import Gtk from 'gi://Gtk';
+import GLib from 'gi://GLib';
 
 // libadwaita is available starting with GNOME Shell 42.
 let Adw = null;
 try {
-  Adw = imports.gi.Adw;
+  Adw = await import('gi://Adw');
 } catch (e) {
   // Nothing to do.
 }
@@ -39,12 +40,10 @@ function toNumericVersion(x) {
   return x;
 }
 
+const Me                   = imports.misc.extensionUtils.getCurrentExtension();
 const Config               = imports.misc.config;
 const [GS_MAJOR, GS_MINOR] = Config.PACKAGE_VERSION.split('.').map(toNumericVersion);
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-
 const _ = imports.gettext.domain('burn-my-windows').gettext;
 
 // This method can be used to write a message to GNOME Shell's log. This is enhances
@@ -54,7 +53,7 @@ const _ = imports.gettext.domain('burn-my-windows').gettext;
 // journalctl -f -o cat | grep -E 'particle-effects|'
 // This method is based on a similar script from the Fly-Pie GNOME Shell extension which
 // os published under the MIT License (https://github.com/Schneegans/Fly-Pie).
-function debug(message) {
+export function debug(message) {
   const stack = new Error().stack.split('\n');
 
   // Remove debug() function call from stack.
@@ -68,31 +67,31 @@ function debug(message) {
 }
 
 // This method simply returns true if we are currently using GTK4.
-function isGTK4() {
+export function isGTK4() {
   return Gtk.get_major_version() == 4;
 }
 
 // Starting with GNOME Shell 42, the settings dialog uses libadwaita (at least most of
 // the time - it seems that pop!_OS does not support libadwaita even on GNOME 42).
-function isADW() {
+export function isADW() {
   return Adw && shellVersionIsAtLeast(42, 'beta');
 }
 
 // This method returns 'gtk3', 'gtk4', or 'adw' depending on the currently used GTK / and
 // or libadwaita version.
-function getUIDir() {
+export function getUIDir() {
   return isADW() ? 'adw' : (isGTK4() ? 'gtk4' : 'gtk3');
 }
 
 // This method returns true if the current GNOME Shell version matches the given
 // arguments.
-function shellVersionIs(major, minor) {
+export function shellVersionIs(major, minor) {
   return GS_MAJOR == major && GS_MINOR == toNumericVersion(minor);
 }
 
 // This method returns true if the current GNOME Shell version is at least as high as the
 // given arguments. Supports "alpha" and "beta" for the minor version number.
-function shellVersionIsAtLeast(major, minor) {
+export function shellVersionIsAtLeast(major, minor) {
   if (GS_MAJOR > major) {
     return true;
   }
@@ -106,9 +105,9 @@ function shellVersionIsAtLeast(major, minor) {
 
 // Reads the contents of a file contained in the global resources archive. The data
 // is returned as a string.
-function getStringResource(path) {
+export function getStringResource(path) {
   const data = Gio.resources_lookup_data(path, 0);
-  return ByteArray.toString(ByteArray.fromGBytes(data));
+  return new TextDecoder().decode(data.get_data());
 }
 
 // Executes a command asynchronously and returns the output from 'stdout' on success or
@@ -116,7 +115,7 @@ function getStringResource(path) {
 // 'stdin' and cancellable can be used to stop the process before it finishes.
 // This is directly taken from here:
 // https://gjs.guide/guides/gio/subprocesses.html#complete-examples
-async function executeCommand(argv, input = null, cancellable = null) {
+export async function executeCommand(argv, input = null, cancellable = null) {
   let cancelId = 0;
   let flags    = (Gio.SubprocessFlags.STDOUT_PIPE | Gio.SubprocessFlags.STDERR_PIPE);