PanelMenu: Allow multiple icons in one SystemStatusButton

This generalizes the code previously used by NetworkMenu, so that all
SystemStatusButton now can add multiple icons.

https://bugzilla.gnome.org/show_bug.cgi?id=682540

data/theme/gnome-shell.css

@@ -502,7 +502,7 @@ StButton.popup-menu-item:insensitive {
     -boxpointer-gap: 4px
 }
 
-#networkMenu {
+.panel-status-button-box {
     spacing: 4px;
 }
 

js/ui/panelMenu.js

@@ -1,6 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
 const Clutter = imports.gi.Clutter;
+const Gio = imports.gi.Gio;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 const Shell = imports.gi.Shell;
@@ -230,19 +231,36 @@ const SystemStatusButton = new Lang.Class({
 
     _init: function(iconName, nameText) {
         this.parent(0.0, nameText);
-
-        this._iconActor = new St.Icon({ icon_name: iconName,
-                                        icon_type: St.IconType.SYMBOLIC,
-                                        style_class: 'system-status-icon' });
-        this.actor.add_actor(this._iconActor);
         this.actor.add_style_class_name('panel-status-button');
+
+        this._box = new St.BoxLayout({ style_class: 'panel-status-button-box' });
+        this.actor.add_actor(this._box);
+
+        this.setIcon(iconName);
+    },
+
+    addIcon: function(gicon) {
+        let icon = new St.Icon({ gicon: gicon,
+                                 icon_type: St.IconType.SYMBOLIC,
+                                 style_class: 'system-status-icon' });
+        this._box.add_actor(icon);
+
+        return icon;
     },
 
     setIcon: function(iconName) {
-        this._iconActor.icon_name = iconName;
+        // Need to first add a NULL GIcon and then set icon_name, to ensure
+        // compatibility with -symbolic fallbacks
+
+        if (!this.mainIcon)
+            this.mainIcon = this.addIcon(null);
+        this.mainIcon.icon_name = iconName;
     },
 
     setGIcon: function(gicon) {
-        this._iconActor.gicon = gicon;
+        if (this.mainIcon)
+            this.mainIcon.gicon = gicon;
+        else
+            this.mainIcon = this.addIcon(gicon);
     }
 });

js/ui/status/network.js

@@ -1,6 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 const GLib = imports.gi.GLib;
 const GObject = imports.gi.GObject;
+const Gio = imports.gi.Gio;
 const Lang = imports.lang;
 const NetworkManager = imports.gi.NetworkManager;
 const NMClient = imports.gi.NMClient;
@@ -1564,25 +1565,13 @@ const NMDeviceWireless = new Lang.Class({
 
 const NMApplet = new Lang.Class({
     Name: 'NMApplet',
-    Extends: PanelMenu.Button,
+    Extends: PanelMenu.SystemStatusButton,
 
     _init: function() {
-        this.parent(0.0, _('Network'));
+        this.parent('network-offline', _('Network'));
 
-        this._box = new St.BoxLayout({ name: 'networkMenu' });
+        this._secondaryIcon = this.addIcon(new Gio.ThemedIcon({ name: 'network-vpn' }));
-        this.actor.add_actor (this._box);
+        this._secondaryIcon.hide();
-        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();
 
@@ -1691,10 +1680,6 @@ const NMApplet = new Lang.Class({
         }));
     },
 
-    setIcon: function(iconName) {
-        this._primaryIcon.icon_name = iconName;
-    },
-
     setLockedState: function(locked) {
         // FIXME: more design discussion is needed before we can
         // expose part of this menu