[gnome-shell/wip/snwh/lg-papercuts: 8/9] lookingGlass: Turn toolbar icons into actual buttons

[Florian Müllner <fmuellner src gnome org>]

commit ad395d1c7ef25647566d192aaf453e757c3f0842
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Feb 4 17:42:27 2022 +0100

    lookingGlass: Turn toolbar icons into actual buttons
    
    Yes, we can use reactive icons with a `button-press-event` handler,
    but really, there's a standard control for that kind of behavior ...

 js/ui/lookingGlass.js | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)
---
diff --git a/js/ui/lookingGlass.js b/js/ui/lookingGlass.js
index ed217a4dbb..acf4758cbd 100644
--- a/js/ui/lookingGlass.js
+++ b/js/ui/lookingGlass.js
@@ -1264,11 +1264,15 @@ class LookingGlass extends St.BoxLayout {
 
         let toolbar = new St.BoxLayout({ name: 'Toolbar' });
         this.add_actor(toolbar);
-        let inspectIcon = new St.Icon({ icon_name: 'find-location-symbolic',
-                                        icon_size: 24 });
-        toolbar.add_actor(inspectIcon);
-        inspectIcon.reactive = true;
-        inspectIcon.connect('button-press-event', () => {
+        const inspectButton = new St.Button({
+            style_class: 'lg-toolbar-button',
+            child: new St.Icon({
+                icon_name: 'find-location-symbolic',
+                icon_size: 24,
+            }),
+        });
+        toolbar.add_actor(inspectButton);
+        inspectButton.connect('clicked', () => {
             let inspector = new Inspector(this);
             inspector.connect('target', (i, target, stageX, stageY) => {
                 this._pushResult('inspect(%d, %d)'.format(Math.round(stageX), Math.round(stageY)), target);
@@ -1281,21 +1285,25 @@ class LookingGlass extends St.BoxLayout {
             return Clutter.EVENT_STOP;
         });
 
-        let gcIcon = new St.Icon({ icon_name: 'user-trash-full-symbolic',
-                                   icon_size: 24 });
-        toolbar.add_actor(gcIcon);
-        gcIcon.reactive = true;
-        gcIcon.connect('button-press-event', () => {
-            gcIcon.icon_name = 'user-trash-symbolic';
+        const gcButton = new St.Button({
+            style_class: 'lg-toolbar-button',
+            child: new St.Icon({
+                icon_name: 'user-trash-full-symbolic',
+                icon_size: 24,
+            }),
+        });
+        toolbar.add_actor(gcButton);
+        gcButton.connect('clicked', () => {
+            gcButton.child.icon_name = 'user-trash-symbolic';
             System.gc();
             this._timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 500, () => {
-                gcIcon.icon_name = 'user-trash-full-symbolic';
+                gcButton.child.icon_name = 'user-trash-full-symbolic';
                 this._timeoutId = 0;
                 return GLib.SOURCE_REMOVE;
             });
             GLib.Source.set_name_by_id(
                 this._timeoutId,
-                '[gnome-shell] gcIcon.icon_name = \'user-trash-full-symbolic\''
+                '[gnome-shell] gcButton.child.icon_name = \'user-trash-full-symbolic\''
             );
             return Clutter.EVENT_PROPAGATE;
         });