GNOME 45

.github/workflows/checks.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Download Clang-Format
         run: |
           sudo apt update -qq
-          sudo apt install clang-format-11 -qq
+          sudo apt install clang-format-15 -qq
       - name: Run Clang-Format
         run: scripts/clang-format.sh
       - name: Compare Results
@@ -90,13 +90,7 @@ jobs:
       fail-fast: false
       matrix:
         version:
-          - "32"
-          - "33"
-          - "34"
-          - "35"
-          - "36"
-          - "37"
-          - "38"
+          - "rawhide"
         session:
           - "gnome-xsession"
           - "gnome-wayland-nested"

Makefile

@@ -18,7 +18,7 @@ LOCALES_MO     = $(patsubst po/%.po,locale/%/LC_MESSAGES/$(NAME).mo,$(LOCALES_PO
 # These files will be included in the extension zip file.
 ZIP_CONTENT = $(JS_FILES) $(LOCALES_MO) resources/$(NAME).gresource \
               schemas/org.gnome.shell.extensions.$(NAME).gschema.xml \
-              presets schemas/gschemas.compiled metadata.json LICENSE
+              presets metadata.json LICENSE
 
 # These five recipes can be invoked by the user.
 .PHONY: zip install uninstall pot clean test
@@ -54,7 +54,7 @@ clean:
 	       locale
 
 test:
-	@ for version in 32 33 34 35 36 37 38 ; do \
+	@ for version in "rawhide" ; do \
 	  for session in "gnome-xsession" "gnome-wayland-nested" ; do \
 	    echo ; \
 	    echo "Running Tests on Fedora $$version ($$session)." ; \
@@ -79,11 +79,6 @@ $(ZIP_NAME): $(ZIP_CONTENT)
 	    exit 1; \
 	 fi
 
-# Compiles the gschemas.compiled file from the gschema.xml file.
-schemas/gschemas.compiled: schemas/org.gnome.shell.extensions.$(NAME).gschema.xml
-	@echo "Compiling schemas..."
-	@glib-compile-schemas schemas
-
 # Compiles the gresource file from the gresources.xml.
 resources/$(NAME).gresource: resources/$(NAME).gresource.xml
 	@echo "Compiling resources..."

docs/changelog.md

@@ -9,6 +9,14 @@ SPDX-License-Identifier: CC-BY-4.0
 
 # Changelog of Fly-Pie
 
+## [Fly-Pie 23](/~https://github.com/schneegans/fly-pie/releases/tag/v23)
+
+**Release Date:** 2023-09-09
+
+#### Major Changes
+
+- This is the first release of Fly-Pie supporting GNOME 45. This required a [major refactoring](/~https://github.com/Schneegans/Fly-Pie/pull/318/files) of the code base as GJS now uses ESM modules. As a consequence, this version is not compatible with older versions of GNOME Shell anymore. The old code base is still available on the `gnome-3.36-44` branch and if new features are added (especially translations), they can be backported to this branch.
+
 ## [Fly-Pie 22](/~https://github.com/schneegans/fly-pie/releases/tag/v22)
 
 **Release Date:** 2023-09-04

docs/creating-actions.md

@@ -10,7 +10,7 @@ SPDX-License-Identifier: CC-BY-4.0
 # Creating New Action Types for Fly-Pie
 
 There are two fundamental item types in Fly-Pie: _Actions_ and _Menus_.
-Actions have an `onSelect()` method which is called when the user selects them; Menus can have child Actions or child Menus. 
+Actions have an `onSelect()` method which is called when the user selects them; Menus can have child Actions or child Menus.
 
 If you want to create a new Action type for Fly-Pie, this guide is made for you!
 As an example, we will create an Action which shows a notification with a user-defined message whenever it is selected.
@@ -31,10 +31,10 @@ You should read the code, most of it is explained with inline comments!
 // SPDX-FileCopyrightText: Your Name <your@email.com>
 // SPDX-License-Identifier: MIT
 
-'use strict';
+"use strict";
 
 // This is required for localization support.
-const _ = imports.gettext.domain('flypie').gettext;
+const _ = imports.gettext.domain("flypie").gettext;
 
 // We have to import the Main module optionally. This is because this file is included
 // from both sides: From prefs.js and from extension.js. When included from prefs.js, the
@@ -50,10 +50,9 @@ try {
 }
 
 // Some extension-local imports we will use further down.
-const Me                  = imports.misc.extensionUtils.getCurrentExtension();
-const utils               = Me.imports.src.common.utils;
-const ItemRegistry        = Me.imports.src.common.ItemRegistry;
-const ConfigWidgetFactory = Me.imports.src.common.ConfigWidgetFactory.ConfigWidgetFactory;
+import { debug } from "../utils.js";
+import { ItemClass } from "../ItemClass.js";
+import ConfigWidgetFactory from "../ConfigWidgetFactory.js";
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This simple example action shows a desktop notification when selected. The text of   //
@@ -62,79 +61,77 @@ const ConfigWidgetFactory = Me.imports.src.common.ConfigWidgetFactory.ConfigWidg
 
 // This should be always named 'action'.
 var action = {
-
   // There are two fundamental item types in Fly-Pie: Actions and Menus. Actions have an
   // onSelect() method which is called when the user selects the item, Menus can have
   // child Actions or Menus. In this example we create an Action!
-  class: ItemRegistry.ItemClass.ACTION,
+  class: ItemClass.ACTION,
 
   // This will be shown in the add-new-item-popover of the settings dialog.
   // It should be translatable.
-  name: _('ExampleAction'),
+  name: _("ExampleAction"),
 
   // This is also used in the add-new-item-popover.
-  icon: 'accessories-clipboard',
+  icon: "accessories-clipboard",
 
   // Translators: Please keep this short.
   // This is the (short) description shown in the add-new-item-popover.
-  subtitle: _('Foo.'),
+  subtitle: _("Foo."),
 
   // This is the (long) description shown when an item of this type is selected.
-  description: _('Bar bar bar bar.'),
+  description: _("Bar bar bar bar."),
 
   // Items of this type have a custom user setting for the text to show in the
   // notification. The 'config' property below defines how this data can be set.
   config: {
-
     // This is used as data for newly created items of this type. You can add any
     // number of properties to this defaultData object. Just make sure that you use
     // the same properties in the updateCallback further below.
-    defaultData: {message: _('Hello World!')},
+    defaultData: { message: _("Hello World!") },
 
     // This is called whenever an item of this type is selected in the menu editor.
     // It should return a Gtk.Widget which will be shown in the sidebar of the menu
     // editor. The currently configured data object will be passed as first parameter,
     // the second parameter is a callback which should be fired whenever the user
     // changes something in the widgets.
     getWidget(data, updateCallback) {
-
       // Our data parameter *should* be an object containing a single "message"
       // property (like the defaultData above). In order to prevent a crash
       // when that's not the case (e.g. when the user edited the menu configuration
       // by hand and made a mistake) we check this here.
-      let message = data.message || '';
+      let message = data.message || "";
 
       // You can use Gtk here to create any widget you want. In this tutorial we will
       // use the ConfigWidgetFactory to do this job. Feel free to look into this method
       // to learn the details.
       return ConfigWidgetFactory.createTextWidget(
-        _('Message'),                         // Shown on the left above the text entry.
-        _('Shown when this is activated.'),   // Shown on the right above the text entry.
-        null,                                 // An optional tooltip text.
-        message,                              // The initial value of the entry.
-        (message) => {                        // Called whenever the text is modified.
-          updateCallback({message: message}); // We call the updateCallback with a new
-        }                                     // data object.
+        _("Message"), // Shown on the left above the text entry.
+        _("Shown when this is activated."), // Shown on the right above the text entry.
+        null, // An optional tooltip text.
+        message, // The initial value of the entry.
+        (message) => {
+          // Called whenever the text is modified.
+          updateCallback({ message: message }); // We call the updateCallback with a new
+        } // data object.
       );
-    }
+    },
   },
 
   // This will be called whenever a menu is opened containing an item of this kind.
   // The data value chosen by the user will be passed to this function.
   createItem: (data) => {
     // This will be printed to the log when a menu is opened containing such an action.
-    utils.debug('ExampleAction Created!');
+    debug("ExampleAction Created!");
 
     // Handle invalid data.
-    let message = data.message || '';
+    let message = data.message || "";
 
     // The onSelect() function will be called when the user selects this action.
     return {
       onSelect: () => {
-        Main.notify(_('ExampleAction Selected!'), message);
-      }
+        Main.notify(_("ExampleAction Selected!"), message);
+      },
     };
-  }
+  },
 };
 ```
 

docs/creating-menus.md

@@ -10,7 +10,7 @@ SPDX-License-Identifier: CC-BY-4.0
 # Creating New Menu Types for Fly-Pie
 
 There are two fundamental item types in Fly-Pie: _Actions_ and _Menus_.
-Actions have an `onSelect()` method which is called when the user selects them; Menus can have child Actions or child Menus. 
+Actions have an `onSelect()` method which is called when the user selects them; Menus can have child Actions or child Menus.
 
 If you want to create a new Menu type for Fly-Pie, this guide is made for you!
 As an example, we will create a Menu which contains three actions, each of which shows a desktop notification when selected.
@@ -31,10 +31,10 @@ You should read the code, most of it is explained with inline comments!
 // SPDX-FileCopyrightText: Your Name <your@email.com>
 // SPDX-License-Identifier: MIT
 
-'use strict';
+"use strict";
 
 // This is required for localization support.
-const _ = imports.gettext.domain('flypie').gettext;
+const _ = imports.gettext.domain("flypie").gettext;
 
 // We have to import the Main module optionally. This is because this file is included
 // from both sides: From prefs.js and from extension.js. When included from prefs.js, the
@@ -50,9 +50,8 @@ try {
 }
 
 // Some extension-local imports we will use further down.
-const Me           = imports.misc.extensionUtils.getCurrentExtension();
-const utils        = Me.imports.src.common.utils;
-const ItemRegistry = Me.imports.src.common.ItemRegistry;
+import { debug } from "../utils.js";
+import { ItemClass } from "../ItemClass.js";
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // This simple example menu contains three actions, each of which shows a desktop       //
@@ -61,25 +60,24 @@ const ItemRegistry = Me.imports.src.common.ItemRegistry;
 
 // This should be always named 'menu'.
 var menu = {
-
   // There are two fundamental item types in Fly-Pie: Actions and Menus. Actions have an
   // onSelect() method which is called when the user selects the item, Menus can have
   // child Actions or Menus. In this example we create a Menu!
-  class: ItemRegistry.ItemClass.MENU,
+  class: ItemClass.MENU,
 
   // This will be shown in the add-new-item-popover of the settings dialog.
   // It should be translatable.
-  name: _('ExampleMenu'),
+  name: _("ExampleMenu"),
 
   // This is also used in the add-new-item-popover.
-  icon: 'accessories-clipboard',
+  icon: "accessories-clipboard",
 
   // Translators: Please keep this short.
   // This is the (short) description shown in the add-new-item-popover.
-  subtitle: _('Foo.'),
+  subtitle: _("Foo."),
 
   // This is the (long) description shown when an item of this type is selected.
-  description: _('Bar bar bar bar.'),
+  description: _("Bar bar bar bar."),
 
   // Menus can also have a config field like actions. See the documentation on how-to
   // create custom actions for details. This example menu does not use a config field.
@@ -88,37 +86,37 @@ var menu = {
   // This will be called whenever a menu is opened containing an item of this kind.
   createItem: () => {
     // This will be printed to the log when a menu is opened containing such an item.
-    utils.debug('ExampleMenu Created!');
+    debug("ExampleMenu Created!");
 
     // This method should return an object containing a 'children' array. Each array
     // element has to have a 'name' and an 'icon'. The onSelect() function will be
     // called when the user selects the corresponding item.
     return {
       children: [
         {
-          name: _('First Item'),
-          icon: '♈',
+          name: _("First Item"),
+          icon: "♈",
           onSelect: () => {
-            Main.notify(_('♈ Selected!'), _('This is the first item!'));
-          }
+            Main.notify(_("♈ Selected!"), _("This is the first item!"));
+          },
         },
         {
-          name: _('Second Item'),
-          icon: '♎',
+          name: _("Second Item"),
+          icon: "♎",
           onSelect: () => {
-            Main.notify(_('♎ Selected!'), _('This is the second item!'));
-          }
+            Main.notify(_("♎ Selected!"), _("This is the second item!"));
+          },
         },
         {
-          name: _('Third Item'),
-          icon: '♐',
+          name: _("Third Item"),
+          icon: "♐",
           onSelect: () => {
-            Main.notify(_('♐ Selected!'), _('This is the third item!'));
-          }
-        }
-      ]
+            Main.notify(_("♐ Selected!"), _("This is the third item!"));
+          },
+        },
+      ],
     };
-  }
+  },
 };
 ```
 

docs/installation.md

@@ -54,6 +54,12 @@ git clone /~https://github.com/Schneegans/Fly-Pie.git
 cd Fly-Pie
 ```
 
+If your GNOME Shell version is <= 45, you will have to checkout the `gnome-3.36-44` branch:
+
+```bash
+git checkout gnome-3.36-44
+```
+
 Now you will have to install the extension.
 The `make` command below compiles the locales, schemas and resources, creates a zip file of the extension and finally installs it with the `gnome-extensions` tool.
 

extension.js

@@ -11,9 +11,9 @@
 
 'use strict';
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me             = imports.misc.extensionUtils.getCurrentExtension();
-const Daemon         = Me.imports.src.extension.Daemon.Daemon;
+import {Extension} from 'resource:///org/gnome/shell/extensions/extension.js';
+
+import Daemon from './src/extension/Daemon.js';
 
 //////////////////////////////////////////////////////////////////////////////////////////
 // Once enabled, Fly-Pie creates an instance of the Daemon class. This daemon will      //
@@ -26,25 +26,20 @@ const Daemon         = Me.imports.src.extension.Daemon.Daemon;
 //   common/     This contains code which is required by extension.js and prefs.js.     //
 //////////////////////////////////////////////////////////////////////////////////////////
 
-let daemon;
-
-// This function is called once when the extension is loaded, not enabled. For Fly-Pie,
-// we only need to initialize gettext.
-function init() {
-  ExtensionUtils.initTranslations();
-}
-
-// This function could be called after the extension is enabled, which could be done from
-// GNOME Tweaks, when you log in or when the screen is unlocked. We create an instance of
-// the Daemon class.
-function enable() {
-  daemon = new Daemon();
-}
-
-// This function could be called after the extension is uninstalled, disabled in GNOME
-// Tweaks, when you log out or when the screen locks. It deletes the previously created
-// damon.
-function disable() {
-  daemon.destroy();
-  daemon = null;
+export default class FlyPie extends Extension {
+
+  // This function could be called after the extension is enabled, which could be done
+  // from GNOME Tweaks, when you log in or when the screen is unlocked. We create an
+  // instance of the Daemon class.
+  enable() {
+    this.daemon = new Daemon(this.metadata);
+  }
+
+  // This function could be called after the extension is uninstalled, disabled in GNOME
+  // Tweaks, when you log out or when the screen locks. It deletes the previously created
+  // damon.
+  disable() {
+    this.daemon.destroy();
+    this.daemon = null;
+  }
 }