[gnome-shell] Draw a ripple when the hot corner is hit

[Owen Taylor <otaylor src gnome org>]

commit caaa543385489f4e590a92083496fa357d2a2354
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Wed Jan 13 21:48:12 2010 -0500

    Draw a ripple when the hot corner is hit
    
    Animate an expanding ripple from the hot corner using multiple
    scaling copies of a PNG of a single ripple. The idea here is to
    give the user a clue as to what happened.
    
    Based on initial version implemented live at MIT IAP GNOME Shell
    intro session; thanks to all the attendees for coming!
    
    https://bugzilla.gnome.org/show_bug.cgi?id=609135

 data/Makefile.am             |    1 +
 data/theme/corner-ripple.png |  Bin 0 -> 2493 bytes
 data/theme/gnome-shell.css   |    5 +++++
 js/ui/panel.js               |   36 ++++++++++++++++++++++++++++++++++++
 4 files changed, 42 insertions(+), 0 deletions(-)
---
diff --git a/data/Makefile.am b/data/Makefile.am
index e575bd1..189f0e6 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -22,6 +22,7 @@ dist_theme_DATA =				\
 	theme/add-workspace.svg			\
 	theme/close-window.svg			\
 	theme/close.svg                 \
+	theme/corner-ripple.png			\
 	theme/gnome-shell.css			\
 	theme/mosaic-view-active.svg          \
 	theme/mosaic-view.svg          \
diff --git a/data/theme/corner-ripple.png b/data/theme/corner-ripple.png
new file mode 100644
index 0000000..326ecaa
Binary files /dev/null and b/data/theme/corner-ripple.png differ
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 2657f14..65f0f38 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -631,3 +631,8 @@ StTooltip {
     background: rgba(255,255,255,0.33);
 }
 
+.ripple-box {
+    width: 52px;
+    height: 52px;
+    background-image: url("corner-ripple.png");
+}
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 24e9704..ac36c09 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -569,11 +569,47 @@ Panel.prototype = {
         }
     },
 
+    _addRipple : function(delay, time, startScale, startOpacity, finalScale, finalOpacity) {
+        // We draw a ripple by using a source image and animating it scaling
+        // outwards and fading away. We want the ripples to move linearly
+        // or it looks unrealistic, but if the opacity of the ripple goes
+        // linearly to zero it fades away too quickly, so we use Tweener's
+        // 'onUpdate' to give a non-linear curve to the fade-away and make
+        // it more visible in the middle section.
+
+        let [x, y] = this._hotCorner.get_transformed_position();
+        let ripple = new St.BoxLayout({ style_class: 'ripple-box',
+                                        opacity: 255 * Math.sqrt(startOpacity),
+                                        scale_x: startScale,
+                                        scale_y: startScale,
+                                        x: x,
+                                        y: y });
+        ripple._opacity =  startOpacity;
+        Tweener.addTween(ripple, { _opacity: finalOpacity,
+                                   scale_x: finalScale,
+                                   scale_y: finalScale,
+                                   delay: delay,
+                                   time: time,
+                                   transition: 'linear',
+                                   onUpdate: function() { ripple.opacity = 255 * Math.sqrt(ripple._opacity); },
+                                   onComplete: function() { ripple.destroy(); } });
+        global.stage.add_actor(ripple);
+    },
+
     _onHotCornerEntered : function() {
         if (!this._hotCornerEntered) {
             this._hotCornerEntered = true;
             if (!Main.overview.animationInProgress) {
                 this._hotCornerActivationTime = Date.now() / 1000;
+
+                // Show three concentric ripples expanding outwards; the exact
+                // parameters were found by trial and error, so don't look
+                // for them to make perfect sense mathematically
+
+                //              delay  time  scale opacity => scale opacity
+                this._addRipple(0.0,   0.83,  0.25,  1.0,    1.5,  0.0);
+                this._addRipple(0.05,  1.0,   0.0,   0.7,    1.25, 0.0);
+                this._addRipple(0.35,  1.0,   0.0,   0.3,    1,    0.0);
                 Main.overview.toggle();
             }
         }