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

@@ -436,6 +436,10 @@ StScrollBar StButton#vhandle:hover
     -boxpointer-gap: 4px
 }
 
+#networkMenu {
+    spacing: 4px;
+}
+
 /* User Menu */
 
 #panelUserMenu {

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;
-
+            else if (a.state == NetworkManager.ActiveConnectionState.ACTIVATING)
-            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) {