[gnome-shell] NetworkMenu: prefer wifi/3g over vpn in the panel

[Cosimo Cecchi <cosimoc src gnome org>]

commit 61de3de909534b161ec2aa0cea15e94a802e2efe
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Tue Jun 19 13:50:37 2012 -0400

    NetworkMenu: prefer wifi/3g over vpn in the panel
    
    Wifi and mobile broadband have signal indicators and are thus
    more useful than vpn icons in the panel. Therefore, in the case
    we have both wifi/3g and VPN we prefer the former as the "primary
    icon" and add a lock next to it.
    Behavior when VPN is added to wired or other connections is still
    preserved: the wired icon is replaced by vpn.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=672591

 data/theme/gnome-shell.css |    4 +++
 js/ui/status/network.js    |   58 +++++++++++++++++++++++++++++++++++--------
 2 files changed, 51 insertions(+), 11 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 6f45cff..d6cdc20 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -436,6 +436,10 @@ StScrollBar StButton#vhandle:hover
     -boxpointer-gap: 4px
 }
 
+#networkMenu {
+    spacing: 4px;
+}
+
 /* User Menu */
 
 #panelUserMenu {
diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index f3a113b..5a3210b 100644
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -1567,10 +1567,25 @@ const NMDeviceWireless = new Lang.Class({
 
 const NMApplet = new Lang.Class({
     Name: 'NMApplet',
-    Extends: PanelMenu.SystemStatusButton,
+    Extends: PanelMenu.Button,
 
     _init: function() {
-        this.parent('network-offline', _("Network"));
+        this.parent(0.0, _('Network'));
+
+        this._box = new St.BoxLayout({ name: 'networkMenu' });
+        this.actor.add_actor (this._box);
+        this.actor.add_style_class_name('panel-status-button');
+
+        this._primaryIcon = new St.Icon({ icon_name: 'network-offline',
+                                          icon_type: St.IconType.SYMBOLIC,
+                                          style_class: 'system-status-icon' });
+        this._box.add_actor(this._primaryIcon);
+
+        this._secondaryIcon = new St.Icon({ icon_name: 'network-vpn',
+                                            icon_type: St.IconType.SYMBOLIC,
+                                            style_class: 'system-status-icon',
+                                            visible: false });
+        this._box.add_actor(this._secondaryIcon);
 
         this._client = NMClient.Client.new();
 
@@ -1588,6 +1603,7 @@ const NMApplet = new Lang.Class({
         this._connections = [ ];
 
         this._mainConnection = null;
+        this._vpnConnection = null;
         this._activeAccessPointUpdateId = 0;
         this._activeAccessPoint = null;
         this._mobileUpdateId = 0;
@@ -1678,6 +1694,10 @@ const NMApplet = new Lang.Class({
         }));
     },
 
+    setIcon: function(iconName) {
+        this._primaryIcon.icon_name = iconName;
+    },
+
     _ensureSource: function() {
         if (!this._source) {
             this._source = new MessageTray.Source(_("Network Manager"),
@@ -1851,6 +1871,8 @@ const NMApplet = new Lang.Class({
 
         this._activeConnections = newActiveConnections;
         this._mainConnection = null;
+        this._vpnConnection = null;
+
         let activating = null;
         let default_ip4 = null;
         let default_ip6 = null;
@@ -1884,10 +1906,10 @@ const NMApplet = new Lang.Class({
                 default_ip4 = a;
             if (a.default6)
                 default_ip6 = a;
+
             if (a._type == 'vpn')
                 active_vpn = a;
-
-            if (a.state == NetworkManager.ActiveConnectionState.ACTIVATING)
+            else if (a.state == NetworkManager.ActiveConnectionState.ACTIVATING)
                 activating = a;
 
             if (!a._primaryDevice) {
@@ -1916,7 +1938,8 @@ const NMApplet = new Lang.Class({
             }
         }
 
-        this._mainConnection = activating || active_vpn || default_ip4 || default_ip6 || this._activeConnections[0] || null;
+        this._mainConnection = activating || default_ip4 || default_ip6 || this._activeConnections[0] || null;
+        this._vpnConnection = active_vpn;
     },
 
     _notifyActivated: function(activeConnection) {
@@ -2062,9 +2085,6 @@ const NMApplet = new Lang.Class({
             case NMConnectionCategory.WIRED:
                 this.setIcon('network-wired-acquiring');
                 break;
-            case NMConnectionCategory.VPN:
-                this.setIcon('network-vpn-acquiring');
-                break;
             default:
                 // fallback to a generic connected icon
                 // (it could be a private connection of some other user)
@@ -2127,9 +2147,6 @@ const NMApplet = new Lang.Class({
                 this.setIcon('network-cellular-signal-' + signalToIcon(dev.mobileDevice.signal_quality));
                 hasMobileIcon = true;
                 break;
-            case NMConnectionCategory.VPN:
-                this.setIcon('network-vpn');
-                break;
             default:
                 // fallback to a generic connected icon
                 // (it could be a private connection of some other user)
@@ -2138,6 +2155,25 @@ const NMApplet = new Lang.Class({
             }
         }
 
+        // update VPN indicator
+        if (this._vpnConnection) {
+            let vpnIconName = 'network-vpn';
+            if (this._vpnConnection.state == NetworkManager.ActiveConnectionState.ACTIVATING)
+                vpnIconName = 'network-vpn-acquiring';
+
+            // only show a separate icon when we're using a wireless/3g connection
+            if (mc._section == NMConnectionCategory.WIRELESS || 
+                mc._section == NMConnectionCategory.WWAN) {
+                this._secondaryIcon.icon_name = vpnIconName;
+                this._secondaryIcon.visible = true;
+            } else {
+                this.setIcon(vpnIconName);
+                this._secondaryIcon.visible = false;
+            }
+        } else {
+            this._secondaryIcon.visible = false;
+        }
+
         // cleanup stale signal connections
 
         if (!hasApIcon && this._activeAccessPointUpdateId) {