status/volume: Split indicator into output and input

Use the new privacy indicator class for the input one and move it next
to the other privacy indicators.

While on it move all privacy indicators to the front, following the
system-status-indicators mockup.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2840>

js/ui/panel.js

@@ -388,7 +388,8 @@ class QuickSettings extends PanelMenu.Button {
         }
 
         this._system = new SystemStatus.Indicator();
-        this._volume = new VolumeStatus.Indicator();
+        this._volumeOutput = new VolumeStatus.OutputIndicator();
+        this._volumeInput = new VolumeStatus.InputIndicator();
         this._brightness = new BrightnessStatus.Indicator();
         this._remoteAccess = new RemoteAccessStatus.RemoteAccessApplet();
         this._location = new LocationStatus.Indicator();
@@ -401,10 +402,11 @@ class QuickSettings extends PanelMenu.Button {
         this._unsafeMode = new UnsafeModeIndicator();
         this._backgroundApps = new BackgroundAppsStatus.Indicator();
 
-        this._indicators.add_child(this._brightness);
         this._indicators.add_child(this._remoteAccess);
-        this._indicators.add_child(this._thunderbolt);
+        this._indicators.add_child(this._volumeInput);
         this._indicators.add_child(this._location);
+        this._indicators.add_child(this._brightness);
+        this._indicators.add_child(this._thunderbolt);
         this._indicators.add_child(this._nightLight);
         if (this._network)
             this._indicators.add_child(this._network);
@@ -414,12 +416,13 @@ class QuickSettings extends PanelMenu.Button {
             this._indicators.add_child(this._bluetooth);
         this._indicators.add_child(this._rfkill);
         this._indicators.add_child(this._autoRotate);
-        this._indicators.add_child(this._volume);
+        this._indicators.add_child(this._volumeOutput);
         this._indicators.add_child(this._unsafeMode);
         this._indicators.add_child(this._system);
 
         this._addItems(this._system.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
-        this._addItems(this._volume.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
+        this._addItems(this._volumeOutput.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
+        this._addItems(this._volumeInput.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
         this._addItems(this._brightness.quickSettingsItems, N_QUICK_SETTINGS_COLUMNS);
 
         this._addItems(this._remoteAccess.quickSettingsItems);

js/ui/status/volume.js

@@ -1,5 +1,5 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Indicator */
+/* exported OutputIndicator InputIndicator */
 
 const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
@@ -407,71 +407,13 @@ class InputStreamSlider extends StreamSlider {
     }
 });
 
-var Indicator = GObject.registerClass(
+let VolumeIndicator = GObject.registerClass(
-class Indicator extends SystemIndicator {
+class VolumeIndicator extends SystemIndicator {
-    _init() {
+    constructor() {
-        super._init();
+        super();
 
-        this._primaryIndicator = this._addIndicator();
+        this._indicator = this._addIndicator();
-        this._inputIndicator = this._addIndicator();
+        this._indicator.reactive = true;
-
-        this._primaryIndicator.reactive = true;
-        this._inputIndicator.reactive = true;
-
-        this._primaryIndicator.connect('scroll-event',
-            (actor, event) => this._handleScrollEvent(this._output, event));
-        this._inputIndicator.connect('scroll-event',
-            (actor, event) => this._handleScrollEvent(this._input, event));
-
-        this._control = getMixerControl();
-        this._control.connectObject(
-            'state-changed', () => this._onControlStateChanged(),
-            'default-sink-changed', () => this._readOutput(),
-            'default-source-changed', () => this._readInput(),
-            this);
-
-        this._output = new OutputStreamSlider(this._control);
-        this._output.connect('stream-updated', () => {
-            const icon = this._output.getIcon();
-
-            if (icon)
-                this._primaryIndicator.icon_name = icon;
-            this._primaryIndicator.visible = icon !== null;
-        });
-
-        this._input = new InputStreamSlider(this._control);
-        this._input.connect('stream-updated', () => {
-            const icon = this._input.getIcon();
-
-            if (icon)
-                this._inputIndicator.icon_name = icon;
-        });
-
-        this._input.bind_property('visible',
-            this._inputIndicator, 'visible',
-            GObject.BindingFlags.SYNC_CREATE);
-
-        this.quickSettingsItems.push(this._output);
-        this.quickSettingsItems.push(this._input);
-
-        this._onControlStateChanged();
-    }
-
-    _onControlStateChanged() {
-        if (this._control.get_state() === Gvc.MixerControlState.READY) {
-            this._readInput();
-            this._readOutput();
-        } else {
-            this._primaryIndicator.hide();
-        }
-    }
-
-    _readOutput() {
-        this._output.stream = this._control.get_default_sink();
-    }
-
-    _readInput() {
-        this._input.stream = this._control.get_default_source();
     }
 
     _handleScrollEvent(item, event) {
@@ -486,3 +428,86 @@ class Indicator extends SystemIndicator {
         return result;
     }
 });
+
+var OutputIndicator = GObject.registerClass(
+class OutputIndicator extends VolumeIndicator {
+    constructor() {
+        super();
+
+        this._indicator.connect('scroll-event',
+            (actor, event) => this._handleScrollEvent(this._output, event));
+
+        this._control = getMixerControl();
+        this._control.connectObject(
+            'state-changed', () => this._onControlStateChanged(),
+            'default-sink-changed', () => this._readOutput(),
+            this);
+
+        this._output = new OutputStreamSlider(this._control);
+        this._output.connect('stream-updated', () => {
+            const icon = this._output.getIcon();
+
+            if (icon)
+                this._indicator.icon_name = icon;
+            this._indicator.visible = icon !== null;
+        });
+
+        this.quickSettingsItems.push(this._output);
+
+        this._onControlStateChanged();
+    }
+
+    _onControlStateChanged() {
+        if (this._control.get_state() === Gvc.MixerControlState.READY)
+            this._readOutput();
+        else
+            this._indicator.hide();
+    }
+
+    _readOutput() {
+        this._output.stream = this._control.get_default_sink();
+    }
+});
+
+var InputIndicator = GObject.registerClass(
+class InputIndicator extends VolumeIndicator {
+    constructor() {
+        super();
+
+        this._indicator.add_style_class_name('privacy-indicator');
+
+        this._indicator.connect('scroll-event',
+            (actor, event) => this._handleScrollEvent(this._input, event));
+
+        this._control = getMixerControl();
+        this._control.connectObject(
+            'state-changed', () => this._onControlStateChanged(),
+            'default-source-changed', () => this._readInput(),
+            this);
+
+        this._input = new InputStreamSlider(this._control);
+        this._input.connect('stream-updated', () => {
+            const icon = this._input.getIcon();
+
+            if (icon)
+                this._indicator.icon_name = icon;
+        });
+
+        this._input.bind_property('visible',
+            this._indicator, 'visible',
+            GObject.BindingFlags.SYNC_CREATE);
+
+        this.quickSettingsItems.push(this._input);
+
+        this._onControlStateChanged();
+    }
+
+    _onControlStateChanged() {
+        if (this._control.get_state() === Gvc.MixerControlState.READY)
+            this._readInput();
+    }
+
+    _readInput() {
+        this._input.stream = this._control.get_default_source();
+    }
+});