volume: Implement new volume menu design

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

Since the designs require that we have a custom layout for the slider
item, this means that the PopupSliderMenuItem is unused, so remove it
as well.

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

js/ui/popupMenu.js

@@ -473,33 +473,6 @@ const PopupAlternatingMenuItem = new Lang.Class({
     }
 });
 
-const PopupSliderMenuItem = new Lang.Class({
-    Name: 'PopupSliderMenuItem',
-    Extends: PopupBaseMenuItem,
-
-    _init: function(value) {
-        this.parent({ activate: false });
-
-        this._slider = new Slider.Slider(value);
-        this._slider.connect('value-changed', Lang.bind(this, function(actor, value) {
-            this.emit('value-changed', value);
-        }));
-        this.addActor(this._slider.actor);
-    },
-
-    setValue: function(value) {
-        this._slider.setValue(value);
-    },
-
-    get value() {
-        return this._slider.value;
-    },
-
-    scroll: function (event) {
-        this._slider.scroll(event);
-    }
-});
-
 const Switch = new Lang.Class({
     Name: 'Switch',
 

js/ui/status/volume.js

@@ -9,6 +9,7 @@ const Signals = imports.signals;
 
 const PanelMenu = imports.ui.panelMenu;
 const PopupMenu = imports.ui.popupMenu;
+const Slider = imports.ui.slider;
 
 const VOLUME_NOTIFY_ID = 1;
 
@@ -28,18 +29,19 @@ function getMixerControl() {
 const StreamSlider = new Lang.Class({
     Name: 'StreamSlider',
 
-    _init: function(control, title) {
+    _init: function(control) {
         this._control = control;
 
-        this.item = new PopupMenu.PopupMenuSection();
+        this.item = new PopupMenu.PopupBaseMenuItem({ activate: false });
 
-        this._title = new PopupMenu.PopupMenuItem(title, { reactive: false });
+        this._slider = new Slider.Slider(0);
-        this._slider = new PopupMenu.PopupSliderMenuItem(0);
         this._slider.connect('value-changed', Lang.bind(this, this._sliderChanged));
         this._slider.connect('drag-end', Lang.bind(this, this._notifyVolumeChange));
 
-        this.item.addMenuItem(this._title);
+        this._icon = new St.Icon({ style_class: 'popup-menu-icon' });
-        this.item.addMenuItem(this._slider);
+
+        this.item.addActor(this._icon, { align: St.Align.MIDDLE });
+        this.item.addActor(this._slider.actor, { expand: true });
 
         this._stream = null;
     },
@@ -83,8 +85,7 @@ const StreamSlider = new Lang.Class({
 
     _updateVisibility: function() {
         let visible = this._shouldBeVisible();
-        this._title.actor.visible = visible;
+        this.item.actor.visible = visible;
-        this._slider.actor.visible = visible;
     },
 
     scroll: function(event) {
@@ -178,11 +179,17 @@ const OutputStreamSlider = new Lang.Class({
         this._portChangedId = 0;
     },
 
+    _updateSliderIcon: function() {
+        this._icon.icon_name = (this._hasHeadphones ?
+                                'audio-headphones-symbolic' :
+                                'audio-speakers-symbolic');
+    },
+
     _portChanged: function() {
         let hasHeadphones = this._findHeadphones(this._stream);
         if (hasHeadphones != this._hasHeadphones) {
             this._hasHeadphones = hasHeadphones;
-            this.emit('headphones-changed', this._hasHeadphones);
+            this._updateSliderIcon();
         }
     }
 });
@@ -191,10 +198,11 @@ const InputStreamSlider = new Lang.Class({
     Name: 'InputStreamSlider',
     Extends: StreamSlider,
 
-    _init: function(control, title) {
+    _init: function(control) {
-        this.parent(control, title);
+        this.parent(control);
         this._control.connect('stream-added', Lang.bind(this, this._maybeShowInput));
         this._control.connect('stream-removed', Lang.bind(this, this._maybeShowInput));
+        this._icon.icon_name = 'audio-input-microphone-symbolic';
     },
 
     _connectStream: function(stream) {
@@ -242,17 +250,13 @@ const VolumeMenu = new Lang.Class({
         this._control.connect('default-sink-changed', Lang.bind(this, this._readOutput));
         this._control.connect('default-source-changed', Lang.bind(this, this._readInput));
 
-        /* Translators: This is the label for audio volume */
+        this._output = new OutputStreamSlider(this._control);
-        this._output = new OutputStreamSlider(this._control, _("Volume"));
         this._output.connect('stream-updated', Lang.bind(this, function() {
             this.emit('icon-changed');
         }));
-        this._output.connect('headphones-changed', Lang.bind(this, function(stream, value) {
-            this.emit('headphones-changed', value);
-        }));
         this.addMenuItem(this._output.item);
 
-        this._input = new InputStreamSlider(this._control, _("Microphone"));
+        this._input = new InputStreamSlider(this._control);
         this.addMenuItem(this._input.item);
 
         this.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());
@@ -300,12 +304,6 @@ const Indicator = new Lang.Class({
             this.actor.visible = (icon != null);
             this.setIcon(icon);
         }));
-        this._volumeMenu.connect('headphones-changed', Lang.bind(this, function(menu, value) {
-            this._headphoneIcon.visible = value;
-        }));
-
-        this._headphoneIcon = this.addIcon(new Gio.ThemedIcon({ name: 'audio-headphones-symbolic' }));
-        this._headphoneIcon.visible = false;
 
         this.menu.addMenuItem(this._volumeMenu);