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

@@ -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

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 {

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);
+    }
+}
+

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;

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;

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,