Bug 1149068 - Use the correct font for the Sans Serif font button. ui-r=maritz, r=jaws, r=margaret, a=sledru
authorBlake Winton <bwinton@latte.ca>
Wed, 01 Apr 2015 18:51:53 -0400
changeset 258533 44de10db57a6
parent 258532 849bf3c58408
child 258534 eb5e2063637b
push id4690
push userryanvm@gmail.com
push date2015-04-20 16:04 +0000
treeherdermozilla-beta@eb5e2063637b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmaritz, jaws, margaret, sledru
bugs1149068
milestone38.0
Bug 1149068 - Use the correct font for the Sans Serif font button. ui-r=maritz, r=jaws, r=margaret, a=sledru
mobile/android/themes/core/aboutReader.css
toolkit/components/reader/AboutReader.jsm
toolkit/themes/osx/global/jar.mn
toolkit/themes/windows/global/aboutReader.css
toolkit/themes/windows/global/jar.mn
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -351,17 +351,17 @@ body {
   background: #EBEBF0;
   visibility: hidden;
   border-top: 1px solid #D7D9DB;
 }
 
 /* Only used on desktop */
 .dropdown-popup > hr,
 .dropdown-arrow,
-#font-type-buttons > button > span {
+#font-type-buttons > button > .name {
   display: none;
 }
 
 .open > .dropdown-popup {
   visibility: visible;
   bottom: 100%;
 }
 
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -794,27 +794,29 @@ 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("button");
 
-      // We make this extra span so that we can hide it if necessary.
-      let span = doc.createElement("span");
-      span.textContent = option.name;
-      item.appendChild(span);
+      // Put the name in a div so that Android can hide it.
+      let div = doc.createElement("div");
+      div.textContent = option.name;
+      div.classList.add("name");
+      item.appendChild(div);
 
       if (option.itemClass !== undefined)
         item.classList.add(option.itemClass);
 
       if (option.description !== undefined) {
         let description = doc.createElement("div");
         description.textContent = option.description;
+        description.classList.add("description");
         item.appendChild(description);
       }
 
       segmentedButton.appendChild(item);
 
       item.addEventListener("click", function(aEvent) {
         if (!aEvent.isTrusted)
           return;
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -5,17 +5,17 @@
 toolkit.jar:
 % skin global classic/1.0 %skin/classic/global/
   skin/classic/global/10pct_transparent_grey.png
   skin/classic/global/50pct_transparent_grey.png
   skin/classic/global/about.css                                      (../../windows/global/about.css)
   skin/classic/global/aboutCache.css                                 (../../windows/global/aboutCache.css)
   skin/classic/global/aboutCacheEntry.css                            (../../windows/global/aboutCacheEntry.css)
   skin/classic/global/aboutMemory.css                                (../../windows/global/aboutMemory.css)
-  skin/classic/global/aboutReader.css                                (../../windows/global/aboutReader.css)
+* skin/classic/global/aboutReader.css                                (../../windows/global/aboutReader.css)
   skin/classic/global/aboutSupport.css                               (../../windows/global/aboutSupport.css)
   skin/classic/global/appPicker.css                                  (../../windows/global/appPicker.css)
   skin/classic/global/arrow.css
   skin/classic/global/autocomplete.css
   skin/classic/global/button.css
   skin/classic/global/checkbox.css
   skin/classic/global/colorpicker.css
   skin/classic/global/commonDialog.css
--- a/toolkit/themes/windows/global/aboutReader.css
+++ b/toolkit/themes/windows/global/aboutReader.css
@@ -35,23 +35,25 @@ body.loaded {
 
 .sepia,
 .sepia-button {
   color: #333333;
   background-color: #f0ece7;
 }
 
 .sans-serif,
+.sans-serif-button,
 .sans-serif .remove-button {
-  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
 }
 
 .serif,
+.serif-button,
 .serif .remove-button {
-  font-family: "Charis SIL", Georgia, "Times New Roman", serif;
+  font-family: Georgia, "Times New Roman", serif;
 }
 
 .font-size1 {
   font-size: 10px;
 }
 
 .font-size2 {
   font-size: 12px;
@@ -102,17 +104,17 @@ body.loaded {
   text-align: start;
   display: none;
 }
 
 .domain {
   font-size: 0.9em;
   line-height: 1.48em;
   padding-bottom: 4px;
-  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
   text-decoration: none;
   border-bottom: 1px solid;
   color: #0095dd;
 }
 
 .light > .container > .header > .domain,
 .sepia > .container > .header > .domain {
   border-bottom-color: #333333;
@@ -255,17 +257,17 @@ body.loaded {
 .content ol {
   -moz-padding-start: 30px;
   list-style: decimal;
 }
 
 /*======= Controls toolbar =======*/
 
 .toolbar {
-  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
   position: fixed;
   height: 100%;
   top: 0;
   left: 0;
   margin: 0;
   padding: 0;
   list-style: none;
   background-color: #fbfbfb;
@@ -389,26 +391,20 @@ body.loaded {
 
 #font-type-buttons > button:first-child,
 #font-size-buttons > button:first-child {
   border-left: 0;
 }
 
 #font-type-buttons > button {
   display: inline-block;
-  font-size: 58px;
+  font-size: 62px;
   height: 100px;
 }
 
-/* Make the serif button content the same size as the sans-serif button content. */
-#font-type-buttons > .serif-button {
-  padding-top: 1px;
-  font-size: 60px;
-}
-
 #font-size-buttons > button,
 #color-scheme-buttons > button {
   height: 60px;
 }
 
 #font-type-buttons > button:active:hover,
 #font-type-buttons > button.selected,
 #color-scheme-buttons > button:active:hover,
@@ -416,22 +412,62 @@ body.loaded {
   box-shadow: inset 0 -3px 0 0 #fc6420;
 }
 
 #font-type-buttons > button:active:hover,
 #font-type-buttons > button.selected {
   border-bottom: 1px solid #FC6420;
 }
 
-#font-type-buttons > button > div {
+/* Make the serif button content the same size as the sans-serif button content. */
+#font-type-buttons > button > .description {
   color: #666;
   font-size: 12px;
+  margin-top: -5px;
+}
+
+/* Font sizes are different per-platform, so we need custom CSS to line them up. */
+%ifdef XP_MACOSX
+#font-type-buttons > .sans-serif-button > .name {
+  margin-top: 10px;
+}
+
+#font-type-buttons > .sans-serif-button > .description {
   margin-top: -4px;
 }
 
+#font-type-buttons > .serif-button > .name {
+  font-size: 63px;
+}
+%elifdef XP_WIN
+#font-type-buttons > .sans-serif-button > .name {
+  margin-top: 2px;
+}
+
+#font-type-buttons > .sans-serif-button > .description {
+  margin-top: -4px;
+}
+
+#font-type-buttons > .serif-button > .name {
+  font-size: 63px;
+}
+%else
+#font-type-buttons > .sans-serif-button > .name {
+  margin-top: 5px;
+}
+
+#font-type-buttons > .sans-serif-button > .description {
+  margin-top: -8px;
+}
+
+#font-type-buttons > .serif-button > .name {
+  font-size: 70px;
+}
+%endif
+
 .button:hover,
 #font-size-buttons > button:hover,
 #font-type-buttons > button:hover {
   background-color: #ebebeb;
 }
 
 .dropdown.open,
 .button:active,
@@ -440,20 +476,16 @@ body.loaded {
   background-color: #dadada;
 }
 
 /* Only used on Android */
 #font-size-sample {
   display: none;
 }
 
-.serif-button {
-  font-family: "Charis SIL", Georgia, "Times New Roman", serif;
-}
-
 .minus-button,
 .plus-button {
   background-color: transparent;
   border: 0;
   background-size: 18px 18px;
   background-repeat: no-repeat;
   background-position: center;
 }
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -6,17 +6,17 @@ toolkit.jar:
 % skin global classic/1.0 %skin/classic/global/ os=WINNT osversion<6
 % skin global classic/1.0 %skin/classic/global/ os!=WINNT
 # NOTE: If you add a new file here, you'll need to add it to the aero
 # section at the bottom of this file
         skin/classic/global/about.css
         skin/classic/global/aboutCache.css
         skin/classic/global/aboutCacheEntry.css
         skin/classic/global/aboutMemory.css
-        skin/classic/global/aboutReader.css
+*       skin/classic/global/aboutReader.css
         skin/classic/global/aboutSupport.css
         skin/classic/global/appPicker.css
         skin/classic/global/arrow.css
 *       skin/classic/global/autocomplete.css
         skin/classic/global/button.css
         skin/classic/global/checkbox.css
         skin/classic/global/colorpicker.css
         skin/classic/global/commonDialog.css
@@ -212,17 +212,17 @@ toolkit.jar:
 
 #ifdef XP_WIN
 toolkit.jar:
 % skin global classic/1.0 %skin/classic/aero/global/ os=WINNT osversion>=6
         skin/classic/aero/global/about.css
         skin/classic/aero/global/aboutCache.css
         skin/classic/aero/global/aboutCacheEntry.css
         skin/classic/aero/global/aboutMemory.css
-        skin/classic/aero/global/aboutReader.css
+*       skin/classic/aero/global/aboutReader.css
         skin/classic/aero/global/aboutSupport.css
         skin/classic/aero/global/appPicker.css
         skin/classic/aero/global/arrow.css
 *       skin/classic/aero/global/autocomplete.css                        (autocomplete-aero.css)
         skin/classic/aero/global/button.css
         skin/classic/aero/global/checkbox.css
         skin/classic/aero/global/colorpicker.css
         skin/classic/aero/global/commonDialog.css