Bug 1134441 - Replace font size controls with +/- buttons. r=bnicholson

mobile/android/themes/core/aboutReader.css

@@ -33,12 +33,48 @@ body {
   font-family: serif;
 }
 
+.font-size1 {
+  font-size: 10px;
+}
+
+.font-size2 {
+  font-size: 12px;
+}
+
+.font-size3 {
+  font-size: 14px;
+}
+
+.font-size4  {
+  font-size: 16px;
+}
+
+.font-size5 {
+  font-size: 18px;
+}
+
+.font-size6 {
+  font-size: 20px;
+}
+
+.font-size7 {
+  font-size: 22px;
+}
+
+.font-size8 {
+  font-size: 24px;
+}
+
+.font-size9 {
+  font-size: 26px;
+}
+
 .message {
   margin-top: 40px;
   display: none;
   text-align: center;
   width: 100%;
-  font-size: 16px;
+  font-size: 0.9rem;
 }
 
 .header {
@@ -65,7 +101,7 @@ body {
 }
 
 .header > h1 {
-  font-size: 2.625em;
+  font-size: 1.33rem;
   font-weight: 700;
   line-height: 1.1em;
   width: 100%;
@@ -107,66 +143,19 @@ body {
   color: #aaaaaa;
 }
 
-.font-size1 > body > .header > h1 {
-  font-size: 27px;
-}
-
-.font-size2 > body > .header > h1 {
-  font-size: 29px;
-}
-
-.font-size3 > body > .header > h1 {
-  font-size: 31px;
-}
-
-.font-size4 > body > .header > h1 {
-  font-size: 33px;
-}
-
-.font-size5 > body > .header > h1 {
-  font-size: 35px;
-}
-
 /* This covers caption, domain, and credits
    texts in the reader UI */
 
-.font-size1 > body > .content .wp-caption-text,
+.content .wp-caption-text,
-.font-size1 > body > .content figcaption,
+.content figcaption,
-.font-size1 > body > .header > .domain,
+.header > .domain,
-.font-size1 > body > .header > .credits {
+.header > .credits {
-  font-size: 10px;
+  font-size: 0.9rem;
-}
-
-.font-size2 > body > .content .wp-caption-text,
-.font-size2 > body > .content figcaption,
-.font-size2 > body > .header > .domain,
-.font-size2 > body > .header > .credits {
-  font-size: 13px;
-}
-
-.font-size3 > body > .content .wp-caption-text,
-.font-size3 > body > .content figcaption,
-.font-size3 > body > .header > .domain,
-.font-size3 > body > .header > .credits {
-  font-size: 15px;
-}
-
-.font-size4 > body > .content .wp-caption-text,
-.font-size4 > body > .content figcaption,
-.font-size4 > body > .header > .domain,
-.font-size4 > body > .header > .credits {
-  font-size: 17px;
-}
-
-.font-size5 > body > .content .wp-caption-text,
-.font-size5 > body > .content figcaption,
-.font-size5 > body > .header > .domain,
-.font-size5 > body > .header > .credits {
-  font-size: 19px;
 }
 
 .content {
   display: none;
+  font-size: 1rem;
 }
 
 .content a {
@@ -295,31 +284,6 @@ body {
   list-style: decimal !important;
 }
 
-.font-size1-sample,
-.font-size1 > body > .content {
-  font-size: 14px !important;
-}
-
-.font-size2-sample,
-.font-size2 > body > .content {
-  font-size: 16px !important;
-}
-
-.font-size3-sample,
-.font-size3 > body > .content {
-  font-size: 18px !important;
-}
-
-.font-size4-sample,
-.font-size4 > body > .content {
-  font-size: 20px !important;
-}
-
-.font-size5-sample,
-.font-size5 > body > .content {
-  font-size: 22px !important;
-}
-
 .toolbar {
   font-family: "Clear Sans",sans-serif;
   transition-property: visibility, opacity;
@@ -361,7 +325,8 @@ body {
 }
 
 /* Remove dotted border when button is focused */
-.button::-moz-focus-inner {
+.button::-moz-focus-inner,
+#font-size-buttons > button::-moz-focus-inner {
   border: 0;
 }
 
@@ -427,6 +392,7 @@ body {
 }
 
 #font-type-buttons,
+#font-size-buttons,
 .segmented-button {
   display: flex;
   flex-direction: row;
@@ -436,13 +402,22 @@ body {
 }
 
 #font-type-buttons > li,
+#font-size-buttons > button,
 .segmented-button > li {
-  width: 50px; /* combined with flex, this acts as a minimum width */
   flex: 1 0 auto;
   text-align: center;
   line-height: 20px;
 }
 
+#font-type-buttons > li,
+#font-size-buttons > button {
+  width: 100px; /* combined with flex, this acts as a minimum width */
+}
+
+.segmented-button > li {
+  width: 50px; /* combined with flex, this acts as a minimum width */
+}
+
 #font-type-buttons > li {
   padding: 10px 0;
 }
@@ -451,6 +426,7 @@ body {
   border-left: 1px solid #B5B5B5;
 }
 
+#font-size-buttons > button:first-child,
 .segmented-button > li:first-child {
   border-left: 0px;
 }
@@ -496,6 +472,24 @@ body {
   font-size: 12px;
 }
 
+.minus-button,
+.plus-button {
+  background-color: transparent;
+  border: 0;
+  height: 30px;
+  background-size: 18px 18px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.minus-button {
+  background-size: 24px 6px;
+}
+
+.plus-button {
+  background-size: 24px 24px;
+}
+
  /* desktop-only controls */
 .close-button,
 .list-button {
@@ -518,6 +512,14 @@ body {
   background-image: url('chrome://browser/skin/images/reader-style-icon-mdpi.png');
 }
 
+.minus-button {
+  background-image: url('chrome://browser/skin/images/reader-minus-mdpi.png');
+}
+
+.plus-button {
+  background-image: url('chrome://browser/skin/images/reader-plus-mdpi.png');
+}
+
 @media screen and (min-resolution: 1.25dppx) {
   .dropdown-arrow {
     background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-hdpi.png');
@@ -538,6 +540,14 @@ body {
   .style-button {
     background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
   }
+
+  .minus-button {
+    background-image: url('chrome://browser/skin/images/reader-minus-hdpi.png');
+  }
+
+  .plus-button {
+    background-image: url('chrome://browser/skin/images/reader-plus-hdpi.png');
+  }
 }
 
 @media screen and (min-resolution: 2dppx) {
@@ -560,6 +570,14 @@ body {
   .style-button {
     background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
   }
+
+  .minus-button {
+    background-image: url('chrome://browser/skin/images/reader-minus-xhdpi.png');
+  }
+
+  .plus-button {
+    background-image: url('chrome://browser/skin/images/reader-plus-xhdpi.png');
+  }
 }
 
 @media screen and (orientation: portrait) {

mobile/android/themes/core/jar.mn

@@ -89,6 +89,12 @@ chrome.jar:
   skin/images/reader-dropdown-arrow-mdpi.png     (images/reader-dropdown-arrow-mdpi.png)
   skin/images/reader-dropdown-arrow-hdpi.png     (images/reader-dropdown-arrow-hdpi.png)
   skin/images/reader-dropdown-arrow-xhdpi.png    (images/reader-dropdown-arrow-xhdpi.png)
+  skin/images/reader-minus-mdpi.png              (images/reader-minus-mdpi.png)
+  skin/images/reader-minus-hdpi.png              (images/reader-minus-hdpi.png)
+  skin/images/reader-minus-xhdpi.png             (images/reader-minus-xhdpi.png)
+  skin/images/reader-plus-mdpi.png               (images/reader-plus-mdpi.png)
+  skin/images/reader-plus-hdpi.png               (images/reader-plus-hdpi.png)
+  skin/images/reader-plus-xhdpi.png              (images/reader-plus-xhdpi.png)
   skin/images/reader-toggle-on-icon-mdpi.png     (images/reader-toggle-on-icon-mdpi.png)
   skin/images/reader-toggle-on-icon-hdpi.png     (images/reader-toggle-on-icon-hdpi.png)
   skin/images/reader-toggle-on-icon-xhdpi.png    (images/reader-toggle-on-icon-xhdpi.png)

modules/libpref/init/all.js

@@ -4556,8 +4556,8 @@ pref("reader.parse-on-load.enabled", true);
 // is disabled by default.
 pref("reader.parse-on-load.force-enabled", false);
 
-// The default relative font size in reader mode (1-5)
+// The default relative font size in reader mode (1-9)
-pref("reader.font_size", 3);
+pref("reader.font_size", 5);
 
 // The default color scheme in reader mode (light, dark, sepia, auto)
 // auto = color automatically adjusts according to ambient light level

toolkit/components/reader/AboutReader.jsm

@@ -89,28 +89,7 @@ let AboutReader = function(mm, win) {
   this._setupSegmentedButton("font-type-buttons", fontTypeOptions, fontType, this._setFontType.bind(this));
   this._setFontType(fontType);
 
-  let fontSizeSample = gStrings.GetStringFromName("aboutReader.fontSizeSample");
+  this._setupFontSizeButtons();
-  let fontSizeOptions = [
-    { name: fontSizeSample,
-      value: 1,
-      linkClass: "font-size1-sample" },
-    { name: fontSizeSample,
-      value: 2,
-      linkClass: "font-size2-sample" },
-    { name: fontSizeSample,
-      value: 3,
-      linkClass: "font-size3-sample" },
-    { name: fontSizeSample,
-      value: 4,
-      linkClass: "font-size4-sample" },
-    { name: fontSizeSample,
-      value: 5,
-      linkClass: "font-size5-sample" }
-  ];
-
-  let fontSize = Services.prefs.getIntPref("reader.font_size");
-  this._setupSegmentedButton("font-size-buttons", fontSizeOptions, fontSize, this._setFontSize.bind(this));
-  this._setFontSize(fontSize);
 
   // Track status of reader toolbar add/remove toggle button
   this._isReadingListItem = -1;
@@ -307,6 +286,63 @@ AboutReader.prototype = {
     });
   },
 
+  _setupFontSizeButtons: function() {
+    const FONT_SIZE_MIN = 1;
+    const FONT_SIZE_MAX = 9;
+
+    let currentSize = Services.prefs.getIntPref("reader.font_size");
+    currentSize = Math.max(FONT_SIZE_MIN, Math.min(FONT_SIZE_MAX, currentSize));
+
+    let plusButton = this._doc.getElementById("font-size-plus");
+    let minusButton = this._doc.getElementById("font-size-minus");
+
+    function updateControls() {
+      if (currentSize === FONT_SIZE_MIN) {
+        minusButton.setAttribute("disabled", true);
+      } else {
+        minusButton.removeAttribute("disabled");
+      }
+      if (currentSize === FONT_SIZE_MAX) {
+        plusButton.setAttribute("disabled", true);
+      } else {
+        plusButton.removeAttribute("disabled");
+      }
+    }
+
+    updateControls();
+    this._setFontSize(currentSize);
+
+    plusButton.addEventListener("click", (event) => {
+      if (!event.isTrusted) {
+        return;
+      }
+      event.stopPropagation();
+
+      if (currentSize >= FONT_SIZE_MAX) {
+        return;
+      }
+
+      currentSize++;
+      updateControls();
+      this._setFontSize(currentSize);
+    }, true);
+
+    minusButton.addEventListener("click", (event) => {
+      if (!event.isTrusted) {
+        return;
+      }
+      event.stopPropagation();
+
+      if (currentSize <= FONT_SIZE_MIN) {
+        return;
+      }
+
+      currentSize--;
+      updateControls();
+      this._setFontSize(currentSize);
+    }, true);
+  },
+
   _handleDeviceLight: function Reader_handleDeviceLight(newLux) {
     // Desired size of the this._luxValues array.
     let luxValuesSize = 10;

toolkit/components/reader/content/aboutReader.html

@@ -32,7 +32,10 @@
       <li class="dropdown-popup">
         <ul id="font-type-buttons"></ul>
         <hr></hr>
-        <ul id="font-size-buttons" class="segmented-button"></ul>
+        <div id="font-size-buttons">
+          <button id="font-size-minus" class="minus-button"/>
+          <button id="font-size-plus" class="plus-button"/>
+        </div>
         <hr></hr>
         <ul id="color-scheme-buttons" class="segmented-button"></ul>
         <div class="dropdown-arrow"/>

toolkit/locales/en-US/chrome/global/aboutReader.properties

@@ -18,10 +18,6 @@ aboutReader.fontType.sans-serif=Sans-serif
 # 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.toolbar.close=Close Reader View
 aboutReader.toolbar.typeControls=Type controls
 aboutReader.toolbar.addToReadingList=Add to Reading List

toolkit/themes/osx/global/jar.mn

@@ -200,6 +200,8 @@ toolkit.jar:
   skin/classic/global/reader/RM-Close-24x24.svg                      (../../shared/reader/RM-Close-24x24.svg)
   skin/classic/global/reader/RM-Close-hover-24x24.svg                (../../shared/reader/RM-Close-hover-24x24.svg)
   skin/classic/global/reader/RM-Delete-24x24.svg                     (../../shared/reader/RM-Delete-24x24.svg)
+  skin/classic/global/reader/RM-Minus-24x24.svg                      (../../shared/reader/RM-Minus-24x24.svg)
+  skin/classic/global/reader/RM-Plus-24x24.svg                       (../../shared/reader/RM-Plus-24x24.svg)
   skin/classic/global/reader/RM-Reading-List-24x24.svg               (../../shared/reader/RM-Reading-List-24x24.svg)
   skin/classic/global/reader/RM-Type-Controls-24x24.svg              (../../shared/reader/RM-Type-Controls-24x24.svg)
   skin/classic/global/reader/RM-Type-Controls-Arrow.svg              (../../shared/reader/RM-Type-Controls-Arrow.svg)

toolkit/themes/shared/reader/RM-Minus-24x24.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#808080" d="M0,13.5v-3h24v3H0z"/>
+<g enable-background="new    ">
+    <g>
+        <defs>
+            <rect id="SVGID_2_" x="-269.917" y="-1054" width="22" height="34"/>
+        </defs>
+        <clipPath id="SVGID_1_">
+            <use xlink:href="#SVGID_2_"  overflow="visible"/>
+        </clipPath>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_6_" x="-365.917" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_3_">
+                <use xlink:href="#SVGID_6_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_10_" x="-365.917" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_5_">
+                <use xlink:href="#SVGID_10_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_16_" x="-365.917" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_7_">
+                <use xlink:href="#SVGID_16_"  overflow="visible"/>
+            </clipPath>
+        </g>
+    </g>
+</g>
+</svg>

toolkit/themes/shared/reader/RM-Plus-24x24.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#808080" d="M24,13.5H13.5V24h-3V13.5H0v-3h10.5V0h3v10.5H24V13.5z"/>
+<g enable-background="new    ">
+    <g>
+        <defs>
+            <rect id="SVGID_2_" x="-233.667" y="-1054" width="22" height="34"/>
+        </defs>
+        <clipPath id="SVGID_1_">
+            <use xlink:href="#SVGID_2_"  overflow="visible"/>
+        </clipPath>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_6_" x="-329.667" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_3_">
+                <use xlink:href="#SVGID_6_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_10_" x="-329.667" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_5_">
+                <use xlink:href="#SVGID_10_"  overflow="visible"/>
+            </clipPath>
+        </g>
+        <g clip-path="url(#SVGID_1_)">
+            <defs>
+                <rect id="SVGID_16_" x="-329.667" y="-1459" width="1080" height="2896"/>
+            </defs>
+            <clipPath id="SVGID_7_">
+                <use xlink:href="#SVGID_16_"  overflow="visible"/>
+            </clipPath>
+        </g>
+    </g>
+</g>
+</svg>

toolkit/themes/windows/global/aboutReader.css

@@ -35,31 +35,42 @@ body {
   font-family: serif;
 }
 
-.font-size1,
+.font-size1 {
-.font-size1-sample {
+  font-size: 10px;
+}
+
+.font-size2 {
+  font-size: 12px;
+}
+
+.font-size3 {
   font-size: 14px;
 }
 
-.font-size2,
+.font-size4  {
-.font-size2-sample {
   font-size: 16px;
 }
 
-.font-size3,
+.font-size5 {
-.font-size3-sample {
   font-size: 18px;
 }
 
-.font-size4,
+.font-size6 {
-.font-size4-sample {
   font-size: 20px;
 }
 
-.font-size5,
+.font-size7 {
-.font-size5-sample {
   font-size: 22px;
 }
 
+.font-size8 {
+  font-size: 24px;
+}
+
+.font-size9 {
+  font-size: 26px;
+}
+
 
 /* Loading/error message */
 
@@ -297,6 +308,7 @@ body {
 }
 
 #font-type-buttons,
+#font-size-buttons,
 .segmented-button {
   display: flex;
   flex-direction: row;
@@ -306,6 +318,7 @@ body {
 }
 
 #font-type-buttons > li,
+#font-size-buttons > button,
 .segmented-button > li {
   flex: 1 0 auto;
   text-align: center;
@@ -313,8 +326,9 @@ body {
   padding: 10px;
 }
 
-#font-type-buttons > li {
+#font-type-buttons > li,
-  width: 50px; /* combined with flex, this acts as a minimum width */
+#font-size-buttons > button {
+  width: 100px; /* combined with flex, this acts as a minimum width */
 }
 
 .segmented-button > li {
@@ -323,6 +337,7 @@ body {
 }
 
 #font-type-buttons > li:first-child,
+#font-size-buttons > button:first-child,
 .segmented-button > li:first-child {
   border-left: 0px;
 }
@@ -371,6 +386,16 @@ body {
   font-size: 12px;
 }
 
+.minus-button,
+.plus-button {
+  background-color: transparent;
+  border: 0;
+  height: 50px;
+  background-size: 18px 18px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 /* Android-only controls */
 .share-button {
   display: none;
@@ -403,3 +428,11 @@ body {
 .list-button {
   background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg");
 }
+
+.minus-button {
+  background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
+}
+
+.plus-button {
+  background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
+}

toolkit/themes/windows/global/jar.mn

@@ -191,6 +191,8 @@ toolkit.jar:
         skin/classic/global/reader/RM-Close-24x24.svg            (../../shared/reader/RM-Close-24x24.svg)
         skin/classic/global/reader/RM-Close-hover-24x24.svg      (../../shared/reader/RM-Close-hover-24x24.svg)
         skin/classic/global/reader/RM-Delete-24x24.svg           (../../shared/reader/RM-Delete-24x24.svg)
+        skin/classic/global/reader/RM-Minus-24x24.svg            (../../shared/reader/RM-Minus-24x24.svg)
+        skin/classic/global/reader/RM-Plus-24x24.svg             (../../shared/reader/RM-Plus-24x24.svg)
         skin/classic/global/reader/RM-Reading-List-24x24.svg     (../../shared/reader/RM-Reading-List-24x24.svg)
         skin/classic/global/reader/RM-Type-Controls-24x24.svg    (../../shared/reader/RM-Type-Controls-24x24.svg)
         skin/classic/global/reader/RM-Type-Controls-Arrow.svg    (../../shared/reader/RM-Type-Controls-Arrow.svg)
@@ -395,6 +397,8 @@ toolkit.jar:
         skin/classic/aero/global/reader/RM-Close-24x24.svg               (../../shared/reader/RM-Close-24x24.svg)
         skin/classic/aero/global/reader/RM-Close-hover-24x24.svg         (../../shared/reader/RM-Close-hover-24x24.svg)
         skin/classic/aero/global/reader/RM-Delete-24x24.svg              (../../shared/reader/RM-Delete-24x24.svg)
+        skin/classic/aero/global/reader/RM-Minus-24x24.svg               (../../shared/reader/RM-Minus-24x24.svg)
+        skin/classic/aero/global/reader/RM-Plus-24x24.svg                (../../shared/reader/RM-Plus-24x24.svg)
         skin/classic/aero/global/reader/RM-Reading-List-24x24.svg        (../../shared/reader/RM-Reading-List-24x24.svg)
         skin/classic/aero/global/reader/RM-Type-Controls-24x24.svg       (../../shared/reader/RM-Type-Controls-24x24.svg)
         skin/classic/aero/global/reader/RM-Type-Controls-Arrow.svg       (../../shared/reader/RM-Type-Controls-Arrow.svg)