background: Introduce CcBackgroundChooser

It will become essentially what CcBackgroundChooserDialog,
but without a dialog and organized differently. Right now,
it is as minimal as it could be and only shows wallpapers.
As we grow it, it may cover pictures and even colors.

7 files changed, 450 insertions, 226 deletions

diff --git a/panels/background/background.gresource.xml b/panels/background/background.gresource.xml
index fb562fd79..7fa4dbac6 100644
--- a/panels/background/background.gresource.xml
+++ b/panels/background/background.gresource.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/org/gnome/control-center/background">
+    <file preprocess="xml-stripblanks">cc-background-chooser.ui</file>
     <file preprocess="xml-stripblanks">cc-background-panel.ui</file>
   </gresource>
 </gresources>
diff --git a/panels/background/cc-background-chooser.c b/panels/background/cc-background-chooser.c
new file mode 100644
index 000000000..2b01bb024
--- /dev/null
+++ b/panels/background/cc-background-chooser.c
@@ -0,0 +1,182 @@
+/* cc-background-chooser.c
+ *
+ * Copyright 2019 Georges Basile Stavracas Neto <georges.stavracas@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+#define G_LOG_DOMAIN "cc-background-chooser"
+
+#include "bg-colors-source.h"
+#include "bg-pictures-source.h"
+#include "bg-wallpapers-source.h"
+#include "cc-background-chooser.h"
+
+struct _CcBackgroundChooser
+{
+  GtkBox              parent;
+
+  GtkIconView        *icon_view;
+  GtkPopover         *selection_popover;
+
+  BgWallpapersSource *wallpapers_source;
+};
+
+G_DEFINE_TYPE (CcBackgroundChooser, cc_background_chooser, GTK_TYPE_BOX)
+
+enum
+{
+  BACKGROUND_CHOSEN,
+  N_SIGNALS,
+};
+
+static guint signals [N_SIGNALS];
+
+static void
+emit_background_chosen (CcBackgroundChooser        *self,
+                        CcBackgroundSelectionFlags  flags)
+{
+  g_autolist (GtkTreePath) list = NULL;
+  CcBackgroundItem *item;
+  GtkTreeModel *model;
+  GtkTreeIter iter;
+
+  model = gtk_icon_view_get_model (self->icon_view);
+  list = gtk_icon_view_get_selected_items (self->icon_view);
+  g_assert (g_list_length (list) == 1);
+
+  if (gtk_tree_model_get_iter (model, &iter, (GtkTreePath*) list->data) == FALSE)
+    return;
+
+  gtk_tree_model_get (model, &iter, 1, &item, -1);
+
+  g_signal_emit (self, signals[BACKGROUND_CHOSEN], 0, item, flags);
+}
+
+static void
+setup_icon_view (CcBackgroundChooser *self)
+{
+  GtkCellRenderer *renderer;
+  GtkListStore *model;
+
+  model = bg_source_get_liststore (BG_SOURCE (self->wallpapers_source));
+
+  gtk_icon_view_set_model (self->icon_view, GTK_TREE_MODEL (model));
+
+  renderer = gtk_cell_renderer_pixbuf_new ();
+  gtk_cell_layout_pack_start (GTK_CELL_LAYOUT (self->icon_view),
+                              renderer,
+                              FALSE);
+  gtk_cell_layout_set_attributes (GTK_CELL_LAYOUT (self->icon_view),
+                                  renderer,
+                                  "surface", 0,
+                                  NULL);
+
+}
+
+static void
+on_selection_desktop_lock_clicked_cb (GtkButton           *button,
+                                      CcBackgroundChooser *self)
+{
+  emit_background_chosen (self, CC_BACKGROUND_SELECTION_DESKTOP | CC_BACKGROUND_SELECTION_LOCK_SCREEN);
+  gtk_popover_popdown (self->selection_popover);
+}
+
+static void
+on_selection_desktop_clicked_cb (GtkButton           *button,
+                                 CcBackgroundChooser *self)
+{
+  emit_background_chosen (self, CC_BACKGROUND_SELECTION_DESKTOP);
+  gtk_popover_popdown (self->selection_popover);
+}
+
+static void
+on_selection_lock_clicked_cb (GtkButton           *button,
+                              CcBackgroundChooser *self)
+{
+  emit_background_chosen (self, CC_BACKGROUND_SELECTION_LOCK_SCREEN);
+  gtk_popover_popdown (self->selection_popover);
+}
+
+static void
+on_selection_changed_cb (GtkIconView         *icon_view,
+                         CcBackgroundChooser *self)
+{
+}
+
+static void
+on_item_activated_cb (GtkIconView         *icon_view,
+                      GtkTreePath         *path,
+                      CcBackgroundChooser *self)
+{
+  GdkRectangle rect;
+
+  g_message ("Item activated");
+
+  gtk_icon_view_get_cell_rect (icon_view, path, NULL, &rect);
+  gtk_popover_set_pointing_to (self->selection_popover, &rect);
+  gtk_popover_popup (self->selection_popover);
+}
+
+/* GObject overrides */
+
+static void
+cc_background_chooser_finalize (GObject *object)
+{
+  CcBackgroundChooser *self = (CcBackgroundChooser *)object;
+
+  g_clear_object (&self->wallpapers_source);
+
+  G_OBJECT_CLASS (cc_background_chooser_parent_class)->finalize (object);
+}
+
+static void
+cc_background_chooser_class_init (CcBackgroundChooserClass *klass)
+{
+  GObjectClass *object_class = G_OBJECT_CLASS (klass);
+  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
+
+  object_class->finalize = cc_background_chooser_finalize;
+
+  signals[BACKGROUND_CHOSEN] = g_signal_new ("background-chosen",
+                                             CC_TYPE_BACKGROUND_CHOOSER,
+                                             G_SIGNAL_RUN_FIRST,
+                                             0, NULL, NULL, NULL,
+                                             G_TYPE_NONE,
+                                             2,
+                                             CC_TYPE_BACKGROUND_ITEM,
+                                             G_TYPE_INT);
+
+  gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/control-center/background/cc-background-chooser.ui");
+
+  gtk_widget_class_bind_template_child (widget_class, CcBackgroundChooser, icon_view);
+  gtk_widget_class_bind_template_child (widget_class, CcBackgroundChooser, selection_popover);
+
+  gtk_widget_class_bind_template_callback (widget_class, on_item_activated_cb);
+  gtk_widget_class_bind_template_callback (widget_class, on_selection_changed_cb);
+  gtk_widget_class_bind_template_callback (widget_class, on_selection_desktop_lock_clicked_cb);
+  gtk_widget_class_bind_template_callback (widget_class, on_selection_desktop_clicked_cb);
+  gtk_widget_class_bind_template_callback (widget_class, on_selection_lock_clicked_cb);
+}
+
+static void
+cc_background_chooser_init (CcBackgroundChooser *self)
+{
+  gtk_widget_init_template (GTK_WIDGET (self));
+
+  self->wallpapers_source = bg_wallpapers_source_new (GTK_WIDGET (self));
+  setup_icon_view (self);
+}
diff --git a/panels/background/cc-background-chooser.h b/panels/background/cc-background-chooser.h
new file mode 100644
index 000000000..6d88785e7
--- /dev/null
+++ b/panels/background/cc-background-chooser.h
@@ -0,0 +1,37 @@
+/* cc-background-chooser.h
+ *
+ * Copyright 2019 Georges Basile Stavracas Neto <georges.stavracas@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+#pragma once
+
+#include <gtk/gtk.h>
+
+G_BEGIN_DECLS
+
+typedef enum
+{
+  CC_BACKGROUND_SELECTION_NONE        = 0,
+  CC_BACKGROUND_SELECTION_DESKTOP     = 1 << 0,
+  CC_BACKGROUND_SELECTION_LOCK_SCREEN = 1 << 1,
+} CcBackgroundSelectionFlags;
+
+#define CC_TYPE_BACKGROUND_CHOOSER (cc_background_chooser_get_type())
+G_DECLARE_FINAL_TYPE (CcBackgroundChooser, cc_background_chooser, CC, BACKGROUND_CHOOSER, GtkBox)
+
+G_END_DECLS
diff --git a/panels/background/cc-background-chooser.ui b/panels/background/cc-background-chooser.ui
new file mode 100644
index 000000000..7bab33f26
--- /dev/null
+++ b/panels/background/cc-background-chooser.ui
@@ -0,0 +1,76 @@
+<?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="hscrollbar-policy">never</property>
+        <property name="vscrollbar-policy">automatic</property>
+        <child>
+          <object class="GtkIconView" id="icon_view">
+            <property name="visible">True</property>
+            <signal name="item-activated" handler="on_item_activated_cb" object="CcBackgroundChooser" swapped="no" />
+            <signal name="selection-changed" handler="on_selection_changed_cb" object="CcBackgroundChooser" swapped="no" />
+            <style>
+              <class name="view" />
+            </style>
+          </object>
+        </child>
+      </object>
+    </child>
+
+  </template>
+
+  <!-- Desktop & Lock Screen Popover -->
+  <object class="GtkPopover" id="selection_popover">
+    <property name="relative-to">icon_view</property>
+    <property name="position">bottom</property>
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="orientation">vertical</property>
+        <property name="spacing">6</property>
+        <property name="margin">12</property>
+        <child>
+          <object class="GtkButton">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">Set Background and Lock Screen</property>
+            <signal name="clicked" handler="on_selection_desktop_lock_clicked_cb" object="CcBackgroundChooser" swapped="no" />
+            <style>
+              <class name="suggested-action" />
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">Set Background</property>
+            <signal name="clicked" handler="on_selection_desktop_clicked_cb" object="CcBackgroundChooser" swapped="no" />
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">Set Lock Screen</property>
+            <signal name="clicked" handler="on_selection_lock_clicked_cb" object="CcBackgroundChooser" swapped="no" />
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/panels/background/cc-background-panel.c b/panels/background/cc-background-panel.c
index 2f034f3b2..098a86ae7 100644
--- a/panels/background/cc-background-panel.c
+++ b/panels/background/cc-background-panel.c
@@ -29,6 +29,7 @@
 
 #include "cc-background-panel.h"
 
+#include "cc-background-chooser.h"
 #include "cc-background-chooser-dialog.h"
 #include "cc-background-item.h"
 #include "cc-background-resources.h"
@@ -305,6 +306,7 @@ copy_finished_cb (GObject      *source_object,
   if (create_save_dir ())
     cc_background_xml_save (current_background, filename);
 }
+
 static void
 set_background (CcBackgroundPanel *panel,
                 GSettings         *settings,
@@ -434,51 +436,19 @@ set_background (CcBackgroundPanel *panel,
     }
 }
 
-static void
-on_chooser_dialog_response (GtkDialog         *dialog,
-                            int                response_id,
-                            CcBackgroundPanel *panel)
-{
-  if (response_id == GTK_RESPONSE_OK)
-    {
-      g_autoptr(CcBackgroundItem) item = NULL;
-
-      item = cc_background_chooser_dialog_get_item (CC_BACKGROUND_CHOOSER_DIALOG (dialog));
-      if (item != NULL)
-          set_background (panel, g_object_get_data (G_OBJECT (dialog), "settings"), item);
-    }
-
-  gtk_widget_destroy (GTK_WIDGET (dialog));
-}
 
 static void
-launch_chooser (CcBackgroundPanel *panel,
-                GSettings         *settings)
+on_chooser_background_chosen_cb (CcBackgroundChooser        *chooser,
+                                 CcBackgroundItem           *item,
+                                 CcBackgroundSelectionFlags  flags,
+                                 CcBackgroundPanel          *self)
 {
-  GtkWidget *toplevel;
-  GtkWidget *dialog;
-
-  toplevel = gtk_widget_get_toplevel (GTK_WIDGET (panel));
-  dialog = cc_background_chooser_dialog_new (GTK_WINDOW (toplevel));
-  g_object_set_data (G_OBJECT (dialog), "settings", settings);
-  gtk_widget_show (dialog);
-  g_signal_connect (dialog, "response", G_CALLBACK (on_chooser_dialog_response), panel);
-  panel->chooser = dialog;
-  g_object_add_weak_pointer (G_OBJECT (dialog), (gpointer *) &panel->chooser);
-}
 
-static void
-on_background_button_clicked_cb (GtkButton         *button,
-                                 CcBackgroundPanel *panel)
-{
-  launch_chooser (panel, panel->settings);
-}
+  if (flags & CC_BACKGROUND_SELECTION_DESKTOP)
+    set_background (self, self->settings, item);
 
-static void
-on_lock_button_clicked_cb (GtkButton         *button,
-                           CcBackgroundPanel *panel)
-{
-  launch_chooser (panel, panel->lock_settings);
+  if (flags & CC_BACKGROUND_SELECTION_LOCK_SCREEN)
+    set_background (self, self->lock_settings, item);
 }
 
 static gboolean
@@ -541,6 +511,8 @@ cc_background_panel_class_init (CcBackgroundPanelClass *klass)
   CcPanelClass *panel_class = CC_PANEL_CLASS (klass);
   GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
 
+  g_type_ensure (CC_TYPE_BACKGROUND_CHOOSER);
+
   panel_class->get_help_uri = cc_background_panel_get_help_uri;
 
   object_class->dispose = cc_background_panel_dispose;
@@ -554,8 +526,7 @@ cc_background_panel_class_init (CcBackgroundPanelClass *klass)
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, lock_drawing_area);
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, lock_slide_image);
 
-  gtk_widget_class_bind_template_callback (widget_class, on_background_button_clicked_cb);
-  gtk_widget_class_bind_template_callback (widget_class, on_lock_button_clicked_cb);
+  gtk_widget_class_bind_template_callback (widget_class, on_chooser_background_chosen_cb);
   gtk_widget_class_bind_template_callback (widget_class, on_lock_preview_draw_cb);
   gtk_widget_class_bind_template_callback (widget_class, on_preview_draw_cb);
 }
diff --git a/panels/background/cc-background-panel.ui b/panels/background/cc-background-panel.ui
index 6a5273fd6..c7823f54a 100644
--- a/panels/background/cc-background-panel.ui
+++ b/panels/background/cc-background-panel.ui
@@ -5,241 +5,194 @@
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <child>
-      <object class="GtkBox" id="box1">
+      <object class="GtkBox">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="spacing">24</property>
-        <property name="margin">32</property>
-        <property name="valign">center</property>
+        <property name="orientation">vertical</property>
+
         <child>
-          <object class="GtkBox" id="vbox3">
+          <object class="GtkBox">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="halign">end</property>
-            <property name="valign">center</property>
-            <property name="orientation">vertical</property>
+            <property name="spacing">24</property>
+            <property name="margin">32</property>
+            <property name="halign">center</property>
             <child>
-              <object class="GtkButton" id="background-set-button">
+              <object class="GtkBox" id="vbox3">
                 <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
-                <signal name="clicked" handler="on_background_button_clicked_cb" object="CcBackgroundPanel" swapped="no" />
+                <property name="can_focus">False</property>
+                <property name="halign">end</property>
+                <property name="valign">center</property>
+                <property name="orientation">vertical</property>
                 <child>
-                  <object class="GtkBox" id="box2">
+                  <object class="GtkButton" id="background-set-button">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="margin">6</property>
-                    <property name="spacing">6</property>
-                    <property name="orientation">vertical</property>
-                    <child>
-                      <object class="GtkDrawingArea" id="desktop_drawing_area">
-                        <property name="width_request">310</property>
-                        <property name="height_request">170</property>
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="valign">center</property>
-                        <property name="hexpand">True</property>
-                        <property name="vexpand">True</property>
-                        <signal name="draw" handler="on_preview_draw_cb" object="CcBackgroundPanel" swapped="no" />
-                      </object>
-                    </child>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <signal name="clicked" handler="on_background_button_clicked_cb" object="CcBackgroundPanel" swapped="no" />
                     <child>
-                      <object class="GtkLabel" id="label1">
+                      <object class="GtkBox" id="box2">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="label" translatable="yes">_Background</property>
-                        <property name="use_underline">True</property>
-                        <property name="mnemonic_widget">background-set-button</property>
+                        <property name="margin">6</property>
+                        <property name="spacing">6</property>
+                        <property name="orientation">vertical</property>
+                        <child>
+                          <object class="GtkDrawingArea" id="desktop_drawing_area">
+                            <property name="width_request">310</property>
+                            <property name="height_request">170</property>
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="valign">center</property>
+                            <signal name="draw" handler="on_preview_draw_cb" object="CcBackgroundPanel" swapped="no" />
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="label1">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="label" translatable="yes">_Background</property>
+                            <property name="use_underline">True</property>
+                            <property name="mnemonic_widget">background-set-button</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                   </object>
                 </child>
-              </object>
-            </child>
-            <child>
-              <object class="GtkBox" id="bottom_hbox">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="spacing">12</property>
                 <child>
-                  <object class="GtkBox" id="hbox2">
+                  <object class="GtkBox" id="bottom_hbox">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="halign">center</property>
-                    <property name="margin_top">12</property>
-                    <property name="spacing">2</property>
-                    <child>
-                      <object class="GtkImage" id="desktop_slide_image">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="icon_name">slideshow-symbolic</property>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">0</property>
-                      </packing>
-                    </child>
+                    <property name="spacing">12</property>
                     <child>
-                      <object class="GtkLabel" id="strut">
+                      <object class="GtkBox" id="hbox2">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="label"> </property>
+                        <property name="halign">center</property>
+                        <property name="margin_top">12</property>
+                        <property name="spacing">2</property>
+                        <child>
+                          <object class="GtkImage" id="desktop_slide_image">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="icon_name">slideshow-symbolic</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="strut">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="label"> </property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="desktop_slide_label">
+                            <property name="visible" bind-source="desktop_slide_image" bind-property="visible" bind-flags="default|sync-create" />
+                            <property name="can_focus">False</property>
+                            <property name="xalign">0</property>
+                            <property name="label" translatable="yes" comments="This refers to a slideshow background">Changes throughout the day</property>
+                          </object>
+                        </child>
                       </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="desktop_slide_label">
-                        <property name="visible" bind-source="desktop_slide_image" bind-property="visible" bind-flags="default|sync-create" />
-                        <property name="can_focus">False</property>
-                        <property name="xalign">0</property>
-                        <property name="label" translatable="yes" comments="This refers to a slideshow background">Changes throughout the day</property>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">1</property>
-                      </packing>
                     </child>
                   </object>
-                  <packing>
-                    <property name="expand">True</property>
-                    <property name="fill">True</property>
-                    <property name="position">0</property>
-                  </packing>
                 </child>
               </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">2</property>
-              </packing>
             </child>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkBox" id="vbox1">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="orientation">vertical</property>
-            <property name="halign">start</property>
-            <property name="valign">center</property>
             <child>
-              <object class="GtkButton" id="background-lock-set-button">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
-                <signal name="clicked" handler="on_lock_button_clicked_cb" object="CcBackgroundPanel" swapped="no" />
+                <property name="can_focus">False</property>
+                <property name="orientation">vertical</property>
+                <property name="halign">start</property>
+                <property name="valign">center</property>
                 <child>
-                  <object class="GtkBox" id="box3">
+                  <object class="GtkButton" id="background-lock-set-button">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="margin">6</property>
-                    <property name="spacing">6</property>
-                    <property name="orientation">vertical</property>
-                    <child>
-                      <object class="GtkDrawingArea" id="lock_drawing_area">
-                        <property name="width_request">310</property>
-                        <property name="height_request">170</property>
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="valign">center</property>
-                        <property name="hexpand">True</property>
-                        <property name="vexpand">True</property>
-                        <signal name="draw" handler="on_lock_preview_draw_cb" object="CcBackgroundPanel" swapped="no" />
-                      </object>
-                    </child>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <signal name="clicked" handler="on_lock_button_clicked_cb" object="CcBackgroundPanel" swapped="no" />
                     <child>
-                      <object class="GtkLabel" id="label2">
+                      <object class="GtkBox">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="label" translatable="yes" comments="To translators: This is a noun, not a verb">_Lock Screen</property>
-                        <property name="use_underline">True</property>
-                        <property name="mnemonic_widget">background-lock-set-button</property>
+                        <property name="margin">6</property>
+                        <property name="spacing">6</property>
+                        <property name="orientation">vertical</property>
+                        <child>
+                          <object class="GtkDrawingArea" id="lock_drawing_area">
+                            <property name="width_request">310</property>
+                            <property name="height_request">170</property>
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="valign">center</property>
+                            <signal name="draw" handler="on_lock_preview_draw_cb" object="CcBackgroundPanel" swapped="no" />
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="label2">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="label" translatable="yes" comments="To translators: This is a noun, not a verb">_Lock Screen</property>
+                            <property name="use_underline">True</property>
+                            <property name="mnemonic_widget">background-lock-set-button</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                   </object>
                 </child>
-              </object>
-            </child>
-            <child>
-              <object class="GtkBox" id="bottom-hbox1">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="spacing">12</property>
                 <child>
-                  <object class="GtkBox" id="hbox1">
+                  <object class="GtkBox" id="bottom-hbox1">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="halign">center</property>
-                    <property name="margin_top">12</property>
-                    <property name="spacing">2</property>
-                    <child>
-                      <object class="GtkImage" id="lock_slide_image">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="icon_name">slideshow-symbolic</property>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">0</property>
-                      </packing>
-                    </child>
+                    <property name="spacing">12</property>
                     <child>
-                      <object class="GtkLabel" id="strut1">
+                      <object class="GtkBox" id="hbox1">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="label"> </property>
+                        <property name="halign">center</property>
+                        <property name="margin_top">12</property>
+                        <property name="spacing">2</property>
+                        <child>
+                          <object class="GtkImage" id="lock_slide_image">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="icon_name">slideshow-symbolic</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="strut1">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="label"> </property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="visible" bind-source="lock_slide_image" bind-property="visible" bind-flags="default|sync-create" />
+                            <property name="can_focus">False</property>
+                            <property name="xalign">0</property>
+                            <property name="label" translatable="yes" comments="This refers to a slideshow background">Changes throughout the day</property>
+                          </object>
+                        </child>
                       </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel">
-                        <property name="visible" bind-source="lock_slide_image" bind-property="visible" bind-flags="default|sync-create" />
-                        <property name="can_focus">False</property>
-                        <property name="xalign">0</property>
-                        <property name="label" translatable="yes" comments="This refers to a slideshow background">Changes throughout the day</property>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">1</property>
-                      </packing>
                     </child>
                   </object>
-                  <packing>
-                    <property name="expand">True</property>
-                    <property name="fill">True</property>
-                    <property name="position">0</property>
-                  </packing>
                 </child>
               </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">2</property>
-              </packing>
             </child>
           </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">1</property>
-          </packing>
+        </child>
+
+        <child>
+          <object class="CcBackgroundChooser" id="background_chooser">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="expand">True</property>
+            <signal name="background-chosen" handler="on_chooser_background_chosen_cb" object="CcBackgroundPanel" swapped="no" />
+          </object>
         </child>
       </object>
     </child>
diff --git a/panels/background/meson.build b/panels/background/meson.build
index 27202baf6..3dbe86107 100644
--- a/panels/background/meson.build
+++ b/panels/background/meson.build
@@ -59,7 +59,10 @@ common_sources += gnome.mkenums(
   vtail: '      { 0, NULL, NULL }\n    };\n    etype = g_@type@_register_static ("@EnumName@", values);\n  }\n  return etype;\n}\n'
 )
 
-resource_data = files('cc-background-panel.ui')
+resource_data = files(
+  'cc-background-chooser.ui',
+  'cc-background-panel.ui',
+)
 
 common_sources += gnome.compile_resources(
   'cc-@0@-resources'.format(cappletname),
@@ -74,6 +77,7 @@ sources = common_sources + files(
   'bg-pictures-source.c',
   'bg-source.c',
   'bg-wallpapers-source.c',
+  'cc-background-chooser.c',
   'cc-background-chooser-dialog.c',
   'cc-background-grilo-miner.c',
   'cc-background-item.c',