Bug 871014 - (Part 3) Represent typeface choices more visually. r=bnicholson
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Tue, 14 May 2013 14:55:44 -0700
changeset 143432 fbfc9340fc489c1c883b214a2fdc691d18356082
parent 143431 0623dece2b893efe98c7d5a83e9b41c07e6c1e61
child 143433 e635e544621e7e9918c246b303ea6dc86e150626
push id2697
push userbbajaj@mozilla.com
push dateMon, 05 Aug 2013 18:49:53 +0000
treeherdermozilla-beta@dfec938c7b63 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbnicholson
bugs871014
milestone24.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 871014 - (Part 3) Represent typeface choices more visually. r=bnicholson
mobile/android/chrome/content/aboutReader.html
mobile/android/chrome/content/aboutReader.js
mobile/android/locales/en-US/chrome/aboutReader.properties
mobile/android/themes/core/aboutReader.css
--- a/mobile/android/chrome/content/aboutReader.html
+++ b/mobile/android/chrome/content/aboutReader.html
@@ -21,17 +21,17 @@
   <div id="reader-message" class="message">
   </div>
 
   <ul id="reader-toolbar" class="toolbar toolbar-hidden">
     <li><a id="share-button" class="button share-button" href="#"></a></li>
     <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>
         <ul id="color-scheme-buttons" class="segmented-button"></ul>
       </li>
     </ul>
     <li><a id="list-button" class="button list-button" href="#"></a></li>
     <li><a id="toggle-button" class="button toggle-button" href="#"></a></li>
--- a/mobile/android/chrome/content/aboutReader.js
+++ b/mobile/android/chrome/content/aboutReader.js
@@ -57,33 +57,39 @@ let AboutReader = function(doc, win) {
   win.addEventListener("resize", this, false);
 
   this._setupAllDropdowns();
   this._setupButton("toggle-button", this._onReaderToggle.bind(this));
   this._setupButton("list-button", this._onList.bind(this));
   this._setupButton("share-button", this._onShare.bind(this));
 
   let colorSchemeOptions = [
+    { name: gStrings.GetStringFromName("aboutReader.colorSchemeDark"),
+      value: "dark"},
     { name: gStrings.GetStringFromName("aboutReader.colorSchemeLight"),
       value: "light"},
-    { name: gStrings.GetStringFromName("aboutReader.colorSchemeDark"),
-      value: "dark"},
     { name: gStrings.GetStringFromName("aboutReader.colorSchemeAuto"),
       value: "auto"}
   ];
 
   let colorScheme = Services.prefs.getCharPref("reader.color_scheme");
   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");
   this._setupSegmentedButton("font-type-buttons", fontTypeOptions, fontType, this._setFontType.bind(this));
   this._setFontType(fontType);
 
   let fontSizeSample = gStrings.GetStringFromName("aboutReader.fontSizeSample");
   let fontSizeOptions = [
@@ -575,22 +581,28 @@ AboutReader.prototype = {
     let doc = this._doc;
     let segmentedButton = doc.getElementById(id);
 
     for (let i = 0; i < options.length; i++) {
       let option = options[i];
 
       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);
 
       link.addEventListener("click", function(aEvent) {
         if (!aEvent.isTrusted)
           return;
 
         aEvent.stopPropagation();
--- a/mobile/android/locales/en-US/chrome/aboutReader.properties
+++ b/mobile/android/locales/en-US/chrome/aboutReader.properties
@@ -5,16 +5,21 @@
 aboutReader.loading=Loading...
 aboutReader.loadError=Failed to load article from page
 
 aboutReader.colorSchemeLight=Light
 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.
 aboutReader.fontSizeSample=A
 
 aboutReader.toolbarTip=Tap the screen to show reader options
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -378,17 +378,17 @@ body {
   border-radius: 3px;
   visibility: hidden;
 }
 
 .dropdown-popup > hr {
   width: 100%;
   height: 0px;
   border: 0px;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid #C5D0DA;
   margin: 0;
 }
 
 .open > .dropdown-popup {
   margin-top: 0px;
   margin-bottom: 6px;
   bottom: 100%;
   visibility: visible;
@@ -400,52 +400,86 @@ body {
   height: 18px;
   bottom: -18px;
   background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-mdpi.png');
   background-size: 40px 18px;
   background-position: center;
   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');
 }
 
 .toggle-button {
   background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-mdpi.png');
 }