Js: Use new :icon-name property

Now that we have the new convenience property, apply it to all
icon-only buttons.

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

data/theme/gnome-shell-sass/widgets/_ibus-popup.scss

@@ -29,8 +29,11 @@
   .horizontal & { padding-left: $base_padding*2; }
 }
 
-.candidate-page-button { padding: $base_padding;}
+.candidate-page-button {
+  padding: $base_padding;
+
+  & StIcon { icon-size: $base_icon_size; }
+}
 
 .candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0;box-shadow: none;}
 .candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;box-shadow: none;}
-.candidate-page-button-icon { icon-size: $base_icon_size; }

data/theme/gnome-shell-sass/widgets/_looking-glass.scss

@@ -79,6 +79,8 @@
     color: $insensitive_fg_color;
     &:hover { color: lighten($insensitive_fg_color, 20%); }
     &:active { color: darken($insensitive_fg_color, 20%); }
+
+    & StIcon { icon-size: 12px; }
    }
 }
 

data/theme/gnome-shell-sass/widgets/_message-list.scss

@@ -123,6 +123,8 @@
     margin: 1px;
     &:hover {background-color: transparentize($fg_color, 0.8);}
     &:active {background-color: transparentize($fg_color, 0.9);}
+
+    & StIcon { icon-size: $base_icon_size; }
   }
 
   // body
@@ -157,6 +159,8 @@
   // fix margin for last button
   &:last-child:ltr { margin-right: $base_margin*3; }
   &:last-child:rtl { margin-left: $base_margin*3; }
+
+  & StIcon { icon-size: $base_icon_size; }
 }
 
 // album-art

js/gdm/authPrompt.js

@@ -147,7 +147,7 @@ var AuthPrompt = GObject.registerClass({
             can_focus: this._hasCancelButton,
             x_align: Clutter.ActorAlign.START,
             y_align: Clutter.ActorAlign.CENTER,
-            child: new St.Icon({ icon_name: 'go-previous-symbolic' }),
+            icon_name: 'go-previous-symbolic',
         });
         if (this._hasCancelButton)
             this.cancelButton.connect('clicked', () => this.cancel());

js/gdm/loginDialog.js

@@ -308,9 +308,9 @@ var SessionMenuButton = GObject.registerClass({
     Signals: { 'session-activated': { param_types: [GObject.TYPE_STRING] } },
 }, class SessionMenuButton extends St.Bin {
     _init() {
-        let gearIcon = new St.Icon({ icon_name: 'emblem-system-symbolic' });
         let button = new St.Button({
             style_class: 'modal-dialog-button button login-dialog-session-list-button',
+            icon_name: 'emblem-system-symbolic',
             reactive: true,
             track_hover: true,
             can_focus: true,
@@ -318,7 +318,6 @@ var SessionMenuButton = GObject.registerClass({
             accessible_role: Atk.Role.MENU,
             x_align: Clutter.ActorAlign.CENTER,
             y_align: Clutter.ActorAlign.CENTER,
-            child: gearIcon,
         });
 
         super._init({ child: button });

js/ui/appDisplay.js

@@ -2665,10 +2665,7 @@ var AppFolderDialog = GObject.registerClass({
             can_focus: true,
             x_align: Clutter.ActorAlign.END,
             y_align: Clutter.ActorAlign.CENTER,
-            child: new St.Icon({
             icon_name: 'document-edit-symbolic',
-                icon_size: 16,
-            }),
         });
 
         this._editButton.connect('notify::checked', () => {

js/ui/calendar.js

@@ -469,10 +469,10 @@ var Calendar = GObject.registerClass({
 
         this._backButton = new St.Button({
             style_class: 'calendar-change-month-back pager-button',
+            icon_name: 'pan-start-symbolic',
             accessible_name: _('Previous month'),
             can_focus: true,
         });
-        this._backButton.add_actor(new St.Icon({ icon_name: 'pan-start-symbolic' }));
         this._topBox.add(this._backButton);
         this._backButton.connect('clicked', this._onPrevMonthButtonClicked.bind(this));
 
@@ -487,10 +487,10 @@ var Calendar = GObject.registerClass({
 
         this._forwardButton = new St.Button({
             style_class: 'calendar-change-month-forward pager-button',
+            icon_name: 'pan-end-symbolic',
             accessible_name: _('Next month'),
             can_focus: true,
         });
-        this._forwardButton.add_actor(new St.Icon({ icon_name: 'pan-end-symbolic' }));
         this._topBox.add(this._forwardButton);
         this._forwardButton.connect('clicked', this._onNextMonthButtonClicked.bind(this));
 

js/ui/ibusCandidatePopup.js

@@ -59,14 +59,12 @@ var CandidateArea = GObject.registerClass({
             style_class: 'candidate-page-button candidate-page-button-previous button',
             x_expand: true,
         });
-        this._previousButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
         this._buttonBox.add_child(this._previousButton);
 
         this._nextButton = new St.Button({
             style_class: 'candidate-page-button candidate-page-button-next button',
             x_expand: true,
         });
-        this._nextButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
         this._buttonBox.add_child(this._nextButton);
 
         this.add(this._buttonBox);
@@ -104,14 +102,14 @@ var CandidateArea = GObject.registerClass({
             this.vertical = false;
             this.remove_style_class_name('vertical');
             this.add_style_class_name('horizontal');
-            this._previousButton.child.icon_name = 'go-previous-symbolic';
+            this._previousButton.icon_name = 'go-previous-symbolic';
-            this._nextButton.child.icon_name = 'go-next-symbolic';
+            this._nextButton.icon_name = 'go-next-symbolic';
         } else {                // VERTICAL || SYSTEM
             this.vertical = true;
             this.add_style_class_name('vertical');
             this.remove_style_class_name('horizontal');
-            this._previousButton.child.icon_name = 'go-up-symbolic';
+            this._previousButton.icon_name = 'go-up-symbolic';
-            this._nextButton.child.icon_name = 'go-down-symbolic';
+            this._nextButton.icon_name = 'go-down-symbolic';
         }
     }
 

js/ui/lookingGlass.js

@@ -421,8 +421,10 @@ class ObjInspector extends St.ScrollView {
             hbox.add(button);
         }
 
-        button = new St.Button({ style_class: 'window-close' });
+        button = new St.Button({
-        button.add_actor(new St.Icon({ icon_name: 'window-close-symbolic' }));
+            style_class: 'window-close',
+            icon_name: 'window-close-symbolic',
+        });
         button.connect('clicked', this.close.bind(this));
         hbox.add(button);
         if (typeof obj == typeof {}) {
@@ -884,11 +886,7 @@ var ActorLink = GObject.registerClass({
         });
 
         const inspectButton = new St.Button({
-            child: new St.Icon({
             icon_name: 'insert-object-symbolic',
-                icon_size: 12,
-                y_align: Clutter.ActorAlign.CENTER,
-            }),
             reactive: true,
             x_expand: true,
             x_align: Clutter.ActorAlign.START,
@@ -1304,9 +1302,7 @@ class LookingGlass extends St.BoxLayout {
         this.add_actor(toolbar);
         const inspectButton = new St.Button({
             style_class: 'lg-toolbar-button',
-            child: new St.Icon({
             icon_name: 'find-location-symbolic',
-            }),
         });
         toolbar.add_actor(inspectButton);
         inspectButton.connect('clicked', () => {
@@ -1324,9 +1320,7 @@ class LookingGlass extends St.BoxLayout {
 
         const gcButton = new St.Button({
             style_class: 'lg-toolbar-button',
-            child: new St.Icon({
             icon_name: 'user-trash-full-symbolic',
-            }),
         });
         toolbar.add_actor(gcButton);
         gcButton.connect('clicked', () => {

js/ui/messageList.js

@@ -362,14 +362,11 @@ var Message = GObject.registerClass({
         });
         titleBox.add_actor(this._secondaryBin);
 
-        const closeIcon = new St.Icon({
-            icon_name: 'window-close-symbolic',
-            icon_size: 16,
-        });
         this._closeButton = new St.Button({
             style_class: 'message-close-button',
-            child: closeIcon, opacity: 0,
+            icon_name: 'window-close-symbolic',
             y_align: Clutter.ActorAlign.CENTER,
+            opacity: 0,
         });
         titleBox.add_actor(this._closeButton);
 
@@ -438,10 +435,9 @@ var Message = GObject.registerClass({
     }
 
     addMediaControl(iconName, callback) {
-        let icon = new St.Icon({ icon_name: iconName, icon_size: 16 });
         const button = new St.Button({
             style_class: 'message-media-control',
-            child: icon,
+            iconName,
         });
         button.connect('clicked', callback);
         this._mediaControls.add_actor(button);

js/ui/mpris.js

@@ -37,7 +37,7 @@ class MediaMessage extends MessageList.Message {
                 this._player.previous();
             });
 
-        this._playPauseButton = this.addMediaControl(null,
+        this._playPauseButton = this.addMediaControl('',
             () => {
                 this._player.playPause();
             });

js/ui/screenshot.js

@@ -1091,7 +1091,7 @@ var ScreenshotUI = GObject.registerClass({
 
         this._closeButton = new St.Button({
             style_class: 'screenshot-ui-close-button',
-            child: new St.Icon({ icon_name: 'preview-close-symbolic' }),
+            icon_name: 'preview-close-symbolic',
         });
         this._closeButton.add_constraint(new Clutter.BindConstraint({
             source: this._panel,
@@ -1203,19 +1203,19 @@ var ScreenshotUI = GObject.registerClass({
 
         this._shotButton = new St.Button({
             style_class: 'screenshot-ui-shot-cast-button',
+            icon_name: 'camera-photo-symbolic',
             checked: true,
         });
-        this._shotButton.set_child(new St.Icon({ icon_name: 'camera-photo-symbolic' }));
         this._shotButton.connect('notify::checked',
             this._onShotButtonToggled.bind(this));
         this._shotCastContainer.add_child(this._shotButton);
 
         this._castButton = new St.Button({
             style_class: 'screenshot-ui-shot-cast-button',
+            icon_name: 'camera-web-symbolic',
             toggle_mode: true,
             visible: Config.HAVE_RECORDER,
         });
-        this._castButton.set_child(new St.Icon({ icon_name: 'camera-web-symbolic' }));
         this._castButton.connect('notify::checked',
             this._onCastButtonToggled.bind(this));
         this._shotCastContainer.add_child(this._castButton);
@@ -1254,9 +1254,9 @@ var ScreenshotUI = GObject.registerClass({
 
         this._showPointerButton = new St.Button({
             style_class: 'screenshot-ui-show-pointer-button',
+            icon_name: 'screenshot-ui-show-pointer-symbolic',
             toggle_mode: true,
         });
-        this._showPointerButton.set_child(new St.Icon({ icon_name: 'screenshot-ui-show-pointer-symbolic' }));
         this._showPointerButtonContainer.add_child(this._showPointerButton);
 
         this.add_child(new Tooltip(this._showPointerButton, {

js/ui/unlockDialog.js

@@ -566,7 +566,7 @@ var UnlockDialog = GObject.registerClass({
             opacity: 0,
             x_align: Clutter.ActorAlign.END,
             y_align: Clutter.ActorAlign.END,
-            child: new St.Icon({ icon_name: 'system-users-symbolic' }),
+            icon_name: 'system-users-symbolic',
         });
         this._otherUserButton.set_pivot_point(0.5, 0.5);
         this._otherUserButton.connect('clicked', this._otherUserClicked.bind(this));

js/ui/windowPreview.js

@@ -188,7 +188,7 @@ var WindowPreview = GObject.registerClass({
         this._closeButton = new St.Button({
             visible: false,
             style_class: 'window-close',
-            child: new St.Icon({ icon_name: 'preview-close-symbolic' }),
+            icon_name: 'preview-close-symbolic',
         });
         this._closeButton.add_constraint(new Clutter.BindConstraint({
             source: windowContainer,