Add API for system status indicators

Add a container in the panel for holding them, a fast method for
loading and a simple base class to be subclassed by specific
implementations.

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

data/theme/gnome-shell.css

@@ -211,7 +211,12 @@ StTooltip {
     spacing: 14px;
 }
 
-#statusTray:compact {
+#legacyTray {
+    spacing: 14px;
+    padding-left: 14px;
+}
+
+#legacyTray:compact {
     spacing: 8px;
 }
 

js/ui/panel.js

@@ -38,6 +38,15 @@ const STANDARD_TRAY_ICON_IMPLEMENTATIONS = {
     'gnome-power-manager': 'battery'
 };
 
+/* Holds constructors for shell-implemented SystemStatusButtons
+ * example:
+ * const STANDARD_TRAY_ICON_SHELL_IMPLEMENTATION = {
+ *     'network': imports.ui.network.NMApplet
+ * };
+ */
+const STANDARD_TRAY_ICON_SHELL_IMPLEMENTATION = {
+};
+
 const CLOCK_FORMAT_KEY        = 'format';
 const CLOCK_CUSTOM_FORMAT_KEY = 'custom-format';
 const CLOCK_SHOW_DATE_KEY     = 'show-date';
@@ -797,15 +806,29 @@ Panel.prototype = {
                                            '^([^ ]*/)?indicator-application-service$']});
         p.run();
 
-        // The tray icons live in trayBox within trayContainer.
+        // System status applets live in statusBox, while legacy tray icons
+        // live in trayBox
         // The trayBox is hidden when there are no tray icons.
-        let trayContainer = new St.Bin({ y_align: St.Align.MIDDLE });
+        let statusBox = new St.BoxLayout({ name: 'statusTray' });
-        this._rightBox.add(trayContainer);
+        let trayBox = new St.BoxLayout({ name: 'legacyTray' });
-        let trayBox = new St.BoxLayout({ name: 'statusTray' });
         this._trayBox = trayBox;
+        this._statusBox = statusBox;
 
         trayBox.hide();
-        trayContainer.add_actor(trayBox);
+        this._rightBox.add(trayBox);
+        this._rightBox.add(statusBox);
+
+        for (let i = 0; i < STANDARD_TRAY_ICON_ORDER.length; i++) {
+            let role = STANDARD_TRAY_ICON_ORDER[i];
+            let constructor = STANDARD_TRAY_ICON_SHELL_IMPLEMENTATION[role];
+            if (!constructor) {
+                // This icon is not implemented (this is a bug)
+                continue;
+            }
+            let indicator = new constructor();
+            statusBox.add(indicator.actor);
+            this._menus.addMenu(indicator.menu);
+        }
 
         this._traymanager = new Shell.TrayManager();
         this._traymanager.connect('tray-icon-added', Lang.bind(this, this._onTrayIconAdded));
@@ -869,6 +892,11 @@ Panel.prototype = {
             // Unknown icons go first in undefined order
             this._trayBox.insert_actor(icon, 0);
         } else {
+            if (STANDARD_TRAY_ICON_SHELL_IMPLEMENTATION[role]) {
+                // This icon is legacy, and replaced by a Shell version
+                // Hide it
+                return;
+            }
             icon._role = role;
             // Figure out the index in our well-known order for this icon
             let position = STANDARD_TRAY_ICON_ORDER.indexOf(role);

js/ui/panelMenu.js

@@ -35,4 +35,44 @@ Button.prototype = {
         else
             this.actor.remove_style_pseudo_class('pressed');
     }
+};
+
+/* SystemStatusButton:
+ *
+ * This class manages one System Status indicator (network, keyboard,
+ * volume, bluetooth...), which is just a PanelMenuButton with an
+ * icon and a tooltip
+ */
+function SystemStatusButton() {
+    this._init.apply(this, arguments);
+}
+
+SystemStatusButton.prototype = {
+    __proto__: Button.prototype,
+
+    _init: function(iconName,tooltipText) {
+        Button.prototype._init.call(this, St.Align.START);
+        this._iconActor = null;
+        this.setIcon(iconName);
+        this.setTooltip(tooltipText);
+    },
+
+    setIcon: function(iconName) {
+        this._iconName = iconName;
+        if (this._iconActor)
+            this._iconActor.destroy();
+        this._iconActor = St.TextureCache.get_default().load_icon_name(this._iconName, 24);
+        this.actor.set_child(this._iconActor);
+    },
+
+    setTooltip: function(text) {
+        if (text != null) {
+            this.tooltip = text;
+            this.actor.has_tooltip = true;
+            this.actor.tooltip_text = text;
+        } else {
+            this.actor.has_tooltip = false;
+            this.tooltip = null;
+        }
+    }
 };