status/network: Use SectionItem for device items

In terms of UI, this means that in the common case where we have
a single (or no) connection, the device can be represented as a
single menu item rather than a submenu.

But more importantly, all our menu items inherit from the same
GObject class now, so we can use bindings where appropriate.

This will later extend to quick toggles as well.

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

js/ui/status/network.js

@@ -1,7 +1,6 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported NMApplet */
 const {Atk, Clutter, Gio, GLib, GObject, Meta, NM, Polkit, St} = imports.gi;
-const Signals = imports.misc.signals;
 
 const Animation = imports.ui.animation;
 const Main = imports.ui.main;
@@ -391,7 +390,11 @@ const NMDeviceConnectionItem = GObject.registerClass({
     }
 });
 
-var NMDeviceItem = class NMDeviceItem extends Signals.EventEmitter {
+const NMDeviceItem = GObject.registerClass({
+    Signals: {
+        'activation-failed': {},
+    },
+}, class NMDeviceItem extends NMSectionItem {
     constructor(client, device) {
         super();
 
@@ -405,30 +408,32 @@ var NMDeviceItem = class NMDeviceItem extends Signals.EventEmitter {
         this._connectionItems = new Map();
         this._itemSorter = new ItemSorter();
 
-        this._section = new PopupMenu.PopupMenuSection();
+        // Item shown in the 0-connections case
+        this._autoConnectItem =
+            this.section.addAction(_('Connect'), () => this._autoConnect(), '');
 
-        this.item = new PopupMenu.PopupSubMenuMenuItem('', true);
+        // Represents the device as a whole when shown
-        this.item.menu.addMenuItem(this._section);
+        this.bind_property('name',
+            this._autoConnectItem.label, 'text',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('icon-name',
+            this._autoConnectItem._icon, 'icon-name',
+            GObject.BindingFlags.SYNC_CREATE);
 
-        this._autoConnectItem = this.item.menu.addAction(_('Connect'), this._autoConnect.bind(this));
+        this._deactivateItem =
-        this._deactivateItem = this.item.menu.addAction(_('Turn Off'),
+            this.section.addAction(_('Turn Off'), () => this.deactivateConnection());
-            () => this.deactivateConnection());
 
         this._client.connectObject(
-            'notify::connectivity', () => this._iconChanged(),
+            'notify::connectivity', () => this.notify('icon-name'),
-            'notify::primary-connection', () => this._iconChanged(),
+            'notify::primary-connection', () => this.notify('icon-name'),
             this);
 
         this._device.connectObject(
             'notify::active-connection', () => this._activeConnectionChanged(),
             'state-changed', this._deviceStateChanged.bind(this),
             this);
-    }
 
-    destroy() {
+        this._activeConnectionChanged();
-        this._client.disconnectObject(this);
-        this._device.disconnectObject(this);
-        this.item.destroy();
     }
 
     _canReachInternet() {
@@ -444,13 +449,15 @@ var NMDeviceItem = class NMDeviceItem extends Signals.EventEmitter {
     }
 
     _activeConnectionChanged() {
-        if (this._activeConnection) {
+        const oldItem = this._connectionItems.get(
-            let item = this._connectionItems.get(this._activeConnection.connection.get_uuid());
+            this._activeConnection?.get_uuid());
-            item.setActiveConnection(null);
+        oldItem?.setActiveConnection(null);
-            this._activeConnection = null;
-        }
 
-        this._sync();
+        this._setActiveConnection(this._device.active_connection);
+
+        const newItem = this._connectionItems.get(
+            this._activeConnection?.get_uuid());
+        newItem?.setActiveConnection(this._activeConnection);
     }
 
     _deviceStateChanged(device, newstate, oldstate, reason) {
@@ -469,17 +476,6 @@ var NMDeviceItem = class NMDeviceItem extends Signals.EventEmitter {
         this._sync();
     }
 
-    _iconChanged() {
-        this._connectionItems.forEach(
-            item => (item.icon_name = this.getIndicatorIcon()));
-        this._sync();
-        this.emit('icon-changed');
-    }
-
-    _getMenuIcon() {
-        return this.getIndicatorIcon();
-    }
-
     _connectionValid(connection) {
         return this._device.connection_valid(connection);
     }
@@ -516,7 +512,7 @@ var NMDeviceItem = class NMDeviceItem extends Signals.EventEmitter {
         item.updateForConnection(connection);
 
         const pos = this._itemSorter.upsert(item);
-        this._section.moveMenuItem(item, pos);
+        this.section.moveMenuItem(item, pos);
     }
 
     _addConnection(connection) {
@@ -524,11 +520,18 @@ var NMDeviceItem = class NMDeviceItem extends Signals.EventEmitter {
         if (!item)
             return;
 
-        item.connect('notify::icon-name', () => this._iconChanged());
+        this.bind_property('radio-mode',
-        item.connect('notify::name', this._sync.bind(this));
+            item, 'radio-mode',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('name',
+            item, 'device-name',
+            GObject.BindingFlags.SYNC_CREATE);
+        this.bind_property('icon-name',
+            item, 'icon-name',
+            GObject.BindingFlags.SYNC_CREATE);
 
         const pos = this._itemSorter.upsert(item);
-        this._section.addMenuItem(item, pos);
+        this.section.addMenuItem(item, pos);
         this._connectionItems.set(connection.get_uuid(), item);
         this._sync();
     }
@@ -548,55 +551,47 @@ var NMDeviceItem = class NMDeviceItem extends Signals.EventEmitter {
 
     setDeviceName(name) {
         this._deviceName = name;
-        this._connectionItems.forEach(
+        this.notify('name');
-            item => (item.deviceName = this._getDescription()));
-        this._sync();
-    }
-
-    _getDescription() {
-        return this._deviceName;
-    }
-
-    _getStatus() {
-        return this._getDescription();
     }
 
     _sync() {
-        let nItems = this._connectionItems.size;
+        const nItems = this._connectionItems.size;
+        this.radio_mode = nItems > 1;
         this._autoConnectItem.visible = nItems === 0;
         this._deactivateItem.visible = this.radioMode && this.isActive;
-
-        if (this._activeConnection == null) {
-            let activeConnection = this._device.active_connection;
-            if (activeConnection && activeConnection.connection) {
-                let item = this._connectionItems.get(activeConnection.connection.get_uuid());
-                if (item) {
-                    this._activeConnection = activeConnection;
-                    ensureActiveConnectionProps(this._activeConnection);
-                    item.setActiveConnection(this._activeConnection);
-                }
-            }
-        }
-
-        for (const item of this._connectionItems.values())
-            item.radio_mode = nItems > 1;
-
-        this.item.label.text = this._getStatus();
-        this.item.icon.icon_name = this._getMenuIcon();
     }
-};
+});
 
-var NMWiredDeviceItem = class extends NMDeviceItem {
+const NMWiredDeviceItem = GObject.registerClass(
+class NMWiredDeviceItem extends NMDeviceItem {
     constructor(client, device) {
         super(client, device);
 
-        this.item.menu.addSettingsAction(_("Wired Settings"), 'gnome-network-panel.desktop');
+        this.section.addSettingsAction(_('Wired Settings'),
+            'gnome-network-panel.desktop');
     }
 
     get category() {
         return NMConnectionCategory.WIRED;
     }
 
+    get icon_name() {
+        switch (this.state) {
+        case NM.ActiveConnectionState.ACTIVATING:
+            return 'network-wired-acquiring-symbolic';
+        case NM.ActiveConnectionState.ACTIVATED:
+            return this._canReachInternet()
+                ? 'network-wired-symbolic'
+                : 'network-wired-no-route-symbolic';
+        default:
+            return 'network-wired-disconnected-symbolic';
+        }
+    }
+
+    get name() {
+        return this._deviceName;
+    }
+
     _hasCarrier() {
         if (this._device instanceof NM.DeviceEthernet)
             return this._device.carrier;
@@ -605,31 +600,13 @@ var NMWiredDeviceItem = class extends NMDeviceItem {
     }
 
     _sync() {
-        this.item.visible = this._hasCarrier();
+        this.visible = this._hasCarrier();
         super._sync();
     }
+});
 
-    getIndicatorIcon() {
+const NMModemDeviceItem = GObject.registerClass(
-        if (this._device.active_connection) {
+class NMModemDeviceItem extends NMDeviceItem {
-            let state = this._device.active_connection.state;
-
-            if (state == NM.ActiveConnectionState.ACTIVATING) {
-                return 'network-wired-acquiring-symbolic';
-            } else if (state == NM.ActiveConnectionState.ACTIVATED) {
-                if (this._canReachInternet())
-                    return 'network-wired-symbolic';
-                else
-                    return 'network-wired-no-route-symbolic';
-            } else {
-                return 'network-wired-disconnected-symbolic';
-            }
-        } else {
-            return 'network-wired-disconnected-symbolic';
-        }
-    }
-};
-
-var NMModemDeviceItem = class extends NMDeviceItem {
     constructor(client, device) {
         super(client, device);
 
@@ -637,7 +614,7 @@ var NMModemDeviceItem = class extends NMDeviceItem {
             ? 'gnome-wwan-panel.desktop'
             : 'gnome-network-panel.desktop';
 
-        this.item.menu.addSettingsAction(_('Mobile Broadband Settings'), settingsPanel);
+        this.section.addSettingsAction(_('Mobile Broadband Settings'), settingsPanel);
 
         this._mobileDevice = null;
 
@@ -653,7 +630,7 @@ var NMModemDeviceItem = class extends NMDeviceItem {
 
         this._mobileDevice?.connectObject(
             'notify::operator-name', this._sync.bind(this),
-            'notify::signal-quality', () => this._iconChanged(), this);
+            'notify::signal-quality', () => this.notify('icon-name'), this);
 
         Main.sessionMode.connectObject('updated',
             this._sessionUpdated.bind(this), this);
@@ -664,6 +641,25 @@ var NMModemDeviceItem = class extends NMDeviceItem {
         return NMConnectionCategory.WWAN;
     }
 
+    get icon_name() {
+        switch (this.state) {
+        case NM.ActiveConnectionState.ACTIVATING:
+            return 'network-cellular-acquiring-symbolic';
+        case NM.ActiveConnectionState.ACTIVATED: {
+            const qualityString = signalToIcon(this._mobileDevice.signal_quality);
+            return `network-cellular-signal-${qualityString}-symbolic`;
+        }
+        default:
+            return this._activeConnection
+                ? 'network-cellular-signal-none-symbolic'
+                : 'network-cellular-disabled-symbolic';
+        }
+    }
+
+    get name() {
+        return this._mobileDevice?.operator_name || this._deviceName;
+    }
+
     _useWwanPanel() {
         // Currently, wwan panel doesn't support CDMA_EVDO modems
         const supportedCaps =
@@ -682,77 +678,42 @@ var NMModemDeviceItem = class extends NMDeviceItem {
     _sessionUpdated() {
         this._autoConnectItem.sensitive = Main.sessionMode.hasWindows;
     }
+});
 
-    destroy() {
+const NMBluetoothDeviceItem = GObject.registerClass(
-        this._mobileDevice?.disconnectObject(this);
+class NMBluetoothDeviceItem extends NMDeviceItem {
-        Main.sessionMode.disconnectObject(this);
-
-        super.destroy();
-    }
-
-    _getStatus() {
-        return this._mobileDevice?.operator_name || this._getDescription();
-    }
-
-    _getMenuIcon() {
-        if (!this._device.active_connection)
-            return 'network-cellular-disabled-symbolic';
-
-        return this.getIndicatorIcon();
-    }
-
-    getIndicatorIcon() {
-        if (this._device.active_connection) {
-            if (this._device.active_connection.state == NM.ActiveConnectionState.ACTIVATING)
-                return 'network-cellular-acquiring-symbolic';
-
-            return this._getSignalIcon();
-        } else {
-            return 'network-cellular-signal-none-symbolic';
-        }
-    }
-
-    _getSignalIcon() {
-        return `network-cellular-signal-${signalToIcon(this._mobileDevice.signal_quality)}-symbolic`;
-    }
-};
-
-var NMBluetoothDeviceItem = class extends NMDeviceItem {
     constructor(client, device) {
         super(client, device);
 
-        this.item.menu.addSettingsAction(_("Bluetooth Settings"), 'gnome-network-panel.desktop');
+        this._device.bind_property('name',
+            this, 'name',
+            GObject.BindingFlags.SYNC_CREATE);
+
+        this.section.addSettingsAction(_('Bluetooth Settings'),
+            'gnome-network-panel.desktop');
     }
 
     get category() {
         return NMConnectionCategory.BLUETOOTH;
     }
 
-    _getDescription() {
+    get icon_name() {
-        return this._device.name;
+        switch (this.state) {
-    }
+        case NM.ActiveConnectionState.ACTIVATING:
-
+            return 'network-cellular-acquiring-symbolic';
-    _getMenuIcon() {
+        case NM.ActiveConnectionState.ACTIVATED:
-        if (!this._device.active_connection)
+            return 'network-cellular-connected-symbolic';
-            return 'network-cellular-disabled-symbolic';
+        default:
-
+            return this._activeConnection
-        return this.getIndicatorIcon();
+                ? 'network-cellular-signal-none-symbolic'
-    }
+                : 'network-cellular-disabled-symbolic';
-
-    getIndicatorIcon() {
-        if (this._device.active_connection) {
-            let state = this._device.active_connection.state;
-            if (state == NM.ActiveConnectionState.ACTIVATING)
-                return 'network-cellular-acquiring-symbolic';
-            else if (state == NM.ActiveConnectionState.ACTIVATED)
-                return 'network-cellular-connected-symbolic';
-            else
-                return 'network-cellular-signal-none-symbolic';
-        } else {
-            return 'network-cellular-signal-none-symbolic';
         }
     }
-};
+
+    get name() {
+        return this._device.name;
+    }
+});
 
 const WirelessNetwork = GObject.registerClass({
     Properties: {
@@ -1374,7 +1335,11 @@ class NMWirelessDialog extends ModalDialog.ModalDialog {
     }
 });
 
-var NMWirelessDeviceItem = class extends Signals.EventEmitter {
+const NMWirelessDeviceItem = GObject.registerClass({
+    Signals: {
+        'activation-failed': {},
+    },
+}, class NMWirelessDeviceItem extends NMSectionItem {
     constructor(client, device) {
         super();
 
@@ -1382,28 +1347,39 @@ var NMWirelessDeviceItem = class extends Signals.EventEmitter {
         this._device = device;
 
         this._deviceName = '';
+        this.useSubmenu = true;
 
-        this.item = new PopupMenu.PopupSubMenuMenuItem('', true);
+        this.section.addAction(_('Select Network'), this._showDialog.bind(this));
-        this.item.menu.addAction(_("Select Network"), this._showDialog.bind(this));
 
         this._toggleItem = new PopupMenu.PopupMenuItem('');
         this._toggleItem.connect('activate', this._toggleWifi.bind(this));
-        this.item.menu.addMenuItem(this._toggleItem);
+        this.section.addMenuItem(this._toggleItem);
 
-        this.item.menu.addSettingsAction(_("Wi-Fi Settings"), 'gnome-wifi-panel.desktop');
+        this.section.addSettingsAction(_('Wi-Fi Settings'),
+            'gnome-wifi-panel.desktop');
 
         this._client.connectObject(
-            'notify::wireless-enabled', this._sync.bind(this),
+            'notify::wireless-enabled', () => {
+                this.notify('icon-name');
+                this._sync();
+            },
             'notify::wireless-hardware-enabled', this._sync.bind(this),
-            'notify::connectivity', () => this._iconChanged(),
+            'notify::connectivity', () => this.notify('icon-name'),
-            'notify::primary-connection', () => this._iconChanged(),
+            'notify::primary-connection', () => this.notify('icon-name'),
             this);
 
         this._device.connectObject(
             'notify::active-access-point', this._activeApChanged.bind(this),
+            'notify::active-connection', () => this._activeConnectionChanged(),
             'state-changed', this._deviceStateChanged.bind(this), this);
 
+        this.connect('destroy', () => {
+            this._dialog?.destroy();
+            this._dialog = null;
+        });
+
         this._activeApChanged();
+        this._activeConnectionChanged();
         this._sync();
     }
 
@@ -1411,22 +1387,46 @@ var NMWirelessDeviceItem = class extends Signals.EventEmitter {
         return NMConnectionCategory.WIRELESS;
     }
 
-    _iconChanged() {
+    get icon_name() {
-        this._sync();
+        if (!this._device.client.wireless_enabled)
-        this.emit('icon-changed');
+            return 'network-wireless-disabled-symbolic';
+
+        switch (this.state) {
+        case NM.ActiveConnectionState.ACTIVATING:
+            return 'network-wireless-acquiring-symbolic';
+
+        case NM.ActiveConnectionState.ACTIVATED: {
+            if (this._isHotSpotMaster())
+                return 'network-wireless-hotspot-symbolic';
+
+            if (!this._canReachInternet())
+                return 'network-wireless-no-route-symbolic';
+
+            if (!this._activeAccessPoint) {
+                if (this._device.mode !== NM80211Mode.ADHOC)
+                    console.info('An active wireless connection, in infrastructure mode, involves no access point?');
+
+                return 'network-wireless-connected-symbolic';
+            }
+
+            const {strength} = this._activeAccessPoint;
+            return `network-wireless-signal-${signalToIcon(strength)}-symbolic`;
+        }
+        default:
+            return 'network-wireless-signal-none-symbolic';
+        }
     }
 
-    destroy() {
+    get name() {
-        this._device.disconnectObject(this);
+        if (this._isHotSpotMaster())
-        this._activeAccessPoint?.disconnectObject(this);
+            /* Translators: %s is a network identifier */
-        this._client.disconnectObject(this);
+            return _('%s Hotspot').format(this._deviceName);
 
-        if (this._dialog) {
+        const {ssid} = this._activeAccessPoint ?? {};
-            this._dialog.destroy();
+        if (ssid)
-            this._dialog = null;
+            return ssidToLabel(ssid);
-        }
 
-        this.item.destroy();
+        return this._deviceName;
     }
 
     _deviceStateChanged(device, newstate, oldstate, reason) {
@@ -1463,44 +1463,26 @@ var NMWirelessDeviceItem = class extends Signals.EventEmitter {
         this._activeAccessPoint?.disconnectObject(this);
         this._activeAccessPoint = this._device.active_access_point;
         this._activeAccessPoint?.connectObject(
-            'notify::strength', () => this._iconChanged(),
+            'notify::strength', () => this.notify('icon-name'),
+            'notify::ssid', () => this.notify('name'),
             this);
 
-        this._iconChanged();
+        this.notify('icon-name');
+        this.notify('name');
+    }
+
+    _activeConnectionChanged() {
+        this._setActiveConnection(this._device.active_connection);
     }
 
     _sync() {
         this._toggleItem.label.text = this._client.wireless_enabled ? _("Turn Off") : _("Turn On");
         this._toggleItem.visible = this._client.wireless_hardware_enabled;
-
-        this.item.icon.icon_name = this._getMenuIcon();
-        this.item.label.text = this._getStatus();
     }
 
     setDeviceName(name) {
         this._deviceName = name;
-        this._sync();
+        this.notify('name');
-    }
-
-    _getStatus() {
-        if (this._isHotSpotMaster())
-            /* Translators: %s is a network identifier */
-            return _('%s Hotspot').format(this._deviceName);
-
-        if (this._activeAccessPoint)
-            return ssidToLabel(this._activeAccessPoint.get_ssid());
-
-        return this._deviceName;
-    }
-
-    _getMenuIcon() {
-        if (!this._client.wireless_enabled)
-            return 'network-wireless-disabled-symbolic';
-
-        if (this._device.active_connection)
-            return this.getIndicatorIcon();
-        else
-            return 'network-wireless-signal-none-symbolic';
     }
 
     _canReachInternet() {
@@ -1524,33 +1506,7 @@ var NMWirelessDeviceItem = class extends Signals.EventEmitter {
 
         return ip4config.get_method() === NM.SETTING_IP4_CONFIG_METHOD_SHARED;
     }
-
+});
-    getIndicatorIcon() {
-        if (this._device.state < NM.DeviceState.PREPARE)
-            return 'network-wireless-disconnected-symbolic';
-        if (this._device.state < NM.DeviceState.ACTIVATED)
-            return 'network-wireless-acquiring-symbolic';
-
-        if (this._isHotSpotMaster())
-            return 'network-wireless-hotspot-symbolic';
-
-        let ap = this._device.active_access_point;
-        if (!ap) {
-            if (this._device.mode != NM80211Mode.ADHOC)
-                log('An active wireless connection, in infrastructure mode, involves no access point?');
-
-            if (this._canReachInternet())
-                return 'network-wireless-connected-symbolic';
-            else
-                return 'network-wireless-no-route-symbolic';
-        }
-
-        if (this._canReachInternet())
-            return `network-wireless-signal-${signalToIcon(ap.strength)}-symbolic`;
-        else
-            return 'network-wireless-no-route-symbolic';
-    }
-};
 
 const NMVpnConnectionItem = GObject.registerClass({
     Signals: {
@@ -2026,7 +1982,7 @@ class Indicator extends PanelMenu.SystemIndicator {
             this._onActivationFailed.bind(this), this);
 
         const {section} = this._deviceSections.get(wrapper.category);
-        section.addMenuItem(wrapper.item);
+        section.addMenuItem(wrapper);
 
         const {devices} = this._deviceSections.get(wrapper.category);
         devices.push(wrapper);
@@ -2082,7 +2038,7 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._mainConnection = this._getMainConnection();
 
         if (this._mainConnection) {
-            this._mainConnection._primaryDevice?.connectObject('icon-changed',
+            this._mainConnection._primaryDevice?.connectObject('notify::icon-name',
                 this._updateIcon.bind(this), this);
             this._mainConnection.connectObject('notify::state',
                 this._mainConnectionStateChanged.bind(this), this);
@@ -2265,7 +2221,7 @@ class Indicator extends PanelMenu.SystemIndicator {
             let connected = state == NM.State.CONNECTED_GLOBAL;
             this._primaryIndicator.visible = (dev != null) || connected;
             if (dev) {
-                this._primaryIndicator.icon_name = dev.getIndicatorIcon();
+                this._primaryIndicator.icon_name = dev.icon_name;
             } else if (connected) {
                 if (this._client.connectivity == NM.ConnectivityState.FULL)
                     this._primaryIndicator.icon_name = 'network-wired-symbolic';