[geary/wip/765516-gtk-widget-conversation-viewer: 105/112] Tidy up collapsible quote container style and behaviour.

[Michael Gratton <mjog src gnome org>]

commit a3f231ba623877861dbeeea86764f4c688714dd5
Author: Michael James Gratton <mike vee net>
Date:   Thu Aug 11 17:03:19 2016 +1000

    Tidy up collapsible quote container style and behaviour.
    
    * src/client/conversation-viewer/conversation-message.vala:
      (ConversationMessage::create_quote_container): Fix unwanted whitespace
      at the top of quote containers by removing newlines from the inner
      HTML used to construct them.
      (ConversationMessage::unset_controllable_quotes): Replace using
      absolute pxiel value for determining whether a quote should be unhidden
      with a percentage of the parent container.
    
    * ui/conversation-web-view.css: Polish and simplify quote container CSS.

 .../conversation-viewer/conversation-message.vala  |   24 ++++++----
 ui/conversation-web-view.css                       |   47 ++++++++++----------
 2 files changed, 38 insertions(+), 33 deletions(-)
---
diff --git a/src/client/conversation-viewer/conversation-message.vala 
b/src/client/conversation-viewer/conversation-message.vala
index bab0d29..da141fb 100644
--- a/src/client/conversation-viewer/conversation-message.vala
+++ b/src/client/conversation-viewer/conversation-message.vala
@@ -81,7 +81,7 @@ public class ConversationMessage : Gtk.Box {
     private const string REPLACED_IMAGE_CLASS = "replaced_inline_image";
     private const string DATA_IMAGE_CLASS = "data_inline_image";
     private const int MAX_INLINE_IMAGE_MAJOR_DIM = 1024;
-    private const int QUOTE_SIZE_THRESHOLD = 120;
+    private const float QUOTE_SIZE_THRESHOLD = 2.0f;
 
     private const string ACTION_COPY_EMAIL = "copy_email";
     private const string ACTION_COPY_LINK = "copy_link";
@@ -917,10 +917,9 @@ public class ConversationMessage : Gtk.Box {
         quote_container.set_attribute(
             "class", "quote_container controllable hide"
         );
-        quote_container.set_inner_html("""
-<div class="shower"><input type="button" value="▼        ▼        ▼" /></div>
-<div class="hider"><input type="button" value="▲        ▲        ▲" /></div>
-<div class="quote"></div>""");
+        // New lines are preserved within blockquotes, so this string
+        // needs to be new-line free.
+        quote_container.set_inner_html("""<div class="shower"><input type="button" value="▼        ▼        
▼" /></div><div class="hider"><input type="button" value="▲        ▲        ▲" /></div><div 
class="quote"></div>""");
         return quote_container;
     }
 
@@ -962,20 +961,25 @@ public class ConversationMessage : Gtk.Box {
         } while (elem != null);
         parent.append_child(signature_container);
     }
-    
+
     private void unset_controllable_quotes(WebKit.DOM.HTMLElement element) throws GLib.Error {
-        WebKit.DOM.NodeList quote_list = element.query_selector_all(".quote_container.controllable");
+        WebKit.DOM.NodeList quote_list =
+            element.query_selector_all(".quote_container.controllable");
         for (int i = 0; i < quote_list.length; ++i) {
             WebKit.DOM.Element quote_container = quote_list.item(i) as WebKit.DOM.Element;
+            long outer_client_height = quote_container.client_height;
             long scroll_height = quote_container.query_selector(".quote").scroll_height;
-            // If the message is hidden, scroll_height will be 0.
-            if (scroll_height > 0 && scroll_height < QUOTE_SIZE_THRESHOLD) {
+            // If the message is hidden, scroll_height will be
+            // 0. Otherwise, unhide the full quote if there is not a
+            // substantial amount hidden.
+            if (scroll_height > 0 &&
+                scroll_height <= outer_client_height * QUOTE_SIZE_THRESHOLD) {
                 quote_container.class_list.remove("controllable");
                 quote_container.class_list.remove("hide");
             }
         }
     }
-    
+
     private void show_images(bool remember) {
         try {
             WebKit.DOM.Element body = Util.DOM.select(
diff --git a/ui/conversation-web-view.css b/ui/conversation-web-view.css
index fbf1651..19ca2fe 100644
--- a/ui/conversation-web-view.css
+++ b/ui/conversation-web-view.css
@@ -88,42 +88,52 @@ pre {
 
   .quote_container {
     position: relative;
-    margin: 5px 0;
-    padding: 12px;
+    margin: 0.5em 0;
+    border-radius: 4px;
+    padding: 0;
     color: #303030;
     background-color: #e8e8e8;/* recv-quoted */
-    border-radius: 4px;
   }
   .sent .quote_container {
     background-color: #e8e8e8;/* sent-quoted */
   }
-  .quote_container .quote {
-    overflow: hidden;
+
+  .quote_container > .quote {
     position: relative;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
     z-index: 0;
   }
-  .quote_container.controllable.hide .quote {
-    max-height: 6em;
+  .quote_container.controllable.hide > .quote {
+    /* Use a fraction value to cut the last visible line off half way. */
+    max-height: 7.75em;
+  }
+
+  .quote_container.controllable > .quote > blockquote {
+    /* Add space between the quote and the hider button */
+    margin-bottom: 18px;
   }
 
   .quote_container > .shower,
   .quote_container > .hider {
-    -webkit-user-select: none;
-    -webkit-user-drag: none;
     position: absolute;
-    z-index: 1;
-    bottom: -8px;
+    display: none;
     left: 0;
     right: 0;
-    display: none;
+    bottom: -8px;
+    z-index: 1;
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
   }
 
   .quote_container > .shower > input,
   .quote_container > .hider > input {
     width: 100%;
-    height: 15px;
+    height: 16px;
     padding: 0;
-    font-size: 7px;  /* Absolute size in pixels for graphics */
+    font-size: 8px;  /* Absolute size in pixels for graphics */
     color: #888;
   }
   .quote_container > .shower:hover > input,
@@ -131,15 +141,6 @@ pre {
     color: #000;
   }
 
-  .quote_container.controllable {
-    margin-bottom: 7px;
-    padding-bottom: 12px;
-  }
-  .quote_container.controllable.hide {
-    padding-bottom: 0;
-  }
-
-  .quote_container.controllable > .shower,
   .quote_container.controllable.hide > .hider {
     display: none;
   }