[evolution/webkit: 160/196] Use WebKit DOM bindings to collapse/expand To/CC/BCC address fields

[Dan VrÃtil <dvratil src gnome org>]

commit f50b75512c79870bc370a411f9ec813d13ed0672
Author: Dan VrÃtil <dvratil redhat com>
Date:   Tue Feb 21 15:45:14 2012 +0100

    Use WebKit DOM bindings to collapse/expand To/CC/BCC address fields

 data/webview.css      |    5 +-
 mail/e-mail-display.c |   99 +++++++++++++++++++++++++++++++++++++++++++++++--
 mail/em-format-html.c |   26 ++++++------
 3 files changed, 111 insertions(+), 19 deletions(-)
---
diff --git a/data/webview.css b/data/webview.css
index 6651db4..076fc8b 100644
--- a/data/webview.css
+++ b/data/webview.css
@@ -28,13 +28,14 @@ th {
 }
 
 span.navigable, div.navigable, p.navigable {
-  cursor: hand;
+  cursor: pointer;
   text-decoration: underline;
   color: #003399;
 }
 
 img.navigable {
-  cursor: hand;
+  cursor: pointer;
+  margin-right: 4px;
 }
 
 .attachments {
diff --git a/mail/e-mail-display.c b/mail/e-mail-display.c
index b1716c8..2a66a60 100644
--- a/mail/e-mail-display.c
+++ b/mail/e-mail-display.c
@@ -971,16 +971,80 @@ toggle_headers_visibility (WebKitDOMElement *button,
         d(printf("Headers %s!\n", expanded ? "collapsed" : "expanded"));
 }
 
+static const gchar* addresses[] = { "to", "cc", "bcc" };
+
 static void
-bind_collapsable_headers (GObject *object,
-                          GParamSpec *pspec,
-                          gpointer user_data)
+toggle_address_visibility (WebKitDOMElement *button,
+                           WebKitDOMEvent *event,
+                           const gchar *address)
+{
+        WebKitDOMElement *full_addr, *ellipsis;
+        WebKitDOMCSSStyleDeclaration *css_full, *css_ellipsis;
+        WebKitDOMDocument *document;
+        gchar *id;
+        const gchar *path;
+        gboolean expanded;
+
+        document = webkit_dom_node_get_owner_document (WEBKIT_DOM_NODE (button));
+
+        id = g_strconcat ("__evo-moreaddr-", address, NULL);
+        full_addr = webkit_dom_document_get_element_by_id (document, id);
+        g_free (id);
+
+        if (!full_addr)
+                return;
+
+        css_full = webkit_dom_element_get_style (full_addr);
+
+        id = g_strconcat ("__evo-moreaddr-ellipsis-", address, NULL);
+        ellipsis = webkit_dom_document_get_element_by_id (document, id);
+        g_free (id);
+
+        if (!ellipsis)
+                return;
+
+        css_ellipsis = webkit_dom_element_get_style (ellipsis);
+
+        expanded = (g_strcmp0 (
+                webkit_dom_css_style_declaration_get_property_value (
+                css_full, "display"), "inline") == 0);
+
+        webkit_dom_css_style_declaration_set_property(
+                css_full, "display", (expanded ? "none" : "inline"), "", NULL);
+        webkit_dom_css_style_declaration_set_property (
+                css_ellipsis, "display", (expanded ? "inline" : "none"), "", NULL);
+
+        if (expanded) {
+                path = "evo-file://" EVOLUTION_IMAGESDIR "/plus.png";
+        } else {
+                path = "evo-file://" EVOLUTION_IMAGESDIR "/minus.png";
+        }
+
+        if (!WEBKIT_DOM_IS_HTML_IMAGE_ELEMENT (button)) {
+                id = g_strconcat ("__evo-moreaddr-img-", address, NULL);
+                button = webkit_dom_document_get_element_by_id (document, id);
+                g_free (id);
+
+                if (!button)
+                        return;
+        }
+
+        webkit_dom_html_image_element_set_src (
+                WEBKIT_DOM_HTML_IMAGE_ELEMENT (button), path);
+
+}
+
+static void
+setup_DOM_bindings (GObject *object,
+                    GParamSpec *pspec,
+                    gpointer user_data)
 {
         WebKitWebView *web_view;
         WebKitWebFrame *frame;
         WebKitLoadStatus load_status;
         WebKitDOMDocument *document;
         WebKitDOMElement *button;
+        gint i = 0;
 
         frame = WEBKIT_WEB_FRAME (object);
         load_status = webkit_web_frame_get_load_status (frame);
@@ -1000,6 +1064,33 @@ bind_collapsable_headers (GObject *object,
         webkit_dom_event_target_add_event_listener (
                 WEBKIT_DOM_EVENT_TARGET (button), "click",
                 G_CALLBACK (toggle_headers_visibility), FALSE, web_view);
+
+        for (i = 0; i < 3; i++) {
+                gchar *id;
+                id = g_strconcat ("__evo-moreaddr-img-", addresses[i], NULL);
+                button = webkit_dom_document_get_element_by_id (document, id);
+                g_free (id);
+
+                if (!button)
+                        continue;
+
+                webkit_dom_event_target_add_event_listener(
+                        WEBKIT_DOM_EVENT_TARGET (button), "click",
+                        G_CALLBACK (toggle_address_visibility), FALSE,
+                        (gpointer) addresses[i]);
+
+                id = g_strconcat ("__evo-moreaddr-ellipsis-", addresses[i], NULL);
+                button = webkit_dom_document_get_element_by_id (document, id);
+                g_free (id);
+
+                if (!button)
+                        continue;
+
+                webkit_dom_event_target_add_event_listener (
+                        WEBKIT_DOM_EVENT_TARGET (button), "click",
+                        G_CALLBACK (toggle_address_visibility), FALSE,
+                        (gpointer) addresses[i]);
+        }
 }
 
 static void
@@ -1118,7 +1209,7 @@ e_mail_display_init (EMailDisplay *display)
 
         main_frame = webkit_web_view_get_main_frame (WEBKIT_WEB_VIEW (display));
         g_signal_connect (main_frame, "notify::load-status",
-                G_CALLBACK (bind_collapsable_headers), NULL);
+                G_CALLBACK (setup_DOM_bindings), NULL);
 
         /* Because we are loading from a hard-coded string, there is
          * no chance of I/O errors.  Failure here implies a malformed
diff --git a/mail/em-format-html.c b/mail/em-format-html.c
index cbe9d52..096a39f 100644
--- a/mail/em-format-html.c
+++ b/mail/em-format-html.c
@@ -1315,13 +1315,6 @@ efh_write_message (EMFormat *emf,
                 "  table th { color: #000; font-weight: bold; }\n"
                 "</style>\n"
                 "<script type=\"text/javascript\">\n"
-                "function collapse_addresses(field) {\n"
-                "  var e=window.document.getElementById(\"moreaddr-\"+field).style;\n"
-                "  var f=window.document.getElementById(\"moreaddr-ellipsis-\"+field).style;\n"
-                "  var g=window.document.getElementById(\"moreaddr-img-\"+field);\n"
-                "  if (e.display==\"inline\") { e.display=\"none\"; f.display=\"inline\"; g.src=g.src.substr(0,g.src.lastIndexOf(\"/\"))+\"/plus.png\"; }\n"
-                "  else { e.display=\"inline\"; f.display=\"none\"; g.src=g.src.substr(0,g.src.lastIndexOf(\"/\"))+\"/minus.png\"; }\n"
-                "}\n"
                 "function set_header_visible(header,value,visible) { // Printing\n"
                 "  var hdrs=window.document.getElementsByClassName('header-item');\n"
                 "  for (var i = 0; i < hdrs.length; i++) { \n"
@@ -2038,9 +2031,13 @@ efh_format_address (EMFormatHTML *efh,
 			}
 
 			if (id) {
-				g_string_append_printf (out, "<span id=\"moreaddr-%s\" style=\"display: none;\">", id);
-				str = g_strdup_printf ("<img src=\"evo-file://%s/plus.png\" onClick=\"collapse_addresses('%s');\" id=\"moreaddr-img-%s\" class=\"navigable\">  ",
-					EVOLUTION_IMAGESDIR, id, id);
+				g_string_append_printf (out,
+					"<span id=\"__evo-moreaddr-%s\" "
+					      "style=\"display: none;\">", id);
+				str = g_strdup_printf (
+					"<img src=\"evo-file://%s/plus.png\" "
+					     "id=\"__evo-moreaddr-img-%s\" class=\"navigable\">",
+					EVOLUTION_IMAGESDIR, id);
 			}
 		}
 	}
@@ -2057,9 +2054,12 @@ efh_format_address (EMFormatHTML *efh,
 		}
 
 		if (id) {
-			g_string_append_printf (out, "</span><span class=\"navigable\" onClick=\"collapse_addresses('%s');\" " \
-				"id=\"moreaddr-ellipsis-%s\" style=\"display: inline;\">...</span>",
-				id, id);
+			g_string_append_printf (out,
+				"</span>"
+				"<span class=\"navigable\" "
+					"id=\"__evo-moreaddr-ellipsis-%s\" "
+					"style=\"display: inline;\">...</span>",
+				id);
 		}
 	}