Bug 1151200 - Add content width control in reader mode. r=shorlander, r=jaws

modules/libpref/init/all.js

@@ -5248,6 +5248,9 @@ pref("reader.errors.includeURLs", false);
 // The default relative font size in reader mode (1-9)
 pref("reader.font_size", 5);
 
+// The default relative content width in reader mode (1-9)
+pref("reader.content_width", 3);
+
 // The default color scheme in reader mode (light, dark, sepia, auto)
 // auto = color automatically adjusts according to ambient light level
 // (auto only works on platforms where the 'devicelight' event is enabled)

toolkit/components/reader/AboutReader.jsm

@@ -109,6 +109,8 @@ var AboutReader = function(mm, win, articlePromise) {
 
   this._setupFontSizeButtons();
 
+  this._setupContentWidthButtons();
+
   if (win.speechSynthesis && Services.prefs.getBoolPref("narrate.enabled")) {
     new NarrateControls(mm, win);
   }
@@ -356,6 +358,74 @@ AboutReader.prototype = {
     }, true);
   },
 
+  _setContentWidth: function(newContentWidth) {
+    let containerClasses = this._doc.getElementById("container").classList;
+
+    if (this._contentWidth > 0)
+      containerClasses.remove("content-width" + this._contentWidth);
+
+    this._contentWidth = newContentWidth;
+    containerClasses.add("content-width" + this._contentWidth);
+    return AsyncPrefs.set("reader.content_width", this._contentWidth);
+  },
+
+  _setupContentWidthButtons: function() {
+    const CONTENT_WIDTH_MIN = 1;
+    const CONTENT_WIDTH_MAX = 9;
+
+    let currentLineHeight = Services.prefs.getIntPref("reader.content_width");
+    currentLineHeight = Math.max(CONTENT_WIDTH_MIN, Math.min(CONTENT_WIDTH_MAX, currentLineHeight));
+
+    let plusButton = this._doc.getElementById("content-width-plus");
+    let minusButton = this._doc.getElementById("content-width-minus");
+
+    function updateControls() {
+      if (currentLineHeight === CONTENT_WIDTH_MIN) {
+        minusButton.setAttribute("disabled", true);
+      } else {
+        minusButton.removeAttribute("disabled");
+      }
+      if (currentLineHeight === CONTENT_WIDTH_MAX) {
+        plusButton.setAttribute("disabled", true);
+      } else {
+        plusButton.removeAttribute("disabled");
+      }
+    }
+
+    updateControls();
+    this._setContentWidth(currentLineHeight);
+
+    plusButton.addEventListener("click", (event) => {
+      if (!event.isTrusted) {
+        return;
+      }
+      event.stopPropagation();
+
+      if (currentLineHeight >= CONTENT_WIDTH_MAX) {
+        return;
+      }
+
+      currentLineHeight++;
+      updateControls();
+      this._setContentWidth(currentLineHeight);
+    }, true);
+
+    minusButton.addEventListener("click", (event) => {
+      if (!event.isTrusted) {
+        return;
+      }
+      event.stopPropagation();
+
+      if (currentLineHeight <= CONTENT_WIDTH_MIN) {
+        return;
+      }
+
+      currentLineHeight--;
+      updateControls();
+      this._setContentWidth(currentLineHeight);
+    }, true);
+  },
+
   _handleDeviceLight: function(newLux) {
     // Desired size of the this._luxValues array.
     let luxValuesSize = 10;

toolkit/components/reader/content/aboutReader.html

@@ -53,6 +53,11 @@
           <button id="font-size-plus" class="plus-button"/>
         </div>
         <hr></hr>
+        <div id="content-width-buttons">
+          <button id="content-width-minus" class="content-width-minus-button"/>
+          <button id="content-width-plus" class="content-width-plus-button"/>
+        </div>
+        <hr></hr>
         <div id="color-scheme-buttons"></div>
         <div class="dropdown-arrow"/>
       </li>

toolkit/modules/AsyncPrefs.jsm

@@ -25,6 +25,7 @@ const kAllowedPrefs = new Set([
   "reader.font_size",
   "reader.font_type",
   "reader.color_scheme",
+  "reader.content_width",
 ]);
 
 const kPrefTypeMap = new Map([

toolkit/themes/shared/aboutReader.css

@@ -93,6 +93,42 @@ body.serif .remove-button  {
   font-size: 28px;
 }
 
+#container.content-width1 {
+  max-width: 20em;
+}
+
+#container.content-width2 {
+  max-width: 25em;
+}
+
+#container.content-width3 {
+  max-width: 30em;
+}
+
+#container.content-width4  {
+  max-width: 35em;
+}
+
+#container.content-width5 {
+  max-width: 40em;
+}
+
+#container.content-width6 {
+  max-width: 45em;
+}
+
+#container.content-width7 {
+  max-width: 50em;
+}
+
+#container.content-width8 {
+  max-width: 55em;
+}
+
+#container.content-width9 {
+  max-width: 60em;
+}
+
 /* Override some controls and content styles based on color scheme */
 
 body.light > .container > .header > .domain {

toolkit/themes/shared/aboutReaderControls.css

@@ -162,7 +162,8 @@
 
 #font-type-buttons,
 #font-size-buttons,
-#color-scheme-buttons {
+#color-scheme-buttons,
+#content-width-buttons {
   display: flex;
   flex-direction: row;
 }
@@ -182,13 +183,15 @@
 
 #font-type-buttons > button,
 #font-size-buttons > button,
-#color-scheme-buttons > button {
+#color-scheme-buttons > button,
+#content-width-buttons > button {
   text-align: center;
   border: 0;
 }
 
 #font-type-buttons > button,
-#font-size-buttons > button {
+#font-size-buttons > button,
+#content-width-buttons > button {
   width: 50%;
   background-color: transparent;
   border-left: 1px solid #B5B5B5;
@@ -206,7 +209,8 @@
 }
 
 #font-type-buttons > button:first-child,
-#font-size-buttons > button:first-child {
+#font-size-buttons > button:first-child,
+#content-width-buttons > button:first-child {
   border-left: 0;
 }
 
@@ -217,7 +221,8 @@
 }
 
 #font-size-buttons > button,
-#color-scheme-buttons > button {
+#color-scheme-buttons > button,
+#content-width-buttons > button {
   height: 60px;
 }
 
@@ -281,14 +286,17 @@
 
 .button:hover,
 #font-size-buttons > button:hover,
-#font-type-buttons > button:hover {
+#font-type-buttons > button:hover,
+#content-width-buttons > button:hover {
   background-color: #ebebeb;
 }
 
 .dropdown.open,
 .button:active,
 #font-size-buttons > button:active,
-#font-size-buttons > button.selected {
+#font-size-buttons > button.selected,
+#content-width-buttons > button:active,
+#content-width-buttons > button.selected {
   background-color: #dadada;
 }
 
@@ -298,7 +306,9 @@
 }
 
 .minus-button,
-.plus-button {
+.plus-button,
+.content-width-minus-button,
+.content-width-plus-button {
   background-color: transparent;
   border: 0;
   background-size: 18px 18px;
@@ -340,6 +350,16 @@
   background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
 }
 
+.content-width-minus-button {
+  background-size: 42px 16px;
+  background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
+}
+
+.content-width-plus-button {
+  background-size: 44px 16px;
+  background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
+}
+
 @media print {
   .toolbar {
     display: none !important;

toolkit/themes/shared/jar.inc.mn

@@ -52,6 +52,8 @@ toolkit.jar:
   skin/classic/global/reader/RM-Plus-24x24.svg             (../../shared/reader/RM-Plus-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)
+  skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg            (../../shared/reader/RM-Content-Width-Minus-42x16.svg)
+  skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg             (../../shared/reader/RM-Content-Width-Plus-44x16.svg)
 #ifdef MOZ_PLACES
   skin/classic/mozapps/places/defaultFavicon.png           (../../shared/places/defaultFavicon.png)
   skin/classic/mozapps/places/defaultFavicon@2x.png        (../../shared/places/defaultFavicon@2x.png)

toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="42"
+     height="16"
+     viewBox="0 0 42 16"
+     fill="#808080">
+
+  <path d="M14.5,7 L8.75,1.25 L10,-1.91791433e-15 L18,8 L17.375,8.625 L10,16 L8.75,14.75 L14.5,9 L1.13686838e-13,9 L1.13686838e-13,7 L14.5,7 Z"/>
+  <path d="M38.5,7 L32.75,1.25 L34,6.58831647e-15 L42,8 L41.375,8.625 L34,16 L32.75,14.75 L38.5,9 L24,9 L24,7 L38.5,7 Z" transform="translate(33.000000, 8.000000) scale(-1, 1) translate(-33.000000, -8.000000)"/>
+
+</svg>

toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="44"
+     height="16"
+     viewBox="0 0 44 16"
+     fill="#808080">
+
+  <path d="M14.5,7 L8.75,1.25 L10,-1.91791433e-15 L18,8 L17.375,8.625 L10,16 L8.75,14.75 L14.5,9 L1.13686838e-13,9 L1.13686838e-13,7 L14.5,7 Z" transform="translate(9.000000, 8.000000) scale(-1, 1) translate(-9.000000, -8.000000)"/>
+  <path d="M40.5,7 L34.75,1.25 L36,-5.17110888e-16 L44,8 L43.375,8.625 L36,16 L34.75,14.75 L40.5,9 L26,9 L26,7 L40.5,7 Z"/>
+
+</svg>