status: Put arrow icons next to the separate status indicators

This is to indicate that it has a pulldown menu.

This is a part of the new system status design, see
https://wiki.gnome.org/GnomeShell/Design/Guidelines/SystemStatus/
for design details.

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

data/theme/gnome-shell.css

@@ -614,7 +614,8 @@ StScrollBar StButton#vhandle:active {
     -boxpointer-gap: 4px;
 }
 
-.panel-status-button-box {
+.panel-status-button-box,
+.panel-status-menu-box {
     spacing: 4px;
 }
 

js/ui/panel.js

@@ -208,12 +208,14 @@ const AppMenuButton = new Lang.Class({
                               Lang.bind(this, this._updateIconBoxClip));
         this._container.add_actor(this._iconBox);
 
-        this._hbox = new St.BoxLayout();
+        this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' });
         this._container.add_actor(this._hbox);
 
         this._label = new TextShadower();
         this._label.actor.y_align = Clutter.ActorAlign.CENTER;
         this._hbox.add_actor(this._label.actor);
+        this._arrow = new St.Label({ text: '\u25BE' });
+        this._hbox.add_actor(this._arrow);
 
         this._iconBottomClip = 0;
 
@@ -500,6 +502,7 @@ const AppMenuButton = new Lang.Class({
         if (this._iconBox.child != null)
             this._iconBox.child.destroy();
         this._iconBox.hide();
+        this._arrow.hide();
         this._label.setText('');
 
         if (this._appMenuNotifyId)
@@ -519,6 +522,7 @@ const AppMenuButton = new Lang.Class({
         this.setName(targetApp.get_name());
 
         this._syncIcon();
+        this._arrow.show();
         this._iconBox.show();
 
         if (targetApp.get_state() == Shell.AppState.STARTING ||

js/ui/status/accessibility.js

@@ -3,6 +3,7 @@
 const Gio = imports.gi.Gio;
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
+const St = imports.gi.St;
 
 const PanelMenu = imports.ui.panelMenu;
 const PopupMenu = imports.ui.popupMenu;
@@ -30,10 +31,17 @@ const HIGH_CONTRAST_THEME = 'HighContrast';
 
 const ATIndicator = new Lang.Class({
     Name: 'ATIndicator',
-    Extends: PanelMenu.SystemStatusButton,
+    Extends: PanelMenu.Button,
 
     _init: function() {
-        this.parent('preferences-desktop-accessibility-symbolic', _("Accessibility"));
+        this.parent(0.0, _("Accessibility"));
+
+        this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' });
+        this._hbox.add_child(new St.Icon({ style_class: 'system-status-icon',
+                                           icon_name: 'preferences-desktop-accessibility-symbolic' }));
+        this._hbox.add_child(new St.Label({ text: '\u25BE' }));
+
+        this.actor.add_child(this._hbox);
 
         let highContrast = this._buildHCItem();
         this.menu.addMenuItem(highContrast);

js/ui/status/keyboard.js

@@ -337,7 +337,12 @@ const InputSourceIndicator = new Lang.Class({
         this._container.connect('get-preferred-width', Lang.bind(this, this._containerGetPreferredWidth));
         this._container.connect('get-preferred-height', Lang.bind(this, this._containerGetPreferredHeight));
         this._container.connect('allocate', Lang.bind(this, this._containerAllocate));
-        this.actor.add_actor(this._container);
+
+        this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' });
+        this._hbox.add_child(this._container);
+        this._hbox.add_child(new St.Label({ text: '\u25BE' }));
+
+        this.actor.add(this._hbox, { y_expand: true });
         this.actor.add_style_class_name('panel-status-button');
 
         // All valid input sources currently in the gsettings