[gnome-shell] screenshot: Move close button to the panel

[Marge Bot <marge-bot src gnome org>]

commit 6765fac76aaac288e1ad6d2e9775a292492cf038
Author: Ivan Molodetskikh <yalterz gmail com>
Date:   Wed Feb 2 20:22:20 2022 +0300

    screenshot: Move close button to the panel
    
    CSS and JS adapted from the Overview window close buttons, but with some
    style tweaks requested by the designers.
    
    Since the screenshot UI is long-lived (it's created once at startup,
    rather than every time it's opened), we need to refresh the close button
    position, as it can change at runtime. Subscribing to preference changes
    seems to be skipped for bindings generation in Mutter, but simply
    refreshing upon opening the UI should do the job.
    
    Closes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/4997
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2147>

 .../gnome-shell-sass/widgets/_screenshot.scss      | 25 ++++++++-----
 js/ui/screenshot.js                                | 41 ++++++++++++++++++----
 2 files changed, 52 insertions(+), 14 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss 
b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 870333edc2..1113606ebc 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -28,17 +28,26 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-close-button {
   background-color: $osd_bg_color;
+  color: $osd_fg_color;
   border-radius: 99px;
-  width: 64px;
-  height: 64px;
-  margin: 64px;
+  padding: 6px;
+  height: 30px;
+  width: 30px;
+  box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
+  margin-top: 8px;
 
-  &:hover, &:focus { background-color: $hover_bg_color; }
-  &:active { background-color: $active_bg_color; }
-  &:checked { background-color: darken($osd_bg_color, 5%); }
+  &.left { margin-left: 8px; }
+  &.right { margin-right: 8px; }
 
-  StIcon {
-    icon-size: $base_icon_size * 2;
+  & StIcon { icon-size: 24px; }
+
+  &:hover {
+    background-color: lighten($osd_bg_color, 15%);
+  }
+
+  &:active {
+    color: transparentize($osd_fg_color, 0.2);
+    background-color: darken($osd_bg_color, 5%);
   }
 }
 
diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index fc3334fb73..544513fec8 100644
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported ScreenshotService, ScreenshotUI, showScreenshotUI */
 
-const { Clutter, Cogl, Gio, GObject, GLib, Gtk, Meta, Shell, St } = imports.gi;
+const { Clutter, Cogl, Gio, GObject, GLib, Graphene, Gtk, Meta, Shell, St } = imports.gi;
 
 const GrabHelper = imports.ui.grabHelper;
 const Layout = imports.ui.layout;
@@ -1089,12 +1089,24 @@ var ScreenshotUI = GObject.registerClass({
 
         this._closeButton = new St.Button({
             style_class: 'screenshot-ui-close-button',
-            x_align: Clutter.ActorAlign.END,
-            y_align: Clutter.ActorAlign.START,
-            x_expand: true,
-            y_expand: true,
+            child: new St.Icon({ icon_name: 'preview-close-symbolic' }),
         });
-        this._closeButton.set_child(new St.Icon({ icon_name: 'window-close-symbolic' }));
+        this._closeButton.add_constraint(new Clutter.BindConstraint({
+            source: this._panel,
+            coordinate: Clutter.BindCoordinate.POSITION,
+        }));
+        this._closeButton.add_constraint(new Clutter.AlignConstraint({
+            source: this._panel,
+            align_axis: Clutter.AlignAxis.Y_AXIS,
+            pivot_point: new Graphene.Point({ x: -1, y: 0.5 }),
+            factor: 0,
+        }));
+        this._closeButtonXAlignConstraint = new Clutter.AlignConstraint({
+            source: this._panel,
+            align_axis: Clutter.AlignAxis.X_AXIS,
+            pivot_point: new Graphene.Point({ x: 0.5, y: -1 }),
+        });
+        this._closeButton.add_constraint(this._closeButtonXAlignConstraint);
         this._closeButton.connect('clicked', () => this.close());
         this._primaryMonitorBin.add_child(this._closeButton);
 
@@ -1281,6 +1293,21 @@ var ScreenshotUI = GObject.registerClass({
         );
     }
 
+    _refreshButtonLayout() {
+        const buttonLayout = Meta.prefs_get_button_layout();
+
+        this._closeButton.remove_style_class_name('left');
+        this._closeButton.remove_style_class_name('right');
+
+        if (buttonLayout.left_buttons.includes(Meta.ButtonFunction.CLOSE)) {
+            this._closeButton.add_style_class_name('left');
+            this._closeButtonXAlignConstraint.factor = 0;
+        } else {
+            this._closeButton.add_style_class_name('right');
+            this._closeButtonXAlignConstraint.factor = 1;
+        }
+    }
+
     _rebuildMonitorBins() {
         for (const bin of this._monitorBins)
             bin.destroy();
@@ -1429,6 +1456,8 @@ var ScreenshotUI = GObject.registerClass({
         if (!grabResult)
             return;
 
+        this._refreshButtonLayout();
+
         this.remove_all_transitions();
         this.visible = true;
         this.ease({