js: Port to modules

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1499>

.eslintrc.yml

@@ -1,17 +1,5 @@
 extends:
  - ./lint/eslintrc-gjs.yml
  - ./lint/eslintrc-shell.yml
-overrides:
+parserOptions:
-  - files:
-      - js/ui/init.js
-      - js/ui/environment.js
-      - js/ui/scripting.js
-      - js/misc/dependencies.js
-      - js/dbusServices/**
-      - js/extensions/**
-      - js/portalHelper/**
-      - subprojects/extensions-app/**
-      - subprojects/extensions-tool/**
-      - tests/**
-    parserOptions:
     sourceType: module

js/dbusServices/extensions/extensionsService.js

@@ -6,7 +6,7 @@ import Shew from 'gi://Shew';
 import {ExtensionPrefsDialog} from './extensionPrefsDialog.js';
 import {ServiceImplementation} from './dbusService.js';
 
-const {deserializeExtension} = imports.misc.extensionUtils;
+import {deserializeExtension} from './misc/extensionUtils.js';
 const {loadInterfaceXML} = imports.misc.dbusUtils;
 
 const ExtensionsIface = loadInterfaceXML('org.gnome.Shell.Extensions');

js/dbusServices/screencast/screencastService.js

@@ -7,7 +7,7 @@ import Gtk from 'gi://Gtk?version=4.0';
 import {ServiceImplementation} from './dbusService.js';
 
 const {loadInterfaceXML, loadSubInterfaceXML} = imports.misc.dbusUtils;
-const Signals = imports.misc.signals;
+import * as Signals from './misc/signals.js';
 
 const ScreencastIface = loadInterfaceXML('org.gnome.Shell.Screencast');
 
@@ -63,7 +63,7 @@ const SessionState = {
     STOPPED: 'STOPPED',
 };
 
-var Recorder = class extends Signals.EventEmitter {
+class Recorder extends Signals.EventEmitter {
     constructor(sessionPath, x, y, width, height, filePath, options,
         invocation) {
         super();
@@ -397,7 +397,7 @@ var Recorder = class extends Signals.EventEmitter {
         return Gst.parse_launch_full(fullPipeline, null,
             Gst.ParseFlags.FATAL_ERRORS);
     }
-};
+}
 
 export const ScreencastService = class extends ServiceImplementation {
     static canScreencast() {

js/extensions/extension.js

@@ -2,7 +2,7 @@ const Gi = imports._gi;
 
 import {ExtensionBase, GettextWrapper} from './sharedInternals.js';
 
-const {extensionManager} = imports.ui.main;
+import {extensionManager} from '../ui/main.js';
 
 export class Extension extends ExtensionBase {
     static lookupByUUID(uuid) {

js/gdm/authList.js

@@ -15,12 +15,11 @@
  * You should have received a copy of the GNU General Public License
  * along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
-/* exported AuthList */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const St = imports.gi.St;
+import St from 'gi://St';
 
 const SCROLL_ANIMATION_TIME = 500;
 
@@ -68,7 +67,7 @@ const AuthListItem = GObject.registerClass({
     }
 });
 
-var AuthList = GObject.registerClass({
+export const AuthList = GObject.registerClass({
     Signals: {
         'activate': { param_types: [GObject.TYPE_STRING] },
         'item-added': { param_types: [AuthListItem.$gtype] },

js/gdm/authPrompt.js

@@ -1,36 +1,35 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported AuthPrompt */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Animation = imports.ui.animation;
+import * as Animation from '../ui/animation.js';
-const AuthList = imports.gdm.authList;
+import * as AuthList from './authList.js';
-const Batch = imports.gdm.batch;
+import * as Batch from './batch.js';
-const GdmUtil = imports.gdm.util;
+import * as GdmUtil from './util.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
-const ShellEntry = imports.ui.shellEntry;
+import * as ShellEntry from '../ui/shellEntry.js';
-const UserWidget = imports.ui.userWidget;
+import * as UserWidget from '../ui/userWidget.js';
-const {wiggle} = imports.misc.animationUtils;
+import {wiggle} from '../misc/animationUtils.js';
 
-var DEFAULT_BUTTON_WELL_ICON_SIZE = 16;
+const DEFAULT_BUTTON_WELL_ICON_SIZE = 16;
-var DEFAULT_BUTTON_WELL_ANIMATION_DELAY = 1000;
+const DEFAULT_BUTTON_WELL_ANIMATION_DELAY = 1000;
-var DEFAULT_BUTTON_WELL_ANIMATION_TIME = 300;
+const DEFAULT_BUTTON_WELL_ANIMATION_TIME = 300;
 
-var MESSAGE_FADE_OUT_ANIMATION_TIME = 500;
+const MESSAGE_FADE_OUT_ANIMATION_TIME = 500;
 
 /** @enum {number} */
-var AuthPromptMode = {
+export const AuthPromptMode = {
     UNLOCK_ONLY: 0,
     UNLOCK_OR_LOG_IN: 1,
 };
 
 /** @enum {number} */
-var AuthPromptStatus = {
+export const AuthPromptStatus = {
     NOT_VERIFYING: 0,
     VERIFYING: 1,
     VERIFICATION_FAILED: 2,
@@ -40,13 +39,13 @@ var AuthPromptStatus = {
 };
 
 /** @enum {number} */
-var BeginRequestType = {
+export const BeginRequestType = {
     PROVIDE_USERNAME: 0,
     DONT_PROVIDE_USERNAME: 1,
     REUSE_USERNAME: 2,
 };
 
-var AuthPrompt = GObject.registerClass({
+export const AuthPrompt = GObject.registerClass({
     Signals: {
         'cancelled': {},
         'failed': {},

js/gdm/batch.js

@@ -43,12 +43,11 @@
  * are not used elsewhere. These APIs may ultimately get dropped entirely and
  * replaced by something else.
  */
-/* exported ConcurrentBatch, ConsecutiveBatch */
 
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-var Task = class extends Signals.EventEmitter {
+export class Task extends Signals.EventEmitter {
     constructor(scope, handler) {
         super();
 
@@ -66,9 +65,9 @@ var Task = class extends Signals.EventEmitter {
 
         return null;
     }
-};
+}
 
-var Hold = class extends Task {
+export class Hold extends Task {
     constructor() {
         super(null, () => this);
 
@@ -102,9 +101,9 @@ var Hold = class extends Task {
     isAcquired() {
         return this._acquisitions > 0;
     }
-};
+}
 
-var Batch = class extends Task {
+export class Batch extends Task {
     constructor(scope, tasks) {
         super();
 
@@ -171,9 +170,9 @@ var Batch = class extends Task {
     cancel() {
         this.tasks = this.tasks.splice(0, this._currentTaskIndex + 1);
     }
-};
+}
 
-var ConcurrentBatch = class extends Batch {
+export class ConcurrentBatch extends Batch {
     process() {
         let hold = this.runTask();
 
@@ -185,9 +184,9 @@ var ConcurrentBatch = class extends Batch {
         // concurrently.
         this.nextTask();
     }
-};
+}
 
-var ConsecutiveBatch = class extends Batch {
+export class ConsecutiveBatch extends Batch {
     process() {
         let hold = this.runTask();
 
@@ -203,4 +202,4 @@ var ConsecutiveBatch = class extends Batch {
             this.nextTask();
         }
     }
-};
+}

js/gdm/credentialManager.js

@@ -1,9 +1,8 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported CredentialManager */
 
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-var CredentialManager = class CredentialManager extends Signals.EventEmitter {
+export class CredentialManager extends Signals.EventEmitter {
     constructor(service) {
         super();
 
@@ -24,4 +23,4 @@ var CredentialManager = class CredentialManager extends Signals.EventEmitter {
     get service() {
         return this._service;
     }
-};
+}

js/gdm/loginDialog.js

@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported LoginDialog */
 /*
  * Copyright 2011 Red Hat, Inc
  *
@@ -17,35 +16,35 @@
  * along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 
-const AccountsService = imports.gi.AccountsService;
+import AccountsService from 'gi://AccountsService';
-const Atk = imports.gi.Atk;
+import Atk from 'gi://Atk';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gdm = imports.gi.Gdm;
+import Gdm from 'gi://Gdm';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const AuthPrompt = imports.gdm.authPrompt;
+import * as AuthPrompt from './authPrompt.js';
-const Batch = imports.gdm.batch;
+import * as Batch from './batch.js';
-const BoxPointer = imports.ui.boxpointer;
+import * as BoxPointer from '../ui/boxpointer.js';
-const CtrlAltTab = imports.ui.ctrlAltTab;
+import * as CtrlAltTab from '../ui/ctrlAltTab.js';
-const GdmUtil = imports.gdm.util;
+import * as GdmUtil from './util.js';
-const Layout = imports.ui.layout;
+import * as Layout from '../ui/layout.js';
-const LoginManager = imports.misc.loginManager;
+import * as LoginManager from '../misc/loginManager.js';
-const Main = imports.ui.main;
+import * as Main from '../ui/main.js';
-const PopupMenu = imports.ui.popupMenu;
+import * as PopupMenu from '../ui/popupMenu.js';
-const Realmd = imports.gdm.realmd;
+import * as Realmd from './realmd.js';
-const UserWidget = imports.ui.userWidget;
+import * as UserWidget from '../ui/userWidget.js';
 
 const _FADE_ANIMATION_TIME = 250;
 const _SCROLL_ANIMATION_TIME = 500;
 const _TIMED_LOGIN_IDLE_THRESHOLD = 5.0;
 
-var UserListItem = GObject.registerClass({
+export const UserListItem = GObject.registerClass({
     Signals: { 'activate': {} },
 }, class UserListItem extends St.Button {
     _init(user) {
@@ -157,7 +156,7 @@ var UserListItem = GObject.registerClass({
     }
 });
 
-var UserList = GObject.registerClass({
+const UserList = GObject.registerClass({
     Signals: {
         'activate': { param_types: [UserListItem.$gtype] },
         'item-added': { param_types: [UserListItem.$gtype] },
@@ -312,7 +311,7 @@ var UserList = GObject.registerClass({
     }
 });
 
-var SessionMenuButton = GObject.registerClass({
+const SessionMenuButton = GObject.registerClass({
     Signals: { 'session-activated': { param_types: [GObject.TYPE_STRING] } },
 }, class SessionMenuButton extends St.Bin {
     _init() {
@@ -407,7 +406,7 @@ var SessionMenuButton = GObject.registerClass({
     }
 });
 
-var LoginDialog = GObject.registerClass({
+export const LoginDialog = GObject.registerClass({
     Signals: {
         'failed': {},
         'wake-up-screen': {},

js/gdm/oVirt.js

@@ -1,10 +1,9 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported getOVirtCredentialsManager */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const Credential = imports.gdm.credentialManager;
+import * as Credential from './credentialManager.js';
 
-var SERVICE_NAME = 'gdm-ovirtcred';
+export const SERVICE_NAME = 'gdm-ovirtcred';
 
 const OVirtCredentialsIface = `
 <node>
@@ -32,7 +31,7 @@ function OVirtCredentials() {
     return self;
 }
 
-var OVirtCredentialsManager = class OVirtCredentialsManager extends Credential.CredentialManager {
+class OVirtCredentialsManager extends Credential.CredentialManager {
     constructor() {
         super(SERVICE_NAME);
         this._credentials = new OVirtCredentials();
@@ -41,12 +40,12 @@ var OVirtCredentialsManager = class OVirtCredentialsManager extends Credential.C
                 this.token = token;
             });
     }
-};
+}
 
 /**
  * @returns {OVirtCredentialsManager}
  */
-function getOVirtCredentialsManager() {
+export function getOVirtCredentialsManager() {
     if (!_oVirtCredentialsManager)
         _oVirtCredentialsManager = new OVirtCredentialsManager();
 

js/gdm/realmd.js

@@ -1,10 +1,9 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Manager */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from '../misc/fileUtils.js';
 
 const ProviderIface = loadInterfaceXML("org.freedesktop.realmd.Provider");
 const Provider = Gio.DBusProxy.makeProxyWrapper(ProviderIface);
@@ -15,7 +14,7 @@ const Service = Gio.DBusProxy.makeProxyWrapper(ServiceIface);
 const RealmIface = loadInterfaceXML("org.freedesktop.realmd.Realm");
 const Realm = Gio.DBusProxy.makeProxyWrapper(RealmIface);
 
-var Manager = class extends Signals.EventEmitter {
+export class Manager extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -109,4 +108,4 @@ var Manager = class extends Signals.EventEmitter {
         this._realms = { };
         this._updateLoginFormat();
     }
-};
+}

js/gdm/util.js

@@ -1,21 +1,18 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported BANNER_MESSAGE_KEY, BANNER_MESSAGE_TEXT_KEY, LOGO_KEY,
-            DISABLE_USER_LIST_KEY, fadeInActor, fadeOutActor, cloneAndFadeOutActor,
-            ShellUserVerifier */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gdm = imports.gi.Gdm;
+import Gdm from 'gi://Gdm';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-const Batch = imports.gdm.batch;
+import * as Batch from './batch.js';
-const OVirt = imports.gdm.oVirt;
+import * as OVirt from './oVirt.js';
-const Vmware = imports.gdm.vmware;
+import * as Vmware from './vmware.js';
-const Main = imports.ui.main;
+import * as Main from '../ui/main.js';
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from '../misc/fileUtils.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
-const SmartcardManager = imports.misc.smartcardManager;
+import * as SmartcardManager from '../misc/smartcardManager.js';
 
 const FprintManagerIface = loadInterfaceXML('net.reactivated.Fprint.Manager');
 const FprintManagerProxy = Gio.DBusProxy.makeProxyWrapper(FprintManagerIface);
@@ -28,24 +25,24 @@ Gio._promisify(Gdm.UserVerifierProxy.prototype,
     'call_begin_verification_for_user');
 Gio._promisify(Gdm.UserVerifierProxy.prototype, 'call_begin_verification');
 
-var PASSWORD_SERVICE_NAME = 'gdm-password';
+export const PASSWORD_SERVICE_NAME = 'gdm-password';
-var FINGERPRINT_SERVICE_NAME = 'gdm-fingerprint';
+export const FINGERPRINT_SERVICE_NAME = 'gdm-fingerprint';
-var SMARTCARD_SERVICE_NAME = 'gdm-smartcard';
+export const SMARTCARD_SERVICE_NAME = 'gdm-smartcard';
-var CLONE_FADE_ANIMATION_TIME = 250;
+const CLONE_FADE_ANIMATION_TIME = 250;
 
-var LOGIN_SCREEN_SCHEMA = 'org.gnome.login-screen';
+export const LOGIN_SCREEN_SCHEMA = 'org.gnome.login-screen';
-var PASSWORD_AUTHENTICATION_KEY = 'enable-password-authentication';
+export const PASSWORD_AUTHENTICATION_KEY = 'enable-password-authentication';
-var FINGERPRINT_AUTHENTICATION_KEY = 'enable-fingerprint-authentication';
+export const FINGERPRINT_AUTHENTICATION_KEY = 'enable-fingerprint-authentication';
-var SMARTCARD_AUTHENTICATION_KEY = 'enable-smartcard-authentication';
+export const SMARTCARD_AUTHENTICATION_KEY = 'enable-smartcard-authentication';
-var BANNER_MESSAGE_KEY = 'banner-message-enable';
+export const BANNER_MESSAGE_KEY = 'banner-message-enable';
-var BANNER_MESSAGE_TEXT_KEY = 'banner-message-text';
+export const BANNER_MESSAGE_TEXT_KEY = 'banner-message-text';
-var ALLOWED_FAILURES_KEY = 'allowed-failures';
+export const ALLOWED_FAILURES_KEY = 'allowed-failures';
 
-var LOGO_KEY = 'logo';
+export const LOGO_KEY = 'logo';
-var DISABLE_USER_LIST_KEY = 'disable-user-list';
+export const DISABLE_USER_LIST_KEY = 'disable-user-list';
 
 // Give user 48ms to read each character of a PAM message
-var USER_READ_TIME = 48;
+const USER_READ_TIME = 48;
 const FINGERPRINT_ERROR_TIMEOUT_WAIT = 15;
 
 /**
@@ -53,7 +50,7 @@ const FINGERPRINT_ERROR_TIMEOUT_WAIT = 15;
  *
  * @enum {number}
  */
-var MessageType = {
+export const MessageType = {
     NONE: 0,
     HINT: 1,
     INFO: 2,
@@ -69,7 +66,7 @@ const FingerprintReaderType = {
 /**
  * @param {Clutter.Actor} actor
  */
-function cloneAndFadeOutActor(actor) {
+export function cloneAndFadeOutActor(actor) {
     // Immediately hide actor so its sibling can have its space
     // and position, but leave a non-reactive clone on-screen,
     // so from the user's point of view it smoothly fades away
@@ -99,7 +96,7 @@ function cloneAndFadeOutActor(actor) {
     return hold;
 }
 
-var ShellUserVerifier = class extends Signals.EventEmitter {
+export class ShellUserVerifier extends Signals.EventEmitter {
     constructor(client, params) {
         super();
         params = Params.parse(params, { reauthenticationOnly: false });
@@ -765,4 +762,4 @@ var ShellUserVerifier = class extends Signals.EventEmitter {
 
         this._verificationFailed(serviceName, true);
     }
-};
+}

js/gdm/vmware.js

@@ -1,13 +1,12 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported getVmwareCredentialsManager */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const Credential = imports.gdm.credentialManager;
+import * as Credential from './credentialManager.js';
 
 const dbusPath = '/org/vmware/viewagent/Credentials';
 const dbusInterface = 'org.vmware.viewagent.Credentials';
 
-var SERVICE_NAME = 'gdm-vmwcred';
+export const SERVICE_NAME = 'gdm-vmwcred';
 
 const VmwareCredentialsIface = `<node>
 <interface name="${dbusInterface}">
@@ -35,7 +34,7 @@ function VmwareCredentials() {
     return self;
 }
 
-var VmwareCredentialsManager = class VmwareCredentialsManager extends Credential.CredentialManager {
+class VmwareCredentialsManager extends Credential.CredentialManager {
     constructor() {
         super(SERVICE_NAME);
         this._credentials = new VmwareCredentials();
@@ -44,12 +43,12 @@ var VmwareCredentialsManager = class VmwareCredentialsManager extends Credential
                 this.token = token;
             });
     }
-};
+}
 
 /**
  * @returns {VmwareCredentialsManager}
  */
-function getVmwareCredentialsManager() {
+export function getVmwareCredentialsManager() {
     if (!_vmwareCredentialsManager)
         _vmwareCredentialsManager = new VmwareCredentialsManager();
 

js/misc/.eslintrc.yml

@@ -0,0 +1,5 @@
+overrides:
+  - files:
+      - dbusUtils.js
+    parserOptions:
+      sourceType: script

js/misc/animationUtils.js

@@ -1,11 +1,9 @@
-/* exported adjustAnimationTime, ensureActorVisibleInScrollView, wiggle */
+import St from 'gi://St';
+import Clutter from 'gi://Clutter';
 
-const St = imports.gi.St;
+import * as Params from './params.js';
-const Clutter = imports.gi.Clutter;
 
-const Params = imports.misc.params;
+const SCROLL_TIME = 100;
-
-var SCROLL_TIME = 100;
 
 const WIGGLE_OFFSET = 6;
 const WIGGLE_DURATION = 65;
@@ -19,7 +17,7 @@ const N_WIGGLES = 3;
  * Adjust `msecs` to account for St's enable-animations
  * and slow-down-factor settings
  */
-function adjustAnimationTime(msecs) {
+export function adjustAnimationTime(msecs) {
     const settings = St.Settings.get();
 
     if (!settings.enable_animations)
@@ -33,7 +31,7 @@ function adjustAnimationTime(msecs) {
  * @param {St.ScrollView} scrollView - the scroll view the actor is in
  * @param {Clutter.Actor} actor - the actor
  */
-function ensureActorVisibleInScrollView(scrollView, actor) {
+export function ensureActorVisibleInScrollView(scrollView, actor) {
     const {adjustment} = scrollView.vscroll;
     let [value, lower_, upper, stepIncrement_, pageIncrement_, pageSize] = adjustment.get_values();
 
@@ -79,7 +77,7 @@ function ensureActorVisibleInScrollView(scrollView, actor) {
  * @param {number} params.duration - the amount of time to move the actor per-wiggle
  * @param {number} params.wiggleCount - the number of times to wiggle the actor
  */
-function wiggle(actor, params) {
+export function wiggle(actor, params) {
     if (!St.Settings.get().enable_animations)
         return;
 

js/misc/dateUtils.js

@@ -1,11 +1,10 @@
-/* exported formatDateWithCFormatString, formatTime, formatTimeSpan, clearCachedLocalTimeZone */
+import * as System from 'system';
+import * as Gettext from 'gettext';
+import GLib from 'gi://GLib';
+import Gio from 'gi://Gio';
+import Shell from 'gi://Shell';
 
-const System = imports.system;
+import * as Params from './params.js';
-const Gettext = imports.gettext;
-const GLib = imports.gi.GLib;
-const Gio = imports.gi.Gio;
-const Shell = imports.gi.Shell;
-const Params = imports.misc.params;
 
 let _desktopSettings = null;
 let _localTimeZone = null;
@@ -39,7 +38,7 @@ function _convertJSDateToGLibDateTime(date) {
  * @param {string} format a format String for the date
  * @returns {string}
  */
-function formatDateWithCFormatString(date, format) {
+export function formatDateWithCFormatString(date, format) {
     const dt = _convertJSDateToGLibDateTime(date);
 
     return dt?.format(format) ?? '';
@@ -52,7 +51,7 @@ function formatDateWithCFormatString(date, format) {
  * @param {Date} date the start of the time span
  * @returns {string}
  */
-function formatTimeSpan(date) {
+export function formatTimeSpan(date) {
     if (_localTimeZone === null)
         _localTimeZone = GLib.TimeZone.new_local();
 
@@ -121,7 +120,7 @@ function formatTimeSpan(date) {
  * @param {boolean=} params.ampm whether to include the "am" or "pm" in the string
  * @returns {string}
  */
-function formatTime(time, params) {
+export function formatTime(time, params) {
     let date;
     // HACK: The built-in Date type sucks at timezones, which we need for the
     //       world clock; it's often more convenient though, so allow either
@@ -223,7 +222,7 @@ function formatTime(time, params) {
  * Update the timezone used by JavaScript Date objects and other
  * date utilities
  */
-function clearCachedLocalTimeZone() {
+export function clearCachedLocalTimeZone() {
     // SpiderMonkey caches the time zone so we must explicitly clear it
     // before we can update the calendar, see
     // https://bugzilla.gnome.org/show_bug.cgi?id=678507

js/misc/dbusUtils.js

@@ -1,4 +1,3 @@
-// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported loadInterfaceXML, loadSubInterfaceXML */
 
 const Config = imports.misc.config;

js/misc/extensionUtils.js

@@ -1,13 +1,10 @@
-/* exported ExtensionState, ExtensionType,
- * serializeExtension, deserializeExtension */
-
 // Common utils for the extension system, the extensions D-Bus service
 // and the Extensions app
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
 
-var ExtensionType = {
+export const ExtensionType = {
     SYSTEM: 1,
     PER_USER: 2,
 };
@@ -15,7 +12,7 @@ var ExtensionType = {
 /**
  * @enum {number}
  */
-var ExtensionState = {
+export const ExtensionState = {
     ENABLED: 1,
     DISABLED: 2,
     ERROR: 3,
@@ -47,7 +44,7 @@ const SERIALIZED_PROPERTIES = [
  * @param {object} extension - an extension object
  * @returns {object}
  */
-function serializeExtension(extension) {
+export function serializeExtension(extension) {
     let obj = {...extension.metadata};
 
     SERIALIZED_PROPERTIES.forEach(prop => {
@@ -83,7 +80,7 @@ function serializeExtension(extension) {
  * @param {object} variant - an unpacked {GLib.Variant}
  * @returns {object}
  */
-function deserializeExtension(variant) {
+export function deserializeExtension(variant) {
     let res = {metadata: {}};
     for (let prop in variant) {
         let val = variant[prop].unpack();

js/misc/fileUtils.js

@@ -1,11 +1,9 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported collectFromDatadirs, recursivelyDeleteDir,
-            recursivelyMoveDir, loadInterfaceXML, loadSubInterfaceXML */
 
-const Gio = imports.gi.Gio;
+import GLib from 'gi://GLib';
-const GLib = imports.gi.GLib;
+import Gio from 'gi://Gio';
 
-var { loadInterfaceXML } = imports.misc.dbusUtils;
+export const {loadInterfaceXML} = imports.misc.dbusUtils;
 
 /**
  * @typedef {object} SubdirInfo
@@ -20,7 +18,7 @@ var { loadInterfaceXML } = imports.misc.dbusUtils;
  * @returns {Generator<SubdirInfo, void, void>} a generator which yields file info for subdirectories named
  *                                              `subdir` within data directories
  */
-function* collectFromDatadirs(subdir, includeUserDir) {
+export function* collectFromDatadirs(subdir, includeUserDir) {
     let dataDirs = GLib.get_system_data_dirs();
     if (includeUserDir)
         dataDirs.unshift(GLib.get_user_data_dir());
@@ -48,7 +46,7 @@ function* collectFromDatadirs(subdir, includeUserDir) {
  * @param {Gio.File} dir
  * @param {boolean} deleteParent
  */
-function recursivelyDeleteDir(dir, deleteParent) {
+export function recursivelyDeleteDir(dir, deleteParent) {
     let children = dir.enumerate_children('standard::name,standard::type',
         Gio.FileQueryInfoFlags.NOFOLLOW_SYMLINKS, null);
 
@@ -70,7 +68,7 @@ function recursivelyDeleteDir(dir, deleteParent) {
  * @param {Gio.File} srcDir
  * @param {Gio.File} destDir
  */
-function recursivelyMoveDir(srcDir, destDir) {
+export function recursivelyMoveDir(srcDir, destDir) {
     let children = srcDir.enumerate_children('standard::name,standard::type',
         Gio.FileQueryInfoFlags.NOFOLLOW_SYMLINKS, null);
 

js/misc/gnomeSession.js

@@ -1,28 +1,27 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported PresenceStatus, Presence, Inhibitor, SessionManager, InhibitFlags */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from './fileUtils.js';
 
 const PresenceIface = loadInterfaceXML('org.gnome.SessionManager.Presence');
 
 /** @enum {number} */
-var PresenceStatus = {
+export const PresenceStatus = {
     AVAILABLE: 0,
     INVISIBLE: 1,
     BUSY: 2,
     IDLE: 3,
 };
 
-var PresenceProxy = Gio.DBusProxy.makeProxyWrapper(PresenceIface);
+const PresenceProxy = Gio.DBusProxy.makeProxyWrapper(PresenceIface);
 
 /**
  * @param {Function} initCallback
  * @param {Gio.Cancellable} cancellable
  * @returns {Gio.DBusProxy}
  */
-function Presence(initCallback, cancellable) {
+export function Presence(initCallback, cancellable) {
     return new PresenceProxy(Gio.DBus.session, 'org.gnome.SessionManager',
                              '/org/gnome/SessionManager/Presence', initCallback, cancellable);
 }
@@ -31,7 +30,7 @@ function Presence(initCallback, cancellable) {
 // change at runtime (changes always come in the form
 // of new inhibitors)
 const InhibitorIface = loadInterfaceXML('org.gnome.SessionManager.Inhibitor');
-var InhibitorProxy = Gio.DBusProxy.makeProxyWrapper(InhibitorIface);
+const InhibitorProxy = Gio.DBusProxy.makeProxyWrapper(InhibitorIface);
 
 /**
  * @param {string} objectPath
@@ -39,24 +38,24 @@ var InhibitorProxy = Gio.DBusProxy.makeProxyWrapper(InhibitorIface);
  * @param {Gio.Cancellable} cancellable
  * @returns {Gio.DBusProxy}
  */
-function Inhibitor(objectPath, initCallback, cancellable) {
+export function Inhibitor(objectPath, initCallback, cancellable) {
     return new InhibitorProxy(Gio.DBus.session, 'org.gnome.SessionManager', objectPath, initCallback, cancellable);
 }
 
 // Not the full interface, only the methods we use
 const SessionManagerIface = loadInterfaceXML('org.gnome.SessionManager');
-var SessionManagerProxy = Gio.DBusProxy.makeProxyWrapper(SessionManagerIface);
+const SessionManagerProxy = Gio.DBusProxy.makeProxyWrapper(SessionManagerIface);
 
 /**
  * @param {Function} initCallback
  * @param {Gio.Cancellable} cancellable
  * @returns {Gio.DBusProxy}
  */
-function SessionManager(initCallback, cancellable) {
+export function SessionManager(initCallback, cancellable) {
     return new SessionManagerProxy(Gio.DBus.session, 'org.gnome.SessionManager', '/org/gnome/SessionManager', initCallback, cancellable);
 }
 
-var InhibitFlags = {
+export const InhibitFlags = {
     LOGOUT: 1 << 0,
     SWITCH: 1 << 1,
     SUSPEND: 1 << 2,

js/misc/history.js

@@ -1,13 +1,12 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported HistoryManager */
 
-const Signals = imports.misc.signals;
+import * as Signals from './signals.js';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Params = imports.misc.params;
+import * as Params from './params.js';
 
-var DEFAULT_LIMIT = 512;
+const DEFAULT_LIMIT = 512;
 
-var HistoryManager = class extends Signals.EventEmitter {
+export class HistoryManager extends Signals.EventEmitter {
     constructor(params) {
         super();
 
@@ -111,4 +110,4 @@ var HistoryManager = class extends Signals.EventEmitter {
         if (this._key)
             global.settings.set_strv(this._key, this._history);
     }
-};
+}

js/misc/ibusManager.js

@@ -1,15 +1,15 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported getIBusManager */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const IBus = imports.gi.IBus;
+import IBus from 'gi://IBus';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const Signals = imports.misc.signals;
-const BoxPointer = imports.ui.boxpointer;
 
-const IBusCandidatePopup = imports.ui.ibusCandidatePopup;
+import * as Signals from './signals.js';
+import * as BoxPointer from '../ui/boxpointer.js';
+
+import * as IBusCandidatePopup from '../ui/ibusCandidatePopup.js';
 
 Gio._promisify(IBus.Bus.prototype,
     'list_engines_async', 'list_engines_async_finish');
@@ -49,13 +49,13 @@ function _checkIBusVersion(requiredMajor, requiredMinor, requiredMicro) {
 /**
  * @returns {IBusManager}
  */
-function getIBusManager() {
+export function getIBusManager() {
     if (_ibusManager == null)
         _ibusManager = new IBusManager();
     return _ibusManager;
 }
 
-var IBusManager = class extends Signals.EventEmitter {
+class IBusManager extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -410,4 +410,4 @@ var IBusManager = class extends Signals.EventEmitter {
         }
         return true;
     }
-};
+}

js/misc/inputMethod.js

@@ -1,22 +1,22 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported InputMethod */
-const Clutter = imports.gi.Clutter;
-const GLib = imports.gi.GLib;
-const Gio = imports.gi.Gio;
-const GObject = imports.gi.GObject;
-const IBus = imports.gi.IBus;
 
-const Keyboard = imports.ui.status.keyboard;
+import Clutter from 'gi://Clutter';
-const Main = imports.ui.main;
+import GLib from 'gi://GLib';
+import Gio from 'gi://Gio';
+import GObject from 'gi://GObject';
+import IBus from 'gi://IBus';
+
+import * as Keyboard from '../ui/status/keyboard.js';
+import * as Main from '../ui/main.js';
 
 Gio._promisify(IBus.Bus.prototype,
     'create_input_context_async', 'create_input_context_async_finish');
 Gio._promisify(IBus.InputContext.prototype,
     'process_key_event_async', 'process_key_event_async_finish');
 
-var HIDE_PANEL_TIME = 50;
+const HIDE_PANEL_TIME = 50;
 
-var InputMethod = GObject.registerClass({
+export const InputMethod = GObject.registerClass({
     Signals: {
         'surrounding-text-set': {},
         'terminal-mode-changed': {},

js/misc/introspect.js

@@ -1,9 +1,8 @@
-/* exported IntrospectService */
+import Gio from 'gi://Gio';
-const Gio = imports.gi.Gio;
+import GLib from 'gi://GLib';
-const GLib = imports.gi.GLib;
+import Meta from 'gi://Meta';
-const Meta = imports.gi.Meta;
+import Shell from 'gi://Shell';
-const Shell = imports.gi.Shell;
+import St from 'gi://St';
-const St = imports.gi.St;
 
 const APP_ALLOWLIST = [
     'org.freedesktop.impl.portal.desktop.gtk',
@@ -12,12 +11,12 @@ const APP_ALLOWLIST = [
 
 const INTROSPECT_DBUS_API_VERSION = 3;
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from './fileUtils.js';
-const { DBusSenderChecker } = imports.misc.util;
+import {DBusSenderChecker} from './util.js';
 
 const IntrospectDBusIface = loadInterfaceXML('org.gnome.Shell.Introspect');
 
-var IntrospectService = class {
+export class IntrospectService {
     constructor() {
         this._dbusImpl = Gio.DBusExportedObject.wrapJSObject(IntrospectDBusIface,
                                                              this);
@@ -218,4 +217,4 @@ var IntrospectService = class {
     get version() {
         return INTROSPECT_DBUS_API_VERSION;
     }
-};
+}

js/misc/jsParse.js

@@ -1,5 +1,4 @@
 /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
-/* exported getCompletions, getCommonPrefix, getDeclaredConstants */
 
 const AsyncFunction = async function () {}.constructor;
 
@@ -15,7 +14,7 @@ const AsyncFunction = async function () {}.constructor;
  * @param {string} commandHeader
  * @param {readonly string[]} [globalCompletionList]
  */
-async function getCompletions(text, commandHeader, globalCompletionList) {
+export async function getCompletions(text, commandHeader, globalCompletionList) {
     let methods = [];
     let expr_, base;
     let attrHead = '';
@@ -70,7 +69,7 @@ function isStopChar(c) {
  * @param {string} expr
  * @param {number} offset
  */
-function findMatchingQuote(expr, offset) {
+export function findMatchingQuote(expr, offset) {
     let quoteChar = expr.charAt(offset);
     for (let i = offset - 1; i >= 0; --i) {
         if (expr.charAt(i) == quoteChar && expr.charAt(i - 1) != '\\')
@@ -85,7 +84,7 @@ function findMatchingQuote(expr, offset) {
  * @param {string} expr
  * @param {number} offset
  */
-function findMatchingSlash(expr, offset) {
+export function findMatchingSlash(expr, offset) {
     for (let i = offset - 1; i >= 0; --i) {
         if (expr.charAt(i) == '/' && expr.charAt(i - 1) != '\\')
             return i;
@@ -102,7 +101,7 @@ function findMatchingSlash(expr, offset) {
  * @param {string} expr
  * @param {number} offset
  */
-function findMatchingBrace(expr, offset) {
+export function findMatchingBrace(expr, offset) {
     let closeBrace = expr.charAt(offset);
     let openBrace = { ')': '(', ']': '[' }[closeBrace];
 
@@ -115,7 +114,7 @@ function findMatchingBrace(expr, offset) {
  * @param  {...any} braces
  * @returns {number}
  */
-function findTheBrace(expr, offset, ...braces) {
+export function findTheBrace(expr, offset, ...braces) {
     let [openBrace, closeBrace] = braces;
 
     if (offset < 0)
@@ -146,7 +145,7 @@ function findTheBrace(expr, offset, ...braces) {
  * @param {string} expr
  * @param {number} offset
  */
-function getExpressionOffset(expr, offset) {
+export function getExpressionOffset(expr, offset) {
     while (offset >= 0) {
         let currChar = expr.charAt(offset);
 
@@ -178,7 +177,7 @@ function isValidPropertyName(w) {
  *
  * @param {object} obj
  */
-function getAllProps(obj) {
+export function getAllProps(obj) {
     if (obj === null || obj === undefined)
         return [];
 
@@ -195,7 +194,7 @@ function getAllProps(obj) {
  * @param {string} expr
  * @param {string=} commandHeader
  */
-async function getPropertyNamesFromExpression(expr, commandHeader = '') {
+export async function getPropertyNamesFromExpression(expr, commandHeader = '') {
     let obj = {};
     if (!isUnsafeExpression(expr)) {
         try {
@@ -227,7 +226,7 @@ async function getPropertyNamesFromExpression(expr, commandHeader = '') {
  *
  * @param {readonly string[]} words
  */
-function getCommonPrefix(words) {
+export function getCommonPrefix(words) {
     let word = words[0];
     for (let i = 0; i < word.length; i++) {
         for (let w = 1; w < words.length; w++) {
@@ -243,7 +242,7 @@ function getCommonPrefix(words) {
  *
  * @param {string} str
  */
-function removeLiterals(str) {
+export function removeLiterals(str) {
     if (str.length == 0)
         return '';
 
@@ -265,7 +264,7 @@ function removeLiterals(str) {
  *
  * @param {string} str
  */
-function isUnsafeExpression(str) {
+export function isUnsafeExpression(str) {
     // Check for any sort of assignment
     // The strategy used is dumb: remove any quotes
     // or regexs and comparison operators and see if there is an '=' character.
@@ -290,7 +289,7 @@ function isUnsafeExpression(str) {
  *
  * @param {string} str
  */
-function getDeclaredConstants(str) {
+export function getDeclaredConstants(str) {
     let ret = [];
     str.split(';').forEach(s => {
         let base_, keyword;

js/misc/keyboardManager.js

@@ -1,21 +1,20 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported getKeyboardManager, holdKeyboard, releaseKeyboard */
 
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GnomeDesktop = imports.gi.GnomeDesktop;
+import GnomeDesktop from 'gi://GnomeDesktop';
 
-const Main = imports.ui.main;
+import * as Main from '../ui/main.js';
 
-var DEFAULT_LOCALE = 'en_US';
+export const DEFAULT_LOCALE = 'en_US';
-var DEFAULT_LAYOUT = 'us';
+export const DEFAULT_LAYOUT = 'us';
-var DEFAULT_VARIANT = '';
+export const DEFAULT_VARIANT = '';
 
 let _xkbInfo = null;
 
 /**
  * @returns {GnomeDesktop.XkbInfo}
  */
-function getXkbInfo() {
+export function getXkbInfo() {
     if (_xkbInfo == null)
         _xkbInfo = new GnomeDesktop.XkbInfo();
     return _xkbInfo;
@@ -26,24 +25,24 @@ let _keyboardManager = null;
 /**
  * @returns {KeyboardManager}
  */
-function getKeyboardManager() {
+export function getKeyboardManager() {
     if (_keyboardManager == null)
         _keyboardManager = new KeyboardManager();
     return _keyboardManager;
 }
 
-function releaseKeyboard() {
+export function releaseKeyboard() {
     if (Main.modalCount > 0)
         global.display.unfreeze_keyboard(global.get_current_time());
     else
         global.display.ungrab_keyboard(global.get_current_time());
 }
 
-function holdKeyboard() {
+export function holdKeyboard() {
     global.display.freeze_keyboard(global.get_current_time());
 }
 
-var KeyboardManager = class {
+class KeyboardManager {
     constructor() {
         // The XKB protocol doesn't allow for more that 4 layouts in a
         // keymap. Wayland doesn't impose this limit and libxkbcommon can
@@ -167,4 +166,4 @@ var KeyboardManager = class {
     get currentLayout() {
         return this._current;
     }
-};
+}

js/misc/loginManager.js

@@ -1,11 +1,10 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported canLock, getLoginManager, registerSessionWithGDM */
 
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const Signals = imports.misc.signals;
+import * as Signals from './signals.js';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from './fileUtils.js';
 
 const SystemdLoginManagerIface = loadInterfaceXML('org.freedesktop.login1.Manager');
 const SystemdLoginSessionIface = loadInterfaceXML('org.freedesktop.login1.Session');
@@ -36,7 +35,7 @@ function versionCompare(required, reference) {
 /**
  * @returns {boolean}
  */
-function canLock() {
+export function canLock() {
     try {
         let params = GLib.Variant.new('(ss)', ['org.gnome.DisplayManager.Manager', 'Version']);
         let result = Gio.DBus.system.call_sync('org.gnome.DisplayManager',
@@ -53,8 +52,7 @@ function canLock() {
     }
 }
 
-
+export async function registerSessionWithGDM() {
-async function registerSessionWithGDM() {
     log("Registering session with GDM");
     try {
         await Gio.DBus.system.call(
@@ -79,7 +77,7 @@ let _loginManager = null;
  * An abstraction over systemd/logind and ConsoleKit.
  * @returns {LoginManagerSystemd | LoginManagerDummy} - the LoginManager singleton
  */
-function getLoginManager() {
+export function getLoginManager() {
     if (_loginManager == null) {
         if (haveSystemd())
             _loginManager = new LoginManagerSystemd();
@@ -90,7 +88,7 @@ function getLoginManager() {
     return _loginManager;
 }
 
-var LoginManagerSystemd = class extends Signals.EventEmitter {
+class LoginManagerSystemd extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -207,9 +205,9 @@ var LoginManagerSystemd = class extends Signals.EventEmitter {
     _prepareForSleep(proxy, sender, [aboutToSuspend]) {
         this.emit('prepare-for-sleep', aboutToSuspend);
     }
-};
+}
 
-var LoginManagerDummy = class extends Signals.EventEmitter  {
+class LoginManagerDummy extends Signals.EventEmitter  {
     getCurrentSessionProxy() {
         // we could return a DummySession object that fakes whatever callers
         // expect (at the time of writing: connect() and connectSignal()
@@ -247,4 +245,4 @@ var LoginManagerDummy = class extends Signals.EventEmitter  {
     async inhibit() {
         return null;
     }
-};
+}

js/misc/modemManager.js

@@ -1,12 +1,11 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported ModemBase, ModemGsm, ModemCdma, BroadbandModem  */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const NM = imports.gi.NM;
+import NM from 'gi://NM';
-const NMA4 = imports.gi.NMA4;
+import NMA4 from 'gi://NMA4';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from './fileUtils.js';
 
 let _mpd;
 
@@ -105,7 +104,7 @@ const ModemGsmNetworkProxy = Gio.DBusProxy.makeProxyWrapper(ModemGsmNetworkInter
 const ModemCdmaInterface = loadInterfaceXML('org.freedesktop.ModemManager.Modem.Cdma');
 const ModemCdmaProxy = Gio.DBusProxy.makeProxyWrapper(ModemCdmaInterface);
 
-var ModemBase = GObject.registerClass({
+const ModemBase = GObject.registerClass({
     GTypeFlags: GObject.TypeFlags.ABSTRACT,
     Properties: {
         'operator-name': GObject.ParamSpec.string(
@@ -147,7 +146,7 @@ var ModemBase = GObject.registerClass({
     }
 });
 
-var ModemGsm = GObject.registerClass(
+export const ModemGsm = GObject.registerClass(
 class ModemGsm extends ModemBase {
     _init(path) {
         super._init();
@@ -181,7 +180,7 @@ class ModemGsm extends ModemBase {
     }
 });
 
-var ModemCdma = GObject.registerClass(
+export const ModemCdma = GObject.registerClass(
 class ModemCdma extends ModemBase {
     _init(path) {
         super._init();
@@ -234,7 +233,7 @@ const BroadbandModem3gppProxy = Gio.DBusProxy.makeProxyWrapper(BroadbandModem3gp
 const BroadbandModemCdmaInterface = loadInterfaceXML('org.freedesktop.ModemManager1.Modem.ModemCdma');
 const BroadbandModemCdmaProxy = Gio.DBusProxy.makeProxyWrapper(BroadbandModemCdmaInterface);
 
-var BroadbandModem = GObject.registerClass({
+export const BroadbandModem = GObject.registerClass({
     Properties: {
         'capabilities': GObject.ParamSpec.flags(
             'capabilities', 'capabilities', 'capabilities',

js/misc/objectManager.js

@@ -1,10 +1,9 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported ObjectManager */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const Params = imports.misc.params;
+import * as Params from './params.js';
-const Signals = imports.misc.signals;
+import * as Signals from './signals.js';
 
 // Specified in the D-Bus specification here:
 // http://dbus.freedesktop.org/doc/dbus-specification.html#standard-interfaces-objectmanager
@@ -27,7 +26,7 @@ const ObjectManagerIface = `
 
 const ObjectManagerInfo = Gio.DBusInterfaceInfo.new_for_xml(ObjectManagerIface);
 
-var ObjectManager = class extends Signals.EventEmitter {
+export class ObjectManager extends Signals.EventEmitter {
     constructor(params) {
         super();
 
@@ -259,4 +258,4 @@ var ObjectManager = class extends Signals.EventEmitter {
 
         return proxies;
     }
-};
+}

js/misc/params.js

@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported parse */
 
 /**
  * parse:
@@ -18,7 +17,7 @@
  * @returns a new object, containing the merged parameters from
  * `params` and `defaults`
  */
-function parse(params = {}, defaults, allowExtras) {
+export function parse(params = {}, defaults, allowExtras) {
     if (!allowExtras) {
         for (let prop in params) {
             if (!(prop in defaults))

js/misc/parentalControlsManager.js

@@ -21,19 +21,17 @@
 // along with this program; if not, write to the Free Software
 // Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 
-/* exported getDefault */
+import Gio from 'gi://Gio';
-
+import GObject from 'gi://GObject';
-const Gio = imports.gi.Gio;
+import Shell from 'gi://Shell';
-const GObject = imports.gi.GObject;
-const Shell = imports.gi.Shell;
 
 // We require libmalcontent ≥ 0.6.0
 const HAVE_MALCONTENT = imports.package.checkSymbol(
     'Malcontent', '0', 'ManagerGetValueFlags');
 
-var Malcontent = null;
+let Malcontent = null;
 if (HAVE_MALCONTENT) {
-    Malcontent = imports.gi.Malcontent;
+    ({default: Malcontent} = await import('gi://Malcontent?version=0'));
     Gio._promisify(Malcontent.Manager.prototype, 'get_app_filter_async');
 }
 
@@ -42,7 +40,7 @@ let _singleton = null;
 /**
  * @returns {ParentalControlsManager}
  */
-function getDefault() {
+export function getDefault() {
     if (_singleton === null)
         _singleton = new ParentalControlsManager();
 
@@ -53,7 +51,7 @@ function getDefault() {
 // parental controls settings. It’s possible for the user’s parental controls
 // to change at runtime if the Parental Controls application is used by an
 // administrator from within the user’s session.
-var ParentalControlsManager = GObject.registerClass({
+const ParentalControlsManager = GObject.registerClass({
     Signals: {
         'app-filter-changed': {},
     },

js/misc/permissionStore.js

@@ -1,9 +1,8 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported PermissionStore */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from './fileUtils.js';
 
 const PermissionStoreIface = loadInterfaceXML('org.freedesktop.impl.portal.PermissionStore');
 const PermissionStoreProxy = Gio.DBusProxy.makeProxyWrapper(PermissionStoreIface);
@@ -13,7 +12,7 @@ const PermissionStoreProxy = Gio.DBusProxy.makeProxyWrapper(PermissionStoreIface
  * @param {Gio.Cancellable} cancellable
  * @returns {Gio.DBusProxy}
  */
-function PermissionStore(initCallback, cancellable) {
+export function PermissionStore(initCallback, cancellable) {
     return new PermissionStoreProxy(Gio.DBus.session,
                                     'org.freedesktop.impl.portal.PermissionStore',
                                     '/org/freedesktop/impl/portal/PermissionStore',

js/misc/signalTracker.js

@@ -1,5 +1,4 @@
-/* exported TransientSignalHolder, connectObject, disconnectObject */
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
 
 const destroyableTypes = [];
 
@@ -12,7 +11,7 @@ function _hasDestroySignal(obj) {
     return destroyableTypes.some(type => obj instanceof type);
 }
 
-var TransientSignalHolder = GObject.registerClass(
+export const TransientSignalHolder = GObject.registerClass(
 class TransientSignalHolder extends GObject.Object {
     static [GObject.signals] = {
         'destroy': {},
@@ -207,7 +206,7 @@ class SignalTracker {
  * with an optional flags value, followed by an object to track
  * @returns {void}
  */
-function connectObject(thisObj, ...args) {
+export function connectObject(thisObj, ...args) {
     const getParams = argArray => {
         const [signalName, handler, arg, ...rest] = argArray;
         if (typeof arg !== 'number')
@@ -254,7 +253,7 @@ function connectObject(thisObj, ...args) {
  * @param {Object} obj - the tracked object
  * @returns {void}
  */
-function disconnectObject(thisObj, obj) {
+export function disconnectObject(thisObj, obj) {
     SignalManager.getDefault().maybeGetSignalTracker(thisObj)?.untrack(obj);
 }
 
@@ -264,7 +263,7 @@ function disconnectObject(thisObj, obj) {
  *
  * @param {GObject.Type} gtype - a GObject type
  */
-function registerDestroyableType(gtype) {
+export function registerDestroyableType(gtype) {
     if (!GObject.type_is_a(gtype, GObject.Object))
         throw new Error(`${gtype} is not a GObject subclass`);
 

js/misc/signals.js

@@ -1,7 +1,8 @@
-const Signals = imports.signals;
+import * as SignalTracker from './signalTracker.js';
-const SignalTracker = imports.misc.signalTracker;
 
-var EventEmitter = class EventEmitter {
+const Signals = imports.signals;
+
+export class EventEmitter {
     connectObject(...args) {
         return SignalTracker.connectObject(this, ...args);
     }
@@ -17,6 +18,6 @@ var EventEmitter = class EventEmitter {
     disconnect_object(...args) {
         return this.disconnectObject(...args);
     }
-};
+}
 
 Signals.addSignalMethods(EventEmitter.prototype);

js/misc/smartcardManager.js

@@ -1,10 +1,9 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported getSmartcardManager */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const Signals = imports.misc.signals;
+import * as Signals from './signals.js';
 
-const ObjectManager = imports.misc.objectManager;
+import * as ObjectManager from './objectManager.js';
 
 const SmartcardTokenIface = `
 <node>
@@ -21,14 +20,14 @@ let _smartcardManager = null;
 /**
  * @returns {SmartcardManager}
  */
-function getSmartcardManager() {
+export function getSmartcardManager() {
     if (_smartcardManager == null)
         _smartcardManager = new SmartcardManager();
 
     return _smartcardManager;
 }
 
-var SmartcardManager = class extends Signals.EventEmitter {
+class SmartcardManager extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -119,4 +118,4 @@ var SmartcardManager = class extends Signals.EventEmitter {
 
         return true;
     }
-};
+}

js/misc/systemActions.js

@@ -1,15 +1,14 @@
-/* exported getDefault */
+import AccountsService from 'gi://AccountsService';
-const AccountsService = imports.gi.AccountsService;
+import Clutter from 'gi://Clutter';
-const Clutter = imports.gi.Clutter;
+import Gdm from 'gi://Gdm';
-const Gdm = imports.gi.Gdm;
+import Gio from 'gi://Gio';
-const Gio = imports.gi.Gio;
+import GLib from 'gi://GLib';
-const GLib = imports.gi.GLib;
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
 
-const GnomeSession = imports.misc.gnomeSession;
+import * as GnomeSession from './gnomeSession.js';
-const LoginManager = imports.misc.loginManager;
+import * as LoginManager from './loginManager.js';
-const Main = imports.ui.main;
+import * as Main from '../ui/main.js';
-const Screenshot = imports.ui.screenshot;
+import * as Screenshot from '../ui/screenshot.js';
 
 const LOCKDOWN_SCHEMA = 'org.gnome.desktop.lockdown';
 const LOGIN_SCREEN_SCHEMA = 'org.gnome.login-screen';
@@ -33,7 +32,7 @@ let _singleton = null;
 /**
  * @returns {SystemActions}
  */
-function getDefault() {
+export function getDefault() {
     if (_singleton == null)
         _singleton = new SystemActions();
 

js/misc/util.js

@@ -1,16 +1,13 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported findUrls, spawn, spawnCommandLine, spawnApp, trySpawnCommandLine,
-            createTimeLabel, insertSorted, lerp, GNOMEversionCompare,
-            DBusSenderChecker, Highlighter */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
-const GnomeDesktop = imports.gi.GnomeDesktop;
+import GnomeDesktop from 'gi://GnomeDesktop';
 
-const Main = imports.ui.main;
+import * as Main from '../ui/main.js';
-const {formatTime} = imports.misc.dateUtils;
+import {formatTime} from './dateUtils.js';
 
 // http://daringfireball.net/2010/07/improved_regex_for_matching_urls
 const _balancedParens = '\\([^\\s()<>]+\\)';
@@ -52,7 +49,7 @@ let _desktopSettings = null;
  *
  * @returns {{url: string, pos: number}[]} the list of match objects, as described above
  */
-function findUrls(str) {
+export function findUrls(str) {
     let res = [], match;
     while ((match = _urlRegexp.exec(str)))
         res.push({ url: match[2], pos: match.index + match[1].length });
@@ -67,7 +64,7 @@ function findUrls(str) {
  *
  * @param {readonly string[]} argv an argv array
  */
-function spawn(argv) {
+export function spawn(argv) {
     try {
         trySpawn(argv);
     } catch (err) {
@@ -83,7 +80,7 @@ function spawn(argv) {
  * Runs commandLine in the background, handling any errors that
  * occur when trying to parse or start the program.
  */
-function spawnCommandLine(commandLine) {
+export function spawnCommandLine(commandLine) {
     try {
         let [success_, argv] = GLib.shell_parse_argv(commandLine);
         trySpawn(argv);
@@ -99,7 +96,7 @@ function spawnCommandLine(commandLine) {
  *
  * Runs argv as if it was an application, handling startup notification
  */
-function spawnApp(argv) {
+export function spawnApp(argv) {
     try {
         let app = Gio.AppInfo.create_from_commandline(argv.join(' '), null,
                                                       Gio.AppInfoCreateFlags.SUPPORTS_STARTUP_NOTIFICATION);
@@ -169,7 +166,7 @@ function trySpawn(argv) {
  * Runs commandLine in the background. If launching commandLine
  * fails, this will throw an error.
  */
-function trySpawnCommandLine(commandLine) {
+export function trySpawnCommandLine(commandLine) {
     let success_, argv;
 
     try {
@@ -197,7 +194,7 @@ function _handleSpawnError(command, err) {
  * @param {object} params params for {@link formatTime}
  * @returns {St.Label}
  */
-function createTimeLabel(date, params) {
+export function createTimeLabel(date, params) {
     if (_desktopSettings == null)
         _desktopSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.interface' });
 
@@ -264,7 +261,7 @@ function lowerBound(array, val, cmp) {
  *
  * Returns the position at which it was inserted
  */
-function insertSorted(array, val, cmp) {
+export function insertSorted(array, val, cmp) {
     let pos = lowerBound(array, val, cmp);
     array.splice(pos, 0, val);
 
@@ -277,7 +274,7 @@ function insertSorted(array, val, cmp) {
  * @param {number} progress
  * @returns {number}
  */
-function lerp(start, end, progress) {
+export function lerp(start, end, progress) {
     return start + progress * (end - start);
 }
 
@@ -311,7 +308,7 @@ function _GNOMEversionToNumber(version) {
  * Returns an integer less than, equal to, or greater than
  * zero, if `version1` is older, equal or newer than `version2`
  */
-function GNOMEversionCompare(version1, version2) {
+export function GNOMEversionCompare(version1, version2) {
     const v1Array = version1.split('.');
     const v2Array = version2.split('.');
 
@@ -327,7 +324,7 @@ function GNOMEversionCompare(version1, version2) {
     return 0;
 }
 
-var DBusSenderChecker = class {
+export class DBusSenderChecker {
     /**
      * @param {string[]} allowList - list of allowed well-known names
      */
@@ -402,10 +399,10 @@ var DBusSenderChecker = class {
             Gio.DBus.unwatch_name(id);
         this._watchList = [];
     }
-};
+}
 
 /* @class Highlighter Highlight given terms in text using markup. */
-var Highlighter = class {
+export class Highlighter {
     /**
      * @param {?string[]} terms - list of terms to highlight
      */
@@ -454,4 +451,4 @@ var Highlighter = class {
 
         return escaped.join('');
     }
-};
+}

js/misc/weather.js

@@ -1,16 +1,15 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported WeatherClient */
 
-const Geoclue = imports.gi.Geoclue;
+import Geoclue from 'gi://Geoclue';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GWeather = imports.gi.GWeather;
+import GWeather from 'gi://GWeather';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const Signals = imports.misc.signals;
+import * as Signals from './signals.js';
 
-const PermissionStore = imports.misc.permissionStore;
+import * as PermissionStore from './permissionStore.js';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from './fileUtils.js';
 
 Gio._promisify(Geoclue.Simple, 'new');
 
@@ -23,9 +22,9 @@ const WEATHER_INTEGRATION_IFACE = 'org.gnome.Shell.WeatherIntegration';
 const WEATHER_APP_ID = 'org.gnome.Weather.desktop';
 
 // Minimum time between updates to show loading indication
-var UPDATE_THRESHOLD = 10 * GLib.TIME_SPAN_MINUTE;
+const UPDATE_THRESHOLD = 10 * GLib.TIME_SPAN_MINUTE;
 
-var WeatherClient = class extends Signals.EventEmitter {
+export class WeatherClient extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -326,4 +325,4 @@ var WeatherClient = class extends Signals.EventEmitter {
 
         this._updateAutoLocation();
     }
-};
+}

js/portalHelper/main.js

@@ -11,7 +11,7 @@ import {programInvocationName, programArgs} from 'system';
 const _ = Gettext.gettext;
 
 const Config = imports.misc.config;
-const {loadInterfaceXML} = imports.misc.fileUtils;
+import {loadInterfaceXML} from './fileUtils.js';
 
 const PortalHelperResult = {
     CANCELLED: 0,
@@ -39,7 +39,7 @@ const CONNECTIVITY_RECHECK_RATELIMIT_TIMEOUT = 30 * GLib.USEC_PER_SEC;
 
 const HelperDBusInterface = loadInterfaceXML('org.gnome.Shell.PortalHelper');
 
-var PortalSecurityButton = GObject.registerClass(
+const PortalSecurityButton = GObject.registerClass(
 class PortalSecurityButton extends Gtk.MenuButton {
     _init() {
         const popover = new Gtk.Popover();
@@ -107,7 +107,7 @@ class PortalSecurityButton extends Gtk.MenuButton {
     }
 });
 
-var PortalWindow = GObject.registerClass(
+const PortalWindow = GObject.registerClass(
 class PortalWindow extends Gtk.ApplicationWindow {
     _init(application, url, timestamp, doneCallback) {
         super._init({
@@ -281,7 +281,7 @@ class PortalWindow extends Gtk.ApplicationWindow {
     }
 });
 
-var WebPortalHelper = GObject.registerClass(
+const WebPortalHelper = GObject.registerClass(
 class WebPortalHelper extends Adw.Application {
     _init() {
         super._init({

js/ui/accessDialog.js

@@ -1,29 +1,28 @@
-/* exported AccessDialogDBus */
+import Clutter from 'gi://Clutter';
-const Clutter = imports.gi.Clutter;
+import Gio from 'gi://Gio';
-const Gio = imports.gi.Gio;
+import GLib from 'gi://GLib';
-const GLib = imports.gi.GLib;
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
+import Pango from 'gi://Pango';
-const Pango = imports.gi.Pango;
+import Shell from 'gi://Shell';
-const Shell = imports.gi.Shell;
+import St from 'gi://St';
-const St = imports.gi.St;
 
-const CheckBox = imports.ui.checkBox;
+import * as CheckBox from './checkBox.js';
-const Dialog = imports.ui.dialog;
+import * as Dialog from './dialog.js';
-const ModalDialog = imports.ui.modalDialog;
+import * as ModalDialog from './modalDialog.js';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from '../misc/fileUtils.js';
 
 const RequestIface = loadInterfaceXML('org.freedesktop.impl.portal.Request');
 const AccessIface = loadInterfaceXML('org.freedesktop.impl.portal.Access');
 
 /** @enum {number} */
-var DialogResponse = {
+const DialogResponse = {
     OK: 0,
     CANCEL: 1,
     CLOSED: 2,
 };
 
-var AccessDialog = GObject.registerClass(
+const AccessDialog = GObject.registerClass(
 class AccessDialog extends ModalDialog.ModalDialog {
     _init(invocation, handle, title, description, body, options) {
         super._init({ styleClass: 'access-dialog' });
@@ -128,7 +127,7 @@ class AccessDialog extends ModalDialog.ModalDialog {
     }
 });
 
-var AccessDialogDBus = class {
+export class AccessDialogDBus {
     constructor() {
         this._accessDialog = null;
 
@@ -166,4 +165,4 @@ var AccessDialogDBus = class {
 
         this._accessDialog = dialog;
     }
-};
+}

js/ui/altTab.js

@@ -1,33 +1,31 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported AppSwitcherPopup, GroupCyclerPopup, WindowSwitcherPopup,
-            WindowCyclerPopup */
 
-const Atk = imports.gi.Atk;
+import Atk from 'gi://Atk';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import St from 'gi://St';
-const St = imports.gi.St;
+import Shell from 'gi://Shell';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const SwitcherPopup = imports.ui.switcherPopup;
+import * as SwitcherPopup from './switcherPopup.js';
 
-var APP_ICON_HOVER_TIMEOUT = 200; // milliseconds
+const APP_ICON_HOVER_TIMEOUT = 200; // milliseconds
 
-var THUMBNAIL_DEFAULT_SIZE = 256;
+const THUMBNAIL_DEFAULT_SIZE = 256;
-var THUMBNAIL_POPUP_TIME = 500; // milliseconds
+const THUMBNAIL_POPUP_TIME = 500; // milliseconds
-var THUMBNAIL_FADE_TIME = 100; // milliseconds
+const THUMBNAIL_FADE_TIME = 100; // milliseconds
 
-var WINDOW_PREVIEW_SIZE = 128;
+const WINDOW_PREVIEW_SIZE = 128;
-var APP_ICON_SIZE = 96;
+const APP_ICON_SIZE = 96;
-var APP_ICON_SIZE_SMALL = 48;
+const APP_ICON_SIZE_SMALL = 48;
 
 const baseIconSizes = [96, 64, 48, 32, 22];
 
 /** @enum {number} */
-var AppIconMode = {
+const AppIconMode = {
     THUMBNAIL_ONLY: 1,
     APP_ICON_ONLY: 2,
     BOTH: 3,
@@ -48,20 +46,23 @@ function _createWindowClone(window, size) {
     });
 }
 
+/**
+ * @param {Meta.Workspace} workspace
+ * @returns {Meta.Window}
+ */
 function getWindows(workspace) {
     // We ignore skip-taskbar windows in switchers, but if they are attached
     // to their parent, their position in the MRU list may be more appropriate
     // than the parent; so start with the complete list ...
-    let windows = global.display.get_tab_list(Meta.TabList.NORMAL_ALL,
+    let windows = global.display.get_tab_list(Meta.TabList.NORMAL_ALL, workspace);
-                                              workspace);
     // ... map windows to their parent where appropriate ...
     return windows.map(w => {
         return w.is_attached_dialog() ? w.get_transient_for() : w;
     // ... and filter out skip-taskbar windows and duplicates
-    }).filter((w, i, a) => !w.skip_taskbar && a.indexOf(w) == i);
+    }).filter((w, i, a) => !w.skip_taskbar && a.indexOf(w) === i);
 }
 
-var AppSwitcherPopup = GObject.registerClass(
+export const AppSwitcherPopup = GObject.registerClass(
 class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
     _init() {
         super._init();
@@ -404,7 +405,7 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
     }
 });
 
-var CyclerHighlight = GObject.registerClass(
+const CyclerHighlight = GObject.registerClass(
 class CyclerHighlight extends St.Widget {
     _init() {
         super._init({ layout_manager: new Clutter.BinLayout() });
@@ -470,7 +471,7 @@ class CyclerHighlight extends St.Widget {
 
 // We don't show an actual popup, so just provide what SwitcherPopup
 // expects instead of inheriting from SwitcherList
-var CyclerList = GObject.registerClass({
+const CyclerList = GObject.registerClass({
     Signals: {
         'item-activated': { param_types: [GObject.TYPE_INT] },
         'item-entered': { param_types: [GObject.TYPE_INT] },
@@ -483,7 +484,7 @@ var CyclerList = GObject.registerClass({
     }
 });
 
-var CyclerPopup = GObject.registerClass({
+const CyclerPopup = GObject.registerClass({
     GTypeFlags: GObject.TypeFlags.ABSTRACT,
 }, class CyclerPopup extends SwitcherPopup.SwitcherPopup {
     _init() {
@@ -539,7 +540,7 @@ var CyclerPopup = GObject.registerClass({
 });
 
 
-var GroupCyclerPopup = GObject.registerClass(
+export const GroupCyclerPopup = GObject.registerClass(
 class GroupCyclerPopup extends CyclerPopup {
     _init() {
         this._settings = new Gio.Settings({ schema_id: 'org.gnome.shell.app-switcher' });
@@ -572,7 +573,7 @@ class GroupCyclerPopup extends CyclerPopup {
     }
 });
 
-var WindowSwitcherPopup = GObject.registerClass(
+export const WindowSwitcherPopup = GObject.registerClass(
 class WindowSwitcherPopup extends SwitcherPopup.SwitcherPopup {
     _init() {
         super._init();
@@ -630,7 +631,7 @@ class WindowSwitcherPopup extends SwitcherPopup.SwitcherPopup {
     }
 });
 
-var WindowCyclerPopup = GObject.registerClass(
+export const WindowCyclerPopup = GObject.registerClass(
 class WindowCyclerPopup extends CyclerPopup {
     _init() {
         this._settings = new Gio.Settings({ schema_id: 'org.gnome.shell.window-switcher' });
@@ -661,7 +662,7 @@ class WindowCyclerPopup extends CyclerPopup {
     }
 });
 
-var AppIcon = GObject.registerClass(
+export const AppIcon = GObject.registerClass(
 class AppIcon extends St.BoxLayout {
     _init(app) {
         super._init({
@@ -688,7 +689,7 @@ class AppIcon extends St.BoxLayout {
     }
 });
 
-var AppSwitcher = GObject.registerClass(
+const AppSwitcher = GObject.registerClass(
 class AppSwitcher extends SwitcherPopup.SwitcherList {
     _init(apps, altTabPopup) {
         super._init(true);
@@ -905,7 +906,7 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
     }
 });
 
-var ThumbnailSwitcher = GObject.registerClass(
+const ThumbnailSwitcher = GObject.registerClass(
 class ThumbnailSwitcher extends SwitcherPopup.SwitcherList {
     _init(windows) {
         super._init(false);
@@ -995,7 +996,7 @@ class ThumbnailSwitcher extends SwitcherPopup.SwitcherList {
     }
 });
 
-var WindowIcon = GObject.registerClass(
+export const WindowIcon = GObject.registerClass(
 class WindowIcon extends St.BoxLayout {
     _init(window, mode) {
         super._init({
@@ -1055,7 +1056,7 @@ class WindowIcon extends St.BoxLayout {
     }
 });
 
-var WindowSwitcher = GObject.registerClass(
+const WindowSwitcher = GObject.registerClass(
 class WindowSwitcher extends SwitcherPopup.SwitcherList {
     _init(windows, mode) {
         super._init(true);

js/ui/animation.js

@@ -1,19 +1,18 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Animation, AnimatedIcon, Spinner */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
 
-var ANIMATED_ICON_UPDATE_TIMEOUT = 16;
+const ANIMATED_ICON_UPDATE_TIMEOUT = 16;
-var SPINNER_ANIMATION_TIME = 300;
+const SPINNER_ANIMATION_TIME = 300;
-var SPINNER_ANIMATION_DELAY = 1000;
+const SPINNER_ANIMATION_DELAY = 1000;
 
-var Animation = GObject.registerClass(
+export const Animation = GObject.registerClass(
 class Animation extends St.Bin {
     _init(file, width, height, speed) {
         const themeContext = St.ThemeContext.get_for_stage(global.stage);
@@ -118,14 +117,14 @@ class Animation extends St.Bin {
     }
 });
 
-var AnimatedIcon = GObject.registerClass(
+export const AnimatedIcon = GObject.registerClass(
 class AnimatedIcon extends Animation {
     _init(file, size) {
         super._init(file, size, size, ANIMATED_ICON_UPDATE_TIMEOUT);
     }
 });
 
-var Spinner = GObject.registerClass(
+export const Spinner = GObject.registerClass(
 class Spinner extends AnimatedIcon {
     _init(size, params) {
         params = Params.parse(params, {

js/ui/appDisplay.js

@@ -1,46 +1,46 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported AppDisplay, AppSearchProvider */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import GLib from 'gi://GLib';
-const GLib = imports.gi.GLib;
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
+import Gio from 'gi://Gio';
-const Graphene = imports.gi.Graphene;
+import Graphene from 'gi://Graphene';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const AppFavorites = imports.ui.appFavorites;
+import * as AppFavorites from './appFavorites.js';
-const { AppMenu } = imports.ui.appMenu;
+import {AppMenu} from './appMenu.js';
-const BoxPointer = imports.ui.boxpointer;
+import * as BoxPointer from './boxpointer.js';
-const DND = imports.ui.dnd;
+import * as DND from './dnd.js';
-const GrabHelper = imports.ui.grabHelper;
+import * as GrabHelper from './grabHelper.js';
-const IconGrid = imports.ui.iconGrid;
+import * as IconGrid from './iconGrid.js';
-const Layout = imports.ui.layout;
+import * as Layout from './layout.js';
-const Main = imports.ui.main;
+import * as PageIndicators from './pageIndicators.js';
-const PageIndicators = imports.ui.pageIndicators;
+import * as ParentalControlsManager from '../misc/parentalControlsManager.js';
-const ParentalControlsManager = imports.misc.parentalControlsManager;
+import * as PopupMenu from './popupMenu.js';
-const PopupMenu = imports.ui.popupMenu;
+import * as Search from './search.js';
-const Search = imports.ui.search;
+import * as SwipeTracker from './swipeTracker.js';
-const SwipeTracker = imports.ui.swipeTracker;
+import * as Params from '../misc/params.js';
-const Params = imports.misc.params;
+import * as SystemActions from '../misc/systemActions.js';
-const SystemActions = imports.misc.systemActions;
 
-var MENU_POPUP_TIMEOUT = 600;
+import * as Main from './main.js';
-var POPDOWN_DIALOG_TIMEOUT = 500;
 
-var FOLDER_SUBICON_FRACTION = .4;
+const MENU_POPUP_TIMEOUT = 600;
+const POPDOWN_DIALOG_TIMEOUT = 500;
 
-var VIEWS_SWITCH_TIME = 400;
+const FOLDER_SUBICON_FRACTION = .4;
-var VIEWS_SWITCH_ANIMATION_DELAY = 100;
 
-var SCROLL_TIMEOUT_TIME = 150;
+const VIEWS_SWITCH_TIME = 400;
+const VIEWS_SWITCH_ANIMATION_DELAY = 100;
 
-var APP_ICON_SCALE_IN_TIME = 500;
+const SCROLL_TIMEOUT_TIME = 150;
-var APP_ICON_SCALE_IN_DELAY = 700;
 
-var APP_ICON_TITLE_EXPAND_TIME = 200;
+const APP_ICON_SCALE_IN_TIME = 500;
-var APP_ICON_TITLE_COLLAPSE_TIME = 100;
+const APP_ICON_SCALE_IN_DELAY = 700;
+
+const APP_ICON_TITLE_EXPAND_TIME = 200;
+const APP_ICON_TITLE_COLLAPSE_TIME = 100;
 
 const FOLDER_DIALOG_ANIMATION_TIME = 200;
 
@@ -154,7 +154,7 @@ function _findBestFolderName(apps) {
     return null;
 }
 
-const AppGrid = GObject.registerClass({
+export const AppGrid = GObject.registerClass({
     Properties: {
         'indicators-padding': GObject.ParamSpec.boxed('indicators-padding',
             'Indicators padding', 'Indicators padding',
@@ -1284,7 +1284,7 @@ var BaseAppView = GObject.registerClass({
     }
 });
 
-var PageManager = GObject.registerClass({
+const PageManager = GObject.registerClass({
     Signals: { 'layout-changed': {} },
 }, class PageManager extends GObject.Object {
     _init() {
@@ -1345,7 +1345,7 @@ var PageManager = GObject.registerClass({
     }
 });
 
-var AppDisplay = GObject.registerClass(
+export const AppDisplay = GObject.registerClass(
 class AppDisplay extends BaseAppView {
     _init() {
         super._init({
@@ -1788,7 +1788,7 @@ class AppDisplay extends BaseAppView {
     }
 });
 
-var AppSearchProvider = class AppSearchProvider {
+export class AppSearchProvider {
     constructor() {
         this._appSys = Shell.AppSystem.get_default();
         this.id = 'applications';
@@ -1879,9 +1879,9 @@ var AppSearchProvider = class AppSearchProvider {
             return new SystemActionIcon(this, resultMeta);
         }
     }
-};
+}
 
-var AppViewItem = GObject.registerClass(
+export const AppViewItem = GObject.registerClass(
 class AppViewItem extends St.Button {
     _init(params = {}, isDraggable = true, expandTitleOnHover = true) {
         super._init({
@@ -2098,7 +2098,7 @@ class AppViewItem extends St.Button {
     }
 });
 
-var FolderGrid = GObject.registerClass(
+const FolderGrid = GObject.registerClass(
 class FolderGrid extends AppGrid {
     _init() {
         super._init({
@@ -2118,7 +2118,7 @@ class FolderGrid extends AppGrid {
     }
 });
 
-var FolderView = GObject.registerClass(
+export const FolderView = GObject.registerClass(
 class FolderView extends BaseAppView {
     _init(folder, id, parentView) {
         super._init({
@@ -2313,7 +2313,7 @@ class FolderView extends BaseAppView {
     }
 });
 
-var FolderIcon = GObject.registerClass({
+export const FolderIcon = GObject.registerClass({
     Signals: {
         'apps-changed': {},
     },
@@ -2489,7 +2489,7 @@ var FolderIcon = GObject.registerClass({
     }
 });
 
-var AppFolderDialog = GObject.registerClass({
+export const AppFolderDialog = GObject.registerClass({
     Signals: {
         'open-state-changed': { param_types: [GObject.TYPE_BOOLEAN] },
     },
@@ -2974,7 +2974,7 @@ var AppFolderDialog = GObject.registerClass({
     }
 });
 
-var AppIcon = GObject.registerClass({
+export const AppIcon = GObject.registerClass({
     Signals: {
         'menu-state-changed': { param_types: [GObject.TYPE_BOOLEAN] },
         'sync-tooltip': {},
@@ -3279,7 +3279,7 @@ var AppIcon = GObject.registerClass({
     }
 });
 
-var SystemActionIcon = GObject.registerClass(
+const SystemActionIcon = GObject.registerClass(
 class SystemActionIcon extends Search.GridSearchResult {
     activate() {
         SystemActions.getDefault().activateAction(this.metaInfo['id']);

js/ui/appFavorites.js

@@ -1,11 +1,10 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported getAppFavorites */
 
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const ParentalControlsManager = imports.misc.parentalControlsManager;
+import * as ParentalControlsManager from '../misc/parentalControlsManager.js';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
 
 // In alphabetical order
 const RENAMED_DESKTOP_IDS = {
@@ -210,7 +209,7 @@ var appFavoritesInstance = null;
 /**
  * @returns {AppFavorites}
  */
-function getAppFavorites() {
+export function getAppFavorites() {
     if (appFavoritesInstance == null)
         appFavoritesInstance = new AppFavorites();
     return appFavoritesInstance;

js/ui/appMenu.js

@@ -1,18 +1,18 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported AppMenu */
-const Clutter = imports.gi.Clutter;
-const Gio = imports.gi.Gio;
-const GLib = imports.gi.GLib;
-const Meta = imports.gi.Meta;
-const Shell = imports.gi.Shell;
-const St = imports.gi.St;
 
-const AppFavorites = imports.ui.appFavorites;
+import Clutter from 'gi://Clutter';
-const Main = imports.ui.main;
+import Gio from 'gi://Gio';
-const ParentalControlsManager = imports.misc.parentalControlsManager;
+import GLib from 'gi://GLib';
-const PopupMenu = imports.ui.popupMenu;
+import Meta from 'gi://Meta';
+import Shell from 'gi://Shell';
+import St from 'gi://St';
 
-var AppMenu = class AppMenu extends PopupMenu.PopupMenu {
+import * as AppFavorites from './appFavorites.js';
+import * as Main from './main.js';
+import * as ParentalControlsManager from '../misc/parentalControlsManager.js';
+import * as PopupMenu from './popupMenu.js';
+
+export class AppMenu extends PopupMenu.PopupMenu {
     /**
      * @param {Clutter.Actor} sourceActor - actor the menu is attached to
      * @param {St.Side} side - arrow side
@@ -292,4 +292,4 @@ var AppMenu = class AppMenu extends PopupMenu.PopupMenu {
             }, item);
         });
     }
-};
+}

js/ui/audioDeviceSelection.js

@@ -1,19 +1,18 @@
-/* exported AudioDeviceSelectionDBus */
+import Clutter from 'gi://Clutter';
-const Clutter = imports.gi.Clutter;
+import Gio from 'gi://Gio';
-const Gio = imports.gi.Gio;
+import GLib from 'gi://GLib';
-const GLib = imports.gi.GLib;
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
+import Meta from 'gi://Meta';
-const Meta = imports.gi.Meta;
+import Shell from 'gi://Shell';
-const Shell = imports.gi.Shell;
+import St from 'gi://St';
-const St = imports.gi.St;
 
-const Dialog = imports.ui.dialog;
+import * as Dialog from './dialog.js';
-const Main = imports.ui.main;
+import * as ModalDialog from './modalDialog.js';
-const ModalDialog = imports.ui.modalDialog;
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import * as Main from './main.js';
+import {loadInterfaceXML} from '../misc/fileUtils.js';
 
-var AudioDevice = {
+const AudioDevice = {
     HEADPHONES: 1 << 0,
     HEADSET:    1 << 1,
     MICROPHONE: 1 << 2,
@@ -21,7 +20,7 @@ var AudioDevice = {
 
 const AudioDeviceSelectionIface = loadInterfaceXML('org.gnome.Shell.AudioDeviceSelection');
 
-var AudioDeviceSelectionDialog = GObject.registerClass({
+const AudioDeviceSelectionDialog = GObject.registerClass({
     Signals: { 'device-selected': { param_types: [GObject.TYPE_UINT] } },
 }, class AudioDeviceSelectionDialog extends ModalDialog.ModalDialog {
     _init(devices) {
@@ -150,7 +149,7 @@ var AudioDeviceSelectionDialog = GObject.registerClass({
     }
 });
 
-var AudioDeviceSelectionDBus = class AudioDeviceSelectionDBus {
+export class AudioDeviceSelectionDBus {
     constructor() {
         this._audioSelectionDialog = null;
 
@@ -211,4 +210,4 @@ var AudioDeviceSelectionDBus = class AudioDeviceSelectionDBus {
 
         invocation.return_value(null);
     }
-};
+}

js/ui/background.js

@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported SystemBackground, BackgroundManager */
 
 // READ THIS FIRST
 // Background handling is a maze of objects, both objects in this file, and
@@ -94,21 +93,21 @@
 //     MetaBackgroundImage         MetaBackgroundImage
 //     MetaBackgroundImage         MetaBackgroundImage
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GDesktopEnums = imports.gi.GDesktopEnums;
+import GDesktopEnums from 'gi://GDesktopEnums';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const GnomeBG = imports.gi.GnomeBG;
+import GnomeBG from 'gi://GnomeBG';
-const GnomeDesktop = imports.gi.GnomeDesktop;
+import GnomeDesktop from 'gi://GnomeDesktop';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-const LoginManager = imports.misc.loginManager;
+import * as LoginManager from '../misc/loginManager.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
 
-var DEFAULT_BACKGROUND_COLOR = Clutter.Color.from_pixel(0x2e3436ff);
+const DEFAULT_BACKGROUND_COLOR = Clutter.Color.from_pixel(0x2e3436ff);
 
 const BACKGROUND_SCHEMA = 'org.gnome.desktop.background';
 const PRIMARY_COLOR_KEY = 'primary-color';
@@ -121,14 +120,14 @@ const PICTURE_URI_DARK_KEY = 'picture-uri-dark';
 const INTERFACE_SCHEMA = 'org.gnome.desktop.interface';
 const COLOR_SCHEME_KEY = 'color-scheme';
 
-var FADE_ANIMATION_TIME = 1000;
+const FADE_ANIMATION_TIME = 1000;
 
 // These parameters affect how often we redraw.
 // The first is how different (percent crossfaded) the slide show
 // has to look before redrawing and the second is the minimum
 // frequency (in seconds) we're willing to wake up
-var ANIMATION_OPACITY_STEP_INCREMENT = 4.0;
+const ANIMATION_OPACITY_STEP_INCREMENT = 4.0;
-var ANIMATION_MIN_WAKEUP_INTERVAL = 1.0;
+const ANIMATION_MIN_WAKEUP_INTERVAL = 1.0;
 
 let _backgroundCache = null;
 
@@ -142,7 +141,7 @@ function _fileEqual0(file1, file2) {
     return file1.equal(file2);
 }
 
-var BackgroundCache = class BackgroundCache extends Signals.EventEmitter {
+class BackgroundCache extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -227,7 +226,7 @@ var BackgroundCache = class BackgroundCache extends Signals.EventEmitter {
             }
         }
     }
-};
+}
 
 /**
  * @returns {BackgroundCache}
@@ -238,7 +237,7 @@ function getBackgroundCache() {
     return _backgroundCache;
 }
 
-var Background = GObject.registerClass({
+const Background = GObject.registerClass({
     Signals: { 'loaded': {}, 'bg-changed': {} },
 }, class Background extends Meta.Background {
     _init(params) {
@@ -532,7 +531,7 @@ var Background = GObject.registerClass({
 
 let _systemBackground;
 
-var SystemBackground = GObject.registerClass({
+export const SystemBackground = GObject.registerClass({
     Signals: { 'loaded': {} },
 }, class SystemBackground extends Meta.BackgroundActor {
     _init() {
@@ -555,7 +554,7 @@ var SystemBackground = GObject.registerClass({
     }
 });
 
-var BackgroundSource = class BackgroundSource {
+class BackgroundSource {
     constructor(layoutManager, settingsSchema) {
         // Allow override the background image setting for performance testing
         this._layoutManager = layoutManager;
@@ -649,9 +648,9 @@ var BackgroundSource = class BackgroundSource {
 
         this._backgrounds = null;
     }
-};
+}
 
-var Animation = GObject.registerClass(
+const Animation = GObject.registerClass(
 class Animation extends GnomeBG.BGSlideShow {
     _init(params) {
         super._init(params);
@@ -691,7 +690,7 @@ class Animation extends GnomeBG.BGSlideShow {
     }
 });
 
-var BackgroundManager = class BackgroundManager extends Signals.EventEmitter {
+export class BackgroundManager extends Signals.EventEmitter {
     constructor(params) {
         super();
         params = Params.parse(params, {
@@ -847,4 +846,4 @@ var BackgroundManager = class BackgroundManager extends Signals.EventEmitter {
 
         return backgroundActor;
     }
-};
+}

js/ui/backgroundMenu.js

@@ -1,14 +1,14 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported addBackgroundMenu */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const BoxPointer = imports.ui.boxpointer;
+import * as BoxPointer from './boxpointer.js';
-const Main = imports.ui.main;
+import * as PopupMenu from './popupMenu.js';
-const PopupMenu = imports.ui.popupMenu;
 
-var BackgroundMenu = class BackgroundMenu extends PopupMenu.PopupMenu {
+import * as Main from './main.js';
+
+export class BackgroundMenu extends PopupMenu.PopupMenu {
     constructor(layoutManager) {
         super(layoutManager.dummyCursor, 0, St.Side.TOP);
 
@@ -22,13 +22,13 @@ var BackgroundMenu = class BackgroundMenu extends PopupMenu.PopupMenu {
         layoutManager.uiGroup.add_actor(this.actor);
         this.actor.hide();
     }
-};
+}
 
 /**
  * @param {Meta.BackgroundActor} actor
  * @param {import('./layout.js').LayoutManager} layoutManager
  */
-function addBackgroundMenu(actor, layoutManager) {
+export function addBackgroundMenu(actor, layoutManager) {
     actor.reactive = true;
     actor._backgroundMenu = new BackgroundMenu(layoutManager);
     actor._backgroundManager = new PopupMenu.PopupMenuManager(actor);

js/ui/barLevel.js

@@ -1,12 +1,11 @@
 /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
-/* exported BarLevel */
 
-const Atk = imports.gi.Atk;
+import Atk from 'gi://Atk';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-var BarLevel = GObject.registerClass({
+export const BarLevel = GObject.registerClass({
     Properties: {
         'value': GObject.ParamSpec.double(
             'value', 'value', 'value',

js/ui/boxpointer.js

@@ -1,26 +1,23 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported BoxPointer */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
 
-var PopupAnimation = {
+export const PopupAnimation = {
     NONE:  0,
     SLIDE: 1 << 0,
     FADE:  1 << 1,
     FULL:  ~0,
 };
 
-var POPUP_ANIMATION_TIME = 150;
+const POPUP_ANIMATION_TIME = 150;
 
 /**
  * BoxPointer:
- * @side: side to draw the arrow on
- * @binProperties: Properties to set on contained bin
  *
  * An actor which displays a triangle "arrow" pointing to a given
  * side.  The .bin property is a container in which content can be
@@ -30,7 +27,7 @@ var POPUP_ANIMATION_TIME = 150;
  * totally inside the monitor workarea if possible.
  *
  */
-var BoxPointer = GObject.registerClass({
+export const BoxPointer = GObject.registerClass({
     Signals: { 'arrow-side-changed': {} },
 }, class BoxPointer extends St.Widget {
     /**

js/ui/calendar.js

@@ -1,28 +1,27 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Calendar, CalendarMessageList, DBusEventSource */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const MessageList = imports.ui.messageList;
+import * as MessageList from './messageList.js';
-const MessageTray = imports.ui.messageTray;
+import * as MessageTray from './messageTray.js';
-const Mpris = imports.ui.mpris;
+import * as Mpris from './mpris.js';
-const PopupMenu = imports.ui.popupMenu;
+import * as PopupMenu from './popupMenu.js';
-const {ensureActorVisibleInScrollView} = imports.misc.animationUtils;
+import {ensureActorVisibleInScrollView} from '../misc/animationUtils.js';
 
-const {formatDateWithCFormatString, formatTimeSpan} = imports.misc.dateUtils;
+import {formatDateWithCFormatString, formatTimeSpan} from '../misc/dateUtils.js';
-const {loadInterfaceXML} = imports.misc.fileUtils;
+import {loadInterfaceXML} from '../misc/fileUtils.js';
 
-var SHOW_WEEKDATE_KEY = 'show-weekdate';
+const SHOW_WEEKDATE_KEY = 'show-weekdate';
 
-var MESSAGE_ICON_SIZE = -1; // pick up from CSS
+const MESSAGE_ICON_SIZE = -1; // pick up from CSS
 
-var NC_ = (context, str) => `${context}\u0004${str}`;
+const NC_ = (context, str) => `${context}\u0004${str}`;
 
 function sameYear(dateA, dateB) {
     return dateA.getYear() == dateB.getYear();
@@ -83,19 +82,19 @@ function _getCalendarDayAbbreviation(dayNumber) {
 
 // Abstraction for an appointment/event in a calendar
 
-var CalendarEvent = class CalendarEvent {
+class CalendarEvent {
     constructor(id, date, end, summary) {
         this.id = id;
         this.date = date;
         this.end = end;
         this.summary = summary;
     }
-};
+}
 
 // Interface for appointments/events - e.g. the contents of a calendar
 //
 
-var EventSourceBase = GObject.registerClass({
+export const EventSourceBase = GObject.registerClass({
     GTypeFlags: GObject.TypeFlags.ABSTRACT,
     Properties: {
         'has-calendars': GObject.ParamSpec.boolean(
@@ -143,7 +142,7 @@ var EventSourceBase = GObject.registerClass({
     }
 });
 
-var EmptyEventSource = GObject.registerClass(
+export const EmptyEventSource = GObject.registerClass(
 class EmptyEventSource extends EventSourceBase {
     get isLoading() {
         return false;
@@ -211,7 +210,7 @@ function _eventOverlapsInterval(e0, e1, i0, i1) {
 }
 
 // an implementation that reads data from a session bus service
-var DBusEventSource = GObject.registerClass(
+export const DBusEventSource = GObject.registerClass(
 class DBusEventSource extends EventSourceBase {
     _init() {
         super._init();
@@ -411,7 +410,7 @@ class DBusEventSource extends EventSourceBase {
     }
 });
 
-var Calendar = GObject.registerClass({
+export const Calendar = GObject.registerClass({
     Signals: { 'selected-date-changed': { param_types: [GLib.DateTime.$gtype] } },
 }, class Calendar extends St.Widget {
     _init() {
@@ -766,7 +765,7 @@ var Calendar = GObject.registerClass({
     }
 });
 
-var NotificationMessage = GObject.registerClass(
+export const NotificationMessage = GObject.registerClass(
 class NotificationMessage extends MessageList.Message {
     _init(notification) {
         super._init(notification.title, notification.bannerBodyText);
@@ -817,7 +816,7 @@ class NotificationMessage extends MessageList.Message {
     }
 });
 
-var TimeLabel = GObject.registerClass(
+const TimeLabel = GObject.registerClass(
 class NotificationTimeLabel extends St.Label {
     _init(datetime) {
         super._init({
@@ -834,7 +833,7 @@ class NotificationTimeLabel extends St.Label {
     }
 });
 
-var NotificationSection = GObject.registerClass(
+const NotificationSection = GObject.registerClass(
 class NotificationSection extends MessageList.MessageListSection {
     _init() {
         super._init();
@@ -896,7 +895,7 @@ class NotificationSection extends MessageList.MessageListSection {
     }
 });
 
-var Placeholder = GObject.registerClass(
+const Placeholder = GObject.registerClass(
 class Placeholder extends St.BoxLayout {
     _init() {
         super._init({ style_class: 'message-list-placeholder', vertical: true });
@@ -930,7 +929,7 @@ class DoNotDisturbSwitch extends PopupMenu.Switch {
     }
 });
 
-var CalendarMessageList = GObject.registerClass(
+export const CalendarMessageList = GObject.registerClass(
 class CalendarMessageList extends St.Widget {
     _init() {
         super._init({

js/ui/checkBox.js

@@ -1,11 +1,10 @@
-/* exported CheckBox */
+import Atk from 'gi://Atk';
-const Atk = imports.gi.Atk;
+import Clutter from 'gi://Clutter';
-const Clutter = imports.gi.Clutter;
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
+import Pango from 'gi://Pango';
-const Pango = imports.gi.Pango;
+import St from 'gi://St';
-const St = imports.gi.St;
 
-var CheckBox = GObject.registerClass(
+export const CheckBox = GObject.registerClass(
 class CheckBox extends St.Button {
     _init(label) {
         let container = new St.BoxLayout({

js/ui/closeDialog.js

@@ -1,21 +1,20 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported CloseDialog */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Dialog = imports.ui.dialog;
+import * as Dialog from './dialog.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
 
-var FROZEN_WINDOW_BRIGHTNESS = -0.3;
+const FROZEN_WINDOW_BRIGHTNESS = -0.3;
-var DIALOG_TRANSITION_TIME = 150;
+const DIALOG_TRANSITION_TIME = 150;
-var ALIVE_TIMEOUT = 5000;
+const ALIVE_TIMEOUT = 5000;
 
-var CloseDialog = GObject.registerClass({
+export const CloseDialog = GObject.registerClass({
     Implements: [Meta.CloseDialog],
     Properties: {
         'window': GObject.ParamSpec.override('window', Meta.CloseDialog),

js/ui/components.js

@@ -1,7 +1,6 @@
-/* exported ComponentManager */
+import * as Main from './main.js';
-const Main = imports.ui.main;
 
-var ComponentManager = class {
+export class ComponentManager {
     constructor() {
         this._allComponents = {};
         this._enabledComponents = [];
@@ -28,8 +27,7 @@ var ComponentManager = class {
     }
 
     async _importComponent(name) {
-        // TODO: Import as module
+        let module = await import(`./components/${name}.js`);
-        let module = await imports.ui.components[name];
         return module.Component;
     }
 
@@ -59,4 +57,4 @@ var ComponentManager = class {
             return;
         component.disable();
     }
-};
+}

js/ui/components/automountManager.js

@@ -1,23 +1,22 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Component */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const Params = imports.misc.params;
+import * as Params from '../../misc/params.js';
 
-const GnomeSession = imports.misc.gnomeSession;
+import * as GnomeSession from '../../misc/gnomeSession.js';
-const Main = imports.ui.main;
+import * as Main from '../main.js';
-const ShellMountOperation = imports.ui.shellMountOperation;
+import * as ShellMountOperation from '../shellMountOperation.js';
 
-var GNOME_SESSION_AUTOMOUNT_INHIBIT = 16;
+const GNOME_SESSION_AUTOMOUNT_INHIBIT = 16;
 
 // GSettings keys
 const SETTINGS_SCHEMA = 'org.gnome.desktop.media-handling';
 const SETTING_ENABLE_AUTOMOUNT = 'automount';
 
-var AUTORUN_EXPIRE_TIMEOUT_SECS = 10;
+const AUTORUN_EXPIRE_TIMEOUT_SECS = 10;
 
-var AutomountManager = class {
+class AutomountManager {
     constructor() {
         this._settings = new Gio.Settings({ schema_id: SETTINGS_SCHEMA });
         this._activeOperations = new Map();
@@ -253,5 +252,6 @@ var AutomountManager = class {
         volume._allowAutorunExpireId = id;
         GLib.Source.set_name_by_id(id, '[gnome-shell] volume.allowAutorun');
     }
-};
+}
-var Component = AutomountManager;
+
+export {AutomountManager as Component};

js/ui/components/autorunManager.js

@@ -1,18 +1,17 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Component */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const GnomeSession = imports.misc.gnomeSession;
+import * as GnomeSession from '../../misc/gnomeSession.js';
-const Main = imports.ui.main;
+import * as Main from '../main.js';
-const MessageTray = imports.ui.messageTray;
+import * as MessageTray from '../messageTray.js';
 
 Gio._promisify(Gio.Mount.prototype, 'guess_content_type');
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from '../../misc/fileUtils.js';
 
 // GSettings keys
 const SETTINGS_SCHEMA = 'org.gnome.desktop.media-handling';
@@ -22,7 +21,7 @@ const SETTING_IGNORE = 'autorun-x-content-ignore';
 const SETTING_OPEN_FOLDER = 'autorun-x-content-open-folder';
 
 /** @enum {number} */
-var AutorunSetting = {
+const AutorunSetting = {
     RUN: 0,
     IGNORE: 1,
     FILES: 2,
@@ -86,7 +85,7 @@ function HotplugSniffer() {
                                    '/org/gnome/Shell/HotplugSniffer');
 }
 
-var ContentTypeDiscoverer = class {
+class ContentTypeDiscoverer {
     constructor() {
         this._settings = new Gio.Settings({ schema_id: SETTINGS_SCHEMA });
     }
@@ -127,9 +126,9 @@ var ContentTypeDiscoverer = class {
 
         return [apps, contentTypes];
     }
-};
+}
 
-var AutorunManager = class {
+class AutorunManager {
     constructor() {
         this._session = new GnomeSession.SessionManager();
         this._volumeMonitor = Gio.VolumeMonitor.get();
@@ -161,9 +160,9 @@ var AutorunManager = class {
     _onMountRemoved(monitor, mount) {
         this._dispatcher.removeMount(mount);
     }
-};
+}
 
-var AutorunDispatcher = class {
+class AutorunDispatcher {
     constructor(manager) {
         this._manager = manager;
         this._sources = [];
@@ -255,9 +254,9 @@ var AutorunDispatcher = class {
         // destroy the notification source
         source.destroy();
     }
-};
+}
 
-var AutorunSource = GObject.registerClass(
+const AutorunSource = GObject.registerClass(
 class AutorunSource extends MessageTray.Source {
     _init(manager, mount, apps) {
         super._init(mount.get_name());
@@ -282,7 +281,7 @@ class AutorunSource extends MessageTray.Source {
     }
 });
 
-var AutorunNotification = GObject.registerClass(
+const AutorunNotification = GObject.registerClass(
 class AutorunNotification extends MessageTray.Notification {
     _init(manager, source) {
         super._init(source, source.title);
@@ -346,4 +345,4 @@ class AutorunNotification extends MessageTray.Notification {
     }
 });
 
-var Component = AutorunManager;
+export {AutorunManager as Component};

js/ui/components/keyring.js

@@ -1,21 +1,20 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Component */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gcr = imports.gi.Gcr;
+import Gcr from 'gi://Gcr';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Dialog = imports.ui.dialog;
+import * as Dialog from '../dialog.js';
-const ModalDialog = imports.ui.modalDialog;
+import * as ModalDialog from '../modalDialog.js';
-const ShellEntry = imports.ui.shellEntry;
+import * as ShellEntry from '../shellEntry.js';
-const CheckBox = imports.ui.checkBox;
+import * as CheckBox from '../checkBox.js';
-const {wiggle} = imports.misc.animationUtils;
+import {wiggle} from '../misc/animationUtils.js';
 
-var KeyringDialog = GObject.registerClass(
+const KeyringDialog = GObject.registerClass(
 class KeyringDialog extends ModalDialog.ModalDialog {
     _init() {
         super._init({ styleClass: 'prompt-dialog' });
@@ -184,7 +183,7 @@ class KeyringDialog extends ModalDialog.ModalDialog {
     }
 });
 
-var KeyringDummyDialog = class {
+class KeyringDummyDialog {
     constructor() {
         this.prompt = new Shell.KeyringPrompt();
         this.prompt.connect('show-password', this._cancelPrompt.bind(this));
@@ -194,9 +193,9 @@ var KeyringDummyDialog = class {
     _cancelPrompt() {
         this.prompt.cancel();
     }
-};
+}
 
-var KeyringPrompter = GObject.registerClass(
+const KeyringPrompter = GObject.registerClass(
 class KeyringPrompter extends Gcr.SystemPrompter {
     _init() {
         super._init();
@@ -232,4 +231,4 @@ class KeyringPrompter extends Gcr.SystemPrompter {
     }
 });
 
-var Component = KeyringPrompter;
+export {KeyringPrompter as Component};

js/ui/components/networkAgent.js

@@ -1,28 +1,27 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Component */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const NM = imports.gi.NM;
+import NM from 'gi://NM';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
-const Signals = imports.misc.signals;
+import * as Signals from '../../misc/signals.js';
 
-const Dialog = imports.ui.dialog;
+import * as Dialog from '../dialog.js';
-const Main = imports.ui.main;
+import * as Main from '../main.js';
-const MessageTray = imports.ui.messageTray;
+import * as MessageTray from '../messageTray.js';
-const ModalDialog = imports.ui.modalDialog;
+import * as ModalDialog from '../modalDialog.js';
-const ShellEntry = imports.ui.shellEntry;
+import * as ShellEntry from '../shellEntry.js';
 
 Gio._promisify(Shell.NetworkAgent.prototype, 'init_async');
 Gio._promisify(Shell.NetworkAgent.prototype, 'search_vpn_plugin');
 
 const VPN_UI_GROUP = 'VPN Plugin UI';
 
-var NetworkSecretDialog = GObject.registerClass(
+const NetworkSecretDialog = GObject.registerClass(
 class NetworkSecretDialog extends ModalDialog.ModalDialog {
     _init(agent, requestId, connection, settingName, hints, flags, contentOverride) {
         super._init({ styleClass: 'prompt-dialog' });
@@ -418,7 +417,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
     }
 });
 
-var VPNRequestHandler = class extends Signals.EventEmitter {
+class VPNRequestHandler extends Signals.EventEmitter {
     constructor(agent, requestId, authHelper, serviceType, connection, hints, flags) {
         super();
 
@@ -676,9 +675,9 @@ var VPNRequestHandler = class extends Signals.EventEmitter {
             this.destroy();
         }
     }
-};
+}
 
-var NetworkAgent = class {
+class NetworkAgent {
     constructor() {
         this._native = new Shell.NetworkAgent({
             identifier: 'org.gnome.Shell.NetworkAgent',
@@ -880,5 +879,6 @@ var NetworkAgent = class {
             externalUIMode: ['true', 'yes', 'on', '1'].includes(trimmedProp),
         };
     }
-};
+}
-var Component = NetworkAgent;
+
+export {NetworkAgent as Component};

js/ui/components/polkitAgent.js

@@ -1,22 +1,21 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Component */
 
-const AccountsService = imports.gi.AccountsService;
+import AccountsService from 'gi://AccountsService';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const PolkitAgent = imports.gi.PolkitAgent;
+import PolkitAgent from 'gi://PolkitAgent';
-const Polkit = imports.gi.Polkit;
+import Polkit from 'gi://Polkit';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Dialog = imports.ui.dialog;
+import * as Dialog from '../dialog.js';
-const Main = imports.ui.main;
+import * as Main from '../main.js';
-const ModalDialog = imports.ui.modalDialog;
+import * as ModalDialog from '../modalDialog.js';
-const ShellEntry = imports.ui.shellEntry;
+import * as ShellEntry from '../shellEntry.js';
-const UserWidget = imports.ui.userWidget;
+import * as UserWidget from '../userWidget.js';
-const {wiggle} = imports.misc.animationUtils;
+import {wiggle} from '../misc/animationUtils.js';
 
 /** @enum {number} */
 const DialogMode = {
@@ -28,7 +27,7 @@ const DIALOG_ICON_SIZE = 64;
 
 const DELAYED_RESET_TIMEOUT = 200;
 
-var AuthenticationDialog = GObject.registerClass({
+const AuthenticationDialog = GObject.registerClass({
     Signals: { 'done': { param_types: [GObject.TYPE_BOOLEAN] } },
 }, class AuthenticationDialog extends ModalDialog.ModalDialog {
     _init(actionId, description, cookie, userNames) {
@@ -414,7 +413,7 @@ var AuthenticationDialog = GObject.registerClass({
     }
 });
 
-var AuthenticationAgent = GObject.registerClass(
+const AuthenticationAgent = GObject.registerClass(
 class AuthenticationAgent extends Shell.PolkitAuthenticationAgent {
     _init() {
         super._init();
@@ -474,4 +473,4 @@ class AuthenticationAgent extends Shell.PolkitAuthenticationAgent {
     }
 });
 
-var Component = AuthenticationAgent;
+export {AuthenticationAgent as Component};

js/ui/components/telepathyClient.js

@@ -1,16 +1,15 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Component */
+import Clutter from 'gi://Clutter';
+import Gio from 'gi://Gio';
+import GLib from 'gi://GLib';
+import GObject from 'gi://GObject';
+import St from 'gi://St';
 
-const Clutter = imports.gi.Clutter;
+let Tpl = null;
-const Gio = imports.gi.Gio;
+let Tp = null;
-const GLib = imports.gi.GLib;
-const GObject = imports.gi.GObject;
-const St = imports.gi.St;
-
-var Tpl = null;
-var Tp = null;
 try {
-    ({ TelepathyGLib: Tp, TelepathyLogger: Tpl } = imports.gi);
+    ({default: Tp} = await import('gi://TelepathyGlib'));
+    ({default: Tpl} = await import('gi://TelepathyLogger'));
 
     Gio._promisify(Tp.Channel.prototype, 'close_async');
     Gio._promisify(Tp.TextChannel.prototype, 'send_message_async');
@@ -20,30 +19,30 @@ try {
     console.debug('Skipping chat support, telepathy not found');
 }
 
-const History = imports.misc.history;
+import * as History from '../../misc/history.js';
-const Main = imports.ui.main;
+import * as Main from '../main.js';
-const MessageList = imports.ui.messageList;
+import * as MessageList from '../messageList.js';
-const MessageTray = imports.ui.messageTray;
+import * as MessageTray from '../messageTray.js';
-const Params = imports.misc.params;
+import * as Params from '../../misc/params.js';
-const Util = imports.misc.util;
+import * as Util from '../../misc/util.js';
 
 const HAVE_TP = Tp != null && Tpl != null;
 
 // See Notification.appendMessage
-var SCROLLBACK_IMMEDIATE_TIME = 3 * 60; // 3 minutes
+const SCROLLBACK_IMMEDIATE_TIME = 3 * 60; // 3 minutes
-var SCROLLBACK_RECENT_TIME = 15 * 60; // 15 minutes
+const SCROLLBACK_RECENT_TIME = 15 * 60; // 15 minutes
-var SCROLLBACK_RECENT_LENGTH = 20;
+const SCROLLBACK_RECENT_LENGTH = 20;
-var SCROLLBACK_IDLE_LENGTH = 5;
+const SCROLLBACK_IDLE_LENGTH = 5;
 
 // See Source._displayPendingMessages
-var SCROLLBACK_HISTORY_LINES = 10;
+const SCROLLBACK_HISTORY_LINES = 10;
 
 // See Notification._onEntryChanged
-var COMPOSING_STOP_TIMEOUT = 5;
+const COMPOSING_STOP_TIMEOUT = 5;
 
-var CHAT_EXPAND_LINES = 12;
+const CHAT_EXPAND_LINES = 12;
 
-var NotificationDirection = {
+const NotificationDirection = {
     SENT: 'chat-sent',
     RECEIVED: 'chat-received',
 };
@@ -101,7 +100,7 @@ const ChatMessage = HAVE_TP ? GObject.registerClass({
 }) : null;
 
 
-var TelepathyComponent = class {
+class TelepathyComponent {
     constructor() {
         this._client = null;
 
@@ -131,9 +130,9 @@ var TelepathyComponent = class {
 
         this._client.unregister();
     }
-};
+}
 
-var TelepathyClient = HAVE_TP ? GObject.registerClass(
+const TelepathyClient = HAVE_TP ? GObject.registerClass(
 class TelepathyClient extends Tp.BaseClient {
     _init() {
         // channel path -> ChatSource
@@ -306,7 +305,7 @@ class TelepathyClient extends Tp.BaseClient {
     }
 }) : null;
 
-var ChatSource = HAVE_TP ? GObject.registerClass(
+const ChatSource = HAVE_TP ? GObject.registerClass(
 class ChatSource extends MessageTray.Source {
     _init(account, conn, channel, contact, client) {
         this._account = account;
@@ -666,7 +665,7 @@ class ChatNotificationMessage extends GObject.Object {
     }
 }) : null;
 
-var ChatNotification = HAVE_TP ? GObject.registerClass({
+const ChatNotification = HAVE_TP ? GObject.registerClass({
     Signals: {
         'message-removed': { param_types: [ChatNotificationMessage.$gtype] },
         'message-added': { param_types: [ChatNotificationMessage.$gtype] },
@@ -841,7 +840,7 @@ var ChatNotification = HAVE_TP ? GObject.registerClass({
     }
 }) : null;
 
-var ChatLineBox = GObject.registerClass(
+const ChatLineBox = GObject.registerClass(
 class ChatLineBox extends St.BoxLayout {
     vfunc_get_preferred_height(forWidth) {
         let [, natHeight] = super.vfunc_get_preferred_height(forWidth);
@@ -849,7 +848,7 @@ class ChatLineBox extends St.BoxLayout {
     }
 });
 
-var ChatNotificationBanner = GObject.registerClass(
+const ChatNotificationBanner = GObject.registerClass(
 class ChatNotificationBanner extends MessageTray.NotificationBanner {
     _init(notification) {
         super._init(notification);
@@ -1020,4 +1019,4 @@ class ChatNotificationBanner extends MessageTray.NotificationBanner {
     }
 });
 
-var Component = TelepathyComponent;
+export const Component = TelepathyComponent;

js/ui/ctrlAltTab.js

@@ -1,25 +1,24 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported CtrlAltTabManager */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const SwitcherPopup = imports.ui.switcherPopup;
+import * as SwitcherPopup from './switcherPopup.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
 
-var POPUP_APPICON_SIZE = 96;
+const POPUP_APPICON_SIZE = 96;
 
-var SortGroup = {
+export const SortGroup = {
     TOP:    0,
     MIDDLE: 1,
     BOTTOM: 2,
 };
 
-var CtrlAltTabManager = class CtrlAltTabManager {
+export class CtrlAltTabManager {
     constructor() {
         this._items = [];
         this.addGroup(global.window_group,
@@ -141,9 +140,9 @@ var CtrlAltTabManager = class CtrlAltTabManager {
     _focusWindows(timestamp) {
         global.display.focus_default_window(timestamp);
     }
-};
+}
 
-var CtrlAltTabPopup = GObject.registerClass(
+const CtrlAltTabPopup = GObject.registerClass(
 class CtrlAltTabPopup extends SwitcherPopup.SwitcherPopup {
     _init(items) {
         super._init(items);
@@ -172,7 +171,7 @@ class CtrlAltTabPopup extends SwitcherPopup.SwitcherPopup {
     }
 });
 
-var CtrlAltTabSwitcher = GObject.registerClass(
+const CtrlAltTabSwitcher = GObject.registerClass(
 class CtrlAltTabSwitcher extends SwitcherPopup.SwitcherList {
     _init(items) {
         super._init(true);

js/ui/dash.js

@@ -1,25 +1,24 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Dash */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Graphene = imports.gi.Graphene;
+import Graphene from 'gi://Graphene';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const AppDisplay = imports.ui.appDisplay;
+import * as AppDisplay from './appDisplay.js';
-const AppFavorites = imports.ui.appFavorites;
+import * as AppFavorites from './appFavorites.js';
-const DND = imports.ui.dnd;
+import * as DND from './dnd.js';
-const IconGrid = imports.ui.iconGrid;
+import * as IconGrid from './iconGrid.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Overview = imports.ui.overview;
+import * as Overview from './overview.js';
 
-var DASH_ANIMATION_TIME = 200;
+const DASH_ANIMATION_TIME = 200;
-var DASH_ITEM_LABEL_SHOW_TIME = 150;
+const DASH_ITEM_LABEL_SHOW_TIME = 150;
-var DASH_ITEM_LABEL_HIDE_TIME = 100;
+const DASH_ITEM_LABEL_HIDE_TIME = 100;
-var DASH_ITEM_HOVER_TIMEOUT = 300;
+const DASH_ITEM_HOVER_TIMEOUT = 300;
 
 /**
  * @param {AppDisplay.AppIcon} source
@@ -31,7 +30,7 @@ function getAppFromSource(source) {
         return null;
 }
 
-var DashIcon = GObject.registerClass(
+export const DashIcon = GObject.registerClass(
 class DashIcon extends AppDisplay.AppIcon {
     _init(app) {
         super._init(app, {
@@ -62,7 +61,7 @@ class DashIcon extends AppDisplay.AppIcon {
 
 // A container like StBin, but taking the child's scale into account
 // when requesting a size
-var DashItemContainer = GObject.registerClass(
+export const DashItemContainer = GObject.registerClass(
 class DashItemContainer extends St.Widget {
     _init() {
         super._init({
@@ -200,7 +199,7 @@ class DashItemContainer extends St.Widget {
     }
 });
 
-var ShowAppsIcon = GObject.registerClass(
+export const ShowAppsIcon = GObject.registerClass(
 class ShowAppsIcon extends DashItemContainer {
     _init() {
         super._init();
@@ -285,7 +284,7 @@ class ShowAppsIcon extends DashItemContainer {
     }
 });
 
-var DragPlaceholderItem = GObject.registerClass(
+const DragPlaceholderItem = GObject.registerClass(
 class DragPlaceholderItem extends DashItemContainer {
     _init() {
         super._init();
@@ -293,7 +292,7 @@ class DragPlaceholderItem extends DashItemContainer {
     }
 });
 
-var EmptyDropTargetItem = GObject.registerClass(
+const EmptyDropTargetItem = GObject.registerClass(
 class EmptyDropTargetItem extends DashItemContainer {
     _init() {
         super._init();
@@ -317,7 +316,7 @@ class DashIconsLayout extends Clutter.BoxLayout {
 
 const baseIconSizes = [16, 22, 24, 32, 48, 64];
 
-var Dash = GObject.registerClass({
+export const Dash = GObject.registerClass({
     Signals: { 'icon-size-changed': {} },
 }, class Dash extends St.Widget {
     _init() {

js/ui/dateMenu.js

@@ -1,24 +1,22 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported DateMenuButton */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GnomeDesktop = imports.gi.GnomeDesktop;
+import GnomeDesktop from 'gi://GnomeDesktop';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const GWeather = imports.gi.GWeather;
+import GWeather from 'gi://GWeather';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const PanelMenu = imports.ui.panelMenu;
+import * as PanelMenu from './panelMenu.js';
-const Calendar = imports.ui.calendar;
+import * as Calendar from './calendar.js';
-const Weather = imports.misc.weather;
+import * as Weather from '../misc/weather.js';
-const DateUtils = imports.misc.dateUtils;
 
-const {formatDateWithCFormatString, formatTime} = imports.misc.dateUtils;
+import {formatDateWithCFormatString, formatTime, clearCachedLocalTimeZone} from '../misc/dateUtils.js';
-const {loadInterfaceXML} = imports.misc.fileUtils;
+import {loadInterfaceXML} from '../misc/fileUtils.js';
 
 const NC_ = (context, str) => `${context}\u0004${str}`;
 const T_ = Shell.util_translate_time_string;
@@ -52,7 +50,7 @@ function _gDateTimeToDate(datetime) {
     return new Date(datetime.to_unix() * 1000 + datetime.get_microsecond() / 1000);
 }
 
-var TodayButton = GObject.registerClass(
+const TodayButton = GObject.registerClass(
 class TodayButton extends St.Button {
     _init(calendar) {
         // Having the ability to go to the current date if the user is already
@@ -109,7 +107,7 @@ class TodayButton extends St.Button {
     }
 });
 
-var EventsSection = GObject.registerClass(
+const EventsSection = GObject.registerClass(
 class EventsSection extends St.Button {
     _init() {
         super._init({
@@ -328,7 +326,7 @@ class EventsSection extends St.Button {
     }
 });
 
-var WorldClocksSection = GObject.registerClass(
+const WorldClocksSection = GObject.registerClass(
 class WorldClocksSection extends St.Button {
     _init() {
         super._init({
@@ -534,7 +532,7 @@ class WorldClocksSection extends St.Button {
     }
 });
 
-var WeatherSection = GObject.registerClass(
+const WeatherSection = GObject.registerClass(
 class WeatherSection extends St.Button {
     _init() {
         super._init({
@@ -727,7 +725,7 @@ class WeatherSection extends St.Button {
     }
 });
 
-var MessagesIndicator = GObject.registerClass(
+const MessagesIndicator = GObject.registerClass(
 class MessagesIndicator extends St.Icon {
     _init() {
         super._init({
@@ -788,7 +786,7 @@ class MessagesIndicator extends St.Icon {
     }
 });
 
-var FreezableBinLayout = GObject.registerClass(
+const FreezableBinLayout = GObject.registerClass(
 class FreezableBinLayout extends Clutter.BinLayout {
     _init() {
         super._init();
@@ -828,7 +826,7 @@ class FreezableBinLayout extends Clutter.BinLayout {
     }
 });
 
-var CalendarColumnLayout = GObject.registerClass(
+const CalendarColumnLayout = GObject.registerClass(
 class CalendarColumnLayout extends Clutter.BoxLayout {
     _init(actors) {
         super._init({orientation: Clutter.Orientation.VERTICAL});
@@ -847,7 +845,7 @@ class CalendarColumnLayout extends Clutter.BoxLayout {
     }
 });
 
-var DateMenuButton = GObject.registerClass(
+export const DateMenuButton = GObject.registerClass(
 class DateMenuButton extends PanelMenu.Button {
     _init() {
         let hbox;
@@ -970,7 +968,7 @@ class DateMenuButton extends PanelMenu.Button {
     }
 
     _updateTimeZone() {
-        DateUtils.clearCachedLocalTimeZone();
+        clearCachedLocalTimeZone();
 
         this._calendar.updateTimeZone();
     }

js/ui/dialog.js

@@ -1,12 +1,11 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Dialog, MessageDialogContent, ListSection, ListSectionItem */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const St = imports.gi.St;
+import St from 'gi://St';
 
 function _setLabel(label, value) {
     label.set({
@@ -15,7 +14,7 @@ function _setLabel(label, value) {
     });
 }
 
-var Dialog = GObject.registerClass(
+export const Dialog = GObject.registerClass(
 class Dialog extends St.Widget {
     _init(parentActor, styleClass) {
         super._init({
@@ -156,7 +155,7 @@ class Dialog extends St.Widget {
     }
 });
 
-var MessageDialogContent = GObject.registerClass({
+export const MessageDialogContent = GObject.registerClass({
     Properties: {
         'title': GObject.ParamSpec.string(
             'title', 'title', 'title',
@@ -248,7 +247,7 @@ var MessageDialogContent = GObject.registerClass({
     }
 });
 
-var ListSection = GObject.registerClass({
+export const ListSection = GObject.registerClass({
     Properties: {
         'title': GObject.ParamSpec.string(
             'title', 'title', 'title',
@@ -293,7 +292,7 @@ var ListSection = GObject.registerClass({
     }
 });
 
-var ListSectionItem = GObject.registerClass({
+export const ListSectionItem = GObject.registerClass({
     Properties: {
         'icon-actor':  GObject.ParamSpec.object(
             'icon-actor', 'icon-actor', 'Icon actor',

js/ui/dnd.js

@@ -1,25 +1,24 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported addDragMonitor, removeDragMonitor, makeDraggable */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
 
 // Time to scale down to maxDragActorSize
-var SCALE_ANIMATION_TIME = 250;
+const SCALE_ANIMATION_TIME = 250;
 // Time to animate to original position on cancel
-var SNAP_BACK_ANIMATION_TIME = 250;
+const SNAP_BACK_ANIMATION_TIME = 250;
 // Time to animate to original position on success
-var REVERT_ANIMATION_TIME = 750;
+const REVERT_ANIMATION_TIME = 750;
 
 /** @enum {number} */
-varragMotionResult = {
+export const DragMotionResult = {
     NO_DROP:   0,
     COPY_DROP: 1,
     MOVE_DROP: 2,
@@ -27,24 +26,24 @@ varragMotionResult = {
 };
 
 /** @enum {number} */
-varragState = {
+const DragState = {
     INIT:      0,
     DRAGGING:  1,
     CANCELLED: 2,
 };
 
-var DRAG_CURSOR_MAP = {
+const DRAG_CURSOR_MAP = {
     0: Meta.Cursor.DND_UNSUPPORTED_TARGET,
     1: Meta.Cursor.DND_COPY,
     2: Meta.Cursor.DND_MOVE,
 };
 
-var DragDropResult = {
+export const DragDropResult = {
     FAILURE:  0,
     SUCCESS:  1,
     CONTINUE: 2,
 };
-var dragMonitors = [];
+export const dragMonitors = [];
 
 let eventHandlerActor = null;
 let currentDraggable = null;
@@ -79,23 +78,23 @@ function _getRealActorScale(actor) {
 /**
  * @param {DragMonitor} monitor
  */
-function addDragMonitor(monitor) {
+export function addDragMonitor(monitor) {
     dragMonitors.push(monitor);
 }
 
 /**
  * @param {DragMonitor} monitor
  */
-function removeDragMonitor(monitor) {
+export function removeDragMonitor(monitor) {
     for (let i = 0; i < dragMonitors.length; i++) {
-        if (dragMonitors[i] == monitor) {
+        if (dragMonitors[i] === monitor) {
             dragMonitors.splice(i, 1);
             return;
         }
     }
 }
 
-var _Draggable = class _Draggable extends Signals.EventEmitter {
+class _Draggable extends Signals.EventEmitter {
     constructor(actor, params) {
         super();
 
@@ -866,7 +865,7 @@ var _Draggable = class _Draggable extends Signals.EventEmitter {
         this._dragState = DragState.INIT;
         currentDraggable = null;
     }
-};
+}
 
 /**
  * makeDraggable:
@@ -890,6 +889,6 @@ var _Draggable = class _Draggable extends Signals.EventEmitter {
  * target wants to reuse the actor, it's up to the drop target to
  * reset these values.
  */
-function makeDraggable(actor, params) {
+export function makeDraggable(actor, params) {
     return new _Draggable(actor, params);
 }

js/ui/edgeDragAction.js

@@ -1,17 +1,16 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported EdgeDragAction */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
 
-var EDGE_THRESHOLD = 20;
+const EDGE_THRESHOLD = 20;
-var DRAG_DISTANCE = 80;
+const DRAG_DISTANCE = 80;
 
-var EdgeDragAction = GObject.registerClass({
+export const EdgeDragAction = GObject.registerClass({
     Signals: {
         'activated': {},
         'progress': { param_types: [GObject.TYPE_DOUBLE] },

js/ui/endSessionDialog.js

@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported init, EndSessionDialog */
 /*
  * Copyright 2010-2016 Red Hat, Inc
  *
@@ -17,25 +16,25 @@
  * along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 
-const AccountsService = imports.gi.AccountsService;
+import AccountsService from 'gi://AccountsService';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const Polkit = imports.gi.Polkit;
+import Polkit from 'gi://Polkit';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
-const UPower = imports.gi.UPowerGlib;
+import UPower from 'gi://UPowerGlib';
 
-const CheckBox = imports.ui.checkBox;
+import * as CheckBox from './checkBox.js';
-const Dialog = imports.ui.dialog;
+import * as Dialog from './dialog.js';
-const GnomeSession = imports.misc.gnomeSession;
+import * as GnomeSession from '../misc/gnomeSession.js';
-const LoginManager = imports.misc.loginManager;
+import * as LoginManager from '../misc/loginManager.js';
-const ModalDialog = imports.ui.modalDialog;
+import * as ModalDialog from './modalDialog.js';
-const UserWidget = imports.ui.userWidget;
+import * as UserWidget from './userWidget.js';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from '../misc/fileUtils.js';
 
 const _ITEM_ICON_SIZE = 64;
 
@@ -159,7 +158,7 @@ const DialogContent = {
     4 /* DialogType.UPGRADE_RESTART */: restartUpgradeDialogContent,
 };
 
-var MAX_USERS_IN_SESSION_DIALOG = 5;
+const MAX_USERS_IN_SESSION_DIALOG = 5;
 
 const LogindSessionIface = loadInterfaceXML('org.freedesktop.login1.Session');
 const LogindSession = Gio.DBusProxy.makeProxyWrapper(LogindSessionIface);
@@ -224,14 +223,14 @@ function _setCheckBoxLabel(checkBox, text) {
     }
 }
 
-function init() {
+export function init() {
     // This always returns the same singleton object
     // By instantiating it initially, we register the
     // bus object, etc.
     new EndSessionDialog();
 }
 
-var EndSessionDialog = GObject.registerClass(
+const EndSessionDialog = GObject.registerClass(
 class EndSessionDialog extends ModalDialog.ModalDialog {
     _init() {
         super._init({

js/ui/environment.js

@@ -14,8 +14,8 @@ import Polkit from 'gi://Polkit';
 import Shell from 'gi://Shell';
 import St from 'gi://St';
 
-const SignalTracker = imports.misc.signalTracker;
+import * as SignalTracker from '../misc/signalTracker.js';
-const {adjustAnimationTime} = imports.misc.animationUtils;
+import {adjustAnimationTime} from '../misc/animationUtils.js';
 
 setConsoleLogDomain('GNOME Shell');
 

js/ui/extensionDownloader.js

@@ -1,27 +1,26 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported init, installExtension, uninstallExtension, checkForUpdates */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Soup = imports.gi.Soup;
+import Soup from 'gi://Soup';
 
 const Config = imports.misc.config;
-const Dialog = imports.ui.dialog;
+import * as Dialog from './dialog.js';
-const ExtensionUtils = imports.misc.extensionUtils;
+import * as ExtensionUtils from '../misc/extensionUtils.js';
-const FileUtils = imports.misc.fileUtils;
+import * as FileUtils from '../misc/fileUtils.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const ModalDialog = imports.ui.modalDialog;
+import * as ModalDialog from './modalDialog.js';
 
 Gio._promisify(Soup.Session.prototype, 'send_and_read_async');
 Gio._promisify(Gio.OutputStream.prototype, 'write_bytes_async');
 Gio._promisify(Gio.IOStream.prototype, 'close_async');
 Gio._promisify(Gio.Subprocess.prototype, 'wait_check_async');
 
-var REPOSITORY_URL_DOWNLOAD = 'https://extensions.gnome.org/download-extension/%s.shell-extension.zip';
+const REPOSITORY_URL_DOWNLOAD = 'https://extensions.gnome.org/download-extension/%s.shell-extension.zip';
-var REPOSITORY_URL_INFO     = 'https://extensions.gnome.org/extension-info/';
+const REPOSITORY_URL_INFO     = 'https://extensions.gnome.org/extension-info/';
-var REPOSITORY_URL_UPDATE   = 'https://extensions.gnome.org/update-info/';
+const REPOSITORY_URL_UPDATE   = 'https://extensions.gnome.org/update-info/';
 
 let _httpSession;
 
@@ -30,7 +29,7 @@ let _httpSession;
  * @param {Gio.DBusMethodInvocation} invocation - the caller
  * @returns {void}
  */
-async function installExtension(uuid, invocation) {
+export async function installExtension(uuid, invocation) {
     const params = {
         uuid,
         shell_version: Config.PACKAGE_VERSION,
@@ -63,7 +62,7 @@ async function installExtension(uuid, invocation) {
 /**
  * @param {string} uuid
  */
-function uninstallExtension(uuid) {
+export function uninstallExtension(uuid) {
     let extension = Main.extensionManager.lookup(uuid);
     if (!extension)
         return false;
@@ -153,7 +152,7 @@ async function extractExtensionArchive(bytes, dir) {
  * @param {string} uuid - extension uuid
  * @returns {void}
  */
-async function downloadExtensionUpdate(uuid) {
+export async function downloadExtensionUpdate(uuid) {
     if (!Main.extensionManager.updatesSupported)
         return;
 
@@ -184,7 +183,7 @@ async function downloadExtensionUpdate(uuid) {
  *
  * @returns {void}
  */
-async function checkForUpdates() {
+export async function checkForUpdates() {
     if (!Main.extensionManager.updatesSupported)
         return;
 
@@ -244,7 +243,7 @@ async function checkForUpdates() {
     }
 }
 
-var InstallExtensionDialog = GObject.registerClass(
+const InstallExtensionDialog = GObject.registerClass(
 class InstallExtensionDialog extends ModalDialog.ModalDialog {
     _init(uuid, info, invocation) {
         super._init({ styleClass: 'extension-dialog' });
@@ -311,6 +310,6 @@ class InstallExtensionDialog extends ModalDialog.ModalDialog {
     }
 });
 
-function init() {
+export function init() {
     _httpSession = new Soup.Session();
 }

js/ui/extensionSystem.js

@@ -1,23 +1,20 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported init connect disconnect ExtensionManager */
 
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Shell = imports.gi.Shell;
+import St from 'gi://St';
-const St = imports.gi.St;
+import Shell from 'gi://Shell';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-const ExtensionDownloader = imports.ui.extensionDownloader;
+import * as ExtensionDownloader from './extensionDownloader.js';
-const ExtensionUtils = imports.misc.extensionUtils;
+import {ExtensionState, ExtensionType} from '../misc/extensionUtils.js';
-const FileUtils = imports.misc.fileUtils;
+import * as FileUtils from '../misc/fileUtils.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const MessageTray = imports.ui.messageTray;
+import * as MessageTray from './messageTray.js';
 
 const Config = imports.misc.config;
 
-const { ExtensionState, ExtensionType } = ExtensionUtils;
-
 const ENABLED_EXTENSIONS_KEY = 'enabled-extensions';
 const DISABLED_EXTENSIONS_KEY = 'disabled-extensions';
 const DISABLE_USER_EXTENSIONS_KEY = 'disable-user-extensions';
@@ -25,7 +22,7 @@ const EXTENSION_DISABLE_VERSION_CHECK_KEY = 'disable-extension-version-validatio
 
 const UPDATE_CHECK_TIMEOUT = 24 * 60 * 60; // 1 day in seconds
 
-var ExtensionManager = class extends Signals.EventEmitter {
+export class ExtensionManager extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -768,7 +765,7 @@ var ExtensionManager = class extends Signals.EventEmitter {
         await this._onEnabledExtensionsChanged();
         await this._enableAllExtensions();
     }
-};
+}
 
 const ExtensionUpdateSource = GObject.registerClass(
 class ExtensionUpdateSource extends MessageTray.Source {

js/ui/focusCaretTracker.js

@@ -20,15 +20,14 @@
  * Contributor:
  *   Magdalen Berns <m.berns@sms.ed.ac.uk>
  */
-/* exported FocusCaretTracker */
 
-const Atspi = imports.gi.Atspi;
+import Atspi from 'gi://Atspi';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
 const CARETMOVED        = 'object:text-caret-moved';
 const STATECHANGED      = 'object:state-changed';
 
-var FocusCaretTracker = class FocusCaretTracker extends Signals.EventEmitter {
+export class FocusCaretTracker extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -88,4 +87,4 @@ var FocusCaretTracker = class FocusCaretTracker extends Signals.EventEmitter {
         this._atspiListener.deregister(CARETMOVED);
         this._caretListenerRegistered = false;
     }
-};
+}

js/ui/grabHelper.js

@@ -1,11 +1,10 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported GrabHelper */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
 
 /**
  * GrabHelper:
@@ -18,7 +17,7 @@ const Params = imports.misc.params;
  * after you call ungrab(), but instead pass an 'onUngrab' callback when you
  * call grab().
  */
-class GrabHelper {
+export class GrabHelper {
     /**
      * @param {Clutter.Actor} owner the actor that owns the GrabHelper
      * @param {*} params optional parameters to pass to Main.pushModal()
@@ -293,4 +292,4 @@ class GrabHelper {
 
         return Clutter.EVENT_STOP;
     }
-};
+}

js/ui/ibusCandidatePopup.js

@@ -1,22 +1,21 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported CandidatePopup */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const IBus = imports.gi.IBus;
+import IBus from 'gi://IBus';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const BoxPointer = imports.ui.boxpointer;
+import * as BoxPointer from './boxpointer.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
 
-var MAX_CANDIDATES_PER_PAGE = 16;
+const MAX_CANDIDATES_PER_PAGE = 16;
 
-var DEFAULT_INDEX_LABELS = [
+const DEFAULT_INDEX_LABELS = [
     '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
     'a', 'b', 'c', 'd', 'e', 'f',
 ];
 
-var CandidateArea = GObject.registerClass({
+const CandidateArea = GObject.registerClass({
     Signals: {
         'candidate-clicked': {
             param_types: [
@@ -146,7 +145,7 @@ var CandidateArea = GObject.registerClass({
     }
 });
 
-var CandidatePopup = GObject.registerClass(
+export const CandidatePopup = GObject.registerClass(
 class IbusCandidatePopup extends BoxPointer.BoxPointer {
     _init() {
         super._init(St.Side.TOP);

js/ui/iconGrid.js

@@ -1,22 +1,21 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported BaseIcon, IconGrid, IconGridLayout */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
 
-var ICON_SIZE = 96;
+const ICON_SIZE = 96;
 
-var PAGE_SWITCH_TIME = 300;
+const PAGE_SWITCH_TIME = 300;
 
 /** @enum {number} */
-var IconSize = {
+const IconSize = {
     LARGE: 96,
     MEDIUM: 64,
     MEDIUM_SMALL: 48,
@@ -25,8 +24,8 @@ var IconSize = {
     TINY: 16,
 };
 
-var APPICON_ANIMATION_OUT_SCALE = 3;
+const APPICON_ANIMATION_OUT_SCALE = 3;
-var APPICON_ANIMATION_OUT_TIME = 250;
+const APPICON_ANIMATION_OUT_TIME = 250;
 
 const ICON_POSITION_DELAY = 10;
 
@@ -49,11 +48,11 @@ const defaultGridModes = [
     },
 ];
 
-var LEFT_DIVIDER_LEEWAY = 20;
+const LEFT_DIVIDER_LEEWAY = 20;
-var RIGHT_DIVIDER_LEEWAY = 20;
+const RIGHT_DIVIDER_LEEWAY = 20;
 
 /** @enum {number} */
-var DragLocation = {
+export const DragLocation = {
     INVALID: 0,
     START_EDGE: 1,
     ON_ICON: 2,
@@ -61,7 +60,7 @@ var DragLocation = {
     EMPTY_SPACE: 4,
 };
 
-var BaseIcon = GObject.registerClass(
+export const BaseIcon = GObject.registerClass(
 class BaseIcon extends Shell.SquareBin {
     _init(label, params) {
         params = Params.parse(params, {
@@ -243,7 +242,7 @@ function swap(value, length) {
     return length - value - 1;
 }
 
-var IconGridLayout = GObject.registerClass({
+export const IconGridLayout = GObject.registerClass({
     Properties: {
         'allow-incomplete-pages': GObject.ParamSpec.boolean('allow-incomplete-pages',
             'Allow incomplete pages', 'Allow incomplete pages',
@@ -1160,7 +1159,7 @@ var IconGridLayout = GObject.registerClass({
     }
 });
 
-var IconGrid = GObject.registerClass({
+export const IconGrid = GObject.registerClass({
     Signals: {
         'pages-changed': {},
     },

js/ui/inhibitShortcutsDialog.js

@@ -1,14 +1,13 @@
-/* exported InhibitShortcutsDialog */
+import Clutter from 'gi://Clutter';
-const Clutter = imports.gi.Clutter;
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
+import Meta from 'gi://Meta';
-const Meta = imports.gi.Meta;
+import Pango from 'gi://Pango';
-const Pango = imports.gi.Pango;
+import Shell from 'gi://Shell';
-const Shell = imports.gi.Shell;
+import St from 'gi://St';
-const St = imports.gi.St;
 
-const Dialog = imports.ui.dialog;
+import * as Dialog from './dialog.js';
-const ModalDialog = imports.ui.modalDialog;
+import * as ModalDialog from './modalDialog.js';
-const PermissionStore = imports.misc.permissionStore;
+import * as PermissionStore from '../misc/permissionStore.js';
 
 const APP_ALLOWLIST = ['org.gnome.Settings.desktop'];
 const APP_PERMISSIONS_TABLE = 'gnome';
@@ -16,9 +15,9 @@ const APP_PERMISSIONS_ID = 'shortcuts-inhibitor';
 const GRANTED = 'GRANTED';
 const DENIED = 'DENIED';
 
-var DialogResponse = Meta.InhibitShortcutsDialogResponse;
+const DialogResponse = Meta.InhibitShortcutsDialogResponse;
 
-var InhibitShortcutsDialog = GObject.registerClass({
+export const InhibitShortcutsDialog = GObject.registerClass({
     Implements: [Meta.InhibitShortcutsDialog],
     Properties: {
         'window': GObject.ParamSpec.override('window', Meta.InhibitShortcutsDialog),

js/ui/init.js

@@ -8,7 +8,7 @@ import './environment.js';
 imports._promiseNative.setMainLoopHook(() => {
     // Queue starting the shell
     GLib.idle_add(GLib.PRIORITY_DEFAULT, () => {
-        imports.ui.main.start().catch(e => {
+        import('./main.js').then(main => main.start()).catch(e => {
             const error = new GLib.Error(
                 Gio.IOErrorEnum, Gio.IOErrorEnum.FAILED,
                 e.message);

js/ui/kbdA11yDialog.js

@@ -1,17 +1,16 @@
-/* exported KbdA11yDialog */
+import Clutter from 'gi://Clutter';
-const Clutter = imports.gi.Clutter;
+import Gio from 'gi://Gio';
-const Gio = imports.gi.Gio;
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
+import Meta from 'gi://Meta';
-const Meta = imports.gi.Meta;
 
-const Dialog = imports.ui.dialog;
+import * as Dialog from './dialog.js';
-const ModalDialog = imports.ui.modalDialog;
+import * as ModalDialog from './modalDialog.js';
 
 const KEYBOARD_A11Y_SCHEMA    = 'org.gnome.desktop.a11y.keyboard';
 const KEY_STICKY_KEYS_ENABLED = 'stickykeys-enable';
 const KEY_SLOW_KEYS_ENABLED   = 'slowkeys-enable';
 
-var KbdA11yDialog = GObject.registerClass(
+export const KbdA11yDialog = GObject.registerClass(
 class KbdA11yDialog extends GObject.Object {
     _init() {
         super._init();

js/ui/keyboard.js

@@ -1,29 +1,27 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported KeyboardManager */
+import Clutter from 'gi://Clutter';
+import Gio from 'gi://Gio';
+import GLib from 'gi://GLib';
+import GObject from 'gi://GObject';
+import Meta from 'gi://Meta';
+import Graphene from 'gi://Graphene';
+import IBus from 'gi://IBus';
+import Shell from 'gi://Shell';
+import St from 'gi://St';
+import * as Signals from '../misc/signals.js';
 
-const Clutter = imports.gi.Clutter;
+import * as EdgeDragAction from './edgeDragAction.js';
-const Gio = imports.gi.Gio;
+import * as InputSourceManager from './status/keyboard.js';
-const GLib = imports.gi.GLib;
+import * as IBusManager from '../misc/ibusManager.js';
-const GObject = imports.gi.GObject;
+import * as BoxPointer from './boxpointer.js';
-const Graphene = imports.gi.Graphene;
+import * as Main from './main.js';
-const IBus = imports.gi.IBus;
+import * as PageIndicators from './pageIndicators.js';
-const Meta = imports.gi.Meta;
+import * as PopupMenu from './popupMenu.js';
-const Shell = imports.gi.Shell;
+import * as SwipeTracker from './swipeTracker.js';
-const St = imports.gi.St;
-const Signals = imports.misc.signals;
 
-const EdgeDragAction = imports.ui.edgeDragAction;
+const KEYBOARD_ANIMATION_TIME = 150;
-const InputSourceManager = imports.ui.status.keyboard;
+const KEYBOARD_REST_TIME = KEYBOARD_ANIMATION_TIME * 2;
-const IBusManager = imports.misc.ibusManager;
+const KEY_LONG_PRESS_TIME = 250;
-const BoxPointer = imports.ui.boxpointer;
-const Main = imports.ui.main;
-const PageIndicators = imports.ui.pageIndicators;
-const PopupMenu = imports.ui.popupMenu;
-const SwipeTracker = imports.ui.swipeTracker;
-
-var KEYBOARD_ANIMATION_TIME = 150;
-var KEYBOARD_REST_TIME = KEYBOARD_ANIMATION_TIME * 2;
-var KEY_LONG_PRESS_TIME = 250;
 
 const A11Y_APPLICATIONS_SCHEMA = 'org.gnome.desktop.a11y.applications';
 const SHOW_KEYBOARD = 'screen-keyboard-enabled';
@@ -35,7 +33,7 @@ const KEY_SIZE = 2;
 const KEY_RELEASE_TIMEOUT = 50;
 const BACKSPACE_WORD_DELETE_THRESHOLD = 50;
 
-var AspectContainer = GObject.registerClass(
+const AspectContainer = GObject.registerClass(
 class AspectContainer extends St.Widget {
     _init(params) {
         super._init(params);
@@ -82,7 +80,7 @@ class AspectContainer extends St.Widget {
     }
 });
 
-var KeyContainer = GObject.registerClass(
+const KeyContainer = GObject.registerClass(
 class KeyContainer extends St.Widget {
     _init() {
         const gridLayout = new Clutter.GridLayout({
@@ -166,7 +164,7 @@ class KeyContainer extends St.Widget {
     }
 });
 
-var Suggestions = GObject.registerClass(
+const Suggestions = GObject.registerClass(
 class Suggestions extends St.BoxLayout {
     _init() {
         super._init({
@@ -203,7 +201,7 @@ class Suggestions extends St.BoxLayout {
     }
 });
 
-var LanguageSelectionPopup = class extends PopupMenu.PopupMenu {
+class LanguageSelectionPopup extends PopupMenu.PopupMenu {
     constructor(actor) {
         super(actor, 0.5, St.Side.BOTTOM);
 
@@ -262,9 +260,9 @@ var LanguageSelectionPopup = class extends PopupMenu.PopupMenu {
         this.sourceActor.disconnectObject(this);
         super.destroy();
     }
-};
+}
 
-var Key = GObject.registerClass({
+const Key = GObject.registerClass({
     Signals: {
         'long-press': {},
         'pressed': {},
@@ -520,7 +518,7 @@ var Key = GObject.registerClass({
     }
 });
 
-var KeyboardModel = class {
+class KeyboardModel {
     constructor(groupName) {
         let names = [groupName];
         if (groupName.includes('+'))
@@ -552,9 +550,9 @@ var KeyboardModel = class {
     getKeysForLevel(levelName) {
         return this._model.levels.find(level => level == levelName);
     }
-};
+}
 
-var FocusTracker = class extends Signals.EventEmitter {
+class FocusTracker extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -651,9 +649,9 @@ var FocusTracker = class extends Signals.EventEmitter {
 
         return rect;
     }
-};
+}
 
-var EmojiPager = GObject.registerClass({
+const EmojiPager = GObject.registerClass({
     Properties: {
         'delta': GObject.ParamSpec.int(
             'delta', 'delta', 'delta',
@@ -936,7 +934,7 @@ var EmojiPager = GObject.registerClass({
     }
 });
 
-var EmojiSelection = GObject.registerClass({
+const EmojiSelection = GObject.registerClass({
     Signals: {
         'emoji-selected': { param_types: [GObject.TYPE_STRING] },
         'close-request': {},
@@ -1121,7 +1119,7 @@ var EmojiSelection = GObject.registerClass({
     }
 });
 
-var Keypad = GObject.registerClass({
+const Keypad = GObject.registerClass({
     Signals: {
         'keyval': { param_types: [GObject.TYPE_UINT] },
     },
@@ -1178,7 +1176,7 @@ var Keypad = GObject.registerClass({
     }
 });
 
-var KeyboardManager = class extends Signals.EventEmitter {
+export class KeyboardManager extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -1297,9 +1295,9 @@ var KeyboardManager = class extends Signals.EventEmitter {
 
         return false;
     }
-};
+}
 
-var Keyboard = GObject.registerClass({
+export const Keyboard = GObject.registerClass({
     Signals: {
         'visibility-changed': {},
     },
@@ -2170,7 +2168,7 @@ var Keyboard = GObject.registerClass({
     }
 });
 
-var KeyboardController = class extends Signals.EventEmitter {
+class KeyboardController extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -2279,4 +2277,4 @@ var KeyboardController = class extends Signals.EventEmitter {
         this._virtualDevice.notify_keyval(Clutter.get_current_event_time() * 1000,
                                           keyval, Clutter.KeyState.RELEASED);
     }
-};
+}

js/ui/layout.js

@@ -1,28 +1,27 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported MonitorConstraint, LayoutManager */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-const Background = imports.ui.background;
+import * as Background from './background.js';
-const BackgroundMenu = imports.ui.backgroundMenu;
+import * as BackgroundMenu from './backgroundMenu.js';
 
-const DND = imports.ui.dnd;
+import * as DND from './dnd.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
-const Ripples = imports.ui.ripples;
+import * as Ripples from './ripples.js';
 
-var STARTUP_ANIMATION_TIME = 500;
+const STARTUP_ANIMATION_TIME = 500;
-var BACKGROUND_FADE_ANIMATION_TIME = 1000;
+const BACKGROUND_FADE_ANIMATION_TIME = 1000;
 
-var HOT_CORNER_PRESSURE_THRESHOLD = 100; // pixels
+const HOT_CORNER_PRESSURE_THRESHOLD = 100; // pixels
-var HOT_CORNER_PRESSURE_TIMEOUT = 1000; // ms
+const HOT_CORNER_PRESSURE_TIMEOUT = 1000; // ms
 
 const SCREEN_TRANSITION_DELAY = 250; // ms
 const SCREEN_TRANSITION_DURATION = 500; // ms
@@ -38,7 +37,7 @@ function isPopupMetaWindow(actor) {
     }
 }
 
-var MonitorConstraint = GObject.registerClass({
+export const MonitorConstraint = GObject.registerClass({
     Properties: {
         'primary': GObject.ParamSpec.boolean('primary',
                                              'Primary', 'Track primary monitor',
@@ -155,7 +154,7 @@ var MonitorConstraint = GObject.registerClass({
     }
 });
 
-var Monitor = class Monitor {
+class Monitor {
     constructor(index, geometry, geometryScale) {
         this.index = index;
         this.x = geometry.x;
@@ -168,7 +167,7 @@ var Monitor = class Monitor {
     get inFullscreen() {
         return global.display.get_monitor_in_fullscreen(this.index);
     }
-};
+}
 
 const UiActor = GObject.registerClass(
 class UiActor extends St.Widget {
@@ -189,7 +188,7 @@ const defaultParams = {
     affectsInputRegion: true,
 };
 
-var LayoutManager = GObject.registerClass({
+export const LayoutManager = GObject.registerClass({
     Signals: {
         'hot-corners-changed': {},
         'startup-complete': {},
@@ -1131,7 +1130,7 @@ var LayoutManager = GObject.registerClass({
 //
 // This class manages a "hot corner" that can toggle switching to
 // overview.
-var HotCorner = GObject.registerClass(
+export const HotCorner = GObject.registerClass(
 class HotCorner extends Clutter.Actor {
     _init(layoutManager, monitor, x, y) {
         super._init();
@@ -1299,7 +1298,7 @@ class HotCorner extends Clutter.Actor {
     }
 });
 
-var PressureBarrier = class PressureBarrier extends Signals.EventEmitter {
+class PressureBarrier extends Signals.EventEmitter {
     constructor(threshold, timeout, actionMode) {
         super();
 
@@ -1441,9 +1440,9 @@ var PressureBarrier = class PressureBarrier extends Signals.EventEmitter {
         if (this._currentPressure >= this._threshold)
             this._trigger();
     }
-};
+}
 
-var ScreenTransition = GObject.registerClass(
+const ScreenTransition = GObject.registerClass(
 class ScreenTransition extends Clutter.Actor {
     _init() {
         super._init({ visible: false });

js/ui/lightbox.js

@@ -1,16 +1,15 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Lightbox */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
 
-var DEFAULT_FADE_FACTOR = 0.4;
+export const DEFAULT_FADE_FACTOR = 0.4;
-var VIGNETTE_BRIGHTNESS = 0.5;
+export const VIGNETTE_BRIGHTNESS = 0.5;
-var VIGNETTE_SHARPNESS = 0.7;
+export const VIGNETTE_SHARPNESS = 0.7;
 
 const VIGNETTE_DECLARATIONS = '                                              \
 uniform float brightness;                                                  \n\
@@ -29,7 +28,7 @@ cogl_color_out.a *= 1.0 - pixel_brightness * brightness;                   \n\
 cogl_color_out.a += (rand(position) - 0.5) / 100.0;                        \n';
 
 
-var RadialShaderEffect = GObject.registerClass({
+const RadialShaderEffect = GObject.registerClass({
     Properties: {
         'brightness': GObject.ParamSpec.float(
             'brightness', 'brightness', 'brightness',
@@ -89,7 +88,7 @@ var RadialShaderEffect = GObject.registerClass({
 /**
  * Lightbox:
  */
-var Lightbox = GObject.registerClass({
+export const Lightbox = GObject.registerClass({
     Properties: {
         'active': GObject.ParamSpec.boolean(
             'active', 'active', 'active', GObject.ParamFlags.READABLE, false),

js/ui/locatePointer.js

@@ -1,14 +1,13 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported LocatePointer */
 
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const Ripples = imports.ui.ripples;
+import * as Ripples from './ripples.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
 
-const LOCATE_POINTER_KEY = "locate-pointer";
+const LOCATE_POINTER_KEY = 'locate-pointer';
-const LOCATE_POINTER_SCHEMA = "org.gnome.desktop.interface";
+const LOCATE_POINTER_SCHEMA = 'org.gnome.desktop.interface';
 
-var LocatePointer = class {
+export class LocatePointer {
     constructor() {
         this._settings = new Gio.Settings({ schema_id: LOCATE_POINTER_SCHEMA });
         this._settings.connect(`changed::${LOCATE_POINTER_KEY}`, () => this._syncEnabled());
@@ -36,4 +35,4 @@ var LocatePointer = class {
         let [x, y] = global.get_pointer();
         this._ripples.playAnimation(x, y);
     }
-};
+}

js/ui/lookingGlass.js

@@ -1,34 +1,31 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported LookingGlass */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Cogl = imports.gi.Cogl;
+import Cogl from 'gi://Cogl';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Graphene = imports.gi.Graphene;
+import Graphene from 'gi://Graphene';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
-const System = imports.system;
+import System from 'system';
 
-const History = imports.misc.history;
+import * as History from '../misc/history.js';
-const ExtensionUtils = imports.misc.extensionUtils;
+import {ExtensionState} from '../misc/extensionUtils.js';
-const PopupMenu = imports.ui.popupMenu;
+import * as PopupMenu from './popupMenu.js';
-const ShellEntry = imports.ui.shellEntry;
+import * as ShellEntry from './shellEntry.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const JsParse = imports.misc.jsParse;
+import * as JsParse from '../misc/jsParse.js';
-
-const { ExtensionState } = ExtensionUtils;
 
 const CHEVRON = '>>> ';
 
 /* Imports...feel free to add here as needed */
 const commandHeader = `
     const {Clutter, Gio, GLib, GObject, Meta, Shell, St} = imports.gi;
-    const Main = await imports.ui.main;
+    const Main = await import('resource:///org/gnome/shell/ui/main.js');
 
     /* Utility functions...we should probably be able to use these
      * in the shell core code too. */
@@ -43,9 +40,10 @@ const AsyncFunction = async function () {}.constructor;
 
 const HISTORY_KEY = 'looking-glass-history';
 // Time between tabs for them to count as a double-tab event
-var AUTO_COMPLETE_DOUBLE_TAB_DELAY = 500;
+
-var AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION = 200;
+const AUTO_COMPLETE_DOUBLE_TAB_DELAY = 500;
-var AUTO_COMPLETE_GLOBAL_KEYWORDS = _getAutoCompleteGlobalKeywords();
+const AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION = 200;
+const AUTO_COMPLETE_GLOBAL_KEYWORDS = _getAutoCompleteGlobalKeywords();
 
 const LG_ANIMATION_TIME = 500;
 
@@ -68,7 +66,7 @@ function _getAutoCompleteGlobalKeywords() {
     return keywords.concat(windowProperties).concat(headerProperties);
 }
 
-var AutoComplete = class AutoComplete extends Signals.EventEmitter {
+class AutoComplete extends Signals.EventEmitter {
     constructor(entry) {
         super();
 
@@ -133,10 +131,9 @@ var AutoComplete = class AutoComplete extends Signals.EventEmitter {
 
         this._entry.clutter_text.insert_text(additionalCompletionText, cursorPos);
     }
-};
+}
 
-
+const Notebook = GObject.registerClass({
-var Notebook = GObject.registerClass({
     Signals: { 'selection': { param_types: [Clutter.Actor.$gtype] } },
 }, class Notebook extends St.BoxLayout {
     _init() {
@@ -282,7 +279,7 @@ function objectToString(o) {
     }
 }
 
-var ObjLink = GObject.registerClass(
+const ObjLink = GObject.registerClass(
 class ObjLink extends St.Button {
     _init(lookingGlass, o, title) {
         let text;
@@ -310,7 +307,7 @@ class ObjLink extends St.Button {
     }
 });
 
-var Result = GObject.registerClass(
+const Result = GObject.registerClass(
 class Result extends St.BoxLayout {
     _init(lookingGlass, command, o, index) {
         super._init({ vertical: true });
@@ -333,7 +330,7 @@ class Result extends St.BoxLayout {
     }
 });
 
-var WindowList = GObject.registerClass({
+const WindowList = GObject.registerClass({
 }, class WindowList extends St.BoxLayout {
     _init(lookingGlass) {
         super._init({ name: 'Windows', vertical: true, style: 'spacing: 8px' });
@@ -386,7 +383,7 @@ var WindowList = GObject.registerClass({
     }
 });
 
-var ObjInspector = GObject.registerClass(
+const ObjInspector = GObject.registerClass(
 class ObjInspector extends St.ScrollView {
     _init(lookingGlass) {
         super._init({
@@ -525,7 +522,7 @@ class ObjInspector extends St.ScrollView {
     }
 });
 
-var RedBorderEffect = GObject.registerClass(
+const RedBorderEffect = GObject.registerClass(
 class RedBorderEffect extends Clutter.Effect {
     _init() {
         super._init();
@@ -577,7 +574,7 @@ class RedBorderEffect extends Clutter.Effect {
     }
 });
 
-var Inspector = GObject.registerClass({
+const Inspector = GObject.registerClass({
     Signals: {
         'closed': {},
         'target': { param_types: [Clutter.Actor.$gtype, GObject.TYPE_DOUBLE, GObject.TYPE_DOUBLE] },
@@ -718,7 +715,7 @@ var Inspector = GObject.registerClass({
     }
 });
 
-var Extensions = GObject.registerClass({
+const Extensions = GObject.registerClass({
 }, class Extensions extends St.BoxLayout {
     _init(lookingGlass) {
         super._init({ vertical: true, name: 'lookingGlassExtensions' });
@@ -887,7 +884,7 @@ var Extensions = GObject.registerClass({
 });
 
 
-var ActorLink = GObject.registerClass({
+const ActorLink = GObject.registerClass({
     Signals: {
         'inspect-actor': {},
     },
@@ -940,7 +937,7 @@ var ActorLink = GObject.registerClass({
     }
 });
 
-var ActorTreeViewer = GObject.registerClass(
+const ActorTreeViewer = GObject.registerClass(
 class ActorTreeViewer extends St.BoxLayout {
     _init(lookingGlass) {
         super._init();
@@ -1067,7 +1064,7 @@ class ActorTreeViewer extends St.BoxLayout {
     }
 });
 
-var DebugFlag = GObject.registerClass({
+const DebugFlag = GObject.registerClass({
     GTypeFlags: GObject.TypeFlags.ABSTRACT,
 }, class DebugFlag extends St.Button {
     _init(label) {
@@ -1132,7 +1129,7 @@ var DebugFlag = GObject.registerClass({
 });
 
 
-var ClutterDebugFlag = GObject.registerClass(
+const ClutterDebugFlag = GObject.registerClass(
 class ClutterDebugFlag extends DebugFlag {
     _init(categoryName, flagName) {
         super._init(flagName);
@@ -1161,7 +1158,7 @@ class ClutterDebugFlag extends DebugFlag {
     }
 });
 
-var MutterPaintDebugFlag = GObject.registerClass(
+const MutterPaintDebugFlag = GObject.registerClass(
 class MutterPaintDebugFlag extends DebugFlag {
     _init(flagName) {
         super._init(flagName);
@@ -1182,7 +1179,7 @@ class MutterPaintDebugFlag extends DebugFlag {
     }
 });
 
-var MutterTopicDebugFlag = GObject.registerClass(
+const MutterTopicDebugFlag = GObject.registerClass(
 class MutterTopicDebugFlag extends DebugFlag {
     _init(flagName) {
         super._init(flagName);
@@ -1203,7 +1200,7 @@ class MutterTopicDebugFlag extends DebugFlag {
     }
 });
 
-var UnsafeModeDebugFlag = GObject.registerClass(
+const UnsafeModeDebugFlag = GObject.registerClass(
 class UnsafeModeDebugFlag extends DebugFlag {
     _init() {
         super._init('unsafe-mode');
@@ -1222,7 +1219,7 @@ class UnsafeModeDebugFlag extends DebugFlag {
     }
 });
 
-var DebugFlags = GObject.registerClass(
+const DebugFlags = GObject.registerClass(
 class DebugFlags extends St.BoxLayout {
     _init() {
         super._init({
@@ -1279,7 +1276,7 @@ class DebugFlags extends St.BoxLayout {
 });
 
 
-var LookingGlass = GObject.registerClass(
+export const LookingGlass = GObject.registerClass(
 class LookingGlass extends St.BoxLayout {
     _init() {
         super._init({

js/ui/magnifier.js

@@ -1,27 +1,26 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Magnifier */
 
-const Atspi = imports.gi.Atspi;
+import Atspi from 'gi://Atspi';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GDesktopEnums = imports.gi.GDesktopEnums;
+import GDesktopEnums from 'gi://GDesktopEnums';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-const Background = imports.ui.background;
+import * as Background from './background.js';
-const FocusCaretTracker = imports.ui.focusCaretTracker;
+import * as FocusCaretTracker from './focusCaretTracker.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
-const PointerWatcher = imports.ui.pointerWatcher;
+import * as PointerWatcher from './pointerWatcher.js';
 
-var CROSSHAIRS_CLIP_SIZE = [100, 100];
+const CROSSHAIRS_CLIP_SIZE = [100, 100];
-var NO_CHANGE = 0.0;
+const NO_CHANGE = 0.0;
 
-var POINTER_REST_TIME = 1000; // milliseconds
+const POINTER_REST_TIME = 1000; // milliseconds
 
 // Settings
 const MAGNIFIER_SCHEMA          = 'org.gnome.desktop.a11y.magnifier';
@@ -47,7 +46,7 @@ const CROSS_HAIRS_OPACITY_KEY   = 'cross-hairs-opacity';
 const CROSS_HAIRS_LENGTH_KEY    = 'cross-hairs-length';
 const CROSS_HAIRS_CLIP_KEY      = 'cross-hairs-clip';
 
-var MouseSpriteContent = GObject.registerClass({
+const MouseSpriteContent = GObject.registerClass({
     Implements: [Clutter.Content],
 }, class MouseSpriteContent extends GObject.Object {
     _init() {
@@ -95,7 +94,7 @@ var MouseSpriteContent = GObject.registerClass({
     }
 });
 
-var Magnifier = class Magnifier extends Signals.EventEmitter {
+export class Magnifier extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -758,9 +757,9 @@ var Magnifier = class Magnifier extends Signals.EventEmitter {
             this._zoomRegions[0].setContrast(contrast);
         }
     }
-};
+}
 
-var ZoomRegion = class ZoomRegion {
+class ZoomRegion {
     constructor(magnifier, mouseSourceActor) {
         this._magnifier = magnifier;
         this._focusCaretTracker = new FocusCaretTracker.FocusCaretTracker();
@@ -1822,7 +1821,7 @@ var ZoomRegion = class ZoomRegion {
     }
 }
 
-var Crosshairs = GObject.registerClass(
+const Crosshairs = GObject.registerClass(
 class Crosshairs extends Clutter.Actor {
     _init() {
         // Set the group containing the crosshairs to three times the desktop

js/ui/main.js

@@ -1,61 +1,52 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported componentManager, notificationDaemon, windowAttentionHandler,
-            ctrlAltTabManager, padOsdService, osdWindowManager,
-            osdMonitorLabeler, shellMountOpDBusService, shellDBusService,
-            shellAccessDialogDBusService, shellAudioSelectionDBusService,
-            screenSaverDBus, uiGroup, magnifier, xdndHandler, keyboard,
-            kbdA11yDialog, introspectService, start, pushModal, popModal,
-            activateWindow, moveWindowToMonitorAndWorkspace,
-            createLookingGlass, initializeDeferredWork,
-            getStyleVariant, getThemeStylesheet, setThemeStylesheet, screenshotUI */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const AccessDialog = imports.ui.accessDialog;
+import * as AccessDialog from './accessDialog.js';
-const AudioDeviceSelection = imports.ui.audioDeviceSelection;
+import * as AudioDeviceSelection from './audioDeviceSelection.js';
-const Components = imports.ui.components;
+import * as Components from './components.js';
-const CtrlAltTab = imports.ui.ctrlAltTab;
+import * as CtrlAltTab from './ctrlAltTab.js';
-const EndSessionDialog = imports.ui.endSessionDialog;
+import * as EndSessionDialog from './endSessionDialog.js';
-const ExtensionSystem = imports.ui.extensionSystem;
+import * as ExtensionSystem from './extensionSystem.js';
-const ExtensionDownloader = imports.ui.extensionDownloader;
+import * as ExtensionDownloader from './extensionDownloader.js';
-const InputMethod = imports.misc.inputMethod;
+import * as InputMethod from '../misc/inputMethod.js';
-const Introspect = imports.misc.introspect;
+import * as Introspect from '../misc/introspect.js';
-const Keyboard = imports.ui.keyboard;
+import * as Keyboard from './keyboard.js';
-const MessageTray = imports.ui.messageTray;
+import * as MessageTray from './messageTray.js';
-const ModalDialog = imports.ui.modalDialog;
+import * as ModalDialog from './modalDialog.js';
-const OsdWindow = imports.ui.osdWindow;
+import * as OsdWindow from './osdWindow.js';
-const OsdMonitorLabeler = imports.ui.osdMonitorLabeler;
+import * as OsdMonitorLabeler from './osdMonitorLabeler.js';
-const Overview = imports.ui.overview;
+import * as Overview from './overview.js';
-const PadOsd = imports.ui.padOsd;
+import * as PadOsd from './padOsd.js';
-const Panel = imports.ui.panel;
+import * as Panel from './panel.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
-const RunDialog = imports.ui.runDialog;
+import * as RunDialog from './runDialog.js';
-const WelcomeDialog = imports.ui.welcomeDialog;
+import * as WelcomeDialog from './welcomeDialog.js';
-const Layout = imports.ui.layout;
+import * as Layout from './layout.js';
-const LoginManager = imports.misc.loginManager;
+import * as LoginManager from '../misc/loginManager.js';
-const LookingGlass = imports.ui.lookingGlass;
+import * as LookingGlass from './lookingGlass.js';
-const NotificationDaemon = imports.ui.notificationDaemon;
+import * as NotificationDaemon from './notificationDaemon.js';
-const WindowAttentionHandler = imports.ui.windowAttentionHandler;
+import * as WindowAttentionHandler from './windowAttentionHandler.js';
-const Screenshot = imports.ui.screenshot;
+import * as Screenshot from './screenshot.js';
-const ScreenShield = imports.ui.screenShield;
+import * as ScreenShield from './screenShield.js';
-const SessionMode = imports.ui.sessionMode;
+import * as SessionMode from './sessionMode.js';
-const ShellDBus = imports.ui.shellDBus;
+import * as ShellDBus from './shellDBus.js';
-const ShellMountOperation = imports.ui.shellMountOperation;
+import * as ShellMountOperation from './shellMountOperation.js';
-const WindowManager = imports.ui.windowManager;
+import * as WindowManager from './windowManager.js';
-const Magnifier = imports.ui.magnifier;
+import * as Magnifier from './magnifier.js';
-const XdndHandler = imports.ui.xdndHandler;
+import * as XdndHandler from './xdndHandler.js';
-const KbdA11yDialog = imports.ui.kbdA11yDialog;
+import * as KbdA11yDialog from './kbdA11yDialog.js';
-const LocatePointer = imports.ui.locatePointer;
+import * as LocatePointer from './locatePointer.js';
-const PointerA11yTimeout = imports.ui.pointerA11yTimeout;
+import * as PointerA11yTimeout from './pointerA11yTimeout.js';
-const ParentalControlsManager = imports.misc.parentalControlsManager;
+import * as ParentalControlsManager from '../misc/parentalControlsManager.js';
 const Config = imports.misc.config;
-const Util = imports.misc.util;
+import * as Util from '../misc/util.js';
 
 const WELCOME_DIALOG_LAST_SHOWN_VERSION = 'welcome-dialog-last-shown-version';
 // Make sure to mention the point release, otherwise it will show every time
@@ -64,41 +55,42 @@ const WELCOME_DIALOG_LAST_TOUR_CHANGE = '40.beta';
 const LOG_DOMAIN = 'GNOME Shell';
 const GNOMESHELL_STARTED_MESSAGE_ID = 'f3ea493c22934e26811cd62abe8e203a';
 
-var componentManager = null;
+export let componentManager = null;
-var extensionManager = null;
+export let extensionManager = null;
-var panel = null;
+export let panel = null;
-var overview = null;
+export let overview = null;
-var runDialog = null;
+export let runDialog = null;
-var lookingGlass = null;
+export let lookingGlass = null;
-var welcomeDialog = null;
+export let welcomeDialog = null;
-var wm = null;
+export let wm = null;
-var messageTray = null;
+export let messageTray = null;
-var screenShield = null;
+export let screenShield = null;
-var notificationDaemon = null;
+export let notificationDaemon = null;
-var windowAttentionHandler = null;
+export let windowAttentionHandler = null;
-var ctrlAltTabManager = null;
+export let ctrlAltTabManager = null;
-var padOsdService = null;
+export let padOsdService = null;
-var osdWindowManager = null;
+export let osdWindowManager = null;
-var osdMonitorLabeler = null;
+export let osdMonitorLabeler = null;
-var sessionMode = null;
+export let sessionMode = null;
-var screenshotUI = null;
+export let screenshotUI = null;
-var shellAccessDialogDBusService = null;
+export let shellAccessDialogDBusService = null;
-var shellAudioSelectionDBusService = null;
+export let shellAudioSelectionDBusService = null;
-var shellDBusService = null;
+export let shellDBusService = null;
-var shellMountOpDBusService = null;
+export let shellMountOpDBusService = null;
-var screenSaverDBus = null;
+export let screenSaverDBus = null;
-var modalCount = 0;
+export let modalCount = 0;
-var actionMode = Shell.ActionMode.NONE;
+export let actionMode = Shell.ActionMode.NONE;
-var modalActorFocusStack = [];
+export let modalActorFocusStack = [];
-var uiGroup = null;
+export let uiGroup = null;
-var magnifier = null;
+export let magnifier = null;
-var xdndHandler = null;
+export let xdndHandler = null;
-var keyboard = null;
+export let keyboard = null;
-var layoutManager = null;
+export let layoutManager = null;
-var kbdA11yDialog = null;
+export let kbdA11yDialog = null;
-var inputMethod = null;
+export let inputMethod = null;
-var introspectService = null;
+export let introspectService = null;
-var locatePointer = null;
+export let locatePointer = null;
+
 let _startDate;
 let _defaultCssStylesheet = null;
 let _cssStylesheet = null;
@@ -147,7 +139,7 @@ function _sessionUpdated() {
 }
 
 /** @returns {void} */
-async function start() {
+export async function start() {
     globalThis.log = console.log;
 
     // Chain up async errors reported from C
@@ -408,7 +400,7 @@ function _getStylesheet(name) {
 }
 
 /** @returns {string} */
-function getStyleVariant() {
+export function getStyleVariant() {
     const {colorScheme} = St.Settings.get();
     switch (sessionMode.colorScheme) {
     case 'force-dark':
@@ -460,7 +452,7 @@ function _loadDefaultStylesheet() {
  * @returns {?Gio.File}: A #GFile that contains the theme CSS,
  *          null if using the default
  */
-function getThemeStylesheet() {
+export function getThemeStylesheet() {
     return _cssStylesheet;
 }
 
@@ -471,11 +463,11 @@ function getThemeStylesheet() {
  *
  * Set the theme CSS file that the shell will load
  */
-function setThemeStylesheet(cssStylesheet) {
+export function setThemeStylesheet(cssStylesheet) {
     _cssStylesheet = cssStylesheet ? Gio.File.new_for_path(cssStylesheet) : null;
 }
 
-function reloadThemeResource() {
+export function reloadThemeResource() {
     if (_themeResource)
         _themeResource._unregister();
 
@@ -500,7 +492,7 @@ function _loadOskLayouts() {
  *
  * Reloads the theme CSS file
  */
-function loadTheme() {
+export function loadTheme() {
     let themeContext = St.ThemeContext.get_for_stage(global.stage);
     let previousTheme = themeContext.get_theme();
 
@@ -528,7 +520,7 @@ function loadTheme() {
  * @param {string} msg A message
  * @param {string} details Additional information
  */
-function notify(msg, details) {
+export function notify(msg, details) {
     let source = new MessageTray.SystemNotificationSource();
     messageTray.add(source);
     let notification = new MessageTray.Notification(source, msg, details);
@@ -543,7 +535,7 @@ function notify(msg, details) {
  *
  * See shell_global_notify_problem().
  */
-function notifyError(msg, details) {
+export function notifyError(msg, details) {
     // Also print to stderr so it's logged somewhere
     if (details)
         console.warn(`error: ${msg}: ${details}`);
@@ -597,7 +589,7 @@ function _findModal(grab) {
  *
  * @returns {Clutter.Grab}: the grab handle created
  */
-function pushModal(actor, params) {
+export function pushModal(actor, params) {
     params = Params.parse(params, {
         timestamp: global.get_current_time(),
         options: 0,
@@ -654,7 +646,7 @@ function pushModal(actor, params) {
  * initiated event. If not provided then the value of
  * global.get_current_time() is assumed.
  */
-function popModal(grab, timestamp) {
+export function popModal(grab, timestamp) {
     if (timestamp == undefined)
         timestamp = global.get_current_time();
 
@@ -719,7 +711,7 @@ function popModal(grab, timestamp) {
  *
  * @returns {LookingGlass.LookingGlass}
  */
-function createLookingGlass() {
+export function createLookingGlass() {
     if (lookingGlass == null)
         lookingGlass = new LookingGlass.LookingGlass();
 
@@ -729,14 +721,14 @@ function createLookingGlass() {
 /**
  * Opens the run dialog
  */
-function openRunDialog() {
+export function openRunDialog() {
     if (runDialog == null)
         runDialog = new RunDialog.RunDialog();
 
     runDialog.open();
 }
 
-function openWelcomeDialog() {
+export function openWelcomeDialog() {
     if (welcomeDialog === null)
         welcomeDialog = new WelcomeDialog.WelcomeDialog();
 
@@ -753,7 +745,7 @@ function openWelcomeDialog() {
  * Activates @window, switching to its workspace first if necessary,
  * and switching out of the overview if it's currently active
  */
-function activateWindow(window, time, workspaceNum) {
+export function activateWindow(window, time, workspaceNum) {
     let workspaceManager = global.workspace_manager;
     let activeWorkspaceNum = workspaceManager.get_active_workspace_index();
     let windowWorkspaceNum = workspaceNum !== undefined ? workspaceNum : window.get_workspace().index();
@@ -780,7 +772,7 @@ function activateWindow(window, time, workspaceNum) {
  * @param {number} workspaceIndex - the requested workspace
  * @param {bool} append - create workspace if it doesn't exist
  */
-function moveWindowToMonitorAndWorkspace(window, monitorIndex, workspaceIndex, append = false) {
+export function moveWindowToMonitorAndWorkspace(window, monitorIndex, workspaceIndex, append = false) {
     // We need to move the window before changing the workspace, because
     // the move itself could cause a workspace change if the window enters
     // the primary monitor
@@ -801,15 +793,15 @@ function moveWindowToMonitorAndWorkspace(window, monitorIndex, workspaceIndex, a
 
 // TODO - replace this timeout with some system to guess when the user might
 // be e.g. just reading the screen and not likely to interact.
-var DEFERRED_TIMEOUT_SECONDS = 20;
+const DEFERRED_TIMEOUT_SECONDS = 20;
-var _deferredWorkData = {};
+let _deferredWorkData = {};
 // Work scheduled for some point in the future
-var _deferredWorkQueue = [];
+let _deferredWorkQueue = [];
 // Work we need to process before the next redraw
-var _beforeRedrawQueue = [];
+let _beforeRedrawQueue = [];
 // Counter to assign work ids
-var _deferredWorkSequence = 0;
+let _deferredWorkSequence = 0;
-var _deferredTimeoutId = 0;
+let _deferredTimeoutId = 0;
 
 function _runDeferredWork(workId) {
     if (!_deferredWorkData[workId])
@@ -868,7 +860,7 @@ function _queueBeforeRedraw(workId) {
  *
  * @returns {string}: A string work identifier
  */
-function initializeDeferredWork(actor, callback) {
+export function initializeDeferredWork(actor, callback) {
     // Turn into a string so we can use as an object property
     let workId = `${++_deferredWorkSequence}`;
     _deferredWorkData[workId] = {
@@ -900,7 +892,7 @@ function initializeDeferredWork(actor, callback) {
  * for example when data being displayed by the actor has
  * changed.
  */
-function queueDeferredWork(workId) {
+export function queueDeferredWork(workId) {
     let data = _deferredWorkData[workId];
     if (!data) {
         let message = `Invalid work id ${workId}`;
@@ -921,7 +913,7 @@ function queueDeferredWork(workId) {
     }
 }
 
-var RestartMessage = GObject.registerClass(
+const RestartMessage = GObject.registerClass(
 class RestartMessage extends ModalDialog.ModalDialog {
     _init(message) {
         super._init({
@@ -947,7 +939,7 @@ function showRestartMessage(message) {
     restartMessage.open();
 }
 
-var AnimationsSettings = class {
+class AnimationsSettings {
     constructor() {
         this._animationsEnabled = true;
         this._handles = new Set();
@@ -1008,4 +1000,4 @@ var AnimationsSettings = class {
         this._syncAnimationsEnabled();
         handle.connect('stopped', this._onRemoteAccessHandleStopped.bind(this));
     }
-};
+}

js/ui/messageList.js

@@ -1,28 +1,28 @@
-/* exported MessageListSection */
+import Atk from 'gi://Atk';
-const Atk = imports.gi.Atk;
+import Clutter from 'gi://Clutter';
-const Clutter = imports.gi.Clutter;
+import Gio from 'gi://Gio';
-const Gio = imports.gi.Gio;
+import GLib from 'gi://GLib';
-const GLib = imports.gi.GLib;
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
+import Graphene from 'gi://Graphene';
-const Graphene = imports.gi.Graphene;
+import Meta from 'gi://Meta';
-const Meta = imports.gi.Meta;
+import Pango from 'gi://Pango';
-const Pango = imports.gi.Pango;
+import St from 'gi://St';
-const St = imports.gi.St;
-const Main = imports.ui.main;
-const MessageTray = imports.ui.messageTray;
 
-const Util = imports.misc.util;
+import * as Main from './main.js';
+import * as MessageTray from './messageTray.js';
 
-var MESSAGE_ANIMATION_TIME = 100;
+import * as Util from '../misc/util.js';
 
-var DEFAULT_EXPAND_LINES = 6;
+const MESSAGE_ANIMATION_TIME = 100;
+
+const DEFAULT_EXPAND_LINES = 6;
 
 /**
  * @param {string} text
  * @param {boolean} allowMarkup
  * @returns {string}
  */
-function _fixMarkup(text, allowMarkup) {
+export function _fixMarkup(text, allowMarkup) {
     if (allowMarkup) {
         // Support &, ", ', < and >, escape all other
         // occurrences of '&'.
@@ -43,7 +43,7 @@ function _fixMarkup(text, allowMarkup) {
     return GLib.markup_escape_text(text, -1);
 }
 
-var URLHighlighter = GObject.registerClass(
+export const URLHighlighter = GObject.registerClass(
 class URLHighlighter extends St.Label {
     _init(text = '', lineWrap, allowMarkup) {
         super._init({
@@ -171,7 +171,7 @@ class URLHighlighter extends St.Label {
     }
 });
 
-var ScaleLayout = GObject.registerClass(
+const ScaleLayout = GObject.registerClass(
 class ScaleLayout extends Clutter.BinLayout {
     _init(params) {
         this._container = null;
@@ -214,7 +214,7 @@ class ScaleLayout extends Clutter.BinLayout {
     }
 });
 
-var LabelExpanderLayout = GObject.registerClass({
+const LabelExpanderLayout = GObject.registerClass({
     Properties: {
         'expansion': GObject.ParamSpec.double('expansion',
                                               'Expansion',
@@ -308,7 +308,7 @@ var LabelExpanderLayout = GObject.registerClass({
 });
 
 
-var Message = GObject.registerClass({
+export const Message = GObject.registerClass({
     Signals: {
         'close': {},
         'expanded': {},
@@ -555,7 +555,7 @@ var Message = GObject.registerClass({
     }
 });
 
-var MessageListSection = GObject.registerClass({
+export const MessageListSection = GObject.registerClass({
     Properties: {
         'can-clear': GObject.ParamSpec.boolean(
             'can-clear', 'can-clear', 'can-clear',

js/ui/messageTray.js

@@ -1,42 +1,40 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported NotificationPolicy, NotificationGenericPolicy,
-   NotificationApplicationPolicy, Source, SourceActor,
-   SystemNotificationSource, MessageTray */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Calendar = imports.ui.calendar;
+import * as Calendar from './calendar.js';
-const GnomeSession = imports.misc.gnomeSession;
+import * as GnomeSession from '../misc/gnomeSession.js';
-const Layout = imports.ui.layout;
+import * as Layout from './layout.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
-const SignalTracker = imports.misc.signalTracker;
+import * as SignalTracker from '../misc/signalTracker.js';
 
 const SHELL_KEYBINDINGS_SCHEMA = 'org.gnome.shell.keybindings';
 
-var ANIMATION_TIME = 200;
+export const ANIMATION_TIME = 200;
-var NOTIFICATION_TIMEOUT = 4000;
 
-var HIDE_TIMEOUT = 200;
+const NOTIFICATION_TIMEOUT = 4000;
-var LONGER_HIDE_TIMEOUT = 600;
 
-var MAX_NOTIFICATIONS_IN_QUEUE = 3;
+const HIDE_TIMEOUT = 200;
-var MAX_NOTIFICATIONS_PER_SOURCE = 3;
+const LONGER_HIDE_TIMEOUT = 600;
-var MAX_NOTIFICATION_BUTTONS = 3;
+
+const MAX_NOTIFICATIONS_IN_QUEUE = 3;
+const MAX_NOTIFICATIONS_PER_SOURCE = 3;
+const MAX_NOTIFICATION_BUTTONS = 3;
 
 // We delay hiding of the tray if the mouse is within MOUSE_LEFT_ACTOR_THRESHOLD
 // range from the point where it left the tray.
-var MOUSE_LEFT_ACTOR_THRESHOLD = 20;
+const MOUSE_LEFT_ACTOR_THRESHOLD = 20;
 
-var IDLE_TIME = 1000;
+const IDLE_TIME = 1000;
 
-var State = {
+export const State = {
     HIDDEN:  0,
     SHOWING: 1,
     SHOWN:   2,
@@ -51,7 +49,7 @@ var State = {
 // and REPLACED for notifications that were destroyed as a consequence of a
 // newer version having replaced them.
 /** @enum {number} */
-var NotificationDestroyedReason = {
+export const NotificationDestroyedReason = {
     EXPIRED: 1,
     DISMISSED: 2,
     SOURCE_CLOSED: 3,
@@ -63,7 +61,7 @@ var NotificationDestroyedReason = {
 // through the notification daemon. HIGH urgency value is used for chats received
 // through the Telepathy client.
 /** @enum {number} */
-var Urgency = {
+export const Urgency = {
     LOW: 0,
     NORMAL: 1,
     HIGH: 2,
@@ -77,12 +75,12 @@ var Urgency = {
 // status) and hence the same for every user. This affects whether the content
 // of a notification is shown on the lock screen.
 /** @enum {number} */
-var PrivacyScope = {
+export const PrivacyScope = {
     USER: 0,
     SYSTEM: 1,
 };
 
-var FocusGrabber = class FocusGrabber {
+class FocusGrabber {
     constructor(actor) {
         this._actor = actor;
         this._prevKeyFocusActor = null;
@@ -133,14 +131,14 @@ var FocusGrabber = class FocusGrabber {
                 global.stage.set_key_focus(null);
         }
     }
-};
+}
 
 // NotificationPolicy:
 // An object that holds all bits of configurable policy related to a notification
 // source, such as whether to play sound or honour the critical bit.
 //
 // A notification without a policy object will inherit the default one.
-var NotificationPolicy = GObject.registerClass({
+export const NotificationPolicy = GObject.registerClass({
     GTypeFlags: GObject.TypeFlags.ABSTRACT,
     Properties: {
         'enable': GObject.ParamSpec.boolean(
@@ -195,7 +193,7 @@ var NotificationPolicy = GObject.registerClass({
     }
 });
 
-var NotificationGenericPolicy = GObject.registerClass({
+export const NotificationGenericPolicy = GObject.registerClass({
 }, class NotificationGenericPolicy extends NotificationPolicy {
     _init() {
         super._init();
@@ -225,7 +223,7 @@ var NotificationGenericPolicy = GObject.registerClass({
     }
 });
 
-var NotificationApplicationPolicy = GObject.registerClass({
+export const NotificationApplicationPolicy = GObject.registerClass({
 }, class NotificationApplicationPolicy extends NotificationPolicy {
     _init(id) {
         super._init();
@@ -353,7 +351,7 @@ var NotificationApplicationPolicy = GObject.registerClass({
 // @source allows playing sounds).
 //
 // [1] https://developer.gnome.org/notification-spec/#markup
-var Notification = GObject.registerClass({
+export const Notification = GObject.registerClass({
     Properties: {
         'acknowledged': GObject.ParamSpec.boolean(
             'acknowledged', 'acknowledged', 'acknowledged',
@@ -505,7 +503,7 @@ var Notification = GObject.registerClass({
 });
 SignalTracker.registerDestroyableType(Notification);
 
-var NotificationBanner = GObject.registerClass({
+export const NotificationBanner = GObject.registerClass({
     Signals: {
         'done-displaying': {},
         'unfocused': {},
@@ -602,7 +600,7 @@ var NotificationBanner = GObject.registerClass({
     }
 });
 
-var SourceActor = GObject.registerClass(
+export const SourceActor = GObject.registerClass(
 class SourceActor extends St.Widget {
     _init(source, size) {
         super._init();
@@ -642,7 +640,7 @@ class SourceActor extends St.Widget {
     }
 });
 
-var Source = GObject.registerClass({
+export const Source = GObject.registerClass({
     Properties: {
         'count': GObject.ParamSpec.int(
             'count', 'count', 'count',
@@ -808,7 +806,7 @@ var Source = GObject.registerClass({
 });
 SignalTracker.registerDestroyableType(Source);
 
-var MessageTray = GObject.registerClass({
+export const MessageTray = GObject.registerClass({
     Signals: {
         'queue-changed': {},
         'source-added': { param_types: [Source.$gtype] },
@@ -1420,7 +1418,7 @@ var MessageTray = GObject.registerClass({
     }
 });
 
-var SystemNotificationSource = GObject.registerClass(
+export const SystemNotificationSource = GObject.registerClass(
 class SystemNotificationSource extends Source {
     _init() {
         super._init(_("System Information"), 'dialog-information-symbolic');

js/ui/modalDialog.js

@@ -1,23 +1,22 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported ModalDialog */
 
-const Atk = imports.gi.Atk;
+import Atk from 'gi://Atk';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Dialog = imports.ui.dialog;
+import * as Dialog from './dialog.js';
-const Layout = imports.ui.layout;
+import * as Layout from './layout.js';
-const Lightbox = imports.ui.lightbox;
+import * as Lightbox from './lightbox.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
 
-var OPEN_AND_CLOSE_TIME = 100;
+const OPEN_AND_CLOSE_TIME = 100;
-var FADE_OUT_DIALOG_TIME = 1000;
+const FADE_OUT_DIALOG_TIME = 1000;
 
 /** @enum {number} */
-var State = {
+export const State = {
     OPENED: 0,
     CLOSED: 1,
     OPENING: 2,
@@ -25,7 +24,7 @@ var State = {
     FADED_OUT: 4,
 };
 
-var ModalDialog = GObject.registerClass({
+export const ModalDialog = GObject.registerClass({
     Properties: {
         'state': GObject.ParamSpec.int('state', 'Dialog state', 'state',
                                        GObject.ParamFlags.READABLE,

js/ui/mpris.js

@@ -1,14 +1,13 @@
-/* exported MediaSection */
+import Gio from 'gi://Gio';
-const Gio = imports.gi.Gio;
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
+import Shell from 'gi://Shell';
-const Shell = imports.gi.Shell;
+import St from 'gi://St';
-const St = imports.gi.St;
+import * as Signals from '../misc/signals.js';
-const Signals = imports.misc.signals;
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const MessageList = imports.ui.messageList;
+import * as MessageList from './messageList.js';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from '../misc/fileUtils.js';
 
 const DBusIface = loadInterfaceXML('org.freedesktop.DBus');
 const DBusProxy = Gio.DBusProxy.makeProxyWrapper(DBusIface);
@@ -21,7 +20,7 @@ const MprisPlayerProxy = Gio.DBusProxy.makeProxyWrapper(MprisPlayerIface);
 
 const MPRIS_PLAYER_PREFIX = 'org.mpris.MediaPlayer2.';
 
-var MediaMessage = GObject.registerClass(
+export const MediaMessage = GObject.registerClass(
 class MediaMessage extends MessageList.Message {
     _init(player) {
         super._init('', '');
@@ -92,7 +91,7 @@ class MediaMessage extends MessageList.Message {
     }
 });
 
-var MprisPlayer = class MprisPlayer extends Signals.EventEmitter {
+export class MprisPlayer extends Signals.EventEmitter {
     constructor(busName) {
         super();
 
@@ -245,9 +244,9 @@ var MprisPlayer = class MprisPlayer extends Signals.EventEmitter {
                 this.emit('hide');
         }
     }
-};
+}
 
-var MediaSection = GObject.registerClass(
+export const MediaSection = GObject.registerClass(
 class MediaSection extends MessageList.MessageListSection {
     _init() {
         super._init();

js/ui/notificationDaemon.js

@@ -1,24 +1,23 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported NotificationDaemon */
 
-const GdkPixbuf = imports.gi.GdkPixbuf;
+import GdkPixbuf from 'gi://GdkPixbuf';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
 const Config = imports.misc.config;
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const MessageTray = imports.ui.messageTray;
+import * as MessageTray from './messageTray.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from '../misc/fileUtils.js';
 
 const FdoNotificationsIface = loadInterfaceXML('org.freedesktop.Notifications');
 
 /** @enum {number} */
-var NotificationClosedReason = {
+const NotificationClosedReason = {
     EXPIRED: 1,
     DISMISSED: 2,
     APP_CLOSED: 3,
@@ -26,13 +25,13 @@ var NotificationClosedReason = {
 };
 
 /** @enum {number} */
-var Urgency = {
+const Urgency = {
     LOW: 0,
     NORMAL: 1,
     CRITICAL: 2,
 };
 
-var FdoNotificationDaemon = class FdoNotificationDaemon {
+class FdoNotificationDaemon {
     constructor() {
         this._dbusImpl = Gio.DBusExportedObject.wrapJSObject(FdoNotificationsIface, this);
         this._dbusImpl.export(Gio.DBus.session, '/org/freedesktop/Notifications');
@@ -337,9 +336,9 @@ var FdoNotificationDaemon = class FdoNotificationDaemon {
         this._dbusImpl.emit_signal('ActionInvoked',
                                    GLib.Variant.new('(us)', [id, action]));
     }
-};
+}
 
-var FdoNotificationDaemonSource = GObject.registerClass(
+const FdoNotificationDaemonSource = GObject.registerClass(
 class FdoNotificationDaemonSource extends MessageTray.Source {
     _init(title, pid, sender, appId) {
         this.pid = pid;
@@ -465,7 +464,7 @@ const PRIORITY_URGENCY_MAP = {
     urgent: MessageTray.Urgency.CRITICAL,
 };
 
-var GtkNotificationDaemonNotification = GObject.registerClass(
+const GtkNotificationDaemonNotification = GObject.registerClass(
 class GtkNotificationDaemonNotification extends MessageTray.Notification {
     _init(source, notification) {
         super._init(source);
@@ -556,7 +555,7 @@ function getPlatformData() {
 
 function InvalidAppError() {}
 
-var GtkNotificationDaemonAppSource = GObject.registerClass(
+const GtkNotificationDaemonAppSource = GObject.registerClass(
 class GtkNotificationDaemonAppSource extends MessageTray.Source {
     _init(appId) {
         let objectPath = objectPathFromAppId(appId);
@@ -667,7 +666,7 @@ class GtkNotificationDaemonAppSource extends MessageTray.Source {
 
 const GtkNotificationsIface = loadInterfaceXML('org.gtk.Notifications');
 
-var GtkNotificationDaemon = class GtkNotificationDaemon {
+class GtkNotificationDaemon {
     constructor() {
         this._sources = {};
 
@@ -771,11 +770,11 @@ var GtkNotificationDaemon = class GtkNotificationDaemon {
 
         invocation.return_value(null);
     }
-};
+}
 
-var NotificationDaemon = class NotificationDaemon {
+export class NotificationDaemon {
     constructor() {
         this._fdoNotificationDaemon = new FdoNotificationDaemon();
         this._gtkNotificationDaemon = new GtkNotificationDaemon();
     }
-};
+}

js/ui/osdMonitorLabeler.js

@@ -1,15 +1,15 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported OsdMonitorLabeler */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Main = imports.ui.main;
 
-var OsdMonitorLabel = GObject.registerClass(
+import * as Main from './main.js';
+
+const OsdMonitorLabel = GObject.registerClass(
 class OsdMonitorLabel extends St.Widget {
     _init(monitor, label) {
         super._init({ x_expand: true, y_expand: true });
@@ -49,7 +49,7 @@ class OsdMonitorLabel extends St.Widget {
     }
 });
 
-var OsdMonitorLabeler = class {
+export class OsdMonitorLabeler {
     constructor() {
         this._monitorManager = global.backend.get_monitor_manager();
         this._client = null;
@@ -118,4 +118,4 @@ var OsdMonitorLabeler = class {
 
         this._reset();
     }
-};
+}

js/ui/osdWindow.js

@@ -1,21 +1,20 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported OsdWindowManager */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const BarLevel = imports.ui.barLevel;
+import * as BarLevel from './barLevel.js';
-const Layout = imports.ui.layout;
+import * as Layout from './layout.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
 
-var HIDE_TIMEOUT = 1500;
+const HIDE_TIMEOUT = 1500;
-var FADE_TIME = 100;
+const FADE_TIME = 100;
-var LEVEL_ANIMATION_TIME = 100;
+const LEVEL_ANIMATION_TIME = 100;
 
-var OsdWindow = GObject.registerClass(
+export const OsdWindow = GObject.registerClass(
 class OsdWindow extends Clutter.Actor {
     _init(monitorIndex) {
         super._init({
@@ -145,7 +144,7 @@ class OsdWindow extends Clutter.Actor {
     }
 });
 
-var OsdWindowManager = class {
+export class OsdWindowManager {
     constructor() {
         this._osdWindows = [];
         Main.layoutManager.connect('monitors-changed',
@@ -193,4 +192,4 @@ var OsdWindowManager = class {
         for (let i = 0; i < this._osdWindows.length; i++)
             this._osdWindows[i].cancel();
     }
-};
+}

js/ui/overview.js

@@ -1,34 +1,33 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Overview, ANIMATION_TIME */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
 // Time for initial animation going into Overview mode;
 // this is defined here to make it available in imports.
-var ANIMATION_TIME = 250;
+export const ANIMATION_TIME = 250;
 
-const DND = imports.ui.dnd;
+import * as DND from './dnd.js';
-const LayoutManager = imports.ui.layout;
+import * as LayoutManager from './layout.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const MessageTray = imports.ui.messageTray;
+import * as MessageTray from './messageTray.js';
-const OverviewControls = imports.ui.overviewControls;
+import * as OverviewControls from './overviewControls.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
-const SwipeTracker = imports.ui.swipeTracker;
+import * as SwipeTracker from './swipeTracker.js';
-const WindowManager = imports.ui.windowManager;
+import * as WindowManager from './windowManager.js';
-const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
+import * as WorkspaceThumbnail from './workspaceThumbnail.js';
 
-var DND_WINDOW_SWITCH_TIMEOUT = 750;
+const DND_WINDOW_SWITCH_TIMEOUT = 750;
 
-var OVERVIEW_ACTIVATION_TIMEOUT = 0.5;
+const OVERVIEW_ACTIVATION_TIMEOUT = 0.5;
 
-var ShellInfo = class {
+class ShellInfo {
     constructor() {
         this._source = null;
     }
@@ -65,9 +64,9 @@ var ShellInfo = class {
 
         this._source.showNotification(notification);
     }
-};
+}
 
-var OverviewActor = GObject.registerClass(
+const OverviewActor = GObject.registerClass(
 class OverviewActor extends St.BoxLayout {
     _init() {
         super._init({
@@ -149,7 +148,7 @@ const OVERVIEW_SHOWN_TRANSITIONS = {
     },
 };
 
-var Overview = class extends Signals.EventEmitter {
+export class Overview extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -725,4 +724,4 @@ var Overview = class extends Signals.EventEmitter {
     get searchEntry() {
         return this._overview.searchEntry;
     }
-};
+}

js/ui/overviewControls.js

@@ -1,40 +1,39 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported ControlsManager */
 
-const Clutter = imports.gi.Clutter;
+import GLib from 'gi://GLib';
-const Gio = imports.gi.Gio;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import Gio from 'gi://Gio';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const AppDisplay = imports.ui.appDisplay;
+import * as AppDisplay from './appDisplay.js';
-const Dash = imports.ui.dash;
+import * as Dash from './dash.js';
-const Layout = imports.ui.layout;
+import * as Layout from './layout.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Overview = imports.ui.overview;
+import * as Overview from './overview.js';
-const SearchController = imports.ui.searchController;
+import * as SearchController from './searchController.js';
-const Util = imports.misc.util;
+import * as Util from '../misc/util.js';
-const WindowManager = imports.ui.windowManager;
+import * as WindowManager from './windowManager.js';
-const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
+import * as WorkspaceThumbnail from './workspaceThumbnail.js';
-const WorkspacesView = imports.ui.workspacesView;
+import * as WorkspacesView from './workspacesView.js';
 
 const SMALL_WORKSPACE_RATIO = 0.15;
 const DASH_MAX_HEIGHT_RATIO = 0.15;
 
 const A11Y_SCHEMA = 'org.gnome.desktop.a11y.keyboard';
 
-var SIDE_CONTROLS_ANIMATION_TIME = Overview.ANIMATION_TIME;
+export const SIDE_CONTROLS_ANIMATION_TIME = 250;
 
 /** @enum {number} */
-var ControlsState = {
+export const ControlsState = {
     HIDDEN: 0,
     WINDOW_PICKER: 1,
     APP_GRID: 2,
 };
 
-var ControlsManagerLayout = GObject.registerClass(
+const ControlsManagerLayout = GObject.registerClass(
 class ControlsManagerLayout extends Clutter.BoxLayout {
     _init(searchEntry, appDisplay, workspacesDisplay, workspacesThumbnails,
         searchController, dash, stateAdjustment) {
@@ -265,7 +264,7 @@ class ControlsManagerLayout extends Clutter.BoxLayout {
     }
 });
 
-var OverviewAdjustment = GObject.registerClass({
+export const OverviewAdjustment = GObject.registerClass({
     Properties: {
         'gesture-in-progress': GObject.ParamSpec.boolean(
             'gesture-in-progress', 'Gesture in progress', 'Gesture in progress',
@@ -316,7 +315,7 @@ var OverviewAdjustment = GObject.registerClass({
     }
 });
 
-var ControlsManager = GObject.registerClass(
+export const ControlsManager = GObject.registerClass(
 class ControlsManager extends St.Widget {
     _init() {
         super._init({

js/ui/padOsd.js

@@ -1,24 +1,23 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported PadOsd, PadOsdService */
 
-const Atk = imports.gi.Atk;
+import Atk from 'gi://Atk';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GDesktopEnums = imports.gi.GDesktopEnums;
+import GDesktopEnums from 'gi://GDesktopEnums';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Pango = imports.gi.Pango;
+import Pango from 'gi://Pango';
-const Rsvg = imports.gi.Rsvg;
+import Rsvg from 'gi://Rsvg';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const PopupMenu = imports.ui.popupMenu;
+import * as PopupMenu from './popupMenu.js';
-const Layout = imports.ui.layout;
+import * as Layout from './layout.js';
 
-const { loadInterfaceXML } = imports.misc.fileUtils;
+import {loadInterfaceXML} from '../misc/fileUtils.js';
 
 const ACTIVE_COLOR = "#729fcf";
 
@@ -31,7 +30,7 @@ const CCW = 1;
 const UP = 0;
 const DOWN = 1;
 
-var PadChooser = GObject.registerClass({
+const PadChooser = GObject.registerClass({
     Signals: { 'pad-selected': { param_types: [Clutter.InputDevice.$gtype] } },
 }, class PadChooser extends St.Button {
     _init(device, groupDevices) {
@@ -100,7 +99,7 @@ var PadChooser = GObject.registerClass({
     }
 });
 
-var KeybindingEntry = GObject.registerClass({
+const KeybindingEntry = GObject.registerClass({
     Signals: { 'keybinding-edited': { param_types: [GObject.TYPE_STRING] } },
 }, class KeybindingEntry extends St.Entry {
     _init() {
@@ -120,7 +119,7 @@ var KeybindingEntry = GObject.registerClass({
     }
 });
 
-var ActionComboBox = GObject.registerClass({
+const ActionComboBox = GObject.registerClass({
     Signals: { 'action-selected': { param_types: [GObject.TYPE_INT] } },
 }, class ActionComboBox extends St.Button {
     _init() {
@@ -209,7 +208,7 @@ var ActionComboBox = GObject.registerClass({
     }
 });
 
-var ActionEditor = GObject.registerClass({
+const ActionEditor = GObject.registerClass({
     Signals: { 'done': {} },
 }, class ActionEditor extends St.Widget {
     _init() {
@@ -297,7 +296,7 @@ var ActionEditor = GObject.registerClass({
     }
 });
 
-var PadDiagram = GObject.registerClass({
+const PadDiagram = GObject.registerClass({
     Properties: {
         'left-handed': GObject.ParamSpec.boolean('left-handed',
                                                  'left-handed', 'Left handed',
@@ -641,7 +640,7 @@ var PadDiagram = GObject.registerClass({
     }
 });
 
-var PadOsd = GObject.registerClass({
+export const PadOsd = GObject.registerClass({
     Signals: {
         'pad-selected': { param_types: [Clutter.InputDevice.$gtype] },
         'closed': {},
@@ -963,7 +962,7 @@ var PadOsd = GObject.registerClass({
 
 const PadOsdIface = loadInterfaceXML('org.gnome.Shell.Wacom.PadOsd');
 
-var PadOsdService = class extends Signals.EventEmitter {
+export class PadOsdService extends Signals.EventEmitter {
     constructor() {
         super();
 
@@ -994,4 +993,4 @@ var PadOsdService = class extends Signals.EventEmitter {
         global.display.request_pad_osd(padDevice, editionMode);
         invocation.return_value(null);
     }
-};
+}

js/ui/pageIndicators.js

@@ -1,17 +1,16 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported PageIndicators */
 
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Graphene = imports.gi.Graphene;
+import Graphene from 'gi://Graphene';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const St = imports.gi.St;
+import St from 'gi://St';
 
 const INDICATOR_INACTIVE_OPACITY = 128;
 const INDICATOR_INACTIVE_OPACITY_HOVER = 255;
 const INDICATOR_INACTIVE_SCALE = 2 / 3;
 const INDICATOR_INACTIVE_SCALE_PRESSED = 0.5;
 
-var PageIndicators = GObject.registerClass({
+export const PageIndicators = GObject.registerClass({
     Signals: { 'page-activated': { param_types: [GObject.TYPE_INT] } },
 }, class PageIndicators extends St.BoxLayout {
     _init(orientation = Clutter.Orientation.VERTICAL) {

js/ui/panel.js

@@ -1,50 +1,49 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Panel */
 
-const Atk = imports.gi.Atk;
+import Atk from 'gi://Atk';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Meta = imports.gi.Meta;
+import Meta from 'gi://Meta';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Animation = imports.ui.animation;
+import * as Animation from './animation.js';
-const { AppMenu } = imports.ui.appMenu;
+import {AppMenu} from './appMenu.js';
 const Config = imports.misc.config;
-const CtrlAltTab = imports.ui.ctrlAltTab;
+import * as CtrlAltTab from './ctrlAltTab.js';
-const DND = imports.ui.dnd;
+import * as DND from './dnd.js';
-const Overview = imports.ui.overview;
+import * as Overview from './overview.js';
-const PopupMenu = imports.ui.popupMenu;
+import * as PopupMenu from './popupMenu.js';
-const PanelMenu = imports.ui.panelMenu;
+import * as PanelMenu from './panelMenu.js';
-const {QuickSettingsMenu, SystemIndicator} = imports.ui.quickSettings;
+import {QuickSettingsMenu, SystemIndicator} from './quickSettings.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
 
-const RemoteAccessStatus = imports.ui.status.remoteAccess;
+import * as RemoteAccessStatus from './status/remoteAccess.js';
-const PowerProfileStatus = imports.ui.status.powerProfiles;
+import * as PowerProfileStatus from './status/powerProfiles.js';
-const RFKillStatus = imports.ui.status.rfkill;
+import * as RFKillStatus from './status/rfkill.js';
-const CameraStatus = imports.ui.status.camera;
+import * as CameraStatus from './status/camera.js';
-const VolumeStatus = imports.ui.status.volume;
+import * as VolumeStatus from './status/volume.js';
-const BrightnessStatus = imports.ui.status.brightness;
+import * as BrightnessStatus from './status/brightness.js';
-const SystemStatus = imports.ui.status.system;
+import * as SystemStatus from './status/system.js';
-const LocationStatus = imports.ui.status.location;
+import * as LocationStatus from './status/location.js';
-const NightLightStatus = imports.ui.status.nightLight;
+import * as NightLightStatus from './status/nightLight.js';
-const DarkModeStatus = imports.ui.status.darkMode;
+import * as DarkModeStatus from './status/darkMode.js';
-const BacklightStatus = imports.ui.status.backlight;
+import * as BacklightStatus from './status/backlight.js';
-const ThunderboltStatus = imports.ui.status.thunderbolt;
+import * as ThunderboltStatus from './status/thunderbolt.js';
-const AutoRotateStatus = imports.ui.status.autoRotate;
+import * as AutoRotateStatus from './status/autoRotate.js';
-const BackgroundAppsStatus = imports.ui.status.backgroundApps;
+import * as BackgroundAppsStatus from './status/backgroundApps.js';
 
-const {DateMenuButton} = imports.ui.dateMenu;
+import {DateMenuButton} from './dateMenu.js';
-const {ATIndicator} = imports.ui.status.accessibility;
+import {ATIndicator} from './status/accessibility.js';
-const {InputSourceIndicator} = imports.ui.status.keyboard;
+import {InputSourceIndicator} from './status/keyboard.js';
-const {DwellClickIndicator} = imports.ui.status.dwellClick;
+import {DwellClickIndicator} from './status/dwellClick.js';
-const {ScreenRecordingIndicator, ScreenSharingIndicator} = imports.ui.status.remoteAccess;
+import {ScreenRecordingIndicator, ScreenSharingIndicator} from './status/remoteAccess.js';
 
-var PANEL_ICON_SIZE = 16;
+const PANEL_ICON_SIZE = 16;
-var APP_MENU_ICON_MARGIN = 0;
+const APP_MENU_ICON_MARGIN = 0;
 
-var BUTTON_DND_ACTIVATION_TIMEOUT = 250;
+const BUTTON_DND_ACTIVATION_TIMEOUT = 250;
 
 const N_QUICK_SETTINGS_COLUMNS = 2;
 
@@ -56,8 +55,8 @@ const N_QUICK_SETTINGS_COLUMNS = 2;
  * this menu also handles startup notification for it.  So when we
  * have an active startup notification, we switch modes to display that.
  */
-var AppMenuButton = GObject.registerClass({
+const AppMenuButton = GObject.registerClass({
-    Signals: { 'changed': {} },
+    Signals: {'changed': {}},
 }, class AppMenuButton extends PanelMenu.Button {
     _init(panel) {
         super._init(0.0, null, true);
@@ -257,7 +256,7 @@ var AppMenuButton = GObject.registerClass({
     }
 });
 
-var ActivitiesButton = GObject.registerClass(
+const ActivitiesButton = GObject.registerClass(
 class ActivitiesButton extends PanelMenu.Button {
     _init() {
         super._init(0.0, null, true);
@@ -350,7 +349,7 @@ class UnsafeModeIndicator extends SystemIndicator {
     }
 });
 
-var QuickSettings = GObject.registerClass(
+const QuickSettings = GObject.registerClass(
 class QuickSettings extends PanelMenu.Button {
     constructor() {
         super(0.0, C_('System menu in the top bar', 'System'), true);
@@ -368,10 +367,8 @@ class QuickSettings extends PanelMenu.Button {
 
     async _setupIndicators() {
         if (Config.HAVE_NETWORKMANAGER) {
-            // TODO: This will be an asynchronous import once this migrates
+            /** @type {import('./status/network.js')} */
-            // to modules. Add a no-op await now to enforce this being an async
+            const NetworkStatus = await import('./status/network.js');
-            // function.
-            const NetworkStatus = await imports.ui.status.network;
 
             this._network = new NetworkStatus.Indicator();
         } else {
@@ -379,10 +376,8 @@ class QuickSettings extends PanelMenu.Button {
         }
 
         if (Config.HAVE_BLUETOOTH) {
-            // TODO: This will be an asynchronous import once this migrates
+            /** @type {import('./status/bluetooth.js')} */
-            // to modules. Add a no-op await now to enforce this being an async
+            const BluetoothStatus = await import('./status/bluetooth.js');
-            // function.
-            const BluetoothStatus = await imports.ui.status.bluetooth;
 
             this._bluetooth = new BluetoothStatus.Indicator();
         } else {
@@ -467,7 +462,7 @@ const PANEL_ITEM_IMPLEMENTATIONS = {
     'screenSharing': ScreenSharingIndicator,
 };
 
-var Panel = GObject.registerClass(
+export const Panel = GObject.registerClass(
 class Panel extends St.Widget {
     _init() {
         super._init({

js/ui/panelMenu.js

@@ -1,16 +1,15 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Button, SystemIndicator */
 
-const Atk = imports.gi.Atk;
+import Atk from 'gi://Atk';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const St = imports.gi.St;
+import St from 'gi://St';
 
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
-const PopupMenu = imports.ui.popupMenu;
+import * as PopupMenu from './popupMenu.js';
 
-var ButtonBox = GObject.registerClass(
+export const ButtonBox = GObject.registerClass(
 class ButtonBox extends St.Widget {
     _init(params) {
         params = Params.parse(params, {
@@ -95,7 +94,7 @@ class ButtonBox extends St.Widget {
     }
 });
 
-var Button = GObject.registerClass({
+export const Button = GObject.registerClass({
     Signals: { 'menu-set': {} },
 }, class PanelMenuButton extends ButtonBox {
     _init(menuAlignment, nameText, dontCreateMenu) {
@@ -204,7 +203,7 @@ var Button = GObject.registerClass({
  * of an icon and a menu section, which will be composed into the
  * aggregate menu.
  */
-var SystemIndicator = GObject.registerClass(
+export const SystemIndicator = GObject.registerClass(
 class SystemIndicator extends St.BoxLayout {
     _init() {
         super._init({

js/ui/pointerA11yTimeout.js

@@ -1,14 +1,13 @@
-/* exported PointerA11yTimeout */
+import Clutter from 'gi://Clutter';
-const Clutter = imports.gi.Clutter;
+import GObject from 'gi://GObject';
-const GObject = imports.gi.GObject;
+import Meta from 'gi://Meta';
-const Meta = imports.gi.Meta;
+import St from 'gi://St';
-const St = imports.gi.St;
+import * as Main from './main.js';
-const Main = imports.ui.main;
+import Cairo from 'gi://cairo';
-const Cairo = imports.cairo;
 
 const SUCCESS_ZOOM_OUT_DURATION = 150;
 
-var PieTimer = GObject.registerClass({
+const PieTimer = GObject.registerClass({
     Properties: {
         'angle': GObject.ParamSpec.double(
             'angle', 'angle', 'angle',
@@ -109,7 +108,7 @@ var PieTimer = GObject.registerClass({
     }
 });
 
-var PointerA11yTimeout = class PointerA11yTimeout {
+export class PointerA11yTimeout {
     constructor() {
         let seat = Clutter.get_default_backend().get_default_seat();
 
@@ -134,4 +133,4 @@ var PointerA11yTimeout = class PointerA11yTimeout {
                 global.display.set_cursor(Meta.Cursor.DEFAULT);
         });
     }
-};
+}

js/ui/pointerWatcher.js

@@ -1,10 +1,9 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported getPointerWatcher */
 
-const GLib = imports.gi.GLib;
+import GLib from 'gi://GLib';
 
 // We stop polling if the user is idle for more than this amount of time
-var IDLE_TIME = 1000;
+const IDLE_TIME = 1000;
 
 // This file implements a reasonably efficient system for tracking the position
 // of the mouse pointer. We simply query the pointer from the X server in a loop,
@@ -15,14 +14,14 @@ let _pointerWatcher = null;
 /**
  * @returns {PointerWatcher}
  */
-function getPointerWatcher() {
+export function getPointerWatcher() {
     if (_pointerWatcher == null)
         _pointerWatcher = new PointerWatcher();
 
     return _pointerWatcher;
 }
 
-var PointerWatch = class {
+class PointerWatch {
     constructor(watcher, interval, callback) {
         this.watcher = watcher;
         this.interval = interval;
@@ -35,9 +34,9 @@ var PointerWatch = class {
     remove() {
         this.watcher._removeWatch(this);
     }
-};
+}
 
-var PointerWatcher = class {
+class PointerWatcher {
     constructor() {
         this._idleMonitor = global.backend.get_core_idle_monitor();
         this._idleMonitor.add_idle_watch(IDLE_TIME, this._onIdleMonitorBecameIdle.bind(this));
@@ -126,4 +125,4 @@ var PointerWatcher = class {
                 i++;
         }
     }
-};
+}

js/ui/popupMenu.js

@@ -1,23 +1,20 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported PopupMenuItem, PopupSeparatorMenuItem, Switch, PopupSwitchMenuItem,
-            PopupImageMenuItem, PopupMenu, PopupDummyMenu, PopupSubMenu,
-            PopupMenuSection, PopupSubMenuMenuItem, PopupMenuManager */
 
-const Atk = imports.gi.Atk;
+import Atk from 'gi://Atk';
-const Clutter = imports.gi.Clutter;
+import Clutter from 'gi://Clutter';
-const Gio = imports.gi.Gio;
+import Gio from 'gi://Gio';
-const GObject = imports.gi.GObject;
+import GObject from 'gi://GObject';
-const Graphene = imports.gi.Graphene;
+import Graphene from 'gi://Graphene';
-const Shell = imports.gi.Shell;
+import Shell from 'gi://Shell';
-const St = imports.gi.St;
+import St from 'gi://St';
-const Signals = imports.misc.signals;
+import * as Signals from '../misc/signals.js';
 
-const BoxPointer = imports.ui.boxpointer;
+import * as BoxPointer from './boxpointer.js';
-const Main = imports.ui.main;
+import * as Main from './main.js';
-const Params = imports.misc.params;
+import * as Params from '../misc/params.js';
 
 /** @enum {number} */
-var Ornament = {
+export const Ornament = {
     NONE: 0,
     DOT: 1,
     CHECK: 2,
@@ -34,10 +31,11 @@ function isPopupMenuItemVisible(child) {
 
 /**
  * arrowIcon
+ *
  * @param {St.Side} side - Side to which the arrow points.
  * @returns {St.Icon} a new arrow icon
  */
-function arrowIcon(side) {
+export function arrowIcon(side) {
     let iconName;
     switch (side) {
     case St.Side.TOP:
@@ -65,7 +63,7 @@ function arrowIcon(side) {
     return arrow;
 }
 
-var PopupBaseMenuItem = GObject.registerClass({
+export const PopupBaseMenuItem = GObject.registerClass({
     Properties: {
         'active': GObject.ParamSpec.boolean('active', 'active', 'active',
                                             GObject.ParamFlags.READWRITE,
@@ -268,7 +266,7 @@ var PopupBaseMenuItem = GObject.registerClass({
     }
 });
 
-var PopupMenuItem = GObject.registerClass(
+export const PopupMenuItem = GObject.registerClass(
 class PopupMenuItem extends PopupBaseMenuItem {
     _init(text, params) {
         super._init(params);
@@ -284,7 +282,7 @@ class PopupMenuItem extends PopupBaseMenuItem {
 });
 
 
-var PopupSeparatorMenuItem = GObject.registerClass(
+export const PopupSeparatorMenuItem = GObject.registerClass(
 class PopupSeparatorMenuItem extends PopupBaseMenuItem {
     _init(text) {
         super._init({
@@ -315,7 +313,7 @@ class PopupSeparatorMenuItem extends PopupBaseMenuItem {
     }
 });
 
-var Switch = GObject.registerClass({
+export const Switch = GObject.registerClass({
     Properties: {
         'state': GObject.ParamSpec.boolean(
             'state', 'state', 'state',
@@ -355,7 +353,7 @@ var Switch = GObject.registerClass({
     }
 });
 
-var PopupSwitchMenuItem = GObject.registerClass({
+export const PopupSwitchMenuItem = GObject.registerClass({
     Signals: { 'toggled': { param_types: [GObject.TYPE_BOOLEAN] } },
 }, class PopupSwitchMenuItem extends PopupBaseMenuItem {
     _init(text, active, params) {
@@ -445,7 +443,7 @@ var PopupSwitchMenuItem = GObject.registerClass({
     }
 });
 
-var PopupImageMenuItem = GObject.registerClass(
+export const PopupImageMenuItem = GObject.registerClass(
 class PopupImageMenuItem extends PopupBaseMenuItem {
     _init(text, icon, params) {
         super._init(params);
@@ -482,7 +480,7 @@ class PopupImageMenuItem extends PopupBaseMenuItem {
     }
 });
 
-var PopupMenuBase = class extends Signals.EventEmitter {
+export class PopupMenuBase extends Signals.EventEmitter {
     constructor(sourceActor, styleClass) {
         super();
 
@@ -809,9 +807,9 @@ var PopupMenuBase = class extends Signals.EventEmitter {
 
         Main.sessionMode.disconnectObject(this);
     }
-};
+}
 
-var PopupMenu = class extends PopupMenuBase {
+export class PopupMenu extends PopupMenuBase {
     constructor(sourceActor, arrowAlignment, arrowSide) {
         super(sourceActor, 'popup-menu-content');
 
@@ -953,9 +951,9 @@ var PopupMenu = class extends PopupMenuBase {
 
         super.destroy();
     }
-};
+}
 
-var PopupDummyMenu = class extends Signals.EventEmitter {
+export class PopupDummyMenu extends Signals.EventEmitter {
     constructor(sourceActor) {
         super();
 
@@ -991,9 +989,9 @@ var PopupDummyMenu = class extends Signals.EventEmitter {
     destroy() {
         this.emit('destroy');
     }
-};
+}
 
-var PopupSubMenu = class extends PopupMenuBase {
+export class PopupSubMenu extends PopupMenuBase {
     constructor(sourceActor, sourceArrow) {
         super(sourceActor);
 
@@ -1130,7 +1128,7 @@ var PopupSubMenu = class extends PopupMenuBase {
 
         return Clutter.EVENT_PROPAGATE;
     }
-};
+}
 
 /**
  * PopupMenuSection:
@@ -1140,7 +1138,7 @@ var PopupSubMenu = class extends PopupMenuBase {
  * can add it to another menu), but is completely transparent
  * to the user
  */
-var PopupMenuSection = class extends PopupMenuBase {
+export class PopupMenuSection extends PopupMenuBase {
     constructor() {
         super();
 
@@ -1160,9 +1158,9 @@ var PopupMenuSection = class extends PopupMenuBase {
     close() {
         this.emit('open-state-changed', false);
     }
-};
+}
 
-var PopupSubMenuMenuItem = GObject.registerClass(
+export const PopupSubMenuMenuItem = GObject.registerClass(
 class PopupSubMenuMenuItem extends PopupBaseMenuItem {
     _init(text, wantIcon) {
         super._init();
@@ -1269,7 +1267,7 @@ class PopupSubMenuMenuItem extends PopupBaseMenuItem {
 /* Basic implementation of a menu manager.
  * Call addMenu to add menus
  */
-var PopupMenuManager = class {
+export class PopupMenuManager {
     constructor(owner, grabParams) {
         this._grabParams = Params.parse(grabParams,
             { actionMode: Shell.ActionMode.POPUP });
@@ -1394,4 +1392,4 @@ var PopupMenuManager = class {
         if (isUser)
             menu.close(BoxPointer.PopupAnimation.FULL);
     }
-};
+}