Flash notebook arrow in case new tab is not visible

Fixes: https://gitlab.gnome.org/GNOME/epiphany/-/issues/48

8 files changed, 116 insertions, 0 deletions

diff --git a/src/ephy-notebook.c b/src/ephy-notebook.c
index 111aa2c23..db5871b2e 100644
--- a/src/ephy-notebook.c
+++ b/src/ephy-notebook.c
@@ -854,6 +854,83 @@ ephy_notebook_insert_page (GtkNotebook *gnotebook,
   return position;
 }
 
+typedef struct {
+  EphyNotebook *notebook;
+  GtkTextDirection direction;
+  int old_pos;
+  int new_pos;
+  guint flash_id;
+} PresentTabData;
+
+static PresentTabData *
+present_tab_data_new (EphyNotebook *notebook,
+                      gint          old_pos,
+                      gint          new_pos)
+{
+  PresentTabData *pt_data = g_new0 (PresentTabData, 1);
+  pt_data->notebook = notebook;
+  pt_data->old_pos = old_pos;
+  pt_data->new_pos = new_pos;
+  pt_data->direction = gtk_widget_get_default_direction ();
+  g_object_add_weak_pointer (G_OBJECT (notebook), (gpointer *)&pt_data->notebook);
+  return pt_data;
+}
+
+static void
+present_tab_data_free (PresentTabData *pt_data)
+{
+  g_clear_weak_pointer (&pt_data->notebook);
+  g_clear_handle_id (&pt_data->flash_id, g_source_remove);
+  g_clear_pointer (&pt_data, g_free);
+}
+
+static gboolean
+remove_arrow_flash (gpointer user_data)
+{
+  PresentTabData *pt_data = user_data;
+
+  if (pt_data->direction == GTK_TEXT_DIR_LTR)
+    gtk_style_context_remove_class (gtk_widget_get_style_context (GTK_WIDGET (pt_data->notebook)), "tab-arrow-up-attention");
+  else
+    gtk_style_context_remove_class (gtk_widget_get_style_context (GTK_WIDGET (pt_data->notebook)), "tab-arrow-down-attention");
+
+  pt_data->flash_id = 0;
+  present_tab_data_free (pt_data);
+
+  return G_SOURCE_REMOVE;
+}
+
+static gboolean
+present_new_tab (gpointer user_data)
+{
+  PresentTabData *pt_data = user_data;
+  GtkWidget *page;
+  GtkWidget *label;
+
+  if (!pt_data->notebook) {
+    pt_data->flash_id = 0;
+    present_tab_data_free (pt_data);
+    return G_SOURCE_REMOVE;
+  }
+
+  page = gtk_notebook_get_nth_page (GTK_NOTEBOOK (pt_data->notebook), pt_data->new_pos);
+  label = gtk_notebook_get_tab_label (GTK_NOTEBOOK (pt_data->notebook), page);
+
+  if (!gtk_widget_get_mapped (GTK_WIDGET (label))) {
+    if (pt_data->direction == GTK_TEXT_DIR_LTR)
+      gtk_style_context_add_class (gtk_widget_get_style_context (GTK_WIDGET (pt_data->notebook)), "tab-arrow-up-attention");
+    else
+      gtk_style_context_add_class (gtk_widget_get_style_context (GTK_WIDGET (pt_data->notebook)), "tab-arrow-down-attention");
+
+    pt_data->flash_id = g_timeout_add (500, remove_arrow_flash, pt_data);
+  } else {
+    pt_data->flash_id = 0;
+    present_tab_data_free (pt_data);
+  }
+
+  return G_SOURCE_REMOVE;
+}
+
 int
 ephy_notebook_add_tab (EphyNotebook *notebook,
                        EphyEmbed    *embed,
@@ -878,6 +955,9 @@ ephy_notebook_add_tab (EphyNotebook *notebook,
     gtk_notebook_set_current_page (gnotebook, position);
     g_object_set_data (G_OBJECT (embed), "jump_to",
                        GINT_TO_POINTER (jump_to));
+  } else {
+    PresentTabData *pt_data = present_tab_data_new (notebook, gtk_notebook_get_current_page (gnotebook), position);
+    pt_data->flash_id = g_idle_add (present_new_tab, pt_data);
   }
 
   return position;
diff --git a/src/resources/themes/Adwaita-dark.css b/src/resources/themes/Adwaita-dark.css
index dfb356891..aa28b96d9 100644
--- a/src/resources/themes/Adwaita-dark.css
+++ b/src/resources/themes/Adwaita-dark.css
@@ -50,6 +50,10 @@
 
 .tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)); background-size: 6px 6px; background-repeat: no-repeat; background-position: center bottom; }
 
+.tab-arrow-up-attention arrow.up { background-color: @theme_selected_bg_color; }
+
+.tab-arrow-down-attention arrow.down { background-color: @theme_selected_bg_color; }
+
 .page-menu-contents { margin-left: 12px; margin-right: 12px; margin-bottom: 12px; }
 
 .search-entry-occurrences-tag { background: none; color: alpha(@theme_fg_color,0.5); box-shadow: none; border: none; margin: 2px; padding: 2px; }
diff --git a/src/resources/themes/Adwaita.css b/src/resources/themes/Adwaita.css
index e3e66bd6f..0820e9221 100644
--- a/src/resources/themes/Adwaita.css
+++ b/src/resources/themes/Adwaita.css
@@ -50,6 +50,10 @@
 
 .tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)); background-size: 6px 6px; background-repeat: no-repeat; background-position: center bottom; }
 
+.tab-arrow-up-attention arrow.up { background-color: @theme_selected_bg_color; }
+
+.tab-arrow-down-attention arrow.down { background-color: @theme_selected_bg_color; }
+
 .page-menu-contents { margin-left: 12px; margin-right: 12px; margin-bottom: 12px; }
 
 .search-entry-occurrences-tag { background: none; color: alpha(@theme_fg_color,0.5); box-shadow: none; border: none; margin: 2px; padding: 2px; }
diff --git a/src/resources/themes/HighContrast.css b/src/resources/themes/HighContrast.css
index 49107392b..9dfc57cf0 100644
--- a/src/resources/themes/HighContrast.css
+++ b/src/resources/themes/HighContrast.css
@@ -50,6 +50,10 @@
 
 .tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)); background-size: 6px 6px; background-repeat: no-repeat; background-position: center bottom; }
 
+.tab-arrow-up-attention arrow.up { background-color: @theme_selected_bg_color; }
+
+.tab-arrow-down-attention arrow.down { background-color: @theme_selected_bg_color; }
+
 .page-menu-contents { margin-left: 12px; margin-right: 12px; margin-bottom: 12px; }
 
 .search-entry-occurrences-tag { background: none; color: alpha(@theme_fg_color,0.5); box-shadow: none; border: none; margin: 2px; padding: 2px; }
diff --git a/src/resources/themes/HighContrastInverse.css b/src/resources/themes/HighContrastInverse.css
index c60d6bc16..a1d5c79f5 100644
--- a/src/resources/themes/HighContrastInverse.css
+++ b/src/resources/themes/HighContrastInverse.css
@@ -50,6 +50,10 @@
 
 .tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)); background-size: 6px 6px; background-repeat: no-repeat; background-position: center bottom; }
 
+.tab-arrow-up-attention arrow.up { background-color: @theme_selected_bg_color; }
+
+.tab-arrow-down-attention arrow.down { background-color: @theme_selected_bg_color; }
+
 .page-menu-contents { margin-left: 12px; margin-right: 12px; margin-bottom: 12px; }
 
 .search-entry-occurrences-tag { background: none; color: alpha(@theme_fg_color,0.5); box-shadow: none; border: none; margin: 2px; padding: 2px; }
diff --git a/src/resources/themes/_shared-base.scss b/src/resources/themes/_shared-base.scss
index 1463b5a7b..81be64924 100644
--- a/src/resources/themes/_shared-base.scss
+++ b/src/resources/themes/_shared-base.scss
@@ -159,6 +159,18 @@
   background-position: center bottom;
 }
 
+.tab-arrow-up-attention {
+  arrow.up {
+    background-color: themecolor(theme_selected_bg_color);
+  }
+}
+
+.tab-arrow-down-attention {
+  arrow.down {
+    background-color: themecolor(theme_selected_bg_color);
+  }
+}
+
 .page-menu-contents {
   margin-left: 12px;
   margin-right: 12px;
diff --git a/src/resources/themes/elementary.css b/src/resources/themes/elementary.css
index 2bfc5a70b..dd2943ce8 100644
--- a/src/resources/themes/elementary.css
+++ b/src/resources/themes/elementary.css
@@ -50,6 +50,10 @@
 
 .tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)); background-size: 6px 6px; background-repeat: no-repeat; background-position: center bottom; }
 
+.tab-arrow-up-attention arrow.up { background-color: @theme_selected_bg_color; }
+
+.tab-arrow-down-attention arrow.down { background-color: @theme_selected_bg_color; }
+
 .page-menu-contents { margin-left: 12px; margin-right: 12px; margin-bottom: 12px; }
 
 .search-entry-occurrences-tag { background: none; color: alpha(@theme_fg_color,0.5); box-shadow: none; border: none; margin: 2px; padding: 2px; }
diff --git a/src/resources/themes/shared.css b/src/resources/themes/shared.css
index 5e0f7bf57..9b461b229 100644
--- a/src/resources/themes/shared.css
+++ b/src/resources/themes/shared.css
@@ -50,6 +50,10 @@
 
 .tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)); background-size: 6px 6px; background-repeat: no-repeat; background-position: center bottom; }
 
+.tab-arrow-up-attention arrow.up { background-color: @theme_selected_bg_color; }
+
+.tab-arrow-down-attention arrow.down { background-color: @theme_selected_bg_color; }
+
 .page-menu-contents { margin-left: 12px; margin-right: 12px; margin-bottom: 12px; }
 
 .search-entry-occurrences-tag { background: none; color: alpha(@theme_fg_color,0.5); box-shadow: none; border: none; margin: 2px; padding: 2px; }