Breaking: Migrate extension to the new ESM system of GNOME 45

Migrate with the help of, among others, the following resources:
https://blogs.gnome.org/shell-dev/2023/09/02/extensions-in-gnome-45/
https://gjs.guide/extensions/upgrading/gnome-shell-45.html

Only support GNOME Shell version 45, since only 45 is compatible with
the new ESM system.

Since panel._originalAddToPanelBox is no longer valid, just overwrite
using the prototype on disable.

Add "sourceType": "module" to eslintrc.yml to get rid of:
"Parsing error: 'import' and 'export' may appear only with 'sourceType:
module'"
See here:
https://eslint.org/docs/latest/use/configure/language-options#specifying-parser-options

.eslintrc.yml

@@ -3,6 +3,7 @@ env:
 extends: 'eslint:recommended'
 parserOptions:
   ecmaVersion: 2022
+  sourceType: module
 rules:
   indent:
     - error
@@ -49,5 +50,4 @@ rules:
     - error
     - always
 globals:
-  imports: readonly
   log: readonly

src/extension.js

@@ -1,22 +1,16 @@
 "use strict";
-/* exported init */
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me = ExtensionUtils.getCurrentExtension();
+import * as Main from "resource:///org/gnome/shell/ui/main.js";
+import * as Panel from "resource:///org/gnome/shell/ui/panel.js";
+import { Extension } from "resource:///org/gnome/shell/extensions/extension.js";
 
-const Main = imports.ui.main;
-const Panel = imports.ui.panel;
-
-const BoxOrderManager = Me.imports.extensionModules.BoxOrderManager;
-
-class Extension {
-    constructor() {
-    }
+import BoxOrderManager from "./extensionModules/BoxOrderManager.js";
 
+export default class TopBarOrganizerExtension extends Extension {
     enable() {
-        this._settings = ExtensionUtils.getSettings();
+        this._settings = this.getSettings();
 
-        this._boxOrderManager = new BoxOrderManager.BoxOrderManager();
+        this._boxOrderManager = new BoxOrderManager({}, this._settings);
 
         /// Stuff to do on startup(extension enable).
         // Initially handle new top bar items and order top bar boxes.
@@ -46,7 +40,7 @@ class Extension {
         // Revert the overwrite of `Panel._addToPanelBox`.
         Panel.Panel.prototype._addToPanelBox = Panel.Panel.prototype._originalAddToPanelBox;
         // Set `Panel._originalAddToPanelBox` to `undefined`.
-        Panel._originalAddToPanelBox = undefined;
+        Panel.Panel.prototype._originalAddToPanelBox = undefined;
 
         // Disconnect signals.
         for (const handlerId of this._settingsHandlerIds) {
@@ -177,7 +171,3 @@ class Extension {
         // top bar items at the beginning of this method, this isn't a concern.
     }
 }
-
-function init() {
-    return new Extension();
-}

src/extensionModules/BoxOrderManager.js

@@ -1,11 +1,8 @@
 "use strict";
-/* exported BoxOrderManager */
 
-const GObject = imports.gi.GObject;
+import GObject from "gi://GObject";
 
-const ExtensionUtils = imports.misc.extensionUtils;
-
-const Main = imports.ui.main;
+import * as Main from "resource:///org/gnome/shell/ui/main.js";
 
 /**
  * This class provides methods get, set and interact with box orders, while
@@ -13,7 +10,7 @@ const Main = imports.ui.main;
  * what is really useable by the other extension code.
  * It's basically a heavy wrapper around the box orders stored in the settings.
  */
-var BoxOrderManager = GObject.registerClass({
+const BoxOrderManager = GObject.registerClass({
     Signals: {
         "appIndicatorReady": {}
     }
@@ -22,13 +19,13 @@ var BoxOrderManager = GObject.registerClass({
     #appIndicatorItemApplicationRoleMap;
     #settings;
 
-    constructor(params = {}) {
+    constructor(params = {}, settings) {
         super(params);
 
         this.#appIndicatorReadyHandlerIdMap = new Map();
         this.#appIndicatorItemApplicationRoleMap = new Map();
 
-        this.#settings = ExtensionUtils.getSettings();
+        this.#settings = settings;
     }
 
     /**
@@ -271,3 +268,5 @@ var BoxOrderManager = GObject.registerClass({
         saveBoxOrderToSettings(boxOrders.right, "right");
     }
 });
+
+export default BoxOrderManager;

src/metadata.json

@@ -3,7 +3,7 @@
     "name": "Top Bar Organizer",
     "description": "Organize the items of the top (menu)bar.",
     "version": 9,
-    "shell-version": [ "42", "43", "44" ],
+    "shell-version": [ "45" ],
     "settings-schema": "org.gnome.shell.extensions.top-bar-organizer",
     "url": "https://gitlab.gnome.org/julianschacher/top-bar-organizer"
 }

src/prefs.js

@@ -1,35 +1,32 @@
 "use strict";
-/* exported buildPrefsWidget, init */
 
-const Gtk = imports.gi.Gtk;
-const Gdk = imports.gi.Gdk;
+import Gtk from "gi://Gtk";
+import Gdk from "gi://Gdk";
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me = ExtensionUtils.getCurrentExtension();
+import { ExtensionPreferences } from "resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js";
 
-const PrefsPage = Me.imports.prefsModules.PrefsPage;
+import PrefsPage from "./prefsModules/PrefsPage.js";
 
-function buildPrefsWidget() {
-    const provider = new Gtk.CssProvider();
-    provider.load_from_path(Me.dir.get_path() + "/css/prefs.css");
-    const defaultGdkDisplay = Gdk.Display.get_default();
-    Gtk.StyleContext.add_provider_for_display(
-        defaultGdkDisplay,
-        provider,
-        Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
-    );
-
-    const prefsPage = new PrefsPage.PrefsPage();
-
-    prefsPage.connect("destroy", () => {
-        Gtk.StyleContext.remove_provider_for_display(
+export default class TopBarOrganizerPreferences extends ExtensionPreferences {
+    getPreferencesWidget() {
+        const provider = new Gtk.CssProvider();
+        provider.load_from_path(this.metadata.dir.get_path() + "/css/prefs.css");
+        const defaultGdkDisplay = Gdk.Display.get_default();
+        Gtk.StyleContext.add_provider_for_display(
             defaultGdkDisplay,
-            provider
+            provider,
+            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
         );
-    });
 
-    return prefsPage;
-}
+        const prefsPage = new PrefsPage();
 
-function init() {
+        prefsPage.connect("destroy", () => {
+            Gtk.StyleContext.remove_provider_for_display(
+                defaultGdkDisplay,
+                provider
+            );
+        });
+
+        return prefsPage;
+    }
 }

src/prefsModules/PrefsBoxOrderItemRow.js

@@ -1,18 +1,15 @@
 "use strict";
-/* exported PrefsBoxOrderItemRow */
 
-const Gtk = imports.gi.Gtk;
-const Gdk = imports.gi.Gdk;
-const Gio = imports.gi.Gio;
-const GObject = imports.gi.GObject;
-const Adw = imports.gi.Adw;
+import Gtk from "gi://Gtk";
+import Gdk from "gi://Gdk";
+import Gio from "gi://Gio";
+import GObject from "gi://GObject";
+import Adw from "gi://Adw";
+import GLib from "gi://GLib";
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me = ExtensionUtils.getCurrentExtension();
-
-var PrefsBoxOrderItemRow = GObject.registerClass({
+const PrefsBoxOrderItemRow = GObject.registerClass({
     GTypeName: "PrefsBoxOrderItemRow",
-    Template: Me.dir.get_child("ui").get_child("prefs-box-order-item-row.ui").get_uri(),
+    Template: GLib.uri_resolve_relative(import.meta.url, "../ui/prefs-box-order-item-row.ui", GLib.UriFlags.NONE),
     InternalChildren: [
         "item-name-display-label"
     ]
@@ -144,3 +141,5 @@ var PrefsBoxOrderItemRow = GObject.registerClass({
         }
     }
 });
+
+export default PrefsBoxOrderItemRow;

src/prefsModules/PrefsBoxOrderListBox.js

@@ -1,18 +1,17 @@
 "use strict";
-/* exported PrefsBoxOrderListBox */
 
-const Gtk = imports.gi.Gtk;
-const GObject = imports.gi.GObject;
+import Gtk from "gi://Gtk";
+import GObject from "gi://GObject";
+import GLib from "gi://GLib";
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me = ExtensionUtils.getCurrentExtension();
+import { ExtensionPreferences } from "resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js";
 
-const PrefsBoxOrderItemRow = Me.imports.prefsModules.PrefsBoxOrderItemRow;
-const PrefsBoxOrderListEmptyPlaceholder = Me.imports.prefsModules.PrefsBoxOrderListEmptyPlaceholder;
+import PrefsBoxOrderItemRow from "./PrefsBoxOrderItemRow.js";
+import PrefsBoxOrderListEmptyPlaceholder from "./PrefsBoxOrderListEmptyPlaceholder.js";
 
-var PrefsBoxOrderListBox = GObject.registerClass({
+const PrefsBoxOrderListBox = GObject.registerClass({
     GTypeName: "PrefsBoxOrderListBox",
-    Template: Me.dir.get_child("ui").get_child("prefs-box-order-list-box.ui").get_uri(),
+    Template: GLib.uri_resolve_relative(import.meta.url, "../ui/prefs-box-order-list-box.ui", GLib.UriFlags.NONE),
     Properties: {
         BoxOrder: GObject.ParamSpec.string(
             "box-order",
@@ -32,11 +31,11 @@ var PrefsBoxOrderListBox = GObject.registerClass({
         super(params);
 
         // Load the settings.
-        this.#settings = ExtensionUtils.getSettings();
+        this.#settings = ExtensionPreferences.lookupByURL(import.meta.url).getSettings();
 
         // Add a placeholder widget for the case, where no GtkListBoxRows are
         // present.
-        this.set_placeholder(new PrefsBoxOrderListEmptyPlaceholder.PrefsBoxOrderListEmptyPlaceholder());
+        this.set_placeholder(new PrefsBoxOrderListEmptyPlaceholder());
     }
 
     get boxOrder() {
@@ -48,13 +47,13 @@ var PrefsBoxOrderListBox = GObject.registerClass({
 
         // Load the settings here as well, since a `CONSTRUCT_ONLY` property
         // apparently can't access `this.#settings`.
-        const settings = ExtensionUtils.getSettings();
+        const settings = ExtensionPreferences.lookupByURL(import.meta.url).getSettings();
         // Get the actual box order for the given box order name from settings.
         const boxOrder = settings.get_strv(this._boxOrder);
         // Populate this GtkListBox with GtkListBoxRows for the items of the
         // given configured box order.
         for (const item of boxOrder) {
-            const listBoxRow = new PrefsBoxOrderItemRow.PrefsBoxOrderItemRow({}, item);
+            const listBoxRow = new PrefsBoxOrderItemRow({}, item);
             this.append(listBoxRow);
         }
 
@@ -79,3 +78,5 @@ var PrefsBoxOrderListBox = GObject.registerClass({
         this.#settings.set_strv(this.boxOrder, currentBoxOrder);
     }
 });
+
+export default PrefsBoxOrderListBox;

src/prefsModules/PrefsBoxOrderListEmptyPlaceholder.js

@@ -1,15 +1,12 @@
 "use strict";
-/* exported PrefsBoxOrderListEmptyPlaceholder */
 
-const Gtk = imports.gi.Gtk;
-const GObject = imports.gi.GObject;
+import Gtk from "gi://Gtk";
+import GObject from "gi://GObject";
+import GLib from "gi://GLib";
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me = ExtensionUtils.getCurrentExtension();
-
-var PrefsBoxOrderListEmptyPlaceholder = GObject.registerClass({
+const PrefsBoxOrderListEmptyPlaceholder = GObject.registerClass({
     GTypeName: "PrefsBoxOrderListEmptyPlaceholder",
-    Template: Me.dir.get_child("ui").get_child("prefs-box-order-list-empty-placeholder.ui").get_uri()
+    Template: GLib.uri_resolve_relative(import.meta.url, "../ui/prefs-box-order-list-empty-placeholder.ui", GLib.UriFlags.NONE)
 }, class PrefsBoxOrderListEmptyPlaceholder extends Gtk.Box {
     // Handle a new drop on `this` properly.
     // `value` is the thing getting dropped.
@@ -29,3 +26,5 @@ var PrefsBoxOrderListEmptyPlaceholder = GObject.registerClass({
         valueListBox.saveBoxOrderToSettings();
     }
 });
+
+export default PrefsBoxOrderListEmptyPlaceholder;

src/prefsModules/PrefsPage.js

@@ -1,22 +1,18 @@
 "use strict";
-/* exported PrefsPage */
 
-const Gtk = imports.gi.Gtk;
-const GObject = imports.gi.GObject;
-const Adw = imports.gi.Adw;
+import Gtk from "gi://Gtk";
+import GObject from "gi://GObject";
+import Adw from "gi://Adw";
+import GLib from "gi://GLib";
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me = ExtensionUtils.getCurrentExtension();
-
-const ScrollManager = Me.imports.prefsModules.ScrollManager;
+import ScrollManager from "./ScrollManager.js";
 
 // Imports to make UI file work.
-/* exported PrefsBoxOrderListBox */
-const PrefsBoxOrderListBox = Me.imports.prefsModules.PrefsBoxOrderListBox;
+import PrefsBoxOrderListBox from "./PrefsBoxOrderListBox.js";
 
-var PrefsPage = GObject.registerClass({
+const PrefsPage = GObject.registerClass({
     GTypeName: "PrefsPage",
-    Template: Me.dir.get_child("ui").get_child("prefs-page.ui").get_uri()
+    Template: GLib.uri_resolve_relative(import.meta.url, "../ui/prefs-page.ui", GLib.UriFlags.NONE)
 }, class PrefsPage extends Adw.PreferencesPage {
     constructor(params = {}) {
         super(params);
@@ -34,7 +30,7 @@ var PrefsPage = GObject.registerClass({
         // Pass `this.get_first_child()` to the ScrollManager, since this
         // `PrefsPage` extends an `Adw.PreferencesPage` and the first child of
         // an `Adw.PreferencesPage` is the built-in `Gtk.ScrolledWindow`.
-        const scrollManager = new ScrollManager.ScrollManager(this.get_first_child());
+        const scrollManager = new ScrollManager(this.get_first_child());
 
         /// Setup GtkDropControllerMotion event controller and make use of its
         /// events.
@@ -86,3 +82,5 @@ var PrefsPage = GObject.registerClass({
         this.add_controller(controller);
     }
 });
+
+export default PrefsPage;

src/prefsModules/ScrollManager.js

@@ -1,8 +1,8 @@
 "use strict";
-/* exported ScrollManager */
-const GLib = imports.gi.GLib;
 
-var ScrollManager = class ScrollManager {
+import GLib from "gi://GLib";
+
+export default class ScrollManager {
     #gtkScrolledWindow;
     #scrollUp;
     #scrollDown;
@@ -86,4 +86,4 @@ var ScrollManager = class ScrollManager {
         this.stopScrollUp();
         this.stopScrollDown();
     }
-};
+}