app chooser: Add a search bar

This replaces the treeview typeahead popup with a GtkSearchBar,
and adds a search button to the header bar (if we have one).

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

4 files changed, 146 insertions, 41 deletions

diff --git a/gtk/gtkappchooserdialog.c b/gtk/gtkappchooserdialog.c
index 57be9cf411..d2cd081bd1 100644
--- a/gtk/gtkappchooserdialog.c
+++ b/gtk/gtkappchooserdialog.c
@@ -50,9 +50,13 @@
 #include "gtklabel.h"
 #include "gtkbbox.h"
 #include "gtkbutton.h"
+#include "gtkentry.h"
+#include "gtktogglebutton.h"
+#include "gtkstylecontext.h"
 #include "gtkmenuitem.h"
 #include "gtkheaderbar.h"
 #include "gtkdialogprivate.h"
+#include "gtksearchbar.h"
 
 #include <string.h>
 #include <glib/gi18n-lib.h>
@@ -70,6 +74,8 @@ struct _GtkAppChooserDialogPrivate {
 
   GtkWidget *open_label;
 
+  GtkWidget *search_bar;
+  GtkWidget *search_entry;
   GtkWidget *app_chooser_widget;
   GtkWidget *show_more_button;
   GtkWidget *software_button;
@@ -323,6 +329,14 @@ widget_populate_popup_cb (GtkAppChooserWidget *widget,
     }
 }
 
+static gboolean
+key_press_event_cb (GtkWidget    *widget,
+                    GdkEvent     *event,
+                    GtkSearchBar *bar)
+{
+  return gtk_search_bar_handle_event (bar, event);
+}
+
 static void
 construct_appchooser_widget (GtkAppChooserDialog *self)
 {
@@ -353,6 +367,11 @@ construct_appchooser_widget (GtkAppChooserDialog *self)
   gtk_dialog_set_response_sensitive (GTK_DIALOG (self), GTK_RESPONSE_OK, info != NULL);
   if (info)
     g_object_unref (info);
+
+  _gtk_app_chooser_widget_set_search_entry (GTK_APP_CHOOSER_WIDGET (self->priv->app_chooser_widget),
+                                            GTK_ENTRY (self->priv->search_entry));
+  g_signal_connect (self, "key-press-event",
+                    G_CALLBACK (key_press_event_cb), self->priv->search_bar);
 }
 
 static void
@@ -448,6 +467,39 @@ ensure_software_button (GtkAppChooserDialog *self)
 }
 
 static void
+setup_search (GtkAppChooserDialog *self)
+{
+  gboolean use_header;
+
+  g_object_get (self, "use-header-bar", &use_header, NULL);
+  if (use_header)
+    {
+      GtkWidget *button;
+      GtkWidget *image;
+      GtkWidget *header;
+
+      button = gtk_toggle_button_new ();
+      gtk_widget_set_valign (button, GTK_ALIGN_CENTER);
+      image = gtk_image_new_from_icon_name ("edit-find-symbolic", GTK_ICON_SIZE_MENU);
+      gtk_widget_show (image);
+      gtk_container_add (GTK_CONTAINER (button), image);
+      gtk_style_context_add_class (gtk_widget_get_style_context (button), "image-button");
+      gtk_style_context_remove_class (gtk_widget_get_style_context (button), "text-button");
+      gtk_widget_show (button);
+
+      header = gtk_dialog_get_header_bar (GTK_DIALOG (self));
+      gtk_header_bar_pack_end (GTK_HEADER_BAR (header), button);
+
+      g_object_bind_property (button, "active",
+                              self->priv->search_bar, "search-mode-enabled",
+                              G_BINDING_BIDIRECTIONAL);
+      g_object_bind_property (button, "sensitive",
+                              self->priv->search_entry, "sensitive",
+                              G_BINDING_BIDIRECTIONAL);
+    }
+}
+
+static void
 gtk_app_chooser_dialog_constructed (GObject *object)
 {
   GtkAppChooserDialog *self = GTK_APP_CHOOSER_DIALOG (object);
@@ -458,6 +510,46 @@ gtk_app_chooser_dialog_constructed (GObject *object)
   construct_appchooser_widget (self);
   set_dialog_properties (self);
   ensure_software_button (self);
+  setup_search (self);
+}
+
+/* This is necessary do deal with the fact that GtkDialog
+ * exposes bits of its internal spacing as style properties,
+ * and puts the action area inside the content area.
+ * To achieve a flush-top search bar, we need the content
+ * area border to be 0, and distribute the spacing to other
+ * containers to compensate.
+ */
+static void
+update_spacings (GtkAppChooserDialog *self)
+{
+  GtkWidget *widget;
+  gint content_area_border;
+  gint action_area_border;
+
+  gtk_widget_style_get (GTK_WIDGET (self),
+                        "content-area-border", &content_area_border,
+                        "action-area-border", &action_area_border,
+                        NULL);
+
+  widget = gtk_dialog_get_content_area (GTK_DIALOG (self));
+  gtk_container_set_border_width (GTK_CONTAINER (widget), 0);
+
+G_GNUC_BEGIN_IGNORE_DEPRECATIONS
+  widget = gtk_dialog_get_action_area (GTK_DIALOG (self));
+G_GNUC_END_IGNORE_DEPRECATIONS
+  gtk_container_set_border_width (GTK_CONTAINER (widget), 5 + content_area_border + action_area_border);
+
+  widget = self->priv->inner_box;
+  gtk_container_set_border_width (GTK_CONTAINER (widget), 10 + content_area_border);
+}
+
+static void
+gtk_app_chooser_dialog_style_updated (GtkWidget *widget)
+{
+  GTK_WIDGET_CLASS (gtk_app_chooser_dialog_parent_class)->style_updated (widget);
+
+  update_spacings (GTK_APP_CHOOSER_DIALOG (widget));
 }
 
 static void
@@ -556,6 +648,9 @@ gtk_app_chooser_dialog_class_init (GtkAppChooserDialogClass *klass)
   gobject_class->get_property = gtk_app_chooser_dialog_get_property;
   gobject_class->constructed = gtk_app_chooser_dialog_constructed;
 
+  widget_class = GTK_WIDGET_CLASS (klass);
+  widget_class->style_updated = gtk_app_chooser_dialog_style_updated;
+
   g_object_class_override_property (gobject_class, PROP_CONTENT_TYPE, "content-type");
 
   /**
@@ -588,14 +683,14 @@ gtk_app_chooser_dialog_class_init (GtkAppChooserDialogClass *klass)
 
   /* Bind class to template
    */
-  widget_class = GTK_WIDGET_CLASS (klass);
-
   gtk_widget_class_set_template_from_resource (widget_class,
 					       "/org/gtk/libgtk/ui/gtkappchooserdialog.ui");
   gtk_widget_class_bind_template_child_private (widget_class, GtkAppChooserDialog, label);
   gtk_widget_class_bind_template_child_private (widget_class, GtkAppChooserDialog, show_more_button);
   gtk_widget_class_bind_template_child_private (widget_class, GtkAppChooserDialog, software_button);
   gtk_widget_class_bind_template_child_private (widget_class, GtkAppChooserDialog, inner_box);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkAppChooserDialog, search_bar);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkAppChooserDialog, search_entry);
   gtk_widget_class_bind_template_callback (widget_class, show_more_button_clicked_cb);
   gtk_widget_class_bind_template_callback (widget_class, software_button_clicked_cb);
 }
@@ -625,6 +720,8 @@ G_GNUC_END_IGNORE_DEPRECATIONS
    */
   g_signal_connect (self, "response",
                     G_CALLBACK (gtk_app_chooser_dialog_response), NULL);
+
+  update_spacings (self);
 }
 
 static void
diff --git a/gtk/gtkappchooserprivate.h b/gtk/gtkappchooserprivate.h
index f35df37388..609bc18600 100644
--- a/gtk/gtkappchooserprivate.h
+++ b/gtk/gtkappchooserprivate.h
@@ -27,6 +27,7 @@
 
 #include "gtkappchooser.h"
 #include "gtkappchooserwidget.h"
+#include "gtkentry.h"
 
 typedef struct _GtkAppChooserIface GtkAppChooserIface;
 typedef GtkAppChooserIface GtkAppChooserInterface;
@@ -40,4 +41,8 @@ struct _GtkAppChooserIface {
   void       (* refresh)      (GtkAppChooser *object);
 };
 
+void
+_gtk_app_chooser_widget_set_search_entry (GtkAppChooserWidget *self,
+                                          GtkEntry            *entry);
+
 #endif /* __GTK_APP_CHOOSER_PRIVATE_H__ */
diff --git a/gtk/gtkappchooserwidget.c b/gtk/gtkappchooserwidget.c
index 652f934960..9c14b021f9 100644
--- a/gtk/gtkappchooserwidget.c
+++ b/gtk/gtkappchooserwidget.c
@@ -659,7 +659,7 @@ gtk_app_chooser_add_default (GtkAppChooserWidget *self,
 }
 
 static void
-add_no_applications_label (GtkAppChooserWidget *self)
+update_no_applications_label (GtkAppChooserWidget *self)
 {
   gchar *text = NULL, *desc = NULL;
   const gchar *string;
@@ -789,14 +789,9 @@ gtk_app_chooser_widget_real_add_items (GtkAppChooserWidget *self)
     }
 
   if (!apps_added)
-    {
-      add_no_applications_label (self);
-      gtk_widget_show (self->priv->no_apps);
-    }
-  else
-    {
-      gtk_widget_hide (self->priv->no_apps);
-    }
+    update_no_applications_label (self);
+
+  gtk_widget_set_visible (self->priv->no_apps, !apps_added);
 
   gtk_app_chooser_widget_select_first (self);
 
@@ -1486,3 +1481,14 @@ gtk_app_chooser_widget_get_default_text (GtkAppChooserWidget *self)
 
   return self->priv->default_text;
 }
+
+void
+_gtk_app_chooser_widget_set_search_entry (GtkAppChooserWidget *self,
+                                          GtkEntry            *entry)
+{
+  gtk_tree_view_set_search_entry (GTK_TREE_VIEW (self->priv->program_list), entry);
+
+  g_object_bind_property (self->priv->no_apps, "visible",
+                          entry, "sensitive",
+                          G_BINDING_SYNC_CREATE | G_BINDING_INVERT_BOOLEAN);
+}
diff --git a/gtk/resources/ui/gtkappchooserdialog.ui b/gtk/resources/ui/gtkappchooserdialog.ui
index 07e40bfa20..eb1382888f 100644
--- a/gtk/resources/ui/gtkappchooserdialog.ui
+++ b/gtk/resources/ui/gtkappchooserdialog.ui
@@ -3,7 +3,7 @@
   <!-- interface-requires gtk+ 3.10 -->
   <template class="GtkAppChooserDialog" parent="GtkDialog">
     <property name="can_focus">False</property>
-    <property name="border_width">5</property>
+    <property name="border_width">0</property>
     <property name="title" translatable="yes">Select Application</property>
     <property name="type_hint">dialog</property>
     <child internal-child="vbox">
@@ -11,6 +11,23 @@
         <property name="can_focus">False</property>
         <property name="orientation">vertical</property>
         <property name="spacing">2</property>
+        <child>
+          <object class="GtkSearchBar" id="search_bar">
+            <property name="visible">True</property>
+            <property name="border_width">0</property>
+            <child>
+              <object class="GtkSearchEntry" id="search_entry">
+                <property name="visible">True</property>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="pack_type">start</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
         <child internal-child="action_area">
           <object class="GtkButtonBox" id="dialog-action_area1">
             <property name="can_focus">False</property>
@@ -20,40 +37,23 @@
             <property name="expand">False</property>
             <property name="fill">True</property>
             <property name="pack_type">end</property>
-            <property name="position">0</property>
+            <property name="position">1</property>
           </packing>
         </child>
         <child>
-          <object class="GtkBox" id="main_box">
+          <object class="GtkBox" id="inner_box">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="border_width">5</property>
             <property name="orientation">vertical</property>
-            <property name="spacing">12</property>
+            <property name="spacing">6</property>
             <child>
-              <object class="GtkBox" id="inner_box">
+              <object class="GtkLabel" id="label">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="orientation">vertical</property>
-                <property name="spacing">6</property>
-                <child>
-                  <object class="GtkLabel" id="label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">center</property>
-                    <property name="valign">center</property>
-                    <property name="label" translatable="yes">label</property>
-                    <property name="wrap">True</property>
-                  </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">False</property>
-                    <property name="position">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="label" translatable="yes">label</property>
+                <property name="wrap">True</property>
               </object>
               <packing>
                 <property name="expand">True</property>
@@ -61,14 +61,11 @@
                 <property name="position">0</property>
               </packing>
             </child>
-            <child>
-              <placeholder/>
-            </child>
           </object>
           <packing>
             <property name="expand">True</property>
             <property name="fill">True</property>
-            <property name="position">1</property>
+            <property name="position">2</property>
           </packing>
         </child>
       </object>