location-entry: Replace fake eventbox buttons with real ones

Currently the reader mode and bookmark icons in the location entry
are made clickable with the mouse using event boxes. So they are
kinda "fake buttons" which aren't focusable at all using the
keyboard.

So to make it easier to access them with the keyboard, and to have
to way of using their features (keyboard focus and keyboard shortcut),
this commit replaces the event boxes with proper buttons, styled in
a way where the buttons are fully invisible to make it look like you
click or focus a clickable icon, not a button.

This commit also adds a hover color for the entry icons.

9 files changed, 87 insertions, 75 deletions

diff --git a/lib/widgets/ephy-location-entry.c b/lib/widgets/ephy-location-entry.c
index 33f72def1..912e904c8 100644
--- a/lib/widgets/ephy-location-entry.c
+++ b/lib/widgets/ephy-location-entry.c
@@ -57,10 +57,10 @@ struct _EphyLocationEntry {
 
   GtkWidget *url_entry;
   GtkWidget *page_action_box;
-  GtkWidget *bookmark;
-  GtkWidget *bookmark_event_box;
-  GtkWidget *reader_mode;
-  GtkWidget *reader_mode_event_box;
+  GtkWidget *bookmark_icon;
+  GtkWidget *bookmark_button;
+  GtkWidget *reader_mode_icon;
+  GtkWidget *reader_mode_button;
 
   GBinding *paste_binding;
 
@@ -836,18 +836,11 @@ icon_button_icon_press_event_cb (GtkWidget            *widget,
   return FALSE;
 }
 
-static gboolean
-bookmark_icon_button_press_event_cb (GtkWidget         *entry,
-                                     GdkEventButton    *event,
-                                     EphyLocationEntry *lentry)
+static void
+bookmark_icon_button_clicked_cb (GtkButton         *button,
+                                 EphyLocationEntry *lentry)
 {
-  if (((event->type == GDK_BUTTON_PRESS &&
-        event->button == 1) ||
-       (event->type == GDK_TOUCH_BEGIN))) {
-    g_signal_emit (lentry, signals[BOOKMARK_CLICKED], 0);
-  }
-
-  return TRUE;
+  g_signal_emit (lentry, signals[BOOKMARK_CLICKED], 0);
 }
 
 static GtkBorder
@@ -1070,7 +1063,7 @@ update_reader_icon (EphyLocationEntry *entry)
   else
     name = "ephy-reader-mode-symbolic";
 
-  gtk_image_set_from_icon_name (GTK_IMAGE (entry->reader_mode),
+  gtk_image_set_from_icon_name (GTK_IMAGE (entry->reader_mode_icon),
                                 name, GTK_ICON_SIZE_MENU);
 }
 
@@ -1133,34 +1126,30 @@ ephy_location_entry_construct_contents (EphyLocationEntry *entry)
   gtk_style_context_add_class (context, "entry_icon_box");
 
   /* Bookmark */
-  entry->bookmark_event_box = gtk_event_box_new ();
-  gtk_widget_set_tooltip_text (entry->bookmark_event_box, _("Bookmark this page"));
-  entry->bookmark = gtk_image_new_from_icon_name ("non-starred-symbolic", GTK_ICON_SIZE_MENU);
-  gtk_widget_set_valign (entry->bookmark, GTK_ALIGN_CENTER);
-  gtk_widget_show (entry->bookmark);
-  g_signal_connect (G_OBJECT (entry->bookmark_event_box), "button_press_event", G_CALLBACK (bookmark_icon_button_press_event_cb), entry);
-  gtk_container_add (GTK_CONTAINER (entry->bookmark_event_box), entry->bookmark);
-  gtk_box_pack_end (GTK_BOX (box), entry->bookmark_event_box, FALSE, FALSE, 0);
-
-  context = gtk_widget_get_style_context (entry->bookmark);
+  entry->bookmark_button = gtk_button_new_from_icon_name ("non-starred-symbolic", GTK_ICON_SIZE_MENU);
+  gtk_widget_set_tooltip_text (entry->bookmark_button, _("Bookmark this page"));
+  entry->bookmark_icon = gtk_button_get_image (GTK_BUTTON (entry->bookmark_button));
+  gtk_widget_set_valign (entry->bookmark_icon, GTK_ALIGN_CENTER);
+  g_signal_connect (G_OBJECT (entry->bookmark_button), "clicked", G_CALLBACK (bookmark_icon_button_clicked_cb), entry);
+  gtk_box_pack_end (GTK_BOX (box), entry->bookmark_button, FALSE, FALSE, 0);
+
+  context = gtk_widget_get_style_context (entry->bookmark_icon);
   gtk_style_context_add_class (context, "entry_icon");
 
   g_settings_bind (EPHY_SETTINGS_LOCKDOWN,
                    EPHY_PREFS_LOCKDOWN_BOOKMARK_EDITING,
-                   entry->bookmark_event_box,
+                   entry->bookmark_button,
                    "visible",
                    G_SETTINGS_BIND_GET | G_SETTINGS_BIND_INVERT_BOOLEAN);
 
   /* Reader Mode */
-  entry->reader_mode_event_box = gtk_event_box_new ();
-  gtk_widget_set_tooltip_text (entry->reader_mode_event_box, _("Toggle reader mode"));
-  entry->reader_mode = gtk_image_new ();
-  gtk_widget_set_valign (entry->reader_mode, GTK_ALIGN_CENTER);
-  gtk_widget_show (entry->reader_mode);
-  gtk_container_add (GTK_CONTAINER (entry->reader_mode_event_box), entry->reader_mode);
-  gtk_box_pack_end (GTK_BOX (box), entry->reader_mode_event_box, FALSE, FALSE, 0);
-
-  context = gtk_widget_get_style_context (entry->reader_mode);
+  entry->reader_mode_button = gtk_button_new_from_icon_name (NULL, GTK_ICON_SIZE_MENU);
+  gtk_widget_set_tooltip_text (entry->reader_mode_button, _("Toggle reader mode"));
+  entry->reader_mode_icon = gtk_button_get_image (GTK_BUTTON (entry->reader_mode_button));
+  gtk_widget_set_valign (entry->reader_mode_icon, GTK_ALIGN_CENTER);
+  gtk_box_pack_end (GTK_BOX (box), entry->reader_mode_button, FALSE, FALSE, 0);
+
+  context = gtk_widget_get_style_context (entry->reader_mode_icon);
   gtk_style_context_add_class (context, "entry_icon");
 
   update_reader_icon (entry);
@@ -1418,25 +1407,25 @@ ephy_location_entry_set_bookmark_icon_state (EphyLocationEntry
 
   g_assert (EPHY_IS_LOCATION_ENTRY (entry));
 
-  context = gtk_widget_get_style_context (GTK_WIDGET (entry->bookmark));
+  context = gtk_widget_get_style_context (GTK_WIDGET (entry->bookmark_icon));
 
   switch (state) {
     case EPHY_LOCATION_ENTRY_BOOKMARK_ICON_HIDDEN:
-      gtk_widget_set_visible (entry->bookmark_event_box, FALSE);
+      gtk_widget_set_visible (entry->bookmark_button, FALSE);
       gtk_style_context_remove_class (context, "starred");
       gtk_style_context_remove_class (context, "non-starred");
       break;
     case EPHY_LOCATION_ENTRY_BOOKMARK_ICON_EMPTY:
-      gtk_widget_set_visible (entry->bookmark_event_box, TRUE);
-      gtk_image_set_from_icon_name (GTK_IMAGE (entry->bookmark),
+      gtk_widget_set_visible (entry->bookmark_button, TRUE);
+      gtk_image_set_from_icon_name (GTK_IMAGE (entry->bookmark_icon),
                                     "non-starred-symbolic",
                                     GTK_ICON_SIZE_MENU);
       gtk_style_context_remove_class (context, "starred");
       gtk_style_context_add_class (context, "non-starred");
       break;
     case EPHY_LOCATION_ENTRY_BOOKMARK_ICON_BOOKMARKED:
-      gtk_widget_set_visible (entry->bookmark_event_box, TRUE);
-      gtk_image_set_from_icon_name (GTK_IMAGE (entry->bookmark),
+      gtk_widget_set_visible (entry->bookmark_button, TRUE);
+      gtk_image_set_from_icon_name (GTK_IMAGE (entry->bookmark_icon),
                                     "starred-symbolic",
                                     GTK_ICON_SIZE_MENU);
       gtk_style_context_remove_class (context, "non-starred");
@@ -1489,20 +1478,20 @@ ephy_location_entry_get_entry (EphyLocationEntry *entry)
 GtkWidget *
 ephy_location_entry_get_bookmark_widget (EphyLocationEntry *entry)
 {
-  return entry->bookmark_event_box;
+  return entry->bookmark_button;
 }
 
 GtkWidget *
 ephy_location_entry_get_reader_mode_widget (EphyLocationEntry *entry)
 {
-  return entry->reader_mode_event_box;
+  return entry->reader_mode_button;
 }
 
 void
 ephy_location_entry_set_reader_mode_visible (EphyLocationEntry *entry,
                                              gboolean           visible)
 {
-  gtk_widget_set_visible (entry->reader_mode_event_box, visible);
+  gtk_widget_set_visible (entry->reader_mode_button, visible);
 }
 
 void
@@ -1510,9 +1499,9 @@ ephy_location_entry_set_reader_mode_state (EphyLocationEntry *entry,
                                            gboolean           active)
 {
   if (active)
-    gtk_style_context_add_class (gtk_widget_get_style_context (entry->reader_mode), "selected");
+    gtk_style_context_add_class (gtk_widget_get_style_context (entry->reader_mode_icon), "selected");
   else
-    gtk_style_context_remove_class (gtk_widget_get_style_context (entry->reader_mode), "selected");
+    gtk_style_context_remove_class (gtk_widget_get_style_context (entry->reader_mode_icon), "selected");
 
   entry->reader_mode_active = active;
 }
diff --git a/src/ephy-location-controller.c b/src/ephy-location-controller.c
index cc2178ecc..b9d37ae19 100644
--- a/src/ephy-location-controller.c
+++ b/src/ephy-location-controller.c
@@ -314,9 +314,8 @@ longpress_gesture_cb (GtkGestureLongPress *gesture,
 }
 
 static void
-reader_mode_button_press_event_cb (GtkWidget *widget,
-                                   GdkEvent  *event,
-                                   gpointer   user_data)
+reader_mode_button_clicked_cb (GtkButton *button,
+                               gpointer   user_data)
 {
   EphyLocationController *controller = EPHY_LOCATION_CONTROLLER (user_data);
   EphyWindow *window = controller->window;
@@ -372,7 +371,7 @@ ephy_location_controller_constructed (GObject *object)
   g_object_unref (model);
 
   reader_mode = ephy_location_entry_get_reader_mode_widget (EPHY_LOCATION_ENTRY (controller->title_widget));
-  g_signal_connect (G_OBJECT (reader_mode), "button-press-event", G_CALLBACK (reader_mode_button_press_event_cb), controller);
+  g_signal_connect (G_OBJECT (reader_mode), "clicked", G_CALLBACK (reader_mode_button_clicked_cb), controller);
 
   g_object_bind_property (controller, "editable",
                           entry, "editable",
diff --git a/src/resources/themes/Adwaita-dark.css b/src/resources/themes/Adwaita-dark.css
index 682731b78..481ca5055 100644
--- a/src/resources/themes/Adwaita-dark.css
+++ b/src/resources/themes/Adwaita-dark.css
@@ -18,13 +18,15 @@
 
 .entry_icon_box:dir(rtl) { margin-left: 5px; margin-right: 2px; }
 
-.entry_icon { color: mix(@theme_fg_color, @theme_base_color, 0.2); margin: 0 4px; }
+.entry_icon_box > button { box-shadow: none; border: transparent; background: transparent; padding: 0px; -gtk-icon-shadow: none; outline-offset: -1px; }
 
-.entry_icon:hover { color: @theme_fg_color; }
+.entry_icon_box > button:hover:not(:backdrop) .entry_icon { opacity: 1; }
+
+.entry_icon { color: @theme_fg_color; margin: 0 4px; opacity: .8; }
 
 .entry_icon:active { color: @theme_selected_bg_color; }
 
-.entry_icon:backdrop { color: mix(@theme_unfocused_fg_color, @theme_unfocused_base_color, 0.2); }
+.entry_icon:backdrop { color: @theme_unfocused_fg_color; }
 
 .entry_icon.selected { color: @theme_selected_bg_color; }
 
diff --git a/src/resources/themes/Adwaita.css b/src/resources/themes/Adwaita.css
index a498b3155..66de9e81f 100644
--- a/src/resources/themes/Adwaita.css
+++ b/src/resources/themes/Adwaita.css
@@ -18,13 +18,15 @@
 
 .entry_icon_box:dir(rtl) { margin-left: 5px; margin-right: 2px; }
 
-.entry_icon { color: mix(@theme_fg_color, @theme_base_color, 0.2); margin: 0 4px; }
+.entry_icon_box > button { box-shadow: none; border: transparent; background: transparent; padding: 0px; -gtk-icon-shadow: none; outline-offset: -1px; }
 
-.entry_icon:hover { color: @theme_fg_color; }
+.entry_icon_box > button:hover:not(:backdrop) .entry_icon { opacity: 1; }
+
+.entry_icon { color: @theme_fg_color; margin: 0 4px; opacity: .8; }
 
 .entry_icon:active { color: @theme_selected_bg_color; }
 
-.entry_icon:backdrop { color: mix(@theme_unfocused_fg_color, @theme_unfocused_base_color, 0.2); }
+.entry_icon:backdrop { color: @theme_unfocused_fg_color; }
 
 .entry_icon.selected { color: @theme_selected_bg_color; }
 
diff --git a/src/resources/themes/HighContrast.css b/src/resources/themes/HighContrast.css
index 6495cd6f3..6fd0175e1 100644
--- a/src/resources/themes/HighContrast.css
+++ b/src/resources/themes/HighContrast.css
@@ -18,13 +18,15 @@
 
 .entry_icon_box:dir(rtl) { margin-left: 5px; margin-right: 2px; }
 
-.entry_icon { color: mix(@theme_fg_color, @theme_base_color, 0.2); margin: 0 4px; }
+.entry_icon_box > button { box-shadow: none; border: transparent; background: transparent; padding: 0px; -gtk-icon-shadow: none; outline-offset: -1px; }
 
-.entry_icon:hover { color: @theme_fg_color; }
+.entry_icon_box > button:hover:not(:backdrop) .entry_icon { opacity: 1; }
+
+.entry_icon { color: @theme_fg_color; margin: 0 4px; opacity: .8; }
 
 .entry_icon:active { color: @theme_selected_bg_color; }
 
-.entry_icon:backdrop { color: mix(@theme_unfocused_fg_color, @theme_unfocused_base_color, 0.2); }
+.entry_icon:backdrop { color: @theme_unfocused_fg_color; }
 
 .entry_icon.selected { color: @theme_selected_bg_color; }
 
diff --git a/src/resources/themes/HighContrastInverse.css b/src/resources/themes/HighContrastInverse.css
index 4c3d3bf01..275a24bfc 100644
--- a/src/resources/themes/HighContrastInverse.css
+++ b/src/resources/themes/HighContrastInverse.css
@@ -18,13 +18,15 @@
 
 .entry_icon_box:dir(rtl) { margin-left: 5px; margin-right: 2px; }
 
-.entry_icon { color: mix(@theme_fg_color, @theme_base_color, 0.2); margin: 0 4px; }
+.entry_icon_box > button { box-shadow: none; border: transparent; background: transparent; padding: 0px; -gtk-icon-shadow: none; outline-offset: -1px; }
 
-.entry_icon:hover { color: @theme_fg_color; }
+.entry_icon_box > button:hover:not(:backdrop) .entry_icon { opacity: 1; }
+
+.entry_icon { color: @theme_fg_color; margin: 0 4px; opacity: .8; }
 
 .entry_icon:active { color: @theme_selected_bg_color; }
 
-.entry_icon:backdrop { color: mix(@theme_unfocused_fg_color, @theme_unfocused_base_color, 0.2); }
+.entry_icon:backdrop { color: @theme_unfocused_fg_color; }
 
 .entry_icon.selected { color: @theme_selected_bg_color; }
 
diff --git a/src/resources/themes/_shared-base.scss b/src/resources/themes/_shared-base.scss
index 9f1a710c4..d1628d4e1 100644
--- a/src/resources/themes/_shared-base.scss
+++ b/src/resources/themes/_shared-base.scss
@@ -53,22 +53,34 @@
     margin-left: 5px;
     margin-right: 2px;
   }
+  // Make the buttons as unnoticable as possible, to make it look like you're
+  // really clicking icons here, while allowing to focus them with the Tab key.
+  > button {
+    box-shadow: none;
+    border: transparent;
+    background: transparent;
+    padding: 0px;
+    -gtk-icon-shadow: none;
+    // Makes the focus outline slightly larger so it is more "button-like"
+    outline-offset: -1px;
+
+    &:hover:not(:backdrop) .entry_icon {
+      opacity: 1;
+    }
+  }
 }
 
 .entry_icon {
-  color: #{"mix(" + themecolor(theme_fg_color) + ", " + themecolor(theme_base_color) + ", 0.2)"};
+  color: themecolor(theme_fg_color);
   margin: 0 4px;
-
-  &:hover {
-    color: themecolor(theme_fg_color);
-  }
+  opacity: .8;
 
   &:active {
     color: themecolor(theme_selected_bg_color);
   }
 
   &:backdrop {
-    color: #{"mix(" + themecolor(theme_unfocused_fg_color) + ", " + themecolor(theme_unfocused_base_color) + ", 0.2)"};
+    color: themecolor(theme_unfocused_fg_color);
   }
 
   // Reader mode
diff --git a/src/resources/themes/elementary.css b/src/resources/themes/elementary.css
index 66c35a8b8..19fc68b88 100644
--- a/src/resources/themes/elementary.css
+++ b/src/resources/themes/elementary.css
@@ -18,13 +18,15 @@
 
 .entry_icon_box:dir(rtl) { margin-left: 5px; margin-right: 2px; }
 
-.entry_icon { color: mix(@theme_fg_color, @theme_base_color, 0.2); margin: 0 4px; }
+.entry_icon_box > button { box-shadow: none; border: transparent; background: transparent; padding: 0px; -gtk-icon-shadow: none; outline-offset: -1px; }
 
-.entry_icon:hover { color: @theme_fg_color; }
+.entry_icon_box > button:hover:not(:backdrop) .entry_icon { opacity: 1; }
+
+.entry_icon { color: @theme_fg_color; margin: 0 4px; opacity: .8; }
 
 .entry_icon:active { color: @theme_selected_bg_color; }
 
-.entry_icon:backdrop { color: mix(@theme_unfocused_fg_color, @theme_unfocused_base_color, 0.2); }
+.entry_icon:backdrop { color: @theme_unfocused_fg_color; }
 
 .entry_icon.selected { color: @theme_selected_bg_color; }
 
diff --git a/src/resources/themes/shared.css b/src/resources/themes/shared.css
index 546aa8408..c1c62ba03 100644
--- a/src/resources/themes/shared.css
+++ b/src/resources/themes/shared.css
@@ -18,13 +18,15 @@
 
 .entry_icon_box:dir(rtl) { margin-left: 5px; margin-right: 2px; }
 
-.entry_icon { color: mix(@theme_fg_color, @theme_base_color, 0.2); margin: 0 4px; }
+.entry_icon_box > button { box-shadow: none; border: transparent; background: transparent; padding: 0px; -gtk-icon-shadow: none; outline-offset: -1px; }
 
-.entry_icon:hover { color: @theme_fg_color; }
+.entry_icon_box > button:hover:not(:backdrop) .entry_icon { opacity: 1; }
+
+.entry_icon { color: @theme_fg_color; margin: 0 4px; opacity: .8; }
 
 .entry_icon:active { color: @theme_selected_bg_color; }
 
-.entry_icon:backdrop { color: mix(@theme_unfocused_fg_color, @theme_unfocused_base_color, 0.2); }
+.entry_icon:backdrop { color: @theme_unfocused_fg_color; }
 
 .entry_icon.selected { color: @theme_selected_bg_color; }