Bug 871014 - (Part 3) Represent typeface choices more visually. r=bnicholson

mobile/android/chrome/content/aboutReader.html

@@ -26,7 +26,7 @@
     <ul class="dropdown">
       <li><a class="dropdown-toggle button style-button" href="#"></a></li>
       <li class="dropdown-popup">
-        <ul id="font-type-buttons" class="segmented-button"></ul>
+        <ul id="font-type-buttons"></ul>
         <hr></hr>
         <ul id="font-size-buttons" class="segmented-button"></ul>
         <hr></hr>

mobile/android/chrome/content/aboutReader.js

@@ -62,10 +62,10 @@ let AboutReader = function(doc, win) {
   this._setupButton("share-button", this._onShare.bind(this));
 
   let colorSchemeOptions = [
-    { name: gStrings.GetStringFromName("aboutReader.colorSchemeLight"),
-      value: "light"},
     { name: gStrings.GetStringFromName("aboutReader.colorSchemeDark"),
       value: "dark"},
+    { name: gStrings.GetStringFromName("aboutReader.colorSchemeLight"),
+      value: "light"},
     { name: gStrings.GetStringFromName("aboutReader.colorSchemeAuto"),
       value: "auto"}
   ];
@@ -74,11 +74,17 @@ let AboutReader = function(doc, win) {
   this._setupSegmentedButton("color-scheme-buttons", colorSchemeOptions, colorScheme, this._setColorSchemePref.bind(this));
   this._setColorSchemePref(colorScheme);
 
+  let fontTypeSample = gStrings.GetStringFromName("aboutReader.fontTypeSample");
   let fontTypeOptions = [
-    { name: gStrings.GetStringFromName("aboutReader.fontTypeSansSerif"),
-      value: "sans-serif"},
-    { name: gStrings.GetStringFromName("aboutReader.fontTypeSerif"),
-      value: "serif"}
+    { name: fontTypeSample,
+      description: gStrings.GetStringFromName("aboutReader.fontTypeCharis"),
+      value: "serif",
+      linkClass: "serif" },
+    { name: fontTypeSample,
+      description: gStrings.GetStringFromName("aboutReader.fontTypeOpenSans"),
+      value: "sans-serif",
+      linkClass: "sans-serif"
+    },
   ];
 
   let fontType = Services.prefs.getCharPref("reader.font_type");
@@ -580,12 +586,18 @@ AboutReader.prototype = {
 
       let item = doc.createElement("li");
       let link = doc.createElement("a");
-      link.innerHTML = option.name;
+      link.textContent = option.name;
       item.appendChild(link);
 
       if (option.linkClass !== undefined)
         link.classList.add(option.linkClass);
 
+      if (option.description !== undefined) {
+        let description = doc.createElement("div");
+        description.textContent = option.description;
+        item.appendChild(description);
+      }
+
       link.style.MozUserSelect = 'none';
       segmentedButton.appendChild(item);
 

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

@@ -10,8 +10,13 @@ aboutReader.colorSchemeDark=Dark
 aboutReader.colorSchemeSepia=Sepia
 aboutReader.colorSchemeAuto=Auto
 
-aboutReader.fontTypeSansSerif=Sans
-aboutReader.fontTypeSerif=Serif
+# LOCALIZATION NOTE (aboutReader.fontTypeCharis, aboutReader.fontTypeOpenSans):
+# These are the names of the fonts that are used.
+aboutReader.fontTypeCharis=Charis
+aboutReader.fontTypeOpenSans=Open Sans
+
+# LOCALIZATION NOTE (aboutReader.fontTypeSample): String used to sample font types.
+aboutReader.fontTypeSample=Aa
 
 # LOCALIZATION NOTE (aboutReader.fontSizeSample): String used to sample a relative font size
 # for the font size setting. Tapping different samples will change the font size.

mobile/android/themes/core/aboutReader.css

@@ -383,7 +383,7 @@ body {
   width: 100%;
   height: 0px;
   border: 0px;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid #C5D0DA;
   margin: 0;
 }
 
@@ -405,42 +405,76 @@ body {
   display: block;
 }
 
+#font-type-buttons,
 .segmented-button {
   display: flex;
   flex-direction: row;
   list-style: none;
-  margin: 0;
   padding: 10px 5px;
   white-space: nowrap;
 }
 
+#font-type-buttons > li,
 .segmented-button > li {
   width: 50px; /* combined with flex, this acts as a minimum width */
   flex: 1 0 auto;
   text-align: center;
   line-height: 20px;
-  border-left: 1px solid #ccc;
+}
+
+#font-type-buttons > li {
+  padding: 10px 0;
+}
+
+.segmented-button > li {
+  border-left: 1px solid #C5D0DA;
 }
 
 .segmented-button > li:first-child {
   border-left: 0px;
 }
 
-.segmented-button > li > a,
-.segmented-button > li > a:hover
-.segmented-button > li > a:visited {
-  display: block;
+#font-type-buttons > li > a,
+.segmented-button > li > a {
   vertical-align: middle;
-  padding: 5px 0;
   text-decoration: none;
   color: black;
 }
 
+#font-type-buttons > li > a {
+  display: inline-block;
+  font-size: 48px;
+  line-height: 50px;
+  margin-bottom: 5px;
+  border-bottom: 3px solid transparent;
+}
+
+.segmented-button > li > a {
+  display: block;
+  padding: 5px 0;
+  font-family: "Roboto",sans-serif;
+  font-weight: lighter;
+}
+
+#font-type-buttons > li > a:active,
+#font-type-buttons > li.selected > a {
+  border-color: #ff9400;
+}
+
 .segmented-button > li > a:active,
 .segmented-button > li.selected > a {
   font-weight: bold;
 }
 
+#font-type-buttons > li > .sans-serif {
+  font-weight: lighter;
+}
+
+#font-type-buttons > li > div {
+  color: #666;
+  font-size: 12px;
+}
+
 .toggle-button.on {
   background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-mdpi.png');
 }