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

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

commit d4d03d422b4692c2143e75cfb3b04224485e53c0
Author: Bastian Ilsø <bastianilso gnome org>
Date:   Wed Aug 12 12:01:09 2015 +0200

    ConnectionDetails: higlight entry and display error
    
    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 ++
 data/resources/connection-details.ui |  308 +++++++++++++++++++---------------
 src/connections.js                   |   38 ++++-
 3 files changed, 219 insertions(+), 138 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/data/resources/connection-details.ui b/data/resources/connection-details.ui
index 7d16247..cf72e39 100644
--- a/data/resources/connection-details.ui
+++ b/data/resources/connection-details.ui
@@ -1,150 +1,190 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <template class="Gjs_ConnectionDetails" parent="GtkGrid">
+  <template class="Gjs_ConnectionDetails" parent="GtkBox">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
-    <property name="margin_start">24</property>
-    <property name="margin_end">24</property>
-    <property name="margin_top">24</property>
-    <property name="margin_bottom">24</property>
-    <property name="row_spacing">12</property>
-    <property name="column_spacing">12</property>
+    <property name="orientation">vertical</property>
     <child>
-      <object class="GtkLabel" id="margin">
-        <property name="visible">True</property>
-        <property name="width_request">24</property>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">0</property>
-        <property name="width">1</property>
-        <property name="height">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="server_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="halign">end</property>
-        <property name="label" translatable="yes">_Address</property>
-        <property name="use_underline">True</property>
-        <property name="mnemonic_widget">serverEntry</property>
-      </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="description_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="halign">end</property>
-        <property name="label" translatable="yes">_Description</property>
-        <property name="use_underline">True</property>
-        <property name="mnemonic_widget">descEntry</property>
-      </object>
-      <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>
-      <object class="GtkLabel" id="nickname_label">
+      <object class="GtkGrid" id="grid">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="halign">end</property>
+        <property name="margin_start">24</property>
+        <property name="margin_end">24</property>
         <property name="margin_top">24</property>
-        <property name="label" translatable="yes">_Nickname</property>
-        <property name="use_underline">True</property>
-        <property name="mnemonic_widget">nickEntry</property>
+        <property name="margin_bottom">24</property>
+        <property name="row_spacing">12</property>
+        <property name="column_spacing">12</property>
+        <child>
+          <object class="GtkLabel" id="margin">
+            <property name="visible">True</property>
+            <property name="width_request">24</property>
+          </object>
+          <packing>
+            <property name="left_attach">0</property>
+            <property name="top_attach">0</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="server_label">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">end</property>
+            <property name="label" translatable="yes">_Address</property>
+            <property name="use_underline">True</property>
+            <property name="mnemonic_widget">serverEntry</property>
+          </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="description_label">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">end</property>
+            <property name="label" translatable="yes">_Description</property>
+            <property name="use_underline">True</property>
+            <property name="mnemonic_widget">descEntry</property>
+          </object>
+          <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>
+          <object class="GtkLabel" id="nickname_label">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">end</property>
+            <property name="margin_top">24</property>
+            <property name="label" translatable="yes">_Nickname</property>
+            <property name="use_underline">True</property>
+            <property name="mnemonic_widget">nickEntry</property>
+          </object>
+          <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>
+          <object class="GtkLabel" id="realname_label">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">end</property>
+            <property name="label" translatable="yes">_Real Name</property>
+            <property name="use_underline">True</property>
+            <property name="mnemonic_widget">realnameEntry</property>
+          </object>
+          <packing>
+            <property name="left_attach">1</property>
+            <property name="top_attach">3</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkEntry" id="realnameEntry">
+            <property name="visible">True</property>
+            <property name="hexpand">True</property>
+            <property name="can_focus">True</property>
+            <property name="activates_default">True</property>
+            <property name="placeholder_text" translatable="yes">optional</property>
+          </object>
+          <packing>
+            <property name="left_attach">2</property>
+            <property name="top_attach">3</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkEntry" id="nickEntry">
+            <property name="visible">True</property>
+            <property name="hexpand">True</property>
+            <property name="can_focus">True</property>
+            <property name="can_default">True</property>
+            <property name="margin_top">24</property>
+            <property name="activates_default">True</property>
+          </object>
+          <packing>
+            <property name="left_attach">2</property>
+            <property name="top_attach">2</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkEntry" id="descEntry">
+            <property name="visible">True</property>
+            <property name="hexpand">True</property>
+            <property name="can_focus">True</property>
+            <property name="activates_default">True</property>
+            <property name="placeholder_text" translatable="yes">optional</property>
+          </object>
+          <packing>
+            <property name="left_attach">2</property>
+            <property name="top_attach">1</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkEntry" id="serverEntry">
+            <property name="visible">True</property>
+            <property name="hexpand">True</property>
+            <property name="can_focus">True</property>
+            <property name="activates_default">True</property>
+          </object>
+          <packing>
+            <property name="left_attach">2</property>
+            <property name="top_attach">0</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
       </object>
-      <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>
-      <object class="GtkLabel" id="realname_label">
-        <property name="visible">True</property>
+      <object class="GtkBox" id="errorBox">
+        <property name="visible">False</property>
         <property name="can_focus">False</property>
-        <property name="halign">end</property>
-        <property name="label" translatable="yes">_Real Name</property>
-        <property name="use_underline">True</property>
-        <property name="mnemonic_widget">realnameEntry</property>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">3</property>
-        <property name="width">1</property>
-        <property name="height">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkEntry" id="realnameEntry">
-        <property name="visible">True</property>
-        <property name="hexpand">True</property>
-        <property name="can_focus">True</property>
-        <property name="activates_default">True</property>
-        <property name="placeholder_text" translatable="yes">optional</property>
-      </object>
-      <packing>
-        <property name="left_attach">2</property>
-        <property name="top_attach">3</property>
-        <property name="width">1</property>
-        <property name="height">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkEntry" id="nickEntry">
-        <property name="visible">True</property>
-        <property name="hexpand">True</property>
-        <property name="can_focus">True</property>
-        <property name="can_default">True</property>
-        <property name="margin_top">24</property>
-        <property name="activates_default">True</property>
-      </object>
-      <packing>
-        <property name="left_attach">2</property>
-        <property name="top_attach">2</property>
-        <property name="width">1</property>
-        <property name="height">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkEntry" id="descEntry">
-        <property name="visible">True</property>
-        <property name="hexpand">True</property>
-        <property name="can_focus">True</property>
-        <property name="activates_default">True</property>
-        <property name="placeholder_text" translatable="yes">optional</property>
-      </object>
-      <packing>
-        <property name="left_attach">2</property>
-        <property name="top_attach">1</property>
-        <property name="width">1</property>
-        <property name="height">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkEntry" id="serverEntry">
-        <property name="visible">True</property>
-        <property name="hexpand">True</property>
-        <property name="can_focus">True</property>
-        <property name="activates_default">True</property>
+        <property name="orientation">horizontal</property>
+        <property name="spacing">12</property>
+        <property name="sensitive">False</property>
+        <property name="vexpand">True</property>
+        <style>
+          <class name="polari-error-information"/>
+        </style>
+        <child>
+          <object class="GtkImage" id="errorIcon">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="icon_name">dialog-error-symbolic</property>
+            <property name="icon_size">5</property>
+            <property name="margin">12</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel" id="errorLabel">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="xalign">0</property>
+            <property name="wrap">true</property>
+            <property name="vexpand">true</property>
+            <property name="max_width_chars">37</property>
+            <property name="margin">12</property>
+          </object>
+        </child>
       </object>
-      <packing>
-        <property name="left_attach">2</property>
-        <property name="top_attach">0</property>
-        <property name="width">1</property>
-        <property name="height">1</property>
-      </packing>
     </child>
   </template>
 </interface>
diff --git a/src/connections.js b/src/connections.js
index c65fe5e..83f1c65 100644
--- a/src/connections.js
+++ b/src/connections.js
@@ -175,12 +175,15 @@ const ConnectionsDialog = new Lang.Class({
 
 const ConnectionDetails = new Lang.Class({
     Name: 'ConnectionDetails',
-    Extends: Gtk.Grid,
+    Extends: Gtk.Box,
     Template: 'resource:///org/gnome/Polari/connection-details.ui',
     InternalChildren: ['serverEntry',
                        'descEntry',
                        'nickEntry',
-                       'realnameEntry'],
+                       'realnameEntry',
+                       'errorBox',
+                       'errorIcon',
+                       'errorLabel'],
     Properties: { 'can-confirm': GObject.ParamSpec.boolean('can-confirm',
                                                            'can-confirm',
                                                            'can-confirm',
@@ -200,8 +203,31 @@ const ConnectionDetails = new Lang.Class({
         this._nickEntry.connect('changed',
                                 Lang.bind(this, this._onCanConfirmChanged));
 
-        if (this._account)
-            this._populateFromAccount(this._account);
+        if (!this._account)
+            return;
+
+        this._populateFromAccount(this._account);
+
+        this._account.connect('notify::connection-status', Lang.bind(this, this._syncErrorMessage));
+        this._syncErrorMessage();
+    },
+
+    _syncErrorMessage: function() {
+        let status = this._account.connection_status;
+        let reason = this._account.connection_status_reason;
+
+        if (status == Tp.ConnectionStatus.DISCONNECTED &&
+            reason != Tp.ConnectionStatusReason.REQUESTED) {
+            switch (this._account.connection_error) {
+                case Tp.error_get_dbus_name(Tp.Error.CONNECTION_REFUSED):
+                case Tp.error_get_dbus_name(Tp.Error.NETWORK_ERROR): {
+                    this._errorLabel.label = _("Polari disconnected due to a network error. Please check if 
the address field is correct.");
+                    this._serverEntry.get_style_context().add_class('error');
+                    this._errorBox.visible = true;
+                    break;
+                }
+            }
+        }
     },
 
     _getParams: function() {
@@ -255,6 +281,7 @@ const ConnectionDetails = new Lang.Class({
 
         if (server != account.display_name)
             this._descEntry.text = account.display_name;
+
     },
 
     get can_confirm() {
@@ -339,6 +366,9 @@ const ConnectionDetailsDialog = new Lang.Class({
                                        modal: true,
                                        destroy_with_parent: true,
                                        use_header_bar: true });
+
+        this.widget.get_content_area()['border-width'] = 0;
+
         this.widget.connect('response', Lang.bind(this,
             function(w, response) {
                 if (response == Gtk.ResponseType.OK)