[nautilus/wip/antoniof/draw-shadow-directly: 9/10] css: Don't use -gtk-icon-shadow for thumbnails

[António Fernandes <antoniof src gnome org>]

commit 77ba1d76f7de82bd867a5c149a370dc107c28a74
Author: António Fernandes <antoniof gnome org>
Date:   Tue Mar 1 21:37:23 2022 +0000

    css: Don't use -gtk-icon-shadow for thumbnails
    
    Gaussian blur has high performance impact. Also, thumbnails with
    transparent areas don't get a shadow around their bounding rectangle.
    
    Instead, use gtk_render_background() which is both cheaper and allows
    us to use the same CSS from the GTK 4 port. Furthermore, it allows us
    to set an  opaque background for thumbnails with transparent parts.
    
    Fixes https://gitlab.gnome.org/GNOME/nautilus/-/issues/2161

 src/nautilus-canvas-item.c    | 16 ++++++++++++----
 src/nautilus-list-view.c      |  3 ++-
 src/resources/css/Adwaita.css | 25 +++++++++----------------
 3 files changed, 23 insertions(+), 21 deletions(-)
---
diff --git a/src/nautilus-canvas-item.c b/src/nautilus-canvas-item.c
index f51967d23..436f813d7 100644
--- a/src/nautilus-canvas-item.c
+++ b/src/nautilus-canvas-item.c
@@ -1362,14 +1362,22 @@ nautilus_canvas_item_draw (EelCanvasItem  *item,
     context = gtk_widget_get_style_context (GTK_WIDGET (container));
     gtk_style_context_save (context);
     gtk_style_context_add_class (context, "nautilus-canvas-item");
-    if (details->is_thumbnail)
-    {
-        gtk_style_context_add_class (context, "thumbnail");
-    }
 
     icon_rect = canvas_item->details->icon_rect;
     temp_surface = map_surface (canvas_item);
 
+    if (details->is_thumbnail)
+    {
+        /* Draw box shadow before drawing the thumbnail. */
+        gtk_style_context_save (context);
+        gtk_style_context_add_class (context, "thumbnail");
+        gtk_render_background (context, cr,
+                               icon_rect.x0,
+                               icon_rect.y0,
+                               icon_rect.x1 - icon_rect.x0,
+                               icon_rect.y1 - icon_rect.y0);
+        gtk_style_context_restore (context);
+    }
     gtk_render_icon_surface (context, cr,
                              temp_surface,
                              icon_rect.x0, icon_rect.y0);
diff --git a/src/nautilus-list-view.c b/src/nautilus-list-view.c
index 941d5f5f1..bb7fbe3ee 100644
--- a/src/nautilus-list-view.c
+++ b/src/nautilus-list-view.c
@@ -1672,7 +1672,7 @@ icon_cell_data_func (GtkTreeViewColumn *column,
          * reason, the final surface must be 4px taller and 4px wider, with the
          * original icon starting at (2, 1).
          *
-         *        *************************        -+
+         *        *#######################*        -+
          *        *#.                    #* -+      |
          *        *# \                   #*  |      |
          *        *#  \                  #*  |      |
@@ -1703,6 +1703,7 @@ icon_cell_data_func (GtkTreeViewColumn *column,
 
         gtk_style_context_save (context);
         gtk_style_context_add_class (context, "thumbnail");
+        gtk_render_background (context, cr, 2, 1, w, h);
         gtk_render_icon_surface (context, cr, surface, 2, 1);
         gtk_style_context_restore (context);
 
diff --git a/src/resources/css/Adwaita.css b/src/resources/css/Adwaita.css
index 4991979cf..d259921ce 100644
--- a/src/resources/css/Adwaita.css
+++ b/src/resources/css/Adwaita.css
@@ -12,11 +12,6 @@
     border-radius: 5px;
 }
 
-.nautilus-canvas-item.thumbnail {
-  -gtk-icon-shadow: 0px 1px 2px @borders,
-                    1px 0px 0px alpha(@borders, 0.25),
-                    -1px 0px 0px alpha(@borders, 0.25),
-                    0px 2px 0px alpha(@borders, 0.5);
 }
 
 .nautilus-canvas-item.dim-label {
@@ -194,13 +189,6 @@ entry.search > * {
     border-bottom: 1px solid @theme_bg_color;
 }
 
-.nautilus-list-view.thumbnail {
-  -gtk-icon-shadow: 0px 1px 2px @borders,
-                    1px 0px 0px alpha(@borders, 0.25),
-                    -1px 0px 0px alpha(@borders, 0.25),
-                    0px 2px 0px alpha(@borders, 0.5);
-}
-
 .search-information {
   background-color: @theme_selected_bg_color;
   color:white;
@@ -239,10 +227,6 @@ flowboxchild:selected {
 
 flowboxchild .thumbnail {
   margin: 4px;
-  box-shadow: 0px 1px 2px 0px alpha(@borders, 0.5),
-              0px 0px 0px 1px alpha(@borders, 0.5),
-              0px 2px 0px 0px alpha(@borders, 0.5);
-  border-radius: 2px;
 }
 
 .icon-ui-labels-box {
@@ -262,3 +246,12 @@ flowboxchild:selected image {
   */
   -gtk-icon-shadow: 0px 0px @theme_selected_bg_color;
 }
+
+.thumbnail {
+  box-shadow: 0px 1px 2px 0px alpha(@borders, 0.5),
+              0px 0px 0px 1px alpha(@borders, 0.5),
+              0px 2px 0px 0px alpha(@borders, 0.5);
+  border-radius: 2px;
+  /* Opaque background for thumbnails with transparent areas. */
+  background-color: #fafafa;
+}