[epiphany] Improve download ui process

[Michael Catanzaro <mcatanzaro src gnome org>]

commit 6ec14e41871ebc68d6f4217429b2ecb44475ace1
Author: Jan-Michael Brummer <jan brummer tabos org>
Date:   Sat Jan 12 17:19:56 2019 +0100

    Improve download ui process
    
    Do not open popover for downloads and instead make the button more visible for the user.
    
    Fixes: https://gitlab.gnome.org/GNOME/epiphany/issues/395

 src/ephy-action-bar-end.c         | 95 ++++++++++++++++++++++++++++++---------
 src/resources/themes/Adwaita.css  | 17 +++++++
 src/resources/themes/Adwaita.scss | 17 +++++++
 3 files changed, 109 insertions(+), 20 deletions(-)
---
diff --git a/src/ephy-action-bar-end.c b/src/ephy-action-bar-end.c
index 307773a8b..9074392d0 100644
--- a/src/ephy-action-bar-end.c
+++ b/src/ephy-action-bar-end.c
@@ -28,6 +28,10 @@
 #include "ephy-shell.h"
 #include "ephy-window.h"
 
+#define NEEDS_ATTENTION_ANIMATION_TIMEOUT 2000 /*ms */
+#define ANIMATION_X_GROW 30
+#define ANIMATION_Y_GROW 30
+
 struct _EphyActionBarEnd {
   GtkBox parent_instance;
 
@@ -35,23 +39,13 @@ struct _EphyActionBarEnd {
   GtkWidget *downloads_revealer;
   GtkWidget *downloads_button;
   GtkWidget *downloads_popover;
+  GtkWidget *downloads_image;
+
+  guint downloads_button_attention_timeout_id;
 };
 
 G_DEFINE_TYPE (EphyActionBarEnd, ephy_action_bar_end, GTK_TYPE_BOX)
 
-static gboolean
-is_for_active_window (EphyActionBarEnd *action_bar_end)
-{
-  EphyShell *shell = ephy_shell_get_default ();
-  GtkWidget *ancestor;
-  GtkWindow *active_window;
-
-  ancestor = gtk_widget_get_ancestor (GTK_WIDGET (action_bar_end), GTK_TYPE_WINDOW);
-  active_window = gtk_application_get_active_window (GTK_APPLICATION (shell));
-
-  return active_window == GTK_WINDOW (ancestor);
-}
-
 static gboolean
 is_document_view_active (void)
 {
@@ -65,11 +59,48 @@ is_document_view_active (void)
   return ephy_embed_get_mode (embed) == EPHY_EMBED_MODE_EVINCE_DOCUMENT;
 }
 
+static void
+remove_downloads_button_attention_style (EphyActionBarEnd *self)
+{
+  GtkStyleContext *style_context;
+
+  style_context = gtk_widget_get_style_context (self->downloads_button);
+  gtk_style_context_remove_class (style_context, "epiphany-downloads-button-needs-attention");
+}
+
+static gboolean
+on_remove_downloads_button_attention_style_timeout_cb (EphyActionBarEnd *self)
+{
+  remove_downloads_button_attention_style (self);
+  self->downloads_button_attention_timeout_id = 0;
+
+  return G_SOURCE_REMOVE;
+}
+
+static void
+add_attention (EphyActionBarEnd *self)
+{
+  GtkStyleContext *style_context;
+
+  style_context = gtk_widget_get_style_context (self->downloads_button);
+
+  g_clear_handle_id (&self->downloads_button_attention_timeout_id, g_source_remove);
+  remove_downloads_button_attention_style (self);
+
+  gtk_style_context_add_class (style_context, "epiphany-downloads-button-needs-attention");
+  self->downloads_button_attention_timeout_id = g_timeout_add (NEEDS_ATTENTION_ANIMATION_TIMEOUT,
+                                                               (GSourceFunc) 
on_remove_downloads_button_attention_style_timeout_cb,
+                                                               self);
+}
+
 static void
 download_added_cb (EphyDownloadsManager *manager,
                    EphyDownload         *download,
                    EphyActionBarEnd     *action_bar_end)
 {
+  GtkAllocation rect;
+  DzlBoxTheatric *theatric;
+
   if (is_document_view_active ())
     return;
 
@@ -79,11 +110,35 @@ download_added_cb (EphyDownloadsManager *manager,
                                  action_bar_end->downloads_popover);
   }
 
+  add_attention (action_bar_end);
   gtk_revealer_set_reveal_child (GTK_REVEALER (action_bar_end->downloads_revealer), TRUE);
-
-  if (is_for_active_window (action_bar_end) &&
-      gtk_widget_get_mapped (GTK_WIDGET (action_bar_end)))
-    gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (action_bar_end->downloads_button), TRUE);
+  gtk_widget_queue_draw (action_bar_end->downloads_image);
+
+  if (gtk_widget_is_visible (GTK_WIDGET (action_bar_end))) {
+    gtk_widget_get_allocation (GTK_WIDGET (action_bar_end->downloads_button), &rect);
+    theatric = g_object_new (DZL_TYPE_BOX_THEATRIC,
+                             "alpha", 0.9,
+                             "background", "#fdfdfd",
+                             "target", action_bar_end->downloads_button,
+                             "height", rect.height,
+                             "width", rect.width,
+                             "x", rect.x,
+                             "y", rect.y,
+                            NULL);
+
+    dzl_object_animate_full (theatric,
+                             DZL_ANIMATION_EASE_IN_CUBIC,
+                             250,
+                             gtk_widget_get_frame_clock (GTK_WIDGET (action_bar_end->downloads_button)),
+                             g_object_unref,
+                             theatric,
+                             "x", rect.x - ANIMATION_X_GROW,
+                             "width", rect.width + (ANIMATION_X_GROW * 2),
+                             "y", rect.y - ANIMATION_Y_GROW,
+                             "height", rect.height + (ANIMATION_Y_GROW * 2),
+                             "alpha", 0.0,
+                             NULL);
+  }
 }
 
 static void
@@ -91,9 +146,6 @@ download_completed_cb (EphyDownloadsManager *manager,
                        EphyDownload         *download,
                        EphyActionBarEnd     *action_bar_end)
 {
-  if (is_for_active_window (action_bar_end) &&
-      gtk_widget_get_mapped (GTK_WIDGET (action_bar_end)))
-    gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (action_bar_end->downloads_button), TRUE);
 }
 
 static void
@@ -129,6 +181,9 @@ ephy_action_bar_end_class_init (EphyActionBarEndClass *klass)
   gtk_widget_class_bind_template_child (widget_class,
                                         EphyActionBarEnd,
                                         downloads_button);
+  gtk_widget_class_bind_template_child (widget_class,
+                                        EphyActionBarEnd,
+                                        downloads_image);
 }
 
 static void
diff --git a/src/resources/themes/Adwaita.css b/src/resources/themes/Adwaita.css
index f641f3baa..246718117 100644
--- a/src/resources/themes/Adwaita.css
+++ b/src/resources/themes/Adwaita.css
@@ -104,3 +104,20 @@
 .bookmark-tag-widget-selected button:last-child:hover image { color: #ffffff; outline-color: rgba(255, 255, 
255, 0.3); border-color: #215d9c; border-bottom-color: #184472; background-image: linear-gradient(to bottom, 
#4a90d9, #3986d5 60%, #2a76c6); text-shadow: 0 -1px rgba(0, 0, 0, 0.543529); -gtk-icon-shadow: 0 -1px rgba(0, 
0, 0, 0.543529); box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); color: #ffffff; outline-color: rgba(255, 
255, 255, 0.3); border-color: #215d9c; border-bottom-color: #184472; text-shadow: 0 -1px rgba(0, 0, 0, 
0.495529); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.495529); box-shadow: inset 0 1px rgba(255, 255, 255, 
0.4); background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5); }
 
 .bookmark-tag-widget-selected button:last-child:active image { color: #ffffff; outline-color: rgba(255, 255, 
255, 0.3); border-color: #215d9c; border-bottom-color: #184472; background-image: linear-gradient(to bottom, 
#4a90d9, #3986d5 60%, #2a76c6); text-shadow: 0 -1px rgba(0, 0, 0, 0.543529); -gtk-icon-shadow: 0 -1px rgba(0, 
0, 0, 0.543529); box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); color: #ffffff; outline-color: rgba(255, 
255, 255, 0.3); border-color: #215d9c; background-image: image(#3180d4); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+
+@keyframes needs_attention_keyframes {
+    0% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: 
@borders; }
+    /* can't do animation-direction, so holding the color on two keyframes */
+    30% {background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color, 
@theme_base_color); border-color: @theme_fg_color; }
+    90% {background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color, 
@theme_base_color); border-color: @theme_fg_color; }
+    100% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: 
@borders; }
+}
+
+.epiphany-downloads-button-needs-attention {
+  animation: needs_attention_keyframes 2s ease-in-out;
+}
+
+.epiphany-downloads-button-needs-attention-multiple {
+  animation: needs_attention_keyframes 3s ease-in-out;
+  animation-iteration-count: 3;
+}
diff --git a/src/resources/themes/Adwaita.scss b/src/resources/themes/Adwaita.scss
index a584b1a47..a6d373614 100644
--- a/src/resources/themes/Adwaita.scss
+++ b/src/resources/themes/Adwaita.scss
@@ -199,3 +199,20 @@ $close_button_fg_color: lighten($fg_color, 10%);
     }
   }
 }
+
+@keyframes needs_attention_keyframes {
+    0% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: 
@borders; }
+    /* can't do animation-direction, so holding the color on two keyframes */
+    30% {background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color, 
@theme_base_color); border-color: @theme_fg_color; }
+    90% {background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color, 
@theme_base_color); border-color: @theme_fg_color; }
+    100% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: 
@borders; }
+}
+
+.epiphany-downloads-button-needs-attention {
+  animation: needs_attention_keyframes 2s ease-in-out;
+}
+
+.epiphany-downloads-button-needs-attention-multiple {
+  animation: needs_attention_keyframes 3s ease-in-out;
+  animation-iteration-count: 3;
+}