contact-widget: remove colons and dim labels, move avatar to LHS

Make widget look like mockup.

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

4 files changed, 262 insertions, 173 deletions

diff --git a/configure.ac b/configure.ac
index 0ff4ea8ca..712609bc4 100644
--- a/configure.ac
+++ b/configure.ac
@@ -41,7 +41,7 @@ GLIB_REQUIRED=2.32.0
 AC_DEFINE(GLIB_VERSION_MIN_REQUIRED, GLIB_VERSION_2_30, [Ignore post 2.30 deprecations])
 AC_DEFINE(GLIB_VERSION_MAX_ALLOWED, GLIB_VERSION_2_32, [Prevent post 2.32 APIs])
 
-GTK_REQUIRED=3.3.6
+GTK_REQUIRED=3.5.1
 AC_DEFINE(GDK_VERSION_MIN_REQUIRED, GDK_VERSION_3_4, [Ignore post 3.4 deprecations])
 AC_DEFINE(GDK_VERSION_MAX_ALLOWED, GDK_VERSION_3_4, [Prevent post 3.4 APIs])
 
diff --git a/libempathy-gtk/empathy-contact-widget.c b/libempathy-gtk/empathy-contact-widget.c
index 5a3658cd0..d28d980e5 100644
--- a/libempathy-gtk/empathy-contact-widget.c
+++ b/libempathy-gtk/empathy-contact-widget.c
@@ -119,8 +119,6 @@ struct _EmpathyContactWidgetPriv
   GtkWidget *groups_widget;
 
   /* Details */
-  GtkWidget *vbox_details;
-  GtkWidget *grid_details;
   GtkWidget *hbox_details_requested;
   GtkWidget *spinner_details;
   GList *details_to_set;
@@ -224,7 +222,7 @@ contact_widget_save (EmpathyContactWidget *self)
 static void
 contact_widget_details_setup (EmpathyContactWidget *self)
 {
-  gtk_widget_hide (self->priv->vbox_details);
+  gtk_widget_hide (self->priv->label_details);
 
   self->priv->spinner_details = gtk_spinner_new ();
   gtk_box_pack_end (GTK_BOX (self->priv->hbox_details_requested),
@@ -314,6 +312,30 @@ get_spec_from_list (GList *list,
   return NULL;
 }
 
+static void
+add_row (GtkGrid *grid,
+    GtkWidget *title,
+    GtkWidget *value)
+{
+  gtk_grid_attach_next_to (grid, title, NULL, GTK_POS_BOTTOM, 2, 1);
+  gtk_misc_set_alignment (GTK_MISC (title), 1, 0.5);
+  gtk_style_context_add_class (gtk_widget_get_style_context (title),
+      GTK_STYLE_CLASS_DIM_LABEL);
+  gtk_widget_show (title);
+
+  g_object_set_data (G_OBJECT (title), "added-row", (gpointer) TRUE);
+
+  gtk_grid_attach_next_to (grid, value, title, GTK_POS_RIGHT, 1, 1);
+  gtk_widget_set_hexpand (value, TRUE);
+
+  if (GTK_IS_MISC (value))
+    gtk_misc_set_alignment (GTK_MISC (value), 0, 0.5);
+
+  gtk_widget_show (value);
+
+  g_object_set_data (G_OBJECT (value), "added-row", (gpointer) TRUE);
+}
+
 static guint
 contact_widget_details_update_edit (EmpathyContactWidget *self)
 {
@@ -379,7 +401,7 @@ contact_widget_details_update_edit (EmpathyContactWidget *self)
   for (l = self->priv->details_to_set; l != NULL; l= g_list_next (l))
     {
       TpContactInfoField *field = l->data;
-      GtkWidget *w;
+      GtkWidget *label, *w;
       TpContactInfoFieldSpec *spec;
       gboolean has_field;
       char *title;
@@ -411,18 +433,12 @@ contact_widget_details_update_edit (EmpathyContactWidget *self)
       title = empathy_contact_info_field_label (field->field_name,
           field->parameters,
           (spec->flags & TP_CONTACT_INFO_FIELD_FLAG_PARAMETERS_EXACT));
-      w = gtk_label_new (title);
+      label = gtk_label_new (title);
       g_free (title);
 
       /* TODO: if TP_CONTACT_INFO_FIELD_FLAG_PARAMETERS_EXACT is not set we
        * should allow user to tag the vCard fields (bgo#672034) */
 
-      gtk_grid_attach (GTK_GRID (self->priv->grid_details),
-          w, 0, n_rows, 1, 1);
-
-      gtk_misc_set_alignment (GTK_MISC (w), 1, 0.5);
-      gtk_widget_show (w);
-
       /* Add Value */
       if (!tp_strdiff (field->field_name, "bday"))
         {
@@ -440,12 +456,6 @@ contact_widget_details_update_edit (EmpathyContactWidget *self)
                 }
             }
 
-          gtk_grid_attach (GTK_GRID (self->priv->grid_details),
-              w, 1, n_rows, 1, 1);
-          gtk_widget_show_all (w);
-
-          g_object_set_data ((GObject *) w, DATA_FIELD, field);
-
           g_signal_connect (w, "date-changed",
             G_CALLBACK (contact_widget_bday_changed_cb), self);
         }
@@ -454,16 +464,15 @@ contact_widget_details_update_edit (EmpathyContactWidget *self)
           w = gtk_entry_new ();
           gtk_entry_set_text (GTK_ENTRY (w),
               field->field_value[0] ? field->field_value[0] : "");
-          gtk_grid_attach (GTK_GRID (self->priv->grid_details),
-              w, 1, n_rows, 1, 1);
-          gtk_widget_show (w);
-
-          g_object_set_data ((GObject *) w, DATA_FIELD, field);
-
           g_signal_connect (w, "changed",
             G_CALLBACK (contact_widget_details_changed_cb), self);
         }
 
+      gtk_widget_show_all (w);
+      add_row (GTK_GRID (self->priv->grid_contact), label, w);
+
+      g_object_set_data ((GObject *) w, DATA_FIELD, field);
+
       n_rows++;
     }
 
@@ -473,21 +482,6 @@ contact_widget_details_update_edit (EmpathyContactWidget *self)
   return n_rows;
 }
 
-static void
-add_row (GtkGrid *grid,
-    guint row,
-    GtkWidget *title,
-    GtkWidget *value)
-{
-  gtk_grid_attach (grid, title, 0, row, 1, 1);
-  gtk_misc_set_alignment (GTK_MISC (title), 0, 0.5);
-  gtk_widget_show (title);
-
-  gtk_grid_attach (grid, value, 1, row, 1, 1);
-  gtk_misc_set_alignment (GTK_MISC (value), 0, 0.5);
-  gtk_widget_show (value);
-}
-
 static guint
 contact_widget_details_update_show (EmpathyContactWidget *self)
 {
@@ -548,7 +542,7 @@ contact_widget_details_update_show (EmpathyContactWidget *self)
       if ((self->priv->flags & EMPATHY_CONTACT_WIDGET_FOR_TOOLTIP) == 0)
         gtk_label_set_selectable (GTK_LABEL (value_widget), TRUE);
 
-      add_row (GTK_GRID (self->priv->grid_details), n_rows, title_widget,
+      add_row (GTK_GRID (self->priv->grid_contact), title_widget,
           value_widget);
 
       n_rows++;
@@ -565,7 +559,7 @@ contact_widget_details_update_show (EmpathyContactWidget *self)
 
       title_widget =  gtk_label_new (_("Channels:"));
 
-      add_row (GTK_GRID (self->priv->grid_details), n_rows, title_widget,
+      add_row (GTK_GRID (self->priv->grid_contact), title_widget,
           channels_label);
 
       n_rows++;
@@ -577,27 +571,27 @@ contact_widget_details_update_show (EmpathyContactWidget *self)
 }
 
 static void
+contact_widget_foreach (GtkWidget *widget,
+    gpointer data)
+{
+  if (g_object_get_data (G_OBJECT (widget), "added-row") != NULL)
+    gtk_widget_destroy (widget);
+}
+
+static void
 contact_widget_details_notify_cb (EmpathyContactWidget *self)
 {
   guint n_rows;
 
-  gtk_container_foreach (GTK_CONTAINER (self->priv->grid_details),
-      (GtkCallback) gtk_widget_destroy, NULL);
+  gtk_container_foreach (GTK_CONTAINER (self->priv->grid_contact),
+      contact_widget_foreach, NULL);
 
   if ((self->priv->flags & EMPATHY_CONTACT_WIDGET_EDIT_DETAILS) != 0)
     n_rows = contact_widget_details_update_edit (self);
   else
     n_rows = contact_widget_details_update_show (self);
 
-  if (n_rows > 0)
-    {
-      gtk_widget_show (self->priv->vbox_details);
-      gtk_widget_show (self->priv->grid_details);
-    }
-  else
-    {
-      gtk_widget_hide (self->priv->vbox_details);
-    }
+  gtk_widget_set_visible (self->priv->label_details, n_rows > 0);
 
   gtk_widget_hide (self->priv->hbox_details_requested);
   gtk_spinner_stop (GTK_SPINNER (self->priv->spinner_details));
@@ -622,7 +616,7 @@ contact_widget_details_request_cb (GObject *object,
           return;
         }
 
-      gtk_widget_hide (self->priv->vbox_details);
+      gtk_widget_hide (self->priv->label_details);
       g_clear_error (&error);
     }
   else
@@ -650,7 +644,7 @@ fetch_contact_information (EmpathyContactWidget *self,
   if (!tp_proxy_has_interface_by_id (connection,
           TP_IFACE_QUARK_CONNECTION_INTERFACE_CONTACT_INFO))
     {
-      gtk_widget_hide (self->priv->vbox_details);
+      gtk_widget_hide (self->priv->label_details);
       return;
     }
 
@@ -659,14 +653,12 @@ fetch_contact_information (EmpathyContactWidget *self,
   if ((flags & TP_CONTACT_INFO_FLAG_CAN_SET) == 0 &&
       (self->priv->flags & EMPATHY_CONTACT_WIDGET_EDIT_DETAILS) != 0)
     {
-      gtk_widget_hide (self->priv->vbox_details);
+      gtk_widget_hide (self->priv->label_details);
       return;
     }
 
   /* Request the contact's info */
-  gtk_widget_show (self->priv->vbox_details);
   gtk_widget_show (self->priv->hbox_details_requested);
-  gtk_widget_hide (self->priv->grid_details);
   gtk_spinner_start (GTK_SPINNER (self->priv->spinner_details));
 
   contact = empathy_contact_get_tp_contact (self->priv->contact);
@@ -686,7 +678,7 @@ contact_widget_details_update (EmpathyContactWidget *self)
       (self->priv->flags & EMPATHY_CONTACT_WIDGET_EDIT_DETAILS) == 0)
     return;
 
-  gtk_widget_hide (self->priv->vbox_details);
+  gtk_widget_hide (self->priv->label_details);
 
   if (self->priv->contact != NULL)
     tp_contact = empathy_contact_get_tp_contact (self->priv->contact);
@@ -1642,7 +1634,7 @@ contact_widget_contact_setup (EmpathyContactWidget *self)
     {
       gtk_grid_attach (GTK_GRID (self->priv->grid_contact),
           self->priv->widget_account,
-          1, 0, 1, 1);
+          2, 0, 1, 1);
 
       gtk_widget_show (self->priv->widget_account);
     }
@@ -1701,7 +1693,8 @@ contact_widget_contact_setup (EmpathyContactWidget *self)
     }
 
   gtk_grid_attach (GTK_GRID (self->priv->grid_contact), self->priv->widget_id,
-      1, 1, 1, 1);
+      2, 1, 1, 1);
+  gtk_widget_set_hexpand (self->priv->widget_id, TRUE);
 
   gtk_widget_show (self->priv->widget_id);
 
@@ -1729,7 +1722,8 @@ contact_widget_contact_setup (EmpathyContactWidget *self)
     }
 
   gtk_grid_attach (GTK_GRID (self->priv->grid_contact),
-      self->priv->widget_alias, 1, 2, 1, 1);
+      self->priv->widget_alias, 2, 2, 1, 1);
+  gtk_widget_set_hexpand (self->priv->widget_alias, TRUE);
 
   if (self->priv->flags & EMPATHY_CONTACT_WIDGET_FOR_TOOLTIP) {
     gtk_label_set_selectable (GTK_LABEL (self->priv->label_status), FALSE);
@@ -1796,8 +1790,6 @@ empathy_contact_widget_new (EmpathyContact *contact,
        "viewport_map", &self->priv->viewport_map,
 #endif
        "groups_widget", &self->priv->groups_widget,
-       "vbox_details", &self->priv->vbox_details,
-       "grid_details", &self->priv->grid_details,
        "hbox_details_requested", &self->priv->hbox_details_requested,
        "vbox_client", &self->priv->vbox_client,
        "grid_client", &self->priv->grid_client,
diff --git a/libempathy-gtk/empathy-contact-widget.ui b/libempathy-gtk/empathy-contact-widget.ui
index 0954ac7d3..b27389818 100644
--- a/libempathy-gtk/empathy-contact-widget.ui
+++ b/libempathy-gtk/empathy-contact-widget.ui
@@ -1,51 +1,75 @@
-<?xml version="1.0"?>
+<?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <requires lib="gtk+" version="2.16"/>
-  <!-- interface-naming-policy toplevel-contextual -->
+  <!-- interface-requires gtk+ 3.0 -->
   <object class="GtkVBox" id="vbox_contact_widget">
+    <property name="can_focus">False</property>
     <property name="spacing">6</property>
     <child>
-    <object class="GtkGrid" id="grid_contact">
+      <object class="GtkGrid" id="grid_contact">
         <property name="visible">True</property>
-        <property name="column_spacing">6</property>
+        <property name="can_focus">False</property>
+        <property name="orientation">vertical</property>
         <property name="row_spacing">6</property>
+        <property name="column_spacing">12</property>
         <child>
           <object class="GtkLabel" id="label_left_account">
             <property name="visible">True</property>
+            <property name="can_focus">False</property>
             <property name="xalign">1</property>
-            <property name="label" translatable="yes">Account:</property>
+            <property name="label" translatable="yes">Account</property>
+            <style>
+              <class name="dim-label"/>
+            </style>
           </object>
           <packing>
+            <property name="left_attach">1</property>
+            <property name="top_attach">0</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
           </packing>
         </child>
         <child>
           <object class="GtkLabel" id="label655">
             <property name="visible">True</property>
+            <property name="can_focus">False</property>
             <property name="xalign">1</property>
-            <property name="label" translatable="yes" comments="Identifier to connect to Instant Messaging network">Identifier:</property>
+            <property name="label" translatable="yes" comments="Identifier to connect to Instant Messaging network">Identifier</property>
+            <style>
+              <class name="dim-label"/>
+            </style>
           </object>
           <packing>
+            <property name="left_attach">1</property>
             <property name="top_attach">1</property>
-            <property name="left_attach">0</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
           </packing>
         </child>
         <child>
           <object class="GtkLabel" id="label_alias">
             <property name="visible">True</property>
+            <property name="can_focus">False</property>
             <property name="xalign">1</property>
-            <property name="label" translatable="yes">Alias:</property>
+            <property name="label" translatable="yes">Alias</property>
+            <style>
+              <class name="dim-label"/>
+            </style>
           </object>
           <packing>
+            <property name="left_attach">1</property>
             <property name="top_attach">2</property>
-            <property name="left_attach">0</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
           </packing>
         </child>
         <child>
           <object class="GtkHBox" id="hbox_presence">
             <property name="visible">True</property>
+            <property name="can_focus">False</property>
             <property name="spacing">6</property>
             <child>
               <object class="GtkImage" id="image_state">
+                <property name="can_focus">False</property>
                 <property name="stock">gtk-missing-image</property>
               </object>
               <packing>
@@ -56,37 +80,78 @@
             </child>
           </object>
           <packing>
+            <property name="left_attach">1</property>
             <property name="top_attach">3</property>
-            <property name="left_attach">0</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
           </packing>
         </child>
         <child>
           <object class="GtkVBox" id="vbox_avatar">
-                    <property name="visible">True</property>
-                    <child>
-                      <placeholder/>
-                    </child>
-                  </object>
-                  <packing>
-                    <property name="top-attach">0</property>
-                    <property name="left-attach">2</property>
-                    <property name="height">3</property>
-                  </packing>
-                </child>
-              </object>
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <child>
+              <placeholder/>
+            </child>
+          </object>
+          <packing>
+            <property name="left_attach">0</property>
+            <property name="top_attach">0</property>
+            <property name="width">1</property>
+            <property name="height">3</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="label_details">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="xalign">0</property>
+            <property name="label" translatable="yes">Contact Details</property>
+            <attributes>
+              <attribute name="weight" value="bold"/>
+            </attributes>
+          </object>
+          <packing>
+            <property name="left_attach">1</property>
+            <property name="top_attach">4</property>
+            <property name="width">2</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <placeholder/>
+        </child>
+        <child>
+          <placeholder/>
+        </child>
+        <child>
+          <placeholder/>
+        </child>
+        <child>
+          <placeholder/>
+        </child>
+        <child>
+          <placeholder/>
+        </child>
+        <child>
+          <placeholder/>
+        </child>
+      </object>
       <packing>
+        <property name="expand">True</property>
+        <property name="fill">True</property>
         <property name="position">0</property>
       </packing>
     </child>
     <child>
-      <object class="GtkVBox" id="vbox_location">
+      <object class="GtkHBox" id="hbox_details_requested">
+        <property name="can_focus">False</property>
         <property name="spacing">6</property>
         <child>
-          <object class="GtkLabel" id="label_location">
+          <object class="GtkImage" id="image885">
             <property name="visible">True</property>
-            <property name="xalign">0</property>
-            <property name="label" translatable="yes">&lt;b&gt;Location&lt;/b&gt; at (date)	</property>
-            <property name="use_markup">True</property>
+            <property name="can_focus">False</property>
+            <property name="stock">gtk-dialog-info</property>
           </object>
           <packing>
             <property name="expand">False</property>
@@ -95,62 +160,38 @@
           </packing>
         </child>
         <child>
-          <object class="GtkAlignment" id="alignment1">
+          <object class="GtkLabel" id="label653">
             <property name="visible">True</property>
-            <property name="left_padding">12</property>
-            <child>
-              <object class="GtkVBox" id="subvbox_location">
-                <property name="visible">True</property>
-                <property name="spacing">5</property>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <object class="GtkFrame" id="viewport_map">
-                    <property name="height_request">150</property>
-                    <property name="resize_mode">queue</property>
-                    <property name="label_xalign">0</property>
-                    <property name="shadow_type">in</property>
-                    <child>
-                      <placeholder/>
-                    </child>
-                  </object>
-                  <packing>
-                    <property name="position">1</property>
-                  </packing>
-                </child>
-              </object>
-            </child>
+            <property name="can_focus">False</property>
+            <property name="xalign">0</property>
+            <property name="label" translatable="yes">Information requested…</property>
+            <property name="use_markup">True</property>
+            <property name="wrap">True</property>
           </object>
           <packing>
-            <property name="expand">False</property>
-            <property name="fill">False</property>
+            <property name="expand">True</property>
+            <property name="fill">True</property>
             <property name="position">1</property>
           </packing>
         </child>
       </object>
       <packing>
-        <property name="expand">False</property>
+        <property name="expand">True</property>
+        <property name="fill">True</property>
         <property name="position">1</property>
       </packing>
     </child>
     <child>
-      <object class="EmpathyGroupsWidget" id="groups_widget"/>
-      <packing>
-        <property name="position">2</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkVBox" id="vbox_details">
+      <object class="GtkVBox" id="vbox_location">
+        <property name="can_focus">False</property>
         <property name="spacing">6</property>
         <child>
-          <object class="GtkLabel" id="label_details">
+          <object class="GtkLabel" id="label_location">
             <property name="visible">True</property>
+            <property name="can_focus">False</property>
             <property name="xalign">0</property>
-            <property name="label" translatable="yes">Contact Details</property>
-            <attributes>
-              <attribute name="weight" value="bold"/>
-            </attributes>
+            <property name="label" translatable="yes">&lt;b&gt;Location&lt;/b&gt; at (date)	</property>
+            <property name="use_markup">True</property>
           </object>
           <packing>
             <property name="expand">False</property>
@@ -159,53 +200,32 @@
           </packing>
         </child>
         <child>
-          <object class="GtkAlignment" id="alignment30">
+          <object class="GtkAlignment" id="alignment1">
             <property name="visible">True</property>
+            <property name="can_focus">False</property>
             <property name="left_padding">12</property>
             <child>
-              <object class="GtkVBox" id="vbox218">
+              <object class="GtkVBox" id="subvbox_location">
                 <property name="visible">True</property>
-                <property name="spacing">6</property>
+                <property name="can_focus">False</property>
+                <property name="spacing">5</property>
                 <child>
-                  <object class="GtkGrid" id="grid_details">
-                    <property name="visible">True</property>
-                    <property name="column_spacing">12</property>
-                    <property name="row_spacing">6</property>
-                  </object>
-                  <packing>
-                    <property name="position">0</property>
-                  </packing>
+                  <placeholder/>
                 </child>
                 <child>
-                  <object class="GtkHBox" id="hbox_details_requested">
-                    <property name="spacing">6</property>
-                    <child>
-                      <object class="GtkImage" id="image885">
-                        <property name="visible">True</property>
-                        <property name="stock">gtk-dialog-info</property>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">False</property>
-                        <property name="position">0</property>
-                      </packing>
-                    </child>
+                  <object class="GtkFrame" id="viewport_map">
+                    <property name="height_request">150</property>
+                    <property name="can_focus">False</property>
+                    <property name="resize_mode">queue</property>
+                    <property name="label_xalign">0</property>
+                    <property name="shadow_type">in</property>
                     <child>
-                      <object class="GtkLabel" id="label653">
-                        <property name="visible">True</property>
-                        <property name="xalign">0</property>
-                        <property name="label" translatable="yes">Information requested…</property>
-                        <property name="use_markup">True</property>
-                        <property name="wrap">True</property>
-                      </object>
-                      <packing>
-                        <property name="position">1</property>
-                      </packing>
+                      <placeholder/>
                     </child>
                   </object>
                   <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">False</property>
+                    <property name="expand">True</property>
+                    <property name="fill">True</property>
                     <property name="position">1</property>
                   </packing>
                 </child>
@@ -221,15 +241,26 @@
       </object>
       <packing>
         <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">2</property>
+      </packing>
+    </child>
+    <child>
+      <object class="EmpathyGroupsWidget" id="groups_widget"/>
+      <packing>
+        <property name="expand">True</property>
+        <property name="fill">True</property>
         <property name="position">3</property>
       </packing>
     </child>
     <child>
       <object class="GtkVBox" id="vbox_client">
+        <property name="can_focus">False</property>
         <property name="spacing">6</property>
         <child>
           <object class="GtkLabel" id="label662">
             <property name="visible">True</property>
+            <property name="can_focus">False</property>
             <property name="xalign">0</property>
             <property name="label" translatable="yes">Client Information</property>
             <attributes>
@@ -245,46 +276,71 @@
         <child>
           <object class="GtkAlignment" id="alignment32">
             <property name="visible">True</property>
+            <property name="can_focus">False</property>
             <property name="left_padding">12</property>
             <child>
               <object class="GtkVBox" id="vbox222">
                 <property name="visible">True</property>
+                <property name="can_focus">False</property>
                 <property name="spacing">6</property>
                 <child>
                   <object class="GtkGrid" id="grid_client">
                     <property name="visible">True</property>
-                    <property name="column_spacing">12</property>
+                    <property name="can_focus">False</property>
                     <property name="row_spacing">6</property>
+                    <property name="column_spacing">12</property>
                     <child>
                       <object class="GtkLabel" id="label668">
                         <property name="visible">True</property>
+                        <property name="can_focus">False</property>
                         <property name="xalign">1</property>
                         <property name="yalign">0</property>
-                        <property name="label" translatable="yes">OS:</property>
+                        <property name="label" translatable="yes">OS</property>
+                        <style>
+                          <class name="dim-label"/>
+                        </style>
                       </object>
                       <packing>
+                        <property name="left_attach">3</property>
                         <property name="top_attach">2</property>
+                        <property name="width">1</property>
+                        <property name="height">1</property>
                       </packing>
                     </child>
                     <child>
                       <object class="GtkLabel" id="label667">
                         <property name="visible">True</property>
+                        <property name="can_focus">False</property>
                         <property name="xalign">1</property>
                         <property name="yalign">0</property>
-                        <property name="label" translatable="yes">Version:</property>
+                        <property name="label" translatable="yes">Version</property>
+                        <style>
+                          <class name="dim-label"/>
+                        </style>
                       </object>
                       <packing>
+                        <property name="left_attach">3</property>
                         <property name="top_attach">1</property>
+                        <property name="width">1</property>
+                        <property name="height">1</property>
                       </packing>
                     </child>
                     <child>
                       <object class="GtkLabel" id="label666">
                         <property name="visible">True</property>
+                        <property name="can_focus">False</property>
                         <property name="xalign">1</property>
                         <property name="yalign">0</property>
-                        <property name="label" translatable="yes">Client:</property>
+                        <property name="label" translatable="yes">Client</property>
+                        <style>
+                          <class name="dim-label"/>
+                        </style>
                       </object>
                       <packing>
+                        <property name="left_attach">4</property>
+                        <property name="top_attach">0</property>
+                        <property name="width">1</property>
+                        <property name="height">1</property>
                       </packing>
                     </child>
                     <child>
@@ -298,6 +354,9 @@
                       </object>
                       <packing>
                         <property name="left_attach">1</property>
+                        <property name="top_attach">0</property>
+                        <property name="width">1</property>
+                        <property name="height">1</property>
                       </packing>
                     </child>
                     <child>
@@ -312,6 +371,8 @@
                       <packing>
                         <property name="left_attach">1</property>
                         <property name="top_attach">1</property>
+                        <property name="width">1</property>
+                        <property name="height">1</property>
                       </packing>
                     </child>
                     <child>
@@ -326,20 +387,52 @@
                       <packing>
                         <property name="left_attach">1</property>
                         <property name="top_attach">2</property>
+                        <property name="width">1</property>
+                        <property name="height">1</property>
                       </packing>
                     </child>
+                    <child>
+                      <placeholder/>
+                    </child>
+                    <child>
+                      <placeholder/>
+                    </child>
+                    <child>
+                      <placeholder/>
+                    </child>
+                    <child>
+                      <placeholder/>
+                    </child>
+                    <child>
+                      <placeholder/>
+                    </child>
+                    <child>
+                      <placeholder/>
+                    </child>
+                    <child>
+                      <placeholder/>
+                    </child>
+                    <child>
+                      <placeholder/>
+                    </child>
+                    <child>
+                      <placeholder/>
+                    </child>
                   </object>
                   <packing>
                     <property name="expand">False</property>
+                    <property name="fill">True</property>
                     <property name="position">0</property>
                   </packing>
                 </child>
                 <child>
                   <object class="GtkHBox" id="hbox_client_requested">
+                    <property name="can_focus">False</property>
                     <property name="spacing">6</property>
                     <child>
                       <object class="GtkImage" id="image887">
                         <property name="visible">True</property>
+                        <property name="can_focus">False</property>
                         <property name="stock">gtk-dialog-info</property>
                       </object>
                       <packing>
@@ -351,12 +444,15 @@
                     <child>
                       <object class="GtkLabel" id="label669">
                         <property name="visible">True</property>
+                        <property name="can_focus">False</property>
                         <property name="xalign">0</property>
                         <property name="label" translatable="yes">Information requested…</property>
                         <property name="use_markup">True</property>
                         <property name="wrap">True</property>
                       </object>
                       <packing>
+                        <property name="expand">True</property>
+                        <property name="fill">True</property>
                         <property name="position">1</property>
                       </packing>
                     </child>
@@ -379,6 +475,7 @@
       </object>
       <packing>
         <property name="expand">False</property>
+        <property name="fill">True</property>
         <property name="position">4</property>
       </packing>
     </child>
diff --git a/libempathy-gtk/empathy-contactinfo-utils.c b/libempathy-gtk/empathy-contactinfo-utils.c
index 270566721..67186d2a9 100644
--- a/libempathy-gtk/empathy-contactinfo-utils.c
+++ b/libempathy-gtk/empathy-contactinfo-utils.c
@@ -227,9 +227,9 @@ empathy_contact_info_field_label (const char *field_name,
     join = build_parameters_string (parameters);
 
   if (join != NULL)
-    ret = g_strdup_printf ("%s (%s):", title, join);
+    ret = g_strdup_printf ("%s (%s)", title, join);
   else
-    ret = g_strdup_printf ("%s:", title);
+    ret = g_strdup_printf ("%s", title);
 
   g_free (join);