scrolledwindow: Rewrite overshoot code with regular styling

Instead of drawing a gradient in the background color, draw a CSS box.

And change the theme so instead of setting just a background color it
draws a gradient.

The resulting visuals are the same.

4 files changed, 90 insertions, 63 deletions

diff --git a/gtk/gtkscrolledwindow.c b/gtk/gtkscrolledwindow.c
index 2902c923e3..875aff2644 100644
--- a/gtk/gtkscrolledwindow.c
+++ b/gtk/gtkscrolledwindow.c
@@ -1627,82 +1627,57 @@ gtk_scrolled_window_draw_overshoot (GtkScrolledWindow *scrolled_window,
 				    cairo_t           *cr)
 {
   GtkWidget *widget = GTK_WIDGET (scrolled_window);
-  GtkAllocation relative_allocation;
   gint overshoot_x, overshoot_y;
-  cairo_pattern_t *pattern;
   GtkStyleContext *context;
-  cairo_matrix_t matrix;
   GdkRectangle rect;
-  gdouble percent;
-  GdkRGBA color;
 
   if (!_gtk_scrolled_window_get_overshoot (scrolled_window, &overshoot_x, &overshoot_y))
     return;
 
-  gtk_scrolled_window_relative_allocation (widget, &relative_allocation);
-
   context = gtk_widget_get_style_context (widget);
+  gtk_scrolled_window_relative_allocation (widget, &rect);
+  overshoot_x = CLAMP (overshoot_x, - MAX_OVERSHOOT_DISTANCE, MAX_OVERSHOOT_DISTANCE);
+  overshoot_y = CLAMP (overshoot_y, - MAX_OVERSHOOT_DISTANCE, MAX_OVERSHOOT_DISTANCE);
+
   gtk_style_context_save (context);
   gtk_style_context_add_class (context, GTK_STYLE_CLASS_OVERSHOOT);
-  gtk_style_context_get_background_color (context,
-					  gtk_widget_get_state_flags (widget),
-					  &color);
 
-  gtk_style_context_restore (context);
+  if (overshoot_x > 0)
+    {
+      gtk_style_context_add_class (context, GTK_STYLE_CLASS_RIGHT);
 
-  if (overshoot_x != 0)
+      gtk_render_background (context, cr, rect.x + rect.width - overshoot_x, rect.y, overshoot_x, rect.height);
+      gtk_render_frame (context, cr, rect.x + rect.width - overshoot_x, rect.y, overshoot_x, rect.height);
+    }
+  else if (overshoot_x < 0)
     {
-      percent = CLAMP (ABS ((gdouble) overshoot_x) / MAX_OVERSHOOT_DISTANCE, 0, 1);
-      rect = relative_allocation;
-      rect.width = MAX_OVERSHOOT_DISTANCE;
+      gtk_style_context_add_class (context, GTK_STYLE_CLASS_LEFT);
 
-      pattern = cairo_pattern_create_linear (0, 0, MAX_OVERSHOOT_DISTANCE, 0);
-      cairo_pattern_add_color_stop_rgba (pattern, 0, color.red, color.green, color.blue, color.alpha * percent);
-      cairo_pattern_add_color_stop_rgba (pattern, percent, color.red, color.green, color.blue, 0);
-      cairo_matrix_init_identity (&matrix);
+      gtk_render_background (context, cr, rect.x, rect.y, -overshoot_x, rect.height);
+      gtk_render_frame (context, cr, rect.x, rect.y, -overshoot_x, rect.height);
+    }
 
-      if (overshoot_x > 0)
-        {
-          rect.x += relative_allocation.width - MAX_OVERSHOOT_DISTANCE;
-          cairo_matrix_translate (&matrix, relative_allocation.width, 0);
-          cairo_matrix_rotate (&matrix, G_PI);
-        }
+  gtk_style_context_restore (context);
 
-      cairo_pattern_set_matrix (pattern, &matrix);
+  gtk_style_context_save (context);
+  gtk_style_context_add_class (context, GTK_STYLE_CLASS_OVERSHOOT);
 
-      gdk_cairo_rectangle (cr, &rect);
-      cairo_set_source (cr, pattern);
-      cairo_fill (cr);
+  if (overshoot_y > 0)
+    {
+      gtk_style_context_add_class (context, GTK_STYLE_CLASS_BOTTOM);
 
-      cairo_pattern_destroy (pattern);
+      gtk_render_background (context, cr, rect.x, rect.y + rect.height - overshoot_y, rect.width, overshoot_y);
+      gtk_render_frame (context, cr, rect.x, rect.y + rect.height - overshoot_y, rect.width, overshoot_y);
     }
-
-  if (overshoot_y != 0)
+  else if (overshoot_y < 0)
     {
-      percent = CLAMP (ABS ((gdouble) overshoot_y) / MAX_OVERSHOOT_DISTANCE, 0, 1);
-      rect = relative_allocation;
-      rect.height = MAX_OVERSHOOT_DISTANCE;
-
-      pattern = cairo_pattern_create_linear (0, 0, 0, MAX_OVERSHOOT_DISTANCE);
-      cairo_pattern_add_color_stop_rgba (pattern, 0, color.red, color.green, color.blue, color.alpha * percent);
-      cairo_pattern_add_color_stop_rgba (pattern, percent, color.red, color.green, color.blue, 0);
-      cairo_matrix_init_identity (&matrix);
+      gtk_style_context_add_class (context, GTK_STYLE_CLASS_TOP);
 
-      if (overshoot_y > 0)
-        {
-          rect.y += relative_allocation.height - MAX_OVERSHOOT_DISTANCE;
-          cairo_matrix_translate (&matrix, 0, relative_allocation.height);
-          cairo_matrix_rotate (&matrix, G_PI);
-        }
-
-      cairo_pattern_set_matrix (pattern, &matrix);
-
-      cairo_set_source (cr, pattern);
-      gdk_cairo_rectangle (cr, &rect);
-      cairo_fill (cr);
-
-      cairo_pattern_destroy (pattern);
+      gtk_render_background (context, cr, rect.x, rect.y, rect.width, -overshoot_y);
+      gtk_render_frame (context, cr, rect.x, rect.y, rect.width, -overshoot_y);
     }
+
+  gtk_style_context_restore (context);
 }
 
 static gboolean
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 07047730bd..070b93c788 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -119,12 +119,28 @@
   background-color: transparentize($selected_bg_color,0.8);
 }
 
-// This is used by GtkScrolledWindow, when rendering the edge
-// gradient shown when content is touch-dragged past boundaries.
-// The color is used as a base for such gradient, which is then
-// stretched/modified as a direct result of user interaction.
+// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
 .overshoot {
-  background-color: transparentize($selected_bg_color,0.8);
+  &.top {
+    background: linear-gradient(to top, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
+    background-size: auto 100px;
+    background-position: center 100%;
+  }
+  &.bottom {
+    background: linear-gradient(to bottom, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
+    background-size: auto 100px;
+    background-position: center 0%;
+  }
+  &.left {
+    background: linear-gradient(to left, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
+    background-size: 100px auto;
+    background-position: 100% center;
+  }
+  &.right {
+    background: linear-gradient(to right, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
+    background-size: 100px auto;
+    background-position: 0% center;
+  }
 }
 
 GtkLabel {
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 8160a3f03f..a3ed6aac12 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -75,8 +75,22 @@
   border: 1px solid #215d9c;
   background-color: rgba(33, 93, 156, 0.2); }
 
-.overshoot {
-  background-color: rgba(33, 93, 156, 0.2); }
+.overshoot.top {
+  background: linear-gradient(to top, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
+  background-size: auto 100px;
+  background-position: center 100%; }
+.overshoot.bottom {
+  background: linear-gradient(to bottom, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
+  background-size: auto 100px;
+  background-position: center 0%; }
+.overshoot.left {
+  background: linear-gradient(to left, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
+  background-size: 100px auto;
+  background-position: 100% center; }
+.overshoot.right {
+  background: linear-gradient(to right, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
+  background-size: 100px auto;
+  background-position: 0% center; }
 
 GtkLabel.separator, .sidebar GtkLabel.separator:backdrop,
 .sidebar .view GtkLabel.separator:backdrop {
@@ -4167,6 +4181,10 @@ GtkCalendar.header .menuitem.titlebutton.button:selected, .list-row:selected {
 .context-menu {
   font: initial; }
 
+/* Decouple the font of context menus from their entry/textview */
+.context-menu {
+  font: initial; }
+
 /* GTK NAMED COLORS */
 @define-color theme_fg_color #eeeeec;
 @define-color theme_bg_color #393f3f;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 49f5d121ca..9a81aeb471 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -75,8 +75,22 @@
   border: 1px solid #4a90d9;
   background-color: rgba(74, 144, 217, 0.2); }
 
-.overshoot {
-  background-color: rgba(74, 144, 217, 0.2); }
+.overshoot.top {
+  background: linear-gradient(to top, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
+  background-size: auto 100px;
+  background-position: center 100%; }
+.overshoot.bottom {
+  background: linear-gradient(to bottom, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
+  background-size: auto 100px;
+  background-position: center 0%; }
+.overshoot.left {
+  background: linear-gradient(to left, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
+  background-size: 100px auto;
+  background-position: 100% center; }
+.overshoot.right {
+  background: linear-gradient(to right, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
+  background-size: 100px auto;
+  background-position: 0% center; }
 
 GtkLabel.separator, .sidebar GtkLabel.separator:backdrop,
 .sidebar .view GtkLabel.separator:backdrop {
@@ -4329,6 +4343,10 @@ GtkCalendar.header .menuitem.titlebutton.button:selected, .list-row:selected {
 .context-menu {
   font: initial; }
 
+/* Decouple the font of context menus from their entry/textview */
+.context-menu {
+  font: initial; }
+
 /* GTK NAMED COLORS */
 @define-color theme_fg_color #2e3436;
 @define-color theme_bg_color #ededed;