[gnome-shell] extensionPrefs: Move description into a expander

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

commit 1067642300b0e147dc49dcbbfe946ccf37884962
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Jan 24 02:02:10 2020 +0100

    extensionPrefs: Move description into a expander
    
    The description can be useful information, but also increases the
    visual complexity of the extensions list. Move it into a hidden
    details area that can be expanded, which unclutters the interface
    while keeping the information readily available.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/issues/1968

 js/extensionPrefs/css/application.css |  9 +++++
 js/extensionPrefs/main.js             | 23 +++++++++++
 js/extensionPrefs/ui/extension-row.ui | 75 +++++++++++++++++++++++++----------
 js/prefs-resources.gresource.xml      |  2 +
 4 files changed, 89 insertions(+), 20 deletions(-)
---
diff --git a/js/extensionPrefs/css/application.css b/js/extensionPrefs/css/application.css
new file mode 100644
index 0000000000..1a35205f1d
--- /dev/null
+++ b/js/extensionPrefs/css/application.css
@@ -0,0 +1,9 @@
+.details-button image {
+  transition: 250ms;
+}
+.details-button.expanded:dir(ltr) image {
+  -gtk-icon-transform: rotate(0.25turn);
+}
+.details-button.expanded:dir(rtl) image {
+  -gtk-icon-transform: rotate(-0.25turn);
+}
diff --git a/js/extensionPrefs/main.js b/js/extensionPrefs/main.js
index ac9169ba53..99dfddd9f2 100644
--- a/js/extensionPrefs/main.js
+++ b/js/extensionPrefs/main.js
@@ -44,6 +44,17 @@ class Application extends Gtk.Application {
     vfunc_startup() {
         super.vfunc_startup();
 
+        let provider = new Gtk.CssProvider();
+        let uri = 'resource:///org/gnome/shell/css/application.css';
+        try {
+            provider.load_from_file(Gio.File.new_for_uri(uri));
+        } catch (e) {
+            logError(e, 'Failed to add application style');
+        }
+        Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),
+            provider,
+            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+
         this._shellProxy = new GnomeShellProxy(Gio.DBus.session, 'org.gnome.Shell', '/org/gnome/Shell');
         this._window = new ExtensionsWindow({ application: this });
     }
@@ -472,6 +483,8 @@ var ExtensionRow = GObject.registerClass({
     InternalChildren: [
         'nameLabel',
         'descriptionLabel',
+        'revealButton',
+        'revealer',
     ],
 }, class ExtensionRow extends Gtk.ListBoxRow {
     _init(extension) {
@@ -514,6 +527,16 @@ var ExtensionRow = GObject.registerClass({
         let desc = this._extension.metadata.description.split('\n')[0];
         this._descriptionLabel.label = desc;
 
+        this._revealButton.connect('clicked', () => {
+            this._revealer.reveal_child = !this._revealer.reveal_child;
+        });
+        this._revealer.connect('notify::reveal-child', () => {
+            if (this._revealer.reveal_child)
+                this._revealButton.get_style_context().add_class('expanded');
+            else
+                this._revealButton.get_style_context().remove_class('expanded');
+        });
+
         this.connect('destroy', this._onDestroy.bind(this));
 
         this._extensionStateChangedId = this._app.shellProxy.connectSignal(
diff --git a/js/extensionPrefs/ui/extension-row.ui b/js/extensionPrefs/ui/extension-row.ui
index 99ea655e1e..23231e2b91 100644
--- a/js/extensionPrefs/ui/extension-row.ui
+++ b/js/extensionPrefs/ui/extension-row.ui
@@ -8,20 +8,13 @@
     <child>
       <object class="GtkGrid">
         <property name="visible">True</property>
-        <property name="margin_start">12</property>
-        <property name="margin_end">24</property>
-        <property name="margin_top">12</property>
-        <property name="margin_bottom">12</property>
-        <property name="row_spacing">6</property>
-        <property name="column_spacing">24</property>
+        <property name="margin">12</property>
+        <property name="column_spacing">12</property>
         <child>
           <object class="GtkLabel" id="nameLabel">
             <property name="visible">True</property>
             <property name="hexpand">True</property>
             <property name="halign">start</property>
-            <attributes>
-              <attribute name="weight" value="bold"/>
-            </attributes>
           </object>
         </child>
         <child>
@@ -46,9 +39,6 @@
               </object>
             </child>
           </object>
-          <packing>
-            <property name="height">2</property>
-          </packing>
         </child>
         <child>
           <object class="GtkSwitch">
@@ -57,21 +47,66 @@
             <property name="valign">center</property>
             <property name="action-name">row.enabled</property>
           </object>
-          <packing>
-            <property name="height">2</property>
-          </packing>
         </child>
         <child>
-          <object class="GtkLabel" id="descriptionLabel">
+          <object class="GtkSeparator">
+            <property name="visible">True</property>
+          </object>
+        </child>
+         <child>
+          <object class="GtkButton" id="revealButton">
             <property name="visible">True</property>
-            <property name="ellipsize">end</property>
-            <property name="max_width_chars">60</property>
-            <property name="xalign">0</property>
-            <property name="yalign">0</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="details-button"/>
+              <class name="image-button"/>
+              <class name="flat"/>
+            </style>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="icon_name">pan-end-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkRevealer" id="revealer">
+            <property name="visible">True</property>
+            <child>
+              <object class="GtkGrid">
+                <property name="visible">True</property>
+                <property name="margin_top">12</property>
+                <property name="row_spacing">6</property>
+                <property name="column_spacing">12</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="label" translatable="yes">Description</property>
+                    <property name="xalign">0</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="descriptionLabel">
+                    <property name="visible">True</property>
+                    <property name="ellipsize">end</property>
+                    <property name="max_width_chars">60</property>
+                    <property name="xalign">0</property>
+                    <property name="yalign">0</property>
+                  </object>
+                </child>
+              </object>
+            </child>
           </object>
           <packing>
             <property name="left_attach">0</property>
             <property name="top_attach">1</property>
+            <property name="width">5</property>
           </packing>
         </child>
       </object>
diff --git a/js/prefs-resources.gresource.xml b/js/prefs-resources.gresource.xml
index 193d305d02..11b9b5aa5a 100644
--- a/js/prefs-resources.gresource.xml
+++ b/js/prefs-resources.gresource.xml
@@ -8,6 +8,8 @@
     <file>misc/fileUtils.js</file>
     <file>misc/params.js</file>
 
+    <file alias="css/application.css">extensionPrefs/css/application.css</file>
+
     <file alias="ui/extension-row.ui">extensionPrefs/ui/extension-row.ui</file>
     <file alias="ui/extensions-window.ui">extensionPrefs/ui/extensions-window.ui</file>
   </gresource>