[gnome-shell] extensionPrefs: Don't fill view

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 1afd2c6ad2b4d86e22460042d47c789967e08cb5
Author: Florian Müllner <fmuellner gnome org>
Date:   Sat Nov 30 07:27:48 2019 +0100

    extensionPrefs: Don't fill view
    
    Extension rows contain both name/description and controls to
    open preferences and enable/disable the extension. Those
    elements become disassociated when the row expands too much
    horizontally, so instead of filling the entire view, switch
    to the embedded list style[0].
    
    [0] https://developer.gnome.org/hig/stable/lists.html.en
    
    https://gitlab.gnome.org/GNOME/gnome-shell/issues/1968

 js/extensionPrefs/main.js                 |  1 +
 js/extensionPrefs/ui/extensions-window.ui | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)
---
diff --git a/js/extensionPrefs/main.js b/js/extensionPrefs/main.js
index 5468e539e3..55172fb54a 100644
--- a/js/extensionPrefs/main.js
+++ b/js/extensionPrefs/main.js
@@ -524,6 +524,7 @@ class ExtensionRow extends Gtk.ListBoxRow {
         let desc = this._extension.metadata.description.split('\n')[0];
         label = new DescriptionLabel({ label: desc, wrap: true, lines: 2,
                                        ellipsize: Pango.EllipsizeMode.END,
+                                       max_width_chars: 60,
                                        xalign: 0, yalign: 0 });
         vbox.add(label);
 
diff --git a/js/extensionPrefs/ui/extensions-window.ui b/js/extensionPrefs/ui/extensions-window.ui
index 6fa3f57195..8c235f4a03 100644
--- a/js/extensionPrefs/ui/extensions-window.ui
+++ b/js/extensionPrefs/ui/extensions-window.ui
@@ -32,9 +32,20 @@
               <object class="GtkViewport">
                 <property name="visible">True</property>
                 <child>
-                  <object class="GtkListBox" id="extensionsList">
+                  <object class="GtkBox">
                     <property name="visible">True</property>
-                    <property name="selection_mode">none</property>
+                    <property name="orientation">vertical</property>
+                    <property name="halign">center</property>
+                    <property name="margin">36</property>
+                    <child>
+                      <object class="GtkListBox" id="extensionsList">
+                        <property name="visible">True</property>
+                        <property name="selection_mode">none</property>
+                        <style>
+                          <class name="frame"/>
+                        </style>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>