[polari/wip/bastianilso/error-handling: 3/4] ConnectionDetails: higlight entry and display error information

[Bastian Ilsø Hougaard <bastianilso src gnome org>]

commit 119cb3eb717d8ed630106ff89ebfc07055a173c3
Author: Bastian Ilsø <bastianilso src gnome org>
Date:   Tue Jul 28 14:24:01 2015 +0200

    ConnectionDetails: higlight entry and display error information
    
    When a error requires the user to edit the details of the
    connection, guide the user to the errornous entry using a
    higlight and display a detailed description of the network error
    in the bottom.

 data/resources/application.css |   11 +++++++++++
 src/appNotifications.js        |    9 +++++++--
 src/connections.js             |   20 ++++++++++++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
---
diff --git a/data/resources/application.css b/data/resources/application.css
index 96eddcf..5dc070d 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -131,3 +131,14 @@
 .polari-background-description {
     font-size: larger;
 }
+
+.polari-error-information {
+    background-color: @polari_dark_bg_color;
+    border-style: solid;
+    border-color: @borders;
+    border-width: 1px 0 0 0;
+}
+.polari-error-information GtkLabel {
+    color: @theme_fg_color;
+    font-size: smaller;
+}
diff --git a/src/appNotifications.js b/src/appNotifications.js
index f82f1c8..5d8b2d9 100644
--- a/src/appNotifications.js
+++ b/src/appNotifications.js
@@ -137,8 +137,9 @@ const ErrorNotification = new Lang.Class({
     _populateNotification: function(error) {
         if (error == Tp.error_get_dbus_name(Tp.Error.NETWORK_ERROR)) {
             this._label.label = _("Unable to connect to %s").format(this._account.display_name);
+            let details = _("Polari disconnected due to a network error. Please check if the address field 
is correct.");
             this._button.label =  _("Edit Account");
-            this._button.connect('clicked', Lang.bind(this, this._editAccount));
+            this._button.connect('clicked', Lang.bind(this, this._editAccount, details));
         } else if (error == Tp.error_get_dbus_name(Tp.Error.AUTHENTICATION_FAILED)) {
             this._label.label = _("Authentication failed for %s.").format(this._account.display_name);
             this._button.label =  _("Retry");
@@ -183,7 +184,10 @@ const ErrorNotification = new Lang.Class({
         }
     },
 
-    _editAccount: function(button) {
+    _editAccount: function(button, details) {
+        let error = {message: details, icon_name: 'dialog-error-symbolic',
+                     widget: 'serverEntry'};
+        this._account.error = error;
         let dialog = new Connections.ConnectionDetailsDialog(this._account);
         dialog.widget.transient_for = this._window;
         dialog.widget.show();
@@ -194,6 +198,7 @@ const ErrorNotification = new Lang.Class({
                 if (response != Gtk.ResponseType.OK)
                     return;
 
+                this._account.error = null;
                 this._reconnectAccount();
             }));
     },
diff --git a/src/connections.js b/src/connections.js
index c65fe5e..0caa2d0 100644
--- a/src/connections.js
+++ b/src/connections.js
@@ -255,6 +255,10 @@ const ConnectionDetails = new Lang.Class({
 
         if (server != account.display_name)
             this._descEntry.text = account.display_name;
+
+        if (!account.error)
+            return;
+        this._serverEntry.get_style_context().add_class('error');
     },
 
     get can_confirm() {
@@ -357,5 +361,21 @@ const ConnectionDetailsDialog = new Lang.Class({
                                     this._confirmButton, 'sensitive',
                                     GObject.BindingFlags.SYNC_CREATE);
         this.widget.get_content_area().add(this._details);
+        if (account && account.error)
+            this.widget.get_content_area().add(this._createErrorMessage(account.error));
+    },
+
+    _createErrorMessage: function(error) {
+        let icon = new Gtk.Image({ icon_name: error.icon_name,
+                                   icon_size: 5, margin_start: 18 });
+        let label = new Gtk.Label({ label: error.message, xalign: 0, wrap: true,
+                                    vexpand: true, max_width_chars: 37, margin: 12 });
+        let hbox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
+                                 spacing: 12, sensitive: false, vexpand: true });
+        hbox.add(icon);
+        hbox.add(label);
+        hbox.get_style_context().add_class('polari-error-information');
+        hbox.show_all();
+        return hbox;
     }
 });