st-scroll-view: Make the fade effect and offset themable

Theme authors now have the power (and responsibility) of creating fade
effects with the new CSS length property '-st-fade-offset'. A value of
0 disables the effect.

This new CSS approach replaces the current programmatic toggle of
the 'vfade' property. A new CSS style class name 'vfade' is used as
a replacement for the old property.

https://bugzilla.gnome.org/show_bug.cgi?id=651813

data/theme/gnome-shell.css

@@ -39,6 +39,11 @@ StScrollBar
   padding: 0px;
 }
 
+StScrollView.vfade
+{
+  -st-vfade-offset: 68px;
+}
+
 StScrollView StScrollBar
 {
   min-width: 16px;

js/ui/appDisplay.js

@@ -44,7 +44,7 @@ AlphabeticalView.prototype = {
         this.actor = new St.ScrollView({ x_fill: true,
                                          y_fill: false,
                                          y_align: St.Align.START,
-                                         vfade: true });
+                                         style_class: 'vfade' });
         this.actor.add_actor(box);
         this.actor.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
         this.actor.connect('notify::mapped', Lang.bind(this,

js/ui/messageTray.js

@@ -557,7 +557,7 @@ Notification.prototype = {
         this._scrollArea = new St.ScrollView({ name: 'notification-scrollview',
                                                vscrollbar_policy: this._scrollPolicy,
                                                hscrollbar_policy: Gtk.PolicyType.NEVER,
-                                               vfade: true });
+                                               style_class: 'vfade' });
         this._table.add(this._scrollArea, { row: 1, col: 1 });
         this._contentArea = new St.BoxLayout({ name: 'notification-body',
                                                vertical: true });
@@ -1002,7 +1002,7 @@ SummaryItem.prototype = {
         this.notificationStackView = new St.ScrollView({ name: source.isChat ? '' : 'summary-notification-stack-scrollview',
                                                          vscrollbar_policy: source.isChat ? Gtk.PolicyType.NEVER : Gtk.PolicyType.AUTOMATIC,
                                                          hscrollbar_policy: Gtk.PolicyType.NEVER,
-                                                         vfade: true });
+                                                         style_class: 'vfade' });
         this.notificationStack = new St.BoxLayout({ name: 'summary-notification-stack',
                                                      vertical: true });
         this.notificationStackView.add_actor(this.notificationStack);

js/ui/searchDisplay.js

@@ -192,7 +192,7 @@ SearchResults.prototype = {
 
         let scrollView = new St.ScrollView({ x_fill: true,
                                              y_fill: false,
-                                             vfade: true });
+                                             style_class: 'vfade' });
         scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
         scrollView.add_actor(this._content);
 

src/st/st-scroll-view.c

@@ -97,7 +97,6 @@ struct _StScrollViewPrivate
   gfloat        row_size;
   gfloat        column_size;
 
-  gboolean      vfade;
   StScrollViewFade *vfade_effect;
 
   gboolean      row_size_set : 1;
@@ -115,7 +114,6 @@ enum {
   PROP_HSCROLLBAR_POLICY,
   PROP_VSCROLLBAR_POLICY,
   PROP_MOUSE_SCROLL,
-  PROP_VFADE
 };
 
 static void
@@ -143,51 +141,48 @@ st_scroll_view_get_property (GObject    *object,
     case PROP_MOUSE_SCROLL:
       g_value_set_boolean (value, priv->mouse_scroll);
       break;
-    case PROP_VFADE:
-      g_value_set_boolean (value, priv->vfade);
-      break;
     default:
       G_OBJECT_WARN_INVALID_PROPERTY_ID (object, property_id, pspec);
     }
 }
 
 /**
- * st_scroll_view_set_vfade:
+ * st_scroll_view_update_vfade_effect:
  * @self: a #StScrollView
- * @vfade: Whether to enable the vertical fade effect
+ * @fade_offset: The length of the fade effect, in pixels.
  *
- * Sets whether to fade the content at the top and bottom of the area when not
+ * Sets the height of the fade area area in pixels. A value of 0
- * fully scrolled to that edge.
+ * disables the effect.
  */
-void
+static void
-st_scroll_view_set_vfade (StScrollView *self,
+st_scroll_view_update_vfade_effect (StScrollView *self,
-                          gboolean vfade)
+                                    float fade_offset)
 {
   StScrollViewPrivate *priv = ST_SCROLL_VIEW (self)->priv;
 
-  vfade = vfade != FALSE;
+  /* A fade amount of more than 0 enables the effect. */
-  if (priv->vfade == vfade)
+  if (fade_offset > 0.)
-    return;
-
-  priv->vfade = vfade;
-
-  if (vfade)
     {
-      if (priv->vfade_effect == NULL)
+      if (priv->vfade_effect == NULL) {
         priv->vfade_effect = g_object_new (ST_TYPE_SCROLL_VIEW_FADE, NULL);
 
-      clutter_actor_add_effect_with_name (CLUTTER_ACTOR (self), "vfade",
+        clutter_actor_add_effect_with_name (CLUTTER_ACTOR (self), "vfade",
-                                          CLUTTER_EFFECT (priv->vfade_effect));
+                                            CLUTTER_EFFECT (priv->vfade_effect));
+      }
+
+      g_object_set (priv->vfade_effect,
+                    "fade-offset", fade_offset,
+                    NULL);
     }
    else
     {
-      clutter_actor_remove_effect (CLUTTER_ACTOR (self), CLUTTER_EFFECT (priv->vfade_effect));
+      if (priv->vfade_effect != NULL) {
-      priv->vfade_effect = NULL;
+        clutter_actor_remove_effect (CLUTTER_ACTOR (self), CLUTTER_EFFECT (priv->vfade_effect));
+        priv->vfade_effect = NULL;
+      }
     }
 
   clutter_actor_queue_redraw (CLUTTER_ACTOR (self));
-
-  g_object_notify (G_OBJECT (self), "vfade");
 }
 
 static void
@@ -201,9 +196,6 @@ st_scroll_view_set_property (GObject      *object,
 
   switch (property_id)
     {
-    case PROP_VFADE:
-      st_scroll_view_set_vfade (self, g_value_get_boolean (value));
-      break;
     case PROP_MOUSE_SCROLL:
       st_scroll_view_set_mouse_scrolling (self,
                                           g_value_get_boolean (value));
@@ -661,7 +653,12 @@ st_scroll_view_allocate (ClutterActor          *actor,
 static void
 st_scroll_view_style_changed (StWidget *widget)
 {
-  StScrollViewPrivate *priv = ST_SCROLL_VIEW (widget)->priv;
+  StScrollView *self = ST_SCROLL_VIEW (widget);
+  StScrollViewPrivate *priv = self->priv;
+
+  StThemeNode *theme_node = st_widget_get_theme_node (widget);
+  gdouble fade_offset = st_theme_node_get_length (theme_node, "-st-vfade-offset");
+  st_scroll_view_update_vfade_effect (self, fade_offset);
 
   st_widget_style_changed (ST_WIDGET (priv->hscroll));
   st_widget_style_changed (ST_WIDGET (priv->vscroll));
@@ -798,14 +795,6 @@ st_scroll_view_class_init (StScrollViewClass *klass)
                                    PROP_MOUSE_SCROLL,
                                    pspec);
 
-  pspec = g_param_spec_boolean ("vfade",
-                                "Vertical Shadows",
-                                "Fade the content at the top and and bottom of the area unless fully scrolled to that edge",
-                                FALSE,
-                                G_PARAM_READWRITE);
-  g_object_class_install_property (object_class,
-                                   PROP_VFADE,
-                                   pspec);
 }
 
 static void

src/st/st-scroll-view.h

@@ -84,9 +84,6 @@ void          st_scroll_view_set_policy          (StScrollView   *scroll,
                                                   GtkPolicyType   hscroll,
                                                   GtkPolicyType   vscroll);
 
-void          st_scroll_view_set_vfade           (StScrollView *self,
-                                                  gboolean      vfade);
-
 G_END_DECLS
 
 #endif /* __ST_SCROLL_VIEW_H__ */

tests/interactive/scroll-view-sizing.js

@@ -338,7 +338,7 @@ function toggleFade(button) {
 	button.label = 'No';
 	break;
     }
-    scrollView.set_vfade(vfade.label == 'Yes');
+    scrollView.set_style_class_name(button.label == 'Yes' ? 'vfade' : '');
 }
 
 vfade.connect('clicked', function() { toggleFade(vfade); });

tests/testcommon/test.css

@@ -68,3 +68,7 @@ stage {
 .push-button:active {
     background: #ccbb99;
 }
+
+.vfade {
+    -st-fade-offset: 68px;
+}