[gnome-shell] panel: Animate opacity changes of the panel corner

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

commit 0cbccf74035a7f1bd07fa97933fded683ddc5d25
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Mon Feb 11 23:05:31 2019 +0100

    panel: Animate opacity changes of the panel corner
    
    This is a requirement for fading the transparent panel in and out
    smoothly.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1397>

 data/theme/gnome-shell-sass/widgets/_panel.scss |  1 +
 js/ui/panel.js                                  | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 9c41c153b5..5734ab10fb 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -34,6 +34,7 @@ $panel_height: 2.2em;
     -panel-corner-radius: $panel_corner_radius;
     -panel-corner-background-color: $panel_bg_color;
     -panel-corner-border-width: 2px;
+    -panel-corner-opacity: 1;
   }
 
   // panel menus
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 5b0eaec434..d0f3aff1fe 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -574,10 +574,6 @@ class PanelCorner extends St.DrawingArea {
                     let pseudoClass = button.get_style_pseudo_class();
                     this.set_style_pseudo_class(pseudoClass);
                 });
-
-            // The corner doesn't support theme transitions, so override
-            // the .panel-button default
-            button.style = 'transition-duration: 0ms';
         }
     }
 
@@ -618,8 +614,18 @@ class PanelCorner extends St.DrawingArea {
         let cornerRadius = node.get_length("-panel-corner-radius");
         let borderWidth = node.get_length('-panel-corner-border-width');
 
+        const transitionDuration = node.get_transition_duration();
+        const opacity = node.get_double('-panel-corner-opacity');
+
         this.set_size(cornerRadius, borderWidth + cornerRadius);
         this.translation_y = -borderWidth;
+
+        this.remove_transition('opacity');
+        this.ease({
+            opacity: opacity * 255,
+            duration: transitionDuration,
+            mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+        });
     }
 });