[gnome-builder/wip/gtk4-port] libide/greeter: toggle transparent separator on scroll

[Christian Hergert <chergert src gnome org>]

commit 97783e90606b32fa0e22adbac88269c22d4117fe
Author: Christian Hergert <chergert redhat com>
Date:   Mon May 16 12:53:14 2022 -0700

    libide/greeter: toggle transparent separator on scroll
    
    This makes an invisible separator visible when the scrolledwindow is
    scrolled away from the zero position.
    
    This uses a separator instead of box-shadow/border so that we can be
    certain we don't affect the layout/sizing during the transition to reduce
    chances of stutter.
    
    Normally I don't use opacity: if i can help it, but in this case the GL
    renderer knows how to simply alter alpha in the destination color instead
    of an offscreen.
    
    Fixes #1674

 src/libide/greeter/ide-greeter-workspace.c  | 27 ++++++++++++++++++++++++++-
 src/libide/greeter/ide-greeter-workspace.ui |  9 ++++++++-
 src/libide/gui/style.css                    |  4 ++++
 3 files changed, 38 insertions(+), 2 deletions(-)
---
diff --git a/src/libide/greeter/ide-greeter-workspace.c b/src/libide/greeter/ide-greeter-workspace.c
index 05d1d1013..22e7a2218 100644
--- a/src/libide/greeter/ide-greeter-workspace.c
+++ b/src/libide/greeter/ide-greeter-workspace.c
@@ -65,6 +65,8 @@ struct _IdeGreeterWorkspace
   AdwWindowTitle           *title;
   IdeGreeterButtonsSection *buttons_section;
   AdwStatusPage            *empty_state;
+  GtkScrolledWindow        *scroller;
+  GtkSeparator             *separator;
 
   guint                     selection_mode : 1;
 };
@@ -627,6 +629,19 @@ ide_greeter_workspace_page_action (GtkWidget  *widget,
   IDE_EXIT;
 }
 
+static void
+on_scroller_value_changed_cb (IdeGreeterWorkspace *self,
+                              GtkAdjustment       *adj)
+{
+  g_assert (IDE_IS_GREETER_WORKSPACE (self));
+  g_assert (GTK_IS_ADJUSTMENT (adj));
+
+  if (gtk_adjustment_get_value (adj) > .0)
+    gtk_widget_remove_css_class (GTK_WIDGET (self->separator), "transparent");
+  else
+    gtk_widget_add_css_class (GTK_WIDGET (self->separator), "transparent");
+}
+
 static void
 ide_greeter_workspace_dispose (GObject *object)
 {
@@ -729,11 +744,13 @@ ide_greeter_workspace_class_init (IdeGreeterWorkspaceClass *klass)
   gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, empty_state);
   gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, header_bar);
   gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, left_box);
+  gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, pages);
   gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, projects_action_bar);
+  gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, scroller);
   gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, search_entry);
   gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, sections);
   gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, select_button);
-  gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, pages);
+  gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, separator);
   gtk_widget_class_bind_template_child (widget_class, IdeGreeterWorkspace, title);
   gtk_widget_class_bind_template_callback (widget_class, stack_notify_visible_child_cb);
 
@@ -757,10 +774,18 @@ ide_greeter_workspace_init (IdeGreeterWorkspace *self)
   };
 
   g_autoptr(GPropertyAction) selection_action = NULL;
+  GtkAdjustment *vadj;
   GtkGesture *gesture;
 
   gtk_widget_init_template (GTK_WIDGET (self));
 
+  vadj = gtk_scrolled_window_get_vadjustment (self->scroller);
+  g_signal_connect_object (vadj,
+                           "value-changed",
+                           G_CALLBACK (on_scroller_value_changed_cb),
+                           self,
+                           G_CONNECT_SWAPPED);
+
   selection_action = g_property_action_new ("selection-mode", G_OBJECT (self), "selection-mode");
   g_action_map_add_action (G_ACTION_MAP (self), G_ACTION (selection_action));
   g_action_map_add_action_entries (G_ACTION_MAP (self), actions, G_N_ELEMENTS (actions), self);
diff --git a/src/libide/greeter/ide-greeter-workspace.ui b/src/libide/greeter/ide-greeter-workspace.ui
index 959896ac9..d13b2270f 100644
--- a/src/libide/greeter/ide-greeter-workspace.ui
+++ b/src/libide/greeter/ide-greeter-workspace.ui
@@ -59,7 +59,14 @@
               <object class="GtkBox">
                 <property name="orientation">vertical</property>
                 <child>
-                  <object class="GtkScrolledWindow">
+                  <object class="GtkSeparator" id="separator">
+                    <style>
+                      <class name="transparent"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkScrolledWindow" id="scroller">
                     <property name="vexpand">true</property>
                     <property name="hscrollbar-policy">never</property>
                     <child>
diff --git a/src/libide/gui/style.css b/src/libide/gui/style.css
index 4c225cc1e..3fce28b81 100644
--- a/src/libide/gui/style.css
+++ b/src/libide/gui/style.css
@@ -63,6 +63,10 @@ notificationstack button {
   background: none;
 }
 
+separator.transparent {
+  opacity: 0;
+}
+
 button.pill.small {
   font-size: .83333em;
   border-radius: 99px;