Tweak page list styles

Match GTK4 and the upcoming new tabs more closely.

Since the close button style is shared with the bookmark tags, match that
as well.

7 files changed, 69 insertions, 76 deletions

diff --git a/src/ephy-page-row.c b/src/ephy-page-row.c
index b85438a0f..48abe0ffc 100644
--- a/src/ephy-page-row.c
+++ b/src/ephy-page-row.c
@@ -185,30 +185,18 @@ void
 ephy_page_row_set_adaptive_mode (EphyPageRow      *self,
                                  EphyAdaptiveMode  adaptive_mode)
 {
-  GtkStyleContext *context;
-
   g_assert (EPHY_IS_PAGE_ROW (self));
 
-  context = gtk_widget_get_style_context (GTK_WIDGET (self));
-
   switch (adaptive_mode) {
     case EPHY_ADAPTIVE_MODE_NORMAL:
-      gtk_widget_set_size_request (GTK_WIDGET (self->box), -1, -1);
-      gtk_widget_set_margin_end (GTK_WIDGET (self->box), 0);
-      gtk_widget_set_margin_start (GTK_WIDGET (self->box), 4);
+      gtk_widget_set_margin_end (GTK_WIDGET (self->box), 2);
       gtk_box_set_spacing (self->box, 0);
 
-      gtk_style_context_remove_class (context, "narrow");
-
       break;
     case EPHY_ADAPTIVE_MODE_NARROW:
-      gtk_widget_set_size_request (GTK_WIDGET (self->box), -1, 50);
-      gtk_widget_set_margin_end (GTK_WIDGET (self->box), 4);
-      gtk_widget_set_margin_start (GTK_WIDGET (self->box), 8);
+      gtk_widget_set_margin_end (GTK_WIDGET (self->box), 0);
       gtk_box_set_spacing (self->box, 4);
 
-      gtk_style_context_add_class (context, "narrow");
-
       break;
   }
 }
diff --git a/src/ephy-pages-view.c b/src/ephy-pages-view.c
index 13485f816..bad9335cb 100644
--- a/src/ephy-pages-view.c
+++ b/src/ephy-pages-view.c
@@ -181,33 +181,10 @@ ephy_pages_view_class_init (EphyPagesViewClass *klass)
 }
 
 static void
-separator_header (GtkListBoxRow *row,
-                  GtkListBoxRow *before,
-                  gpointer       user_data)
-{
-  GtkWidget *header;
-
-  if (before == NULL) {
-    gtk_list_box_row_set_header (row, NULL);
-
-    return;
-  }
-
-  if (gtk_list_box_row_get_header (row) != NULL)
-    return;
-
-  header = gtk_separator_new (GTK_ORIENTATION_HORIZONTAL);
-  gtk_widget_show (header);
-  gtk_list_box_row_set_header (row, header);
-}
-
-static void
 ephy_pages_view_init (EphyPagesView *self)
 {
   gtk_widget_init_template (GTK_WIDGET (self));
 
-  gtk_list_box_set_header_func (self->list_box, separator_header, NULL, NULL);
-
   self->list_store = g_list_store_new (EPHY_TYPE_PAGE_ROW);
 
   gtk_list_box_bind_model (self->list_box,
diff --git a/src/resources/gtk/page-row.ui b/src/resources/gtk/page-row.ui
index 17bcb9278..43c42d92f 100644
--- a/src/resources/gtk/page-row.ui
+++ b/src/resources/gtk/page-row.ui
@@ -13,6 +13,7 @@
           <object class="GtkBox" id="box">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
+            <property name="margin-start">6</property>
             <child>
               <object class="GtkStack" id="icon_stack">
                 <property name="visible">True</property>
@@ -98,7 +99,7 @@
                 <style>
                   <class name="flat"/>
                   <class name="image-button"/>
-                  <class name="page-row-close-button"/>
+                  <class name="close-button"/>
                 </style>
               </object>
               <packing>
diff --git a/src/resources/gtk/pages-popover.ui b/src/resources/gtk/pages-popover.ui
index 219ec5dcd..d1c84d8a2 100644
--- a/src/resources/gtk/pages-popover.ui
+++ b/src/resources/gtk/pages-popover.ui
@@ -2,6 +2,9 @@
 <interface>
   <!-- interface-requires gtk+ 3.16 -->
   <template class="EphyPagesPopover" parent="GtkPopover">
+    <style>
+      <class name="combo"/>
+    </style>
     <child>
       <object class="GtkScrolledWindow" id="scrolled_window">
         <property name="hscrollbar_policy">never</property>
@@ -10,16 +13,12 @@
         <property name="visible">True</property>
         <child>
           <object class="GtkListBox" id="list_box">
-            <property name="margin_bottom">12</property>
-            <property name="margin_end">12</property>
-            <property name="margin_start">12</property>
-            <property name="margin_top">12</property>
             <property name="selection_mode">single</property>
             <property name="visible">True</property>
             <property name="width_request">300</property>
             <signal name="row-selected" handler="row_selected_cb" swapped="true"/>
             <style>
-              <class name="transparent"/>
+              <class name="pages-list"/>
             </style>
           </object>
         </child>
diff --git a/src/resources/gtk/pages-view.ui b/src/resources/gtk/pages-view.ui
index cb97d1979..d9e576bcd 100644
--- a/src/resources/gtk/pages-view.ui
+++ b/src/resources/gtk/pages-view.ui
@@ -2,6 +2,7 @@
 <interface>
   <!-- interface-requires gtk+ 3.16 -->
   <template class="EphyPagesView" parent="GtkScrolledWindow">
+    <property name="name">pages-view</property>
     <property name="hscrollbar_policy">never</property>
     <property name="propagate_natural_height">True</property>
     <property name="visible">True</property>
@@ -12,7 +13,7 @@
         <property name="width_request">300</property>
         <signal name="row-activated" handler="row_activated_cb" swapped="true"/>
         <style>
-          <class name="transparent"/>
+          <class name="pages-list"/>
         </style>
       </object>
     </child>
diff --git a/src/resources/themes/_Adwaita-base.scss b/src/resources/themes/_Adwaita-base.scss
index 01a51b9e8..a533e18ff 100644
--- a/src/resources/themes/_Adwaita-base.scss
+++ b/src/resources/themes/_Adwaita-base.scss
@@ -13,27 +13,24 @@
 
 @import 'drawing';
 
-$close_button_fg_color: if($variant == 'light', lighten($fg_color, 10%), darken($fg_color, 10%));
-@mixin close_button($bg:$bg_color, $fg:$close_button_fg_color) {
+@mixin close_button($fg:$fg_color) {
   background: none;
   border: none;
   box-shadow: none;
-
-  &:last-child {
-    image {
-      color: $fg;
-      border: 1px solid transparent;
-      border-radius: 5px;
-    }
-
-    &:hover image {
-      @include button(normal, $bg, $fg);
-      @include button(hover, $bg, $fg);
-    }
-
-    &:active image {
-      @include button(normal, $bg, $fg);
-      @include button(active, $bg, $fg);
+  -gtk-icon-shadow: none;
+  text-shadow: none;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 99px;
+  color: inherit;
+  padding: 0;
+  margin: 2px;
+
+  &:hover {
+    background: gtkalpha($fg, .15);
+
+    &:active {
+      background: gtkalpha(black, .2);
     }
   }
 }
@@ -53,19 +50,7 @@ $close_button_fg_color: if($variant == 'light', lighten($fg_color, 10%), darken(
 }
 
 .bookmark-tag-widget-selected button {
-  @include close_button($selected_bg_color, $selected_fg_color);
-}
-
-.page-row-close-button {
-  @include close_button();
-
-  row:selected & {
-    @include close_button($selected_bg_color, $selected_fg_color);
-  }
-
-  row.narrow & image {
-    padding: 6px;
-  }
+  @include close_button($selected_fg_color);
 }
 
 @keyframes needs_attention_keyframes {
@@ -129,3 +114,45 @@ $close_button_fg_color: if($variant == 'light', lighten($fg_color, 10%), darken(
     }
   }
 }
+
+$menu_selected_color: if($variant == 'light', darken($bg_color, 6%), darken($bg_color, 8%));
+
+@if $high_contrast {
+  $menu_selected_color: darken($bg_color,10%);
+}
+
+.pages-list {
+  margin: 5px;
+
+  row {
+    min-height: 36px;
+    padding: 3px;
+    border-radius: 5px;
+    -gtk-outline-radius: 5px;
+    border: none;
+    color: $fg_color;
+    transition: none;
+    box-shadow: none;
+
+    &:not(:last-child) {
+      margin-bottom: 2px;
+    }
+
+    &:selected {
+      background: $menu_selected_color;
+    }
+
+    &:hover {
+      background: darken($menu_selected_color,5%);
+    }
+
+    .close-button {
+      @include close_button();
+
+      #pages-view & {
+        min-width: 36px;
+        min-height: 36px;
+      }
+    }
+  }
+}
diff --git a/src/resources/themes/_shared-base.scss b/src/resources/themes/_shared-base.scss
index 868e70964..c43113a12 100644
--- a/src/resources/themes/_shared-base.scss
+++ b/src/resources/themes/_shared-base.scss
@@ -209,7 +209,7 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
   }
 }
 
-.transparent {
+.pages-list {
   background: none;
 }