Bug 857989 - Add Serif/Sans Serif font toggle to Reader Mode. r=lucasr

mobile/android/app/mobile.js

@@ -653,6 +653,9 @@ pref("reader.margin_size", 5);
 // The default color scheme in reader (light, dark, sepia)
 pref("reader.color_scheme", "light");
 
+// The font type in reader (sans-serif, serif)
+pref("reader.font_type", "sans-serif");
+
 // Used to show a first-launch tip in reader
 pref("reader.has_used_toolbar", false);
 

mobile/android/chrome/content/aboutReader.html

@@ -29,6 +29,8 @@
       <li class="dropdown-popup">
         <ul id="color-scheme-buttons" class="segmented-button"></ul>
         <hr></hr>
+        <ul id="font-type-buttons" class="segmented-button"></ul>
+        <hr></hr>
         <div id="font-size-control" class="step-control"></div>
         <hr></hr>
         <div id="margin-size-control" class="step-control"></div>

mobile/android/chrome/content/aboutReader.js

@@ -69,6 +69,17 @@ let AboutReader = function(doc, win) {
   this._setupSegmentedButton("color-scheme-buttons", colorSchemeOptions, colorScheme, this._setColorScheme.bind(this));
   this._setColorScheme(colorScheme);
 
+  let fontTypeOptions = [
+    { name: gStrings.GetStringFromName("aboutReader.fontTypeSansSerif"),
+      value: "sans-serif"},
+    { name: gStrings.GetStringFromName("aboutReader.fontTypeSerif"),
+      value: "serif"}
+  ];
+
+  let fontType = Services.prefs.getCharPref("reader.font_type");
+  this._setupSegmentedButton("font-type-buttons", fontTypeOptions, fontType, this._setFontType.bind(this));
+  this._setFontType(fontType);
+
   let fontTitle = gStrings.GetStringFromName("aboutReader.textTitle");
   this._setupStepControl("font-size-control", fontTitle, this._onFontSizeChange.bind(this));
   this._fontSize = 0;
@@ -297,6 +308,21 @@ AboutReader.prototype = {
     Services.prefs.setCharPref("reader.color_scheme", this._colorScheme);
   },
 
+  _setFontType: function Reader_setFontType(newFontType) {
+    if (this._fontType === newFontType)
+      return;
+
+    let bodyClasses = this._doc.body.classList;
+
+    if (this._fontType)
+      bodyClasses.remove(this._fontType);
+
+    this._fontType = newFontType;
+    bodyClasses.add(this._fontType);
+
+    Services.prefs.setCharPref("reader.font_type", this._fontType);
+  },
+
   _getToolbarVisibility: function Reader_getToolbarVisibility() {
     return !this._toolbarElement.classList.contains("toolbar-hidden");
   },

mobile/android/locales/en-US/chrome/aboutReader.properties

@@ -12,4 +12,7 @@ aboutReader.colorSchemeLight=Light
 aboutReader.colorSchemeDark=Dark
 aboutReader.colorSchemeSepia=Sepia
 
+aboutReader.fontTypeSansSerif=Sans
+aboutReader.fontTypeSerif=Serif
+
 aboutReader.toolbarTip=Tap the screen to show reader options

mobile/android/themes/core/aboutReader.css

@@ -7,7 +7,6 @@ html {
 }
 
 body {
-  font-family: "Open Sans","Droid Sans",sans-serif;
   margin-top: 20px;
   margin-bottom: 20px;
 }
@@ -22,6 +21,14 @@ body {
   color: #eeeeee;
 }
 
+.sans-serif {
+  font-family: "Open Sans",sans-serif;
+}
+
+.serif {
+  font-family: "Charis SIL",serif;
+}
+
 .message {
   margin-top: 40px;
   display: none;
@@ -42,7 +49,6 @@ body {
 }
 
 .header > h1 {
-  font-family: "Open Sans","Droid Sans",sans-serif;
   font-weight: 300;
   line-height: 1.1em;
   width: 100%;
@@ -404,6 +410,11 @@ body {
   float: left;
 }
 
+.dropdown-popup > hr:first-of-type {
+  float: none;
+  margin: 0;
+}
+
 .dropdown-popup .button:active {
   background-color: #ccc;
 }