background: Port to GTK4

CcBackgroundPreview required some layout changes, but
overall a pretty easy port.

13 files changed, 154 insertions, 228 deletions

diff --git a/meson.build b/meson.build
index 69a9c68b4..af30e4ec3 100644
--- a/meson.build
+++ b/meson.build
@@ -114,6 +114,7 @@ gdk_pixbuf_dep = dependency('gdk-pixbuf-2.0', version: '>= 2.23.0')
 gio_dep = dependency('gio-2.0')
 glib_dep = dependency('glib-2.0', version: '>= 2.68.0')
 gnome_desktop_dep = dependency('gnome-desktop-4')
+gnome_bg_dep = dependency('gnome-bg-4')
 gnome_settings_dep = dependency('gnome-settings-daemon', version: '>= 3.27.90')
 goa_dep = dependency('goa-1.0', version: goa_req_version)
 gsettings_desktop_dep = dependency('gsettings-desktop-schemas', version: '>= 40.alpha')
diff --git a/panels/background/cc-background-chooser.c b/panels/background/cc-background-chooser.c
index 04fd85c47..14a812410 100644
--- a/panels/background/cc-background-chooser.c
+++ b/panels/background/cc-background-chooser.c
@@ -92,7 +92,7 @@ create_widget_func (gpointer model_item,
   CcBackgroundItem *item;
   GtkWidget *overlay;
   GtkWidget *child;
-  GtkWidget *image;
+  GtkWidget *picture;
   GtkWidget *icon;
   GtkWidget *button = NULL;
   BgSource *source;
@@ -104,10 +104,10 @@ create_widget_func (gpointer model_item,
                                              bg_source_get_thumbnail_width (source),
                                              bg_source_get_thumbnail_height (source),
                                              bg_source_get_scale_factor (source));
-  image = gtk_image_new_from_gicon (G_ICON (pixbuf), GTK_ICON_SIZE_DIALOG);
-  gtk_widget_show (image);
+  picture = gtk_picture_new_for_pixbuf (pixbuf);
+  gtk_picture_set_can_shrink (GTK_PICTURE (picture), FALSE);
 
-  icon = gtk_image_new_from_icon_name("slideshow-emblem", GTK_ICON_SIZE_BUTTON);
+  icon = gtk_image_new_from_icon_name ("slideshow-emblem");
   gtk_image_set_pixel_size (GTK_IMAGE (icon), 16);
   gtk_widget_set_margin_start (icon, 8);
   gtk_widget_set_margin_end (icon, 8);
@@ -116,22 +116,20 @@ create_widget_func (gpointer model_item,
   gtk_widget_set_halign (icon, GTK_ALIGN_END);
   gtk_widget_set_valign (icon, GTK_ALIGN_END);
   gtk_widget_set_visible (icon, cc_background_item_changes_with_time (item));
-  gtk_style_context_add_class (gtk_widget_get_style_context (icon), "slideshow-emblem");
-
+  gtk_widget_add_css_class (icon, "slideshow-emblem");
 
   if (BG_IS_RECENT_SOURCE (source))
     {
-      button = gtk_button_new_from_icon_name ("window-close-symbolic", GTK_ICON_SIZE_BUTTON);
+      button = gtk_button_new_from_icon_name ("window-close-symbolic");
       gtk_widget_set_halign (button, GTK_ALIGN_END);
       gtk_widget_set_valign (button, GTK_ALIGN_START);
       gtk_widget_set_margin_start (icon, 6);
       gtk_widget_set_margin_end (icon, 6);
       gtk_widget_set_margin_top (icon, 6);
       gtk_widget_set_margin_bottom (icon, 6);
-      gtk_widget_show (button);
 
-      gtk_style_context_add_class (gtk_widget_get_style_context (button), "osd");
-      gtk_style_context_add_class (gtk_widget_get_style_context (button), "remove-button");
+      gtk_widget_add_css_class (button, "osd");
+      gtk_widget_add_css_class (button, "remove-button");
 
       g_signal_connect (button,
                         "clicked",
@@ -140,17 +138,15 @@ create_widget_func (gpointer model_item,
     }
 
   overlay = gtk_overlay_new ();
-  gtk_container_add (GTK_CONTAINER (overlay), image);
+  gtk_overlay_set_child (GTK_OVERLAY (overlay), picture);
   gtk_overlay_add_overlay (GTK_OVERLAY (overlay), icon);
   if (button)
     gtk_overlay_add_overlay (GTK_OVERLAY (overlay), button);
-  gtk_widget_show (overlay);
 
-  child = gtk_flow_box_child_new();
+  child = gtk_flow_box_child_new ();
   gtk_widget_set_halign (child, GTK_ALIGN_CENTER);
   gtk_widget_set_valign (child, GTK_ALIGN_CENTER);
-  gtk_container_add (GTK_CONTAINER (child), overlay);
-  gtk_widget_show (child);
+  gtk_flow_box_child_set_child (GTK_FLOW_BOX_CHILD (child), overlay);
 
   g_object_set_data_full (G_OBJECT (child), "item", g_object_ref (item), g_object_unref);
 
@@ -218,67 +214,20 @@ on_file_chooser_response_cb (GtkDialog           *filechooser,
 {
   if (response == GTK_RESPONSE_ACCEPT)
     {
-      g_autoptr(GSList) filenames = NULL;
-      GSList *l;
+      g_autoptr(GListModel) files = NULL;
+      guint i;
 
-      filenames = gtk_file_chooser_get_filenames (GTK_FILE_CHOOSER (filechooser));
-      for (l = filenames; l != NULL; l = l->next)
+      files = gtk_file_chooser_get_files (GTK_FILE_CHOOSER (filechooser));
+      for (i = 0; i < g_list_model_get_n_items (files); i++)
         {
-          g_autofree gchar *filename = l->data;
+          g_autoptr(GFile) file = g_list_model_get_item (files, i);
+          g_autofree gchar *filename = g_file_get_path (file);
 
           bg_recent_source_add_file (self->recent_source, filename);
         }
     }
 
-  gtk_widget_destroy (GTK_WIDGET (filechooser));
-}
-
-static void
-on_file_chooser_selection_changed_cb (GtkFileChooser               *chooser,
-                                      GnomeDesktopThumbnailFactory *thumbnail_factory)
-{
-  g_autofree gchar *uri = NULL;
-
-  uri = gtk_file_chooser_get_uri (chooser);
-
-  if (uri)
-    {
-      g_autoptr(GFileInfo) file_info = NULL;
-      g_autoptr(GdkPixbuf) pixbuf = NULL;
-      g_autofree gchar *mime_type = NULL;
-      g_autoptr(GFile) file = NULL;
-      GtkWidget *preview;
-
-      preview = gtk_file_chooser_get_preview_widget (chooser);
-
-      file = g_file_new_for_uri (uri);
-      file_info = g_file_query_info (file,
-                                     "standard::*",
-                                     G_FILE_QUERY_INFO_NONE,
-                                     NULL,
-                                     NULL);
-
-      if (file_info && g_file_info_get_file_type (file_info) != G_FILE_TYPE_DIRECTORY)
-        mime_type = g_strdup (g_file_info_get_content_type (file_info));
-
-      if (mime_type)
-        {
-          pixbuf = gnome_desktop_thumbnail_factory_generate_thumbnail (thumbnail_factory,
-                                                                       uri,
-                                                                       mime_type);
-        }
-
-      gtk_dialog_set_response_sensitive (GTK_DIALOG (chooser),
-                                         GTK_RESPONSE_ACCEPT,
-                                         pixbuf != NULL);
-
-      if (pixbuf)
-        gtk_image_set_from_pixbuf (GTK_IMAGE (preview), pixbuf);
-      else
-        gtk_image_set_from_icon_name (GTK_IMAGE (preview), "dialog-question", GTK_ICON_SIZE_DIALOG);
-    }
-
-  gtk_file_chooser_set_preview_widget_active (chooser, TRUE);
+  gtk_window_destroy (GTK_WINDOW (filechooser));
 }
 
 /* GObject overrides */
@@ -332,15 +281,14 @@ cc_background_chooser_init (CcBackgroundChooser *self)
 void
 cc_background_chooser_select_file (CcBackgroundChooser *self)
 {
-  g_autoptr(GnomeDesktopThumbnailFactory) factory = NULL;
+  g_autoptr(GFile) pictures_folder = NULL;
   GtkFileFilter *filter;
   GtkWidget *filechooser;
   GtkWindow *toplevel;
-  GtkWidget *preview;
 
   g_return_if_fail (CC_IS_BACKGROUND_CHOOSER (self));
 
-  toplevel = (GtkWindow*) gtk_widget_get_toplevel (GTK_WIDGET (self));
+  toplevel = (GtkWindow*) gtk_widget_get_native (GTK_WIDGET (self));
   filechooser = gtk_file_chooser_dialog_new (_("Select a picture"),
                                              toplevel,
                                              GTK_FILE_CHOOSER_ACTION_OPEN,
@@ -349,30 +297,14 @@ cc_background_chooser_select_file (CcBackgroundChooser *self)
                                              NULL);
   gtk_window_set_modal (GTK_WINDOW (filechooser), TRUE);
 
-  preview = gtk_image_new ();
-  gtk_widget_set_size_request (preview, 154, -1);
-  gtk_file_chooser_set_preview_widget (GTK_FILE_CHOOSER (filechooser), preview);
-  gtk_file_chooser_set_use_preview_label (GTK_FILE_CHOOSER (filechooser), FALSE);
-  gtk_file_chooser_set_select_multiple (GTK_FILE_CHOOSER (filechooser), TRUE);
-  gtk_widget_show (preview);
-
-  factory = gnome_desktop_thumbnail_factory_new (GNOME_DESKTOP_THUMBNAIL_SIZE_LARGE);
-  g_signal_connect_after (filechooser,
-                          "selection-changed",
-                          G_CALLBACK (on_file_chooser_selection_changed_cb),
-                          factory);
-
-  g_object_set_data_full (G_OBJECT (filechooser),
-                          "factory",
-                          g_object_ref (factory),
-                          g_object_unref);
-
   filter = gtk_file_filter_new ();
   gtk_file_filter_add_pixbuf_formats (filter);
   gtk_file_chooser_set_filter (GTK_FILE_CHOOSER (filechooser), filter);
 
+  pictures_folder = g_file_new_for_path (g_get_user_special_dir (G_USER_DIRECTORY_PICTURES));
   gtk_file_chooser_set_current_folder (GTK_FILE_CHOOSER (filechooser),
-                                       g_get_user_special_dir (G_USER_DIRECTORY_PICTURES));
+                                       pictures_folder,
+                                       NULL);
 
   g_signal_connect_object (filechooser,
                            "response",
diff --git a/panels/background/cc-background-chooser.ui b/panels/background/cc-background-chooser.ui
index aa7da281a..1609d4cab 100644
--- a/panels/background/cc-background-chooser.ui
+++ b/panels/background/cc-background-chooser.ui
@@ -1,31 +1,24 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <template class="CcBackgroundChooser" parent="GtkBox">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
     <property name="orientation">vertical</property>
 
     <child>
       <object class="GtkSeparator">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
       </object>
     </child>
 
     <child>
       <object class="GtkScrolledWindow">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="expand">True</property>
-        <property name="shadow-type">none</property>
+        <property name="hexpand">True</property>
+        <property name="vexpand">True</property>
         <property name="hscrollbar-policy">never</property>
         <property name="vscrollbar-policy">automatic</property>
         <child>
           <object class="GtkBox">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
             <property name="orientation">vertical</property>
-            <property name="expand">True</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
             <style>
               <class name="view" />
             </style>
@@ -33,15 +26,15 @@
             <!-- Recent -->
             <child>
               <object class="GtkBox" id="recent_box">
-                <property name="visible">True</property>
-                <property name="can-focus">True</property>
                 <property name="orientation">vertical</property>
                 <property name="halign">center</property>
 
                 <child>
                   <object class="GtkFlowBox" id="recent_flowbox">
-                    <property name="visible">True</property>
-                    <property name="margin">12</property>
+                    <property name="margin-start">12</property>
+                    <property name="margin-end">12</property>
+                    <property name="margin-top">12</property>
+                    <property name="margin-bottom">12</property>
                     <property name="column-spacing">12</property>
                     <property name="row-spacing">12</property>
                     <property name="homogeneous">True</property>
@@ -56,8 +49,6 @@
 
                 <child>
                   <object class="GtkSeparator">
-                    <property name="visible">True</property>
-                    <property name="can-focus">True</property>
                     <property name="margin-top">12</property>
                     <property name="margin-bottom">12</property>
                   </object>
@@ -68,8 +59,10 @@
 
             <child>
               <object class="GtkFlowBox" id="flowbox">
-                <property name="visible">True</property>
-                <property name="margin">12</property>
+                <property name="margin-start">12</property>
+                <property name="margin-end">12</property>
+                <property name="margin-top">12</property>
+                <property name="margin-bottom">12</property>
                 <property name="column-spacing">12</property>
                 <property name="row-spacing">12</property>
                 <property name="homogeneous">True</property>
diff --git a/panels/background/cc-background-item.c b/panels/background/cc-background-item.c
index cb6bea28d..b69a9d940 100644
--- a/panels/background/cc-background-item.c
+++ b/panels/background/cc-background-item.c
@@ -26,7 +26,7 @@
 #include <gio/gio.h>
 #include <glib/gi18n-lib.h>
 
-#include <libgnome-desktop/gnome-bg.h>
+#include <gnome-bg/gnome-bg.h>
 #include <gdesktop-enums.h>
 
 #include "cc-background-item.h"
@@ -156,11 +156,7 @@ render_at_size (GnomeBG *bg,
         GdkPixbuf *pixbuf;
 
         pixbuf = gdk_pixbuf_new (GDK_COLORSPACE_RGB, FALSE, 8, width, height);
-#ifdef GNOME_DESKTOP_BG_API_BREAK
         gnome_bg_draw (bg, pixbuf);
-#else
-        gnome_bg_draw (bg, pixbuf, gdk_screen_get_default (), FALSE);
-#endif
 
         return pixbuf;
 }
@@ -200,17 +196,28 @@ cc_background_item_get_frame_thumbnail (CcBackgroundItem             *item,
                  */
                 pixbuf = render_at_size (item->bg, width, height);
         } else {
+                g_autoptr(GdkMonitor) monitor = NULL;
+                GdkDisplay *display;
+                GListModel *monitors;
+                GdkRectangle monitor_layout;
+
+
+                display = gdk_display_get_default ();
+                monitors = gdk_display_get_monitors (display);
+                monitor = g_list_model_get_item (monitors, 0);
+                gdk_monitor_get_geometry (monitor, &monitor_layout);
+
                 if (frame >= 0) {
                         pixbuf = gnome_bg_create_frame_thumbnail (item->bg,
                                                                   thumbs,
-                                                                  gdk_screen_get_default (),
+                                                                  &monitor_layout,
                                                                   width,
                                                                   height,
                                                                   frame);
                 } else {
                         pixbuf = gnome_bg_create_thumbnail (item->bg,
                                                             thumbs,
-                                                            gdk_screen_get_default (),
+                                                            &monitor_layout,
                                                             width,
                                                             height);
                 }
diff --git a/panels/background/cc-background-item.h b/panels/background/cc-background-item.h
index b7b8df628..9832d1e04 100644
--- a/panels/background/cc-background-item.h
+++ b/panels/background/cc-background-item.h
@@ -23,7 +23,7 @@
 #include <gdk-pixbuf/gdk-pixbuf.h>
 #include <libgnome-desktop/gnome-desktop-thumbnail.h>
 #include <gdesktop-enums.h>
-#include <libgnome-desktop/gnome-bg.h>
+#include <gnome-bg/gnome-bg.h>
 
 G_BEGIN_DECLS
 
diff --git a/panels/background/cc-background-panel.ui b/panels/background/cc-background-panel.ui
index 7b5c3d385..392decb12 100644
--- a/panels/background/cc-background-panel.ui
+++ b/panels/background/cc-background-panel.ui
@@ -2,23 +2,17 @@
 <interface>
   <!-- interface-requires gtk+ 3.0 -->
   <template class="CcBackgroundPanel" parent="CcPanel">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
     <child>
       <object class="GtkBox">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
         <property name="orientation">vertical</property>
 
         <child>
-          <object class="HdyClamp">
+          <object class="AdwClamp">
             <property name="visible">1</property>
             <property name="maximum_size">300</property>
             <property name="tightening_threshold">200</property>
             <child>
               <object class="GtkBox">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
                 <property name="spacing">24</property>
                 <property name="margin-start">12</property>
                 <property name="margin-end">12</property>
@@ -27,8 +21,6 @@
                 <property name="hexpand">True</property>
                 <child>
                   <object class="CcBackgroundPreview" id="desktop_preview">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
                     <property name="valign">center</property>
                   </object>
                 </child>
@@ -39,9 +31,8 @@
 
         <child>
           <object class="CcBackgroundChooser" id="background_chooser">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="expand">True</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
             <signal name="background-chosen" handler="on_chooser_background_chosen_cb" object="CcBackgroundPanel" swapped="yes" />
           </object>
         </child>
@@ -51,7 +42,6 @@
 
   <!-- Header button -->
   <object class="GtkButton" id="add_picture_button">
-    <property name="visible">True</property>
     <property name="label" translatable="yes">Add Picture…</property>
     <signal name="clicked" handler="on_add_picture_button_clicked_cb" object="CcBackgroundPanel" swapped="yes" />
   </object>
diff --git a/panels/background/cc-background-preview.c b/panels/background/cc-background-preview.c
index 9fef9be40..f87634612 100644
--- a/panels/background/cc-background-preview.c
+++ b/panels/background/cc-background-preview.c
@@ -24,7 +24,7 @@
 
 struct _CcBackgroundPreview
 {
-  GtkBox            parent;
+  GtkWidget         parent;
 
   GtkImage         *animated_background_icon;
   GtkLabel         *desktop_clock_label;
@@ -32,6 +32,7 @@ struct _CcBackgroundPreview
   GtkDrawingArea   *drawing_area;
   GtkFrame         *lock_frame;
   GtkLabel         *lock_screen_label;
+  GtkWidget        *overlay;
   GtkStack         *stack;
 
   GnomeDesktopThumbnailFactory *thumbnail_factory;
@@ -45,7 +46,7 @@ struct _CcBackgroundPreview
   gboolean          is_24h_format;
 };
 
-G_DEFINE_TYPE (CcBackgroundPreview, cc_background_preview, GTK_TYPE_BOX)
+G_DEFINE_TYPE (CcBackgroundPreview, cc_background_preview, GTK_TYPE_WIDGET)
 
 enum
 {
@@ -112,9 +113,9 @@ load_custom_css (CcBackgroundPreview *self)
   /* use custom CSS */
   provider = gtk_css_provider_new ();
   gtk_css_provider_load_from_resource (provider, "/org/gnome/control-center/background/preview.css");
-  gtk_style_context_add_provider_for_screen (gdk_screen_get_default (),
-                                             GTK_STYLE_PROVIDER (provider),
-                                             GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+  gtk_style_context_add_provider_for_display (gdk_display_get_default (),
+                                              GTK_STYLE_PROVIDER (provider),
+                                              GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
 
 }
 
@@ -152,23 +153,25 @@ stop_monitor_time (CcBackgroundPreview *self)
 
 /* Callbacks */
 
-static gboolean
-on_preview_draw_cb (CcBackgroundPreview *self,
-                    cairo_t             *cr)
+static void
+draw_preview_func (GtkDrawingArea *drawing_area,
+                   cairo_t        *cr,
+                   gint            width,
+                   gint            height,
+                   gpointer        user_data)
 {
+  CcBackgroundPreview *self = CC_BACKGROUND_PREVIEW (user_data);
   g_autoptr(GdkPixbuf) pixbuf = NULL;
-  GtkAllocation allocation;
   gint scale_factor;
 
   if (!self->item)
-    return FALSE;
+    return;
 
-  scale_factor = gtk_widget_get_scale_factor (GTK_WIDGET (self->drawing_area));
-  gtk_widget_get_allocation (GTK_WIDGET (self->drawing_area), &allocation);
+  scale_factor = gtk_widget_get_scale_factor (GTK_WIDGET (drawing_area));
   pixbuf = cc_background_item_get_frame_thumbnail (self->item,
                                                    self->thumbnail_factory,
-                                                   allocation.width,
-                                                   allocation.height,
+                                                   width,
+                                                   height,
                                                    scale_factor,
                                                    0,
                                                    TRUE);
@@ -176,13 +179,21 @@ on_preview_draw_cb (CcBackgroundPreview *self,
 
   gdk_cairo_set_source_pixbuf (cr, pixbuf, 0, 0);
   cairo_paint (cr);
-
-  return TRUE;
 }
 
 /* GObject overrides */
 
 static void
+cc_background_preview_dispose (GObject *object)
+{
+  CcBackgroundPreview *self = (CcBackgroundPreview *)object;
+
+  g_clear_pointer (&self->overlay, gtk_widget_unparent);
+
+  G_OBJECT_CLASS (cc_background_preview_parent_class)->dispose (object);
+}
+
+static void
 cc_background_preview_finalize (GObject *object)
 {
   CcBackgroundPreview *self = (CcBackgroundPreview *)object;
@@ -256,16 +267,19 @@ static gfloat
 get_primary_monitor_aspect_ratio (void)
 {
   GdkDisplay *display;
-  GdkMonitor *primary_monitor;
+  GListModel *monitors;
   gfloat aspect_ratio;
 
   display = gdk_display_get_default ();
-  primary_monitor = gdk_display_get_primary_monitor (display);
   aspect_ratio = 16.0 / 9.0;
 
-  if (primary_monitor)
+  monitors = gdk_display_get_monitors (display);
+  if (monitors)
     {
+      g_autoptr(GdkMonitor) primary_monitor = NULL;
       GdkRectangle monitor_layout;
+
+      primary_monitor = g_list_model_get_item (monitors, 0);
       gdk_monitor_get_geometry (primary_monitor, &monitor_layout);
       aspect_ratio = monitor_layout.width / (gfloat) monitor_layout.height;
     }
@@ -274,25 +288,50 @@ get_primary_monitor_aspect_ratio (void)
 }
 
 static void
-cc_background_preview_get_preferred_height_for_width (GtkWidget *widget,
-                                                      gint       width,
-                                                      gint      *minimum,
-                                                      gint      *natural)
+cc_background_preview_measure (GtkWidget      *widget,
+                               GtkOrientation  orientation,
+                               gint            for_size,
+                               gint           *minimum,
+                               gint           *natural,
+                               gint           *minimum_baseline,
+                               gint           *natural_baseline)
 {
-  gfloat aspect_ratio = get_primary_monitor_aspect_ratio ();
+  CcBackgroundPreview *self = (CcBackgroundPreview *)widget;
+  gint child_min, child_nat;
+  gfloat aspect_ratio;
+
+  aspect_ratio = get_primary_monitor_aspect_ratio ();
+
+  gtk_widget_measure (self->overlay,
+                      orientation,
+                      for_size,
+                      &child_min,
+                      &child_nat,
+                      NULL, NULL);
+
+  switch (orientation)
+    {
+    case GTK_ORIENTATION_HORIZONTAL:
+      *minimum = MAX (2, child_min * aspect_ratio);
+      *natural = MAX (2, child_nat * aspect_ratio);
+      break;
 
-  *minimum = *natural = MAX (2, width / aspect_ratio);
+    case GTK_ORIENTATION_VERTICAL:
+      *minimum = MAX (2, for_size / aspect_ratio);
+      *natural = MAX (2, for_size / aspect_ratio);
+      break;
+    }
 }
 
 static void
-cc_background_preview_get_preferred_width_for_height (GtkWidget *widget,
-                                                      gint       height,
-                                                      gint      *minimum,
-                                                      gint      *natural)
+cc_background_preview_size_allocate (GtkWidget *widget,
+                                     gint       width,
+                                     gint       height,
+                                     gint       baseline)
 {
-  gfloat aspect_ratio = get_primary_monitor_aspect_ratio ();
+  CcBackgroundPreview *self = CC_BACKGROUND_PREVIEW (widget);
 
-  *minimum = *natural = MAX (2, height * aspect_ratio);
+  gtk_widget_allocate (self->overlay, width, height, baseline, NULL);
 }
 
 static void
@@ -301,13 +340,14 @@ cc_background_preview_class_init (CcBackgroundPreviewClass *klass)
   GObjectClass *object_class = G_OBJECT_CLASS (klass);
   GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
 
+  object_class->dispose = cc_background_preview_dispose;
   object_class->finalize = cc_background_preview_finalize;
   object_class->get_property = cc_background_preview_get_property;
   object_class->set_property = cc_background_preview_set_property;
 
   widget_class->get_request_mode = cc_background_preview_get_request_mode;
-  widget_class->get_preferred_height_for_width = cc_background_preview_get_preferred_height_for_width;
-  widget_class->get_preferred_width_for_height = cc_background_preview_get_preferred_width_for_height;
+  widget_class->measure = cc_background_preview_measure;
+  widget_class->size_allocate = cc_background_preview_size_allocate;
 
   properties[PROP_IS_LOCK_SCREEN] = g_param_spec_boolean ("is-lock-screen",
                                                           "Lock screen",
@@ -331,9 +371,8 @@ cc_background_preview_class_init (CcBackgroundPreviewClass *klass)
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, drawing_area);
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, lock_frame);
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, lock_screen_label);
+  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, overlay);
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, stack);
-
-  gtk_widget_class_bind_template_callback (widget_class, on_preview_draw_cb);
 }
 
 static void
@@ -376,6 +415,7 @@ cc_background_preview_set_item (CcBackgroundPreview *self,
   gtk_widget_set_visible (GTK_WIDGET (self->animated_background_icon),
                           cc_background_item_changes_with_time (item));
 
+  gtk_drawing_area_set_draw_func (self->drawing_area, draw_preview_func, self, NULL);
   gtk_widget_queue_draw (GTK_WIDGET (self->drawing_area));
 
   g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_ITEM]);
diff --git a/panels/background/cc-background-preview.h b/panels/background/cc-background-preview.h
index e8e20d49d..40393c042 100644
--- a/panels/background/cc-background-preview.h
+++ b/panels/background/cc-background-preview.h
@@ -27,7 +27,7 @@
 G_BEGIN_DECLS
 
 #define CC_TYPE_BACKGROUND_PREVIEW (cc_background_preview_get_type())
-G_DECLARE_FINAL_TYPE (CcBackgroundPreview, cc_background_preview, CC, BACKGROUND_PREVIEW, GtkBox)
+G_DECLARE_FINAL_TYPE (CcBackgroundPreview, cc_background_preview, CC, BACKGROUND_PREVIEW, GtkWidget)
 
 CcBackgroundItem* cc_background_preview_get_item (CcBackgroundPreview *self);
 void              cc_background_preview_set_item (CcBackgroundPreview *self,
diff --git a/panels/background/cc-background-preview.ui b/panels/background/cc-background-preview.ui
index 30f7902ca..e747bf516 100644
--- a/panels/background/cc-background-preview.ui
+++ b/panels/background/cc-background-preview.ui
@@ -1,9 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <!-- interface-requires gtk+ 3.0 -->
-  <template class="CcBackgroundPreview" parent="GtkBox">
-    <property name="visible">True</property>
-    <property name="can-focus">False</property>
+  <template class="CcBackgroundPreview" parent="GtkWidget">
     <property name="hexpand">True</property>
     <property name="vexpand">False</property>
     <style>
@@ -11,94 +9,69 @@
     </style>
 
     <child>
-      <object class="GtkOverlay">
-        <property name="visible">True</property>
-        <property name="can-focus">False</property>
-        <property name="hexpand">True</property>
+      <object class="GtkOverlay" id="overlay">
+       <property name="hexpand">True</property>
 
         <!-- Wallpaper -->
         <child>
           <object class="GtkDrawingArea" id="drawing_area">
-            <property name="visible">True</property>
-            <property name="can-focus">False</property>
-            <property name="expand">True</property>
-            <signal name="draw" handler="on_preview_draw_cb" object="CcBackgroundPreview" swapped="yes" />
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
           </object>
         </child>
 
         <!-- Desktop / Lock Screen widgets -->
         <child type="overlay">
           <object class="GtkStack" id="stack">
-            <property name="visible">True</property>
-            <property name="can-focus">False</property>
-            <property name="expand">True</property>
+            <property name="hexpand">True</property>
+            <property name="vexpand">True</property>
 
             <child>
               <object class="GtkFrame" id="desktop_frame">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="shadow-type">none</property>
                 <property name="valign">start</property>
                 <style>
                   <class name="desktop-preview" />
                 </style>
 
                 <child>
-                  <object class="GtkBox">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
+                  <object class="GtkCenterBox">
 
-                    <child>
+                    <child type="start">
                       <object class="GtkLabel">
-                        <property name="visible">True</property>
-                        <property name="can-focus">False</property>
-                        <property name="label" translatable="yes">Activities</property>
+                       <property name="label" translatable="yes">Activities</property>
                       </object>
                     </child>
 
                     <child type="center">
                       <object class="GtkLabel" id="desktop_clock_label">
-                        <property name="visible">True</property>
-                        <property name="can-focus">False</property>
-                      </object>
+                     </object>
                     </child>
 
-                    <child>
+                    <child type="end">
                       <object class="GtkBox">
-                        <property name="visible">True</property>
-                        <property name="can-focus">False</property>
-                        <property name="spacing">4</property>
+                       <property name="spacing">4</property>
 
                         <child>
                           <object class="GtkImage">
-                            <property name="visible">True</property>
-                            <property name="can-focus">False</property>
-                            <property name="icon-name">network-wireless-symbolic</property>
+                           <property name="icon-name">network-wireless-symbolic</property>
                             <property name="pixel-size">6</property>
                           </object>
                         </child>
 
                         <child>
                           <object class="GtkImage">
-                            <property name="visible">True</property>
-                            <property name="can-focus">False</property>
-                            <property name="icon-name">audio-volume-high-symbolic</property>
+                           <property name="icon-name">audio-volume-high-symbolic</property>
                             <property name="pixel-size">6</property>
                           </object>
                         </child>
 
                         <child>
                           <object class="GtkImage">
-                            <property name="visible">True</property>
-                            <property name="can-focus">False</property>
-                            <property name="icon-name">battery-low-symbolic</property>
+                           <property name="icon-name">battery-low-symbolic</property>
                             <property name="pixel-size">6</property>
                           </object>
                         </child>
                       </object>
-                      <packing>
-                        <property name="pack-type">end</property>
-                      </packing>
                     </child>
                   </object>
                 </child>
@@ -109,14 +82,10 @@
 
             <child>
               <object class="GtkFrame" id="lock_frame">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="shadow-type">none</property>
                 <child>
                   <object class="GtkLabel" id="lock_screen_label">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="expand">True</property>
+                    <property name="hexpand">True</property>
+                    <property name="vexpand">True</property>
                     <property name="xalign">0.5</property>
                     <property name="yalign">0.5</property>
                   </object>
@@ -132,9 +101,7 @@
         <!-- Wallpaper -->
         <child type="overlay">
           <object class="GtkImage" id="animated_background_icon">
-            <property name="visible">True</property>
-            <property name="can-focus">False</property>
-            <property name="halign">end</property>
+           <property name="halign">end</property>
             <property name="valign">end</property>
             <property name="margin-end">8</property>
             <property name="margin-bottom">8</property>
diff --git a/panels/background/meson.build b/panels/background/meson.build
index eb5e9ec84..e96d020fd 100644
--- a/panels/background/meson.build
+++ b/panels/background/meson.build
@@ -88,7 +88,7 @@ sources = common_sources + files(
 
 deps = common_deps + [
   gdk_pixbuf_dep,
-  gnome_desktop_dep,
+  gnome_bg_dep,
   libxml_dep,
   dependency('cairo-gobject'),
 ]
@@ -98,10 +98,6 @@ cflags += [
   '-DGNOME_DESKTOP_USE_UNSTABLE_API'
 ]
 
-if gnome_desktop_dep.version().version_compare('>=3.35.4')
-  cflags += '-DGNOME_DESKTOP_BG_API_BREAK'
-endif
-
 panels_libs += static_library(
   cappletname,
   sources: sources,
diff --git a/panels/background/preview.css b/panels/background/preview.css
index c7416597f..2c9022f28 100644
--- a/panels/background/preview.css
+++ b/panels/background/preview.css
@@ -2,6 +2,7 @@ frame.desktop-preview {
   min-height: 10px;
   padding: 0 4px;
   background-color: black;
+  border-radius: 0;
 }
 
 frame.desktop-preview image {
@@ -33,7 +34,6 @@ image.slideshow-icon {
 
 button.remove-button {
   border-radius: 9999px;
-  -gtk-outline-radius: 9999px;
   padding: 1px 0px; /* circles instead of ellipses */
   background-origin: padding-box, border-box;
   background-clip: padding-box, border-box;
diff --git a/panels/meson.build b/panels/meson.build
index f57bdbffa..5e318abc7 100644
--- a/panels/meson.build
+++ b/panels/meson.build
@@ -2,7 +2,7 @@ subdir('common')
 
 panels = [
   'applications',
-#  'background',
+  'background',
   'camera',
 #  'color',
   'datetime',
diff --git a/shell/cc-panel-loader.c b/shell/cc-panel-loader.c
index 643068752..bb6ed1dcc 100644
--- a/shell/cc-panel-loader.c
+++ b/shell/cc-panel-loader.c
@@ -32,7 +32,7 @@
 
 /* Extension points */
 extern GType cc_applications_panel_get_type (void);
-//extern GType cc_background_panel_get_type (void);
+extern GType cc_background_panel_get_type (void);
 #ifdef BUILD_BLUETOOTH
 extern GType cc_bluetooth_panel_get_type (void);
 #endif /* BUILD_BLUETOOTH */
@@ -98,7 +98,7 @@ extern void cc_diagnostics_panel_static_init_func (void);
 static CcPanelLoaderVtable default_panels[] =
 {
   PANEL_TYPE("applications",     cc_applications_panel_get_type,         NULL),
-  //PANEL_TYPE("background",       cc_background_panel_get_type,           NULL),
+  PANEL_TYPE("background",       cc_background_panel_get_type,           NULL),
 #ifdef BUILD_BLUETOOTH
   PANEL_TYPE("bluetooth",        cc_bluetooth_panel_get_type,            NULL),
 #endif