Merge lp:~mterry/unity-greeter/scrolling-update into lp:unity-greeter

[Michael Terry]

This branch updates the scrolling animation a bit to more closely match the video in bug 844050.

Specifically, the following bits are done when switching users:
1) The current password box disappears (no animation)
2) The current username and gear scroll up or down and off the highlight box
3) The next username and gear scroll up or down into the highlight box to rest where they should
4) the new password box appears (no animation)

There are bits in the bug that aren't done in this branch. But this was a good checkpoint, so I thought no harm in having this reviewed/merged.

Specifically, the things that aren't done:
5) When first appearing, the greeter scrolls from the top of the list to the default user
6) Final speed and tweening adjustments

There are some slight rough edges because (6) isn't done. Notably, if your are scrolling past multiple users (like you clicked at the top of the list, it looks a little odd because each name that scrolls by changes speed as it passes through the box). This isn't worse than the current code really, it just isn't perfect yet.

Notable things that this branch does:
 * Make more sections of code aware of when we are scrolling
 * Consolidate some entry drawing code and have smaller code branches for in-box drawing
 * Slowed speed a tad from 5.0 to 4.0. 5.0 made things move too fast on the screen I thought.

[lp:~mterry/unity-greeter/scrolling-update]

241. By Michael Terry on 2012-01-11

make animation match Unity speed/easing

242. By Michael Terry on 2012-01-11

fix race condition when starting and showing old background

243. By Michael Terry on 2012-01-11

scroll to first user after we are realized

244. By Michael Terry on 2012-01-11

remove some unused code

[Michael Terry (mterry)]

Just pushed an update that fixes (5) and (6).

[lp:~mterry/unity-greeter/scrolling-update]

245. By Michael Terry on 2012-01-11

merge from trunk

246. By Michael Terry on 2012-01-11

start scrolling before we try to show the prompt so that the entry box hides during scrolling again

=== modified file 'src/Makefile.am'
--- src/Makefile.am	2012-01-10 09:31:10 +0000
+++ src/Makefile.am	2012-01-11 13:58:24 +0000
@@ -6,6 +6,7 @@
 	config.vapi \
 	fixes.vapi \
 	indicator.vapi \
+	animate-timer.vala \
 	settings-daemon.vala \
 	unity-greeter.vala \
 	user-list.vala

=== added file 'src/animate-timer.vala'
--- src/animate-timer.vala	1970-01-01 00:00:00 +0000
+++ src/animate-timer.vala	2012-01-11 13:58:24 +0000
@@ -0,0 +1,112 @@
+/* -*- Mode: Vala; indent-tabs-mode: nil; tab-width: 4 -*-
+ *
+ * Copyright (C) 2011,2012 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authors: Robert Ancell <[e-mail]>
+ *          Michael Terry <[e-mail]>
+ */
+
+private class AnimateTimer : Object
+{
+    public enum Speed
+    {
+        INSTANT, /* Good for animations that don't convey any information */
+        FAST, /* Good for animations that convey duplicated information (e.g. scrolling) */
+        NORMAL,
+        SLOW, /* Good for animations that convey information that is only presented in the animation */
+    }
+
+    public Speed speed {get; construct;}
+    public bool is_running { get { return timeout != 0; } }
+
+    /* progress is from 0.0 to 1.0 */
+    public signal void animate (double progress);
+
+    public AnimateTimer (Speed speed)
+    {
+        Object (speed: speed);
+    }
+
+    public void reset ()
+    {
+        stop ();
+        timeout = Timeout.add (16, animate_cb);
+
+        start_time = GLib.get_monotonic_time ();
+
+        /* The following are the same intervals that Unity uses */
+        switch (speed)
+        {
+        default:
+        case Speed.INSTANT:
+            length =  150 * TimeSpan.MILLISECOND;
+            break;
+        case Speed.FAST:
+            length =  250 * TimeSpan.MILLISECOND;
+            break;
+        case Speed.NORMAL:
+            length =  500 * TimeSpan.MILLISECOND;
+            break;
+        case Speed.SLOW:
+            length = 1000 * TimeSpan.MILLISECOND;
+            break;
+        }
+    }
+
+    public void stop ()
+    {
+        if (timeout != 0)
+            Source.remove (timeout);
+        timeout = 0;
+    }
+
+    private uint timeout = 0;
+    private TimeSpan start_time = 0;
+    private TimeSpan length = 0;
+
+    private bool animate_cb ()
+    {
+        var time = normalize_time ();
+        var progress = normalize_progress (time);
+
+        animate (progress);
+
+        if (progress >= 1.0)
+        {
+            timeout = 0;
+            return false;
+        }
+        else
+            return true;
+    }
+
+    /* Returns 0.0 to 1.0 where 1.0 is at or past end_time */
+    private double normalize_time ()
+    {
+        var now = GLib.get_monotonic_time ();
+        return (((double)(now - start_time)) / length).clamp (0.0, 1.0);
+    }
+
+    /* Returns 0.0 to 1.0 where 1.0 is done.
+       time is normalized time from 0.0 to 1.0. */
+    private double normalize_progress (double time)
+    {
+        /* Use a sine wave function similar to what Unity uses.  They call it
+           'easing' and is designed to make the animation start and end slower
+           than in the middle. */
+        return ((-1 * Math.cos (Math.PI * time) + 1) / 2).clamp (0.0, 1.0);
+    }
+}
+

=== modified file 'src/user-list.vala'
--- src/user-list.vala	2012-01-10 09:31:10 +0000
+++ src/user-list.vala	2012-01-11 13:58:24 +0000
@@ -25,43 +25,6 @@
     return (int) (size % grid_size) / 2;
 }
 
-private class AnimateTimer
-{
-    private Timer timer;
-    private uint timeout = 0;
-    private double last_timestep;
-
-    public signal void animate (double timestep);
-
-    private bool animate_cb ()
-    {
-        var t = timer.elapsed ();
-        var timestep = t - last_timestep;
-        last_timestep = t;
-
-        animate (timestep);
-
-        return true;
-    }
-    
-    public bool is_running { get { return timeout != 0; } }
-
-    public void reset ()
-    {
-        stop ();
-        last_timestep = 0.0;
-        timer = new Timer ();
-        timeout = Timeout.add (10, animate_cb);
-    }
-    
-    public void stop ()
-    {
-        if (timeout != 0)
-            Source.remove (timeout);
-        timeout = 0;
-    }
-}
-
 private class UserEntry
 {
     /* Unique name for this entry */
@@ -298,6 +261,7 @@
     private UserEntry? selected_entry = null;
     
     private double scroll_target_location;
+    private double scroll_start_location;
     private double scroll_location;
     private double scroll_direction;
 
@@ -324,8 +288,10 @@
 
     private Gtk.Entry prompt_entry;
     private Gtk.Button login_button;
+    private Gtk.Widget prompt_widget_to_show;
     private Gtk.Button options_button;
     private Gtk.Menu options_menu;
+    private Gdk.Pixbuf options_pixbuf;
     unowned GLib.SList<SessionMenuItem> session_group = null;
 
     private bool complete = false;
@@ -432,14 +398,22 @@
         login_button.clicked.connect (login_button_clicked_cb);
         add (login_button);
 
+        try {
+            options_pixbuf = new Gdk.Pixbuf.from_file (Path.build_filename (Config.PKGDATADIR, "cog.png", null));
+        }
+        catch (Error e) {
+            debug ("Error loading cog image: %s", e.message);
+        }
+
         options_button = new Gtk.Button ();
         options_button.focus_on_click = false;
         options_button.get_accessible ().set_name (_("Session Options"));
-        var image = new Gtk.Image.from_file (Path.build_filename (Config.PKGDATADIR, "cog.png", null));
+        var image = new Gtk.Image.from_pixbuf (options_pixbuf);
         image.show ();
         options_button.relief = Gtk.ReliefStyle.NONE;
         options_button.add (image);
         options_button.clicked.connect (options_button_clicked_cb);
+        options_button.show ();
         add (options_button);
 
         options_menu = new Gtk.Menu ();
@@ -449,9 +423,9 @@
 
         backgrounds = new HashTable<string?, Background> (str_hash, str_equal);
 
-        scroll_timer = new AnimateTimer ();
+        scroll_timer = new AnimateTimer (AnimateTimer.Speed.FAST);
         scroll_timer.animate.connect (scroll_animate_cb);
-        background_timer = new AnimateTimer ();
+        background_timer = new AnimateTimer (AnimateTimer.Speed.INSTANT);
         background_timer.animate.connect (background_animate_cb);
 
         setup_indicators ();
@@ -662,11 +636,15 @@
     public void show_prompt (string text, bool secret = false)
     {
         login_button.hide ();
+        prompt_entry.hide ();
         message = text;
         prompt_entry.text = "";
         prompt_entry.sensitive = true;
-        prompt_entry.show ();
         prompt_entry.visibility = !secret;
+        if (scroll_timer.is_running)
+            prompt_widget_to_show = prompt_entry;
+        else
+            prompt_entry.show ();
         var accessible = prompt_entry.get_accessible ();
         if (selected_entry.name != null)
             accessible.set_name (_("Enter password for %s").printf (selected_entry.layout.get_text ()));
@@ -684,8 +662,12 @@
     public void show_authenticated ()
     {
         prompt_entry.hide ();
+        login_button.hide ();
         message = "";
-        login_button.show ();
+        if (scroll_timer.is_running)
+          prompt_widget_to_show = login_button;
+        else
+          login_button.show();
         var accessible = login_button.get_accessible ();
         accessible.set_name (_("Login as %s").printf (selected_entry.layout.get_text ()));
         login_button.grab_focus ();
@@ -879,61 +861,43 @@
         options_menu.popup (null, null, options_menu_position_cb, 0, Gtk.get_current_event_time ());
     }
 
-    private void scroll_animate_cb (double timestep)
+    private void scroll_animate_cb (double progress)
     {
-        if (scroll_location != scroll_target_location)
-        {
-            var speed = 5.0;
-
-            var delta = timestep * speed;
-
-            /* Total height of list */
-            var h = (double) entries.length ();
-
-            var distance = scroll_target_location - scroll_location;
-            if (scroll_direction < 0.0)
-                distance = -distance;
-            if (distance < 0)
-                distance += h;
-
-            /* If close enough finish moving */
-            if (distance <= delta)
-                scroll_location = scroll_target_location;
-            else
-            {
-                scroll_location += delta * scroll_direction;
-
-                /* Wrap around */
-                if (scroll_location > h)
-                    scroll_location -= h;
-                if (scroll_location < 0)
-                    scroll_location += h;
-             }
-
-             redraw_user_list ();
-        }
-
-        /* Stop when we get there */        
-        if (scroll_location == scroll_target_location)
-            scroll_timer.stop ();
+        /* Total height of list */
+        var h = entries.length ();
+
+        /* How far we have to go in total, either up or down with wrapping */
+        var distance = scroll_target_location - scroll_start_location;
+        if (scroll_direction * distance < 0)
+            distance += scroll_direction * h;
+
+        /* How far we've gone so far */
+        distance *= progress;
+
+        /* Go that far and wrap around */
+        scroll_location = scroll_start_location + distance;
+        if (scroll_location > h)
+            scroll_location -= h;
+        if (scroll_location < 0)
+            scroll_location += h;
+
+        /* And finally, redraw */
+        redraw_user_list ();
+
+        /* Stop when we get there */
+        if (progress >= 1.0)
+            finished_animating ();
     }
 
-    private void background_animate_cb (double timestep)
+    private void background_animate_cb (double progress)
     {
-        var speed = 5.0;
-
-        background_alpha += timestep * speed;
-        if (background_alpha > 1.0)
-            background_alpha = 1.0;
+        background_alpha = progress;
 
         redraw_background ();
 
         /* Stop when we get there */
-        if (background_alpha == 1.0)
-        {
+        if (background_alpha >= 1.0)
             old_background = background;
-            background_timer.stop ();
-        }
     }
     
     private bool change_background_timeout_cb ()
@@ -970,14 +934,33 @@
             change_background_timeout_cb ();
     }
 
+    private void finished_animating ()
+    {
+        if (prompt_widget_to_show != null) {
+          prompt_widget_to_show.show ();
+          prompt_widget_to_show = null;
+        }
+        options_button.show ();
+    }
+
     private void select_entry (UserEntry entry, double direction)
     {
+        if (get_realized ())
+        {
+            scroll_target_location = entries.index (entry);
+            scroll_start_location = scroll_location;
+            scroll_direction = direction;
+            if (scroll_location != scroll_target_location)
+                scroll_timer.reset ();
+        }
+
         if (selected_entry != entry)
         {
             selected_entry = entry;
 
             prompt_entry.hide ();
             login_button.hide ();
+            options_button.hide ();
 
             if (get_realized ())
             {
@@ -985,15 +968,6 @@
                 user_selected (selected_entry.name);
             }
         }
-
-        scroll_target_location = entries.index (selected_entry);
-        scroll_direction = direction;
-        /* Move straight there if not drawn yet */
-        if (frame_count == 0)
-            scroll_location = scroll_target_location;
-
-        if (scroll_location != scroll_target_location && !scroll_timer.is_running)
-            scroll_timer.reset ();
     }
 
     public override void add (Gtk.Widget widget)
@@ -1023,6 +997,8 @@
 
         set_realized (true);
 
+        select_entry (selected_entry, 1);
+
         Gtk.Allocation allocation;
         get_allocation (out allocation);
 
@@ -1093,7 +1069,6 @@
         child_allocation.width = grid_size;
         child_allocation.height = grid_size;
         options_button.size_allocate (child_allocation);
-        options_button.show ();
 
         /* Regenerate backgrounds */
         if (resized)
@@ -1104,11 +1079,11 @@
         }
     }
 
-    private void draw_entry (Cairo.Context c, UserEntry entry, double alpha = 0.5)
+    private void draw_entry (Cairo.Context c, UserEntry entry, double alpha = 0.5, bool in_box = false)
     {
         c.save ();
         
-        if (high_contrast_item.active)
+        if (high_contrast_item.active || in_box)
             alpha = 1.0;
 
         if (entry.is_active)
@@ -1124,11 +1099,17 @@
         int w, h;
         entry.layout.get_pixel_size (out w, out h);
 
-        var bw = (box_width - 0.5) * grid_size; 
+        var bw = (box_width - (in_box ? 1.1 : 0.5)) * grid_size;
         if (w > bw)
         {
             var mask = new Cairo.Pattern.linear (0, 0, bw, 0);
-            mask.add_color_stop_rgba (1.0 - 64.0 / bw, 1.0, 1.0, 1.0, alpha);
+            if (in_box)
+            {
+                mask.add_color_stop_rgba (1.0 - 27.0 / bw, 1.0, 1.0, 1.0, 1.0);
+                mask.add_color_stop_rgba (1.0 - 21.6 / bw, 1.0, 1.0, 1.0, 0.5);
+            }
+            else
+                mask.add_color_stop_rgba (1.0 - 64.0 / bw, 1.0, 1.0, 1.0, alpha);
             mask.add_color_stop_rgba (1.0, 1.0, 1.0, 1.0, 0.0);
             c.set_source (mask);
         }
@@ -1140,6 +1121,17 @@
         Pango.cairo_show_layout (c, entry.layout);
 
         c.restore ();
+
+        /* Now draw options button if we're animating in the box */
+        if (in_box && scroll_timer.is_running && options_pixbuf != null) {
+            c.save ();
+            var xpadding = (grid_size - options_pixbuf.width) / 2;
+            var ypadding = (grid_size - options_pixbuf.height) / 2;
+            c.translate (box_width * grid_size - grid_size - grid_size / 4 + xpadding, grid_size / 4 - ypadding);
+            Gdk.cairo_set_source_pixbuf (c, options_pixbuf, 0, 0);
+            c.paint ();
+            c.restore ();
+        }
     }
 
     private void background_loaded_cb (Background b)
@@ -1188,12 +1180,15 @@
             background_timer.reset ();
 
         c.set_source_rgb (0x2C, 0x00, 0x1E);
+        var old_not_loaded = false;
 
         /* Draw old background */
         if (background_alpha < 1.0)
         {
             if (old_background.load ())
                 c.set_source (old_background.pattern);
+            else
+                old_not_loaded = true;
             c.paint ();
         }
 
@@ -1201,11 +1196,12 @@
         if (background.load () && background_alpha > 0.0)
         {
             c.set_source (background.pattern);
-            c.paint_with_alpha (background_alpha);
+            c.paint_with_alpha (old_not_loaded ? 1.0 : background_alpha);
         }
     }
 
-    private void draw_entry_at_position (Cairo.Context c, UserEntry entry, double position)
+    private void draw_entry_at_position (Cairo.Context c, UserEntry entry,
+                                         double position, bool in_box = false)
     {
         c.save ();
         c.translate (0, position * grid_size);
@@ -1214,7 +1210,7 @@
             alpha = 1.0 + position / (n_above + 1);
         else
             alpha = 1.0 - (position - 2) / (n_below + 1);        
-        draw_entry (c, entry, alpha);
+        draw_entry (c, entry, alpha, in_box);
         c.restore ();
     }
 
@@ -1231,26 +1227,45 @@
 
         c.translate (box_x, box_y);
 
+        var border = 4;
+
         var index = 0;
         foreach (var entry in entries)
         {
+            var position = index - scroll_location;
+
             /* Draw entries above the box */
             var h_above = (double) (n_above + 1) * grid_size;
             c.save ();
 
             c.rectangle (0, -h_above, box_width * grid_size, h_above);
             c.clip ();
-            draw_entry_at_position (c, entry, index - scroll_location);
+            draw_entry_at_position (c, entry, position);
 
             c.restore ();
 
+            /* Draw entries in the box */
+            if (position > -1 && position < 1 && scroll_timer.is_running) {
+                c.save ();
+                c.translate (0, border);
+                c.rectangle (0, border * 2, box_width * grid_size, box_height * grid_size - border * 5);
+                c.clip ();
+
+                if (position <= 0) /* top of box, normal pace */
+                    draw_entry_at_position (c, entry, position, true);
+                else /* bottom of box; pace must put across bottom halfway through animation */
+                    draw_entry_at_position (c, entry, position * box_height * 2, true);
+
+                c.restore ();
+            }
+
             /* Draw entries below the box */
             var h_below = (double) (n_below + 1) * grid_size;
             c.save ();
 
             c.rectangle (0, box_height * grid_size, box_width * grid_size, h_below);
             c.clip ();
-            draw_entry_at_position (c, entry, index - scroll_location + 2);
+            draw_entry_at_position (c, entry, position + box_height - 1);
 
             c.restore ();
 
@@ -1259,47 +1274,29 @@
 
         /* Draw box */
         c.save ();
-        var border = 4;
         c.translate (-border, -border);
         c.set_source (box_pattern);
         c.paint ();
         c.restore ();
 
         /* Selected item */
-        if (selected_entry != null)
+        if (selected_entry != null && !scroll_timer.is_running)
         {
-            int w, h;
-            selected_entry.layout.get_pixel_size (out w, out h);
-            var text_y = grid_size - (grid_size - border - h) / 4 - h;
-
-            if (selected_entry.is_active)
-            {
-                c.move_to (8, text_y + h / 2 + 0.5 - 4);
-                c.rel_line_to (5, 4);
-                c.rel_line_to (-5, 4);
-                c.close_path ();
-                c.set_source_rgb (1.0, 1.0, 1.0);
-                c.fill ();
-            }
-
-            c.move_to (grid_size / 2, text_y);
-
-            var bw = (box_width - 1.1) * grid_size;
-            if (w > bw)
-            {
-                var mask = new Cairo.Pattern.linear (0, 0, bw, 0);
-                mask.add_color_stop_rgba (1.0 - 27.0 / bw, 1.0, 1.0, 1.0, 1.0);
-                mask.add_color_stop_rgba (1.0 - 21.6 / bw, 1.0, 1.0, 1.0, 0.5);
-                mask.add_color_stop_rgba (1.0, 1.0, 1.0, 1.0, 0.0);
-                c.set_source (mask);
-            }
-            else
-                c.set_source_rgba (1.0, 1.0, 1.0, 1.0);
-
-            Pango.cairo_show_layout (c, selected_entry.layout);
+            var text_y = border;
+
+            c.save ();
+            c.rectangle (border, border, box_width * grid_size - border * 2, box_height * grid_size - border * 2);
+            c.clip ();
+
+            c.save ();
+            c.translate (0, text_y);
+            draw_entry (c, selected_entry, 1.0);
+            c.restore ();
+
+            c.restore();
         }
 
-        if (error != null || message != null)
+        if ((error != null || message != null) && !scroll_timer.is_running)
         {
             string text;
             if (error == null)