status: Refine system status menu

* switch to a one-column layout (and adjust strings/widths
   accordingly
 * remove separator before system menu
 * add link to account settings to user submenu for consistency

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

data/theme/gnome-shell-sass

@@ -1 +1 @@
-Subproject commit 172666394146a88445811e86ce37a3f36775004c
+Subproject commit 034d0b775b12f2212ba2028b153e4c2f31e6fa65

data/theme/gnome-shell.css

@@ -808,9 +808,12 @@ StScrollBar {
   padding: 8px;
   font-size: .9em; }
 
-.system-switch-user-submenu-icon {
+.system-switch-user-submenu-icon.user-icon {
-  icon-size: 24px;
+  icon-size: 20px;
-  border: 1px solid rgba(238, 238, 236, 0.4); }
+  padding: 0 2px; }
+.system-switch-user-submenu-icon.default-icon {
+  icon-size: 16px;
+  padding: 0 4px; }
 
 #appMenu {
   spinner-image: url("resource:///org/gnome/shell/theme/process-working.svg");
@@ -819,7 +822,7 @@ StScrollBar {
     color: transparent; }
 
 .aggregate-menu {
-  width: 360px; }
+  width: 280px; }
   .aggregate-menu .popup-menu-icon {
     padding: 0 4px; }
 

js/ui/panel.js

@@ -697,7 +697,6 @@ const AggregateMenu = new Lang.Class({
         this.menu.addMenuItem(this._location.menu);
         this.menu.addMenuItem(this._rfkill.menu);
         this.menu.addMenuItem(this._power.menu);
-        this.menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());
         this.menu.addMenuItem(this._system.menu);
     },
 });

js/ui/popupMenu.js

@@ -1059,11 +1059,6 @@ const PopupSubMenuMenuItem = new Lang.Class({
         let expander = new St.Bin({ style_class: 'popup-menu-item-expander' });
         this.actor.add(expander, { expand: true });
 
-        this.status = new St.Label({ style_class: 'popup-status-menu-item',
-                                     y_expand: true,
-                                     y_align: Clutter.ActorAlign.CENTER });
-        this.actor.add_child(this.status);
-
         this._triangle = arrowIcon(St.Side.RIGHT);
         this._triangle.pivot_point = new Clutter.Point({ x: 0.5, y: 0.6 });
 

js/ui/status/bluetooth.js

@@ -46,7 +46,7 @@ const Indicator = new Lang.Class({
 
         // The Bluetooth menu only appears when Bluetooth is in use,
         // so just statically build it with a "Turn Off" menu item.
-        this._item = new PopupMenu.PopupSubMenuMenuItem(_("Bluetooth"), true);
+        this._item = new PopupMenu.PopupSubMenuMenuItem('', true);
         this._item.icon.icon_name = 'bluetooth-active-symbolic';
         this._item.menu.addAction(_("Turn Off"), Lang.bind(this, function() {
             this._proxy.BluetoothAirplaneMode = true;
@@ -101,8 +101,9 @@ const Indicator = new Lang.Class({
         this._item.actor.visible = this._proxy.BluetoothHasAirplaneMode && !this._proxy.BluetoothAirplaneMode;
 
         if (nDevices > 0)
-            this._item.status.text = ngettext("%d Connected Device", "%d Connected Devices", nDevices).format(nDevices);
+            /* Translators: this is the number of connected bluetooth devices */
+            this._item.label.text = ngettext("%d Connected", "%d Connected", nDevices).format(nDevices);
         else
-            this._item.status.text = _("Not Connected");
+            this._item.label.text = _("Not In Use");
     },
 });

js/ui/status/location.js

@@ -62,13 +62,13 @@ const Indicator = new Lang.Class({
         this._indicator = this._addIndicator();
         this._indicator.icon_name = 'find-location-symbolic';
 
-        this._item = new PopupMenu.PopupSubMenuMenuItem(_("Location"), true);
+        this._item = new PopupMenu.PopupSubMenuMenuItem('', true);
         this._item.icon.icon_name = 'find-location-symbolic';
 
         this._agent = Gio.DBusExportedObject.wrapJSObject(AgentIface, this);
         this._agent.export(Gio.DBus.system, '/org/freedesktop/GeoClue2/Agent');
 
-        this._item.status.text = _("Enabled");
+        this._item.label.text = _("Location Enabled");
         this._onOffAction = this._item.menu.addAction(_("Disable"), Lang.bind(this, this._onOnOffAction));
         this._item.menu.addSettingsAction(_("Privacy Settings"), 'gnome-privacy-panel.desktop');
 
@@ -173,10 +173,11 @@ const Indicator = new Lang.Class({
 
     _updateMenuLabels: function() {
         if (this._settings.get_boolean(ENABLED)) {
-            this._item.status.text = this._indicator.visible ? _("In Use") : _("Enabled");
+            this._item.label.text = this._indicator.visible ? _("Location In Use")
+                                                            : _("Location Enabled");
             this._onOffAction.label.text = _("Disable");
         } else {
-            this._item.status.text = _("Disabled");
+            this._item.label.text = _("Location Disabled");
             this._onOffAction.label.text = _("Enable");
         }
     },

js/ui/status/network.js

@@ -257,16 +257,8 @@ const NMConnectionSection = new Lang.Class({
         this._radioSection.actor.visible = (nItems > 1);
         this._labelSection.actor.visible = (nItems == 1);
 
-        this.item.status.text = this._getStatus();
+        this.item.label.text = this._getStatus();
         this.item.icon.icon_name = this._getMenuIcon();
-
-        // desc can be undefined at cold-plug, before we called
-        // NMGtk.disambiguate_device_names() at least once
-        let desc = this._getDescription();
-        if (desc)
-            this.item.label.text = desc;
-        else
-            this.item.label.text = '';
     },
 
     _getMenuIcon: function() {
@@ -355,6 +347,7 @@ const NMConnectionDevice = new Lang.Class({
         this.parent(client);
         this._device = device;
         this._settings = settings;
+        this._description = '';
 
         this._autoConnectItem = this.item.menu.addAction(_("Connect"), Lang.bind(this, this._autoConnect));
         this._deactivateItem = this._radioSection.addAction(_("Turn Off"), Lang.bind(this, this.deactivateConnection));
@@ -454,38 +447,44 @@ const NMConnectionDevice = new Lang.Class({
 
         switch(this._device.state) {
         case NetworkManager.DeviceState.DISCONNECTED:
-            return _("Off");
+            /* Translators: %s is a network identifier */
+            return _("%s Off").format(this._getDescription());
         case NetworkManager.DeviceState.ACTIVATED:
-            return _("Connected");
+            /* Translators: %s is a network identifier */
+            return _("%s Connected").format(this._getDescription());
         case NetworkManager.DeviceState.UNMANAGED:
             /* Translators: this is for network devices that are physically present but are not
-               under NetworkManager's control (and thus cannot be used in the menu) */
+               under NetworkManager's control (and thus cannot be used in the menu);
-            return _("Unmanaged");
+               %s is a network identifier */
+            return _("%s Unmanaged").format(this._getDescription());
         case NetworkManager.DeviceState.DEACTIVATING:
-            return _("Disconnecting");
+            /* Translators: %s is a network identifier */
+            return _("%s Disconnecting").format(this._getDescription());
         case NetworkManager.DeviceState.PREPARE:
         case NetworkManager.DeviceState.CONFIG:
         case NetworkManager.DeviceState.IP_CONFIG:
         case NetworkManager.DeviceState.IP_CHECK:
         case NetworkManager.DeviceState.SECONDARIES:
-            return _("Connecting");
+            /* Translators: %s is a network identifier */
+            return _("%s Connecting").format(this._getDescription());
         case NetworkManager.DeviceState.NEED_AUTH:
-            /* Translators: this is for network connections that require some kind of key or password */
+            /* Translators: this is for network connections that require some kind of key or password; %s is a network identifier */
-            return _("Authentication required");
+            return _("%s requires Authentication").format(this._getDescription());
         case NetworkManager.DeviceState.UNAVAILABLE:
             // This state is actually a compound of various states (generically unavailable,
             // firmware missing), that are exposed by different properties (whose state may
             // or may not updated when we receive state-changed).
             if (this._device.firmware_missing) {
                 /* Translators: this is for devices that require some kind of firmware or kernel
-                   module, which is missing */
+                   module, which is missing; %s is a network identifier */
-                return _("Firmware missing");
+                return _("Firmware missing for %s").format(this._getDescription());
             }
             /* Translators: this is for a network device that cannot be activated (for example it
-               is disabled by rfkill, or it has no coverage */
+               is disabled by rfkill, or it has no coverage; %s is a network identifier */
-            return _("Unavailable");
+            return _("%s Unavailable").format(this._getDescription());
         case NetworkManager.DeviceState.FAILED:
-            return _("Connection failed");
+            /* Translators: %s is a network identifier */
+            return _("%s Connection failed").format(this._getDescription());
         default:
             log('Device state invalid, is %d'.format(this._device.state));
             return 'invalid';
@@ -585,11 +584,12 @@ const NMDeviceModem = new Lang.Class({
 
     _getStatus: function() {
         if (!this._client.wwan_hardware_enabled)
-            return _("Hardware Disabled");
+            /* Translators: %s is a network identifier */
+            return _("%s Hardware Disabled").format(this._getDescription());
         else if (!this._client.wwan_enabled)
             /* Translators: this is for a network device that cannot be activated
-               because it's disabled by rfkill (airplane mode) */
+               because it's disabled by rfkill (airplane mode); %s is a network identifier */
-            return _("Disabled");
+            return _("%s Disabled").format(this._getDescription());
         else if (this._device.state == NetworkManager.DeviceState.ACTIVATED &&
                  this._mobileDevice && this._mobileDevice.operator_name)
             return this._mobileDevice.operator_name;
@@ -1279,9 +1279,8 @@ const NMDeviceWireless = new Lang.Class({
         this._toggleItem.label.text = this._client.wireless_enabled ? _("Turn Off") : _("Turn On");
         this._toggleItem.actor.visible = this._client.wireless_hardware_enabled;
 
-        this.item.status.text = this._getStatus();
         this.item.icon.icon_name = this._getMenuIcon();
-        this.item.label.text = this._description;
+        this.item.label.text = this._getStatus();
     },
 
     setDeviceDescription: function(desc) {
@@ -1293,18 +1292,23 @@ const NMDeviceWireless = new Lang.Class({
         let ap = this._device.active_access_point;
 
         if (this._isHotSpotMaster())
-            return _("Hotspot Active");
+            /* Translators: %s is a network identifier */
+            return _("%s Hotspot Active").format(this._description);
         else if (this._device.state >= NetworkManager.DeviceState.PREPARE &&
                  this._device.state < NetworkManager.DeviceState.ACTIVATED)
-            return _("Connecting");
+            /* Translators: %s is a network identifier */
+            return _("%s Connecting").format(this._description);
         else if (ap)
             return ssidToLabel(ap.get_ssid());
         else if (!this._client.wireless_hardware_enabled)
-            return _("Hardware Disabled");
+            /* Translators: %s is a network identifier */
+            return _("%s Hardware Disabled").format(this._description);
         else if (!this._client.wireless_enabled)
-            return _("Off");
+            /* Translators: %s is a network identifier */
+            return _("%s Off").format(this._description);
         else if (this._device.state == NetworkManager.DeviceState.DISCONNECTED)
-            return _("Not Connected");
+            /* Translators: %s is a network identifier */
+            return _("%s Not Connected").format(this._description);
         else
             return '';
     },
@@ -1506,7 +1510,7 @@ const NMVPNSection = new Lang.Class({
                 return item.getName();
         }
 
-        return _("Off");
+        return _("VPN Off");
     },
 
     _getMenuIcon: function() {

js/ui/status/power.js

@@ -112,12 +112,6 @@ const Indicator = new Lang.Class({
         this._item.icon.icon_name = icon;
 
         // The status label
-        this._item.status.text = this._getStatus();
+        this._item.label.text = this._getStatus();
-
-        // The sub-menu heading
-        if (this._proxy.Type == UPower.DeviceKind.UPS)
-            this._item.label.text = _("UPS");
-        else
-            this._item.label.text = _("Battery");
     },
 });

js/ui/status/rfkill.js

@@ -85,9 +85,8 @@ const Indicator = new Lang.Class({
         // The menu only appears when airplane mode is on, so just
         // statically build it as if it was on, rather than dynamically
         // changing the menu contents.
-        this._item = new PopupMenu.PopupSubMenuMenuItem(_("Airplane Mode"), true);
+        this._item = new PopupMenu.PopupSubMenuMenuItem(_("Airplane Mode On"), true);
         this._item.icon.icon_name = 'airplane-mode-symbolic';
-        this._item.status.text = _("On");
         this._offItem = this._item.menu.addAction(_("Turn Off"), Lang.bind(this, function() {
             this._manager.airplaneMode = false;
         }));

js/ui/status/system.js

@@ -251,8 +251,14 @@ const Indicator = new Lang.Class({
             let file = Gio.File.new_for_path(iconFile);
             let gicon = new Gio.FileIcon({ file: file });
             this._switchUserSubMenu.icon.gicon = gicon;
+
+            this._switchUserSubMenu.icon.add_style_class_name('user-icon');
+            this._switchUserSubMenu.icon.remove_style_class_name('default-icon');
         } else {
             this._switchUserSubMenu.icon.icon_name = 'avatar-default-symbolic';
+
+            this._switchUserSubMenu.icon.add_style_class_name('default-icon');
+            this._switchUserSubMenu.icon.remove_style_class_name('user-icon');
         }
     },
 
@@ -344,6 +350,9 @@ const Indicator = new Lang.Class({
         this._switchUserSubMenu.menu.addMenuItem(item);
         this._logoutItem = item;
 
+        this._switchUserSubMenu.menu.addSettingsAction(_("Account Settings"),
+                                                       'gnome-user-accounts-panel.desktop');
+
         this._user.connect('notify::is-loaded', Lang.bind(this, this._updateSwitchUserSubMenu));
         this._user.connect('changed', Lang.bind(this, this._updateSwitchUserSubMenu));