GNOME.org
 

[epiphany] location-entry: Replace fake eventbox buttons with real ones

commit 4c7903363467f2c66304d53b0b1b7486ef367297
Author: vanadiae <vanadiae35 gmail com>
Date:   Sun Jun 13 15:56:00 2021 +0200

    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.

 lib/widgets/ephy-location-entry.c            | 83 ++++++++++++----------------
 src/ephy-location-controller.c               |  7 +--
 src/resources/themes/Adwaita-dark.css        |  8 ++-
 src/resources/themes/Adwaita.css             |  8 ++-
 src/resources/themes/HighContrast.css        |  8 ++-
 src/resources/themes/HighContrastInverse.css |  8 ++-
 src/resources/themes/_shared-base.scss       | 24 ++++++--
 src/resources/themes/elementary.css          |  8 ++-
 src/resources/themes/shared.css              |  8 ++-
 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; }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]