From 103619c596ee8abdbe09d978040c0167817aacdb Mon Sep 17 00:00:00 2001
From: Michael James Gratton <mike@vee.net>
Date: Sat, 9 Apr 2016 18:15:30 +1000
Subject: [PATCH] Remove uneeded ConversationWebView, HTML and CSS code.

* src/client/conversation-viewer/conversation-web-view.vala
  (ConversationWebView::ConversationWebView): Don't load message.html
  since ConversationMessage now just loads the message HTML directly.
  (ConversationWebView::on_load_finished): Don't load container DIV and
  inline icons since GTK-based chrome has mostly replaced HTML chrome.
  (conversation_icon_color, container, scroll_reset, set_icon_src,
  set_attachment_src): Removed, no longer needed.
  (ConversationWebView::get_preferred_size,
  ConversationWebView::get_preferred_height): Added to ensure GTK gets
  a useful min/preferred height for the widget.

* theming/message-viewer.css: Remove rules used for now-obsolete HTML
  chrome - headers, attachments, etc. Added rules to ensure HTML and BODY
  element's heights and scrollbars are appropriate for use in this
  context.

* theming/message-viewer.html: Removed, no longer needed.
---
 .../conversation-viewer.vala                  |   3 +-
 .../conversation-web-view.vala                | 128 +---
 theming/message-viewer.css                    | 707 +++---------------
 theming/message-viewer.html                   |  63 --
 4 files changed, 141 insertions(+), 760 deletions(-)
 delete mode 100644 theming/message-viewer.html

diff --git a/src/client/conversation-viewer/conversation-viewer.vala b/src/client/conversation-viewer/conversation-viewer.vala
index b77a8cce..51c6e0f2 100644
--- a/src/client/conversation-viewer/conversation-viewer.vala
+++ b/src/client/conversation-viewer/conversation-viewer.vala
@@ -461,8 +461,9 @@ public class ConversationViewer : Gtk.Stack {
         ordered_matches.sort((a, b) => a.length - b.length);
 
         if (!cancellable.is_cancelled()) {
-            foreach(string match in ordered_matches)
+            foreach(string match in ordered_matches) {
                 //web_view.mark_text_matches(match, false, 0);
+            }
 
             //web_view.set_highlight_text_matches(true);
         }
diff --git a/src/client/conversation-viewer/conversation-web-view.vala b/src/client/conversation-viewer/conversation-web-view.vala
index 557e4994..a44d84c8 100644
--- a/src/client/conversation-viewer/conversation-web-view.vala
+++ b/src/client/conversation-viewer/conversation-web-view.vala
@@ -1,4 +1,6 @@
-/* Copyright 2016 Software Freedom Conservancy Inc.
+/* 
+ * Copyright 2016 Software Freedom Conservancy Inc.
+ * Copyright 2016 Michael Gratton <mike@vee.net>
  *
  * This software is licensed under the GNU Lesser General Public License
  * (version 2.1 or later).  See the COPYING file in this distribution.
@@ -13,10 +15,6 @@ public class ConversationWebView : StylishWebView {
     private const string USER_CSS = "user-message.css";
     private const string STYLE_NAME = "STYLE";
     private const string PREVENT_HIDE_STYLE = "nohide";
-    private Gdk.RGBA conversation_icon_color;
-    
-    // HTML element that contains message DIVs.
-    public WebKit.DOM.HTMLDivElement? container { get; private set; default = null; }
 
     public string allow_prefix { get; private set; default = ""; }
 
@@ -54,11 +52,6 @@ public class ConversationWebView : StylishWebView {
 
         GearyApplication.instance.config.bind(Configuration.CONVERSATION_VIEWER_ZOOM_KEY, this, "zoom_level_wrap");
         notify["zoom-level"].connect(() => { zoom_level_wrap = zoom_level; });
-
-        // Load the HTML into WebKit.
-        // Note: load_finished signal MUST be hooked up before this call.
-        string html_text = GearyApplication.instance.read_theme_file("message-viewer.html") ?? "";
-        load_string(html_text, "text/html", "UTF8", "");
     }
     
     public override bool query_tooltip(int x, int y, bool keyboard_tooltip, Gtk.Tooltip tooltip) {
@@ -94,12 +87,34 @@ public class ConversationWebView : StylishWebView {
     public void show_element_by_id(string element_id) throws Error {
         get_dom_document().get_element_by_id(element_id).set_attribute("style", "display:block");
     }
-    
-    // Scrolls back up to the top.
-    public void scroll_reset() {
-        get_dom_document().get_default_view().scroll(0, 0);
+
+    // Overridden to get the correct height from get_preferred_height.
+    public new void get_preferred_size(out Gtk.Requisition minimum_size,
+                                       out Gtk.Requisition natural_size) {
+        base.get_preferred_size(out minimum_size, out natural_size);
+
+        int minimum_height = 0;
+        int natural_height = 0;
+        get_preferred_height(out minimum_height, out natural_height);
+        
+        minimum_size.height = minimum_height;
+        natural_size.height = natural_height;
     }
-    
+
+    // Overridden since WebKitGTK+ 2.4.10 at least doesn't want to
+    // report a useful height. In combination with the rules from
+    // theming/message-viewer.css we can get an accurate idea of
+    // the actual height of the content from the BODY element, but
+    // only once loaded.
+    public override void get_preferred_height(out int minimum_height,
+                                              out int natural_height) {
+        int preferred_height = 0;
+        if (load_status == WebKit.LoadStatus.FINISHED) {
+            preferred_height = (int) get_dom_document().get_body().offset_height;
+        }
+        minimum_height = natural_height = preferred_height;
+    }
+
     private void on_resource_request_starting(WebKit.WebFrame web_frame,
         WebKit.WebResource web_resource, WebKit.NetworkRequest request,
         WebKit.NetworkResponse? response) {
@@ -144,21 +159,6 @@ public class ConversationWebView : StylishWebView {
         
         on_document_font_changed();
         load_user_style();
-        
-        // Grab the HTML container.
-        WebKit.DOM.Element? _container = get_dom_document().get_element_by_id("message_container");
-        assert(_container != null);
-        container = _container as WebKit.DOM.HTMLDivElement;
-        assert(container != null);
-        
-        conversation_icon_color.parse("#888888");
-        // Load the icons.
-        set_icon_src("#email_template .menu .icon", "go-down-symbolic");
-        set_icon_src("#email_template .starred .icon", "starred-symbolic");
-        set_icon_src("#email_template .unstarred .icon", "non-starred-symbolic");
-        set_icon_src("#email_template .attachment.icon", "mail-attachment-symbolic");
-        set_icon_src("#email_template .close_show_images", "close-symbolic");
-        set_icon_src("#link_warning_template .close_link_warning", "close-symbolic");
     }
     
     private void on_document_font_changed() {
@@ -234,74 +234,6 @@ public class ConversationWebView : StylishWebView {
         }
     }
     
-    private void set_icon_src(string selector, string icon_name) {
-        try {
-            // Load icon.
-            uint8[]? icon_content = null;
-            Gdk.Pixbuf? pixbuf = IconFactory.instance.load_symbolic_colored(icon_name, 16, 
-                conversation_icon_color);
-            if (pixbuf != null)
-                pixbuf.save_to_buffer(out icon_content, "png"); // Load as PNG.
-            
-            if (icon_content == null || icon_content.length == 0)
-                return;
-            
-            // Save length before transferring ownership (which frees the array)
-            int icon_length = icon_content.length;
-            Geary.Memory.ByteBuffer buffer = new Geary.Memory.ByteBuffer.take((owned) icon_content,
-                icon_length);
-            
-            // Then set the source to a data url.
-            WebKit.DOM.HTMLImageElement img = Util.DOM.select(get_dom_document(), selector)
-                as WebKit.DOM.HTMLImageElement;
-            img.set_attribute("src", Util.DOM.assemble_data_uri("image/png", buffer));
-        } catch (Error error) {
-            warning("Failed to load icon '%s': %s", icon_name, error.message);
-        }
-    }
-    
-    public void set_attachment_src(WebKit.DOM.HTMLImageElement img, Geary.Mime.ContentType content_type,
-        string filename, int maxwidth, int maxheight = -1) {
-        if( maxheight == -1 ){
-            maxheight = maxwidth;
-        }
-        
-        try {
-            // If the file is an image, use it. Otherwise get the icon for this mime_type.
-            string gio_content_type = ContentType.from_mime_type(content_type.get_mime_type());
-            
-            Gdk.Pixbuf pixbuf;
-            if (content_type.has_media_type("image")) {
-                // Get a thumbnail for the image.
-                // TODO Generate and save the thumbnail when extracting the attachments rather than
-                // when showing them in the viewer.
-                img.get_class_list().add("thumbnail");
-                pixbuf = new Gdk.Pixbuf.from_file_at_scale(filename, maxwidth, maxheight, true);
-                pixbuf = pixbuf.apply_embedded_orientation();
-            } else {
-                // Load the icon for this mime type.
-                ThemedIcon icon = ContentType.get_icon(gio_content_type) as ThemedIcon;
-                string icon_filename = IconFactory.instance.lookup_icon(icon.names[0], maxwidth)
-                    .get_filename();
-                pixbuf = new Gdk.Pixbuf.from_file_at_scale(icon_filename, maxwidth, maxheight, true);
-            }
-            
-            // convert to PNG and assemble IMG src as a data: URI
-            uint8[] content;
-            pixbuf.save_to_buffer(out content, "png");
-            
-            // Then set the source to a data url.
-            // Save length before transferring ownership (which frees the array)
-            int content_length = content.length;
-            Geary.Memory.Buffer buffer = new Geary.Memory.ByteBuffer.take((owned) content,
-                content_length);
-            
-            img.set_attribute("src", Util.DOM.assemble_data_uri("image/png", buffer));
-        } catch (Error error) {
-            warning("Failed to load image '%s': %s", filename, error.message);
-        }
-    }
-    
     private bool on_navigation_policy_decision_requested(WebKit.WebFrame frame,
         WebKit.NetworkRequest request, WebKit.WebNavigationAction navigation_action,
         WebKit.WebPolicyDecision policy_decision) {
diff --git a/theming/message-viewer.css b/theming/message-viewer.css
index 71ece10b..c0aebb08 100644
--- a/theming/message-viewer.css
+++ b/theming/message-viewer.css
@@ -1,37 +1,34 @@
 /**
- * Background colors associated with received emails:
- *  recv-normal: white
- *  recv-quoted: #e8e8e8
- *  recv-collapsed: #f5f5f5
- *
- * Background colors associated with sent emails:
- *  sent-normal: white
- *  sent-quoted: #e8e8e8
- *  sent-collapsed: #f5f5f5
+ * Style that is inserted into the message after it is loaded.
  */
-@media print {
 
-    body {
-        background-color: white !important;
-    }
-    .avatar, .button, .starred {
-        display: none !important;
-    }
-    .email {
-        display: none !important;
-    }
-    .email.print {
-        display: inline-block !important;
-        background-color: white !important;
-    }
-    .email.print .body {
-        display: block !important;
-        background-color: white !important;
-    }
-    .email.print .preview {
-        display: none !important;
-    }
+/*
+ * General HTML style.
+ */
 
+html, body {
+  left: 0 !important;
+  width: 100% !important;
+
+  /* Trigger CSS 2.1 § 10.6.7 to get a shrink-wrapped height.
+     See also ConversationWebView.get_preferred_height */
+  position: absolute !important;
+  top: 0 !important;
+  bottom: auto !important;
+  height: auto !important;
+
+  /* Disable viewport scrollbbars */
+  overflow: hidden !important;
+}
+
+body {
+  margin: 0 !important;
+  border: 0 !important;
+  padding: 0 !important;
+  color: black;
+  background-color: white;
+  font: caption;
+  word-wrap: break-word;
 }
 
 /* By default, tables reset the font properties to "normal" */
@@ -39,14 +36,6 @@ table {
     font-size: inherit;
 }
 
-body {
-    margin: 0 !important;
-    padding: 0 !important;
-    font: caption;
-    -webkit-user-select: none;
-    -webkit-user-drag: none;
-}
-
 a {
     color: #08c;
 }
@@ -62,15 +51,6 @@ hr {
     margin-bottom: 15px;
 }
 
-.body, .header, .preview {
-    -webkit-user-select: auto;
-    -webkit-user-drag: auto;
-}
-.shower, .hider {
-    -webkit-user-select: none;
-    -webkit-user-drag: none;
-}
-
 .button {
     border: 1px transparent solid;
     border-radius: 2.5px;
@@ -93,140 +73,45 @@ hr {
     box-shadow: inset 0px 0px 1px rgba(0,0,0,0.05);
 }
 
-.email, .composer_embed {
-    border: 1px rgba(0,0,0,1) solid;
-    background-color: white;/* recv-normal */
-    color: black;
-    box-shadow: 0 3px 11px rgba(0,0,0,1);
-    display: block;
-    word-wrap: break-word;
-    width: 100%;
-    box-sizing:border-box;
-    margin-top: 16px;
+blockquote {
+    margin: 5px 10px 5px 10px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border: 0;
+    border-left: 3px #aaa solid;
 }
 
-.composer_embed {
-    height: 300px;
-}
+/**
+ * Message chrome style.
+ */
 
-.email.sent {
-    background-color: white;/* sent-normal */
-}
-
-.email .starred {
-    display: none;
-}
-.email .unstarred {
-    display: block;
-}
-.email.starred .starred {
-    display: block;
-}
-.email.starred .unstarred {
-    display: none;
-}
-.email.read, #multiple_messages .email, .composer_embed {
-    border-color: rgba(0,0,0,0.4);
-    box-shadow: 0 3px 11px rgba(0,0,0,0.21);
-}
-.email.animate {
-    -webkit-transition: border-color 3s ease;
-    -webkit-transition: box-shadow 3s ease;
-}
-
-.email .email_warning {
-    display: none;
-    padding: 1em;
-    background-color: #fcc;
-    text-align: center;
-}
-
-.email_box {
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    width: 100% !important;
-}
-.email_container {
-    overflow: hidden;
-}
-.email_container .header_container {
-    padding: 15px;
-}
-
-.email_container .header_container a:hover * {
-    color: #08c;
-}
-
-.email_container .header_container .button_bar {
-    float: right;
-    margin-top: -6px;
-}
-.email_container .header_container .button_bar > .button {
-    float: left;
-}
-.email_container .header_container .button_bar > .button > .icon {
-    width: 16px;
-    height: 16px;
-}
-.email_container .header_container .preview {
-    font-size: 80%;
+.signature {
     color: #777;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-.avatar {
-    display: none;
-    image-rendering: optimizeQuality;
-}
-
-.avatar[src^=file], .avatar[src^=http] {
     display: inline;
-    width: 48px;
-    height: 48px;
-    float: left;
-    border-radius: 5px;
 }
 
-body:not(.nohide) .email.hide .header_container .avatar {
-    width: 32px;
-    height: 32px;
-    margin-right: 12px;
-    border-radius: 2.5px;
+.signature a,
+.quote_container a {
+    color: #5fb2e7;
 }
 
-.email .body {
-    border-top: 1px solid #999;
-    margin: 16px;
-    margin-top: 0;
-    padding-top: 16px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    position: relative;  /* in case anything inside is positioned */
-}
+@media screen {
+  #part_container, .preview {
+    -webkit-user-select: auto;
+    -webkit-user-drag: auto;
+  }
+  .shower, .hider {
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
+  }
 
-.email .remote_images {
-    display: none;
-    margin: 0 16px;
-    border: 1px solid #999;
-    border-bottom: none;
-    padding: 1em;
-    background: #ffc;
-}
-
-.email .remote_images .close_show_images {
-    float: right;
-    margin-top: -0.67em;
-    margin-right: -0.67em;
-}
-
-.email .replaced_inline_image {
-    max-width: 100%;
+  .replaced_inline_image {
     display: block;
+    max-width: 100%;
     margin-top: 1em;
-}
+  }
 
-.email .link_warning {
+  .link_warning {
     display: inline-block;
     position: absolute;
     margin-top: -1em;
@@ -237,476 +122,102 @@ body:not(.nohide) .email.hide .header_container .avatar {
     /* Reset styles */
     font: caption;
     color: black;
-}
-.email .link_warning a {
+  }
+  .link_warning a {
     color: #08c;
-}
-.email .link_warning span {
+  }
+  .link_warning span {
     display: block;
     padding-left: 1em;
-}
-.email .link_warning .close_link_warning {
+  }
+  .link_warning .close_link_warning {
     float: right;
     margin-top: -0.67em;
     margin-right: -0.67em;
-}
+  }
 
-@media screen {
-
-    body {
-        background-color: #ccc !important;
-    }
-    body:not(.nohide) .email.hide,
-    body:not(.nohide) .email .email.hide {
-        background-color: #f5f5f5;/* recv-collapsed */
-        box-shadow: 0 2px 5px rgba(0,0,0,0.12);
-    }
-    body:not(.nohide) .email.sent.hide,
-    body:not(.nohide) .email.sent .email.hide {
-        background-color: #f5f5f5;/* sent-collapsed */
-    }
-    body:not(.nohide) .email.hide .body,
-    body:not(.nohide) .email.hide > .attachment_container,
-    .email:not(.hide) .header_container .preview,
-    body.nohide .email .header_container .preview,
-    body:not(.nohide) .email.hide .email {
-        display: none;
-    }
-    .email:not(.hide) .email_warning.show,
-    body:not(.nohide) .email.hide .header_container .preview {
-        display: block;
-    }
-    body:not(.nohide) .email:not(:only-of-type) .header_container,
-    body:not(.nohide) .email .email .header_container {
-        cursor: pointer;
-    }
-    .email:not(.hide) .header .field .value,
-    body.nohide .email .header .field .value {
-        cursor: auto;
-    }
-    body:not(.nohide) .email.hide .header {
-        padding: 0;
-        text-align: right;
-    }
-    body:not(.nohide) .email.hide .header .field {
-        display: inline;
-        margin-right: 2px;
-        text-align: left;
-    }
-    body:not(.nohide) .email.hide .header .field:not(:first-child) {
-        display: inline-block;
-    }
-    body:not(.nohide) .email.hide .header .field:not(.important),
-    body:not(.nohide) .email.hide .header .field .title {
-        display: none;
-    }
-    body:not(.nohide) .email.hide .header .field .value {
-        margin-left: 0;
-    }
-    body:not(.nohide) .email.hide .header .field .not_hidden_only,
-    .email:not(.hide) .header .field .hidden_only,
-    body.nohide .email .header .field .hidden_only {
-        display: none;
-    }
-    body:not(.nohide) .email.hide .header .field a {
-        pointer-events: none;
-    }
-    .email:not(.hide) .remote_images.show,
-    body.nohide .email .remote_images.show {
-        display: block;
-    }
-    body:not(.nohide) .email.compressed {
-        margin-top: -1px;
-        height: 10px;
-    }
-    body:not(.nohide) .email.compressed + .email {
-        margin-top: -1px;
-    }
-    body:not(.nohide) .compressed .email_container {
-        overflow: hidden;
-        display: none
-    }
-    body:not(.nohide) .compressed + .compressed + .compressed + .compressed + .compressed + .compressed + .compressed + .compressed + .compressed {
-        display:none;
-    }
-
-}
-
-.email .compressed_note {
-    text-align: center;
-    height: 0;
-}
-.email .compressed_note > span {
-    display: none;
-    padding: 0px 10px;
-    background-color: #f5f5f5;/* recv-collapsed */
-    position: relative;
-    cursor: hand;
-}
-.email.sent .compressed_note > span {
-    background-color: #f5f5f5;/* sent-collapsed */
-}
-body.nohide .email .compressed_note > span {
-    display: none !important;
-}
-
-.email .email {
-    box-shadow: none;
-    margin-top: 0;
-    border: none;
-    border-top: 1px rgba(0,0,0,0.4) solid;
-    background-color: white;/* recv-normal */
-}
-.email.sent .email {
-    background-color: white;/* sent-normal */
-}
-.email .email .email_container .menu,
-.email .email .email_container .starred,
-.email .email .email_container .unstarred {
-    display: none;
-}
-
-.email:not(.attachment) .attachment.icon {
-    display: none;
-}
-.email .header_container .attachment.icon {
-    float: right;
-    margin-top: 7px;
-}
-.email > .attachment_container {
-    padding-bottom: 10px;
-}
-.email > .attachment_container > .top_border {
-    border-bottom: 1px solid #aaa;
-    height: 10px;
-    margin: 0 16px 5px;
-}
-.email > .email + .attachment_container .top_border{
-    height: auto;
-    margin: 0;
-}
-.email > .attachment_container > .attachment {
-    margin: 10px 10px 0 10px;
-    padding: 2px;
-    overflow: hidden;
-    cursor: pointer;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    display: inline;
-}
-
-.email > .attachment_container > .attachment:hover,
-.email > .attachment_container > .attachment:active {
-    border-color: rgba(0,0,0,0.18);
-    box-shadow: inset 0px 0px 1px rgba(255,255,255,0.8);
-}
-
-.email > .attachment_container > .attachment:active {
-    padding: 3px 1px 1px 3px;
-    border-color: rgba(0,0,0,0.20);
-    background-color: rgba(0,0,0,0.05);
-    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.05);
-}
-
-.email > .attachment_container > .attachment .preview {
-    width: 52px;
-    height: 52px;
-    text-align: center;
-    vertical-align: middle;
-}
-.email > .attachment_container > .attachment .preview img {
-    max-width: 50px;
-    max-height: 50px;
-}
-.email > .attachment_container > .attachment .preview .thumbnail {
-    border: 1px solid #999;
-    box-shadow: 0 0 5px #b8b8b8;
-    background-size: 16px 16px;
-    background-position:0 0, 8px 0, 8px -8px, 0px 8px;
-}
-.email > .attachment_container > .attachment:hover .preview .thumbnail {
-    background-image:
-        -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent),
-        -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent),
-        -webkit-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),
-        -webkit-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%);
-}
-.email > .attachment_container > .attachment .info {
-    vertical-align: middle;
-    padding-left: 5px;
-}
-.email > .attachment_container > .attachment .info > :not(.filename) {
-    color: #666;
-}
-
-.header {
-    overflow: hidden;
-}
-.header .field {
-    clear: both;
-    overflow: hidden;
-    font-size: 90%;
-}
-.header .field .title,
-.header .field .value {
-    float: left;
-    padding: 2px 0;
-}
-.header .field .title {
-    width: 5em;
-    text-align: right;
-    padding-right: 7px;
-    color: #777;
-    position: absolute;
-}
-.header .field .value {
-    color: black;
-    margin-left: 5.25em;
-    max-height: 5em;
-    overflow-y: auto;
-}
-.header .field .value a {
-    color: black;
-    text-decoration: none;
-}
-.header .field.important .address_name {
-    font-weight: bold;
-}
-.header .field .address_value {
-    color: #777;
-}
-
-.geary_spacer {
-    display: table;
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    width: 100% !important;
-}
-
-.signature {
-    color: #777;
-    display: inline;
-}
-.signature a,
-.quote_container a {
-    color: #5fb2e7;
-}
-
-.quote_container {
+  .quote_container {
     position: relative;
     margin: 5px 0;
     padding: 12px;
     color: #303030;
     background-color: #e8e8e8;/* recv-quoted */
     border-radius: 4px;
-}
-.quote_container .quote {
+  }
+  .quote_container .quote {
     overflow: hidden;
     position: relative;
     z-index: 0;
-}
-body:not(.nohide) .quote_container.controllable .quote {
-    max-height: 80px;
-}
-body:not(.nohide) .quote_container.controllable.show .quote {
+  }
+  .quote_container.controllable .quote {
+    max-height: 6em;
+  }
+  .quote_container.controllable.show .quote {
     max-height: none;
-}
+  }
 
-.email.sent .quote_container {
+  .sent .quote_container {
     background-color: #e8e8e8;/* sent-quoted */
-}
+  }
 
-.quote_container > .shower,
-.quote_container > .hider {
+  .quote_container > .shower,
+  .quote_container > .hider {
     position: absolute;
     z-index: 1;
     bottom: -7px;
     left: 0;
     right: 0;
     display: none;
-}
-.quote_container > .shower > input,
-.quote_container > .hider > input {
+  }
+
+  .quote_container > .shower > input,
+  .quote_container > .hider > input {
     width: 100%;
     height: 15px;
     padding: 0;
     font-size: 7px;  /* Absolute size in pixels for graphics */
     color: #888;
-}
-.quote_container > .shower:hover > input,
-.quote_container > .hider:hover > input {
+  }
+  .quote_container > .shower:hover > input,
+  .quote_container > .hider:hover > input {
     color: #000;
-}
-body:not(.nohide) .quote_container.controllable {
+  }
+
+  .quote_container.controllable {
     margin-bottom: 7px;
     padding-bottom: 0;
-}
-body:not(.nohide) .quote_container.controllable.show {
+  }
+  .quote_container.controllable.show {
     padding-bottom: 12px;
-}
-body:not(.nohide) .quote_container.controllable > .shower {
+  }
+  .quote_container.controllable > .shower {
     display: block;
-}
-body:not(.nohide) .quote_container.controllable.show > .shower {
+  }
+  .quote_container.controllable.show > .shower {
     display: none;
-}
-body:not(.nohide) .quote_container.controllable.show > .hider {
+  }
+  .quote_container.controllable.show > .hider {
     display: block;
-}
+  }
 
-#message_container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    padding: 0 15px 15px;
-    box-sizing: border-box;
-    min-height: 100%;
-}
-#multiple_messages {
-    display: none;
-    text-align: center;
-}
-#multiple_messages > .email {
-    margin: 100px auto;
-    display: inline-block;
-    width: auto;
-    padding: 15px;
-}
-#email_template,
-#attachment_template,
-#link_warning_template {
-    display: none;
-}
-
-blockquote {
-    margin: 5px 10px 5px 10px;
-    padding-left: 5px;
-    padding-right: 5px;
-    border: 0;
-    border-left: 3px #aaa solid;
-}
-
-.search_coloring *::selection {
+  .search_coloring *::selection {
     background-color: #00ddff;
+  }
 }
 
-.draft_edit {
-    display: none;
-    margin: 16px;
-    text-align: right;
+@media print {
+  body {
+    background-color: white !important;
+  }
+
+  #part_container {
+    display: none !important;
+  }
+  #print_container {
+    display: inline-block !important;
+    background-color: white !important;
+  }
+  #print_container .preview {
+    display: none !important;
+  }
 }
-
-.draft_edit_button {
-    background-color: #e8e8e8;
-}
-
-#spinner {
-    display: none;
-    margin: 100px auto;
-    width: 128px;
-}
-
-/*
-Spinner code from CSSload.net
-License: http://cssload.net/en/terms_of_use
-*/
-
-#spinner #floatingCirclesG {
-    position:relative;
-    width:128px;
-    height:128px;
-    -webkit-transform:scale(0.6);
-    transform:scale(0.6);
-}
-
-#spinner .f_circleG {
-    position:absolute;
-    background-color:#FFFFFF;
-    height:23px;
-    width:23px;
-    -webkit-border-radius:12px;
-    -webkit-animation-name:f_fadeG;
-    -webkit-animation-duration:1.04s;
-    -webkit-animation-iteration-count:infinite;
-    -webkit-animation-direction:linear;
-    border-radius:12px;
-    animation-name:f_fadeG;
-    animation-duration:1.04s;
-    animation-iteration-count:infinite;
-    animation-direction:linear;
-}
-
-#spinner #frotateG_01 {
-    left:0;
-    top:52px;
-    -webkit-animation-delay:0.39s;
-    animation-delay:0.39s;
-}
-
-#spinner #frotateG_02 {
-    left:15px;
-    top:15px;
-    -webkit-animation-delay:0.52s;
-    animation-delay:0.52s;
-}
-
-#spinner #frotateG_03 {
-    left:52px;
-    top:0;
-    -webkit-animation-delay:0.65s;
-    animation-delay:0.65s;
-}
-
-#spinner #frotateG_04 {
-    right:15px;
-    top:15px;
-    -webkit-animation-delay:0.78s;
-    animation-delay:0.78s;
-}
-
-#spinner #frotateG_05 {
-    right:0;
-    top:52px;
-    -webkit-animation-delay:0.91s;
-    animation-delay:0.91s;
-}
-
-#spinner #frotateG_06 {
-    right:15px;
-    bottom:15px;
-    -webkit-animation-delay:1.04s;
-    animation-delay:1.04s;
-}
-
-#spinner #frotateG_07 {
-    left:52px;
-    bottom:0;
-    -moz-animation-delay:1.17s;
-    -webkit-animation-delay:1.17s;
-    -ms-animation-delay:1.17s;
-    -o-animation-delay:1.17s;
-    animation-delay:1.17s;
-}
-
-#spinner #frotateG_08 {
-    left:15px;
-    bottom:15px;
-    -moz-animation-delay:1.3s;
-    -webkit-animation-delay:1.3s;
-    -ms-animation-delay:1.3s;
-    -o-animation-delay:1.3s;
-    animation-delay:1.3s;
-}
-
-@-webkit-keyframes f_fadeG {
-    0% {
-        background-color:#000000
-    }
-    
-    100% {
-    background-color:#FFFFFF
-    }
-}
-
-/* /Spinner */
-
diff --git a/theming/message-viewer.html b/theming/message-viewer.html
deleted file mode 100644
index d4304a85..00000000
--- a/theming/message-viewer.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<html>
-<head>
-    <title>Geary</title>
-    <style id="default_fonts"></style>
-    <style id="blacklist_ids"></style>
-</head>
-<body>
-<div id="message_container"><span id="placeholder"></span></div>
-<div id="multiple_messages"><div id="selection_counter" class="email"></div></div>
-<div id="email_template" class="email">
-    <div class="compressed_note"><span><span></div>
-    <div class="geary_spacer"></div>
-    <div class="email_container">
-        <div class="email_warning"></div>
-        <div class="header_container">
-            <img src="" class="avatar" />
-            <div class="button_bar">
-                <div class="starred button"><img src="" class="icon" /></div>
-                <div class="unstarred button"><img src="" class="icon" /></div>
-                <div class="menu button"><img src="" class="icon" /></div>
-            </div>
-            <img src="" class="attachment icon" />
-            <div class="header"></div>
-            <div class="preview"></div>
-        </div>
-        <div class="remote_images"><img class="close_show_images button" /></div>
-        <div class="body" dir="auto"></div>
-        <div class="draft_edit"><span class="draft_edit_button button"></span></div>
-    </div>
-</div>
-<div id="attachment_template" class="attachment_container">
-    <div class="top_border"></div>
-    <table class="attachment"><tr>
-        <td class="preview"><img src="" /></td>
-        <td class="info">
-            <div class="filename"></div>
-            <div class="filesize"></div>
-        </td>
-    </tr></table>
-</div>
-<div id="link_warning_template" class="link_warning">
-    <img class="close_link_warning button" />
-</div>
-<div id="spinner">
-<!--
- Spinner code from CSSLoad.net
- License: http://cssload.net/en/terms_of_use
- -->
-<div id="floatingCirclesG">
-    <div class="f_circleG" id="frotateG_01"></div>
-    <div class="f_circleG" id="frotateG_02"></div>
-    <div class="f_circleG" id="frotateG_03"></div>
-    <div class="f_circleG" id="frotateG_04"></div>
-    <div class="f_circleG" id="frotateG_05"></div>
-    <div class="f_circleG" id="frotateG_06"></div>
-    <div class="f_circleG" id="frotateG_07"></div>
-    <div class="f_circleG" id="frotateG_08"></div>
-</div>
-
-
-</div>
-</body>
-</html>