[gnome-shell] screenshot: Don't pick up rubberband style from GTK

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

commit a5c75ff58b8510b92b325d136b8bd67e1b4174f6
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Apr 4 16:03:54 2019 +0200

    screenshot: Don't pick up rubberband style from GTK
    
    Selecting a screen area for a screenshot isn't the same as selecting
    items in an icon view, so there's no strong rationale for picking
    up the style from GTK. We stopped doing that for other elements like
    tile previews long ago, so just use our own style here too.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/481

 data/theme/gnome-shell-sass/_common.scss |  6 ++++++
 js/ui/screenshot.js                      | 32 ++++++--------------------------
 2 files changed, 12 insertions(+), 26 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index c7485aefd..835d44b55 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1142,6 +1142,12 @@ StScrollBar {
 
 .ripple-box:rtl { border-radius: 0 0 0 52px; } // just a simple change to the border radius position
 
+// Rubberband for select-area screenshots
+.select-area-rubberband {
+  background-color: transparentize($selected_bg_color,0.7);
+  border: 1px solid $selected_bg_color;
+}
+
 // not really top bar only
 .popup-menu-arrow { icon-size: 1.09em; }
 .popup-menu-icon { icon-size: 1.09em; }
diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index 926153514..c6896ff9b 100644
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -1,6 +1,6 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
-const { Clutter, Gio, GLib, Gtk, Meta, Shell, St } = imports.gi;
+const { Clutter, Gio, GLib, Meta, Shell, St } = imports.gi;
 const Signals = imports.signals;
 
 const GrabHelper = imports.ui.grabHelper;
@@ -227,8 +227,6 @@ var SelectArea = class {
         this._lastY = 0;
         this._result = null;
 
-        this._initRubberbandColors();
-
         this._group = new St.Widget({ visible: false,
                                       reactive: true,
                                       x: 0,
@@ -248,10 +246,10 @@ var SelectArea = class {
                                                       coordinate: Clutter.BindCoordinate.ALL });
         this._group.add_constraint(constraint);
 
-        this._rubberband = new Clutter.Rectangle({ color: this._background,
-                                                   has_border: true,
-                                                   border_width: 1,
-                                                   border_color: this._border });
+        this._rubberband = new St.Widget({
+            style_class: 'select-area-rubberband',
+            visible: false
+        });
         this._group.add_actor(this._rubberband);
     }
 
@@ -265,25 +263,6 @@ var SelectArea = class {
         this._group.visible = true;
     }
 
-    _initRubberbandColors() {
-        function colorFromRGBA(rgba) {
-            return new Clutter.Color({ red: rgba.red * 255,
-                                       green: rgba.green * 255,
-                                       blue: rgba.blue * 255,
-                                       alpha: rgba.alpha * 255 });
-        }
-
-        let path = new Gtk.WidgetPath();
-        path.append_type(Gtk.IconView);
-
-        let context = new Gtk.StyleContext();
-        context.set_path(path);
-        context.add_class('rubberband');
-
-        this._background = colorFromRGBA(context.get_background_color(Gtk.StateFlags.NORMAL));
-        this._border = colorFromRGBA(context.get_border_color(Gtk.StateFlags.NORMAL));
-    }
-
     _getGeometry() {
         return { x: Math.min(this._startX, this._lastX),
                  y: Math.min(this._startY, this._lastY),
@@ -302,6 +281,7 @@ var SelectArea = class {
 
         this._rubberband.set_position(geometry.x, geometry.y);
         this._rubberband.set_size(geometry.width, geometry.height);
+        this._rubberband.show();
 
         return Clutter.EVENT_PROPAGATE;
     }