[gnome-shell] status/network: Update appearance of connection items

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

commit 64ae6ae7b388c7236ced26aa8d50d7f7b36d55c8
Author: Florian Müllner <fmuellner gnome org>
Date:   Tue Aug 2 23:18:22 2022 +0200

    status/network: Update appearance of connection items
    
    When not in radio-mode - that is, in the single-connection
    case - the item currently uses a plain 'Connect' label.
    
    That is OK while the item is inside a submenu that describes
    the device, but we will soon stop using a submenu when a single
    item can describe the device as a whole.
    
    Prepare for that by adding an icon that is shown when in non-radio
    mode, and include the device name in the label in that case.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2407>

 js/ui/status/network.js | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)
---
diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index 9d7b3f0aaf..03937bbfa2 100644
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -124,6 +124,13 @@ const NMConnectionItem = GObject.registerClass({
         this._connection = connection;
         this._activeConnection = null;
 
+        this._icon = new St.Icon({
+            style_class: 'popup-menu-icon',
+            x_align: Clutter.ActorAlign.END,
+            visible: !this.radio_mode,
+        });
+        this.add_child(this._icon);
+
         this._label = new St.Label({
             y_expand: true,
             y_align: Clutter.ActorAlign.CENTER,
@@ -131,8 +138,16 @@ const NMConnectionItem = GObject.registerClass({
         this.add_child(this._label);
         this.label_actor = this._label;
 
+        this.bind_property('icon-name',
+            this._icon, 'icon-name',
+            GObject.BindingFlags.DEFAULT);
+        this.bind_property('radio-mode',
+            this._icon, 'visible',
+            GObject.BindingFlags.INVERT_BOOLEAN);
+
         this.connectObject(
             'notify::radio-mode', () => this._sync(),
+            'notify::name', () => this._sync(),
             this);
         this._sync();
     }
@@ -167,13 +182,20 @@ const NMConnectionItem = GObject.registerClass({
             ? PopupMenu.Ornament.DOT : PopupMenu.Ornament.NONE);
     }
 
+    _getRegularLabel() {
+        return this.is_active
+            // Translators: %s is a device name like "MyPhone"
+            ? _('Disconnect %s').format(this.name)
+            // Translators: %s is a device name like "MyPhone"
+            : _('Connect to %s').format(this.name);
+    }
+
     _sync() {
         if (this.radioMode) {
             this._label.text = this._connection.get_id();
             this.accessible_role = Atk.Role.CHECK_MENU_ITEM;
         } else {
-            this._label.text = this.is_active
-                ? _('Turn Off') : this._section.getConnectLabel();
+            this._label.text = this._getRegularLabel();
             this.accessible_role = Atk.Role.MENU_ITEM;
         }
         this._updateOrnament();
@@ -255,10 +277,6 @@ var NMConnectionSection = class NMConnectionSection extends Signals.EventEmitter
         return this.getIndicatorIcon();
     }
 
-    getConnectLabel() {
-        return _("Connect");
-    }
-
     _connectionValid(_connection) {
         return true;
     }
@@ -592,10 +610,6 @@ var NMBluetoothDeviceItem = class extends NMDeviceItem {
         return this._device.name;
     }
 
-    getConnectLabel() {
-        return _("Connect to Internet");
-    }
-
     _getMenuIcon() {
         if (!this._device.active_connection)
             return 'network-cellular-disabled-symbolic';