[gnome-shell/wip/fmuellner/prefs-update: 16/17] extensionPrefs: Add blank state

[Florian Müllner <fmuellner src gnome org>]

commit 36f9147b213828afe9274651fccff02f4a0f58a6
Author: Florian Müllner <fmuellner gnome org>
Date:   Mon Aug 6 02:31:18 2018 +0200

    extensionPrefs: Add blank state
    
    We currently show a big white window in case no extensions are
    installed, which clearly isn't helpful. Add a small blank state
    that explains what's going on.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/193

 js/extensionPrefs/main.js | 79 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 78 insertions(+), 1 deletion(-)
---
diff --git a/js/extensionPrefs/main.js b/js/extensionPrefs/main.js
index c3a27085a..2c92bac24 100644
--- a/js/extensionPrefs/main.js
+++ b/js/extensionPrefs/main.js
@@ -147,8 +147,12 @@ var Application = class {
                             Gio.SettingsBindFlags.DEFAULT |
                             Gio.SettingsBindFlags.INVERT_BOOLEAN);
 
+        this._mainStack = new Gtk.Stack({
+            transition_type: Gtk.StackTransitionType.CROSSFADE
+        });
+        this._window.add(this._mainStack);
+
         let scroll = new Gtk.ScrolledWindow({ hscrollbar_policy: Gtk.PolicyType.NEVER });
-        this._window.add(scroll);
 
         this._extensionSelector = new Gtk.ListBox({ selection_mode: Gtk.SelectionMode.NONE });
         this._extensionSelector.set_sort_func(this._sortList.bind(this));
@@ -156,6 +160,8 @@ var Application = class {
 
         scroll.add(this._extensionSelector);
 
+        this._mainStack.add_named(scroll, 'listing');
+        this._mainStack.add_named(new EmptyPlaceholder(), 'placeholder');
 
         this._shellProxy = new GnomeShellProxy(Gio.DBus.session, 'org.gnome.Shell', '/org/gnome/Shell');
         this._shellProxy.connectSignal('ExtensionStatusChanged', (proxy, senderName, [uuid, state, error]) 
=> {
@@ -200,6 +206,11 @@ var Application = class {
     }
 
     _extensionsLoaded() {
+        if (this._extensionSelector.get_children().length > 0)
+            this._mainStack.visible_child_name = 'listing';
+        else
+            this._mainStack.visible_child_name = 'placeholder';
+
         if (this._startupUuid && this._extensionAvailable(this._startupUuid))
             this._selectExtension(this._startupUuid);
         this._startupUuid = null;
@@ -239,6 +250,72 @@ var Application = class {
     }
 };
 
+var EmptyPlaceholder = GObject.registerClass(
+class EmptyPlaceholder extends Gtk.Box {
+    _init() {
+        super._init({
+            orientation: Gtk.Orientation.VERTICAL,
+            spacing: 6,
+            margin: 32
+        });
+
+        let image = new Gtk.Image({
+            icon_name: 'application-x-addon-symbolic',
+            pixel_size: 96,
+            visible: true,
+            vexpand: true,
+            valign: Gtk.Align.END
+        });
+        image.get_style_context().add_class(Gtk.STYLE_CLASS_DIM_LABEL);
+        this.add(image);
+
+        let label = new Gtk.Label({
+            label: `<b><span size="x-large">${_("No Extensions Installed" )}</span></b>`,
+            use_markup: true,
+            visible: true
+        });
+        label.get_style_context().add_class(Gtk.STYLE_CLASS_DIM_LABEL);
+        this.add(label);
+
+        let appInfo = Gio.DesktopAppInfo.new('org.gnome.Software.desktop');
+
+        let desc = new Gtk.Label({
+            label: _("Extensions can be installed through Software or <a 
href=\"https://extensions.gnome.org\";>extensions.gnome.org</a>."),
+            use_markup: true,
+            wrap: true,
+            justify: Gtk.Justification.CENTER,
+            visible: true,
+            max_width_chars: 50,
+            hexpand: true,
+            vexpand: (appInfo == null),
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.START
+        });
+        this.add(desc);
+
+        if (appInfo) {
+            let button = new Gtk.Button({
+                label: _("Browse in Software"),
+                image: new Gtk.Image({
+                    icon_name: "org.gnome.Software-symbolic"
+                }),
+                always_show_image: true,
+                margin_top: 12,
+                visible: true,
+                halign: Gtk.Align.CENTER,
+                valign: Gtk.Align.START,
+                vexpand: true
+            });
+            this.add(button);
+
+            button.connect('clicked', w => {
+                let context = w.get_display().get_app_launch_context();
+                appInfo.launch([], context);
+            });
+        }
+    }
+});
+
 var DescriptionLabel = GObject.registerClass(
 class DescriptionLabel extends Gtk.Label {
     vfunc_get_preferred_height_for_width(width) {