status/network: Add NMSection:label property

This is the last property that will be needed by the future
betwork quick toggles.

It maps to the same item as :icon-name, except when more than one
item is active. In that case, we overrule the binding and return
a generic name and count (like "VPN (2)").

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

js/ui/status/network.js

@@ -1282,6 +1282,9 @@ const NMSection = GObject.registerClass({
         'icon-name': GObject.ParamSpec.string('icon-name', '', '',
             GObject.ParamFlags.READWRITE,
             ''),
+        'label': GObject.ParamSpec.string('label', '', '',
+            GObject.ParamFlags.READWRITE,
+            ''),
     },
     Signals: {
         'activation-failed': {},
@@ -1303,6 +1306,10 @@ const NMSection = GObject.registerClass({
         this._itemBinding = new GObject.BindingGroup();
         this._itemBinding.bind('icon-name',
             this, 'icon-name', GObject.BindingFlags.DEFAULT);
+        this._itemBinding.bind_full('name',
+            this, 'label', GObject.BindingFlags.DEFAULT,
+            (bind, source) => [true, this._transformLabel(source)],
+            null);
     }
 
     setClient(client) {
@@ -1328,11 +1335,30 @@ const NMSection = GObject.registerClass({
         throw new GObject.NotImplementedError();
     }
 
+    // transform function for property binding:
+    // Ignore the provided label if there are multiple active
+    // items, and replace it with something like "VPN (2)"
+    _transformLabel(source) {
+        const nActive = this.checked
+            ? [...this._getActiveItems()].length
+            : 0;
+        if (nActive > 1)
+            return `${this._getDefaultName()} (${nActive})`;
+        return source;
+    }
+
     _updateItemsVisibility() {
         [...this._itemSorter.itemsByMru()].forEach(
             (item, i) => (item.visible = i < MAX_VISIBLE_NETWORKS));
     }
 
+    _itemActiveChanged() {
+        // force an update in case we changed
+        // from or to multiple active items
+        this._itemBinding.source?.notify('name');
+        this._sync();
+    }
+
     _updateChecked() {
         const [firstActive] = this._getActiveItems();
         this.checked = !!firstActive;
@@ -1348,7 +1374,7 @@ const NMSection = GObject.registerClass({
             `${this} already has an item for ${key}`);
 
         item.connectObject(
-            'notify::is-active', () => this._sync(),
+            'notify::is-active', () => this._itemActiveChanged(),
             'notify::name', () => this._resortItem(item),
             'destroy', () => this._removeItem(key),
             this);
@@ -1428,6 +1454,10 @@ class NMVpnSection extends NMSection {
             this);
     }
 
+    _getDefaultName() {
+        return _('VPN');
+    }
+
     _loadInitialItems() {
         const connections = this._client.get_connections();
         for (const conn of connections)
@@ -1533,6 +1563,12 @@ class NMDeviceSection extends NMSection {
             }, this);
     }
 
+    _getDefaultName() {
+        const [dev] = this._nmDevices;
+        const [name] = NM.Device.disambiguate_names([dev]);
+        return name;
+    }
+
     _loadInitialItems() {
         const devices = this._client.get_devices();
         for (const  dev of devices)