page-row: Add the favicon, loading spinner and volume output

This add the favicon image, a spinner to notify the page is loading and
a speaker to notify sound is played, hence matching the tabs' features.

Fixes GNOME/epiphany#647.

src/ephy-page-row.c

@@ -21,6 +21,7 @@
 
 #include "config.h"
 
+#include "ephy-embed-utils.h"
 #include "ephy-page-row.h"
 
 enum {
@@ -33,6 +34,10 @@ struct _EphyPageRow {
   GtkPopover parent_instance;
 
   GtkBox *box;
+  GtkImage *icon;
+  GtkStack *icon_stack;
+  GtkImage *speaker_icon;
+  GtkSpinner *spinner;
   GtkLabel *title;
 };
 
@@ -40,6 +45,37 @@ static guint signals[LAST_SIGNAL];
 
 G_DEFINE_TYPE (EphyPageRow, ephy_page_row, GTK_TYPE_LIST_BOX_ROW)
 
+static void
+sync_load_status (EphyWebView *view,
+                  GParamSpec  *pspec,
+                  EphyPageRow *self)
+{
+  EphyEmbed *embed;
+
+  g_assert (EPHY_IS_WEB_VIEW (view));
+  g_assert (EPHY_IS_PAGE_ROW (self));
+
+  embed = EPHY_GET_EMBED_FROM_EPHY_WEB_VIEW (view);
+
+  g_assert (EPHY_IS_EMBED (embed));
+
+  if (ephy_web_view_is_loading (view) && !ephy_embed_has_load_pending (embed)) {
+    gtk_stack_set_visible_child (self->icon_stack, GTK_WIDGET (self->spinner));
+    gtk_spinner_start (GTK_SPINNER (self->spinner));
+  } else {
+    gtk_stack_set_visible_child (self->icon_stack, GTK_WIDGET (self->icon));
+    gtk_spinner_stop (GTK_SPINNER (self->spinner));
+  }
+}
+
+static void
+load_changed_cb (EphyWebView     *view,
+                 WebKitLoadEvent  load_event,
+                 EphyPageRow     *self)
+{
+  sync_load_status (view, NULL, self);
+}
+
 static void
 close_clicked_cb (EphyPageRow *self)
 {
@@ -60,6 +96,10 @@ ephy_page_row_class_init (EphyPageRowClass *klass)
 
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/epiphany/gtk/page-row.ui");
   gtk_widget_class_bind_template_child (widget_class, EphyPageRow, box);
+  gtk_widget_class_bind_template_child (widget_class, EphyPageRow, icon);
+  gtk_widget_class_bind_template_child (widget_class, EphyPageRow, icon_stack);
+  gtk_widget_class_bind_template_child (widget_class, EphyPageRow, speaker_icon);
+  gtk_widget_class_bind_template_child (widget_class, EphyPageRow, spinner);
   gtk_widget_class_bind_template_child (widget_class, EphyPageRow, title);
   gtk_widget_class_bind_template_callback (widget_class, close_clicked_cb);
 }
@@ -71,23 +111,31 @@ ephy_page_row_init (EphyPageRow *self)
 }
 
 EphyPageRow *
-ephy_page_row_new (GMenuModel *menu_model,
-                   gint        position)
+ephy_page_row_new (EphyNotebook *notebook,
+                   gint          position)
 {
   EphyPageRow *self;
-  GVariant *label;
+  GtkWidget *embed;
+  EphyWebView *view;
 
-  g_assert (menu_model != NULL);
+  g_assert (notebook != NULL);
   g_assert (position >= 0);
-  g_assert (position < g_menu_model_get_n_items (menu_model));
 
   self = g_object_new (EPHY_TYPE_PAGE_ROW, NULL);
 
-  label = g_menu_model_get_item_attribute_value (menu_model,
-                                                 position,
-                                                 G_MENU_ATTRIBUTE_LABEL,
-                                                 G_VARIANT_TYPE_STRING);
-  gtk_label_set_text (self->title, g_variant_get_string (label, NULL));
+  embed = gtk_notebook_get_nth_page (GTK_NOTEBOOK (notebook), position);
+
+  g_assert (EPHY_IS_EMBED (embed));
+
+  view = ephy_embed_get_web_view (EPHY_EMBED (embed));
+
+  g_object_bind_property (view, "icon", self->icon, "pixbuf", G_BINDING_SYNC_CREATE);
+  g_object_bind_property (embed, "title", self->title, "label", G_BINDING_SYNC_CREATE);
+  g_object_bind_property (embed, "title", self->title, "tooltip-text", G_BINDING_SYNC_CREATE);
+  g_object_bind_property (view, "is-playing-audio", self->speaker_icon, "visible", G_BINDING_SYNC_CREATE);
+  sync_load_status (view, NULL, self);
+  g_signal_connect_object (view, "load-changed",
+                           G_CALLBACK (load_changed_cb), self, 0);
 
   return self;
 }

src/ephy-page-row.h

@@ -23,6 +23,7 @@
 
 #include <gtk/gtk.h>
 #include "ephy-adaptive-mode.h"
+#include "ephy-notebook.h"
 
 G_BEGIN_DECLS
 
@@ -30,8 +31,8 @@ G_BEGIN_DECLS
 
 G_DECLARE_FINAL_TYPE (EphyPageRow, ephy_page_row, EPHY, PAGE_ROW, GtkListBoxRow)
 
-EphyPageRow *ephy_page_row_new (GMenuModel *menu_model,
-                                int         position);
+EphyPageRow *ephy_page_row_new (EphyNotebook *notebook,
+                                int           position);
 
 void ephy_page_row_set_adaptive_mode (EphyPageRow      *self,
                                       EphyAdaptiveMode  adaptive_mode);

src/ephy-pages-popover.c

@@ -129,7 +129,7 @@ items_changed_cb (EphyPagesPopover *self,
   EphyPageRow **items = g_new (EphyPageRow *, added);
 
   for (int i = 0; i < added; i++) {
-    items[i] = ephy_page_row_new (menu_model, position + i);
+    items[i] = ephy_page_row_new (self->notebook, position + i);
     ephy_page_row_set_adaptive_mode (EPHY_PAGE_ROW (items[i]),
                                      self->adaptive_mode);
     g_signal_connect_swapped (items[i], "closed", G_CALLBACK (row_closed_cb), self);

src/resources/gtk/page-row.ui

@@ -8,21 +8,47 @@
         <property name="margin_start">12</property>
         <property name="spacing">12</property>
         <property name="visible">True</property>
+        <child>
+          <object class="GtkStack" id="icon_stack">
+            <property name="visible">True</property>
+            <child>
+              <object class="GtkImage" id="icon">
+                <property name="icon_size">1</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSpinner" id="spinner">
+                <property name="visible">True</property>
+              </object>
+            </child>
+          </object>
+        </child>
         <child>
           <object class="GtkLabel" id="title">
             <property name="ellipsize">end</property>
             <property name="halign">start</property>
             <property name="hexpand">True</property>
+            <property name="single_line_mode">True</property>
             <property name="valign">center</property>
             <property name="visible">True</property>
             <property name="xalign">0</property>
           </object>
         </child>
+        <child>
+          <object class="GtkImage" id="speaker_icon">
+            <property name="icon_name">audio-volume-high-symbolic</property>
+            <property name="icon_size">1</property>
+            <property name="visible">True</property>
+          </object>
+        </child>
         <child>
           <object class="GtkButton" id="close_button">
             <property name="can_focus">True</property>
+            <property name="focus_on_click">False</property>
             <property name="halign">end</property>
             <property name="relief">none</property>
+            <property name="tooltip-text" translatable="yes">Close page</property>
             <property name="valign">center</property>
             <property name="visible">True</property>
             <signal name="clicked" handler="close_clicked_cb" swapped="yes"/>