toolbar: improve operations button first feedback

Users weren't noticing that the button appeared, and tried
to perform the same operation again.
Try to catch their attention on the button with an animation
on it when the button appears.

https://bugzilla.gnome.org/show_bug.cgi?id=753728

2 files changed, 64 insertions, 8 deletions

diff --git a/src/Adwaita.css b/src/Adwaita.css
index 940d46e81..c03d4e66a 100644
--- a/src/Adwaita.css
+++ b/src/Adwaita.css
@@ -41,8 +41,20 @@
 }
 
 /* Toolbar */
+
+/* Here we use the .button background-image colors from Adwaita, but ligthen them,
+ * since is not possible to use lighten () in common css. */
+@keyframes needs_attention_keyframes {
+    0% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0)}
+    50% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #f9f9f9)}
+    100% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0)}
+}
 .nautilus-operations-button-needs-attention {
-  background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #f9f9f9);
+  animation: needs_attention_keyframes 1s ease-in;
+}
+.nautilus-operations-button-needs-attention-multiple {
+  animation: needs_attention_keyframes 1s ease-in;
+  animation-iteration-count: 3;
 }
 
 /* Floating status bar */
diff --git a/src/nautilus-toolbar.c b/src/nautilus-toolbar.c
index 7ba2fe0c9..645efd95f 100644
--- a/src/nautilus-toolbar.c
+++ b/src/nautilus-toolbar.c
@@ -40,6 +40,8 @@
 #include <math.h>
 
 #define OPERATION_MINIMUM_TIME 2 //s
+#define NEEDS_ATTENTION_ANIMATION_TIMEOUT 1000 //ms
+#define NEEDS_ATTENTION_ANIMATION_MULTIPLE_TIMEOUT 3000 //ms
 #define REMOVE_FINISHED_OPERATIONS_TIEMOUT 3 //s
 
 typedef enum {
@@ -399,6 +401,19 @@ schedule_remove_finished_operations (NautilusToolbar *self)
 }
 
 static gboolean
+remove_operations_button_attention_style_multiple (NautilusToolbar *self)
+{
+        GtkStyleContext *style_context;
+
+        style_context = gtk_widget_get_style_context (self->priv->operations_button);
+        gtk_style_context_remove_class (style_context,
+                                        "nautilus-operations-button-needs-attention-multiple");
+        self->priv->operations_button_attention_timeout_id = 0;
+
+        return G_SOURCE_REMOVE;
+}
+
+static gboolean
 remove_operations_button_attention_style (NautilusToolbar *self)
 {
         GtkStyleContext *style_context;
@@ -412,6 +427,40 @@ remove_operations_button_attention_style (NautilusToolbar *self)
 }
 
 static void
+add_operations_button_attention_style (NautilusToolbar *self)
+{
+        GtkStyleContext *style_context;
+
+        style_context = gtk_widget_get_style_context (self->priv->operations_button);
+
+        remove_operations_button_attention_style (self);
+        remove_operations_button_attention_style_multiple (self);
+
+        gtk_style_context_add_class (style_context,
+                                     "nautilus-operations-button-needs-attention");
+        self->priv->operations_button_attention_timeout_id = g_timeout_add (NEEDS_ATTENTION_ANIMATION_TIMEOUT,
+                                                                            (GSourceFunc) remove_operations_button_attention_style,
+                                                                            self);
+}
+
+static void
+add_operations_button_attention_multiple_style (NautilusToolbar *self)
+{
+        GtkStyleContext *style_context;
+
+        style_context = gtk_widget_get_style_context (self->priv->operations_button);
+
+        remove_operations_button_attention_style (self);
+        remove_operations_button_attention_style_multiple (self);
+
+        gtk_style_context_add_class (style_context,
+                                     "nautilus-operations-button-needs-attention-multiple");
+        self->priv->operations_button_attention_timeout_id = g_timeout_add (NEEDS_ATTENTION_ANIMATION_MULTIPLE_TIMEOUT,
+                                                                            (GSourceFunc) remove_operations_button_attention_style_multiple,
+                                                                            self);
+}
+
+static void
 on_progress_info_cancelled (NautilusToolbar *self)
 {
         /* Update the pie chart progress */
@@ -432,7 +481,6 @@ static void
 on_progress_info_finished (NautilusToolbar      *self,
                            NautilusProgressInfo *info)
 {
-        GtkStyleContext *style_context;
         gchar *main_label;
         GFile *folder_to_open;
 
@@ -449,12 +497,7 @@ on_progress_info_finished (NautilusToolbar      *self,
          * notification */
         if (!gtk_toggle_button_get_active (GTK_TOGGLE_BUTTON (self->priv->operations_button)) &&
             folder_to_open != NULL) {
-                style_context = gtk_widget_get_style_context (self->priv->operations_button);
-                gtk_style_context_add_class (style_context,
-                                             "nautilus-operations-button-needs-attention");
-                self->priv->operations_button_attention_timeout_id = g_timeout_add_seconds (1,
-                                                                                            (GSourceFunc) remove_operations_button_attention_style,
-                                                                                            self);
+                add_operations_button_attention_style (self);
                 main_label = nautilus_progress_info_get_status (info);
                 nautilus_window_show_operation_notification (self->priv->window,
                                                              main_label,
@@ -521,6 +564,7 @@ update_operations (NautilusToolbar *self)
          */
         if (total_remaining_time > OPERATION_MINIMUM_TIME &&
             !gtk_revealer_get_reveal_child (GTK_REVEALER (self->priv->operations_revealer))) {
+                add_operations_button_attention_multiple_style (self);
                 gtk_revealer_set_reveal_child (GTK_REVEALER (self->priv->operations_revealer),
                                                TRUE);
                 gtk_widget_queue_draw (self->priv->operations_icon);