[gnome-shell] status/network: Split out NMDeviceConnectionItem

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit a62ac495a3f412688bcae6c313a50b6dd5e3c8ac
Author: Florian Müllner <fmuellner gnome org>
Date:   Sat Aug 6 12:55:39 2022 +0200

    status/network: Split out NMDeviceConnectionItem
    
    When not in radio-mode - that is, when the connection is the only
    connection for its device - we want the item to represent the
    device as a whole.
    
    Achieve this with a small ConnectionItem subclass that adds a
    :device-name property for that purpose.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2407>

 js/ui/status/network.js | 40 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)
---
diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index 03937bbfa2..38ac690f16 100644
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -192,7 +192,7 @@ const NMConnectionItem = GObject.registerClass({
 
     _sync() {
         if (this.radioMode) {
-            this._label.text = this._connection.get_id();
+            this._label.text = this.name;
             this.accessible_role = Atk.Role.CHECK_MENU_ITEM;
         } else {
             this._label.text = this._getRegularLabel();
@@ -232,6 +232,29 @@ const NMConnectionItem = GObject.registerClass({
     }
 });
 
+const NMDeviceConnectionItem = GObject.registerClass({
+    Properties: {
+        'device-name': GObject.ParamSpec.string('device-name', '', '',
+            GObject.ParamFlags.READWRITE,
+            ''),
+    },
+}, class NMDeviceConnectionItem extends NMConnectionItem {
+    constructor(section, connection) {
+        super(section, connection);
+
+        this.connectObject(
+            'notify::radio-mode', () => this.notify('name'),
+            'notify::device-name', () => this.notify('name'),
+            this);
+    }
+
+    get name() {
+        return this.radioMode
+            ?  this._connection.get_id()
+            : this.deviceName;
+    }
+});
+
 var NMConnectionSection = class NMConnectionSection extends Signals.EventEmitter {
     constructor(client) {
         super();
@@ -259,6 +282,8 @@ var NMConnectionSection = class NMConnectionSection extends Signals.EventEmitter
     }
 
     _iconChanged() {
+        this._connectionItems.forEach(
+            item => (item.icon_name = this.getIndicatorIcon()));
         this._sync();
         this.emit('icon-changed');
     }
@@ -422,6 +447,10 @@ var NMDeviceItem = class NMDeviceItem extends NMConnectionSection {
         return this._device.connection_valid(connection);
     }
 
+    _makeConnectionItem(connection) {
+        return new NMDeviceConnectionItem(this, connection);
+    }
+
     activateConnection(connection) {
         this._client.activate_connection_async(connection, this._device, null, null, null);
     }
@@ -432,6 +461,8 @@ var NMDeviceItem = class NMDeviceItem extends NMConnectionSection {
 
     setDeviceName(name) {
         this._deviceName = name;
+        this._connectionItems.forEach(
+            item => (item.deviceName = this._getDescription()));
         this._sync();
     }
 
@@ -1448,10 +1479,6 @@ class NMVpnConnectionItem extends NMConnectionItem {
             GObject.BindingFlags.SYNC_CREATE);
     }
 
-    get name() {
-        return this._connection?.get_id() ?? '';
-    }
-
     _updateOrnament() {
         this.setOrnament(PopupMenu.Ornament.NONE);
     }
@@ -1488,6 +1515,9 @@ class NMVpnConnectionItem extends NMConnectionItem {
             return 'network-vpn-disabled-symbolic';
         }
     }
+
+    set icon_name(_ignored) {
+    }
 });
 
 var NMVpnSection = class extends NMConnectionSection {