quickSettings: Rename 'label' property to 'title'

We'll soon add a subtitle, so rename the label property to something
that is a bit more semantic.Add a warning when trying to set the old
'label' property.

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

data/theme/gnome-shell-sass/widgets/_quick-settings.scss

@@ -30,7 +30,7 @@
   &:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
   &:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
 
-  .quick-toggle-label { font-weight: bold; }
+  .quick-toggle-title { font-weight: bold; }
   .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
 }
 

js/ui/quickSettings.js

@@ -34,7 +34,9 @@ var QuickSettingsItem = GObject.registerClass({
 
 var QuickToggle = GObject.registerClass({
     Properties: {
-        'label': GObject.ParamSpec.override('label', St.Button),
+        'title': GObject.ParamSpec.string('title', '', '',
+            GObject.ParamFlags.READWRITE,
+            null),
         'icon-name': GObject.ParamSpec.override('icon-name', St.Button),
         'gicon': GObject.ParamSpec.object('gicon', '', '',
             GObject.ParamFlags.READWRITE,
@@ -76,21 +78,26 @@ var QuickToggle = GObject.registerClass({
             GObject.BindingFlags.SYNC_CREATE |
             GObject.BindingFlags.BIDIRECTIONAL);
 
-        this._label = new St.Label({
+        this._title = new St.Label({
-            style_class: 'quick-toggle-label',
+            style_class: 'quick-toggle-title',
             y_align: Clutter.ActorAlign.CENTER,
             x_align: Clutter.ActorAlign.START,
             x_expand: true,
         });
-        this.label_actor = this._label;
+        this.label_actor = this._title;
-        this._box.add_child(this._label);
+        this._box.add_child(this._title);
 
-        this._label.clutter_text.ellipsize = Pango.EllipsizeMode.END;
+        this._title.clutter_text.ellipsize = Pango.EllipsizeMode.END;
 
-        this.bind_property('label',
+        this.bind_property('title',
-            this._label, 'text',
+            this._title, 'text',
             GObject.BindingFlags.SYNC_CREATE);
     }
+
+    set label(label) {
+        console.warn('Trying to set label on QuickToggle. Use title instead.');
+        this.title = label;
+    }
 });
 
 var QuickMenuToggle = GObject.registerClass({

js/ui/status/autoRotate.js

@@ -11,7 +11,7 @@ class RotationToggle extends QuickToggle {
         this._systemActions = new SystemActions.getDefault();
 
         super._init({
-            label: _('Auto Rotate'),
+            title: _('Auto Rotate'),
         });
 
         this._systemActions.bind_property('can-lock-orientation',

js/ui/status/bluetooth.js

@@ -148,7 +148,7 @@ const BtClient = GObject.registerClass({
 const BluetoothToggle = GObject.registerClass(
 class BluetoothToggle extends QuickToggle {
     _init(client) {
-        super._init({label: _('Bluetooth')});
+        super._init({title: _('Bluetooth')});
 
         this._client = client;
 

js/ui/status/darkMode.js

@@ -8,7 +8,7 @@ const DarkModeToggle = GObject.registerClass(
 class DarkModeToggle extends QuickToggle {
     _init() {
         super._init({
-            label: _('Dark Style'),
+            title: _('Dark Style'),
             iconName: 'dark-mode-symbolic',
         });
 

js/ui/status/network.js

@@ -1319,8 +1319,8 @@ const NMToggle = GObject.registerClass({
         this._itemBinding.bind('icon-name',
             this, 'icon-name', GObject.BindingFlags.DEFAULT);
         this._itemBinding.bind_full('name',
-            this, 'label', GObject.BindingFlags.DEFAULT,
+            this, 'title', GObject.BindingFlags.DEFAULT,
-            (bind, source) => [true, this._transformLabel(source)],
+            (bind, source) => [true, this._transformTitle(source)],
             null);
 
         this.connect('clicked', () => this.activate());
@@ -1360,7 +1360,7 @@ const NMToggle = GObject.registerClass({
     // transform function for property binding:
     // Ignore the provided label if there are multiple active
     // items, and replace it with something like "VPN (2)"
-    _transformLabel(source) {
+    _transformTitle(source) {
         const nActive = this.checked
             ? [...this._getActiveItems()].length
             : 0;

js/ui/status/nightLight.js

@@ -17,7 +17,7 @@ const NightLightToggle = GObject.registerClass(
 class NightLightToggle extends QuickToggle {
     _init() {
         super._init({
-            label: _('Night Light'),
+            title: _('Night Light'),
             iconName: 'night-light-symbolic',
             toggleMode: true,
         });

js/ui/status/powerProfiles.js

@@ -17,17 +17,17 @@ const PowerProfilesProxy = Gio.DBusProxy.makeProxyWrapper(PowerProfilesIface);
 
 const PROFILE_PARAMS = {
     'performance': {
-        label: C_('Power profile', 'Performance'),
+        title: C_('Power profile', 'Performance'),
         iconName: 'power-profile-performance-symbolic',
     },
 
     'balanced': {
-        label: C_('Power profile', 'Balanced'),
+        title: C_('Power profile', 'Balanced'),
         iconName: 'power-profile-balanced-symbolic',
     },
 
     'power-saver': {
-        label: C_('Power profile', 'Power Saver'),
+        title: C_('Power profile', 'Power Saver'),
         iconName: 'power-profile-power-saver-symbolic',
     },
 };
@@ -83,11 +83,11 @@ class PowerProfilesToggle extends QuickMenuToggle {
             .map(p => p.Profile.unpack())
             .reverse();
         for (const profile of profiles) {
-            const {label, iconName} = PROFILE_PARAMS[profile];
+            const {title, iconName} = PROFILE_PARAMS[profile];
-            if (!label)
+            if (!title)
                 continue;
 
-            const item = new PopupMenu.PopupImageMenuItem(label, iconName);
+            const item = new PopupMenu.PopupImageMenuItem(title, iconName);
             item.connect('activate',
                 () => (this._proxy.ActiveProfile = profile));
             this._profileItems.set(profile, item);

js/ui/status/rfkill.js

@@ -93,7 +93,7 @@ const RfkillToggle = GObject.registerClass(
 class RfkillToggle extends QuickToggle {
     _init() {
         super._init({
-            label: _('Airplane Mode'),
+            title: _('Airplane Mode'),
             iconName: 'airplane-mode-symbolic',
         });
 

js/ui/status/system.js

@@ -87,7 +87,7 @@ const PowerToggle = GObject.registerClass({
         });
 
         this.set({
-            label: _('%d\u2009%%').format(this._proxy.Percentage),
+            title: _('%d\u2009%%').format(this._proxy.Percentage),
             fallback_icon_name: this._proxy.IconName,
             gicon,
         });