[geary] Use system fonts in webviews: Bug 713746

[Robert Schroll <rschroll src gnome org>]

commit ef98b7d1905b49d922007b690e6d1769cc61b9e2
Author: Robert Schroll <rschroll gmail com>
Date:   Wed May 21 20:58:51 2014 -0700

    Use system fonts in webviews: Bug 713746
    
    Set the WebSettings default and monospace fonts from the system
    settings.  Also, use "font: caption" to get the UI font for UI elements
    in the webview.  The former need to be updated each time they change.
    The latter is automatically updated, though that only works
    sporadically.
    
    Unfortunately, this leaves messages in the conversation view in the UI
    font, not the document font, because webkit treats "font-family:
    initial" like "font-family: inherit" for some reason.

 src/CMakeLists.txt                                 |    1 +
 src/client/application/geary-config.vala           |    2 +-
 src/client/components/stylish-webview.vala         |   63 ++++++++++++++++++++
 src/client/composer/composer-widget.vala           |    6 +-
 .../conversation-viewer/conversation-web-view.vala |    4 +-
 theming/message-viewer.css                         |   20 ++++---
 6 files changed, 82 insertions(+), 14 deletions(-)
---
diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt
index d28385b..90742f1 100644
--- a/src/CMakeLists.txt
+++ b/src/CMakeLists.txt
@@ -321,6 +321,7 @@ client/components/monitored-spinner.vala
 client/components/pill-toolbar.vala
 client/components/status-bar.vala
 client/components/stock.vala
+client/components/stylish-webview.vala
 
 client/composer/composer-container.vala
 client/composer/composer-embed.vala
diff --git a/src/client/application/geary-config.vala b/src/client/application/geary-config.vala
index 23aa6ae..ad42a21 100644
--- a/src/client/application/geary-config.vala
+++ b/src/client/application/geary-config.vala
@@ -21,7 +21,7 @@ public class Configuration {
     
     public Settings settings { get; private set; }
     
-    private Settings gnome_interface;
+    public Settings gnome_interface;
     private Settings? indicator_datetime;
     
     public int window_width {
diff --git a/src/client/components/stylish-webview.vala b/src/client/components/stylish-webview.vala
new file mode 100644
index 0000000..d739b62
--- /dev/null
+++ b/src/client/components/stylish-webview.vala
@@ -0,0 +1,63 @@
+/* Copyright 2014 Yorba Foundation
+ *
+ * This software is licensed under the GNU Lesser General Public License
+ * (version 2.1 or later).  See the COPYING file in this distribution.
+ */
+
+public class StylishWebView : WebKit.WebView {
+    
+    private string _document_font;
+    public string document_font {
+        get {
+            return _document_font;
+        }
+        set {
+            _document_font = value;
+            Pango.FontDescription font = Pango.FontDescription.from_string(value);
+            WebKit.WebSettings config = settings;
+            config.default_font_family = font.get_family();
+            config.default_font_size = font.get_size() / Pango.SCALE;
+            settings = config;
+            document_font_changed();
+        }
+    }
+    
+    private string _monospace_font;
+    public string monospace_font {
+        get {
+            return _monospace_font;
+        }
+        set {
+            _monospace_font = value;
+            Pango.FontDescription font = Pango.FontDescription.from_string(value);
+            WebKit.WebSettings config = settings;
+            config.monospace_font_family = font.get_family();
+            config.default_monospace_font_size = font.get_size() / Pango.SCALE;
+            settings = config;
+            monospace_font_changed();
+        }
+    }
+    
+    private string _interface_font;
+    public string interface_font {
+        get {
+            return _interface_font;
+        }
+        set {
+            _interface_font = value;
+            interface_font_changed();
+        }
+    }
+    
+    public signal void document_font_changed();
+    public signal void monospace_font_changed();
+    public signal void interface_font_changed();
+    
+    public StylishWebView() {
+        Settings system_settings = GearyApplication.instance.config.gnome_interface;
+        system_settings.bind("document-font-name", this, "document-font", SettingsBindFlags.DEFAULT);
+        system_settings.bind("monospace-font-name", this, "monospace-font", SettingsBindFlags.DEFAULT);
+        system_settings.bind("font-name", this, "interface-font", SettingsBindFlags.DEFAULT);
+    }
+}
+
diff --git a/src/client/composer/composer-widget.vala b/src/client/composer/composer-widget.vala
index c1b07fc..0f5d8d3 100644
--- a/src/client/composer/composer-widget.vala
+++ b/src/client/composer/composer-widget.vala
@@ -70,7 +70,7 @@ public class ComposerWidget : Gtk.EventBox {
             font-family: monospace !important;
             font-weight: normal;
             font-style: normal;
-            font-size: 10pt;
+            font-size: medium !important;
             color: black;
             text-decoration: none;
         }
@@ -461,7 +461,7 @@ public class ComposerWidget : Gtk.EventBox {
         if (account.information.use_email_signature)
             add_signature();
         
-        editor = new WebKit.WebView();
+        editor = new StylishWebView();
         edit_fixer = new WebViewEditFixer(editor);
 
         editor.editable = true;
@@ -517,7 +517,7 @@ public class ComposerWidget : Gtk.EventBox {
         html_item2 = new Gtk.CheckMenuItem();
         html_item2.related_action = ui.get_action("ui/htmlcompose");
         
-        WebKit.WebSettings s = new WebKit.WebSettings();
+        WebKit.WebSettings s = editor.settings;
         s.enable_spell_checking = GearyApplication.instance.config.spell_check;
         s.auto_load_images = false;
         s.enable_scripts = false;
diff --git a/src/client/conversation-viewer/conversation-web-view.vala 
b/src/client/conversation-viewer/conversation-web-view.vala
index 3368d86..f2ccc2d 100644
--- a/src/client/conversation-viewer/conversation-web-view.vala
+++ b/src/client/conversation-viewer/conversation-web-view.vala
@@ -4,7 +4,7 @@
  * (version 2.1 or later).  See the COPYING file in this distribution.
  */
 
-public class ConversationWebView : WebKit.WebView {
+public class ConversationWebView : StylishWebView {
     private const string[] always_loaded_prefixes = {
         "http://www.gravatar.com/avatar/";,
         "data:"
@@ -29,7 +29,7 @@ public class ConversationWebView : WebKit.WebView {
         set_border_width(0);
         allow_prefix = random_string(10) + ":";
         
-        WebKit.WebSettings config = new WebKit.WebSettings();
+        WebKit.WebSettings config = settings;
         config.enable_scripts = false;
         config.enable_java_applet = false;
         config.enable_plugins = false;
diff --git a/theming/message-viewer.css b/theming/message-viewer.css
index b7c10a9..06b4989 100644
--- a/theming/message-viewer.css
+++ b/theming/message-viewer.css
@@ -34,10 +34,15 @@
 
 }
 
+/* By default, tables reset the font properties to "normal" */
+table {
+    font-size: inherit;
+}
+
 body {
     margin: 0 !important;
     padding: 0 !important;
-    font-size: 10pt !important;
+    font: caption;
     -webkit-user-select: none;
     -webkit-user-drag: none;
 }
@@ -92,7 +97,6 @@ hr {
     border: 1px rgba(0,0,0,1) solid;
     background-color: white;/* recv-normal */
     color: black;
-    font-size: small;
     box-shadow: 0 3px 11px rgba(0,0,0,1);
     display: block;
     word-wrap: break-word;
@@ -179,7 +183,7 @@ hr {
     height: 16px;
 }
 .email_container .header_container .preview {
-    font-size: 8pt;
+    font-size: 80%;
     color: #777;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -213,6 +217,8 @@ body:not(.nohide) .email.hide .header_container .avatar {
     overflow-x: auto;
     overflow-y: hidden;
     position: relative;  /* in case anything inside is positioned */
+    font-family: initial;
+    font-size: medium;
 }
 
 .email .remote_images {
@@ -245,8 +251,7 @@ body:not(.nohide) .email.hide .header_container .avatar {
     background: #ffc;
     box-shadow: 0 3px 11px rgba(0,0,0,0.21);
     /* Reset styles */
-    font-size: small;
-    font-family: sans;
+    font: caption;
     color: black;
 }
 .email .link_warning a {
@@ -400,7 +405,6 @@ body.nohide .email .compressed_note > span {
     margin: 10px 10px 0 10px;
     padding: 2px;
     overflow: hidden;
-    font-size: 10pt;
     cursor: pointer;
     border: 1px solid transparent;
     border-radius: 4px;
@@ -457,7 +461,7 @@ body.nohide .email .compressed_note > span {
 .header .field {
     clear: both;
     overflow: hidden;
-    font-size: 9pt;
+    font-size: 90%;
 }
 .header .field .title,
 .header .field .value {
@@ -542,7 +546,7 @@ body:not(.nohide) .quote_container.controllable.show .quote {
     width: 100%;
     height: 15px;
     padding: 0;
-    font-size: 7px;
+    font-size: 7px;  /* Absolute size in pixels for graphics */
     color: #888;
 }
 .quote_container > .shower:hover > input,