status/network: Decouple NMVpnSection from NMConnectionSection

The NMConnectionSection class is used - surprise - to manage a
list of related connections. And while the presentation of VPN
items is slightly different from connections associated with
devices (switches vs. ornaments), it makes perfect sense for
the VPN section to share the nitty-gritty with the base class.

But…

Right now it is perfectly fine for NMConnectionSection to be
used both as a child element in a device section, and as toplevel
item of the VPN section. Any nesting of sections is entirely
transparent to the user, and all connection sections appear as
submenu items in the toplevel menu.

That won't work for quick settings.

There's no PopoverMenuSection that allows invisible grouping, so
adding items dynamically would either need to happen at the end,
or require some tricky cross-component code to impose a particular
order.

And last but not least, quick toggles are very much unsuited for
a potentially large number of items. The whole point is to provide
quick direct access to system features, not to compete with menus
over the number of items they can hold.

That is, we need to get from the current state where each device
appears as a toplevel item, to a state where we have one quick
toggle for each device type plus one for VPN.

The decoupled VPN section still behaves largely as it did as a
subclass, with the notable difference that it no longer uses
a submenu item, so all VPN connections now appear at the toplevel.

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

js/ui/status/network.js

@@ -163,9 +163,6 @@ const NMConnectionItem = GObject.registerClass({
             GObject.ParamFlags.READWRITE,
             ''),
     },
-    Signals: {
-        'activation-failed': {},
-    },
 }, class NMConnectionItem extends PopupMenu.PopupBaseMenuItem {
     constructor(section, connection) {
         super();
@@ -393,7 +390,6 @@ var NMConnectionSection = class NMConnectionSection extends Signals.EventEmitter
             return;
 
         item.connect('notify::icon-name', () => this._iconChanged());
-        item.connect('activation-failed', () => this.emit('activation-failed'));
         item.connect('notify::name', this._sync.bind(this));
 
         const pos = this._itemSorter.upsert(item);
@@ -1502,8 +1498,11 @@ var NMWirelessDeviceItem = class extends Signals.EventEmitter {
     }
 };
 
-const NMVpnConnectionItem = GObject.registerClass(
+const NMVpnConnectionItem = GObject.registerClass({
-class NMVpnConnectionItem extends NMConnectionItem {
+    Signals: {
+        'activation-failed': {},
+    },
+}, class NMVpnConnectionItem extends NMConnectionItem {
     constructor(section, connection) {
         super(section, connection);
 
@@ -1561,19 +1560,27 @@ class NMVpnConnectionItem extends NMConnectionItem {
     }
 });
 
-var NMVpnSection = class extends NMConnectionSection {
+var NMVpnSection = class extends PopupMenu.PopupMenuSection {
     constructor(client) {
-        super(client);
+        super();
+
+        this._client = client;
+
+        this._items = new Map();
+        this._itemSorter = new ItemSorter();
+
+        this._section = new PopupMenu.PopupMenuSection();
+        this.addMenuItem(this._section);
+
+        this.addSettingsAction(_('VPN Settings'),
+            'gnome-network-panel.desktop');
 
         this._client.connectObject(
-            'connection-added', (c, conn) => this.checkConnection(conn),
+            'connection-added', (c, conn) => this._addConnection(conn),
-            'connection-removed', (c, conn) => this.removeConnection(conn),
+            'connection-removed', (c, conn) => this._removeConnection(conn),
             'notify::active-connections', () => this._syncActiveConnections(),
             this);
 
-        this.item.menu.addSettingsAction(_('VPN Settings'),
-            'gnome-network-panel.desktop');
-
         this._loadInitialItems();
         this._sync();
     }
@@ -1581,7 +1588,7 @@ var NMVpnSection = class extends NMConnectionSection {
     _loadInitialItems() {
         const connections = this._client.get_connections();
         for (const conn of connections)
-            this.checkConnection(conn);
+            this._addConnection(conn);
 
         this._syncActiveConnections();
     }
@@ -1591,11 +1598,11 @@ var NMVpnSection = class extends NMConnectionSection {
             this._client.get_active_connections().filter(
                 c => this._shouldHandleConnection(c.connection));
 
-        for (const item of this._connectionItems.values())
+        for (const item of this._items.values())
             item.setActiveConnection(null);
 
         for (const a of activeConnections)
-            this._connectionItems.get(a.connection.get_uuid())?.setActiveConnection(a);
+            this._items.get(a.connection)?.setActiveConnection(a);
 
         this._sync();
     }
@@ -1616,47 +1623,63 @@ var NMVpnSection = class extends NMConnectionSection {
         return handledTypes.includes(setting.type);
     }
 
-    _addConnection(connection) {
+    _onConnectionChanged(connection) {
-        super._addConnection(connection);
+        const item = this._items.get(connection);
-
+        item.updateForConnection(connection);
-        connection.connectObject(
-            'changed', () => this.checkConnection(connection),
-            this);
     }
 
-    _connectionValid(connection) {
+    _resortItem(item) {
-        return this._shouldHandleConnection(connection);
+        const pos = this._itemSorter.upsert(item);
+        this._section.moveMenuItem(item, pos);
+    }
+
+    _addConnection(connection) {
+        if (this._items.has(connection))
+            return;
+
+        if (!this._shouldHandleConnection(connection))
+            return;
+
+        connection.connectObject(
+            'changed', this._onConnectionChanged.bind(this),
+            this);
+
+        const item = new NMVpnConnectionItem(this, connection);
+        item.connectObject(
+            'activation-failed', () => this.emit('activation-failed'),
+            'notify::name', () => this._resortItem(item),
+            'destroy', () => this._removeConnection(connection),
+            this);
+
+        this._items.set(connection, item);
+        const pos = this._itemSorter.upsert(item);
+        this._section.addMenuItem(item, pos);
+
+        this._sync();
+    }
+
+    _removeConnection(connection) {
+        const item = this._items.get(connection);
+        if (!item)
+            return;
+
+        this._itemSorter.delete(item);
+        this._items.delete(connection);
+
+        item.destroy();
+        this._sync();
     }
 
     _sync() {
-        let nItems = this._connectionItems.size;
+        const nItems = this._items.size;
-        this.item.visible = nItems > 0;
+        for (const item of this._items.values())
-
+            item.radio_mode = nItems > 1;
-        super._sync();
     }
 
     get category() {
         return NMConnectionCategory.VPN;
     }
 
-    _getDescription() {
-        return _("VPN");
-    }
-
-    _getStatus() {
-        let values = this._connectionItems.values();
-        for (let item of values) {
-            if (item.is_active)
-                return item.name;
-        }
-
-        return _("VPN Off");
-    }
-
-    _getMenuIcon() {
-        return this.getIndicatorIcon() || 'network-vpn-disabled-symbolic';
-    }
-
     activateConnection(connection) {
         this._client.activate_connection_async(connection, null, null, null, null);
     }
@@ -1665,13 +1688,8 @@ var NMVpnSection = class extends NMConnectionSection {
         this._client.deactivate_connection(activeConnection, null);
     }
 
-    _makeConnectionItem(connection) {
-        return new NMVpnConnectionItem(this, connection);
-    }
-
     getIndicatorIcon() {
-        let items = this._connectionItems.values();
+        for (const item of this._items.values()) {
-        for (let item of items) {
             if (item.is_active)
                 return item.icon_name;
         }
@@ -1842,7 +1860,7 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._vpnSection = new NMVpnSection(this._client);
         this._vpnSection.connect('activation-failed', this._onActivationFailed.bind(this));
         this._vpnSection.connect('icon-changed', this._updateIcon.bind(this));
-        this.menu.addMenuItem(this._vpnSection.item);
+        this.menu.addMenuItem(this._vpnSection);
 
         this._readConnections();
         this._readDevices();